diff --git a/LICENSE.txt b/LICENSE.txt
index 206d51f104cc992019b3e4f29abe4b632ec82dbd..f2ff140eaf7e901add341f9cc18ab1d0f8660030 100644
--- a/LICENSE.txt
+++ b/LICENSE.txt
@@ -244,6 +244,7 @@ Applications:
          - All other flag icons: public domain, courtesy mjames@gmail.com http://www.famfamfam.com/
        Silk icons: See licenses/LICENSE-SilkIcons.txt
        FatCow icons: See licenses/LICENSE-FatCowIcons.txt
+       Fugue Icons: See licenses/LICENSE-FugueIcons.txt
 
        GeoIP Data:
        This product includes GeoLite data created by MaxMind, available from http://www.maxmind.com/
diff --git a/apps/i2psnark/java/build.xml b/apps/i2psnark/java/build.xml
index 3ecde039383a1d13a66fa19cbbd0c083ee5fbb9d..523d9f3660f5b120283fb13e206ee1dd6af19d79 100644
--- a/apps/i2psnark/java/build.xml
+++ b/apps/i2psnark/java/build.xml
@@ -276,7 +276,7 @@
             <!-- we really don't need all of these -->
             <fileset dir="../../../installer/resources/themes/console/images/" />
         </copy>
-        <copy file="../../../installer/resources/themes/console/dark/images/transparent.gif"
+        <copy file="../../../installer/resources/themes/console/images/transparent.gif"
               todir="build/standalone-resources/.resources/themes/snark/ubergine/images" />
         <copy file="../../../installer/resources/themes/console/dark/images/header.png"
               todir="build/standalone-resources/.resources/themes/snark/ubergine/images" />
diff --git a/apps/i2psnark/java/src/org/klomp/snark/Peer.java b/apps/i2psnark/java/src/org/klomp/snark/Peer.java
index 1cf1d9aaae5d8b4f502502f071001f0758005c95..73588d12a9e1a05d4a3b466d7f867fd9b5c479f4 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/Peer.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/Peer.java
@@ -173,7 +173,7 @@ public class Peer implements Comparable<Peer>
     if (state != null) {
         String r = state.getRequests();
         if (r != null)
-            return sock.toString() + "<br>Requests: " + r;
+            return sock.toString() + "<br><b>Requests:</b> <span class=\"debugRequests\">" + r + "</span>";
     }
     return sock.toString();
   }
diff --git a/apps/i2psnark/java/src/org/klomp/snark/SnarkManager.java b/apps/i2psnark/java/src/org/klomp/snark/SnarkManager.java
index 77964cb6b4a7beac058f779e352cd7da8698dbb9..6735d4299475e1b3511747eaa95918b24940ec9c 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/SnarkManager.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/SnarkManager.java
@@ -1246,7 +1246,7 @@ public class SnarkManager implements CompleteListener, ClientApp {
         if (theme != null) {
             if(!theme.equals(_config.getProperty(PROP_THEME))) {
                 _config.setProperty(PROP_THEME, theme);
-                addMessage(_t("{0} theme loaded, return to main i2psnark page to view.", theme));
+                addMessage(_t("{0} theme loaded.", theme));
                 changed = true;
             }
         }
diff --git a/apps/i2psnark/java/src/org/klomp/snark/dht/DHTNodes.java b/apps/i2psnark/java/src/org/klomp/snark/dht/DHTNodes.java
index 820709069847852da6875821ac4fcd5c2acce170..55778eea2c49edd6ae960584da21ffa039161063 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/dht/DHTNodes.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/dht/DHTNodes.java
@@ -138,7 +138,7 @@ class DHTNodes {
      * @since 0.9.4
      */
     public void renderStatusHTML(StringBuilder buf) {
-        buf.append(_kad.toString().replace("\n", "<br>\n"));
+        buf.append(_kad.toString().replace("\n", "<br><hr class=\"debug\">\n"));
     }
 
     /** */
diff --git a/apps/i2psnark/java/src/org/klomp/snark/dht/DHTTracker.java b/apps/i2psnark/java/src/org/klomp/snark/dht/DHTTracker.java
index 784d8e6bff24fea169c8ea02de67ecfabf1a0fc6..9b8fb32c52ba39164adf7cc7813ea10c4ce8bbec 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/dht/DHTTracker.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/dht/DHTTracker.java
@@ -140,7 +140,7 @@ class DHTTracker {
      * Debug info, HTML formatted
      */
     public void renderStatusHTML(StringBuilder buf) {
-        buf.append("DHT tracker: ").append(_torrentCount).append(" torrents ")
+        buf.append("<b>DHT tracker:</b> ").append(_torrentCount).append(" torrents ")
            .append(_peerCount).append(" peers ")
            .append(DataHelper.formatDuration(_expireTime)).append(" expiration<br>");
     }
diff --git a/apps/i2psnark/java/src/org/klomp/snark/dht/KRPC.java b/apps/i2psnark/java/src/org/klomp/snark/dht/KRPC.java
index 1ebf975109d9916fc7a90085a4e005955fbc861a..46d4476dcea64a7677a45f24ee0244295d3cc295 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/dht/KRPC.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/dht/KRPC.java
@@ -682,17 +682,17 @@ public class KRPC implements I2PSessionMuxedListener, DHT {
     public String renderStatusHTML() {
         long uptime = Math.max(1000, _context.clock().now() - _started);
         StringBuilder buf = new StringBuilder(256);
-        buf.append("<br><b>DHT DEBUG</b><br>TX: ").append(_txPkts.get()).append(" pkts / ")
+        buf.append("<br><hr class=\"debug\"><b>DHT DEBUG</b><br><hr class=\"debug\"><hr><b>TX:</b> ").append(_txPkts.get()).append(" pkts / ")
            .append(DataHelper.formatSize2(_txBytes.get())).append("B / ")
            .append(DataHelper.formatSize2(_txBytes.get() * 1000 / uptime)).append("Bps<br>" +
-                   "RX: ").append(_rxPkts.get()).append(" pkts / ")
+                   "<b>RX:</b> ").append(_rxPkts.get()).append(" pkts / ")
            .append(DataHelper.formatSize2(_rxBytes.get())).append("B / ")
            .append(DataHelper.formatSize2(_rxBytes.get() * 1000 / uptime)).append("Bps<br>" +
-                   "DHT Peers: ").append( _knownNodes.size()).append("<br>" +
-                   "Blacklisted: ").append(_blacklist.size()).append("<br>" +
-                   "Sent tokens: ").append(_outgoingTokens.size()).append("<br>" +
-                   "Rcvd tokens: ").append(_incomingTokens.size()).append("<br>" +
-                   "Pending queries: ").append(_sentQueries.size()).append("<br>");
+                   "<b>DHT Peers:</b> ").append( _knownNodes.size()).append("<br>" +
+                   "<b>Blacklisted:</b> ").append(_blacklist.size()).append("<br>" +
+                   "<b>Sent tokens:</b> ").append(_outgoingTokens.size()).append("<br>" +
+                   "<b>Rcvd tokens:</b> ").append(_incomingTokens.size()).append("<br>" +
+                   "<b>Pending queries:</b> ").append(_sentQueries.size()).append("<br><br><hr class=\"debug\">");
         _tracker.renderStatusHTML(buf);
         _knownNodes.renderStatusHTML(buf);
         return buf.toString();
diff --git a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
index 1612ff2fab011324916a05b4c9c5c63d0407d93a..9d8b93f050011aa6ac785aca04f2a76c60a3ed1a 100644
--- a/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
+++ b/apps/i2psnark/java/src/org/klomp/snark/web/I2PSnarkServlet.java
@@ -62,7 +62,7 @@ public class I2PSnarkServlet extends BasicServlet {
     private String _themePath;
     private String _imgPath;
     private String _lastAnnounceURL;
-    
+
     private static final String DEFAULT_NAME = "i2psnark";
     public static final String PROP_CONFIG_FILE = "i2psnark.configFile";
     private static final String WARBASE = "/.resources/";
@@ -264,7 +264,7 @@ public class I2PSnarkServlet extends BasicServlet {
             sendRedirect(req, resp, peerString);
             return;	
         }
-        
+
         setHTMLHeaders(resp);
         PrintWriter out = resp.getWriter();
         out.write(DOCTYPE + "<html>\n" +
@@ -283,7 +283,7 @@ public class I2PSnarkServlet extends BasicServlet {
         if ("2".equals(peerParam))
             out.write(" | Debug Mode");
         out.write("</title>\n");
-                                         
+
         // we want it to go to the base URI so we don't refresh with some funky action= value
         int delay = 0;
         if (!isConfigure) {
@@ -291,7 +291,8 @@ public class I2PSnarkServlet extends BasicServlet {
             if (delay > 0) {
                 String jsPfx = _context.isRouterContext() ? "" : ".resources";
                 String downMsg = _context.isRouterContext() ? _t("Router is down") : _t("I2PSnark has stopped");
-                //out.write("<meta http-equiv=\"refresh\" content=\"" + delay + ";/i2psnark/" + peerString + "\">\n");
+                // fallback to metarefresh when javascript is disabled
+                out.write("<noscript><meta http-equiv=\"refresh\" content=\"" + delay + ";/i2psnark/" + peerString + "\"></noscript>\n");
                 out.write("<script src=\"" + jsPfx + "/js/ajax.js\" type=\"text/javascript\"></script>\n" +
                           "<script type=\"text/javascript\">\n"  +
                           "var failMessage = \"<div class=\\\"routerdown\\\"><b>" + downMsg + "<\\/b><\\/div>\";\n" +
@@ -313,8 +314,6 @@ public class I2PSnarkServlet extends BasicServlet {
             out.write("<div class=\"snarknavbar\"><a href=\"" + _contextPath + "/\" title=\"");
             out.write(_t("Torrents"));
             out.write("\" class=\"snarkRefresh\">");
-            out.write(toThemeImg("arrow_refresh"));
-            out.write("&nbsp;&nbsp;");
             if (_contextName.equals(DEFAULT_NAME))
                 out.write(_t("I2PSnark"));
             else
@@ -324,8 +323,6 @@ public class I2PSnarkServlet extends BasicServlet {
             out.write("<div class=\"snarknavbar\"><a href=\"" + _contextPath + '/' + peerString + "\" title=\"");
             out.write(_t("Refresh page"));
             out.write("\" class=\"snarkRefresh\">");
-            out.write(toThemeImg("arrow_refresh"));
-            out.write("&nbsp;&nbsp;");
             if (_contextName.equals(DEFAULT_NAME))
                 out.write(_t("I2PSnark"));
             else
@@ -394,7 +391,7 @@ public class I2PSnarkServlet extends BasicServlet {
     private void writeMessages(PrintWriter out, boolean isConfigure, String peerString) throws IOException {
         List<String> msgs = _manager.getMessages();
         if (!msgs.isEmpty()) {
-            out.write("<div class=\"snarkMessages\">");
+            out.write("\n<div class=\"snarkMessages\">");
             out.write("<a href=\"" + _contextPath + '/');
             if (isConfigure)
                 out.write("configure");
@@ -406,12 +403,12 @@ public class I2PSnarkServlet extends BasicServlet {
             String tx = _t("clear messages");
             out.write(toThemeImg("delete", tx, tx));
             out.write("</a>" +
-                      "<ul>");
+                      "\n<ul>\n");
             for (int i = msgs.size()-1; i >= 0; i--) {
                 String msg = msgs.get(i);
                 out.write("<li>" + msg + "</li>\n");
             }
-            out.write("</ul></div>");
+            out.write("</ul>\n</div>");
         }
     }
 
@@ -506,7 +503,7 @@ public class I2PSnarkServlet extends BasicServlet {
                                       : tx));
         if (showSort)
             out.write("</a>");
-        out.write("</th>\n<th align=\"center\">");
+        out.write("</th>\n<th id=\"pagenav\" align=\"center\">");
         if (total > 0 && (start > 0 || total > pageSize)) {
             writePageNav(out, req, start, pageSize, total, noThinsp);
         }
@@ -633,7 +630,6 @@ public class I2PSnarkServlet extends BasicServlet {
             for (Snark s : snarks) {
                 if (s.isStopped()) {
                     // show startall too
-                    out.write("<br>");
                     if (isDegraded)
                         out.write("<a href=\"" + _contextPath + "/?action=StartAll&amp;nonce=" + _nonce + "\"><img title=\"");
                     else
@@ -682,7 +678,7 @@ public class I2PSnarkServlet extends BasicServlet {
         } else /** if (snarks.size() > 1) */ {
             out.write("<tfoot><tr>\n" +
                       "    <th align=\"left\" colspan=\"6\">");
-            out.write("&nbsp;");
+            out.write("<span id=\"totals\">");
             out.write(_t("Totals"));
             out.write(":&nbsp;");
             out.write(ngettext("1 torrent", "{0} torrents", total));
@@ -705,10 +701,13 @@ public class I2PSnarkServlet extends BasicServlet {
                 // Only truncate if it's an actual dest
                 out.write(";&nbsp;");
                 out.write(_t("Dest"));
-                out.write(":&nbsp;<tt>");
+                out.write(":&nbsp;<tt title=\"");
+                out.write(_t("Our destination (identity) for this session"));
+                out.write("\">");
                 out.write(IPString.substring(0, 4));
                 out.write("</tt>");
             }
+            out.write("</span>");
             if (dht != null) {
                 if (showDebug)
                     out.write(dht.renderStatusHTML());
@@ -725,13 +724,14 @@ public class I2PSnarkServlet extends BasicServlet {
             }
             out.write("</tr></tfoot>\n");
         }
-        
+
         out.write("</table>");
         if (isForm)
             out.write("</form>\n");
+
         return start == 0;
     }
-    
+
     /**
      *  hidden inputs for nonce and paramters p, st, and sort
      *
@@ -744,7 +744,7 @@ public class I2PSnarkServlet extends BasicServlet {
         writeHiddenInputs(buf, req, action);
         out.write(buf.toString());
     }
-    
+
     /**
      *  hidden inputs for nonce and paramters p, st, and sort
      *
@@ -775,7 +775,7 @@ public class I2PSnarkServlet extends BasicServlet {
                .append(action).append("\" >\n");
         }
     }
-    
+
     /**
      *  Build HTML-escaped and stripped query string
      *
@@ -820,7 +820,7 @@ public class I2PSnarkServlet extends BasicServlet {
         }
         return buf.toString();
     }
-    
+
     /**
      *  @since 0.9.6
      */
@@ -832,7 +832,7 @@ public class I2PSnarkServlet extends BasicServlet {
                 out.write("<a href=\"" + _contextPath);
                 out.write(getQueryString(req, null, "", null));
                 out.write("\">");
-                out.write(toThemeImg("control_rewind_blue", _t("First"), _t("First page")));
+                out.write(toThemeImg("first", _t("First"), _t("First page")));
                 out.write("</a>&nbsp;");
                 int prev = Math.max(0, start - pageSize);
                 //if (prev > 0) {
@@ -842,16 +842,16 @@ public class I2PSnarkServlet extends BasicServlet {
                     String sprev = (prev > 0) ? Integer.toString(prev) : "";
                     out.write(getQueryString(req, null, sprev, null));
                     out.write("\">");
-                    out.write(toThemeImg("control_back_blue", _t("Prev"), _t("Previous page")));
+                    out.write(toThemeImg("previous", _t("Prev"), _t("Previous page")));
                     out.write("</a>&nbsp;");
                 }
             } else {
                 out.write(
                           "<img alt=\"\" border=\"0\" class=\"disable\" src=\"" +
-                          _imgPath + "control_rewind_blue.png\">" +
+                          _imgPath + "first.png\">" +
                           "&nbsp;" +
                           "<img alt=\"\" border=\"0\" class=\"disable\" src=\"" +
-                          _imgPath + "control_back_blue.png\">" +
+                          _imgPath + "previous.png\">" +
                           "&nbsp;");
             }
             // Page count
@@ -875,7 +875,7 @@ public class I2PSnarkServlet extends BasicServlet {
                     out.write("&nbsp;<a href=\"" + _contextPath);
                     out.write(getQueryString(req, null, Integer.toString(next), null));
                     out.write("\">");
-                    out.write(toThemeImg("control_play_blue", _t("Next"), _t("Next page")));
+                    out.write(toThemeImg("next", _t("Next"), _t("Next page")));
                     out.write("</a>&nbsp;");
                 }
                 // Last
@@ -883,18 +883,18 @@ public class I2PSnarkServlet extends BasicServlet {
                 out.write("&nbsp;<a href=\"" + _contextPath);
                 out.write(getQueryString(req, null, Integer.toString(last), null));
                 out.write("\">");
-                out.write(toThemeImg("control_fastforward_blue", _t("Last"), _t("Last page")));
+                out.write(toThemeImg("last", _t("Last"), _t("Last page")));
                 out.write("</a>&nbsp;");
             } else {
                 out.write("&nbsp;" +
                           "<img alt=\"\" border=\"0\" class=\"disable\" src=\"" +
-                          _imgPath + "control_play_blue.png\">" +
+                          _imgPath + "next.png\">" +
                           "&nbsp;" +
                           "<img alt=\"\" border=\"0\" class=\"disable\" src=\"" +
-                          _imgPath + "control_fastforward_blue.png\">");
+                          _imgPath + "last.png\">");
             }
     }
-    
+
     /**
      * Do what they ask, adding messages to _manager.addMessage as necessary
      */
@@ -937,7 +937,7 @@ public class I2PSnarkServlet extends BasicServlet {
                 String canonical = null;
                 try {
                     canonical = local.getCanonicalPath();
-                    
+
                     if (local.exists()) {
                         if (_manager.getTorrent(canonical) != null)
                             _manager.addMessage(_t("Torrent already running: {0}", newFile));
@@ -1419,7 +1419,7 @@ public class I2PSnarkServlet extends BasicServlet {
             _manager.addMessage("Unknown POST action: \"" + action + '\"');
         }
     }
-    
+
     private static final String iopts[] = {"inbound.length", "inbound.quantity",
                                            "outbound.length", "outbound.quantity" };
 
@@ -1514,26 +1514,26 @@ public class I2PSnarkServlet extends BasicServlet {
             remainingSeconds = needed / downBps;
         else
             remainingSeconds = -1;
-        
+
         MetaInfo meta = snark.getMetaInfo();
         String b64 = Base64.encode(snark.getInfoHash());
         String b64Short = b64.substring(0, 6);
         // isValid means isNotMagnet
         boolean isValid = meta != null;
         boolean isMultiFile = isValid && meta.getFiles() != null;
-        
+
         String err = snark.getTrackerProblems();
         int knownPeers = Math.max(curPeers, snark.getTrackerSeenPeers());
-        
+
         String rowClass = (row % 2 == 0 ? "snarkTorrentEven" : "snarkTorrentOdd");
         String statusString;
         if (snark.isChecking()) {
             statusString = toThemeImg("stalled", "", _t("Checking")) + "</td>" +
-                           "<td class=\"snarkTorrentStatus\">" + _t("Checking") + ' ' +
+                           "<td class=\"snarkTorrentStatus\"><b>" + _t("Checking") + "</b>" + ' ' +
                            (new DecimalFormat("0.00%")).format(snark.getCheckingProgress());
         } else if (snark.isAllocating()) {
             statusString = toThemeImg("stalled", "", _t("Allocating")) + "</td>" +
-                           "<td class=\"snarkTorrentStatus\">" + _t("Allocating");
+                           "<td class=\"snarkTorrentStatus\"><b>" + _t("Allocating") + "</b>";
         } else if (err != null && isRunning && curPeers == 0) {
         //} else if (err != null && curPeers == 0) {
             // Also don't show if seeding... but then we won't see the not-registered error
@@ -1548,8 +1548,8 @@ public class I2PSnarkServlet extends BasicServlet {
             //else if (isRunning)
             //if (isRunning) {
                 statusString = toThemeImg("trackererror", "", err) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + _t("Tracker Error") +
-                               ": " + curPeers + thinsp(noThinsp) +
+                               "<td class=\"snarkTorrentStatus\"><b>" + _t("Tracker Error") +
+                               ":</b> " + curPeers + thinsp(noThinsp) +
                                ngettext("1 peer", "{0} peers", knownPeers);
             //} else {
             //    if (err.length() > MAX_DISPLAYED_ERROR_LENGTH)
@@ -1561,7 +1561,7 @@ public class I2PSnarkServlet extends BasicServlet {
             //}
         } else if (snark.isStarting()) {
             statusString = toThemeImg("stalled", "", _t("Starting")) + "</td>" +
-                           "<td class=\"snarkTorrentStatus\">" + _t("Starting");
+                           "<td class=\"snarkTorrentStatus\"><b class=\"alwaysShow\">" + _t("Starting") + "</b>";
         } else if (remaining == 0 || needed == 0) {  // < 0 means no meta size yet
             // partial complete or seeding
             if (isRunning) {
@@ -1577,56 +1577,56 @@ public class I2PSnarkServlet extends BasicServlet {
                 }
                 if (curPeers > 0 && !showPeers) {
                     statusString = toThemeImg(img, "", txt) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + txt +
-                               ": <a href=\"" + uri + getQueryString(req, b64, null, null) + '#' + b64Short + "\">" +
+                               "<td class=\"snarkTorrentStatus\"><b>" + txt +
+                               ":</b> <a href=\"" + uri + getQueryString(req, b64, null, null) + '#' + b64Short + "\">" +
                                curPeers + thinsp(noThinsp) +
                                ngettext("1 peer", "{0} peers", knownPeers) + "</a>";
                 } else {
                     statusString = toThemeImg(img, "", txt) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + txt +
-                               ": " + curPeers + thinsp(noThinsp) +
+                               "<td class=\"snarkTorrentStatus\"><b>" + txt +
+                               ":</b> " + curPeers + thinsp(noThinsp) +
                                ngettext("1 peer", "{0} peers", knownPeers);
                 }
             } else {
                 statusString = toThemeImg("complete", "", _t("Complete")) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + _t("Complete");
+                               "<td class=\"snarkTorrentStatus\"><b class=\"alwaysShow\">" + _t("Complete") + "</b>";
             }
         } else {
             if (isRunning && curPeers > 0 && downBps > 0 && !showPeers) {
                 statusString = toThemeImg("downloading", "", _t("OK")) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + _t("OK") +
-                               ": <a href=\"" + uri + getQueryString(req, b64, null, null) + '#' + b64Short + "\">" +
+                               "<td class=\"snarkTorrentStatus\"><b>" + _t("OK") +
+                               ":</b> <a href=\"" + uri + getQueryString(req, b64, null, null) + '#' + b64Short + "\">" +
                                curPeers + thinsp(noThinsp) +
                                ngettext("1 peer", "{0} peers", knownPeers) + "</a>";
             } else if (isRunning && curPeers > 0 && downBps > 0) {
                 statusString = toThemeImg("downloading", "", _t("OK")) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + _t("OK") +
-                               ": " + curPeers + thinsp(noThinsp) +
+                               "<td class=\"snarkTorrentStatus\"><b>" + _t("OK") +
+                               ":</b> " + curPeers + thinsp(noThinsp) +
                                ngettext("1 peer", "{0} peers", knownPeers);
             } else if (isRunning && curPeers > 0 && !showPeers) {
                 statusString = toThemeImg("stalled", "", _t("Stalled")) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + _t("Stalled") +
-                               ": <a href=\"" + uri + getQueryString(req, b64, null, null) + '#' + b64Short + "\">" +
+                               "<td class=\"snarkTorrentStatus\"><b>" + _t("Stalled") +
+                               ":</b> <a href=\"" + uri + getQueryString(req, b64, null, null) + '#' + b64Short + "\">" +
                                curPeers + thinsp(noThinsp) +
                                ngettext("1 peer", "{0} peers", knownPeers) + "</a>";
             } else if (isRunning && curPeers > 0) {
                 statusString = toThemeImg("stalled", "", _t("Stalled")) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + _t("Stalled") +
-                               ": " + curPeers + thinsp(noThinsp) +
+                               "<td class=\"snarkTorrentStatus\"><b>" + _t("Stalled") +
+                               ":</b> " + curPeers + thinsp(noThinsp) +
                                ngettext("1 peer", "{0} peers", knownPeers);
             } else if (isRunning && knownPeers > 0) {
                 statusString = toThemeImg("nopeers", "", _t("No Peers")) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + _t("No Peers") +
-                               ": 0" + thinsp(noThinsp) + knownPeers ;
+                               "<td class=\"snarkTorrentStatus\"><b>" + _t("No Peers") +
+                               ":</b> 0" + thinsp(noThinsp) + knownPeers ;
             } else if (isRunning) {
                 statusString = toThemeImg("nopeers", "", _t("No Peers")) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + _t("No Peers");
+                               "<td class=\"snarkTorrentStatus\"><b class=\"alwaysShow\">" + _t("No Peers") + "</b>";
             } else {
                 statusString = toThemeImg("stopped", "", _t("Stopped")) + "</td>" +
-                               "<td class=\"snarkTorrentStatus\">" + _t("Stopped");
+                               "<td class=\"snarkTorrentStatus\"><b class=\"alwaysShow\">" + _t("Stopped") + "</b>";
             }
         }
-        
+
         out.write("<tr class=\"" + rowClass + "\" id=\"" + b64Short + "\">");
         out.write("<td class=\"center\">");
         out.write(statusString + "</td>\n\t");
@@ -1816,8 +1816,9 @@ public class I2PSnarkServlet extends BasicServlet {
             for (Peer peer : peers) {
                 if (!peer.isConnected())
                     continue;
-                out.write("<tr class=\"" + rowClass + "\"><td></td>");
-                out.write("<td colspan=\"4\" align=\"right\">");
+                out.write("<tr class=\"peerinfo " + rowClass + "\"><td title=\"");
+                out.write(_t("Peer attached to swarm"));
+                out.write("\"></td><td colspan=\"4\" align=\"right\">");
                 PeerID pid = peer.getPeerID();
                 String ch = pid != null ? pid.toString().substring(0, 4) : "????";
                 String client;
@@ -1841,7 +1842,9 @@ public class I2PSnarkServlet extends BasicServlet {
                     client = "KTorrent" + getAzVersion(pid.getID());
                 else
                     client = _t("Unknown") + " (" + ch + ')';
-                out.write(client + "&nbsp;&nbsp;<tt>" + peer.toString().substring(5, 9)+ "</tt>");
+                out.write(client + "&nbsp;<tt title=\"");
+                out.write(_t("Destination (identity) of peer"));
+                out.write("\">" + peer.toString().substring(5, 9)+ "</tt>");
                 if (showDebug)
                     out.write(" inactive " + (peer.getInactiveTime() / 1000) + "s");
                 out.write("</td>\n\t");
@@ -1873,13 +1876,13 @@ public class I2PSnarkServlet extends BasicServlet {
                         out.write("<span class=\"unchoked\">");
                         out.write(formatSize(peer.getDownloadRate()) + "ps</span>");
                     } else {
-                        out.write("<span class=\"choked\"><a title=\"");
+                        out.write("<span class=\"choked\" title=\"");
                         if (!peer.isInteresting())
                             out.write(_t("Uninteresting (The peer has no pieces we need)"));
                         else
                             out.write(_t("Choked (The peer is not allowing us to request pieces)"));
                         out.write("\">");
-                        out.write(formatSize(peer.getDownloadRate()) + "ps</a></span>");
+                        out.write(formatSize(peer.getDownloadRate()) + "ps</span>");
                     }
                 } else if (!isValid) {
                     //if (peer supports metadata extension) {
@@ -1895,20 +1898,20 @@ public class I2PSnarkServlet extends BasicServlet {
                         out.write("<span class=\"unchoked\">");
                         out.write(formatSize(peer.getUploadRate()) + "ps</span>");
                     } else {
-                        out.write("<span class=\"choked\"><a title=\"");
+                        out.write("<span class=\"choked\" title=\"");
                         if (!peer.isInterested())
                             out.write(_t("Uninterested (We have no pieces the peer needs)"));
                         else
                             out.write(_t("Choking (We are not allowing the peer to request pieces)"));
                         out.write("\">");
-                        out.write(formatSize(peer.getUploadRate()) + "ps</a></span>");
+                        out.write(formatSize(peer.getUploadRate()) + "ps</span>");
                     }
                 }
                 out.write("</td>\n\t");
                 out.write("<td class=\"snarkTorrentStatus\">");
                 out.write("</td></tr>\n\t");
                 if (showDebug)
-                    out.write("<tr class=\"" + rowClass + "\"><td></td><td colspan=\"10\" align=\"right\">" + peer.getSocket() + "</td></tr>");
+                    out.write("<tr class=\"debuginfo " + rowClass + "\"><td></td><td colspan=\"10\" align=\"right\">" + peer.getSocket() + "</td></tr>");
             }
         }
     }
@@ -1970,7 +1973,7 @@ public class I2PSnarkServlet extends BasicServlet {
         }
         return buf.toString();
     }
-    
+
     /** @since 0.8.2 */
     private static String thinsp(boolean disable) {
         if (disable)
@@ -2097,29 +2100,31 @@ public class I2PSnarkServlet extends BasicServlet {
             newURL = DataHelper.stripHTML(newURL);    // XSS
         //String newFile = req.getParameter("newFile");
         //if ( (newFile == null) || (newFile.trim().length() <= 0) ) newFile = "";
-        
+
         out.write("<div class=\"snarkNewTorrent\">\n");
         // *not* enctype="multipart/form-data", so that the input type=file sends the filename, not the file
         out.write("<form action=\"_post\" method=\"POST\">\n");
         writeHiddenInputs(out, req, "Add");
-        out.write("<div class=\"addtorrentsection\"><span class=\"snarkConfigTitle\">");
+        out.write("<div class=\"addtorrentsection\">");
+        out.write("<input class=\"toggle_input\" id=\"toggle_addtorrent\" type=\"checkbox\"><label class=\"toggleview\" for=\"toggle_addtorrent\">");
         out.write(toThemeImg("add"));
         out.write(' ');
         out.write(_t("Add Torrent"));
+        out.write("</label>");
 
-        out.write("</span><hr>\n<table border=\"0\"><tr><td>");
+        out.write("<hr>\n<table border=\"0\"><tr><td>");
         out.write(_t("From URL"));
         out.write(":<td><input type=\"text\" name=\"nofilter_newURL\" size=\"85\" value=\"" + newURL + "\" spellcheck=\"false\"");
         out.write(" title=\"");
         out.write(_t("Enter the torrent file download URL (I2P only), magnet link, maggot link, or info hash"));
-        out.write("\"> \n");
+        out.write("\">\n");
         // not supporting from file at the moment, since the file name passed isn't always absolute (so it may not resolve)
         //out.write("From file: <input type=\"file\" name=\"newFile\" size=\"50\" value=\"" + newFile + "\" /><br>");
         out.write("<input type=\"submit\" class=\"add\" value=\"");
         out.write(_t("Add torrent"));
         out.write("\" name=\"foo\" ><br>\n" +
-
                   "<tr><td>");
+
         out.write(_t("Data dir"));
         out.write(":<td><input type=\"text\" name=\"nofilter_newDir\" size=\"85\" value=\"\" spellcheck=\"false\"");
         out.write(" title=\"");
@@ -2131,19 +2136,19 @@ public class I2PSnarkServlet extends BasicServlet {
         out.write("\n");
         out.write(_t("Removing a .torrent will cause it to stop."));
         out.write("<br></span></table>\n");
-        out.write("</div></form></div>");  
+        out.write("</div></form></div>");
     }
-    
+
     private void writeSeedForm(PrintWriter out, HttpServletRequest req, List<Tracker> sortedTrackers) throws IOException {
         out.write("<a name=\"add\"></a><div class=\"newtorrentsection\"><div class=\"snarkNewTorrent\">\n");
         // *not* enctype="multipart/form-data", so that the input type=file sends the filename, not the file
         out.write("<form action=\"_post\" method=\"POST\">\n");
         writeHiddenInputs(out, req, "Create");
-        out.write("<span class=\"snarkConfigTitle\">");
+        out.write("<input class=\"toggle_input\" id=\"toggle_createtorrent\" type=\"checkbox\"><label class=\"toggleview\" for=\"toggle_createtorrent\">");
         out.write(toThemeImg("create"));
         out.write(' ');
         out.write(_t("Create Torrent"));
-        out.write("</span><hr>\n<table border=\"0\"><tr><td>");
+        out.write("</label><hr>\n<table border=\"0\"><tr><td>");
         //out.write("From file: <input type=\"file\" name=\"newFile\" size=\"50\" value=\"" + newFile + "\" /><br>\n");
         out.write(_t("Data to seed"));
         out.write(":<td>"
@@ -2151,20 +2156,23 @@ public class I2PSnarkServlet extends BasicServlet {
                   + "\" spellcheck=\"false\" title=\"");
         out.write(_t("File or directory to seed (full path or within the directory {0} )",
                     _manager.getDataDir().getAbsolutePath() + File.separatorChar));
-        out.write("\" ><tr><td>\n");
+        out.write("\" > <input type=\"submit\" class=\"create\" value=\"");
+        out.write(_t("Create torrent"));
+        out.write("\" name=\"foo\" >");
+        out.write("<tr><td>\n");
         out.write(_t("Trackers"));
-        out.write(":<td><table style=\"width: 30%;\"><tr><td></td><td align=\"center\">");
+        out.write(":<td><table id=\"trackerselect\" style=\"width: 30%;\"><tr><td></td><td align=\"center\">");
         out.write(_t("Primary"));
         out.write("</td><td align=\"center\">");
         out.write(_t("Alternates"));
-        out.write("</td><td rowspan=\"0\">" +
-                  " <input type=\"submit\" class=\"create\" value=\"");
-        out.write(_t("Create torrent"));
-        out.write("\" name=\"foo\" >" +
-                  "</td></tr>\n");
+        out.write("</td><td>");
+        out.write(_t("Tracker URL"));
+        out.write("</td></tr>\n");
+
         for (Tracker t : sortedTrackers) {
             String name = t.name;
             String announceURL = t.announceURL.replace("&#61;", "=");
+            String homeURL = t.baseURL;
             out.write("<tr><td>");
             out.write(name);
             out.write("</td><td align=\"center\"><input type=\"radio\" name=\"announceURL\" value=\"");
@@ -2174,14 +2182,18 @@ public class I2PSnarkServlet extends BasicServlet {
                 out.write(" checked");
             out.write("></td><td align=\"center\"><input type=\"checkbox\" name=\"backup_");
             out.write(announceURL);
-            out.write("\" value=\"foo\"></td></tr>\n");
+            out.write("\" value=\"foo\"></td><td><a href=\"");
+            out.write(homeURL);
+            out.write("\">");
+            out.write(homeURL);
+            out.write("</a></td></tr>\n");
         }
         out.write("<tr><td><i>");
         out.write(_t("none"));
         out.write("</i></td><td align=\"center\"><input type=\"radio\" name=\"announceURL\" value=\"none\"");
         if (_lastAnnounceURL == null)
             out.write(" checked");
-        out.write("></td><td></td></tr></table>\n");
+        out.write("></td><td></td><td></td></tr></table>\n");
         // make the user add a tracker on the config form now
         //out.write(_t("or"));
         //out.write("&nbsp;<input type=\"text\" name=\"announceURLOther\" size=\"57\" value=\"http://\" " +
@@ -2190,9 +2202,9 @@ public class I2PSnarkServlet extends BasicServlet {
         //out.write("\" > " +
         out.write("</td></tr>" +
                   "</table>\n" +
-                  "</form></div></div>");        
+                  "</form></div></div>");
     }
-    
+
     private static final int[] times = { 5, 15, 30, 60, 2*60, 5*60, 10*60, 30*60, -1 };
 
     private void writeConfigForm(PrintWriter out, HttpServletRequest req) throws IOException {
@@ -2204,7 +2216,7 @@ public class I2PSnarkServlet extends BasicServlet {
         //String openTrackers = _manager.util().getOpenTrackerString();
         boolean useDHT = _manager.util().shouldUseDHT();
         //int seedPct = 0;
-       
+
         out.write("<form action=\"" + _contextPath + "/configure\" method=\"POST\">\n" +
                   "<div class=\"configsectionpanel\"><div class=\"snarkConfig\">\n");
         writeHiddenInputs(out, req, "Save");
@@ -2213,41 +2225,44 @@ public class I2PSnarkServlet extends BasicServlet {
         out.write(' ');
         out.write(_t("Configuration"));
         out.write("</span><hr>\n"   +
-                  "<table border=\"0\"><tr><td>");
+                  "<table border=\"0\" id=\"configs\"><tr><td>");
 
         out.write(_t("Data directory"));
-        out.write(": <td><input name=\"nofilter_dataDir\" size=\"80\" value=\"" +
+        out.write(":<td colspan=\"2\"><input name=\"nofilter_dataDir\" size=\"80\""
+                  + " title=\"");
+        out.write(_t("Directory where torrents and downloaded/shared files are stored"));
+        out.write("\" value=\"" +
                   DataHelper.escapeHTML(dataDir) + "\" spellcheck=\"false\"></td>\n" +
 
-                  "<tr><td>");
+                  "<tr><td><label for=\"filesPublic\">");
         out.write(_t("Files readable by all"));
-        out.write(": <td><input type=\"checkbox\" class=\"optbox\" name=\"filesPublic\" value=\"true\" " 
+        out.write(":</label><td colspan=\"2\"><input type=\"checkbox\" class=\"optbox\" name=\"filesPublic\" id=\"filesPublic\" value=\"true\" "
                   + (filesPublic ? "checked " : "") 
                   + "title=\"");
-        out.write(_t("If checked, other users may access the downloaded files"));
+        out.write(_t("Set file permissions to allow other local users to access the downloaded files"));
         out.write("\" >" +
 
-                  "<tr><td>");
+                  "<tr><td><label for=\"autoStart\">");
         out.write(_t("Auto start torrents"));
-        out.write(": <td><input type=\"checkbox\" class=\"optbox\" name=\"autoStart\" value=\"true\" " 
+        out.write(":</label><td colspan=\"2\"><input type=\"checkbox\" class=\"optbox\" name=\"autoStart\" id=\"autoStart\" value=\"true\" "
                   + (autoStart ? "checked " : "") 
                   + "title=\"");
-        out.write(_t("If checked, automatically start torrents that are added"));
+        out.write(_t("Automatically start torrents when added and restart torrents when I2PSnark starts"));
         out.write("\" >" +
 
-                  "<tr><td>");
+                  "<tr><td><label for=\"smartSort\">");
         out.write(_t("Smart torrent sorting"));
-        out.write(": <td><input type=\"checkbox\" class=\"optbox\" name=\"smartSort\" value=\"true\" " 
+        out.write(":</label><td colspan=\"2\"><input type=\"checkbox\" class=\"optbox\" name=\"smartSort\" id=\"smartSort\" value=\"true\" "
                   + (smartSort ? "checked " : "") 
                   + "title=\"");
-        out.write(_t("If checked, ignore words such as 'the' when sorting"));
+        out.write(_t("Ignore words such as 'a' and 'the' when sorting"));
         out.write("\" >");
 
         if (!_context.isRouterContext()) {
             try {
                 out.write("<tr><td>");
                 out.write(_t("Language"));
-                out.write(": <td>");
+                out.write(": <td colspan=\"2\">");
                 // class only in standalone builds
                 out.write(ConfigUIHelper.getLangSettings(_context));
             } catch (Throwable t) {}
@@ -2255,7 +2270,7 @@ public class I2PSnarkServlet extends BasicServlet {
 
         out.write("<tr><td>");
         out.write(_t("Theme"));
-        out.write(": <td><select name='theme'>");
+        out.write(":<td colspan=\"2\"><select name='theme'>");
         String theme = _manager.getTheme();
         String[] themes = _manager.getThemes();
         Arrays.sort(themes);
@@ -2269,7 +2284,10 @@ public class I2PSnarkServlet extends BasicServlet {
 
                   "<tr><td>");
         out.write(_t("Refresh time"));
-        out.write(": <td><select name=\"refreshDelay\">");
+        out.write(":<td colspan=\"2\"><select name=\"refreshDelay\""
+                  + " title=\"");
+        out.write(_t("How frequently torrent status is updated on the main page"));
+        out.write("\">");
         int delay = _manager.getRefreshDelaySeconds();
         for (int i = 0; i < times.length; i++) {
             out.write("<option value=\"");
@@ -2284,21 +2302,27 @@ public class I2PSnarkServlet extends BasicServlet {
                 out.write(_t("Never"));
             out.write("</option>\n");
         }
-        out.write("</select><br>" +
+        out.write("</select>" +
 
                   "<tr><td>");
         if (_context.isRouterContext()) {
             out.write(_t("Startup delay"));
-            out.write(": <td><input name=\"startupDelay\" size=\"4\" class=\"r\" value=\"" + _manager.util().getStartupDelay() + "\"> ");
+            out.write(": <td colspan=\"2\"><input name=\"startupDelay\" size=\"4\" class=\"r\""
+                      + " title=\"");
+            out.write(_t("How long before auto-started torrents are loaded when I2PSnark starts"));
+            out.write("\" value=\"" + _manager.util().getStartupDelay() + "\"> ");
             out.write(_t("minutes"));
-            out.write("<br>\n" +
+            out.write("\n" +
 
                       "<tr><td>");
         }
         out.write(_t("Page size"));
-        out.write(": <td><input name=\"pageSize\" size=\"4\" maxlength=\"6\" class=\"r\" value=\"" + _manager.getPageSize() + "\"> ");
+        out.write(":<td colspan=\"2\"><input name=\"pageSize\" size=\"4\" maxlength=\"6\" class=\"r\""
+                  + " title=\"");
+        out.write(_t("Maximum number of torrents to display per page"));
+        out.write("\" value=\"" + _manager.getPageSize() + "\"> ");
         out.write(_t("torrents"));
-        out.write("<br>\n"); 
+        out.write("\n");
 
 
         //Auto add: <input type="checkbox" name="autoAdd" value="true" title="If true, automatically add torrents that are found in the data directory" />
@@ -2322,35 +2346,41 @@ public class I2PSnarkServlet extends BasicServlet {
 */
         out.write("<tr><td>");
         out.write(_t("Total uploader limit"));
-        out.write(": <td><input type=\"text\" name=\"upLimit\" class=\"r\" value=\""
-                  + _manager.util().getMaxUploaders() + "\" size=\"4\" maxlength=\"3\" > ");
+        out.write(":<td colspan=\"2\"><input type=\"text\" name=\"upLimit\" class=\"r\" value=\""
+                  + _manager.util().getMaxUploaders() + "\" size=\"4\" maxlength=\"3\""
+                  + " title=\"");
+        out.write(_t("Maximum number of peers to upload to"));
+        out.write("\"> ");
         out.write(_t("peers"));
-        out.write("<br>\n" +
+        out.write("\n" +
 
                   "<tr><td>");
         out.write(_t("Up bandwidth limit"));
-        out.write(": <td><input type=\"text\" name=\"upBW\" class=\"r\" value=\""
-                  + _manager.util().getMaxUpBW() + "\" size=\"4\" maxlength=\"4\" > KBps <i>");
+        out.write(":<td><input type=\"text\" name=\"upBW\" class=\"r\" value=\""
+                  + _manager.util().getMaxUpBW() + "\" size=\"4\" maxlength=\"4\""
+                  + " title=\"");
+        out.write(_t("Maximum bandwidth allocated for uploading"));
+        out.write("\"> KBps <td id=\"bwHelp\"><i>");
         out.write(_t("Half available bandwidth recommended."));
         if (_context.isRouterContext()) {
-            out.write(" [<a href=\"/config.jsp\" target=\"blank\">");
+            out.write(" <a href=\"/config.jsp\" target=\"blank\">[");
             out.write(_t("View or change router bandwidth"));
-            out.write("</a>]</i>");
+            out.write("]</a></i>");
         }
-        out.write("<br>\n<tr><td>");
+        out.write("\n<tr><td><label for=\"useOpenTrackers\">");
         out.write(_t("Use open trackers also"));
-        out.write(": <td><input type=\"checkbox\" class=\"optbox\" name=\"useOpenTrackers\" value=\"true\" " 
-                  + (useOpenTrackers ? "checked " : "") 
+        out.write(":</label><td colspan=\"2\"><input type=\"checkbox\" class=\"optbox\" name=\"useOpenTrackers\" id=\"useOpenTrackers\" value=\"true\" "
+                  + (useOpenTrackers ? "checked " : "")
                   + "title=\"");
-        out.write(_t("If checked, announce torrents to open trackers as well as the tracker listed in the torrent file"));
+        out.write(_t("Announce torrents to open trackers as well as tracker(s) listed in the torrent file"));
         out.write("\" ></td></tr>\n" +
-        
-                  "<tr><td>");
+
+                  "<tr><td><label for=\"useDHT\">");
         out.write(_t("Enable DHT"));
-        out.write(": <td><input type=\"checkbox\" class=\"optbox\" name=\"useDHT\" value=\"true\" " 
-                  + (useDHT ? "checked " : "") 
+        out.write(":</label><td colspan=\"2\"><input type=\"checkbox\" class=\"optbox\" name=\"useDHT\" id=\"useDHT\" value=\"true\" "
+                  + (useDHT ? "checked " : "")
                   + "title=\"");
-        out.write(_t("If checked, use DHT"));
+        out.write(_t("Use DHT to find additional peers"));
         out.write("\" ></td></tr>\n");
 
         //          "<tr><td>");
@@ -2367,29 +2397,29 @@ public class I2PSnarkServlet extends BasicServlet {
         Map<String, String> options = new TreeMap<String, String>(_manager.util().getI2CPOptions());
         out.write("<tr><td>");
         out.write(_t("Inbound Settings"));
-        out.write(":<td>");
+        out.write(":<td colspan=\"2\">");
         out.write(renderOptions(1, 10, SnarkManager.DEFAULT_TUNNEL_QUANTITY,
                                 options.remove("inbound.quantity"), "inbound.quantity", TUNNEL));
-        out.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
+        out.write("&nbsp;");
         out.write(renderOptions(0, 4, 3, options.remove("inbound.length"), "inbound.length", HOP));
         out.write("<tr><td>");
         out.write(_t("Outbound Settings"));
-        out.write(":<td>");
+        out.write(":<td colspan=\"2\">");
         out.write(renderOptions(1, 10, SnarkManager.DEFAULT_TUNNEL_QUANTITY,
                                 options.remove("outbound.quantity"), "outbound.quantity", TUNNEL));
-        out.write("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
+        out.write("&nbsp;");
         out.write(renderOptions(0, 4, 3, options.remove("outbound.length"), "outbound.length", HOP));
 
         if (!_context.isRouterContext()) {
             out.write("<tr><td>");
             out.write(_t("I2CP host"));
-            out.write(": <td><input type=\"text\" name=\"i2cpHost\" value=\"" 
+            out.write(":<td colspan=\"2\"><input type=\"text\" name=\"i2cpHost\" value=\""
                       + _manager.util().getI2CPHost() + "\" size=\"15\" > " +
 
                       "<tr><td>");
             out.write(_t("I2CP port"));
-            out.write(": <td><input type=\"text\" name=\"i2cpPort\" class=\"r\" value=\"" +
-                      + _manager.util().getI2CPPort() + "\" size=\"5\" maxlength=\"5\" > <br>\n");
+            out.write(":<td colspan=\"2\"><input type=\"text\" name=\"i2cpPort\" class=\"r\" value=\"" +
+                      + _manager.util().getI2CPPort() + "\" size=\"5\" maxlength=\"5\" >\n");
         }
 
         options.remove(I2PSnarkUtil.PROP_MAX_BW);
@@ -2403,13 +2433,13 @@ public class I2PSnarkServlet extends BasicServlet {
         }
         out.write("<tr><td>");
         out.write(_t("I2CP options"));
-        out.write(": <td><textarea name=\"i2cpOpts\" cols=\"60\" rows=\"1\" wrap=\"off\" spellcheck=\"false\" >"
-                  + opts.toString() + "</textarea><br>\n" +
-                  "<tr><td colspan=\"2\">&nbsp;\n" +  // spacer
-                  "<tr><td>&nbsp;<td><input type=\"submit\" class=\"accept\" value=\"");
+        out.write(":<td colspan=\"2\"><textarea name=\"i2cpOpts\" cols=\"60\" rows=\"1\" wrap=\"off\" spellcheck=\"false\" >"
+                  + opts.toString() + "</textarea>\n" +
+                  "<tr class=\"spacer\"><td colspan=\"3\">&nbsp;\n" +  // spacer
+                  "<tr><td colspan=\"3\"><input type=\"submit\" class=\"accept\" value=\"");
         out.write(_t("Save configuration"));
         out.write("\" name=\"foo\" >\n" +
-                  "<tr><td colspan=\"2\">&nbsp;\n" +  // spacer
+                  "<tr class=\"spacer\"><td colspan=\"3\">&nbsp;\n" +  // spacer
                   "</table></div></div></form>");
     }
 
@@ -2424,9 +2454,10 @@ public class I2PSnarkServlet extends BasicServlet {
         buf.append(' ');
         buf.append(_t("Trackers"));
         buf.append("</span><hr>\n"   +
-                   "<table class=\"trackerconfig\"><tr><th>")
+                   "<table class=\"trackerconfig\"><tr><th title=\"")
+            .append(_t("Select trackers for removal from I2PSnark's known list"))
            //.append(_t("Remove"))
-           .append("</th><th>")
+           .append("\"></th><th>")
            .append(_t("Name"))
            .append("</th><th>")
            .append(_t("Website URL"))
@@ -2448,9 +2479,9 @@ public class I2PSnarkServlet extends BasicServlet {
             boolean isPrivate = privateTrackers.contains(t.announceURL);
             boolean isKnownOpen = _manager.util().isKnownOpenTracker(t.announceURL);
             boolean isOpen = isKnownOpen || openTrackers.contains(t.announceURL);
-            buf.append("<tr><td><input type=\"checkbox\" class=\"optbox\" name=\"delete_")
-               .append(name).append("\" title=\"").append(_t("Delete")).append("\">" +
-                       "</td><td>").append(name)
+            buf.append("<tr class=\"knownTracker\"><td><input type=\"checkbox\" class=\"optbox\" id=\"").append(name).append("\" name=\"delete_")
+               .append(name).append("\" title=\"").append(_t("Mark tracker for deletion")).append("\">" +
+                       "</td><td><label for=\"").append(name).append("\">").append(name)
                .append("</td><td>").append(urlify(homeURL, 35))
                .append("</td><td><input type=\"radio\" class=\"optbox\" value=\"0\" name=\"ttype_")
                .append(announceURL).append("\"");
@@ -2488,8 +2519,8 @@ public class I2PSnarkServlet extends BasicServlet {
                    "<td><input type=\"radio\" class=\"optbox\" value=\"1\" name=\"add_tracker_type\"></td>" +
                    "<td><input type=\"radio\" class=\"optbox\" value=\"2\" name=\"add_tracker_type\"></td>" +
                    "<td><input type=\"text\" class=\"trackerannounce\" name=\"taurl\" spellcheck=\"false\"></td></tr>\n" +
-                   "<tr><td colspan=\"7\">&nbsp;</td></tr>\n" +  // spacer
-                   "<tr><td colspan=\"2\"></td><td colspan=\"5\">\n" +
+                   "<tr class=\"spacer\"><td colspan=\"7\">&nbsp;</td></tr>\n" +  // spacer
+                   "<tr><td colspan=\"7\">\n" +
                    "<input type=\"submit\" name=\"taction\" class=\"default\" value=\"").append(_t("Add tracker")).append("\">\n" +
                    "<input type=\"submit\" name=\"taction\" class=\"delete\" value=\"").append(_t("Delete selected")).append("\">\n" +
                    "<input type=\"submit\" name=\"taction\" class=\"add\" value=\"").append(_t("Add tracker")).append("\">\n" +
@@ -2497,7 +2528,7 @@ public class I2PSnarkServlet extends BasicServlet {
                    // "<input type=\"reset\" class=\"cancel\" value=\"").append(_t("Cancel")).append("\">\n" +
                    "<input type=\"submit\" name=\"taction\" class=\"reload\" value=\"").append(_t("Restore defaults")).append("\">\n" +
                    "</td></tr>" +
-                   "<tr><td colspan=\"7\">&nbsp;</td></tr>\n" +  // spacer
+                   "<tr class=\"spacer\"><td colspan=\"7\">&nbsp;</td></tr>\n" +  // spacer
                    "</table></div></div></form>\n");
         out.write(buf.toString());
     }
@@ -2586,15 +2617,17 @@ public class I2PSnarkServlet extends BasicServlet {
     // rounding makes us look faster :)
     private static String formatSize(long bytes) {
         if (bytes < 5000)
-            return bytes + "&nbsp;B";
+
+            // replace &nbsp; with narrow non-breaking space (&#8239;)
+            return bytes + "&#8239;B";
         else if (bytes < 5*1024*1024)
-            return ((bytes + 512)/1024) + "&nbsp;KB";
+            return ((bytes + 512)/1024) + "&#8239;KB";
         else if (bytes < 10*1024*1024*1024l)
-            return ((bytes + 512*1024)/(1024*1024)) + "&nbsp;MB";
+            return ((bytes + 512*1024)/(1024*1024)) + "&#8239;MB";
         else
-            return ((bytes + 512*1024*1024)/(1024*1024*1024)) + "&nbsp;GB";
+            return ((bytes + 512*1024*1024)/(1024*1024*1024)) + "&#8239;GB";
     }
-    
+
     /**
      * This is for a full URL. For a path only, use encodePath().
      * @since 0.7.14
@@ -2602,7 +2635,7 @@ public class I2PSnarkServlet extends BasicServlet {
     static String urlify(String s) {
         return urlify(s, 100);
     }
-    
+
     /**
      * This is for a full URL. For a path only, use encodePath().
      * @since 0.9
@@ -2748,7 +2781,9 @@ public class I2PSnarkServlet extends BasicServlet {
         title = _t("Torrent") + ": " + DataHelper.escapeHTML(title);
         buf.append(title);
         buf.append("</TITLE>\n").append(HEADER_A).append(_themePath).append(HEADER_B)
-            .append("<link rel=\"shortcut icon\" href=\"" + _themePath + "favicon.ico\">\n");
+           // hide javascript-dependent buttons when js is unavailable
+           .append("<noscript><style>.script {display: none;}</style></noscript>")
+           .append("<link rel=\"shortcut icon\" href=\"" + _themePath + "favicon.ico\">\n");
         if (showPriority)
             buf.append("<script src=\"").append(_contextPath).append(WARBASE + "js/folder.js\" type=\"text/javascript\"></script>\n");
         buf.append("</HEAD><BODY");
@@ -2756,16 +2791,14 @@ public class I2PSnarkServlet extends BasicServlet {
             buf.append(" onload=\"setupbuttons()\"");
         buf.append(">\n<center><div class=\"snarknavbar\"><a href=\"").append(_contextPath).append("/\" title=\"Torrents\"");
         buf.append(" class=\"snarkRefresh\">");
-        toThemeImg(buf, "arrow_refresh");
-        buf.append("&nbsp;&nbsp;");
         if (_contextName.equals(DEFAULT_NAME))
             buf.append(_t("I2PSnark"));
         else
             buf.append(_contextName);
         buf.append("</a></div></center>\n");
-        
+
         if (parent)  // always true
-            buf.append("<div class=\"page\"><div class=\"mainsection\">");
+            buf.append("<div class=\"page\">\n<div class=\"mainsection\">");
         // for stop/start/check
         if (showStopStart || showPriority) {
             buf.append("<form action=\"").append(base).append("\" method=\"POST\">\n");
@@ -2936,17 +2969,17 @@ public class I2PSnarkServlet extends BasicServlet {
             //buf.append("<tr><td>").append(_t("Maggot link")).append(": <a href=\"").append(MAGGOT).append(hex).append(':').append(hex).append("\">")
             //   .append(MAGGOT).append(hex).append(':').append(hex).append("</a></td></tr>");
 
-            buf.append("<tr><td>");
+            buf.append("<tr id=\"torrentInfoStats\"><td colspan=\"2\"><span>");
             toThemeImg(buf, "size");
-            buf.append("</td><td><b>")
+            buf.append("<b>")
                .append(_t("Size"))
                .append(":</b> ")
                .append(formatSize(snark.getTotalLength()));
             int pieces = snark.getPieces();
             double completion = (pieces - snark.getNeeded()) / (double) pieces;
-            buf.append("&nbsp;");
+            buf.append("</span>&nbsp;<span>");
             toThemeImg(buf, "head_rx");
-            buf.append("&nbsp;<b>");
+            buf.append("<b>");
             if (completion < 1.0)
                 buf.append(_t("Completion"))
                    .append(":</b> ")
@@ -2954,16 +2987,16 @@ public class I2PSnarkServlet extends BasicServlet {
             else
                 buf.append(_t("Complete")).append("</b>");
             // up ratio
-            buf.append("&nbsp;");
+            buf.append("</span>&nbsp;<span>");
             toThemeImg(buf, "head_tx");
-            buf.append("&nbsp;<b>")
+            buf.append("<b>")
                .append(_t("Upload ratio"))
                .append(":</b> ");
             long uploaded = snark.getUploaded();
             if (uploaded > 0) {
                 double ratio = uploaded / ((double) snark.getTotalLength());
                 buf.append((new DecimalFormat("0.000")).format(ratio));
-                buf.append("&nbsp;x");
+                buf.append("&#8239;x");
             } else {
                 buf.append('0');
             }
@@ -2974,18 +3007,18 @@ public class I2PSnarkServlet extends BasicServlet {
                 needed = snark.getRemainingLength();
             }
             if (needed > 0) {
-                buf.append("&nbsp;");
+                buf.append("</span>&nbsp;<span>");
                 toThemeImg(buf, "head_rx");
-                buf.append("&nbsp;<b>")
+                buf.append("<b>")
                    .append(_t("Remaining"))
                    .append(":</b> ")
                    .append(formatSize(needed));
             }
             long skipped = snark.getSkippedLength();
             if (skipped > 0) {
-                buf.append("&nbsp;");
+                buf.append("</span>&nbsp;<span>");
                 toThemeImg(buf, "head_rx");
-                buf.append("&nbsp;<b>")
+                buf.append("<b>")
                    .append(_t("Skipped"))
                    .append(":</b> ")
                    .append(formatSize(skipped));
@@ -2993,35 +3026,35 @@ public class I2PSnarkServlet extends BasicServlet {
             if (meta != null) {
                 List<List<String>> files = meta.getFiles();
                 int fileCount = files != null ? files.size() : 1;
-                buf.append("&nbsp;");
+                buf.append("</span>&nbsp;<span>");
                 toThemeImg(buf, "file");
-                buf.append("&nbsp;<b>")
+                buf.append("<b>")
                    .append(_t("Files"))
                    .append(":</b> ")
                    .append(fileCount);
             }
-            buf.append("&nbsp;");
+            buf.append("</span>&nbsp;<span>");
             toThemeImg(buf, "file");
-            buf.append("&nbsp;<b>")
+            buf.append("<b>")
                .append(_t("Pieces"))
                .append(":</b> ")
                .append(pieces);
-            buf.append("&nbsp;");
+            buf.append("</span>&nbsp;<span>");
             toThemeImg(buf, "file");
-            buf.append("&nbsp;<b>")
+            buf.append("<b>")
                .append(_t("Piece size"))
                .append(":</b> ")
                .append(formatSize(snark.getPieceLength(0)))
-               .append("</td></tr>\n");
+               .append("</span></td></tr>\n");
 
             // buttons
             if (showStopStart) {
-                buf.append("<tr><td></td><td>");
+                buf.append("<tr id=\"torrentInfoControl\"><td colspan=\"2\">");
                 if (snark.isChecking()) {
-                    buf.append("<b>").append(_t("Checking")).append("&hellip; ")
+                    buf.append("<span id=\"fileCheck\"><b>").append(_t("Checking")).append("&hellip; ")
                        .append((new DecimalFormat("0.00%")).format(snark.getCheckingProgress()))
-                       .append("&nbsp;&nbsp;&nbsp;<a href=\"").append(base).append("\">")
-                       .append(_t("Refresh page for results")).append("</a>");
+                       .append("&nbsp;<a href=\"").append(base).append("\">")
+                       .append(_t("Refresh page for results")).append("</a></span>");
                 } else if (snark.isStarting()) {
                     buf.append("<b>").append(_t("Starting")).append("&hellip;</b>");
                 } else if (snark.isAllocating()) {
@@ -3033,30 +3066,38 @@ public class I2PSnarkServlet extends BasicServlet {
                         buf.append(_t("Stop")).append("\" name=\"stop\" class=\"stoptorrent\">\n");
                     else
                         buf.append(_t("Start")).append("\" name=\"start\" class=\"starttorrent\">\n");
-                    buf.append("&nbsp;&nbsp;&nbsp;<input type=\"submit\" name=\"recheck\" value=\"").append(_t("Force Recheck"));
+                    buf.append("<input type=\"submit\" name=\"recheck\" value=\"").append(_t("Force Recheck"));
                     if (isRunning)
-                        buf.append("\" class=\"disabled\" disabled=\"disabled\">\n");
+                        buf.append("\" class=\"disabled\" disabled=\"disabled\" title=\"")
+                           .append(_t("Stop the torrent in order to check file integrity"))
+                           .append("\">\n");
                     else
-                        buf.append("\" class=\"reload\">\n");
+                        buf.append("\" class=\"reload\" title=\"")
+                           .append(_t("Check integrity of the downloaded file(s)"))
+                           .append("\">\n");
                 }
                 buf.append("</td></tr>\n");
             }
         } else {
             // snark == null
             // shouldn't happen
-            buf.append("<tr><th>Not found<br>resource=\"").append(r.toString())
-               .append("\"<br>base=\"").append(base)
-               .append("\"<br>torrent=\"").append(torrentName)
-               .append("\"</th></tr>\n");
+            buf.append("<table class=\"resourceError\" id=\"NotFound\"><tr><th colspan=\"2\">")
+               .append(_t("Resource Not found"))
+               .append("</th></tr><tr><td><b>").append(_t("Resource")).append(":</b></td><td>").append(r.toString())
+               .append("</td></tr><tr><td><b>").append(_t("Base")).append(":</b></td><td>").append(base)
+               .append("</td></tr><tr><td><b>").append(_t("Torrent")).append(":</b></td><td>").append(torrentName)
+               .append("</td></tr>\n");
         }
         buf.append("</table>\n");
 
         if (snark != null && !r.exists()) {
             // fixup TODO
-            buf.append("<p>Does not exist<br>resource=\"").append(r.toString())
-               .append("\"<br>base=\"").append(base)
-               .append("\"<br>torrent=\"").append(torrentName)
-               .append("\"</p></div></div></BODY></HTML>");
+            buf.append("<table class=\"resourceError\" id=\"DoesNotExist\"><tr><th colspan=\"2\">")
+               .append(_t("Resource Does Not Exist"))
+               .append("</th></tr><tr><td><b>").append(_t("Resource")).append(":</b></td><td>").append(r.toString())
+               .append("</td></tr><tr><td><b>").append(_t("Base")).append(":</b></td><td>").append(base)
+               .append("</td></tr><tr><td><b>").append(_t("Torrent")).append(":</b></td><td>").append(torrentName)
+               .append("</td></tr></table></div></div></BODY></HTML>");
             return buf.toString();
         }
 
@@ -3064,7 +3105,7 @@ public class I2PSnarkServlet extends BasicServlet {
         if (r.isDirectory()) {
             ls = r.listFiles();
         }  // if r is not a directory, we are only showing torrent info section
-        
+
         if (ls == null) {
             // We are only showing the torrent info section
             buf.append("</div></div></BODY></HTML>");
@@ -3141,7 +3182,7 @@ public class I2PSnarkServlet extends BasicServlet {
             buf.append("<a href=\"").append(base)
                .append(getQueryString(sort)).append("\">");
         }
-        tx = _t("Status");
+        tx = _t("Download Status");
         toThemeImg(buf, "status", tx,
                    showRemainingSort ? _t("Sort by {0}", _t("Remaining")) : tx);
         if (showRemainingSort)
@@ -3153,7 +3194,7 @@ public class I2PSnarkServlet extends BasicServlet {
                 buf.append("<a href=\"").append(base)
                    .append(getQueryString(sort)).append("\">");
             }
-            tx = _t("Priority");
+            tx = _t("Download Priority");
             toThemeImg(buf, "priority", tx,
                        showSort ? _t("Sort by {0}", tx) : tx);
             if (showSort)
@@ -3174,18 +3215,18 @@ public class I2PSnarkServlet extends BasicServlet {
         boolean showSaveButton = false;
         boolean rowEven = true;
         for (Sorters.FileAndIndex fai : fileList)
-        {   
+        {
             //String encoded = encodePath(ls[i].getName());
             // bugfix for I2P - Backport from Jetty 6 (zero file lengths and last-modified times)
             // http://jira.codehaus.org/browse/JETTY-361?page=com.atlassian.jira.plugin.system.issuetabpanels%3Achangehistory-tabpanel#issue-tabs
             // See resource.diff attachment
             //Resource item = addPath(encoded);
             File item = fai.file;
-            
+
             String rowClass = (rowEven ? "snarkTorrentEven" : "snarkTorrentOdd");
             rowEven = !rowEven;
             buf.append("<TR class=\"").append(rowClass).append("\">");
-            
+
             // Get completeness and status string
             boolean complete = false;
             String status = "";
@@ -3218,7 +3259,8 @@ public class I2PSnarkServlet extends BasicServlet {
                                 else
                                     status = toImg("clock_red");
                                 status += " " +
-                                         (100 * (length - remaining) / length) + "% " + _t("complete") +
+                                         ("<span class=\"percentDownloaded\" title=\"") + _t("Percentage of file downloaded") + ("\">") +
+                                         (100 * (length - remaining) / length) + "% " + ("</span><span class=\"dirInfoComplete\">") + _t("complete") + ("</span>") +
                                          " (" + DataHelper.formatSize2(remaining) + "B " + _t("remaining") + ")";
                             }
 
@@ -3262,20 +3304,26 @@ public class I2PSnarkServlet extends BasicServlet {
             if (showPriority) {
                 buf.append("<td class=\"priority\">");
                 if ((!complete) && (!item.isDirectory())) {
-                    buf.append("\n<input type=\"radio\" onclick=\"priorityclicked();\" class=\"prihigh\" value=\"5\" name=\"pri.").append(fileIndex).append("\" ");
+                    buf.append("<label class=\"priorityHigh\" title=\"").append(_t("Download file at high priority")).append("\">")
+                       .append("\n<input type=\"radio\" onclick=\"priorityclicked();\" class=\"prihigh\" value=\"5\" name=\"pri.").append(fileIndex).append("\" ");
                     if (priority > 0)
                         buf.append("checked=\"checked\"");
-                    buf.append('>').append(_t("High"));
+                    buf.append('>')
+                       .append(_t("High")).append("</label>");
 
-                    buf.append("\n<input type=\"radio\" onclick=\"priorityclicked();\" class=\"prinorm\" value=\"0\" name=\"pri.").append(fileIndex).append("\" ");
+                    buf.append("<label class=\"priorityNormal\" title=\"").append(_t("Download file at normal priority")).append("\">")
+                    .append("\n<input type=\"radio\" onclick=\"priorityclicked();\" class=\"prinorm\" value=\"0\" name=\"pri.").append(fileIndex).append("\" ");
                     if (priority == 0)
                         buf.append("checked=\"checked\"");
-                    buf.append('>').append(_t("Normal"));
+                    buf.append('>')
+                       .append(_t("Normal")).append("</label>");
 
-                    buf.append("\n<input type=\"radio\" onclick=\"priorityclicked();\" class=\"priskip\" value=\"-9\" name=\"pri.").append(fileIndex).append("\" ");
+                    buf.append("<label class=\"prioritySkip\" title=\"").append(_t("Do not download this file")).append("\">")
+                    .append("\n<input type=\"radio\" onclick=\"priorityclicked();\" class=\"priskip\" value=\"-9\" name=\"pri.").append(fileIndex).append("\" ");
                     if (priority < 0)
                         buf.append("checked=\"checked\"");
-                    buf.append('>').append(_t("Skip"));
+                    buf.append('>')
+                       .append(_t("Skip")).append("</label>");
                     showSaveButton = true;
                 }
                 buf.append("</td>");
@@ -3283,14 +3331,14 @@ public class I2PSnarkServlet extends BasicServlet {
             buf.append("</TR>\n");
         }
         if (showSaveButton) {
-            buf.append("<thead><tr><th colspan=\"4\">&nbsp;</th><th class=\"headerpriority\">" +
-                       "<a class=\"control\" id=\"setallhigh\" href=\"javascript:void(null);\" onclick=\"setallhigh();\">")
+            buf.append("<thead><tr id=\"setPriority\"><th class=\"headerpriority\" colspan=\"5\">" +
+                       "<span class=\"script\"><a class=\"control\" id=\"setallhigh\" href=\"javascript:void(null);\" onclick=\"setallhigh();\">")
                .append(toImg("clock_red")).append(_t("Set all high")).append("</a>\n" +
                        "<a class=\"control\" id=\"setallnorm\" href=\"javascript:void(null);\" onclick=\"setallnorm();\">")
                .append(toImg("clock")).append(_t("Set all normal")).append("</a>\n" +
                        "<a class=\"control\" id=\"setallskip\" href=\"javascript:void(null);\" onclick=\"setallskip();\">")
-               .append(toImg("cancel")).append(_t("Skip all")).append("</a>\n" +
-                       "<br><br><input type=\"submit\" class=\"accept\" value=\"").append(_t("Save priorities"))
+               .append(toImg("cancel")).append(_t("Skip all")).append("</a></span>\n" +
+                       "<input type=\"submit\" class=\"accept\" value=\"").append(_t("Save priorities"))
                .append("\" name=\"savepri\" >\n" +
                        "</th></tr></thead>\n");
         }
@@ -3345,10 +3393,11 @@ public class I2PSnarkServlet extends BasicServlet {
         else if (mime.equals("text/plain") ||
                  mime.equals("text/x-sfv") ||
                  mime.equals("application/rtf") ||
-                 mime.equals("application/epub+zip") ||
-                 mime.equals("application/x-mobipocket-ebook") ||
                  plc.endsWith(".azw4"))
             icon = "page";
+        else if  (mime.equals("application/epub+zip") ||
+                 mime.equals("application/x-mobipocket-ebook"))
+            icon = "ebook";
         else if (mime.equals("application/java-archive") ||
                  plc.endsWith(".deb"))
             icon = "package";
@@ -3374,7 +3423,7 @@ public class I2PSnarkServlet extends BasicServlet {
             icon = "compress";
         else if (plc.endsWith(".exe"))
             icon = "application";
-        else if (plc.endsWith(".iso"))
+        else if (plc.endsWith(".iso") || plc.endsWith(".nrg"))
             icon = "cd";
         else if (mime.equals("application/x-bittorrent"))
             icon = "magnet";
@@ -3382,7 +3431,7 @@ public class I2PSnarkServlet extends BasicServlet {
             icon = "page_white";
         return icon;
     }
-    
+
     /**
      *  Icon file in the .war. Always 16x16.
      *
@@ -3402,7 +3451,7 @@ public class I2PSnarkServlet extends BasicServlet {
     private String toImg(String icon, String altText) {
         return "<img alt=\"" + altText + "\" height=\"16\" width=\"16\" src=\"" + _contextPath + WARBASE + "icons/" + icon + ".png\">";
     }
-    
+
     /**
      *  Image file in the theme.
      *
@@ -3412,7 +3461,7 @@ public class I2PSnarkServlet extends BasicServlet {
     private String toThemeImg(String image) {
         return toThemeImg(image, "", "");
     }
-    
+
     /**
      *  Image file in the theme.
      *
diff --git a/apps/i2psnark/resources/icons/basket_put.png b/apps/i2psnark/resources/icons/basket_put.png
index be62faaaab2773a6e951c3b54eec1303214cf4c2..01fc586107997341ef19a98981e66997b30b2664 100644
Binary files a/apps/i2psnark/resources/icons/basket_put.png and b/apps/i2psnark/resources/icons/basket_put.png differ
diff --git a/apps/i2psnark/resources/icons/cancel.png b/apps/i2psnark/resources/icons/cancel.png
index c149c2bc017d5ce5a8ae9330dd7dbd012482e0f4..d6921565df89bbffb6188df01e7cabd763e20e67 100644
Binary files a/apps/i2psnark/resources/icons/cancel.png and b/apps/i2psnark/resources/icons/cancel.png differ
diff --git a/apps/i2psnark/resources/icons/cd.png b/apps/i2psnark/resources/icons/cd.png
index ef4322357cbc34e0b5eeed34f9fdf553a1de2ee7..fae703d7a3a698cfddff14db1f00c7bddb8d95b6 100644
Binary files a/apps/i2psnark/resources/icons/cd.png and b/apps/i2psnark/resources/icons/cd.png differ
diff --git a/apps/i2psnark/resources/icons/compress.png b/apps/i2psnark/resources/icons/compress.png
index 8606ff0fd23c97d71d43afa0bd587e47c1e90441..183511d3ff6201afad5548e353391ea1dd5029de 100644
Binary files a/apps/i2psnark/resources/icons/compress.png and b/apps/i2psnark/resources/icons/compress.png differ
diff --git a/apps/i2psnark/resources/icons/ebook.png b/apps/i2psnark/resources/icons/ebook.png
new file mode 100644
index 0000000000000000000000000000000000000000..8af80d3e88153dc479c057a57df1e0d438396d53
Binary files /dev/null and b/apps/i2psnark/resources/icons/ebook.png differ
diff --git a/apps/i2psnark/resources/icons/film.png b/apps/i2psnark/resources/icons/film.png
index b0ce7bb198a3b268bd634d2b26e9b710f3797d37..91c2126e7774fb0fe5a675a6f305e5cbd020523e 100644
Binary files a/apps/i2psnark/resources/icons/film.png and b/apps/i2psnark/resources/icons/film.png differ
diff --git a/apps/i2psnark/resources/icons/folder.png b/apps/i2psnark/resources/icons/folder.png
index 784e8fa48234f4f64b6922a6758f254ee0ca08ec..87ff12017cecef023337de505cf617cc42300f09 100644
Binary files a/apps/i2psnark/resources/icons/folder.png and b/apps/i2psnark/resources/icons/folder.png differ
diff --git a/apps/i2psnark/resources/icons/html.png b/apps/i2psnark/resources/icons/html.png
index 55d1072eafda48abb0a5fcecb98b114d866077b9..98cff2a2ebb5118074cc14f02721dc821cd6ecff 100644
Binary files a/apps/i2psnark/resources/icons/html.png and b/apps/i2psnark/resources/icons/html.png differ
diff --git a/apps/i2psnark/resources/icons/music.png b/apps/i2psnark/resources/icons/music.png
index a8b3ede3df956f8d505543b190bc8d1b5b4dce75..e6dc2de8c87649e1a350b322bb280613f4a0cf56 100644
Binary files a/apps/i2psnark/resources/icons/music.png and b/apps/i2psnark/resources/icons/music.png differ
diff --git a/apps/i2psnark/resources/icons/package.png b/apps/i2psnark/resources/icons/package.png
index da3c2a2d74bab159ba0f65d7db601768258afcb2..a9ad768c2a4fd92c26f3b5b0890e042879fa5462 100644
Binary files a/apps/i2psnark/resources/icons/package.png and b/apps/i2psnark/resources/icons/package.png differ
diff --git a/apps/i2psnark/resources/icons/page.png b/apps/i2psnark/resources/icons/page.png
index 03ddd799fa0a3aec561c75d4221f195db65d6eb9..8c1184dffef0616060b2e38fccdf7de1217e8b39 100644
Binary files a/apps/i2psnark/resources/icons/page.png and b/apps/i2psnark/resources/icons/page.png differ
diff --git a/apps/i2psnark/resources/icons/page_white.png b/apps/i2psnark/resources/icons/page_white.png
index 8b8b1ca0000bc8fa8d0379926736029f8fabe364..0847f096db0d223ea7dcdf07cfe2a27736cf50dc 100644
Binary files a/apps/i2psnark/resources/icons/page_white.png and b/apps/i2psnark/resources/icons/page_white.png differ
diff --git a/apps/i2psnark/resources/icons/page_white_acrobat.png b/apps/i2psnark/resources/icons/page_white_acrobat.png
index 8f8095e46fa4965700afe1f9d065d8a37b101676..641a419720687c1a310522d9ceffe585eeb8707b 100644
Binary files a/apps/i2psnark/resources/icons/page_white_acrobat.png and b/apps/i2psnark/resources/icons/page_white_acrobat.png differ
diff --git a/apps/i2psnark/resources/icons/photo.png b/apps/i2psnark/resources/icons/photo.png
index 6c2aaaaaf33ec07184ae0f5824ef24c82c41106f..607c25d102af2aff5be5b32d80adbd5eb75e3fc3 100644
Binary files a/apps/i2psnark/resources/icons/photo.png and b/apps/i2psnark/resources/icons/photo.png differ
diff --git a/apps/i2psnark/resources/icons/plugin.png b/apps/i2psnark/resources/icons/plugin.png
index 6187b15aec001b7080b51a5f944f07591f26cc15..3ca4d1b59493fc040b524aabbdbdeaffd8cce911 100644
Binary files a/apps/i2psnark/resources/icons/plugin.png and b/apps/i2psnark/resources/icons/plugin.png differ
diff --git a/apps/i2psnark/resources/icons/tick.png b/apps/i2psnark/resources/icons/tick.png
index a9925a06ab02db30c1e7ead9c701c15bc63145cb..a7d7a96be3f2282a62e3c0733bac89c7f6de7b4a 100644
Binary files a/apps/i2psnark/resources/icons/tick.png and b/apps/i2psnark/resources/icons/tick.png differ
diff --git a/apps/i2ptunnel/jsp/editClient.jsp b/apps/i2ptunnel/jsp/editClient.jsp
index c28f6fb130c6decbef61b8087e485e6483fc3019..72ffd562541685571e01c0fcb811ea52d2db2880 100644
--- a/apps/i2ptunnel/jsp/editClient.jsp
+++ b/apps/i2ptunnel/jsp/editClient.jsp
@@ -23,8 +23,7 @@
 
     <% if (editBean.allowCSS()) {
   %><link rel="icon" href="<%=editBean.getTheme()%>images/favicon.ico" />
-    <link href="<%=editBean.getTheme()%>default.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" /> 
-    <link href="<%=editBean.getTheme()%>i2ptunnel.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" />
+    <link href="<%=editBean.getTheme()%>i2ptunnel.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" /> 
     <% }
   %>
 <style type='text/css'>
@@ -32,8 +31,7 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
 </style>
 </head>
 <body id="tunnelEditPage">
-    <div id="pageHeader">
-    </div>
+
 <%
 
   if (editBean.isInitialized()) {
@@ -41,19 +39,18 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
 %>
     <form method="post" action="list">
 
-        <div id="tunnelEditPanel" class="panel">
-            <div class="header">
+        <div class="panel">
                 <%
                 String tunnelTypeName;
                 String tunnelType;
                 if (curTunnel >= 0) {
                     tunnelTypeName = editBean.getTunnelType(curTunnel);
                     tunnelType = editBean.getInternalType(curTunnel);
-                  %><h4><%=intl._t("Edit proxy settings")%></h4><% 
+                  %><h2><%=intl._t("Edit proxy settings")%> (<%=editBean.getTunnelName(curTunnel)%>)</h2><% 
                 } else {
                     tunnelTypeName = editBean.getTypeName(request.getParameter("type"));
                     tunnelType = net.i2p.data.DataHelper.stripHTML(request.getParameter("type"));
-                  %><h4><%=intl._t("New proxy settings")%></h4><% 
+                  %><h2><%=intl._t("New proxy settings")%></h2><% 
                 } %>
                 <input type="hidden" name="tunnel" value="<%=curTunnel%>" />
                 <input type="hidden" name="nonce" value="<%=net.i2p.i2ptunnel.web.IndexBean.getNextNonce()%>" />
@@ -79,70 +76,88 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                     <input type="hidden" name="key4" value="<%=key%>" />
                 <% } %>
                 <input type="submit" class="default" name="action" value="Save changes" />
-            </div>
-      
-            <div class="separator">
-                <hr />
-            </div>
-
-            <div id="nameField" class="rowItem">
-                <label for="name" accesskey="N">
-                    <%=intl._t("Name")%>:(<span class="accessKey">N</span>)
-                </label>
-                <input type="text" size="30" maxlength="50" name="name" id="name" title="Tunnel Name" value="<%=editBean.getTunnelName(curTunnel)%>" class="freetext" />               
-            </div>
-            <div id="typeField" class="rowItem">
-                <label><%=intl._t("Type")%>:</label>
-                <span class="text"><%=tunnelTypeName%></span>
-            </div>
-            <div id="descriptionField" class="rowItem">
-                <label for="description" accesskey="e">
-                    <%=intl._t("Description")%>:(<span class="accessKey">E</span>)
-                </label>
-                <input type="text" size="60" maxlength="80" name="nofilter_description"  id="description" title="Tunnel Description" value="<%=editBean.getTunnelDescription(curTunnel)%>" class="freetext" />                
-            </div>
-                 
-            <div class="subdivider">
-                <hr />
-            </div>
-                 
-            <div id="accessField" class="rowItem">
+
+    <table id="clientTunnelEdit" class="tunnelConfig">
+        <tr>
+            <th>
+                <%=intl._t("Name")%>
+            </th>
+            <th>
+                <%=intl._t("Type")%>
+            </th>
+        </tr>
+        <tr>
+            <td>
+                <input type="text" size="30" maxlength="50" name="name" title="Tunnel Name" value="<%=editBean.getTunnelName(curTunnel)%>" class="freetext tunnelName" />
+            </td>
+            <td>
+                <%=tunnelTypeName%>
+            </td>
+        </tr>
+
+        <tr>
+            <th>
+                <%=intl._t("Description")%>
+            </th>
+
+            <th>
+                <%=intl._t("Auto Start Tunnel")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td>
+                <input type="text" size="60" maxlength="80" name="nofilter_description" title="Tunnel Description" value="<%=editBean.getTunnelDescription(curTunnel)%>" class="freetext tunnelDescription" />
+            </td>
+
+            <td>
+                <label><input value="1" type="checkbox" name="startOnLoad" title="Start Tunnel Automatically"<%=(editBean.startAutomatically(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Automatically start tunnel when router starts")%></label>
+            </td>
+        </tr>
+
+        <tr>
+            <th colspan="2">
          <% if ("streamrclient".equals(tunnelType)) { %>
-                <label><%=intl._t("Target")%>:</label>
+                <%=intl._t("Target")%>
          <% } else { %>
-                <label><%=intl._t("Access Point")%>:</label>
+                <%=intl._t("Access Point")%>
          <% } /* streamrclient */ %>
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="port" accesskey="P">
-                    <span class="accessKey">P</span>ort:
+            </th>
+        </tr>
+        <tr>
+            <td>
+                <b><%=intl._t("Port")%>:</b>
                     <% String value = editBean.getClientPort(curTunnel);
                        if (value == null || "".equals(value.trim())) {
-                           out.write(" <font color=\"red\">(");
+                           out.write(" <span class=\"required\"><font color=\"red\">(");
                            out.write(intl._t("required"));
-                           out.write(")</font>");
+                           out.write(")</font></span>");
                        }
                      %>
-                </label>
-                <input type="text" size="6" maxlength="5" id="port" name="port" title="Access Port Number" value="<%=editBean.getClientPort(curTunnel)%>" class="freetext" />               
-            </div>
-            <div id="reachField" class="rowItem">
-                <label for="reachableBy" accesskey="r">
+                <input type="text" size="6" maxlength="5" name="port" title="Access Port Number" value="<%=editBean.getClientPort(curTunnel)%>" class="freetext port" placeholder="required" />
+            </td>
+
          <%
-            if ("streamrclient".equals(tunnelType)) {
-                       out.write("Host:");
+            if ("streamrclient".equals(tunnelType)) { %>
+            <td>
+                <b><%=intl._t("Host")%>:</b>
+                    <%
                        String targetHost = editBean.getTargetHost(curTunnel);
                        if (targetHost == null || "".equals(targetHost.trim())) {
-                           out.write(" <font color=\"red\">(");
+                           out.write(" <span class=\"required\"><font color=\"red\">(");
                            out.write(intl._t("required"));
-                           out.write(")</font>");
-                       }   
+                           out.write(")</font></span>");
+                       }
           %>
-                </label>
-                <input type="text" size="20" id="targetHost" name="targetHost" title="Target Hostname or IP" value="<%=targetHost%>" class="freetext" />                
+
+                <input type="text" size="20" id="targetHost" name="targetHost" title="Target Hostname or IP" value="<%=targetHost%>" class="freetext host" placeholder="required" />
+            </td>
          <% } else { %>
-                    <%=intl._t("Reachable by")%>(<span class="accessKey">R</span>):
-                </label>
+
+            <td>
+                <b><%=intl._t("Reachable by")%>:</b>
+
                 <select id="reachableBy" name="reachableBy" title="IP for Client Access" class="selectbox">
               <%
                     String clientInterface = editBean.getClientInterface(curTunnel);
@@ -157,111 +172,153 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                         out.write("</option>\n");
                     }
               %>
-                </select>                
+                </select>
+            </td>
          <% } /* streamrclient */ %>
-            </div> 
+        </tr>
+
          <% if ("client".equals(tunnelType) || "ircclient".equals(tunnelType)) {
-          %><div id="portField" class="rowItem">
-                <label>
+          %>
+        <tr>
+            <th colspan="2">
                     <%=intl._t("Use SSL?")%>
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="useSSL" title="Clients use SSL to connect" <%=(editBean.isSSLEnabled(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <label><input value="1" type="checkbox" name="useSSL" title="Clients use SSL to connect" <%=(editBean.isSSLEnabled(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Clients use SSL to connect to tunnel")%></label>
+            </td>
+        </tr>
          <% } /* tunnel types */ %>
 
-            <div class="subdivider">
-                <hr />
-            </div>
-           
             <% if ("httpclient".equals(tunnelType) || "connectclient".equals(tunnelType) || "sockstunnel".equals(tunnelType) || "socksirctunnel".equals(tunnelType)) {
-          %><div id="destinationField" class="rowItem">
-                <label for="proxyList" accesskey="x">
-                    <%=intl._t("Outproxies")%>(<span class="accessKey">x</span>):
-                </label>
-                <input type="text" size="30" id="proxyList" name="proxyList" title="List of Outproxy I2P destinations" value="<%=editBean.getClientDestination(curTunnel)%>" class="freetext" />                
-            </div>
+          %>
+        <tr>
+            <th colspan="2">
+                    <%=intl._t("Outproxies")%>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <input type="text" size="30" name="proxyList" title="List of Outproxy I2P destinations" value="<%=editBean.getClientDestination(curTunnel)%>" class="freetext proxyList" />&nbsp;(<%=intl._t("comma separated eg. proxy1.i2p,proxy2.i2p")%>)
+            </td>
+        </tr>
+
               <% if ("httpclient".equals(tunnelType)) {
-                 %><div id="destinationField" class="rowItem">
-                   <label>
-                       <%=intl._t("SSL Outproxies")%>:
-                   </label>
-                   <input type="text" size="30" id="sslProxyList" name="sslProxies" title="List of Outproxy I2P destinations" value="<%=editBean.getSslProxies(curTunnel)%>" class="freetext" />                
-                   </div>
+                 %>
+        <tr>
+            <th colspan="2">
+                       <%=intl._t("SSL Outproxies")%>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                   <input type="text" size="30" name="sslProxies" title="List of Outproxy I2P destinations" value="<%=editBean.getSslProxies(curTunnel)%>" class="freetext proxyList" />
+            </td>
+        </tr>
+
               <% }  // httpclient %>
-            <div id="startupField" class="rowItem">
-                <label>
-                    <%=intl._t("Use Outproxy Plugin")%>:
-                </label>
-                <input value="1" type="checkbox" id="shared" name="useOutproxyPlugin" title="Use plugin instead of above-listed proxies if available"<%=(editBean.getUseOutproxyPlugin(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <span class="comment"><%=intl._t("(Check the Box for 'YES')")%></span>
-            </div>
+        <tr>
+            <th colspan="2">
+                    <%=intl._t("Use Outproxy Plugin")%>
+
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+
+                <label><input value="1" type="checkbox" name="useOutproxyPlugin" <%=(editBean.getUseOutproxyPlugin(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+<%=intl._t("Use plugin instead of above-listed proxies if available")%></label>
+            </td>
+        </tr>
             <% } else if ("client".equals(tunnelType) || "ircclient".equals(tunnelType) || "streamrclient".equals(tunnelType)) {
-          %><div id="destinationField" class="rowItem">
-                <label for="targetDestination" accesskey="T">
-                    <%=intl._t("Tunnel Destination")%>(<span class="accessKey">T</span>):
+          %>
+        <tr>
+            <th colspan="2">
+                    <%=intl._t("Tunnel Destination")%>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
                     <% String value2 = editBean.getClientDestination(curTunnel);
                        if (value2 == null || "".equals(value2.trim())) {
-                           out.write(" <font color=\"red\">(");
+                           out.write(" <span class=\"required\"><font color=\"red\">(");
                            out.write(intl._t("required"));
-                           out.write(")</font>");
-                       }   
+                           out.write(")</font></span>");
+                       }
                      %>
-                </label>
-                <input type="text" size="30" id="targetDestination" name="targetDestination" title="Destination of the Tunnel" value="<%=editBean.getClientDestination(curTunnel)%>" class="freetext" />                
-                <span class="comment">(<%=intl._t("name, name:port, or destination")%>
+
+                <input type="text" size="30" id="targetDestination" name="targetDestination" title="Destination of the Tunnel" value="<%=editBean.getClientDestination(curTunnel)%>" class="freetext destination" placeholder="required" />
+                (<%=intl._t("name, name:port, or destination")%>
                      <% if ("streamrclient".equals(tunnelType)) { /* deferred resolution unimplemented in streamr client */ %>
                          - <%=intl._t("b32 not recommended")%>
                      <% } %> )
-                </span>
-            </div>
+            </td>
+        </tr>
+
          <% } %>
+
          <% if (!"streamrclient".equals(tunnelType)) { %>
-            <div id="sharedtField" class="rowItem">
-                <label for="shared" accesskey="h">
-                    <%=intl._t("Shared Client")%>(<span class="accessKey">h</span>):
-                </label>
-                <input value="true" type="checkbox" id="shared" name="shared" title="Share tunnels with other clients"<%=(editBean.isSharedClient(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <span class="comment"><%=intl._t("(Share tunnels with other clients and irc/httpclients? Change requires restart of client proxy)")%></span>
-            </div>
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Shared Client")%>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <label><input value="true" type="checkbox" name="shared" title="Share tunnels with other clients"<%=(editBean.isSharedClient(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Share tunnels with other clients and irc/httpclients? (Change requires restart of client proxy tunnel)")%></label>
+            </td>
+        </tr>
+
          <% } // !streamrclient %>
-            <div id="startupField" class="rowItem">
-                <label for="startOnLoad" accesskey="a">
-                    <%=intl._t("Auto Start")%>(<span class="accessKey">A</span>):
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="startOnLoad" title="Start Tunnel Automatically"<%=(editBean.startAutomatically(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <span class="comment"><%=intl._t("(Check the Box for 'YES')")%></span>
-            </div>
+
          <% if ("ircclient".equals(tunnelType)) { %>
-            <div id="startupField" class="rowItem">
-                <label for="dcc" accesskey="d">
-                    <%=intl._t("Enable DCC")%>:
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="DCC" title="Enable DCC"<%=(editBean.getDCC(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <span class="comment"><%=intl._t("(Check the Box for 'YES')")%></span>
-            </div>
+        <tr>
+            <th colspan="2">
+                    <%=intl._t("Enable DCC")%>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <label><input value="1" type="checkbox" name="DCC" title="Enable DCC"<%=(editBean.getDCC(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Enable Direct Client-to-Client protocol. Note that this will compromise your anonymity and is <i>not</i> recommended.")%></label>
+            </td>
+        </tr>
+
          <% } // ircclient %>
-            
-            <div class="footer">
-            </div>
-        </div>
-
-        <div id="tunnelAdvancedNetworking" class="panel">
-            <div class="header">
-                <h4><%=intl._t("Advanced networking options")%></h4><br />
-                <span class="comment"><%=intl._t("(NOTE: when this client proxy is configured to share tunnels, then these options are for all the shared proxy clients!)")%></span>
-            </div>
-
-            <div class="separator">
-                <hr />
-            </div>
-            
-            <div id="tunnelOptionsField" class="rowItem">
-                <label><%=intl._t("Tunnel Options")%>:</label>
-            </div>
-            <div id="depthField" class="rowItem">
-                <label for="tunnelDepth" accesskey="t">
-                    <%=intl._t("Length")%>(<span class="accessKey">t</span>):
-                </label>
+    </table>
+
+    <h3><%=intl._t("Advanced Networking Options")%></h3>
+
+    <table class="tunnelConfig">
+
+
+<% if (!"streamrclient".equals(tunnelType)) { %> <% // no shared client tunnels for streamr %>
+        <tr>
+            <td class="infohelp" colspan="2">
+                <%=intl._t("Note: When this client proxy is configured to share tunnels, then these options are for all the shared proxy clients!")%>
+            </td>
+        </tr>
+         <% } // !streamrclient %>
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Tunnel Options")%>
+            </th>
+        </tr>
+        <tr>
+            <td>
+                <b><%=intl._t("Length")%></b>
+            </td>
+
+            <td>
+                <b><%=intl._t("Variance")%></b>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
                 <select id="tunnelDepth" name="tunnelDepth" title="Length of each Tunnel" class="selectbox">
                     <% int tunnelDepth = editBean.getTunnelDepth(curTunnel, 3);
                   %><option value="0"<%=(tunnelDepth == 0 ? " selected=\"selected\"" : "") %>><%=intl._t("0 hop tunnel (no anonymity)")%></option>
@@ -277,11 +334,9 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                 %>    <option value="<%=tunnelDepth%>" selected="selected"><%=tunnelDepth%> <%=intl._t("hop tunnel (very poor performance)")%></option>
                 <% }
               %></select>
-            </div>
-            <div id="varianceField" class="rowItem">
-                <label for="tunnelVariance" accesskey="v">
-                    <%=intl._t("Variance")%>(<span class="accessKey">V</span>):
-                </label>
+            </td>
+
+            <td>
                 <select id="tunnelVariance" name="tunnelVariance" title="Level of Randomization for Tunnel Length" class="selectbox">
                     <% int tunnelVariance = editBean.getTunnelVariance(curTunnel, 0);
                   %><option value="0"<%=(tunnelVariance  ==  0 ? " selected=\"selected\"" : "") %>><%=intl._t("0 hop variance (no randomization, consistent performance)")%></option>
@@ -292,20 +347,27 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                 <% if (tunnelVariance > 2 || tunnelVariance < -2) {
                 %>    <option value="<%=tunnelVariance%>" selected="selected"><%= (tunnelVariance > 2 ? "+ " : "+/- ") %>0-<%=tunnelVariance%> <%=intl._t("hop variance")%></option>
                 <% }
-              %></select>                
-            </div>                
-            <div id="countField" class="rowItem">
-                <label for="tunnelQuantity" accesskey="C">
-                    <%=intl._t("Count")%>(<span class="accessKey">C</span>):
-                </label>
+              %></select>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <b><%=intl._t("Count")%></b>
+            </td>
+
+            <td>
+                <b><%=intl._t("Backup Count")%></b>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
                 <select id="tunnelQuantity" name="tunnelQuantity" title="Number of Tunnels in Group" class="selectbox">
                     <%=editBean.getQuantityOptions(curTunnel)%>
-                </select>                
-            </div>
-            <div id="backupField" class="rowItem">
-                <label for="tunnelBackupQuantity" accesskey="b">
-                    <%=intl._t("Backup Count")%>(<span class="accessKey">B</span>):
-                </label>
+                </select>
+            </td>
+
+            <td>
                 <select id="tunnelBackupQuantity" name="tunnelBackupQuantity" title="Number of Reserve Tunnels" class="selectbox">
                     <% int tunnelBackupQuantity = editBean.getTunnelBackupQuantity(curTunnel, 0);
                   %><option value="0"<%=(tunnelBackupQuantity == 0 ? " selected=\"selected\"" : "") %>><%=intl._t("0 backup tunnels (0 redundancy, no added resource usage)")%></option>
@@ -315,343 +377,360 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                 <% if (tunnelBackupQuantity > 3) {
                 %>    <option value="<%=tunnelBackupQuantity%>" selected="selected"><%=tunnelBackupQuantity%> <%=intl._t("backup tunnels")%></option>
                 <% }
-              %></select>                
-            </div>
-                            
-            <div class="subdivider">
-                <hr />
-            </div>
+              %></select>
+            </td>
+        </tr>
+
 
          <% if (!"streamrclient".equals(tunnelType)) { %>
-            <div id="profileField" class="rowItem">
-                <label for="profile" accesskey="f">
-                    <%=intl._t("Profile")%>(<span class="accessKey">f</span>):
-                </label>
-                <select id="profile" name="profile" title="Connection Profile" class="selectbox">
+        <tr>
+            <th>
+                <%=intl._t("Profile")%>
+            </th>
+
+            <th>
+                <%=intl._t("Delay Connect")%>
+            </th>
+
+        </tr>
+
+        <tr>
+            <td>
+                <select id="connectionProfile" name="profile" title="Connection Profile" class="selectbox">
                     <% boolean interactiveProfile = editBean.isInteractive(curTunnel);
                   %><option <%=(interactiveProfile == true  ? "selected=\"selected\" " : "")%>value="interactive"><%=intl._t("interactive connection")%> </option>
                     <option <%=(interactiveProfile == false ? "selected=\"selected\" " : "")%>value="bulk"><%=intl._t("bulk connection (downloads/websites/BT)")%> </option>
-                </select>                
-            </div>
-            <div id="delayConnectField" class="rowItem">
-                <label for="connectDelay" accesskey="y">
-                    <%=intl._t("Delay Connect")%>(<span class="accessKey">y</span>):
-                </label>
-                <input value="1000" type="checkbox" id="connectDelay" name="connectDelay" title="Delay Connection"<%=(editBean.shouldDelay(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <span class="comment">(<%=intl._t("for request/response connections")%>)</span>
-            </div>
-
-            <div class="subdivider">
-                <hr />
-            </div>
+                </select>
+            </td>
+
+            <td>
+                <label><input value="1000" type="checkbox" name="connectDelay" title="Delay Connection"<%=(editBean.shouldDelay(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                (<%=intl._t("for request/response connections")%>)</label>
+            </td>
+        </tr>
          <% } // !streamrclient %>
 
-            <div id="optionsField" class="rowItem">
-                <label><%=intl._t("Router I2CP Address")%>:</label>
-            </div>
-            <div id="optionsHostField" class="rowItem">
-                <label for="clientHost" accesskey="o">
-                    <%=intl._t("Host")%>(<span class="accessKey">o</span>):
-                </label>
-                <input type="text" id="clientHost" name="clientHost" size="20" title="I2CP Hostname or IP" value="<%=editBean.getI2CPHost(curTunnel)%>" class="freetext" <% if (editBean.isRouterContext()) { %> readonly="readonly" <% } %> />                
-            </div>
-            <div id="optionsPortField" class="rowItem">
-                <label for="clientPort" accesskey="r">
-                    <%=intl._t("Port")%>(<span class="accessKey">r</span>):
-                </label>
-                <input type="text" id="clientPort" name="clientport" size="20" title="I2CP Port Number" value="<%=editBean.getI2CPPort(curTunnel)%>" class="freetext" <% if (editBean.isRouterContext()) { %> readonly="readonly" <% } %> />                
-            </div>
-                 
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Router I2CP Address")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td>
+                <b><%=intl._t("Host")%>:</b>
+                <input type="text" name="clientHost" size="20" title="I2CP Hostname or IP" value="<%=editBean.getI2CPHost(curTunnel)%>" class="freetext host" <% if (editBean.isRouterContext()) { %> readonly="readonly" <% } %> />
+            </td>
+
+
+            <td>
+                <b><%=intl._t("Port")%>:</b>
+                <input type="text" name="clientport" size="20" title="I2CP Port Number" value="<%=editBean.getI2CPPort(curTunnel)%>" class="freetext port" <% if (editBean.isRouterContext()) { %> readonly="readonly" <% } %> />
+            </td>
+        </tr>
+
          <% if (!"streamrclient".equals(tunnelType)) { // streamr client sends pings so it will never be idle %>
-            <div class="subdivider">
-                <hr />
-            </div>
-
-            <div id="optionsField" class="rowItem">
-                <label for="reduce" accesskey="c">
-                    <%=intl._t("Delay tunnel open until required")%>(<span class="accessKey">D</span>):
-                </label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="access" accesskey="c">
-                    <%=intl._t("Enable")%>:
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="delayOpen" title="Delay Tunnel Open"<%=(editBean.getDelayOpen(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Delay tunnel open until required")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <label><input value="1" type="checkbox" name="delayOpen" title="Delay Tunnel Open"<%=(editBean.getDelayOpen(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Delay opening client tunnel until activity is detected on the configured tunnel port")%></label>
+            </td>
+        </tr>
+
          <% } // !streamrclient %>
-                 
-            <div class="subdivider">
-                <hr />
-            </div>
-           
-            <div id="optionsField" class="rowItem">
-                <label for="reduce" accesskey="d">
-                    <%=intl._t("Reduce tunnel quantity when idle")%>(<span class="accessKey">d</span>):
-                </label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="access" accesskey="d">
-                    <%=intl._t("Enable")%>:
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="reduce" title="Reduce Tunnels"<%=(editBean.getReduce(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="reduceCount" accesskey="d">
-                    <%=intl._t("Reduced tunnel count")%>:
-                </label>
-                <input type="text" id="port" name="reduceCount" size="1" maxlength="1" title="Reduced Tunnel Count" value="<%=editBean.getReduceCount(curTunnel)%>" class="freetext" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="reduceTime" accesskey="d">
-                    <%=intl._t("Idle minutes")%>:
-                </label>
-                <input type="text" id="port" name="reduceTime" size="4" maxlength="4" title="Reduced Tunnel Idle Time" value="<%=editBean.getReduceTime(curTunnel)%>" class="freetext" />                
-            </div>
-            
-            <div class="subdivider">
-                <hr />
-            </div>
-           
-            <div id="optionsField" class="rowItem">
-                <label for="reduce" accesskey="c">
-                    <%=intl._t("Close tunnels when idle")%>(<span class="accessKey">C</span>):
-                </label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="access" accesskey="c">
-                    <%=intl._t("Enable")%>:
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="close" title="Close Tunnels"<%=(editBean.getClose(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="access" accesskey="c">
-                    <%=intl._t("New Keys on Reopen")%>:
-                </label>
-                <table border="0"><tr><!-- I give up -->
-                <td><input value="1" type="radio" id="startOnLoad" name="newDest" title="New Destination"
-                     <%=(editBean.getNewDest(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" /></td>
-                <td><%=intl._t("Enable")%></td>
-                <td><input value="0" type="radio" id="startOnLoad" name="newDest" title="New Destination"
-                     <%=(editBean.getNewDest(curTunnel) || editBean.getPersistentClientKey(curTunnel) ? "" : " checked=\"checked\"")%> class="tickbox" /></td>
-                <td><%=intl._t("Disable")%></td></tr>
-                </table>
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="reduceTime" accesskey="c">
-                    <%=intl._t("Idle minutes")%>:
-                </label>
-                <input type="text" id="port" name="closeTime" size="4" maxlength="4" title="Close Tunnel Idle Time" value="<%=editBean.getCloseTime(curTunnel)%>" class="freetext" />                
-            </div>
-                 
-            <div class="subdivider">
-                <hr />
-            </div>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Reduce tunnel quantity when idle")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <label><input value="1" type="checkbox" name="reduce" title="Reduce Tunnels"<%=(editBean.getReduce(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Reduce tunnel quantity when idle to conserve resources")%></label>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <b><%=intl._t("Reduced tunnel count")%>:</b>
+                <input type="text" id="reducedTunnelCount" name="reduceCount" size="1" maxlength="1" title="Reduced Tunnel Count" value="<%=editBean.getReduceCount(curTunnel)%>" class="freetext quantity" />
+            </td>
+
+            <td>
+                <b><%=intl._t("Idle period")%>:</b>
+                <input type="text" name="reduceTime" size="4" maxlength="4" title="Reduced Tunnel Idle Time" value="<%=editBean.getReduceTime(curTunnel)%>" class="freetext period" />
+                minutes
+            </td>
+        </tr>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Close tunnels when idle")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td>
+                <label><input value="1" type="checkbox" name="close" title="Close Tunnels"<%=(editBean.getClose(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Close client tunnels after specified idle period")%></label>
+            </td>
+
+            <td>
+                <b><%=intl._t("Idle period")%>:</b>
+                <input type="text" name="closeTime" size="4" maxlength="4" title="Close Tunnel Idle Time" value="<%=editBean.getCloseTime(curTunnel)%>" class="freetext period" />
+                minutes
+            </td>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <b><%=intl._t("New Keys on Reopen")%>:</b>
+                <span class="multiOption">
+                    <label><input value="1" type="radio" name="newDest" title="New Destination"
+                        <%=(editBean.getNewDest(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    <%=intl._t("Enable")%></label>
+                </span>
+                <span class="multiOption">
+                    <label><input value="0" type="radio" name="newDest" title="New Destination"
+                        <%=(editBean.getNewDest(curTunnel) || editBean.getPersistentClientKey(curTunnel) ? "" : " checked=\"checked\"")%> class="tickbox" />
+                    <%=intl._t("Disable")%></label>
+                </span>
+            </td>
+        </tr>
 
          <% if ("client".equals(tunnelType) || "ircclient".equals(tunnelType) || "socksirctunnel".equals(tunnelType) || "sockstunnel".equals(tunnelType)) { %>
-            <div id="optionsField" class="rowItem">
-                <label for="privKeyFile" accesskey="k">
-                    <%=intl._t("Persistent private key")%>(<span class="accessKey">k</span>):
-                </label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label><%=intl._t("Enable")%>:</label>
-                <input value="2" type="radio" id="startOnLoad" name="newDest" title="New Destination"
-                     <%=(editBean.getPersistentClientKey(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
-            <div id="reachField" class="rowItem">
-                <label><%=intl._t("File")%>:</label>
-                <input type="text" size="30" id="clientHost" name="privKeyFile" title="Path to Private Key File" value="<%=editBean.getPrivateKeyFile(curTunnel)%>" class="freetext" />               
-            </div>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Persistent private key")%>
+            </th>
+        </tr>
+        <tr>
+            <td>
+                <label><input value="2" type="radio" name="newDest" title="New Destination"
+                     <%=(editBean.getPersistentClientKey(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Generate key to enable persistent client tunnel identity")%></label>
+            </td>
+            <td>
+                <b><%=intl._t("File")%>:</b>
+                <input type="text" size="30" id="privKeyFile" name="privKeyFile" title="Path to Private Key File" value="<%=editBean.getPrivateKeyFile(curTunnel)%>" class="freetext" />
+            </td>
+        </tr>
          <%
-            String destb64 = editBean.getDestinationBase64(curTunnel);     
+            String destb64 = editBean.getDestinationBase64(curTunnel);
             if (destb64.length() > 0) {
-           %>   <div id="destinationField" class="rowItem">
-                    <label for="localDestination" accesskey="L">
-                        <%=intl._t("Local destination")%>(<span class="accessKey">L</span>):
-                    </label>
-                    <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Read Only: Local Destination (if known)" wrap="off" spellcheck="false"><%=destb64%></textarea>               
-                </div>
-                <div id="destinationField" class="rowItem">
-                    <label><%=intl._t("Local Base 32")%>:</label>
-                    <%=editBean.getDestHashBase32(curTunnel)%>
-                </div>
-         <% } // if destb64  %>
+           %>
+
+        <tr>
+            <td colspan="2">
+                <b><%=intl._t("Local destination")%></b>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                    <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Read Only: Local Destination (if known)" wrap="off" spellcheck="false"><%=destb64%></textarea>
+            </td>
+        </tr>
 
-            <div class="subdivider">
-                <hr />
-            </div>
+        <tr>
+            <td colspan="2">
+                <b><%=intl._t("Local Base 32")%>:</b>
+                <%=editBean.getDestHashBase32(curTunnel)%>
+            </td>
+        </tr>
+         <% } // if destb64  %>
          <% } %>
 
          <% if ("httpclient".equals(tunnelType)) { %>
-            <div id="optionsField" class="rowItem">
-                <label><%=intl._t("Pass User-Agent header through")%>:</label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label><%=intl._t("Enable")%>:</label>
-                <input value="1" type="checkbox" id="startOnLoad" name="allowUserAgent" title="Do not spoof user agent string when checked"<%=(editBean.getAllowUserAgent(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div><br />
-            <div id="optionsField" class="rowItem">
-                <label><%=intl._t("Pass Referer header through")%>:</label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label><%=intl._t("Enable")%>:</label>
-                <input value="1" type="checkbox" id="startOnLoad" name="allowReferer" title="Do not block referer header when checked"<%=(editBean.getAllowReferer(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div><br />
-            <div id="optionsField" class="rowItem">
-                <label><%=intl._t("Pass Accept headers through")%>:</label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label><%=intl._t("Enable")%>:</label>
-                <input value="1" type="checkbox" id="startOnLoad" name="allowAccept" title="Do not block accept headers when checked"<%=(editBean.getAllowAccept(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div><br />
-            <div id="optionsField" class="rowItem">
-                <label><%=intl._t("Allow SSL to I2P addresses")%>:</label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label><%=intl._t("Enable")%>:</label>
-                <input value="1" type="checkbox" id="startOnLoad" name="allowInternalSSL" title="Allow SSL to I2P addresses when checked"<%=(editBean.getAllowInternalSSL(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
-            <div class="subdivider">
-                <hr />
-            </div>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("HTTP Filtering")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td>
+                <label><input value="1" type="checkbox" name="allowUserAgent" title="Do not spoof user agent string when checked"<%=(editBean.getAllowUserAgent(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Do not spoof User-Agent header")%></label>
+            </td>
+            <td>
+                <label><input value="1" type="checkbox" name="allowReferer" title="Do not block referer header when checked"<%=(editBean.getAllowReferer(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Do not block Referer header")%></label>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <label><input value="1" type="checkbox" name="allowAccept" title="Do not block accept headers when checked"<%=(editBean.getAllowAccept(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+<%=intl._t("Do not block Accept headers")%></label>
+            </td>
+
+            <td>
+                <label><input value="1" type="checkbox" name="allowInternalSSL" title="Allow SSL to I2P addresses when checked"<%=(editBean.getAllowInternalSSL(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Allow SSL to I2P addresses")%></label>
+            </td>
+        </tr>
          <% } // if httpclient %>
-           
+
          <% if (true /* editBean.isAdvanced() */ ) {
                 int currentSigType = editBean.getSigType(curTunnel, tunnelType);
            %>
-            <div id="tunnelOptionsField" class="rowItem">
-                <label>
-                    <%=intl._t("Signature type")%>
-                    (<%=intl._t("Experts only!")%>)
-                </label>
-            </div>
-            <div id="hostField" class="rowItem">
-              <div id="portField" class="rowItem">
-                <label>DSA-SHA1</label>
-                <input value="0" type="radio" id="startOnLoad" name="sigType" title="Default"<%=(currentSigType==0 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Signature type")%> (<%=intl._t("Experts only!")%>)
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <span class="multiOption">
+                    <label><input value="0" type="radio" name="sigType" title="Default"<%=(currentSigType==0 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    DSA-SHA1</label>
+                </span>
+
+
            <% if (editBean.isSigTypeAvailable(1)) { %>
-              <div id="portField" class="rowItem">
-                <label>ECDSA-P256</label>
-                <input value="1" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==1 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+
+                <span class="multiOption">
+                    <label><input value="1" type="radio" name="sigType" title="Advanced users only"<%=(currentSigType==1 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    ECDSA-P256</label>
+                </span>
+
+
            <% }
+
               if (editBean.isSigTypeAvailable(2)) { %>
-              <div id="portField" class="rowItem">
-                <label>ECDSA-P384</label>
-                <input value="2" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==2 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+
+                <span class="multiOption">
+                    <label><input value="2" type="radio" name="sigType" title="Advanced users only"<%=(currentSigType==2 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    ECDSA-P384</label>
+                </span>
+
            <% }
               if (editBean.isSigTypeAvailable(3)) { %>
-              <div id="portField" class="rowItem">
-                <label>ECDSA-P521</label>
-                <input value="3" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==3 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+
+                <span class="multiOption">
+                    <label><input value="3" type="radio" name="sigType" title="Advanced users only"<%=(currentSigType==3 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    ECDSA-P521</label>
+                </span>
+
+
            <% }
               if (editBean.isSigTypeAvailable(7)) { %>
-              <div id="portField" class="rowItem">
-                <label>Ed25519-SHA-512</label>
-                <input value="7" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==7 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+
+                <span class="multiOption">
+                    <label><input value="7" type="radio" name="sigType" title="Advanced users only"<%=(currentSigType==7 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    Ed25519-SHA-512</label>
+                </span>
+            </td>
+        </tr>
            <% }   // isAvailable %>
-            </div>
-                 
-            <div class="subdivider">
-                <hr />
-            </div>
+         
          <% } // isAdvanced %>
 
          <% if ("httpclient".equals(tunnelType) || "connectclient".equals(tunnelType) || "sockstunnel".equals(tunnelType) || "socksirctunnel".equals(tunnelType)) { %>
-            <div id="accessField" class="rowItem">
-                <label><%=intl._t("Local Authorization")%>:</label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label>
-                    <%=intl._t("Enable")%>:
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="proxyAuth" title="Check to require authorization for this service"<%=(editBean.getProxyAuth(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label>
-                    <%=intl._t("Username")%>:
-                </label>
-                <input type="text" id="clientPort" name="proxyUsername" title="Set username for this service" value="" class="freetext" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label>
-                    <%=intl._t("Password")%>:
-                </label>
-                <input type="password" id="clientPort" name="nofilter_proxyPassword" title="Set password for this service" value="" class="freetext" />                
-            </div>
-            <div class="subdivider">
-                <hr />
-            </div>
-            <div id="accessField" class="rowItem">
-                <label><%=intl._t("Outproxy Authorization")%>:</label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label>
-                    <%=intl._t("Enable")%>:
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="outproxyAuth" title="Check if the outproxy requires authorization"<%=(editBean.getOutproxyAuth(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label>
-                    <%=intl._t("Username")%>:
-                </label>
-                <input type="text" id="clientPort" name="outproxyUsername" title="Enter username required by outproxy" value="<%=editBean.getOutproxyUsername(curTunnel)%>" class="freetext" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label>
-                    <%=intl._t("Password")%>:
-                </label>
-                <input type="password" id="clientPort" name="nofilter_outproxyPassword" title="Enter password required by outproxy" value="<%=editBean.getOutproxyPassword(curTunnel)%>" class="freetext" />                
-            </div>
-            <div class="subdivider">
-                <hr />
-            </div>
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Local Authorization")%>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <label><input value="1" type="checkbox" name="proxyAuth" title="Check to require authorization for this service"<%=(editBean.getProxyAuth(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Require local authorization for this service")%></label>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <b><%=intl._t("Username")%>:</b>
+                <input type="text" name="proxyUsername" title="Set username for this service" value="" class="freetext username" />
+            </td>
+            <td>
+                <b><%=intl._t("Password")%>:</b>
+                <input type="password" name="nofilter_proxyPassword" title="Set password for this service" value="" class="freetext password" />
+            </td>
+        </tr>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Outproxy Authorization")%>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <label><input value="1" type="checkbox" id="startOnLoad" name="outproxyAuth" title="Check if the outproxy requires authorization"<%=(editBean.getOutproxyAuth(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Outproxy requires authorization")%></label>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <b><%=intl._t("Username")%>:</b>
+                <input type="text" name="outproxyUsername" title="Enter username required by outproxy" value="<%=editBean.getOutproxyUsername(curTunnel)%>" class="freetext username" />
+            </td>
+
+            <td>
+                <b><%=intl._t("Password")%>:</b>
+                <input type="password" name="nofilter_outproxyPassword" title="Enter password required by outproxy" value="<%=editBean.getOutproxyPassword(curTunnel)%>" class="freetext password" />
+            </td>
+        </tr>
+
          <% } // httpclient || connect || socks || socksirc %>
 
          <% if ("httpclient".equals(tunnelType)) { %>
-            <div id="optionsField" class="rowItem">
-                <label><%=intl._t("Jump URL List")%>:</label>
-            </div>
-            <div id="hostField" class="rowItem">
-                <textarea rows="2" style="height: 8em;" cols="60" id="hostField" name="jumpList" title="List of helper URLs to offer when a host is not found in your addressbook" wrap="off" spellcheck="false"><%=editBean.getJumpList(curTunnel)%></textarea>               
-            </div>
-            <div class="subdivider">
-                <hr />
-            </div>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Jump URL List")%>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <textarea rows="2" style="height: 8em;" cols="60" id="hostField" name="jumpList" title="List of helper URLs to offer when a host is not found in your addressbook" wrap="off" spellcheck="false"><%=editBean.getJumpList(curTunnel)%></textarea>
+            </td>
+        </tr>
+
          <% } // httpclient %>
 
-            <div id="customOptionsField" class="rowItem">
-                <label for="customOptions" accesskey="u">
-                    <%=intl._t("Custom options")%>(<span class="accessKey">u</span>):
-                </label>
-                <input type="text" id="customOptions" name="nofilter_customOptions" size="60" title="Custom Options" value="<%=editBean.getCustomOptions(curTunnel)%>" class="freetext" spellcheck="false"/>                
-            </div>
-            
-            <div class="footer">
-            </div>
-        </div>
-        <div id="globalOperationsPanel" class="panel">
-            <div class="header"></div>
-            <div class="footer">
-                <div class="toolbox">
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Custom options")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <input type="text" id="customOptions" name="nofilter_customOptions" size="60" title="Custom Options" value="<%=editBean.getCustomOptions(curTunnel)%>" class="freetext" spellcheck="false"/>
+            </td>
+        </tr>
+
+        <tr>
+            <td class="buttons" colspan="2">
                     <input type="hidden" value="true" name="removeConfirm" />
                     <button id="controlCancel" class="control" type="submit" name="action" value="" title="Cancel"><%=intl._t("Cancel")%></button>
-                    <button id="controlDelete" <%=(editBean.allowJS() ? "onclick=\"if (!confirm('Are you sure you want to delete?')) { return false; }\" " : "")%>accesskey="D" class="control" type="submit" name="action" value="Delete this proxy" title="Delete this Proxy"><%=intl._t("Delete")%>(<span class="accessKey">D</span>)</button>
-                    <button id="controlSave" accesskey="S" class="control" type="submit" name="action" value="Save changes" title="Save Changes"><%=intl._t("Save")%>(<span class="accessKey">S</span>)</button>
-                </div>
-            </div> 
-        </div>
-    </form>
-    <div id="pageFooter">
-        </div>
+                    <button id="controlDelete" <%=(editBean.allowJS() ? "onclick=\"if (!confirm('Are you sure you want to delete?')) { return false; }\" " : "")%>accesskey="D" class="control" type="submit" name="action" value="Delete this proxy" title="Delete this Proxy"><%=intl._t("Delete")%></button>
+                    <button id="controlSave" accesskey="S" class="control" type="submit" name="action" value="Save changes" title="Save Changes"><%=intl._t("Save")%></button>
+            </td>
+        </tr>
+    </table>
+</div>
+</form>
+
 <%
 
   } else {
-     %>Tunnels are not initialized yet, please reload in two minutes.<%
+     %><div id="notReady"><%=intl._t("Tunnels are not initialized yet, please reload in two minutes.")%></div><%
   }  // isInitialized()
 
 %>
diff --git a/apps/i2ptunnel/jsp/editServer.jsp b/apps/i2ptunnel/jsp/editServer.jsp
index c93ceb6ac17e5e4bad5d250d92386d34be25c4ca..dc644413145a580ca9f6f0b7dc80d8e4823fd86d 100644
--- a/apps/i2ptunnel/jsp/editServer.jsp
+++ b/apps/i2ptunnel/jsp/editServer.jsp
@@ -23,8 +23,7 @@
 
     <% if (editBean.allowCSS()) {
   %><link rel="icon" href="<%=editBean.getTheme()%>images/favicon.ico" />
-    <link href="<%=editBean.getTheme()%>default.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" /> 
-    <link href="<%=editBean.getTheme()%>i2ptunnel.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" />
+    <link href="<%=editBean.getTheme()%>i2ptunnel.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" /> 
     <% }
   %>
 <style type='text/css'>
@@ -32,8 +31,7 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
 </style>
 </head>
 <body id="tunnelEditPage">
-    <div id="pageHeader">
-    </div>
+
 <%
 
   if (editBean.isInitialized()) {
@@ -41,19 +39,19 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
 %>
     <form method="post" action="list">
 
-        <div id="tunnelEditPanel" class="panel">
-            <div class="header">
+<div class="panel">
+
                 <%
                 String tunnelTypeName;
                 String tunnelType;
                 if (curTunnel >= 0) {
                     tunnelTypeName = editBean.getTunnelType(curTunnel);
                     tunnelType = editBean.getInternalType(curTunnel);
-                  %><h4><%=intl._t("Edit server settings")%></h4><% 
+                  %><h2><%=intl._t("Edit Server Settings")%> (<%=editBean.getTunnelName(curTunnel)%>)</h2><% 
                 } else {
                     tunnelTypeName = editBean.getTypeName(request.getParameter("type"));
                     tunnelType = net.i2p.data.DataHelper.stripHTML(request.getParameter("type"));
-                  %><h4><%=intl._t("New server settings")%></h4><% 
+                  %><h2><%=intl._t("New Server Settings")%></h2><% 
                 } %>
                 <input type="hidden" name="tunnel" value="<%=curTunnel%>" />
                 <input type="hidden" name="nonce" value="<%=net.i2p.i2ptunnel.web.IndexBean.getNextNonce()%>" />
@@ -79,103 +77,115 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                     <input type="hidden" name="key4" value="<%=key%>" />
                 <% } %>
                 <input type="submit" class="default" name="action" value="Save changes" />
-            </div>
-      
-            <div class="separator">
-                <hr />
-            </div>
 
-            <div id="nameField" class="rowItem">
-                <label for="name" accesskey="N">
-                    <%=intl._t("Name")%>(<span class="accessKey">N</span>):
-                </label>
-                <input type="text" size="30" maxlength="50" name="name" id="name" title="Tunnel Name" value="<%=editBean.getTunnelName(curTunnel)%>" class="freetext" />               
-            </div>
-            <div id="typeField" class="rowItem">
-                <label><%=intl._t("Type")%>:</label>
-                <span class="text"><%=tunnelTypeName%></span>
-            </div>
-            <div id="descriptionField" class="rowItem">
-                <label for="description" accesskey="e">
-                    <%=intl._t("Description")%>(<span class="accessKey">e</span>):
-                </label>
-                <input type="text" size="60" maxlength="80" name="nofilter_description"  id="description" title="Tunnel Description" value="<%=editBean.getTunnelDescription(curTunnel)%>" class="freetext" />                
-            </div>
-            <div id="startupField" class="rowItem">
-                <label for="startOnLoad" accesskey="a">
-                    <%=intl._t("Auto Start")%>(<span class="accessKey">A</span>):
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="startOnLoad" title="Start Tunnel Automatically"<%=(editBean.startAutomatically(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <span class="comment"><%=intl._t("(Check the Box for 'YES')")%></span>
-            </div>
-                 
-            <div class="subdivider">
-                <hr />
-            </div>
-                 
-            <div id="targetField" class="rowItem">
+    <table id="serverTunnelEdit" class="tunnelConfig">
+        <tr>
+            <th>
+                <%=intl._t("Name")%>
+            </th>
+            <th>
+                <%=intl._t("Type")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td>
+                <input type="text" size="30" maxlength="50" name="name" title="Tunnel Name" value="<%=editBean.getTunnelName(curTunnel)%>" class="freetext tunnelName" />
+            </td>
+            <td>
+                <%=tunnelTypeName%>
+            </td>
+        </tr>
+
+        <tr>
+            <th>
+                <%=intl._t("Description")%>
+            </th>
+
+            <th>
+                <%=intl._t("Auto Start Tunnel")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td>
+                <input type="text" size="60" maxlength="80" name="nofilter_description"  title="Tunnel Description" value="<%=editBean.getTunnelDescription(curTunnel)%>" class="freetext tunnelDescription" />
+            </td>
+
+            <td>
+                <label><input value="1" type="checkbox" name="startOnLoad" title="Start Tunnel Automatically"<%=(editBean.startAutomatically(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Automatically start tunnel when router starts")%></label>
+            </td>
+        </tr>
+
+        <tr>
+            <th colspan="2">
          <% if ("streamrserver".equals(tunnelType)) { %>
-                <label><%=intl._t("Access Point")%>:</label>
+                <%=intl._t("Access Point")%>
          <% } else { %>
-                <label><%=intl._t("Target")%>:</label>
+                <%=intl._t("Target")%>
          <% } %>
-            </div>
+            </th>
+        </tr>
+
+        <tr>
          <% if (!"streamrserver".equals(tunnelType)) { %>
-            <div id="hostField" class="rowItem">
-                <label for="targetHost" accesskey="H">
-                    <%=intl._t("Host")%>(<span class="accessKey">H</span>):
-                </label>
-                <input type="text" size="20" id="targetHost" name="targetHost" title="Target Hostname or IP" value="<%=editBean.getTargetHost(curTunnel)%>" class="freetext" />                
-            </div>
+            <td>
+                <b><%=intl._t("Host")%>:</b>
+                <input type="text" size="20" name="targetHost" title="Target Hostname or IP" value="<%=editBean.getTargetHost(curTunnel)%>" class="freetext host" />
+            </td>
          <% } /* !streamrserver */ %>
-            <div id="portField" class="rowItem">
-                <label for="targetPort" accesskey="P">
-                    <%=intl._t("Port")%>(<span class="accessKey">P</span>):
+
+            <td>
+                <b><%=intl._t("Port")%>:</b>
                     <% String value = editBean.getTargetPort(curTunnel);
                        if (value == null || "".equals(value.trim())) {
-                           out.write(" <font color=\"red\">(");
+                           out.write(" <span class=\"required\"><font color=\"red\">(");
                            out.write(intl._t("required"));
-                           out.write(")</font>");
-                       }   
+                           out.write(")</font></span>");
+                       }
                      %>
-                </label>
-                <input type="text" size="6" maxlength="5" id="targetPort" name="targetPort" title="Target Port Number" value="<%=editBean.getTargetPort(curTunnel)%>" class="freetext" />               
-            </div>
+                <input type="text" size="6" maxlength="5" id="targetPort" name="targetPort" title="Target Port Number" value="<%=editBean.getTargetPort(curTunnel)%>" class="freetext port" placeholder="required" />
+            </td>
+
          <% if (!"streamrserver".equals(tunnelType)) { %>
-            <div id="portField" class="rowItem">
-                <label>
-                    <%=intl._t("Use SSL?")%>
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="useSSL" title="Use SSL to connect to target" <%=(editBean.isSSLEnabled(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <label><input value="1" type="checkbox" name="useSSL" title="Use SSL to connect to target" <%=(editBean.isSSLEnabled(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Use SSL to connect to target")%></label>
          <% } /* !streamrserver */ %>
-            
+            </td>
          <% if ("httpbidirserver".equals(tunnelType)) { %>
-            <div class="subdivider">
-                <hr />
-            </div>
-            <div id="accessField" class="rowItem">
-                <label><%=intl._t("Access Point")%>:</label>
-            </div> 
-            <div id="portField" class="rowItem">
-           	<label for="port" accesskey="P">
-           	     <span class="accessKey">P</span>ort:
+        </tr>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Access Point")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td>
+                <b><%=intl._t("Port")%>:</b>
+
            	     <% String value4 = editBean.getClientPort(curTunnel);
            	        if (value4 == null || "".equals(value4.trim())) {
-           	            out.write(" <font color=\"red\">(");
+           	            out.write(" <span class=\"required\"><font color=\"red\">(");
            	            out.write(intl._t("required"));
-           	            out.write(")</font>");
+           	            out.write(")</font></span>");
            	        }
                	      %>
-              	 </label>
-                 <input type="text" size="6" maxlength="5" id="port" name="port" title="Access Port Number" value="<%=editBean.getClientPort(curTunnel)%>" class="freetext" />
-            </div>
+
+                 <input type="text" size="6" maxlength="5" name="port" title="Access Port Number" value="<%=editBean.getClientPort(curTunnel)%>" class="freetext port" placeholder="required" />
+            </td>
          <% } /* httpbidirserver */ %>
          <% if ("httpbidirserver".equals(tunnelType) || "streamrserver".equals(tunnelType)) { %>
-            <div id="reachField" class="rowItem">
-                <label for="reachableBy" accesskey="r">
-                    <%=intl._t("Reachable by")%>(<span class="accessKey">R</span>):
-                </label>
+
+            <td>
+                <b><%=intl._t("Reachable by")%>:</b>
+
                 <select id="reachableBy" name="reachableBy" title="IP for Client Access" class="selectbox">
               <%
                     String clientInterface = editBean.getClientInterface(curTunnel);
@@ -190,43 +200,61 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                         out.write("</option>\n");
                     }
               %>
-                </select>                
-            </div>
+                </select>
+            </td>
          <% } /* httpbidirserver || streamrserver */ %>
+        </tr>
+
 
-            <div class="subdivider">
-                <hr />
-            </div>
-            
             <% if (("httpserver".equals(tunnelType)) || ("httpbidirserver".equals(tunnelType))) {
-          %><div id="websiteField" class="rowItem">
-                <label for="spoofedHost" accesskey="W">
-                    <%=intl._t("Website name")%>(<span class="accessKey">W</span>):
-                </label>
-                <input type="text" size="20" id="targetHost" name="spoofedHost" title="Website Host Name" value="<%=editBean.getSpoofedHost(curTunnel)%>" class="freetext" />                
-                <span class="comment"><%=intl._t("(leave blank for outproxies)")%></span>
-            </div>
+          %>
+
+        <tr>
+            <th>
+                <%=intl._t("Website Hostname")%>
+            </th>
+            <th></th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <input type="text" size="20" id="websiteName" name="spoofedHost" title="Website Hostname" value="<%=editBean.getSpoofedHost(curTunnel)%>" class="freetext" />
+                <%=intl._t("(leave blank for outproxies)")%>
+            </td>
+        </tr>
             <% }
-          %><div id="privKeyField" class="rowItem">
-                <label for="privKeyFile" accesskey="k">
-                    <%=intl._t("Private key file")%>(<span class="accessKey">k</span>):
+          %>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Private key file")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
                     <% String value3 = editBean.getPrivateKeyFile(curTunnel);
                        if (value3 == null || "".equals(value3.trim())) {
-                           out.write(" <font color=\"red\">(");
+                           out.write(" <span class=\"required\"><font color=\"red\">(");
                            out.write(intl._t("required"));
-                           out.write(")</font>");
+                           out.write(")</font></span>");
                        }
                      %>
-                </label>
-                <input type="text" size="30" id="privKeyFile" name="privKeyFile" title="Path to Private Key File" value="<%=editBean.getPrivateKeyFile(curTunnel)%>" class="freetext" />               
-            </div>
+                <input type="text" size="30" id="privKeyFile" name="privKeyFile" title="Path to Private Key File" value="<%=editBean.getPrivateKeyFile(curTunnel)%>" class="freetext" placeholder="required" />
+            </td>
+        </tr>
 
-            <div id="destinationField" class="rowItem">
-                <label for="localDestination" accesskey="L">
-                    <%=intl._t("Local destination")%>(<span class="accessKey">L</span>):
-                </label>
-                <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Read Only: Local Destination (if known)" wrap="off" spellcheck="false"><%=editBean.getDestinationBase64(curTunnel)%></textarea>               
-            </div>
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Local destination")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Read Only: Local Destination (if known)" wrap="off" spellcheck="false"><%=editBean.getDestinationBase64(curTunnel)%></textarea>
+            </td>
+        </tr>
 
 <%
   /******
@@ -238,7 +266,7 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                 <label for="signature">
                     <%=intl._t("Hostname Signature")%>
                 </label>
-                <input type="text" size="30" readonly="readonly" title="Use to prove that the website name is for this destination" value="<%=sig%>" wrap="off" class="freetext" />                
+                <input type="text" size="30" readonly="readonly" title="Use to prove that the website name is for this destination" value="<%=sig%>" wrap="off" class="freetext" />
             </div>
          <%
                    }  // sig
@@ -248,7 +276,8 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
             String b64 = editBean.getDestinationBase64(curTunnel);
             if (!"".equals(b64)) {
          %>
-            <div id="destinationField" class="rowItem">
+        <tr>
+
         <%
                 b64 = b64.replace("=", "%3d");
                 String name = editBean.getSpoofedHost(curTunnel);
@@ -257,46 +286,50 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                 // mysite.i2p is set in the installed i2ptunnel.config
                 if (name != null && !name.equals("") && !name.equals("mysite.i2p") && !name.contains(" ") && name.endsWith(".i2p")) {
          %>
-              <label>
+
+            <td class="buttons" colspan="2">
               <a class="control" title="<%=intl._t("Generate QR Code")%>" href="/imagegen/qr?s=320&amp;t=<%=name%>&amp;c=http%3a%2f%2f<%=name%>%2f%3fi2paddresshelper%3d<%=b64%>" target="_top"><%=intl._t("Generate QR Code")%></a>
-              </label>
               <a class="control" href="/susidns/addressbook.jsp?book=private&amp;hostname=<%=name%>&amp;destination=<%=b64%>#add"><%=intl._t("Add to local addressbook")%></a>    
-              &nbsp;&nbsp;&nbsp;&nbsp;
-              <a class="control" href="register?tunnel=<%=curTunnel%>"><%=intl._t("Registration Authentication")%></a>    
+              <a class="control" href="register?tunnel=<%=curTunnel%>"><%=intl._t("Registration Authentication")%></a>
+            </td>
         <%
                 } else {
           %>
-              <label> </label>
-              <span class="comment"><%=intl._t("Set name with .i2p suffix to enable QR code generation")%></span>
-              <span class="comment"><%=intl._t("Set name with .i2p suffix to enable registration authentication")%></span>
+            <td class="infohelp" colspan="2">
+                <%=intl._t("Note: In order to enable QR code generation or registration authentication, configure the Name field above with .i2p suffix eg.  mynewserver.i2p")%>
+            </td>
         <%
                 }  // name
          %>
-            </div>
+        </tr>
+
         <%
             }  // b64
 
          %>
-            <div class="footer">
-            </div>
-        </div>
+    </table>
 
-        <div id="tunnelAdvancedNetworking" class="panel">
-            <div class="header">
-                <h4><%=intl._t("Advanced networking options")%></h4>
-            </div>
+    <h3><%=intl._t("Advanced Networking Options")%></h3>
 
-            <div class="separator">
-                <hr />
-            </div>
-            
-            <div id="tunnelOptionsField" class="rowItem">
-                <label><%=intl._t("Tunnel Options")%>:</label>
-            </div>
-            <div id="depthField" class="rowItem">
-                <label for="tunnelDepth" accesskey="t">
-                    <%=intl._t("Length")%>(<span class="accessKey">t</span>):
-                </label>
+    <table id="#advancedServerTunnelOptions" class="tunnelConfig">
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Tunnel Options")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td>
+                <b><%=intl._t("Length")%></b>
+            </td>
+
+            <td>
+                <b><%=intl._t("Variance")%></b>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
                 <select id="tunnelDepth" name="tunnelDepth" title="Length of each Tunnel" class="selectbox">
                     <% int tunnelDepth = editBean.getTunnelDepth(curTunnel, 3);
                   %><option value="0"<%=(tunnelDepth == 0 ? " selected=\"selected\"" : "") %>><%=intl._t("0 hop tunnel (no anonymity)")%></option>
@@ -312,11 +345,9 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                 %>    <option value="<%=tunnelDepth%>" selected="selected"><%=tunnelDepth%> <%=intl._t("hop tunnel (very poor performance)")%></option>
                 <% }
               %></select>
-            </div>
-            <div id="varianceField" class="rowItem">
-                <label for="tunnelVariance" accesskey="v">
-                    <%=intl._t("Variance")%>(<span class="accessKey">V</span>):
-                </label>
+            </td>
+
+            <td>
                 <select id="tunnelVariance" name="tunnelVariance" title="Level of Randomization for Tunnel Depth" class="selectbox">
                     <% int tunnelVariance = editBean.getTunnelVariance(curTunnel, 0);
                   %><option value="0"<%=(tunnelVariance  ==  0 ? " selected=\"selected\"" : "") %>><%=intl._t("0 hop variance (no randomization, consistent performance)")%></option>
@@ -327,20 +358,28 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                 <% if (tunnelVariance > 2 || tunnelVariance < -2) {
                 %>    <option value="<%=tunnelVariance%>" selected="selected"><%= (tunnelVariance > 2 ? "+ " : "+/- ") %>0-<%=tunnelVariance%> <%=intl._t("hop variance")%></option>
                 <% }
-              %></select>                
-            </div>
-            <div id="countField" class="rowItem">
-                <label for="tunnelQuantity" accesskey="C">
-                    <%=intl._t("Count")%>(<span class="accessKey">C</span>):
-                </label>
+              %></select>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <b><%=intl._t("Count")%></b>
+            </td>
+
+            <td>
+                <b><%=intl._t("Backup Count")%></b>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
                 <select id="tunnelQuantity" name="tunnelQuantity" title="Number of Tunnels in Group" class="selectbox">
                     <%=editBean.getQuantityOptions(curTunnel)%>
-                </select>                
-            </div>
-            <div id="backupField" class="rowItem">
-                <label for="tunnelBackupQuantity" accesskey="b">
-                    <%=intl._t("Backup Count")%>(<span class="accessKey">B</span>):
-                </label>
+                </select>
+            </td>
+
+            <td>
                 <select id="tunnelBackupQuantity" name="tunnelBackupQuantity" title="Number of Reserve Tunnels" class="selectbox">
                     <% int tunnelBackupQuantity = editBean.getTunnelBackupQuantity(curTunnel, 0);
                   %><option value="0"<%=(tunnelBackupQuantity == 0 ? " selected=\"selected\"" : "") %>><%=intl._t("0 backup tunnels (0 redundancy, no added resource usage)")%></option>
@@ -350,280 +389,307 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                 <% if (tunnelBackupQuantity > 3) {
                 %>    <option value="<%=tunnelBackupQuantity%>" selected="selected"><%=tunnelBackupQuantity%> <%=intl._t("backup tunnels")%></option>
                 <% }
-              %></select>                
-            </div>
-                            
-            <div class="subdivider">
-                <hr />
-            </div>
-            
+              %></select>
+            </td>
+        </tr>
+
          <% if (!"streamrserver".equals(tunnelType)) { %>
-            <div id="profileField" class="rowItem">
-                <label for="profile" accesskey="f">
-                    <%=intl._t("Profile")%>(<span class="accessKey">f</span>):
-                </label>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Profile")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
                 <select id="profile" name="profile" title="Connection Profile" class="selectbox">
                     <% boolean interactiveProfile = editBean.isInteractive(curTunnel);
                   %><option <%=(interactiveProfile == true  ? "selected=\"selected\" " : "")%>value="interactive"><%=intl._t("interactive connection")%> </option>
                     <option <%=(interactiveProfile == false ? "selected=\"selected\" " : "")%>value="bulk"><%=intl._t("bulk connection (downloads/websites/BT)")%> </option>
-                </select>                
-            </div> 
+                </select>
+            </td>
+        </tr>
 
-            <div class="subdivider">
-                <hr />
-            </div>
          <% } /* !streamrserver */ %>
 
-            <div id="optionsField" class="rowItem">
-                <label><%=intl._t("Router I2CP Address")%>:</label>
-            </div>
-            <div id="optionsHostField" class="rowItem">
-                <label for="clientHost" accesskey="o">
-                    <%=intl._t("Host")%>(<span class="accessKey">o</span>):
-                </label>
-                <input type="text" id="clientHost" name="clientHost" size="20" title="I2CP Hostname or IP" value="<%=editBean.getI2CPHost(curTunnel)%>" class="freetext" <% if (editBean.isRouterContext()) { %> readonly="readonly" <% } %> />                
-            </div>
-            <div id="optionsPortField" class="rowItem">
-                <label for="clientPort" accesskey="r">
-                    <%=intl._t("Port")%>(<span class="accessKey">r</span>):
-                </label>
-                <input type="text" id="clientPort" name="clientport" size="20" title="I2CP Port Number" value="<%=editBean.getI2CPPort(curTunnel)%>" class="freetext" <% if (editBean.isRouterContext()) { %> readonly="readonly" <% } %> />                
-            </div>
-            
-            <div class="subdivider">
-                <hr />
-            </div>
-           
-            <div id="optionsField" class="rowItem">
-                <label for="encrypt" accesskey="e">
-                    <%=intl._t("Encrypt Leaseset")%>(<span class="accessKey">E</span>):
-                </label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="encrypt" accesskey="e">
-                    <%=intl._t("Enable")%>:
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="encrypt" title="ONLY clients with the encryption key will be able to connect"<%=(editBean.getEncrypt(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="encrypt" accesskey="e">
-                    <%=intl._t("Encryption Key")%>:
-                </label>
-                <textarea rows="1" style="height: 3em;" cols="44" id="portField" name="encryptKey" title="Encrypt Key" wrap="off" spellcheck="false"><%=editBean.getEncryptKey(curTunnel)%></textarea>               
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="force" accesskey="c">
-                    <%=intl._t("Generate New Key")%>:
-                </label>
-                <button accesskey="S" class="control" type="submit" name="action" value="Generate" title="Generate New Key Now"><%=intl._t("Generate")%></button>
-                <span class="comment"><%=intl._t("(Tunnel must be stopped first)")%></span>
-            </div>
-                 
-            <div class="subdivider">
-                <hr />
-            </div>
-           
-            <div id="optionsField" class="rowItem">
-                <label for="access" accesskey="s">
-                    <%=intl._t("Restricted Access List")%>(<span class="accessKey">s</span>):
-                </label>
-            </div>
-            <div id="portField" class="rowItem">
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Router I2CP Address")%>
+            </th>
+        </tr>
+        <tr>
+            <td>
+                <b><%=intl._t("Host")%>:</b>
+                <input type="text" id="clientHost" name="clientHost" size="20" title="I2CP Hostname or IP" value="<%=editBean.getI2CPHost(curTunnel)%>" class="freetext" <% if (editBean.isRouterContext()) { %> readonly="readonly" <% } %> />
+            </td>
+            <td>
+                <b><%=intl._t("Port")%>:</b>
+                <input type="text" id="clientPort" name="clientport" size="20" title="I2CP Port Number" value="<%=editBean.getI2CPPort(curTunnel)%>" class="freetext" <% if (editBean.isRouterContext()) { %> readonly="readonly" <% } %> />
+            </td>
+        </tr>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Encrypt Leaseset")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <label><input value="1" type="checkbox" id="startOnLoad" name="encrypt" title="ONLY clients with the encryption key will be able to connect"<%=(editBean.getEncrypt(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Only allow clients with the encryption key to connect to this server")%></label>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <b><%=intl._t("Encryption Key")%></b>
+            </td>
+
+            <td>
+                <b><%=intl._t("Generate New Key")%></b> (<%=intl._t("Tunnel must be stopped first")%>)
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <textarea rows="1" style="height: 3em;" cols="44" id="leasesetKey" name="encryptKey" title="Encrypt Key" wrap="off" spellcheck="false"><%=editBean.getEncryptKey(curTunnel)%></textarea>
+            </td>
+
+            <td>
+                <button class="control" type="submit" name="action" value="Generate" title="Generate New Key Now"><%=intl._t("Generate")%></button>
+            </td>
+        </tr>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Restricted Access List")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
                 <% /* can't use <label> here */ %>
-                <p><input value="0" type="radio" id="startOnLoad" name="accessMode" title="Allow all clients"<%=(editBean.getAccessMode(curTunnel).equals("0") ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <b><%=intl._t("Disable")%></b></p>
-                <p><input value="2" type="radio" id="startOnLoad" name="accessMode" title="Reject listed clients"<%=(editBean.getAccessMode(curTunnel).equals("2") ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <b><%=intl._t("Blacklist")%></b></p>
-                <p><input value="1" type="radio" id="startOnLoad" name="accessMode" title="Allow listed clients only"<%=(editBean.getAccessMode(curTunnel).equals("1") ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <b><%=intl._t("Whitelist")%></b></p>
-            </div>
-            <div id="accessListField" class="rowItem">
-                <label for="accessList" accesskey="s">
-                    <%=intl._t("Access List")%>:
-                </label>
-                <textarea rows="2" style="height: 8em;" cols="60" name="accessList" title="Access List" wrap="off" spellcheck="false"><%=editBean.getAccessList(curTunnel)%></textarea>               
-            </div>
-                 
+                <span class="multiOption"><label><input value="0" type="radio" name="accessMode" title="<%=intl._t("Allow all clients")%>"<%=(editBean.getAccessMode(curTunnel).equals("0") ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    <%=intl._t("Disable")%></label></span>
+                <span class="multiOption"><label><input value="2" type="radio" name="accessMode" title="<%=intl._t("Reject listed clients")%>"<%=(editBean.getAccessMode(curTunnel).equals("2") ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    <%=intl._t("Blacklist")%></label></span>
+                <span class="multiOption"><label><input value="1" type="radio" name="accessMode" title="<%=intl._t("Allow listed clients only")%>"<%=(editBean.getAccessMode(curTunnel).equals("1") ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    <%=intl._t("Whitelist")%></label></span>
+            </td>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <b><%=intl._t("Access List")%></b> (<%=intl._t("Specify clients, 1 per line")%>)
+            </td>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <textarea rows="2" style="height: 8em;" cols="60" name="accessList" title="Access List" wrap="off" spellcheck="false"><%=editBean.getAccessList(curTunnel)%></textarea>
+            </td>
+        </tr>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Server Access Options")%>
+            </th>
+        </tr>
+
             <% if (("httpserver".equals(tunnelType)) || ("httpbidirserver".equals(tunnelType))) {
-            %><div class="rowItem">
-                <div id="optionsField" class="rowItem">
-                    <label>
-                        <%=intl._t("Block Access via Inproxies")%>:
-                    </label>
-                </div>
-                <div id="portField" class="rowItem">
-                    <label for="access" accesskey="d">
-                        <%=intl._t("Enable")%>:
-                    </label>
-                    <input value="1" type="checkbox" id="startOnLoad" name="rejectInproxy" title="Deny inproxy access when enabled"<%=(editBean.isRejectInproxy(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                </div>
-              </div>
-            <div class="rowItem">
-                <div id="optionsField" class="rowItem">
-                    <label>
-                        <%=intl._t("Block Accesses containing Referers")%>:
-                    </label>
-                </div>
-                <div id="portField" class="rowItem">
-                    <label for="access" accesskey="d">
-                        <%=intl._t("Enable")%>:
-                    </label>
-                    <input value="1" type="checkbox" id="startOnLoad" name="rejectReferer" title="Deny accesseses with referers (probably from inproxies)"<%=(editBean.isRejectReferer(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                </div>
-              </div>
-            <div class="rowItem">
-                <div id="optionsField" class="rowItem">
-                    <label>
-                        <%=intl._t("Block these User-Agents")%>:
-                    </label>
-                </div>
-                <div id="portField" class="rowItem">
-                    <label for="access" accesskey="d">
-                        <%=intl._t("Enable")%>:
-                    </label>
-                    <input value="1" type="checkbox" id="startOnLoad" name="rejectUserAgents" title="Deny User-Agents matching these strings (probably from inproxies)"<%=(editBean.isRejectUserAgents(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                </div>
-                <div id="optionsHostField" class="rowItem">
-                    <input type="text" id="userAgents" name="userAgents" size="20" title="comma separated, e.g. Mozilla,Opera (case-sensitive)" value="<%=editBean.getUserAgents(curTunnel)%>" class="freetext" />                
-                </div>
-              </div>
+            %>
+
+        <tr>
+            <td>
+                <label><input value="1" type="checkbox" name="rejectInproxy" title="<%=intl._t("Deny inproxy access when enabled")%>" <%=(editBean.isRejectInproxy(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Block Access via Inproxies")%></label>
+            </td>
+
+            <td>
+                <label><input value="1" type="checkbox" name="rejectReferer" title="<%=intl._t("Deny accesseses with referers (probably from inproxies)")%>" <%=(editBean.isRejectReferer(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Block Accesses containing Referers")%></label>
+            </td>
+        </tr>
+
+        <tr>
+            <td>
+                <label><input value="1" type="checkbox" name="rejectUserAgents" title="<%=intl._t("Deny User-Agents matching these strings (probably from inproxies)")%>" <%=(editBean.isRejectUserAgents(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Block these User-Agents")%></label>
+            </td>
+
+            <td>
+                <input type="text" id="userAgents" name="userAgents" size="20" title="<%=intl._t("comma separated, e.g. Mozilla,Opera (case-sensitive)")%>" value="<%=editBean.getUserAgents(curTunnel)%>" class="freetext" />
+            </td>
+        </tr>
             <% } // httpserver
-            %><div class="rowItem">
-                <div id="optionsField" class="rowItem">
-                    <label>
-                        <%=intl._t("Unique Local Address per Client")%>:
-                    </label>
-                </div>
-                <div id="portField" class="rowItem">
-                    <label for="access" accesskey="d">
-                        <%=intl._t("Enable")%>:
-                    </label>
-                    <input value="1" type="checkbox" id="startOnLoad" name="uniqueLocal" title="Use unique IP addresses for each connecting client (local non-SSL servers only)"<%=(editBean.getUniqueLocal(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                </div>
-            </div>
-            <div class="rowItem">
-                <div id="optionsField" class="rowItem">
-                    <label>
-                        <%=intl._t("Optimize for Multihoming")%>:
-                    </label>
-                </div>
-                <div id="portField" class="rowItem">
-                    <label for="access" accesskey="d">
-                        <%=intl._t("Enable")%>:
-                    </label>
-                    <input value="1" type="checkbox" id="startOnLoad" name="multihome" title="Only enable if you are hosting this service on multiple routers"<%=(editBean.getMultihome(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                </div>
-            </div>
-            <div class="subdivider">
-                <hr />
-            </div>
+            %>
 
-            <div class="rowItem">
-              <div id="optionsField" class="rowItem">
-                  <label><%=intl._t("Inbound connection limits (0=unlimited)")%><br /><%=intl._t("Per client")%>:</label>
-              </div>
-              <div id="portField" class="rowItem">
-                  <label><%=intl._t("Per minute")%>:</label>
-                  <input type="text" id="port" name="limitMinute" value="<%=editBean.getLimitMinute(curTunnel)%>" class="freetext" />                
-              </div>
-              <div id="portField" class="rowItem">
-                  <label><%=intl._t("Per hour")%>:</label>
-                  <input type="text" id="port" name="limitHour" value="<%=editBean.getLimitHour(curTunnel)%>" class="freetext" />                
-              </div>
-              <div id="portField" class="rowItem">
-                  <label><%=intl._t("Per day")%>:</label>
-                  <input type="text" id="port" name="limitDay" value="<%=editBean.getLimitDay(curTunnel)%>" class="freetext" />                
-              </div>
-            </div>
-            <div class="rowItem">
-              <div id="optionsField" class="rowItem">
-                  <label><%=intl._t("Total")%>:</label>
-              </div>
-              <div id="portField" class="rowItem">
-                  <input type="text" id="port" name="totalMinute" value="<%=editBean.getTotalMinute(curTunnel)%>" class="freetext" />                
-              </div>
-              <div id="portField" class="rowItem">
-                  <input type="text" id="port" name="totalHour" value="<%=editBean.getTotalHour(curTunnel)%>" class="freetext" />                
-              </div>
-              <div id="portField" class="rowItem">
-                  <input type="text" id="port" name="totalDay" value="<%=editBean.getTotalDay(curTunnel)%>" class="freetext" />                
-              </div>
-            </div>
-            <div class="rowItem">
-              <div id="optionsField" class="rowItem">
-                  <label><%=intl._t("Max concurrent connections (0=unlimited)")%>:</label>
-              </div>
-              <div id="portField" class="rowItem">
-                  <input type="text" id="port" name="maxStreams" value="<%=editBean.getMaxStreams(curTunnel)%>" class="freetext" />                
-              </div>
-            </div>
+        <tr>
+            <td>
+                <label><input value="1" type="checkbox" name="uniqueLocal" title="<%=intl._t("Use unique IP addresses for each connecting client (local non-SSL servers only)")%>" <%=(editBean.getUniqueLocal(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Unique Local Address per Client")%></label>
+            </td>
+
+            <td>
+                <label><input value="1" type="checkbox" name="multihome" title="<%=intl._t("Only enable if you are hosting this service on multiple routers")%>" <%=(editBean.getMultihome(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Optimize for Multihoming")%></label>
+            </td>
+        </tr>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Server Throttling")%>
+            </th>
+        </tr>
+        <tr>
+            <td id="throttle" colspan="4">
+
+                <table id="throttler">
+                    <tr>
+                        <th colspan="5">
+                            <%=intl._t("Inbound connection limits (0=unlimited)")%>
+                        </th>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td><b><%=intl._t("Per Minute")%></b></td>
+                        <td><b><%=intl._t("Per Hour")%></b></td>
+                        <td><b><%=intl._t("Per Day")%></b></td>
+                        <td class="blankColumn"></td>
+                    </tr>
+                    <tr>
+                        <td><b><%=intl._t("Per Client")%></b></td>
+                        <td>
+                            <input type="text" name="limitMinute" value="<%=editBean.getLimitMinute(curTunnel)%>" class="freetext" />
+                        </td>
+                        <td>
+                            <input type="text" name="limitHour" value="<%=editBean.getLimitHour(curTunnel)%>" class="freetext" />
+                        </td>
+                        <td>
+                            <input type="text" name="limitDay" value="<%=editBean.getLimitDay(curTunnel)%>" class="freetext" />
+                        </td>
+                        <td class="blankColumn"></td>
+                    </tr>
+                    <tr>
+                        <td><b><%=intl._t("Total")%></b></td>
+                        <td>
+                            <input type="text" name="totalMinute" value="<%=editBean.getTotalMinute(curTunnel)%>" class="freetext" />
+                        </td>
+                        <td>
+                            <input type="text" name="totalHour" value="<%=editBean.getTotalHour(curTunnel)%>" class="freetext" />
+                        </td>
+                        <td>
+                            <input type="text" name="totalDay" value="<%=editBean.getTotalDay(curTunnel)%>" class="freetext" />
+                        </td>
+                        <td class="blankColumn"></td>
+                    </tr>
+                    <tr>
+                        <th colspan="5"><%=intl._t("Max concurrent connections (0=unlimited)")%></th>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td>
+                            <input type="text" name="maxStreams" value="<%=editBean.getMaxStreams(curTunnel)%>" class="freetext" />
+                        </td>
+                        <td></td>
+                        <td></td>
+                        <td class="blankColumn"></td>
+                    </tr>
 
             <% if (("httpserver".equals(tunnelType)) || ("httpbidirserver".equals(tunnelType))) {
-              %><div class="rowItem">
-                  <div id="optionsField" class="rowItem">
-                      <label><%=intl._t("POST limits (0=unlimited)")%><br /><%=intl._t("Per client")%>:</label>
-                  </div>
-                  <div id="portField" class="rowItem">
-                      <label><%=intl._t("Per period")%>:</label>
-                      <input type="text" id="port" name="postMax" value="<%=editBean.getPostMax(curTunnel)%>" class="freetext" />                
-                  </div>
-                  <div id="portField" class="rowItem">
-                      <label><%=intl._t("Ban minutes")%>:</label>
-                      <input type="text" id="port" name="postBanTime" value="<%=editBean.getPostBanTime(curTunnel)%>" class="freetext" />                
-                  </div>
-                </div>
-                <div class="rowItem">
-                  <div id="optionsField" class="rowItem">
-                      <label><%=intl._t("Total")%>:</label>
-                  </div>
-                  <div id="portField" class="rowItem">
-                      <input type="text" id="port" name="postTotalMax" value="<%=editBean.getPostTotalMax(curTunnel)%>" class="freetext" />                
-                  </div>
-                  <div id="portField" class="rowItem">
-                      <input type="text" id="port" name="postTotalBanTime" value="<%=editBean.getPostTotalBanTime(curTunnel)%>" class="freetext" />                
-                  </div>
-                </div>
-                <div class="rowItem">
-                  <div id="optionsField" class="rowItem">
-                      <label><%=intl._t("POST limit period (minutes)")%>:</label>
-                  </div>
-                  <div id="portField" class="rowItem">
-                      <input type="text" id="port" name="postCheckTime" value="<%=editBean.getPostCheckTime(curTunnel)%>" class="freetext" />                
-                  </div>
-                </div>
+              %>
+                    <tr>
+                        <th colspan="5">
+                            <%=intl._t("POST limits (0=unlimited)")%>
+                        </th>
+                    </tr>
+                    <tr>
+                        <td></td>
+                        <td>
+                            <b><%=intl._t("Per Period")%></b>
+                        </td>
+                        <td>
+                            <b><%=intl._t("Ban Duration")%></b>
+                        </td>
+                        <td></td>
+                        <td class="blankColumn"></td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <b><%=intl._t("Per Client")%>
+                            </b>
+                        </td>
+                        <td>
+                            <input type="text" name="postMax" value="<%=editBean.getPostMax(curTunnel)%>" class="freetext quantity"/>
+                        </td>
+                        <td colspan="2">
+                            <input type="text" name="postBanTime" value="<%=editBean.getPostBanTime(curTunnel)%>" class="freetext period"/>
+                            <%=intl._t("minutes")%>
+                        </td>
+                        <td class="blankColumn"></td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <b><%=intl._t("Total")%>
+                            </b>
+                        </td>
+                        <td>
+                            <input type="text" name="postTotalMax" value="<%=editBean.getPostTotalMax(curTunnel)%>" class="freetext quantity"/>
+                        </td>
+                        <td colspan="2">
+                            <input type="text" name="postTotalBanTime" value="<%=editBean.getPostTotalBanTime(curTunnel)%>" class="freetext period"/>
+                            <%=intl._t("minutes")%>
+                        </td>
+                        <td class="blankColumn"></td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <b><%=intl._t("POST limit period")%>
+                            </b>
+                        </td>
+                        <td colspan="2">
+                            <input type="text" name="postCheckTime" value="<%=editBean.getPostCheckTime(curTunnel)%>" class="freetext period"/>
+                            <%=intl._t("minutes")%>
+                        </td>
+                        <td></td>
+                        <td class="blankColumn"></td>
+                    </tr>
+
             <% } // httpserver
-          %><div class="subdivider">
-                <hr />
-            </div>
-           
-            <div id="optionsField" class="rowItem">
-                <label for="reduce" accesskey="d">
-                    <%=intl._t("Reduce tunnel quantity when idle")%>(<span class="accessKey">d</span>):
-                </label>
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="access" accesskey="d">
-                    <%=intl._t("Enable")%>:
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="reduce" title="Reduce Tunnels"<%=(editBean.getReduce(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="reduceCount" accesskey="d">
-                    <%=intl._t("Reduced tunnel count")%>:
-                </label>
-                <input type="text" id="port" name="reduceCount" size="1" maxlength="1" title="Reduced Tunnel Count" value="<%=editBean.getReduceCount(curTunnel)%>" class="freetext" />                
-            </div>
-            <div id="portField" class="rowItem">
-                <label for="reduceTime" accesskey="d">
-                    <%=intl._t("Idle minutes")%>:
-                </label>
-                <input type="text" id="port" name="reduceTime" size="4" maxlength="4" title="Reduced Tunnel Idle Time" value="<%=editBean.getReduceTime(curTunnel)%>" class="freetext" />                
-            </div>
+          %>
+
+
+                </table>
+            </td>
+        </tr>
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Reduce tunnel quantity when idle")%>
+            </th>
+        </tr>
+
+        <tr>
+            <td colspan="2">
+                <label><input value="1" type="checkbox" id="startOnLoad" name="reduce" title="Reduce Tunnels"<%=(editBean.getReduce(curTunnel) ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <%=intl._t("Reduce tunnel quantity when idle to conserve resources")%></label>
+            </td>
+        </tr>
+        <tr>
+            <td>
+                <b><%=intl._t("Reduced tunnel count")%>:</b>
+                <input type="text" id="reduceCount" name="reduceCount" size="1" maxlength="1" title="Reduced Tunnel Count" value="<%=editBean.getReduceCount(curTunnel)%>" class="freetext quantity" />
+            </td>
+
+            <td>
+                <b><%=intl._t("Idle period")%>:</b>
+                <input type="text" id="reduceTime" name="reduceTime" size="4" maxlength="4" title="Reduced Tunnel Idle Time" value="<%=editBean.getReduceTime(curTunnel)%>" class="freetext period" />
+                <%=intl._t("minutes")%>
+            </td>
+        </tr>
 
-            <div class="subdivider">
-                <hr />
-            </div>
-           
 <% /***************** %>
             <div id="tunnelOptionsField" class="rowItem">
                 <label for="cert" accesskey="c">
@@ -633,12 +699,12 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
             <div id="hostField" class="rowItem">
               <div id="portField" class="rowItem">
                 <label><%=intl._t("None")%></label>
-                <input value="0" type="radio" id="startOnLoad" name="cert" title="No Certificate"<%=(editBean.getCert(curTunnel)==0 ? " checked=\"checked\"" : "")%> class="tickbox" />                
+                <input value="0" type="radio" id="startOnLoad" name="cert" title="No Certificate"<%=(editBean.getCert(curTunnel)==0 ? " checked=\"checked\"" : "")%> class="tickbox" />
               </div>
               <div id="portField" class="rowItem">
                 <label><%=intl._t("Hashcash (effort)")%></label>
-                <input value="1" type="radio" id="startOnLoad" name="cert" title="Hashcash Certificate"<%=(editBean.getCert(curTunnel)==1 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <input type="text" id="port" name="effort" size="2" maxlength="2" title="Hashcash Effort" value="<%=editBean.getEffort(curTunnel)%>" class="freetext" />                
+                <input value="1" type="radio" id="startOnLoad" name="cert" title="Hashcash Certificate"<%=(editBean.getCert(curTunnel)==1 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <input type="text" id="port" name="effort" size="2" maxlength="2" title="Hashcash Effort" value="<%=editBean.getEffort(curTunnel)%>" class="freetext" />
               </div>
             </div>
             <div id="portField" class="rowItem">
@@ -650,14 +716,14 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
             <div id="hostField" class="rowItem">
               <div id="portField" class="rowItem">
                 <label><%=intl._t("Hidden")%></label>
-                <input value="2" type="radio" id="startOnLoad" name="cert" title="Hidden Certificate"<%=(editBean.getCert(curTunnel)==2 ? " checked=\"checked\"" : "")%> class="tickbox" />                
+                <input value="2" type="radio" id="startOnLoad" name="cert" title="Hidden Certificate"<%=(editBean.getCert(curTunnel)==2 ? " checked=\"checked\"" : "")%> class="tickbox" />
               </div>
               <div id="portField" class="rowItem">
                 <label for="signer" accesskey="c">
                     <%=intl._t("Signed (signed by)")%>:
                 </label>
-                <input value="3" type="radio" id="startOnLoad" name="cert" title="Signed Certificate"<%=(editBean.getCert(curTunnel)==3 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-                <input type="text" id="port" name="signer" size="50" title="Cert Signer" value="<%=editBean.getSigner(curTunnel)%>" class="freetext" />                
+                <input value="3" type="radio" id="startOnLoad" name="cert" title="Signed Certificate"<%=(editBean.getCert(curTunnel)==3 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                <input type="text" id="port" name="signer" size="50" title="Cert Signer" value="<%=editBean.getSigner(curTunnel)%>" class="freetext" />
               </div>
             </div>
             <div id="portField" class="rowItem">
@@ -673,46 +739,45 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
             int currentSigType = editBean.getSigType(curTunnel, tunnelType);
             if (true /* editBean.isAdvanced() */ ) {
            %>
-            <div id="tunnelOptionsField" class="rowItem">
-                <label>
-                    <%=intl._t("Signature type")%>
-                    (<%=intl._t("Experts only! Changes B32!")%>)
-                </label>
-            </div>
-            <div id="hostField" class="rowItem">
-              <div id="portField" class="rowItem">
-                <label>DSA-SHA1</label>
-                <input value="0" type="radio" id="startOnLoad" name="sigType" title="Default"<%=(currentSigType==0 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Signature type")%> (<%=intl._t("Experts only! Changes B32!")%>)
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <span class="multiOption">
+                    <label><input value="0" type="radio" id="startOnLoad" name="sigType" title="Default"<%=(currentSigType==0 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    DSA-SHA1</label>
+                </span>
            <% if (editBean.isSigTypeAvailable(1)) { %>
-              <div id="portField" class="rowItem">
-                <label>ECDSA-P256</label>
-                <input value="1" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==1 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+                <span class="multiOption">
+                    <label><input value="1" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==1 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    ECDSA-P256</label>
+                </span>
            <% }
               if (editBean.isSigTypeAvailable(2)) { %>
-              <div id="portField" class="rowItem">
-                <label>ECDSA-P384</label>
-                <input value="2" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==2 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+                <span class="multiOption">
+                    <label><input value="2" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==2 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    ECDSA-P384</label>
+                </span>
            <% }
               if (editBean.isSigTypeAvailable(3)) { %>
-              <div id="portField" class="rowItem">
-                <label>ECDSA-P521</label>
-                <input value="3" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==3 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+                <span class="multiOption">
+                    <label><input value="3" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==3 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    ECDSA-P521</label>
+                </span>
            <% }
               if (editBean.isSigTypeAvailable(7)) { %>
-              <div id="portField" class="rowItem">
-                <label>Ed25519-SHA-512</label>
-                <input value="7" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==7 ? " checked=\"checked\"" : "")%> class="tickbox" />                
-              </div>
+                <span class="multiOption">
+                    <label><input value="7" type="radio" id="startOnLoad" name="sigType" title="Advanced users only"<%=(currentSigType==7 ? " checked=\"checked\"" : "")%> class="tickbox" />
+                    Ed25519-SHA-512</label>
+                </span>
            <% }   // isAvailable %>
-            </div>
-                 
-            <div class="subdivider">
-                <hr />
-            </div>
+
+            </td>
+        </tr>
+
          <% } // isAdvanced %>
 
          <%
@@ -758,35 +823,34 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
               }  // ab64
           %><div class="subdivider"><hr /></div>
          <% } // currentSigType %>
-                 
-            <div id="customOptionsField" class="rowItem">
-                <label for="customOptions" accesskey="u">
-                    <%=intl._t("Custom options")%>(<span class="accessKey">u</span>):
-                </label>
-                <input type="text" id="customOptions" name="nofilter_customOptions" size="60" title="Custom Options" value="<%=editBean.getCustomOptions(curTunnel)%>" class="freetext" spellcheck="false"/>                
-            </div>
-            
-            <div class="footer">
-            </div>
-        </div>
-        <div id="globalOperationsPanel" class="panel">
-            <div class="header"></div>
-            <div class="footer">
-                <div class="toolbox">
+
+        <tr>
+            <th colspan="2">
+                <%=intl._t("Custom options")%>
+            </th>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <input type="text" id="customOptions" name="nofilter_customOptions" size="60" title="Custom Options" value="<%=editBean.getCustomOptions(curTunnel)%>" class="freetext" spellcheck="false"/>
+            </td>
+        </tr>
+
+        <tr>
+            <td class="buttons" colspan="2">
                     <input type="hidden" value="true" name="removeConfirm" />
                     <button id="controlCancel" class="control" type="submit" name="action" value="" title="Cancel"><%=intl._t("Cancel")%></button>
-                    <button id="controlDelete" <%=(editBean.allowJS() ? "onclick=\"if (!confirm('Are you sure you want to delete?')) { return false; }\" " : "")%>accesskey="D" class="control" type="submit" name="action" value="Delete this proxy" title="Delete this Proxy"><%=intl._t("Delete")%>(<span class="accessKey">D</span>)</button>
-                    <button id="controlSave" accesskey="S" class="control" type="submit" name="action" value="Save changes" title="Save Changes"><%=intl._t("Save")%>(<span class="accessKey">S</span>)</button>
-                </div>
-            </div> 
-        </div>
+                    <button id="controlDelete" <%=(editBean.allowJS() ? "onclick=\"if (!confirm('Are you sure you want to delete?')) { return false; }\" " : "")%>accesskey="D" class="control" type="submit" name="action" value="Delete this proxy" title="Delete this Proxy"><%=intl._t("Delete")%></button>
+                    <button id="controlSave" accesskey="S" class="control" type="submit" name="action" value="Save changes" title="Save Changes"><%=intl._t("Save")%></button>
+            </td>
+        </tr>
+    </table>
+</div>
     </form>
-    <div id="pageFooter">
-    </div>
+
 <%
 
   } else {
-     %>Tunnels are not initialized yet, please reload in two minutes.<%
+     %><div id="notReady"><%=intl._t("Tunnels are not initialized yet, please reload in two minutes.")%></div><%
   }  // isInitialized()
 
 %>
diff --git a/apps/i2ptunnel/jsp/index.jsp b/apps/i2ptunnel/jsp/index.jsp
index f0faf2c9467fc18328e1f36b4a13b577632af5d0..1c6758c9b3975cac945a6628b4ccc0fbaa44adde 100644
--- a/apps/i2ptunnel/jsp/index.jsp
+++ b/apps/i2ptunnel/jsp/index.jsp
@@ -29,46 +29,42 @@
     
     <% if (indexBean.allowCSS()) {
   %><link rel="icon" href="<%=indexBean.getTheme()%>images/favicon.ico" />
-    <link href="<%=indexBean.getTheme()%>default.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" /> 
-    <link href="<%=indexBean.getTheme()%>i2ptunnel.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" />
+    <link href="<%=indexBean.getTheme()%>i2ptunnel.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" /> 
     <% }
   %>
 </head>
 <body id="tunnelListPage">
-	    <div id="pageHeader">
-    </div>
-
-    <div id="statusMessagePanel" class="panel">
-        <div class="header">
-            <h4><%=intl._t("Status Messages")%></h4>
-        </div>
-
-        <div class="separator">
-            <hr />
-        </div>
 
+<div class="panel" id="messages">
+    <h2><%=intl._t("Status Messages")%></h2>
+    <table id="statusMessagesTable">
+        <tr>
+            <td id="tunnelMessages">
         <textarea id="statusMessages" rows="4" cols="60" readonly="readonly"><jsp:getProperty name="indexBean" property="messages" /></textarea>
+            </td>
+        </tr>
 
-        <div class="separator">
-            <hr />
-        </div>
 
-        <div class="footer">
-            <div class="toolbox">
+        <tr>
+            <td class="buttons">
                 <a class="control" href="list"><%=intl._t("Refresh")%></a>
-            </div>
-        </div>    
-    </div>
+            </td>
+        </tr>
+    </table>
+</div>
+
 <%
 
   if (indexBean.isInitialized()) {
       String nextNonce = net.i2p.i2ptunnel.web.IndexBean.getNextNonce();
 
 %>
-    <div id="globalOperationsPanel" class="panel">
-        <div class="header"></div>
-        <div class="footer">
-            <div class="toolbox">
+
+<div class="panel" id="globalTunnelControl">
+    <h2><%=intl._t("Global Tunnel Control")%></h2>
+    <table>
+        <tr>
+            <td class="buttons">
                 <a class="control" href="wizard"><%=intl._t("Tunnel Wizard")%></a>
                 <a class="control" href="list?nonce=<%=nextNonce%>&amp;action=Stop%20all"><%=intl._t("Stop All")%></a>
                 <a class="control" href="list?nonce=<%=nextNonce%>&amp;action=Start%20all"><%=intl._t("Start All")%></a>
@@ -77,52 +73,44 @@
                 //this is really bad because it stops and restarts all tunnels, which is probably not what you want
                 <a class="control" href="list?nonce=<%=nextNonce%>&amp;action=Reload%20configuration"><%=intl._t("Reload Config")%></a>
 --%>
-            </div>
-        </div> 
-    </div>
-
-
+            </td>
+        </tr>
+    </table>
+</div>
 
-    <div id="localServerTunnelList" class="panel">
-        <div class="header">
-            
-    <h4><%=intl._t("I2P Hidden Services")%></h4>
-        </div>
+<div class="panel" id="servers">
+    
+    <h2><%=intl._t("I2P Hidden Services")%></h2>
 
-        
-  <div class="separator"> </div>
+<table id="serverTunnels">
+    <tr>
+        <th class="tunnelName"><%=intl._t("Name")%></th>
+        <th class="tunnelType"><%=intl._t("Type")%></th>
+        <th class="tunnelLocation"><%=intl._t("Points at")%></th>
+        <th class="tunnelPreview"><%=intl._t("Preview")%></th>
+        <th class="tunnelStatus"><%=intl._t("Status")%></th>
+        <th class="tunnelControl"><%=intl._t("Control")%></th>
+    </tr>
 
-        <div class="nameHeaderField rowItem">
-            <label><%=intl._t("Name")%>:</label>
-        </div>
-        <div class="previewHeaderField rowItem">
-            <label><%=intl._t("Points at")%>:</label>
-        </div>
-        <div class="targetHeaderField rowItem">
-            <label><%=intl._t("Preview")%>:</label>
-        </div>
-        <div class="statusHeaderField rowItem">
-            <label><%=intl._t("Status")%>:</label>
-<hr />        </div>
-        
         <%
         for (int curServer = 0; curServer < indexBean.getTunnelCount(); curServer++) {
             if (indexBean.isClient(curServer)) continue;
             
       %>
-        <div class="nameField rowItem">
-            <label><%=intl._t("Name")%>:</label>
-            <span class="text"><a href="edit?tunnel=<%=curServer%>" title="Edit Server Tunnel Settings for <%=indexBean.getTunnelName(curServer)%>"><%=indexBean.getTunnelName(curServer)%></a></span>
-        </div>
-        <div class="previewField rowItem">
-            <label><%=intl._t("Points at")%>:</label>
-            <span class="text">
+
+
+    <tr class="tunnelProperties">
+        <td class="tunnelName">
+            <a href="edit?tunnel=<%=curServer%>" title="<%=intl._t("Edit Server Tunnel Settings for")%>&nbsp;<%=indexBean.getTunnelName(curServer)%>"><%=indexBean.getTunnelName(curServer)%></a>
+        </td>
+        <td class="tunnelType"><%=indexBean.getTunnelType(curServer)%></td>
+        <td class="tunnelLocation">
         <%
             if (indexBean.isServerTargetLinkValid(curServer)) {
                 if (indexBean.isSSLEnabled(curServer)) { %>
-                    <a href="https://<%=indexBean.getServerTarget(curServer)%>/" title="Test HTTPS server, bypassing I2P" target="_top"><%=indexBean.getServerTarget(curServer)%> SSL</a>
+                    <a href="https://<%=indexBean.getServerTarget(curServer)%>/" title="<%=intl._t("Test HTTPS server, bypassing I2P")%>" target="_top"><%=indexBean.getServerTarget(curServer)%> SSL</a>
              <% } else { %>
-                    <a href="http://<%=indexBean.getServerTarget(curServer)%>/" title="Test HTTP server, bypassing I2P" target="_top"><%=indexBean.getServerTarget(curServer)%></a>
+                    <a href="http://<%=indexBean.getServerTarget(curServer)%>/" title="<%=intl._t("Test HTTP server, bypassing I2P")%>" target="_top"><%=indexBean.getServerTarget(curServer)%></a>
         <%
                 }
             } else {
@@ -133,64 +121,66 @@
         <%
                 }
             }
-          %></span>
-        </div>
-        <div class="targetField rowItem">
+          %>
+        </td>
+        <td class="tunnelPreview">
             <%
             if (("httpserver".equals(indexBean.getInternalType(curServer)) || ("httpbidirserver".equals(indexBean.getInternalType(curServer)))) && indexBean.getTunnelStatus(curServer) == IndexBean.RUNNING) {
-          %><label><%=intl._t("Preview")%>:</label>    
-            <a class="control" title="Test HTTP server through I2P" href="http://<%=indexBean.getDestHashBase32(curServer)%>" target="_top"><%=intl._t("Preview")%></a>
+          %>
+            <a class="control" title="<%=intl._t("Test HTTP server through I2P")%>" href="http://<%=indexBean.getDestHashBase32(curServer)%>" target="_top"><%=intl._t("Preview")%></a>
             <%
             } else if (indexBean.getTunnelStatus(curServer) == IndexBean.RUNNING) {
-          %><span class="text"><%=intl._t("Base32 Address")%>:<br /><%=indexBean.getDestHashBase32(curServer)%></span>
+          %><%=intl._t("Base32 Address")%>:<%=indexBean.getDestHashBase32(curServer)%>
         <%
             } else {
-          %><span class="comment"><%=intl._t("No Preview")%></span>
+          %><%=intl._t("No Preview")%>
         <%
             }
-      %></div>
-        <div class="statusField rowItem">
-            <label><%=intl._t("Status")%>:</label>
+      %>
+        </td>
+        <td class="tunnelStatus">
             <%
             switch (indexBean.getTunnelStatus(curServer)) {
                 case IndexBean.STARTING:
-          %><div class="statusStarting text"><%=intl._t("Starting...")%></div>    
-            <a class="control" title="Stop this Tunnel" href="list?nonce=<%=nextNonce%>&amp;action=stop&amp;tunnel=<%=curServer%>"><%=intl._t("Stop")%></a>
+          %><div class="statusStarting text" title="<%=intl._t("Starting...")%>"><%=intl._t("Starting...")%></div>
+        </td>
+        <td class="tunnelControl">
+            <a class="control" title="<%=intl._t("Stop this Tunnel")%>" href="list?nonce=<%=nextNonce%>&amp;action=stop&amp;tunnel=<%=curServer%>"><%=intl._t("Stop")%></a>
         <%
                 break;
                 case IndexBean.RUNNING:
-          %><div class="statusRunning text"><%=intl._t("Running")%></div>    
-            <a class="control" title="Stop this Tunnel" href="list?nonce=<%=nextNonce%>&amp;action=stop&amp;tunnel=<%=curServer%>"><%=intl._t("Stop")%></a>
+          %><div class="statusRunning text" title="<%=intl._t("Running")%>"><%=intl._t("Running")%></div>
+        </td>
+        <td class="tunnelControl">
+            <a class="control" title="<%=intl._t("Stop this Tunnel")%>" href="list?nonce=<%=nextNonce%>&amp;action=stop&amp;tunnel=<%=curServer%>"><%=intl._t("Stop")%></a>
         <%
                 break;
                 case IndexBean.NOT_RUNNING:
-          %><div class="statusNotRunning text"><%=intl._t("Stopped")%></div>    
-            <a class="control" title="Start this Tunnel" href="list?nonce=<%=nextNonce%>&amp;action=start&amp;tunnel=<%=curServer%>"><%=intl._t("Start")%></a>
+          %><div class="statusNotRunning text" title="<%=intl._t("Stopped")%>"><%=intl._t("Stopped")%></div>
+        </td>
+        <td class="tunnelControl">
+            <a class="control" title="<%=intl._t("Start this Tunnel")%>" href="list?nonce=<%=nextNonce%>&amp;action=start&amp;tunnel=<%=curServer%>"><%=intl._t("Start")%></a>
         <%
                 break;
             }
-      %></div>
-
-        <div class="descriptionField rowItem">
-            <label><%=intl._t("Description")%>:</label>
-            <div class="text"><%=indexBean.getTunnelDescription(curServer)%></div>
-        </div>
+      %>
+        </td>
+    </tr>
+    <tr>
+        <td class="tunnelDescription" colspan="6">
+            <span class="tunnelDescriptionLabel"><b>Description:</b></span>
+            <%=indexBean.getTunnelDescription(curServer)%>
+        </td>
+    </tr>
 
-        <div class="subdivider">
-            <hr />
-        </div>
         <%
         }
       %>
-        <div class="separator">
-            <hr />
-        </div>
-           
-        <div class="footer">
-            <form id="addNewServerTunnelForm" action="edit"> 
-            <div class="toolbox">
-                    
-        <label><%=intl._t("New hidden service")%>:</label>
+
+    <tr>
+        <td class="newTunnel" colspan="6">
+           <form id="addNewServerTunnelForm" action="edit">
+               <b><%=intl._t("New hidden service")%>:</b>&nbsp;
                     <select name="type">
                         <option value="httpserver">HTTP</option>
                         <option value="server"><%=intl._t("Standard")%></option>
@@ -199,66 +189,38 @@
                         <option value="streamrserver">Streamr</option>
                     </select>
                     <input class="control" type="submit" value="<%=intl._t("Create")%>" />
-                </div>
             </form>
-        </div>
-    </div>    
+        </td>
+    </tr>
+</table>
+</div>
 
+<div class="panel" id="clients">
+    <h2><%=intl._t("I2P Client Tunnels")%></h2>
 
-    <div id="localClientTunnelList" class="panel">
-        <div class="header">
-            
-    <h4><%=intl._t("I2P Client Tunnels")%></h4>
-        </div>
+<table id="clientTunnels">
+    <tr>
+        <th class="tunnelName"><%=intl._t("Name")%></th>
+        <th class="tunnelType"><%=intl._t("Type")%></th>
+        <th class="tunnelInterface"><%=intl._t("Interface")%></th>
+        <th class="tunnelPort"><%=intl._t("Port")%></th>
+        <th class="tunnelStatus"><%=intl._t("Status")%></th>
+        <th class="tunnelControl"><%=intl._t("Control")%></th>
+    </tr>
 
-        
-  <div class="separator"> </div>
-        
-        <div class="nameHeaderField rowItem">
-            <label><%=intl._t("Name")%>:</label>
-        </div>
-        <div class="portHeaderField rowItem">
-            <label><%=intl._t("Port")%>:</label>
-        </div>
-        <div class="typeHeaderField rowItem">
-            <label><%=intl._t("Type")%>:</label>
-        </div>
-        <div class="interfaceHeaderField rowItem">
-            <label><%=intl._t("Interface")%>:</label>
-        </div>
-        <div class="statusHeaderField rowItem">
-            <label><%=intl._t("Status")%>:</label>
-        </div>
-
-        <div class="separator">
-            <hr />
-        </div>
         <%
         for (int curClient = 0; curClient < indexBean.getTunnelCount(); curClient++) {
             if (!indexBean.isClient(curClient)) continue;
-      %>
-        <div class="nameField rowItem">
-            <label><%=intl._t("Name")%>:</label>
-            <span class="text"><a href="edit?tunnel=<%=curClient%>" title="Edit Tunnel Settings for <%=indexBean.getTunnelName(curClient)%>"><%=indexBean.getTunnelName(curClient)%></a></span>
-        </div>
-        <div class="portField rowItem">
-            <label><%=intl._t("Port")%>:</label>
-            <span class="text">
-         <%
-               String cPort= indexBean.getClientPort2(curClient);
-               out.write(cPort);
-               if (indexBean.isSSLEnabled(curClient))
-                   out.write(" SSL");
-          %>
-            </span>
-        </div>
-        <div class="typeField rowItem">
-            <label><%=intl._t("Type")%>:</label>
-            <span class="text"><%=indexBean.getTunnelType(curClient)%></span>
-        </div>
-        <div class="interfaceField rowItem">
-            <label><%=intl._t("Interface")%>:</label>
-            <span class="text">
+      %>        
+
+
+    <tr class="tunnelProperties">
+        <td class="tunnelName">
+            <a href="edit?tunnel=<%=curClient%>" title="<%=intl._t("Edit Tunnel Settings for")%>&nbsp;<%=indexBean.getTunnelName(curClient)%>"><%=indexBean.getTunnelName(curClient)%></a>
+        </td>
+
+        <td class="tunnelType"><%=indexBean.getTunnelType(curClient)%></td>
+        <td class="tunnelInterface">
          <%
                /* should only happen for streamr client */
                String cHost= indexBean.getClientInterface(curClient);
@@ -270,45 +232,60 @@
                    out.write(cHost);
                }
           %>
-            </span>
-        </div>
-        <div class="statusField rowItem">
-            <label><%=intl._t("Status")%>:</label>
+        </td>
+        <td class="tunnelPort">
+         <%
+               String cPort= indexBean.getClientPort2(curClient);
+               out.write(cPort);
+               if (indexBean.isSSLEnabled(curClient))
+                   out.write(" SSL");
+          %>
+        </td>
+        <td class="tunnelStatus">
             <%
             switch (indexBean.getTunnelStatus(curClient)) {
                 case IndexBean.STARTING:
-          %><div class="statusStarting text"><%=intl._t("Starting...")%></div>
-            <a class="control" title="Stop this Tunnel" href="list?nonce=<%=nextNonce%>&amp;action=stop&amp;tunnel=<%=curClient%>"><%=intl._t("Stop")%></a>
+          %><div class="statusStarting text" title="<%=intl._t("Starting...")%>"><%=intl._t("Starting...")%></div>
+        </td>
+        <td class="tunnelControl">
+            <a class="control" title="<%=intl._t("Stop this Tunnel")%>" href="list?nonce=<%=nextNonce%>&amp;action=stop&amp;tunnel=<%=curClient%>"><%=intl._t("Stop")%></a>
         <%
                 break;
                 case IndexBean.STANDBY:
-          %><div class="statusStarting text"><%=intl._t("Standby")%></div>
+          %><div class="statusStarting text" title="<%=intl._t("Standby")%>"><%=intl._t("Standby")%></div>
+        </td>
+        <td class="tunnelControl">
             <a class="control" title="Stop this Tunnel" href="list?nonce=<%=nextNonce%>&amp;action=stop&amp;tunnel=<%=curClient%>"><%=intl._t("Stop")%></a>
         <%
                 break;
                 case IndexBean.RUNNING:
-          %><div class="statusRunning text"><%=intl._t("Running")%></div>
+          %><div class="statusRunning text" title="<%=intl._t("Running")%>"><%=intl._t("Running")%></div>
+        </td>
+        <td class="tunnelControl">
             <a class="control" title="Stop this Tunnel" href="list?nonce=<%=nextNonce%>&amp;action=stop&amp;tunnel=<%=curClient%>"><%=intl._t("Stop")%></a>
         <%
                 break;
                 case IndexBean.NOT_RUNNING:
-          %><div class="statusNotRunning text"><%=intl._t("Stopped")%></div>
-            <a class="control" title="Start this Tunnel" href="list?nonce=<%=nextNonce%>&amp;action=start&amp;tunnel=<%=curClient%>"><%=intl._t("Start")%></a>
+          %><div class="statusNotRunning text" title="<%=intl._t("Stopped")%>"><%=intl._t("Stopped")%></div>
+        </td>
+        <td class="tunnelControl">
+            <a class="control" title="<%=intl._t("Start this Tunnel")%>" href="list?nonce=<%=nextNonce%>&amp;action=start&amp;tunnel=<%=curClient%>"><%=intl._t("Start")%></a>
         <%
                 break;
             }
-      %></div>
-
-        <div class="destinationField rowItem">
-            <label>
+      %>
+        </td>
+    </tr>
+    <tr>
+        <td class="tunnelDestination" colspan="6">
+            <span class="tunnelDestinationLabel">
             <% if ("httpclient".equals(indexBean.getInternalType(curClient)) || "connectclient".equals(indexBean.getInternalType(curClient)) ||
                    "sockstunnel".equals(indexBean.getInternalType(curClient)) || "socksirctunnel".equals(indexBean.getInternalType(curClient))) { %>
-                <%=intl._t("Outproxy")%>:
+                <b><%=intl._t("Outproxy")%>:</b>
             <% } else { %>
-                <%=intl._t("Destination")%>:
+                <b><%=intl._t("Destination")%>:</b>
             <% } %>
-            </label>
-            <div class="text">
+</span>
             <%
                if (indexBean.getIsUsingOutproxyPlugin(curClient)) {
                    %><%=intl._t("internal plugin")%><%
@@ -322,30 +299,22 @@
                        %><i><%=intl._t("none")%></i><%
                    }
                } %>
-            </div>
-        </div>
+        </td>
+    </tr>
         <% /* TODO SSL outproxy for httpclient if plugin not present */ %>
-
-        <div class="descriptionField rowItem">
-            <label><%=intl._t("Description")%>:</label>
-            <div class="text"><%=indexBean.getTunnelDescription(curClient)%></div>
-        </div>
-
-        <div class="subdivider">
-            <hr />
-        </div>
+    <tr>
+        <td class="tunnelDescription" colspan="6">
+            <span class="tunnelDescriptionLabel"><b><%=intl._t("Description")%>:</b></span>
+            <%=indexBean.getTunnelDescription(curClient)%>
+        </td>
+    </tr>
         <%
         }
-      %>            
-        <div class="separator">
-            <hr />
-        </div>
-    
-        <div class="footer">
+      %>
+    <tr>
+        <td class="newTunnel" colspan="6">
             <form id="addNewClientTunnelForm" action="edit">
-                <div class="toolbox">
-                    
-        <label><%=intl._t("New client tunnel")%>:</label>
+                <b><%=intl._t("New client tunnel")%>:</b>&nbsp;
                     <select name="type">
                         <option value="client"><%=intl._t("Standard")%></option>
                         <option value="httpclient">HTTP/CONNECT</option>
@@ -356,16 +325,17 @@
                         <option value="streamrclient">Streamr</option>
                     </select>
                     <input class="control" type="submit" value="<%=intl._t("Create")%>" />
-                </div>
             </form>
-        </div>
-    </div>
+        </td>
+    </tr>
+</table>
+</div>
+
 <%
 
   }  // isInitialized()
 
 %>
-    <div id="pageFooter">
-    </div>
+
 </body>
 </html>
diff --git a/apps/i2ptunnel/jsp/register.jsp b/apps/i2ptunnel/jsp/register.jsp
index 4bd2f693f8d3cb8b5a8238d98baed7487d331aa7..0b3c2aff149d5a72ee40ecc949322593c0274e21 100644
--- a/apps/i2ptunnel/jsp/register.jsp
+++ b/apps/i2ptunnel/jsp/register.jsp
@@ -29,25 +29,22 @@
 
     <% if (editBean.allowCSS()) {
   %><link rel="icon" href="<%=editBean.getTheme()%>images/favicon.ico" />
-    <link href="<%=editBean.getTheme()%>default.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" /> 
-    <link href="<%=editBean.getTheme()%>i2ptunnel.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" />
+    <link href="<%=editBean.getTheme()%>i2ptunnel.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" /> 
     <% }
   %>
 <style type='text/css'>
 input.default { width: 1px; height: 1px; visibility: hidden; }
 </style>
 </head>
-<body id="tunnelEditPage">
-    <div id="pageHeader">
-    </div>
+<body id="tunnelRegistration">
+
 <%
 
   if (editBean.isInitialized()) {
 
 %>
     <form method="post" enctype="multipart/form-data" action="register" accept-charset="UTF-8">
-        <div id="tunnelEditPanel" class="panel">
-            <div class="header">
+        <div class="panel" id="registration">
 <%
     String tunnelTypeName;
     String tunnelType;
@@ -55,11 +52,11 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
     if (curTunnel >= 0) {
         tunnelTypeName = editBean.getTunnelType(curTunnel);
         tunnelType = editBean.getInternalType(curTunnel);
-      %><h4><%=intl._t("Registration Helper")%></h4><% 
+      %><h2><%=intl._t("Registration Helper")%> (<%=editBean.getTunnelName(curTunnel)%>)</h2><% 
     } else {
         tunnelTypeName = "new";
         tunnelType = "new";
-      %><h4>Fail</h4><p>Tunnel not found</p><% 
+      %><h2>Fail</h2><p>Tunnel not found</p><% 
     }
     String b64 = editBean.getDestinationBase64(curTunnel);
     String name = editBean.getSpoofedHost(curTunnel);
@@ -70,87 +67,95 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                 <input type="hidden" name="nonce" value="<%=net.i2p.i2ptunnel.web.IndexBean.getNextNonce()%>" />
                 <input type="hidden" name="type" value="<%=tunnelType%>" />
                 <input type="submit" class="default" name="action" value="Save changes" />
-            </div>
 <%
     if (!"new".equals(tunnelType)) {      
 %>
-  <div class="rowItem"><span class="comment">
+
+<table>
+    <tr>
+        <td class="infohelp">
     <%=intl._t("Please be sure to select, copy, and paste the entire contents of the appropriate authentication data into the form of your favorite registration site")%>
-  </span><br /></div>
-            <div class="separator">
-                <hr />
-            </div>
-            <div id="nameField" class="rowItem">
-                <label for="name" accesskey="N">
-                    <%=intl._t("Name")%>
-                </label>
-                <span class="text"><%=editBean.getTunnelName(curTunnel)%></span>
-            </div>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <b><%=intl._t("Tunnel Name")%>:</b> <%=editBean.getTunnelName(curTunnel)%>
+        </td>
+    </tr>
+
 <%            
       if (("httpserver".equals(tunnelType)) || ("httpbidirserver".equals(tunnelType))) {
-          %><div id="websiteField" class="rowItem">
-                <label for="spoofedHost" accesskey="W">
-                    <%=intl._t("Website name")%>
-                </label>
-                <span class="text"><%=editBean.getSpoofedHost(curTunnel)%></span>    
-            </div>
+          %>
+    <tr><td><b><%=intl._t("Website Name")%>:</b> <%=editBean.getSpoofedHost(curTunnel)%></td></tr>
 <%
        }
 %>
+
 <!--
-            <div id="destinationField" class="rowItem">
-                <label for="localDestination" accesskey="L">
-                    <%=intl._t("Local destination")%>
-                </label>
-                <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Read Only: Local Destination (if known)" wrap="off" spellcheck="false"><%=editBean.getDestinationBase64(curTunnel)%></textarea>               
-            </div>
+    <tr>
+        <th>
+            <b><%=intl._t("Local Destination")%></b>
+        </th>
+    </tr>
+    <tr>
+        <td>
+            <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Read Only: Local Destination (if known)" wrap="off" spellcheck="false"><%=editBean.getDestinationBase64(curTunnel)%></textarea>
+        </td>
+    </tr>
 -->
-            <div class="subdivider">
-                <hr />
-            </div>
+
 <%
        if (b64 == null || b64.length() < 516) {
-           %><%=intl._t("Local destination is not available. Start the tunnel.")%><%
+           %><tr><td class="infohelp"><%=intl._t("Local destination is not available. Start the tunnel.")%></td></tr><%
        } else if (name == null || name.equals("") || name.contains(" ") || !name.endsWith(".i2p")) {
            if (("httpserver".equals(tunnelType)) || ("httpbidirserver".equals(tunnelType))) {
-               %><%=intl._t("To enable registration verification, edit tunnel and set name (or website name) to a valid host name ending in '.i2p'")%><%
+               %><tr><td class="infohelp"><%=intl._t("To enable registration verification, edit tunnel and set name (or website name) to a valid host name ending in '.i2p'")%></td></tr><%
            } else {
-               %><%=intl._t("To enable registration verification, edit tunnel and set name to a valid host name ending in '.i2p'")%><%
+               %><tr><td class="infohelp"><%=intl._t("To enable registration verification, edit tunnel and set name to a valid host name ending in '.i2p'")%></td></tr><%
            }
        } else {
            SigningPrivateKey spk = editBean.getSigningPrivateKey(curTunnel);
            if (spk == null) {
-               %><%=intl._t("Destination signing key is not available. Start the tunnel.")%><%
+               %><tr><td class="infohelp"><%=intl._t("Destination signing key is not available. Start the tunnel.")%></td></tr><%
            } else {
                valid = true;
                OrderedProperties props = new OrderedProperties();
                HostTxtEntry he = new HostTxtEntry(name, b64, props);
                he.sign(spk);
-          %><div id="sigField" class="rowItem">
-                <label for="signature">
-                    <%=intl._t("Authentication for adding host")%>
-                </label>
-                <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Copy and paste this to the registration site" wrap="off" spellcheck="false"><% he.write(out); %></textarea>               
-            </div>
-        </div>
-        <div id="tunnelAdvancedNetworking" class="panel">
-            <div class="header">
-                <h4><%=intl._t("Advanced authentication strings")%></h4>
-            </div>
+          %>
+
+    <tr>
+        <th>
+            <%=intl._t("Authentication for adding host {0}", name)%>
+        </th>
+    </tr>
+    <tr>
+        <td>
+            <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" title="Copy and paste this to the registration site" wrap="off" spellcheck="false" class="authentication"><% he.write(out); %></textarea>
+        </td>
+    </tr>
+</table>
+
+<h3><%=intl._t("Advanced authentication strings")%></h3>
+
 <%
                props.remove(HostTxtEntry.PROP_SIG);
                props.setProperty(HostTxtEntry.PROP_ACTION, HostTxtEntry.ACTION_REMOVE);
                he.signRemove(spk);
-          %><div id="sigField" class="rowItem">
-                <label for="signature">
-                    <%=intl._t("Authentication for removing host")%>
-                </label>
-                <textarea rows="1" style="height: 3em; margin: 0 10px 0 0;" cols="60" readonly="readonly" id="localDestination" title="Copy and paste this to the registration site" wrap="off" spellcheck="false"><% he.writeRemove(out); %></textarea>               
-                <span class="comment"><%=intl._t("This will remove the entry for {0}", name)%></span>
-            </div>
-            <div class="separator">
-                <hr />
-            </div>
+          %>
+          
+<table>
+    <tr>
+        <th>
+            <%=intl._t("Authentication for removing host {0}", name)%>
+        </th>
+    </tr>
+    <tr>
+        <td>
+            <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" title="Copy and paste this to the registration site" wrap="off" spellcheck="false" class="authentication"><% he.writeRemove(out); %></textarea>
+        </td>
+    </tr>
+
 <%
                String oldname = wrequest.getParameter("oldname");
                String olddestfile = wrequest.getFilename("olddestfile");
@@ -173,90 +178,135 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                    }
                }
                props.remove(HostTxtEntry.PROP_SIG);
-          %><div id="sigField" class="rowItem">
-                <label for="signature">
+          %>
+    <tr>
+        <th>
                     <%=intl._t("Authentication for changing name")%>
-                </label>
+        </th>
+    </tr>
 <%
                if (oldname != null && oldname.length() > 0 && !oldname.equals(name)) {
                    props.setProperty(HostTxtEntry.PROP_ACTION, HostTxtEntry.ACTION_CHANGENAME);
                    props.setProperty(HostTxtEntry.PROP_OLDNAME, oldname);
                    he.sign(spk);
-                %><textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Copy and paste this to the registration site" wrap="off" spellcheck="false"><% he.write(out); %></textarea>               
-                <span class="comment"><%=intl._t("This will change the name from {0} to {1}, using the same destination", oldname, name)%></span>
+                %>
+    <tr>
+        <td>
+            <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" title="Copy and paste this to the registration site" wrap="off" spellcheck="false" class="authentication"><% he.write(out); %></textarea>
+        </td>
+    </tr>
+    <tr>
+        <td class="infohelp">
+            <%=intl._t("This will change the name from {0} to {1}, using the same destination", oldname, name)%>
+        </td>
+    </tr>
+
 <%
                } else {
-                %><span class="comment"><%=intl._t("This tunnel must be configured with the new host name.")%></span>
-                  <span class="comment"><%=intl._t("Enter old host name below.")%></span>
+                %><tr><td class="infohelp"><%=intl._t("This tunnel must be configured with the new host name.")%>
+                  &nbsp;<%=intl._t("Enter old hostname below.")%></td></tr>
 <%
                }
-          %></div>
-            <div class="separator">
-                <hr />
-            </div>
+          %>
+
 <%
                props.remove(HostTxtEntry.PROP_SIG);
-          %><div id="sigField" class="rowItem">
-                <label for="signature">
+          %>
+    <tr>
+        <th>
                     <%=intl._t("Authentication for adding alias")%>
-                </label>
+        </th>
+    </tr>
 <%
                if (oldname != null && oldname.length() > 0 && !oldname.equals(name)) {
                    props.setProperty(HostTxtEntry.PROP_ACTION, HostTxtEntry.ACTION_ADDNAME);
                    props.setProperty(HostTxtEntry.PROP_OLDNAME, oldname);
                    he.sign(spk);
-                %><textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Copy and paste this to the registration site" wrap="off" spellcheck="false"><% he.write(out); %></textarea>               
-                <span class="comment"><%=intl._t("This will add an alias {0} for {1}, using the same destination", name, oldname)%></span>
+                %>
+    <tr>
+        <td>
+            <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" title="Copy and paste this to the registration site" wrap="off" spellcheck="false" class="authentication"><% he.write(out); %></textarea>
+        </td>
+    </tr>
+    <tr>
+        <td class="infohelp">
+            <%=intl._t("This will add an alias {0} for {1}, using the same destination", name, oldname)%>
+        </td>
+    </tr>
 <%
                } else {
-                %><span class="comment"><%=intl._t("This tunnel must be configured with the new host name.")%></span>
-                  <span class="comment"><%=intl._t("Enter old host name below.")%></span>
+                %><tr> <td class="infohelp"><%=intl._t("This tunnel must be configured with the new host name.")%>
+                  &nbsp;<%=intl._t("Enter old hostname below.")%></td></tr>
 <%
                }
-          %></div>
-            <div class="separator">
-                <hr />
-            </div>
+          %>
+          
 <%
                props.remove(HostTxtEntry.PROP_SIG);
                props.remove(HostTxtEntry.PROP_OLDNAME);
-          %><div id="sigField" class="rowItem">
-                <label for="signature">
+          %>
+
+    <tr>
+        <th>
                     <%=intl._t("Authentication for changing destination")%>
-                </label>
+        </th>
+    </tr>
+
 <%
                if (spk2 != null) {
                    props.setProperty(HostTxtEntry.PROP_ACTION, HostTxtEntry.ACTION_CHANGEDEST);
                    props.setProperty(HostTxtEntry.PROP_OLDDEST, olddest);
                    he.signInner(spk2);
                    he.sign(spk);
-                %><textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Copy and paste this to the registration site" wrap="off" spellcheck="false"><% he.write(out); %></textarea>               
-                <span class="comment"><%=intl._t("This will change the destination for {0}", name)%></span>
+                %>
+
+    <tr>
+        <td>
+            <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" title="Copy and paste this to the registration site" wrap="off" spellcheck="false" class="authentication"><% he.write(out); %></textarea>
+        </td>
+    </tr>
+    <tr>
+        <td class="infohelp">
+            <%=intl._t("This will change the destination for {0}", name)%>
+        </td>
+    </tr>
+
 <%
                } else {
-                %><span class="comment"><%=intl._t("This tunnel must be configured with the new destination.")%></span>
-                  <span class="comment"><%=intl._t("Enter old destination below.")%></span>
+                %><tr><td class="infohelp"><%=intl._t("This tunnel must be configured with the new destination.")%>
+                  &nbsp;<%=intl._t("Enter old destination below.")%></td></tr>
 <%
                }
-          %></div>
-            <div class="separator">
-                <hr />
-            </div>
+          %>
+
 <%
                props.remove(HostTxtEntry.PROP_SIG);
                props.remove(HostTxtEntry.PROP_OLDSIG);
-          %><div id="sigField" class="rowItem">
-                <label for="signature" style="height: 42px;" >
+          %>
+          
+    <tr>
+        <th>
                     <%=intl._t("Authentication for adding alternate destination")%>
-                </label>
+        </th>
+    </tr>
+
 <%
                if (spk2 != null) {
                    props.setProperty(HostTxtEntry.PROP_ACTION, HostTxtEntry.ACTION_ADDDEST);
                    props.setProperty(HostTxtEntry.PROP_OLDDEST, olddest);
                    he.signInner(spk2);
                    he.sign(spk);
-                %><textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Copy and paste this to the registration site" wrap="off" spellcheck="false"><% he.write(out); %></textarea>               
-                <span class="comment"><%=intl._t("This will add an alternate destination for {0}", name)%></span>
+                %>
+    <tr>
+        <td>
+            <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" title="Copy and paste this to the registration site" wrap="off" spellcheck="false" class="authentication"><% he.write(out); %></textarea>
+        </td>
+    </tr>
+    <tr>
+        <td class="infohelp">
+            <%=intl._t("This will add an alternate destination for {0}", name)%>
+        </td>
+    </tr>
 <%
                } else {
                    // If set, use the configured alternate destination as the new alias destination,
@@ -282,26 +332,29 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                        props2.setProperty(HostTxtEntry.PROP_OLDDEST, b64);
                        he2.signInner(spk);
                        he2.sign(spk3);
-                %><textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Copy and paste this to the registration site" wrap="off" spellcheck="false"><% he2.write(out); %></textarea>               
-                <span class="comment"><%=intl._t("This will add an alternate destination for {0}", name)%></span>
+                %><tr><td><textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Copy and paste this to the registration site" wrap="off" spellcheck="false"><% he2.write(out); %></textarea></td></tr>
+                <tr><td class="infohelp"><%=intl._t("This will add an alternate destination for {0}", name)%></td></tr>
 <%
                    } else {
-                %><span class="comment"><%=intl._t("This tunnel must be configured with the new destination.")%></span>
-                  <span class="comment"><%=intl._t("Enter old destination below.")%></span>
+                %><tr><td class="infohelp"><%=intl._t("This tunnel must be configured with the new destination.")%>
+                  &nbsp;<%=intl._t("Enter old destination below.")%></td></tr>
 <%
                    }  // spk3
                }  // spk2
-          %></div>
-            <div class="separator">
-                <hr />
-            </div>
+          %>
+
 <%
+
+
                props.remove(HostTxtEntry.PROP_SIG);
                props.remove(HostTxtEntry.PROP_OLDSIG);
-          %><div id="sigField" class="rowItem">
-                <label for="signature">
+          %>
+
+    <tr>
+        <th>
                     <%=intl._t("Authentication for adding subdomain")%>
-                </label>
+        </th>
+    </tr>
 <%
                if (oldname != null && oldname.length() > 0 && !oldname.equals(name) && spk2 != null) {
                    props.setProperty(HostTxtEntry.PROP_ACTION, HostTxtEntry.ACTION_ADDSUBDOMAIN);
@@ -309,73 +362,98 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
                    props.setProperty(HostTxtEntry.PROP_OLDDEST, olddest);
                    he.signInner(spk2);
                    he.sign(spk);
-                %><textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" id="localDestination" title="Copy and paste this to the registration site" wrap="off" spellcheck="false"><% he.write(out); %></textarea>               
-                <span class="comment"><%=intl._t("This will add a subdomain {0} of {1}, with a different destination", name, oldname)%></span>
+                %>
+                
+    <tr>
+        <td>
+            <textarea rows="1" style="height: 3em;" cols="60" readonly="readonly" title="Copy and paste this to the registration site" wrap="off" spellcheck="false" class="authentication"><% he.write(out); %></textarea>
+        </td>
+    </tr>
+    <tr>
+        <td class="infohelp">
+            <%=intl._t("This will add a subdomain {0} of {1}, with a different destination", name, oldname)%>
+        </td>
+    </tr>
+
 <%
                } else {
-                %><span class="comment"><%=intl._t("This tunnel must be configured with the new subdomain and destination.")%></span>
-                  <span class="comment"><%=intl._t("Enter higher-level domain and destination below.")%></span>
+                %>
+    <tr>
+        <td class="infohelp">
+            <%=intl._t("This tunnel must be configured with the new subdomain and destination.")%>
+            &nbsp;<%=intl._t("Enter higher-level domain and destination below.")%>
+        </td>
+    </tr>
+
 <%
                }
-          %></div>
+          %>
 
-          <div class="footer">
-            </div>
 <%
           }  // spk != null
        }  // valid b64 and name
     }  // !"new".equals(tunnelType)
     if (!valid && curTunnel >= 0) {
-        %><a href="edit?tunnel=<%=curTunnel%>"><%=intl._t("Go back and edit the tunnel")%></a><%
+        %>
+    <tr>
+        <td>
+            <a href="edit?tunnel=<%=curTunnel%>"><%=intl._t("Go back and edit the tunnel")%></a>
+        </td>
+    </tr>
+        <%
     }
 %>
-        </div>
-
 
 <%
     if (valid) {
 %>
-        <div id="globalOperationsPanel" class="panel">
-            <div class="header">
-                <h4><%=intl._t("Specify old name and destination")%></h4>
-            </div>
-  <span class="comment">
-    <%=intl._t("This is only required for advanced authentication.")%>
-    <%=intl._t("See above for required items.")%>
-  </span><br />
+
+    <tr>
+        <th>
+            <%=intl._t("Specify old name and destination")%>
+        </th>
+    </tr>
+    <tr>
+        <td class="infohelp">
+            <%=intl._t("This is only required for advanced authentication.")%>
+            &nbsp;<%=intl._t("See above for required items.")%>
+        </td>
+    </tr>
 <%
                String oldname = wrequest.getParameter("oldname");
                if (oldname == null) oldname = "";
-          %><div id="sigField" class="rowItem">
-                <label for="signature">
-                    <%=intl._t("Old Host Name")%>
-                </label>
-                <input type="text" size="30" maxlength="50" name="oldname" id="name" title="Old Host Name" value="<%=oldname%>" class="freetext" />               
-            </div> 
-            <div id="sigField" class="rowItem">
-                <label for="signature">
-                    <%=intl._t("Private Key File for old Destination")%>
-                </label>
-                <input type="file" size="50%" name="olddestfile" id="name" value="" />               
-            </div> 
-            <div class="footer">
-                <div class="toolbox">
+          %>
+    <tr>
+        <td>
+            <b><%=intl._t("Old Hostname")%>:</b>
+            <input type="text" size="30" maxlength="50" name="oldname" id="oldName" title="Old Hostname" value="<%=oldname%>" class="freetext" />
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <b><%=intl._t("Private Key File for old Destination")%>:</b>
+            <input type="file" name="olddestfile" id="oldDestFile" value="" />
+        </td>
+    </tr>
+    <tr>
+        <td class="buttons">
                     <input type="hidden" value="true" name="removeConfirm" />
                     <button id="controlCancel" class="control" type="submit" name="action" value="" title="Cancel"><%=intl._t("Cancel")%></button>
                     <button id="controlSave" accesskey="S" class="control" type="submit" name="action" value="authenticate" title="Generate Authentication"><%=intl._t("Generate")%></button>
-                </div>
-            </div> 
-        </div>
+        </td>
+    </tr>
+
 <%
      } // valid
 %>
+
+</table>
+</div>
     </form>
-    <div id="pageFooter">
-    </div>
 <%
 
   } else {
-     %>Tunnels are not initialized yet, please reload in two minutes.<%
+     %><div id="notReady"><%=intl._t("Tunnels are not initialized yet, please reload in two minutes.")%></div><%
   }  // isInitialized()
 
 %>
diff --git a/apps/i2ptunnel/jsp/wizard.jsp b/apps/i2ptunnel/jsp/wizard.jsp
index b8d7afae9462585fa1d01a6941443a55e6381c3d..41bc725a1796d91ebd7c0ffe71d874e21906cd9c 100644
--- a/apps/i2ptunnel/jsp/wizard.jsp
+++ b/apps/i2ptunnel/jsp/wizard.jsp
@@ -63,48 +63,45 @@
 
     <% if (editBean.allowCSS()) {
   %><link rel="icon" href="<%=editBean.getTheme()%>images/favicon.ico" />
-    <link href="<%=editBean.getTheme()%>default.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" />
     <link href="<%=editBean.getTheme()%>i2ptunnel.css?<%=net.i2p.CoreVersion.VERSION%>" rel="stylesheet" type="text/css" />
     <% }
   %>
 </head>
 <body id="tunnelWizardPage">
-    <div id="pageHeader">
-    </div>
 
     <form method="post" action="<%=(curPage == 7 ? "list" : "wizard") %>">
 
         <div id="wizardPanel" class="panel">
-            <div class="header">
+
                 <%
                 if (curPage == 1) {
-                  %><h4><%=intl._t("Server or client tunnel?")%></h4><%
+                  %><h2><%=intl._t("Server or client tunnel?")%></h2><%
                 } else if (curPage == 2) {
-                  %><h4><%=intl._t("Tunnel type")%></h4><%
+                  %><h2><%=intl._t("Tunnel type")%></h2><%
                 } else if (curPage == 3) {
-                  %><h4><%=intl._t("Tunnel name and description")%></h4><%
+                  %><h2><%=intl._t("Tunnel name and description")%></h2><%
                 } else if (curPage == 4 && tunnelIsClient) {
-                  %><h4><%=intl._t("Tunnel destination")%></h4><%
+                  %><h2><%=intl._t("Tunnel destination")%></h2><%
                 } else if (curPage == 5) {
-                  %><h4><%=intl._t("Binding address and port")%></h4><%
+                  %><h2><%=intl._t("Binding address and port")%></h2><%
                 } else if (curPage == 6) {
-                  %><h4><%=intl._t("Tunnel auto-start")%></h4><%
+                  %><h2><%=intl._t("Tunnel auto-start")%></h2><%
                 } else if (curPage == 7) {
-                  %><h4><%=intl._t("Wizard completed")%></h4><%
+                  %><h2><%=intl._t("Wizard completed")%></h2><%
                 } %>
                 <input type="hidden" name="page" value="<%=curPage%>" />
                 <input type="hidden" name="tunnel" value="null" />
                 <input type="hidden" name="nonce" value="<%=net.i2p.i2ptunnel.web.IndexBean.getNextNonce()%>" />
-            </div>
 
-            <div class="separator">
-                <hr />
-            </div>
 
+<table>
             <% /* Page 1 - Whether to make a client or server tunnel */
 
             if (curPage == 1) {
-            %><p>
+            %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("This wizard will take you through the various options available for creating tunnels in I2P.")%>
             </p>
             <p>
@@ -112,12 +109,22 @@
                 <%=intl._t("If you need to connect to a remote service, such as an IRC server inside I2P or a code repository, then you will require a CLIENT tunnel.")%>
                 <%=intl._t("On the other hand, if you wish to host a service for others to connect to you'll need to create a SERVER tunnel.")%>
             </p>
-            <div id="typeField" class="rowItem">
-                <label><%=intl._t("Server Tunnel")%></label>
-                <input value="false" type="radio" id="baseType" name="isClient" class="tickbox" />
-                <label><%=intl._t("Client Tunnel")%></label>
-                <input value="true" type="radio" id="baseType" name="isClient" class="tickbox" checked="checked" />
-            </div><%
+        </td>
+    </tr>
+    <tr>
+        <td class="options">
+            <span class="multiOption" id="isServer">
+                <label><input value="false" type="radio" id="baseType" name="isClient" class="tickbox" />
+                &nbsp;<%=intl._t("Server Tunnel")%></label>
+            </span>
+            <span class="multiOption" id="isClient">
+                <label><input value="true" type="radio" id="baseType" name="isClient" class="tickbox" checked="checked" />
+                &nbsp;<%=intl._t("Client Tunnel")%></label>
+            </span>
+        </td>
+    </tr>
+
+            <%
             } else {
             %><input type="hidden" name="isClient" value="<%=tunnelIsClient%>" /><%
             } /* curPage 1 */
@@ -127,10 +134,18 @@
             <% /* Page 2 - Tunnel type */
 
             if (curPage == 2) {
-            %><p>
+            %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("There are several types of tunnels to choose from:")%>
             </p>
-            <table><%
+        </td>
+    </tr>
+    <tr>
+        <td id="wizardTable">
+            <table id="wizardTunnelTypes">
+            <%
                 if (tunnelIsClient) {
                 %>
                 <tr><td><%=intl._t("Standard")%></td><td>
@@ -189,8 +204,12 @@
                 </td></tr><%
                 }
                 %>
-            </table>
-            <div id="typeField" class="rowItem">
+
+                <tr>
+                    <td>
+                        <%=intl._t("Select tunnel type")%>:
+                    </td>
+                    <td>
                 <%
                 if (tunnelIsClient) {
                 %><select name="type">
@@ -211,7 +230,12 @@
                     <option value="streamrserver">Streamr</option>
                 </select><%
                 } /* tunnelIsClient */ %>
-            </div><%
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+            <%
             } else {
             %><input type="hidden" name="type" value="<%=tunnelType%>" /><%
             } /* curPage 2 */
@@ -221,22 +245,28 @@
             <% /* Page 3 - Name and description */
 
             if (curPage == 3) {
-            %><p>
+            %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("Choose a name and description for your tunnel.")%>
                 <%=intl._t("These can be anything you want - they are just for ease of identifying the tunnel in the routerconsole.")%>
             </p>
-            <div id="nameField" class="rowItem">
-                <label for="name" accesskey="N">
-                    <%=intl._t("Name")%>:(<span class="accessKey">N</span>)
-                </label>
-                <input type="text" size="30" maxlength="50" name="name" id="name" title="Tunnel Name" value="<%=(!"null".equals(request.getParameter("name")) ? net.i2p.data.DataHelper.stripHTML(request.getParameter("name")) : "" ) %>" class="freetext" />
-            </div>
-            <div id="descriptionField" class="rowItem">
-                <label for="description" accesskey="e">
-                    <%=intl._t("Description")%>:(<span class="accessKey">E</span>)
-                </label>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <span class="tag"><%=intl._t("Name")%>:</span>
+                <input type="text" size="30" maxlength="50" name="name" id="name" placeholder="New Tunnel" title="Tunnel Name" value="<%=(!"null".equals(request.getParameter("name")) ? net.i2p.data.DataHelper.stripHTML(request.getParameter("name")) : "" ) %>" class="freetext" />
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <span class="tag"><%=intl._t("Description")%>:</span>
                 <input type="text" size="60" maxlength="80" name="nofilter_description"  id="description" title="Tunnel Description" value="<%=(!"null".equals(request.getParameter("nofilter_description")) ? net.i2p.data.DataHelper.stripHTML(request.getParameter("nofilter_description")) : "" ) %>" class="freetext" />
-            </div><%
+        </td>
+    </tr>
+            <%
             } else {
             %><input type="hidden" name="name" value="<%=net.i2p.data.DataHelper.stripHTML(request.getParameter("name"))%>" />
             <input type="hidden" name="nofilter_description" value="<%=net.i2p.data.DataHelper.stripHTML(request.getParameter("nofilter_description"))%>" /><%
@@ -249,36 +279,47 @@
             if (tunnelIsClient) {
               if ("httpclient".equals(tunnelType) || "connectclient".equals(tunnelType) || "sockstunnel".equals(tunnelType) || "socksirctunnel".equals(tunnelType)) {
                 if (curPage == 4) {
-          %><p>
+          %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("If you know of any outproxies for this type of tunnel (either HTTP or SOCKS), fill them in below.")%>
                 <%=intl._t("Separate multiple proxies with commas.")%>
             </p>
-            <div id="destinationField" class="rowItem">
-                <label for="proxyList" accesskey="x">
-                    <%=intl._t("Outproxies")%>(<span class="accessKey">x</span>):
-                </label>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <span class="tag"><%=intl._t("Outproxies")%>:</span>
                 <input type="text" size="30" id="proxyList" name="proxyList" title="List of Outproxy I2P destinations" value="<%=(!"null".equals(request.getParameter("proxyList")) ? net.i2p.data.DataHelper.stripHTML(request.getParameter("proxyList")) : "" ) %>" class="freetext" />
-            </div><%
+        </td>
+    </tr>
+            <%
                 } else {
             %><input type="hidden" name="proxyList" value="<%=net.i2p.data.DataHelper.stripHTML(request.getParameter("proxyList"))%>" /><%
                 } /* curPage 4 */
               } else if ("client".equals(tunnelType) || "ircclient".equals(tunnelType) || "streamrclient".equals(tunnelType)) {
                 if (curPage == 4) {
-          %><p>
+            %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("Type in the I2P destination of the service that this client tunnel should connect to.")%>
                 <%=intl._t("This could be the full base 64 destination key, or an I2P URL from your address book.")%>
             </p>
-            <div id="destinationField" class="rowItem">
-                <label for="targetDestination" accesskey="T">
-                    <%=intl._t("Tunnel Destination")%>(<span class="accessKey">T</span>):
-                </label>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <span class="tag"><%=intl._t("Tunnel Destination")%>:</span>
                 <input type="text" size="30" id="targetDestination" name="targetDestination" title="Destination of the Tunnel" value="<%=(!"null".equals(request.getParameter("targetDestination")) ? net.i2p.data.DataHelper.stripHTML(request.getParameter("targetDestination")) : "" ) %>" class="freetext" />
-                <span class="comment">(<%=intl._t("name, name:port, or destination")%>
+            &nbsp;(<%=intl._t("name, name:port, or destination")%>
                      <% if ("streamrclient".equals(tunnelType)) { /* deferred resolution unimplemented in streamr client */ %>
                          - <%=intl._t("b32 not recommended")%>
                      <% } %> )
-                </span>
-            </div><%
+        </td>
+    </tr>
+            <%
                 } else {
             %><input type="hidden" name="targetDestination" value="<%=net.i2p.data.DataHelper.stripHTML(request.getParameter("targetDestination"))%>" /><%
                 } /* curPage 4 */
@@ -291,16 +332,22 @@
 
             if ((tunnelIsClient && "streamrclient".equals(tunnelType)) || (!tunnelIsClient && !"streamrserver".equals(tunnelType))) {
               if (curPage == 5) {
-            %><p>
-                <%=intl._t("This is the IP that your service is running on, this is usually on the same machine so 127.0.0.1 is autofilled.")%><%
-                //XXX TODO<%=intl._t("For some reason streamrclient also uses this.")%>
+            %>
+    <tr>
+        <td>
+            <p>
+                <%=intl._t("This is the IP that your service is running on, this is usually on the same machine so 127.0.0.1 is autofilled.")%>
+                <% //TODO For some reason streamrclient also uses this. %>
             </p>
-            <div id="hostField" class="rowItem">
-                <label for="targetHost" accesskey="H">
-                    <%=intl._t("Host")%>(<span class="accessKey">H</span>):
-                </label>
-                <input type="text" size="20" id="targetHost" name="targetHost" title="Target Hostname or IP" value="<%=(!"null".equals(request.getParameter("targetHost")) ? net.i2p.data.DataHelper.stripHTML(request.getParameter("targetHost")) : "127.0.0.1" ) %>" class="freetext" />
-            </div><%
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <span class="tag"><%=intl._t("Host")%>:</span>
+                <input type="text" size="20" id="targetHost" name="targetHost" title="Target Hostname or IP" placeholder="127.0.0.1" value="<%=(!"null".equals(request.getParameter("targetHost")) ? net.i2p.data.DataHelper.stripHTML(request.getParameter("targetHost")) : "127.0.0.1" ) %>" class="freetext" />
+        </td>
+    </tr>
+            <%
               } else {
             %><input type="hidden" name="targetHost" value="<%=net.i2p.data.DataHelper.stripHTML(request.getParameter("targetHost"))%>" /><%
               } /* curPage 5 */
@@ -308,15 +355,21 @@
             <%
             if (!tunnelIsClient) {
               if (curPage == 5) {
-            %><p>
+            %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("This is the port that the service is accepting connections on.")%>
             </p>
-            <div id="portField" class="rowItem">
-                <label for="targetPort" accesskey="P">
-                    <%=intl._t("Port")%>(<span class="accessKey">P</span>):
-                </label>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <span class="tag"><%=intl._t("Port")%>:</span>
                 <input type="text" size="6" maxlength="5" id="targetPort" name="targetPort" title="Target Port Number" value="<%=(!"null".equals(request.getParameter("targetPort")) ? net.i2p.data.DataHelper.stripHTML(request.getParameter("targetPort")) : "" ) %>" class="freetext" />
-            </div><%
+        </td>
+    </tr>
+            <%
               } else {
             %><input type="hidden" name="targetPort" value="<%=net.i2p.data.DataHelper.stripHTML(request.getParameter("targetPort"))%>" /><%
               } /* curPage 5 */
@@ -324,16 +377,22 @@
             <%
             if (tunnelIsClient || "httpbidirserver".equals(tunnelType)) {
               if (curPage == 5) {
-            %><p>
+            %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("This is the port that the client tunnel will be accessed from locally.")%>
                 <%=intl._t("This is also the client port for the HTTPBidir server tunnel.")%>
             </p>
-            <div id="portField" class="rowItem">
-                <label for="port" accesskey="P">
-                    <span class="accessKey">P</span>ort:
-                </label>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <span class="tag"><%=intl._t("Port")%>:</span>
                 <input type="text" size="6" maxlength="5" id="port" name="port" title="Access Port Number" value="<%=(!"null".equals(request.getParameter("port")) ? net.i2p.data.DataHelper.stripHTML(request.getParameter("port")) : "" ) %>" class="freetext" />
-            </div><%
+        </td>
+    </tr>
+            <%
               } else {
             %><input type="hidden" name="port" value="<%=net.i2p.data.DataHelper.stripHTML(request.getParameter("port"))%>" /><%
               } /* curPage 5 */
@@ -341,16 +400,20 @@
             <%
             if ((tunnelIsClient && !"streamrclient".equals(tunnelType)) || "httpbidirserver".equals(tunnelType) || "streamrserver".equals(tunnelType)) {
               if (curPage == 5) {
-            %><p>
+            %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("How do you want this tunnel to be accessed? By just this machine, your entire subnet, or external internet?")%>
                 <%=intl._t("You will most likely want to just allow 127.0.0.1")%><%
-                //XXX TODO<%=intl._t("Note that it is relevant to most Client tunnels, and httpbidirserver and streamrserver tunnels.")%><%
-                //XXX TODO<%=intl._t("So the wording may need to change slightly for the client vs. server tunnels.")%>
+                //TODO Note that it is relevant to most Client tunnels, and httpbidirserver and streamrserver tunnels.
+                //TODO So the wording may need to change slightly for the client vs. server tunnels. %>
             </p>
-            <div id="reachField" class="rowItem">
-                <label for="reachableBy" accesskey="r">
-                    <%=intl._t("Reachable by")%>(<span class="accessKey">R</span>):
-                </label>
+        </td>
+    </tr>
+    <tr>
+        <td>
+            <span class="tag"><%=intl._t("Reachable by")%>:</span>
                 <select id="reachableBy" name="reachableBy" title="IP for Client Access" class="selectbox">
               <%
                     String clientInterface = request.getParameter("reachableBy");
@@ -369,7 +432,9 @@
                     }
               %>
                 </select>
-            </div><%
+        </td>
+    </tr>
+               <%
               } else {
             %><input type="hidden" name="reachableBy" value="<%=net.i2p.data.DataHelper.stripHTML(request.getParameter("reachableBy"))%>" /><%
               } /* curPage 5 */
@@ -380,17 +445,22 @@
             <% /* Page 6 - Automatic start */
 
             if (curPage == 6) {
-            %><p>
+            %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("The I2P router can automatically start this tunnel for you when the router is started.")%>
                 <%=intl._t("This can be useful for frequently-used tunnels (especially server tunnels), but for tunnels that are only used occassionally it would mean that the I2P router is creating and maintaining unnecessary tunnels.")%>
             </p>
-            <div id="startupField" class="rowItem">
-                <label for="startOnLoad" accesskey="a">
-                    <%=intl._t("Auto Start")%>(<span class="accessKey">A</span>):
-                </label>
-                <input value="1" type="checkbox" id="startOnLoad" name="startOnLoad" title="Start Tunnel Automatically"<%=("1".equals(request.getParameter("startOnLoad")) ? " checked=\"checked\"" : "")%> class="tickbox" />
-                <span class="comment"><%=intl._t("(Check the Box for 'YES')")%></span>
-            </div><%
+        </td>
+    </tr>
+    <tr>
+        <td class="options">
+                <label><input value="1" type="checkbox" id="startOnLoad" name="startOnLoad" title="Start Tunnel Automatically"<%=("1".equals(request.getParameter("startOnLoad")) ? " checked=\"checked\"" : "")%> class="tickbox" />
+            &nbsp;<%=intl._t("Automatically start tunnel when router starts")%></label>
+        </td>
+    </tr>
+            <%
             } else {
               if ("1".equals(request.getParameter("startOnLoad"))) {
             %><input type="hidden" name="startOnLoad" value="<%=net.i2p.data.DataHelper.stripHTML(request.getParameter("startOnLoad"))%>" /><%
@@ -402,7 +472,10 @@
             <% /* Page 7 - Wizard complete */
 
             if (curPage == 7) {
-            %><p>
+            %>
+    <tr>
+        <td>
+            <p>
                 <%=intl._t("The wizard has now collected enough information to create your tunnel.")%>
                 <%=intl._t("Upon clicking the Save button below, the wizard will set up the tunnel, and take you back to the main I2PTunnel page.")%>
                 <%
@@ -417,7 +490,11 @@
             <p>
                 <%=intl._t("Below is a summary of the options you chose:")%>
             </p>
-            <table>
+        </td>
+    </tr>
+    <tr>
+        <td id="wizardTable">
+            <table id="wizardSummary">
                 <tr><td><%=intl._t("Server or client tunnel?")%></td><td>
                     <%=(tunnelIsClient ? "Client" : "Server")%>
                 </td></tr>
@@ -440,10 +517,11 @@
                     Streamr<%
                 } %>
                 </td></tr>
-                <tr><td><%=intl._t("Tunnel name and description")%></td><td>
-                    <%=net.i2p.data.DataHelper.stripHTML(request.getParameter("name"))%><br />
-                    <%=net.i2p.data.DataHelper.stripHTML(request.getParameter("nofilter_description"))%>
-                </td></tr><%
+                <tr><td><%=intl._t("Tunnel name")%></td>
+                <td><%=net.i2p.data.DataHelper.stripHTML(request.getParameter("name"))%></td></tr>    
+                <tr><td><%=intl._t("Tunnel description")%></td>
+                <td><%=net.i2p.data.DataHelper.stripHTML(request.getParameter("nofilter_description"))%></td></tr>
+                <%
                 if (tunnelIsClient) { %>
                 <tr><td><%=intl._t("Tunnel destination")%></td><td><%
                   if ("httpclient".equals(tunnelType) || "connectclient".equals(tunnelType) || "sockstunnel".equals(tunnelType) || "socksirctunnel".equals(tunnelType)) { %>
@@ -453,20 +531,20 @@
                   } %>
                 </td></tr><%
                 } %>
-                <tr><td><%=intl._t("Binding address and port")%></td><td><%
+                <%
                 if ((tunnelIsClient && "streamrclient".equals(tunnelType)) || (!tunnelIsClient && !"streamrserver".equals(tunnelType))) { %>
-                    <%=net.i2p.data.DataHelper.stripHTML(request.getParameter("targetHost"))%><br /><%
+                    <tr><td><%=intl._t("Binding address")%></td><td>
+                    <%=net.i2p.data.DataHelper.stripHTML(request.getParameter("targetHost"))%></td></tr><%
                 }
                 if (!tunnelIsClient) { %>
-                    <%=net.i2p.data.DataHelper.stripHTML(request.getParameter("targetPort"))%><br /><%
+                    <tr><td><%=intl._t("Tunnel port")%></td><td><%=net.i2p.data.DataHelper.stripHTML(request.getParameter("targetPort"))%></td></tr><%
                 }
                 if (tunnelIsClient || "httpbidirserver".equals(tunnelType)) { %>
-                    <br /><%=net.i2p.data.DataHelper.stripHTML(request.getParameter("port"))%><%
+                    <tr><td><%=intl._t("Port")%></td><td><%=net.i2p.data.DataHelper.stripHTML(request.getParameter("port"))%></td></tr><%
                 }
                 if ((tunnelIsClient && !"streamrclient".equals(tunnelType)) || "httpbidirserver".equals(tunnelType) || "streamrserver".equals(tunnelType)) { %>
-                    <br /><%=net.i2p.data.DataHelper.stripHTML(request.getParameter("reachableBy"))%><%
+                    <tr><td><%=intl._t("Reachable by")%></td><td><%=net.i2p.data.DataHelper.stripHTML(request.getParameter("reachableBy"))%></td></tr><%
                 } %>
-                </td></tr>
                 <tr><td><%=intl._t("Tunnel auto-start")%></td><td><%
                 if ("1".equals(request.getParameter("startOnLoad"))) { %>
                     Yes<%
@@ -475,6 +553,10 @@
                 } %>
                 </td></tr>
             </table>
+        </td>
+    </tr>
+    <tr>
+        <td class="infohelp">
             <p>
                 <%=intl._t("Alongside these basic settings, there are a number of advanced options for tunnel configuration.")%>
                 <%=intl._t("The wizard will set reasonably sensible default values for these, but you can view and/or edit these by clicking on the tunnel's name in the main I2PTunnel page.")%>
@@ -524,35 +606,33 @@ http://stats.i2p/cgi-bin/jump.cgi?a=" /><%
             <input type="hidden" name="totalHour" value="0" />
             <input type="hidden" name="totalDay" value="0" />
             <input type="hidden" name="maxStreams" value="0" />
-            <input type="hidden" name="cert" value="0" /><%
+            <input type="hidden" name="cert" value="0" />
+        </td>
+    </tr>
+            <%
               } /* tunnelIsClient */
             } /* curPage 7 */
 
                /* End page 7 */ %>
-        </div>
-
-        <div id="globalOperationsPanel" class="panel">
-            <div class="header"></div>
-            <div class="footer">
-                <div class="toolbox">
+    <tr>
+        <td class="buttons">
                     <a class="control" href="list"><%=intl._t("Cancel")%></a>
                     <% if (curPage != 1 && curPage != 7) {
-                    %><button id="controlPrevious" accesskey="P" class="control" type="submit" name="action" value="Previous page" title="Previous Page"><%=intl._t("Previous")%>(<span class="accessKey">P</span>)</button><%
+                    %><button id="controlPrevious" class="control" type="submit" name="action" value="Previous page" title="Previous Page"><%=intl._t("Previous")%></button><%
                     } %>
                     <% if (curPage == 7) {
-                    %><button id="controlSave" accesskey="S" class="control" type="submit" name="action" value="Save changes" title="Save Tunnel"><%=intl._t("Save Tunnel")%>(<span class="accessKey">S</span>)</button><%
+                    %><button id="controlSave" class="control" type="submit" name="action" value="Save changes" title="Save Tunnel"><%=intl._t("Save Tunnel")%></button><%
                     } else if (curPage == 6) {
-                    %><button id="controlFinish" accesskey="F" class="control" type="submit" name="action" value="Next page" title="Finish Wizard"><%=intl._t("Finish")%>(<span class="accessKey">F</span>)</button><%
+                    %><button id="controlFinish" class="control" type="submit" name="action" value="Next page" title="Finish Wizard"><%=intl._t("Finish")%></button><%
                     } else {
-                    %><button id="controlNext" accesskey="N" class="control" type="submit" name="action" value="Next page" title="Next Page"><%=intl._t("Next")%>(<span class="accessKey">N</span>)</button><%
+                    %><button id="controlNext" class="control" type="submit" name="action" value="Next page" title="Next Page"><%=intl._t("Next")%></button><%
                     } %>
-                </div>
-            </div>
+        </td>
+    </tr>
+</table>
         </div>
 
     </form>
 
-    <div id="pageFooter">
-    </div>
 </body>
 </html>
diff --git a/apps/imagegen/imagegen/webapp/src/main/java/net/i2p/imagegen/QRServlet.java b/apps/imagegen/imagegen/webapp/src/main/java/net/i2p/imagegen/QRServlet.java
index 272ac5a13d64b396bae90b6081ceb6babe0f5a0f..9727719071e65712d378cdb64d71d64afb4ba212 100644
--- a/apps/imagegen/imagegen/webapp/src/main/java/net/i2p/imagegen/QRServlet.java
+++ b/apps/imagegen/imagegen/webapp/src/main/java/net/i2p/imagegen/QRServlet.java
@@ -150,12 +150,13 @@ public class QRServlet extends HttpServlet {
 				if (text != null) {
 					BufferedImage bi = MatrixToImageWriter.toBufferedImage(matrix);
 					Graphics2D g = bi.createGraphics();
-					g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
-					g.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
-					g.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
-					g.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_NORMALIZE);
-					g.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
-					g.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
+					// anti-aliasing and hinting degrade text with 1bit input, so let's turn this off to improve quality  
+//					g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
+//					g.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
+//					g.setRenderingHint(RenderingHints.KEY_RENDERING, RenderingHints.VALUE_RENDER_QUALITY);
+//					g.setRenderingHint(RenderingHints.KEY_STROKE_CONTROL, RenderingHints.VALUE_STROKE_NORMALIZE);
+//					g.setRenderingHint(RenderingHints.KEY_ALPHA_INTERPOLATION, RenderingHints.VALUE_ALPHA_INTERPOLATION_QUALITY);
+//					g.setRenderingHint(RenderingHints.KEY_FRACTIONALMETRICS, RenderingHints.VALUE_FRACTIONALMETRICS_ON);
 					Font font = DEFAULT_LARGE_FONT;
 					g.setFont(font);
 					// doesn't work
diff --git a/apps/imagegen/imagegen/webapp/src/main/webapp/index.html b/apps/imagegen/imagegen/webapp/src/main/webapp/index.html
index 16cb9e359bb5dec5b69958c47396b64804f8c31d..b7baf9b44fd072dad30c4c2b01550f0d019b4e5d 100644
--- a/apps/imagegen/imagegen/webapp/src/main/webapp/index.html
+++ b/apps/imagegen/imagegen/webapp/src/main/webapp/index.html
@@ -3,31 +3,132 @@
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-    <title>Image Generator Webapp</title>
+    <title>I2P Imagegen</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <link rel="icon" href="/themes/console/classic/images/favicon.ico">
+    <link rel="stylesheet" href="/themes/imagegen/imagegen.css" type="text/css">
 </head>
 <body>
-<h2>Image Generator Webapp</h2>
-<p>This is the webapp that creates identification images.</p>
-
-<h2>Identicon Test</h2>
-<img src="id?c=-2044886870&amp;s=15" width=15 height=15>
-<img src="id?c=-2044886870&amp;s=21" width=21 height=21>
-<img src="id?c=-2044886870&amp;s=30" width=30 height=30>
-<img src="id?c=-2044886870&amp;s=48" width=48 height=48>
-<img src="id?c=-2044886870&amp;s=64" width=64 height=64>
-<img src="id?c=-2044886870&amp;s=128" width=128 height=128>
-
-<h2>QR Test</h2>
-<img src="qr?c=https%3a%2f%2fgeti2p.net%2f&amp;s=128&t=geti2p.net" width=128 height=128>
-<img src="qr?c=https%3a%2f%2fgeti2p.net%2f&amp;s=256&t=geti2p.net" width=256 height=256>
-
-<h2>Random Art Test</h2>
-<iframe src="ra?c=i2p-projekt.i2p&amp;m=html" width=180 height=200>
-<a href="ra?c=i2p-projekt.i2p&amp;m=html">HTML test</a>
-</iframe>
-<iframe src="ra?c=i2p-projekt.i2p&amp;m=text" width=180 height=200>
-<a href="ra?c=i2p-projekt.i2p&amp;m=text">UTF-8 text test</a>
-</iframe>
+
+<h1>I2P Identification Image Generator</h1>
+
+<p>
+This is the webapp that creates identification images. They can be found in the host list and
+<a href="http://127.0.0.1:7657/susidns/details?h=i2p-projekt.i2p">hostname details section</a>
+of the addressbook, in the <a href="http://127.0.0.1:7657/netdb?f=3">Sybils section</a> of
+the network database, and you can generate a QR code for your .i2p named website or hidden
+service in the edit section of the <a href="http://127.0.0.1:7657/i2ptunnelmgr">Tunnel Manager</a>.
+You can use the tools below to generate arbitrary identicons, QR codes and "random art" images.
+</p>
+
+<h2>Identicons</h2>
+
+<div id="identicon">
+
+<table cellspacing="10" align="center">
+<tr>
+<th colspan="4" class="title">Identicons for string: <i>planet.i2p</i></th>
+</tr>
+<tr>
+<th>16x16</th><th>32x32</th><th>64x64</th><th>256x256</th>
+</tr>
+<tr>
+<td><img src="id?c=planet.i2p&amp;s=16" width=16 height=16></td>
+<td><img src="id?c=planet.i2p&amp;s=32" width=32 height=32></td>
+<td><img src="id?c=planet.i2p&amp;s=64" width=64 height=64></td>
+<td rowspan="3"><img src="id?c=planet.i2p&amp;s=256" width=256 height=256></td>
+</tr>
+<tr><th>22x22</th><th>48x48</th><th>96x96</th></tr>
+<tr>
+<td><img src="id?c=planet.i2p&amp;s=22" width=22 height=22></td>
+<td><img src="id?c=planet.i2p&amp;s=48" width=48 height=48></td>
+<td><img src="id?c=planet.i2p&amp;s=96" width=96 height=96></td>
+</tr>
+</table>
+
+<form action="/imagegen/id" method="get" target="_blank">
+<div class="formtitle">Identicon Generator</div>
+<input type="text" name="c" required x-moz-errormessage="You need to provide some text for the image generation to work!" placeholder="text to encode" title="Enter text string for conversion">
+<select name="s" title="Select image output size">
+<option value="16">16 by 16 pixels</option>
+<option value="22">22 by 22 pixels</option>
+<option value="32">32 by 32 pixels</option>
+<option value="48">48 by 48 pixels</option>
+<option value="64">64 by 64 pixels</option>
+<option value="96">96 by 96 pixels</option>
+<option value="128">128 by 128 pixels</option>
+<option value="256">256 by 256 pixels</option>
+<option value="384">384 by 384 pixels</option>
+<option value="512">512 by 512 pixels</option>
+</select>
+<button>Create Identicon</button>
+</form>
+</div>
+
+<h2>QR Codes</h2>
+
+<div id="qr">
+
+<table cellspacing="10" align="center">
+<tr>
+<th colspan="3" class="title">QR Codes for string: <i>https://geti2p.net</i></th>
+</tr>
+<tr>
+<th>128x128</th><th>160x160</th><th>256x256</th>
+</tr>
+<tr>
+<td><img src="qr?c=https%3a%2f%2fgeti2p.net%2f&amp;s=128" width=128 height=128></td>
+<td><img src="qr?c=https%3a%2f%2fgeti2p.net%2f&amp;s=160&amp;t=geti2p.net" width=160 height=160></td>
+<td><img src="qr?c=https%3a%2f%2fgeti2p.net%2f&amp;s=256&amp;t=geti2p.net" width=256 height=256></td>
+</tr>
+</table>
+
+<form action="/imagegen/qr" method="get" target="_blank">
+<div class="formtitle">QR Code Generator</div>
+<input type="text" name="c" required x-moz-errormessage="You need to provide some text for the image generation to work!" placeholder="text to encode" title="Enter text string for conversion">
+<input type="text" name="t" placeholder="optional display text" title="Optional text to be displayed underneath the QR code">
+<select name="s" title="Select image output size">
+<option value="128">128 by 128 pixels</option>
+<option value="160">160 by 160 pixels</option>
+<option value="256">256 by 256 pixels</option>
+<option value="384">384 by 384 pixels</option>
+<option value="512">512 by 512 pixels</option>
+</select>
+<button>Create QR Code</button>
+</form>
+</div>
+
+<h2>Random Art</h2>
+
+<p>This technique renders an ASCII-Art representation of a digital fingerprint so the human brain can profit from its built-in pattern recognition ability. <span class="reference"><a href="http://people.eecs.berkeley.edu/~dawnsong/papers/randomart.pdf" target="_blank">"Hash Visualization: a New Technique to improve Real-World Security" by Perrig A. and Song D.</a></span></p>
+
+<div id="randomart">
+
+<table>
+<tr>
+<th colspan="2" class="title">Random Art for I2P address: <i>i2p-projekt.i2p</i></th>
+</tr>
+<tr>
+<th>HTML Test</th><th>UTF-8 Text Test</th>
+</tr>
+<tr>
+<td><iframe src="ra?c=i2p-projekt.i2p&amp;m=html" width=300 height=300><a href="ra?c=i2p-projekt.i2p&amp;m=html">HTML test</a></iframe></td>
+<td><iframe src="ra?c=i2p-projekt.i2p&amp;m=text" width=300 height=300><a href="ra?c=i2p-projekt.i2p&amp;m=text">UTF-8 text test</a></iframe></td>
+</tr>
+</table>
+
+<form action="/imagegen/ra" method="get" target="_blank">
+<div class="formtitle">Random Art Generator</div>
+<input type="text" name="c" required x-moz-errormessage="You need to provide an I2P address for the image generation to work!" placeholder="[URL].i2p to encode" title="Enter I2P address for conversion">
+<input hidden="hidden" name="m" value="html">
+<button>Create Random Art</button>
+</form>
+
+</div>
+
+<hr>
+
+<div id="nav"><a href="../">Return to I2P Console</a></div>
+
 </body>
 </html>
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/BanlistRenderer.java b/apps/routerconsole/java/src/net/i2p/router/web/BanlistRenderer.java
index d8319165db31c988a48a4228ea29464227dd61f2..a137aff572613c21ed986e6b092c542e7232a586 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/BanlistRenderer.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/BanlistRenderer.java
@@ -53,7 +53,7 @@ class BanlistRenderer {
             return;
         }
 
-        buf.append("<ul>");
+        buf.append("<ul id=\"banlist\">");
         
         for (Map.Entry<Hash, Banlist.Entry> e : entries.entrySet()) {
             Hash key = e.getKey();
@@ -81,8 +81,8 @@ class BanlistRenderer {
                     buf.append(_t(entry.cause));
             }
             if (!key.equals(Hash.FAKE_HASH)) {
-                buf.append(" (<a href=\"configpeer?peer=").append(key.toBase64())
-                   .append("#unsh\">").append(_t("unban now")).append("</a>)");
+                buf.append(" <a href=\"configpeer?peer=").append(key.toBase64())
+                   .append("#unsh\">[").append(_t("unban now")).append("]</a>");
             }
             buf.append("</li>\n");
         }
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ConfigClientsHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/ConfigClientsHelper.java
index 42a3f0eca124ae0eca989c8a91e2457a114194d7..8602ac31905316bf46b73f34c4d8e31cdea616be 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/ConfigClientsHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/ConfigClientsHelper.java
@@ -112,7 +112,7 @@ public class ConfigClientsHelper extends HelperBase {
     /** clients */
     public String getForm1() {
         StringBuilder buf = new StringBuilder(1024);
-        buf.append("<table>\n" +
+        buf.append("<table id=\"clientconfig\">\n" +
                    "<tr><th align=\"right\">").append(_t("Client")).append("</th><th>")
            .append(_t("Run at Startup?")).append("</th><th>")
            .append(_t("Control")).append("</th><th align=\"left\">")
@@ -198,7 +198,7 @@ public class ConfigClientsHelper extends HelperBase {
     /** webapps */
     public String getForm2() {
         StringBuilder buf = new StringBuilder(1024);
-        buf.append("<table>\n" +
+        buf.append("<table id=\"webappconfig\">\n" +
                    "<tr><th align=\"right\">").append(_t("WebApp")).append("</th><th>")
            .append(_t("Run at Startup?")).append("</th><th>")
            .append(_t("Control")).append("</th><th align=\"left\">")
@@ -227,7 +227,7 @@ public class ConfigClientsHelper extends HelperBase {
     /** plugins */
     public String getForm3() {
         StringBuilder buf = new StringBuilder(1024);
-        buf.append("<table>\n" +
+        buf.append("<table id=\"pluginconfig\">\n" +
                    "<tr><th align=\"right\">").append(_t("Plugin")).append("</th><th>")
            .append(_t("Run at Startup?")).append("</th><th>")
            .append(_t("Control")).append("</th><th align=\"left\">")
@@ -290,15 +290,17 @@ public class ConfigClientsHelper extends HelperBase {
                 }
                 s = stripHTML(appProps, "websiteURL");
                 if (s != null) {
-                    desc.append("<tr><td>")
-                        .append("<a href=\"").append(s).append("\">").append(_t("Website")).append("</a><td>&nbsp;");
+                    desc.append("<tr><td><b>")
+                        .append(_t("Website")).append("</b></td><td><a href=\"")
+                        .append(s).append("\" target=\"_blank\">").append(s).append("</a>");
                 }
                 String updateURL = stripHTML(appProps, "updateURL.su3");
                 if (updateURL == null)
                     updateURL = stripHTML(appProps, "updateURL");
                 if (updateURL != null) {
-                    desc.append("<tr><td>")
-                        .append("<a href=\"").append(updateURL).append("\">").append(_t("Update link")).append("</a><td>&nbsp;");
+                    desc.append("<tr><td><b>")
+                        .append(_t("Update link")).append("</b></td><td><a href=\"")
+                        .append(updateURL).append("\">").append(updateURL).append("</a>");
                 }
                 desc.append("</table>");
                 boolean isRunning = PluginStarter.isPluginRunning(app, _context);
@@ -325,7 +327,7 @@ public class ConfigClientsHelper extends HelperBase {
                             boolean showEditButton, boolean showUpdateButton, boolean showStopButton,
                             boolean showDeleteButton, boolean showStartButton) {
         String escapedName = DataHelper.escapeHTML(name);
-        buf.append("<tr><td class=\"mediumtags\" align=\"right\" width=\"25%\">");
+        buf.append("<tr><td align=\"right\">");
         if (urlify && enabled) {
             String link = "/";
             if (! RouterConsoleRunner.ROUTERCONSOLE.equals(name))
@@ -338,41 +340,40 @@ public class ConfigClientsHelper extends HelperBase {
             buf.append("\" >");
         } else {
             if (name.length() > 0)
-                buf.append(_t(escapedName));
+                buf.append("<label for=\"").append(index).append("\">").append(_t(escapedName)).append("</label>");
         }
-        buf.append("</td><td align=\"center\" width=\"10%\"><input type=\"checkbox\" class=\"optbox\" name=\"").append(index).append(".enabled\"");
+        buf.append("</td><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" id=\"").append(index).append("\" name=\"").append(index).append(".enabled\"");
         if (enabled) {
             buf.append(CHECKED);
             if (ro || preventDisable)
                 buf.append("disabled=\"disabled\" ");
         }
-        buf.append("></td><td align=\"center\" width=\"15%\">");
-        // The icons were way too much, so there's an X in each button class,
-        // remove if you wnat to put them back
+        buf.append("></td><td align=\"center\">");
+
         if (showStartButton && (!ro) && !edit) {
-            buf.append("<button type=\"submit\" class=\"Xaccept\" name=\"action\" value=\"Start ").append(index).append("\" >")
+            buf.append("<button type=\"submit\" title=\"").append(_t("Start")).append("\" class=\"control accept\" name=\"action\" value=\"Start ").append(index).append("\" >")
                .append(_t("Start")).append("<span class=hide> ").append(index).append("</span></button>");
         }
         if (showStopButton && (!edit))
-            buf.append("<button type=\"submit\" class=\"Xstop\" name=\"action\" value=\"Stop ").append(index).append("\" >")
+            buf.append("<button type=\"submit\" title=\"").append(_t("Stop")).append("\" class=\"control stop\" name=\"action\" value=\"Stop ").append(index).append("\" >")
                .append(_t("Stop")).append("<span class=hide> ").append(index).append("</span></button>");
         if (isClientChangeEnabled() && showEditButton && (!edit) && !ro)
-            buf.append("<button type=\"submit\" class=\"Xadd\" name=\"edit\" value=\"Edit ").append(index).append("\" >")
+            buf.append("<button type=\"submit\" title=\"").append(_t("Edit")).append("\" class=\"control add\" name=\"edit\" value=\"Edit ").append(index).append("\" >")
                .append(_t("Edit")).append("<span class=hide> ").append(index).append("</span></button>");
         if (showUpdateButton && (!edit) && !ro) {
-            buf.append("<button type=\"submit\" class=\"Xcheck\" name=\"action\" value=\"Check ").append(index).append("\" >")
+            buf.append("<button type=\"submit\" title=\"").append(_t("Check for updates")).append("\" class=\"control check\" name=\"action\" value=\"Check ").append(index).append("\" >")
                .append(_t("Check for updates")).append("<span class=hide> ").append(index).append("</span></button>");
-            buf.append("<button type=\"submit\" class=\"Xdownload\" name=\"action\" value=\"Update ").append(index).append("\" >")
+            buf.append("<button type=\"submit\" title=\"").append(_t("Update")).append("\" class=\"control download\" name=\"action\" value=\"Update ").append(index).append("\" >")
                 .append(_t("Update")).append("<span class=hide> ").append(index).append("</span></button>");
         }
         if (showDeleteButton && (!edit) && !ro) {
-            buf.append("<button type=\"submit\" class=\"Xdelete\" name=\"action\" value=\"Delete ").append(index)
+            buf.append("<button type=\"submit\" title=\"").append(_t("Delete")).append("\" class=\"control delete\" name=\"action\" value=\"Delete ").append(index)
                .append("\" onclick=\"if (!confirm('")
                .append(_t("Are you sure you want to delete {0}?", _t(escapedName)))
                .append("')) { return false; }\">")
                .append(_t("Delete")).append("<span class=hide> ").append(index).append("</span></button>");
         }
-        buf.append("</td><td align=\"left\" width=\"50%\">");
+        buf.append("</td><td align=\"left\">");
         if (edit && !ro) {
             buf.append("<input type=\"text\" size=\"80\" spellcheck=\"false\" name=\"nofilter_desc").append(index).append("\" value=\"");
             buf.append(escapedDesc);
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ConfigLoggingHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/ConfigLoggingHelper.java
index 1223f0820e33483de95a6dfb6dc92c39b573a233..26dbc53f448618b51386f739fb043408bb224c4f 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/ConfigLoggingHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/ConfigLoggingHelper.java
@@ -42,9 +42,9 @@ public class ConfigLoggingHelper extends HelperBase {
             buf.append(prefix).append('=').append(level).append('\n');
         }
         buf.append("</textarea><br>\n");
-        buf.append("<p style=\"margin: 0px 12px\"><i>").append(_t("Add additional logging statements above. Example: net.i2p.router.tunnel=WARN")).append("</i><br>");
-        buf.append("<i>").append(_t("Or put entries in the logger.config file. Example: logger.record.net.i2p.router.tunnel=WARN")).append("</i><br>");
-        buf.append("<i>").append(_t("Valid levels are DEBUG, INFO, WARN, ERROR, CRIT")).append("</i></p>\n");
+        buf.append("<p>").append(_t("Add additional logging statements above. Example: net.i2p.router.tunnel=WARN")).append("<br>");
+        buf.append(_t("Or put entries in the logger.config file. Example: logger.record.net.i2p.router.tunnel=WARN")).append("<br>");
+        buf.append(_t("Valid levels are DEBUG, INFO, WARN, ERROR, CRIT")).append("</p>\n");
 
       /****
         // this is too big and ugly
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ConfigNavHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/ConfigNavHelper.java
index 758b990ce0ad78365b0bfef408750db320d0e24b..769c75f36a1651fa50e6ce839d9a29d9efa2240a 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/ConfigNavHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/ConfigNavHelper.java
@@ -57,9 +57,7 @@ public class ConfigNavHelper extends HelperBase {
      */
     public void renderNavBar(String requestURI, boolean graphical) throws IOException {
         StringBuilder buf = new StringBuilder(1024);
-        // TODO fix up the non-light themes
-        String theme = _context.getProperty(CSSHelper.PROP_THEME_NAME);
-        boolean span = graphical && (theme == null || theme.equals(CSSHelper.DEFAULT_THEME));
+        boolean span = graphical;
         if (!span)
             buf.append("<center>");
         List<Tab> tabs = new ArrayList<Tab>(pages.length);
@@ -84,9 +82,9 @@ public class ConfigNavHelper extends HelperBase {
                 buf.append("<a href=\"").append(page).append("\">").append(tabs.get(i).title).append("</a>");
             }
             if (span)
-                buf.append(" </span>\n");
+                buf.append("</span>\n");
             else if (i != pages.length - 1)
-                buf.append(" |\n");
+                buf.append("&nbsp;&nbsp;\n");
         }
         if (!span)
             buf.append("</center>");
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ConfigNetHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/ConfigNetHelper.java
index 8222a057230d26b65f5e47368df07aeba4d5bca3..7127584c437ce033639e20c1948c6ed13ed2d073 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/ConfigNetHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/ConfigNetHelper.java
@@ -215,25 +215,21 @@ public class ConfigNetHelper extends HelperBase {
             }
         }
         StringBuilder buf = new StringBuilder(128);
-        buf.append("<div class=\"indent\">");
         for (String addr : addrs) {
-            buf.append("\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
-                       "<input type=\"checkbox\" class=\"optbox\" value=\"foo\" name=\"addr_");
+            buf.append("<input type=\"checkbox\" class=\"optbox\" value=\"foo\" name=\"addr_");
             buf.append(addr);
             buf.append('"');
             if (addrs.size() == 1 || configs.contains(addr))
                 buf.append(CHECKED);
             buf.append("> ");
             buf.append(addr);
-            buf.append("<br>");
+            buf.append("<br>\n");
         }
-        buf.append("\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
         if (!addrs.isEmpty()) {
             buf.append(_t("Add host name or IP"))
                .append(": ");
         }
-        buf.append("<input name=\"udpHost1\" type=\"text\" size=\"16\" >" +
-                   "</div>");
+        buf.append("<input name=\"udpHost1\" type=\"text\" size=\"16\" >");
         return buf.toString();
     }
 
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ConfigTunnelsHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/ConfigTunnelsHelper.java
index 6e93602f4a441f280b6e6d73f9b9e4ad6a239448..2a0e6b0547cd3c264967df3aabc87d0f3c8dbb28 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/ConfigTunnelsHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/ConfigTunnelsHelper.java
@@ -26,7 +26,7 @@ public class ConfigTunnelsHelper extends HelperBase {
             cur++;
         }
 
-        buf.append("<table>\n");
+        buf.append("<table id=\"tunnelconfig\">\n");
         TunnelPoolSettings exploratoryIn = _context.tunnelManager().getInboundSettings();
         TunnelPoolSettings exploratoryOut = _context.tunnelManager().getOutboundSettings();
         
@@ -69,7 +69,7 @@ public class ConfigTunnelsHelper extends HelperBase {
 
         boolean advanced = isAdvanced();
 
-        buf.append("<tr><th colspan=\"3\"><a name=\"").append(prefix).append("\">");
+        buf.append("<tr><th colspan=\"3\" class=\"th_title\"><a name=\"").append(prefix).append("\">");
         buf.append(name).append("</a></th></tr>\n");
         if (in.getLength() <= 0 ||
             in.getLength() + in.getLengthVariance() <= 0 ||
@@ -94,7 +94,7 @@ public class ConfigTunnelsHelper extends HelperBase {
         
         // tunnel depth
         int maxLength = advanced ? MAX_ADVANCED_LENGTH : MAX_LENGTH;
-        buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Length") + ":</td>\n");
+        buf.append("<tr><td align=\"right\"><b>" + _t("Length") + ":</b></td>\n");
         buf.append("<td align=\"center\"><select name=\"").append(index).append(".depthInbound\">\n");
         int now = in.getLength();
         renderOptions(buf, 0, maxLength, now, "", HOP);
@@ -111,7 +111,7 @@ public class ConfigTunnelsHelper extends HelperBase {
         buf.append("</tr>\n");
 
         // tunnel depth variance
-        buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Randomization") + ":</td>\n");
+        buf.append("<tr><td align=\"right\"><b>" + _t("Randomization") + ":</b></td>\n");
         buf.append("<td align=\"center\"><select name=\"").append(index).append(".varianceInbound\">\n");
         now = in.getLengthVariance();
         renderOptions(buf, 0, 0, now, "", HOP);
@@ -136,7 +136,7 @@ public class ConfigTunnelsHelper extends HelperBase {
 
         // tunnel quantity
         int maxQuantity = advanced ? MAX_ADVANCED_QUANTITY : MAX_QUANTITY;
-        buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Quantity") + ":</td>\n");
+        buf.append("<tr><td align=\"right\"><b>" + _t("Quantity") + ":</b></td>\n");
         buf.append("<td align=\"center\"><select name=\"").append(index).append(".quantityInbound\">\n");
         now = in.getQuantity();
         renderOptions(buf, 1, maxQuantity, now, "", TUNNEL);
@@ -154,7 +154,7 @@ public class ConfigTunnelsHelper extends HelperBase {
 
         // tunnel backup quantity
         int maxBQuantity = advanced ? MAX_ADVANCED_BACKUP_QUANTITY : MAX_BACKUP_QUANTITY;
-        buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Backup quantity") + ":</td>\n");
+        buf.append("<tr><td align=\"right\"><b>" + _t("Backup quantity") + ":</b></td>\n");
         buf.append("<td align=\"center\"><select name=\"").append(index).append(".backupInbound\">\n");
         now = in.getBackupQuantity();
         renderOptions(buf, 0, maxBQuantity, now, "", TUNNEL);
@@ -176,7 +176,7 @@ public class ConfigTunnelsHelper extends HelperBase {
         // And let's not display them at all unless they have contents, which should be rare.
         Properties props = in.getUnknownOptions();
         if (!props.isEmpty()) {
-            buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Inbound options") + ":</td>\n" +
+            buf.append("<tr><td align=\"right\"><b>" + _t("Inbound options") + ":</b></td>\n" +
                        "<td colspan=\"2\" align=\"center\"><input name=\"").append(index);
             buf.append(".inboundOptions\" type=\"text\" size=\"32\" disabled=\"disabled\" " +
                        "value=\"");
@@ -188,7 +188,7 @@ public class ConfigTunnelsHelper extends HelperBase {
         }
         props = out.getUnknownOptions();
         if (!props.isEmpty()) {
-            buf.append("<tr><td align=\"right\" class=\"mediumtags\">" + _t("Outbound options") + ":</td>\n" +
+            buf.append("<tr><td align=\"right\"><b>" + _t("Outbound options") + ":</b></td>\n" +
                        "<td colspan=\"2\" align=\"center\"><input name=\"").append(index);
             buf.append(".outboundOptions\" type=\"text\" size=\"32\" disabled=\"disabled\" " +
                        "value=\"");
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java
index b4af734d64fceb79ee7f4e6f7f42575d88123676..23bc8c26da7cadec80651d302db24658d1525855 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/ConfigUIHelper.java
@@ -9,33 +9,41 @@ public class ConfigUIHelper extends HelperBase {
 
     public String getSettings() {
         StringBuilder buf = new StringBuilder(512);
+        buf.append("<div id=\"availablethemes\">");
         String current = _context.getProperty(CSSHelper.PROP_THEME_NAME, CSSHelper.DEFAULT_THEME);
         Set<String> themes = themeSet();
         for (String theme : themes) {
-            buf.append("<input type=\"radio\" class=\"optbox\" name=\"theme\" ");
+            buf.append("<div class=\"themechoice\">")
+               .append("<input type=\"radio\" class=\"optbox\" name=\"theme\" ");
             if (theme.equals(current))
                 buf.append(CHECKED);
-            buf.append("value=\"").append(theme).append("\">").append(_t(theme)).append("<br>\n");
+            buf.append("value=\"").append(theme).append("\">")
+               .append("<object height=\"48\" width=\"48\" data=\"/themes/console/").append(theme).append("/images/thumbnail.png\">")
+               .append("<img height=\"48\" width=\"48\" alt=\"\" src=\"/themes/console/images/thumbnail.png\">")
+               .append("</object><br>")
+               .append("<div class=\"themelabel\">").append(_t(theme)).append("</div>")
+               .append("</div>\n");
         }
         boolean universalTheming = _context.getBooleanProperty(CSSHelper.PROP_UNIVERSAL_THEMING);
-        buf.append("<input type=\"checkbox\" name=\"universalTheming\" ");
+        buf.append("</div><div id=\"themeoptions\">");
+        buf.append("<label><input type=\"checkbox\" name=\"universalTheming\" ");
         if (universalTheming)
             buf.append(CHECKED);
         buf.append("value=\"1\">")
            .append(_t("Set theme universally across all apps"))
-           .append("<br>\n");
+           .append("</label><br>\n");
         return buf.toString();
     }
 
     public String getForceMobileConsole() {
         StringBuilder buf = new StringBuilder(256);
         boolean forceMobileConsole = _context.getBooleanProperty(CSSHelper.PROP_FORCE_MOBILE_CONSOLE);
-        buf.append("<input type=\"checkbox\" name=\"forceMobileConsole\" ");
+        buf.append("<label><input type=\"checkbox\" name=\"forceMobileConsole\" ");
         if (forceMobileConsole)
             buf.append(CHECKED);
         buf.append("value=\"1\">")
            .append(_t("Force the mobile console to be used"))
-           .append("<br>\n");
+           .append("</label></div>\n");
         return buf.toString();
     }
 
@@ -71,6 +79,7 @@ public class ConfigUIHelper extends HelperBase {
      *  Any language-specific flag added to the icon set must be
      *  added to the top-level build.xml for the updater.
      *  As of 0.9.12, ISO 639-2 three-letter codes are supported also.
+     *  Note: To avoid truncation, ensure language name is no longer than 17 chars.
      */
     private static final String langs[][] = {
         //
@@ -111,7 +120,7 @@ public class ConfigUIHelper extends HelperBase {
         { "vi", "vn", _x("Vietnamese"), null },
         { "zh", "cn", _x("Chinese"), null },
         { "zh_TW", "tw", _x("Chinese"), "Taiwan" },
-        { "xx", "a1", "Debug: Find untagged strings", null },
+        { "xx", "a1", "Untagged strings", null },
     };
 
 
@@ -150,11 +159,12 @@ public class ConfigUIHelper extends HelperBase {
             if (lang.equals("xx") && !isAdvanced())
                 continue;
             // we use "lang" so it is set automagically in CSSHelper
-            buf.append("<input type=\"radio\" class=\"optbox\" name=\"lang\" ");
+            buf.append("<div class=\"langselect\"><input type=\"radio\" class=\"optbox\" name=\"lang\" ");
             if (lang.equals(current))
                 buf.append(CHECKED);
             buf.append("value=\"").append(lang).append("\">")
-               .append("<img height=\"11\" width=\"16\" alt=\"\" src=\"/flags.jsp?c=").append(langs[i][1]).append("\"> ");
+               .append("<img height=\"11\" width=\"16\" alt=\"\" src=\"/flags.jsp?c=").append(langs[i][1]).append("\">")
+               .append("<div class=\"ui_lang\">");
             int under = lang.indexOf('_');
             String slang = (under > 0) ? lang.substring(0, under) : lang;
             buf.append(Messages.getDisplayLanguage(slang, langs[i][2], _context));
@@ -164,7 +174,7 @@ public class ConfigUIHelper extends HelperBase {
                    .append(Messages.getString(name, _context, Messages.COUNTRY_BUNDLE_NAME))
                    .append(')');
             }
-            buf.append("<br>\n");
+            buf.append("</div></div>\n");
         }
         return buf.toString();
     }
@@ -174,32 +184,38 @@ public class ConfigUIHelper extends HelperBase {
         StringBuilder buf = new StringBuilder(512);
         ConsolePasswordManager mgr = new ConsolePasswordManager(_context);
         Map<String, String> userpw = mgr.getMD5(RouterConsoleRunner.PROP_CONSOLE_PW);
-        buf.append("<table>");
+        buf.append("<table id=\"consolepass\">");
         if (userpw.isEmpty()) {
             buf.append("<tr><td colspan=\"3\">");
             buf.append(_t("Add a user and password to enable."));
             buf.append("</td></tr>");
         } else {
-            buf.append("<tr><th>")
+            buf.append("<tr><th title=\"")
+               .append(_t("Mark for deletion"))
+               .append("\">")
                .append(_t("Remove"))
                .append("</th><th>")
-               .append(_t("User Name"))
+               .append(_t("Username"))
                .append("</th><th>&nbsp;</th></tr>\n");
             for (String name : userpw.keySet()) {
-                buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" name=\"delete_")
+                buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" id=\"")
                    .append(name)
-                   .append("\"></td><td colspan=\"2\">")
+                   .append("\" name=\"delete_")
                    .append(name)
-                   .append("</td></tr>\n");
+                   .append("\"></td><td colspan=\"2\"><label for=\"")
+                   .append(name)
+                   .append("\">")
+                   .append(name)
+                   .append("</label></td></tr>\n");
             }
         }
-        buf.append("<tr><td align=\"center\"><b>")
-           .append(_t("Add")).append(":</b>" +
-                   "</td><td align=\"left\"><input type=\"text\" name=\"name\">" +
-                   "</td><td align=\"left\"><b>");
-        buf.append(_t("Password")).append(":</b> " +
-                   "<input type=\"password\" size=\"40\" name=\"nofilter_pw\"></td></tr>" +
-                   "</table>\n");
+        buf.append("<tr><td id=\"pw_adduser\" align=\"left\" colspan=\"3\">")
+           .append("<b>").append(_t("Username")).append(":</b> ")
+           .append("<input type=\"text\" name=\"name\">")
+           .append("<b>").append(_t("Password")).append(":</b> ")
+           .append("<input type=\"password\" size=\"40\" name=\"nofilter_pw\">")
+           .append("</td></tr>")
+           .append("</table>\n");
         return buf.toString();
     }
 }
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ConfigUpdateHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/ConfigUpdateHelper.java
index 3b3869025b58e7183baff781dabd24cbbaf10ed2..e101659ff1ac5065b3136835713ccd3f89ac2afe 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/ConfigUpdateHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/ConfigUpdateHelper.java
@@ -76,27 +76,27 @@ public class ConfigUpdateHelper extends HelperBase {
     
     public String getUpdateThroughProxy() {
         if (_context.getProperty(ConfigUpdateHandler.PROP_SHOULD_PROXY, ConfigUpdateHandler.DEFAULT_SHOULD_PROXY))
-            return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateThroughProxy\" checked=\"checked\" >";
+            return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateThroughProxy\" id=\"updateThroughProxy\" checked=\"checked\" >";
         else
-            return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateThroughProxy\" >";
+            return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateThroughProxy\" id=\"updateThroughProxy\" >";
     }
     
     /** @since 0.9.9 */
     public String getNewsThroughProxy() {
         if (_context.getProperty(ConfigUpdateHandler.PROP_SHOULD_PROXY_NEWS, ConfigUpdateHandler.DEFAULT_SHOULD_PROXY_NEWS))
-            return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"newsThroughProxy\" checked=\"checked\" >";
+            return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"newsThroughProxy\" id=\"newsThroughProxy\" checked=\"checked\" >";
         else
-            return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"newsThroughProxy\" >";
+            return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"newsThroughProxy\" id=\"newsThroughProxy\" >";
     }
     
     public String getUpdateUnsigned() {
-        return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateUnsigned\" " +
+        return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateUnsigned\" id=\"updateUnsigned\" " +
                getChecked(ConfigUpdateHandler.PROP_UPDATE_UNSIGNED) + '>';
     }
     
     /** @since 0.9.20 */
     public String getUpdateDevSU3() {
-        return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateDevSU3\" " +
+        return "<input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"updateDevSU3\" id=\"updateDevSU3\" " +
                getChecked(ConfigUpdateHandler.PROP_UPDATE_DEV_SU3) + '>';
     }
     
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/EventLogHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/EventLogHelper.java
index 9dd7892f2801fadcb57b7b1e4ecba18d8c4d93f2..280b2dbf6e9e20fb4bdd5df22666505dba99e32d 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/EventLogHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/EventLogHelper.java
@@ -99,16 +99,16 @@ public class EventLogHelper extends FormHandler {
         // So just use the "shared/console nonce".
         String nonce = CSSHelper.getNonce();
         try {
-            _out.write("<br><h3>" + _t("Display Events") + "</h3>");
+            _out.write("<br><h3 id=\"displayevents\">" + _t("Display Events") + "</h3>");
             _out.write("<form action=\"events\" method=\"POST\">\n" +
                        "<input type=\"hidden\" name=\"action\" value=\"save\">\n" +
-                       "<input type=\"hidden\" name=\"nonce\" value=\"" + nonce + "\" >\n");
-            _out.write(_t("Events since") + ": <select name=\"from\">");
+                       "<input type=\"hidden\" name=\"nonce\" value=\"" + nonce + "\" >\n<b>");
+            _out.write(_t("Events since") + ":</b> <select name=\"from\">");
             for (int i = 0; i < _times.length; i++) {
                 writeOption(_times[i]);
             }
-            _out.write("</select><br>");
-            _out.write(_t("Event type") + ": <select name=\"type\">");
+            _out.write("</select>&nbsp;<b>");
+            _out.write(_t("Event type") + ":</b> <select name=\"type\">");
             // sorted by translated display string
             Map<String, String> events = new TreeMap<String, String>(Collator.getInstance());
             for (int i = 0; i < _events.length; i += 2) {
@@ -119,7 +119,7 @@ public class EventLogHelper extends FormHandler {
                 writeOption(e.getKey(), e.getValue());
             }
             _out.write("</select>" +
-                       "<hr><div class=\"formaction\"><input type=\"submit\" class=\"accept\" value=\"" + _t("Filter events") + "\"></div></form>");
+                       "&nbsp;<input type=\"submit\" class=\"accept\" value=\"" + _t("Filter events") + "\"></form>");
         } catch (IOException ioe) {
             ioe.printStackTrace();
         }
@@ -175,7 +175,7 @@ public class EventLogHelper extends FormHandler {
             return _t("No \"{0}\" events found in previous {1}", xev, DataHelper.formatDuration2(_age));
         }
         StringBuilder buf = new StringBuilder(2048);
-        buf.append("<table><tr><th>");
+        buf.append("<table id=\"eventlog\"><tr><th>");
         buf.append(_t("Time"));
         buf.append("</th><th>");
         if (isAll) {
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/FileDumpHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/FileDumpHelper.java
index 417305c018e0547609f524eb4e94aced881710e9..be7ffc3c7328c772d267df514b1dd979569117c3 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/FileDumpHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/FileDumpHelper.java
@@ -29,7 +29,7 @@ public class FileDumpHelper extends HelperBase {
     
     public String getFileSummary() {
         StringBuilder buf = new StringBuilder(16*1024);
-        buf.append("<table><tr><th>File</th><th>Size</th><th>Date</th><th>SHA 256</th><th>Revision</th>" +
+        buf.append("<table id=\"jardump\"><tr><th>File</th><th>Size</th><th>Date</th><th>SHA 256</th><th>Revision</th>" +
                    "<th>JDK</th><th>Built</th><th>By</th><th>Mods</th></tr>");
 
         // jars added in wrapper.config
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/GraphHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/GraphHelper.java
index 169a795f362902be99c205497f5da0a0bef3e36b..3320b8c69f08adfca6fef38f3e43d30a5dbbc46f 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/GraphHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/GraphHelper.java
@@ -32,7 +32,7 @@ public class GraphHelper extends FormHandler {
     private static final String PROP_REFRESH = "routerconsole.graphRefresh";
     private static final String PROP_PERIODS = "routerconsole.graphPeriods";
     private static final String PROP_EVENTS = "routerconsole.graphEvents";
-    public static final int DEFAULT_X = 250;
+    public static final int DEFAULT_X = 400;
     public static final int DEFAULT_Y = 100;
     private static final int DEFAULT_REFRESH = 5*60;
     private static final int DEFAULT_PERIODS = 60;
@@ -232,12 +232,13 @@ public class GraphHelper extends FormHandler {
                 name = r.getRateStat().getName();
                 displayName = name;
             }
-            _out.write("<h3>");
+            _out.write("<h3 id=\"graphinfo\">");
             _out.write(_t("{0} for {1}", displayName, DataHelper.formatDuration2(_periodCount * period)));
             if (_end > 0)
                 _out.write(' ' + _t("ending {0} ago", DataHelper.formatDuration2(_end * period)));
 
-            _out.write("</h3><img class=\"statimage\" border=\"0\""
+            _out.write("&nbsp;<a href=\"graphs\">[" + _t("Return to main graphs page") + "]</a></h3>\n"
+                       + "<div class=\"graphspanel\"><img class=\"statimage\" border=\"0\""
                        + " src=\"viewstat.jsp?stat="
                        + name
                        + "&amp;showEvents=" + _showEvents
@@ -246,7 +247,7 @@ public class GraphHelper extends FormHandler {
                        + "&amp;end=" + _end 
                        + "&amp;width=" + _width
                        + "&amp;height=" + _height
-                       + "\"><p>\n");
+                       + "\"></div><p id=\"graphopts\">\n");
 
             if (_width < MAX_X && _height < MAX_Y) {
                 _out.write(link(_stat, _showEvents, _periodCount, _end, _width * 3 / 2, _height * 3 / 2));
@@ -343,7 +344,7 @@ public class GraphHelper extends FormHandler {
                + "\">";
     }
 
-    private static final int[] times = { 60, 2*60, 5*60, 10*60, 30*60, 60*60, -1 };
+    private static final int[] times = { 15, 30, 60, 2*60, 5*60, 10*60, 30*60, 60*60, -1 };
 
     public String getForm() { 
         if (StatSummarizer.isDisabled())
@@ -353,17 +354,18 @@ public class GraphHelper extends FormHandler {
         // So just use the "shared/console nonce".
         String nonce = CSSHelper.getNonce();
         try {
-            _out.write("<br><h3>" + _t("Configure Graph Display") + " [<a href=\"configstats\">" + _t("Select Stats") + "</a>]</h3>");
+            _out.write("<br><h3 id=\"graphdisplay\">" + _t("Configure Graph Display") + " <a href=\"configstats\">[" + _t("Select Stats") + "]</a></h3>");
             _out.write("<form action=\"graphs\" method=\"POST\">\n" +
-                       "<input type=\"hidden\" name=\"action\" value=\"save\">\n" +
+                       "<table><tr><td><input type=\"hidden\" name=\"action\" value=\"save\">\n" +
                        "<input type=\"hidden\" name=\"nonce\" value=\"" + nonce + "\" >\n");
-            _out.write(_t("Periods") + ": <input size=\"5\" style=\"text-align: right;\" type=\"text\" name=\"periodCount\" value=\"" + _periodCount + "\"><br>\n");
-            _out.write(_t("Plot averages") + ": <input type=\"radio\" class=\"optbox\" name=\"showEvents\" value=\"false\" " + (_showEvents ? "" : HelperBase.CHECKED) + "> ");
-            _out.write(_t("or")+ " " +_t("plot events") + ": <input type=\"radio\" class=\"optbox\" name=\"showEvents\" value=\"true\" "+ (_showEvents ? HelperBase.CHECKED : "") + "><br>\n");
-            _out.write(_t("Image sizes") + ": " + _t("width") + ": <input size=\"4\" style=\"text-align: right;\" type=\"text\" name=\"width\" value=\"" + _width 
-                       + "\"> " + _t("pixels") + ", " + _t("height") + ": <input size=\"4\" style=\"text-align: right;\" type=\"text\" name=\"height\" value=\"" + _height  
-                       + "\"> " + _t("pixels") + "<br>\n");
-            _out.write(_t("Refresh delay") + ": <select name=\"refreshDelay\">");
+            _out.write(_t("Display period") + ":</td><td colspan=\"2\"><input size=\"5\" style=\"text-align: right;\" type=\"text\" name=\"periodCount\" value=\"" + _periodCount + "\">" + _t("minutes") + "</td></tr><tr><td>\n");
+            _out.write(_t("Plot type") + ":</td><td colspan=\"2\">");
+            _out.write("<label><input type=\"radio\" class=\"optbox\" name=\"showEvents\" value=\"false\" " + (_showEvents ? "" : HelperBase.CHECKED) + ">" + _t("Averages") + "</label>&nbsp;&nbsp;&nbsp;");
+            _out.write ("<label><input type=\"radio\" class=\"optbox\" name=\"showEvents\" value=\"true\" "+ (_showEvents ? HelperBase.CHECKED : "") + ">" + _t("Events") + "</label></td></tr><tr><td>\n");
+            _out.write(_t("Graph size") + ":</td><td><input size=\"4\" style=\"text-align: right;\" type=\"text\" name=\"width\" value=\"" + _width 
+                       + "\">" + _t("pixels wide") + "&nbsp;&nbsp;&nbsp;<input size=\"4\" style=\"text-align: right;\" type=\"text\" name=\"height\" value=\"" + _height  
+                       + "\">" + _t("pixels high") + "</td><td class=\"infohelp\">" + _t("Note: Dimensions are for graph only (excludes title, labels and legend).") + "</td></tr><tr><td>\n");
+            _out.write(_t("Refresh delay") + ":</td><td colspan=\"2\"><select name=\"refreshDelay\">");
             for (int i = 0; i < times.length; i++) {
                 _out.write("<option value=\"");
                 _out.write(Integer.toString(times[i]));
@@ -377,14 +379,13 @@ public class GraphHelper extends FormHandler {
                     _out.write(_t("Never"));
                 _out.write("</option>\n");
             }
-            _out.write("</select><br>\n" +
-                       _t("Store graph data on disk?") +
-                       " <input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"persistent\"");
+            _out.write("</select></td></tr><tr><td>\n" + _t("Persistence") +
+                       ":</td><td colspan=\"2\"><label><input type=\"checkbox\" class=\"optbox\" value=\"true\" name=\"persistent\"");
             boolean persistent = _context.getBooleanPropertyDefaultTrue(SummaryListener.PROP_PERSISTENT);
             if (persistent)
                 _out.write(HelperBase.CHECKED);
-            _out.write(">" +
-                       "<hr><div class=\"formaction\"><input type=\"submit\" class=\"accept\" value=\"" + _t("Save settings and redraw graphs") + "\"></div></form>");
+            _out.write(">" + _t("Store graph data on disk") + "</label></td></tr></table>" +
+                       "<hr><div class=\"formaction\" id=\"graphing\"><input type=\"submit\" class=\"accept\" value=\"" + _t("Save settings and redraw graphs") + "\"></div></form>");
         } catch (IOException ioe) {
             ioe.printStackTrace();
         }
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/HomeHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/HomeHelper.java
index 1a61bac550ef72cbc569af183b6c10ea8f06ccbb..9a1aae4a93461eca633e1a2f3d476cb8954f928d 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/HomeHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/HomeHelper.java
@@ -28,49 +28,50 @@ public class HomeHelper extends HelperBase {
     // No commas allowed in text strings!
     static final String DEFAULT_SERVICES =
         _x("Addressbook") + S + _x("Manage your I2P hosts file here (I2P domain name resolution)") + S + "/dns" + S + I + "book_addresses.png" + S +
-        _x("Configure Bandwidth") + S + _x("I2P Bandwidth Configuration") + S + "/config" + S + I + "action_log.png" + S +
-        _x("Configure Language") + S + _x("Console Language Selection") + S + "/configui" + S + I + "wrench_orange.png" + S +
+        _x("Configure Bandwidth") + S + _x("I2P Bandwidth Configuration") + S + "/config" + S + I + "info/bandwidth.png" + S +
+        _x("Configure UI") + S + _x("Select console theme & language & set optional console password") + S + "/configui" + S + I + "info/ui.png" + S +
         _x("Customize Home Page") + S + _x("I2P Home Page Configuration") + S + "/confighome" + S + I + "home_page.png" + S +
         _x("Email") + S + _x("Anonymous webmail client") + S + "/susimail/susimail" + S + I + "email.png" + S +
         _x("Help") + S + _x("I2P Router Help") + S + "/help" + S + I + "support.png" + S +
-        _x("Router Console") + S + _x("I2P Router Console") + S + "/console" + S + I + "toolbox.png" + S +
+        _x("Manage Plugins") + S + _x("Install and configure I2P plugins") + S + "/configplugins" + S + I + "plugin.png" + S +
+        _x("Router Console") + S + _x("I2P Router Console") + S + "/console" + S + I + "info/console.png" + S +
         _x("Torrents") + S + _x("Built-in anonymous BitTorrent Client") + S + "/i2psnark/" + S + I + "magnet.png" + S +
-        _x("Website") + S + _x("Local web server") + S + "http://127.0.0.1:7658/" + S + I + "server_32x32.png" + S +
+        _x("Web Server") + S + _x("Local web server for hosting your own content on I2P") + S + "http://127.0.0.1:7658/" + S + I + "server_32x32.png" + S +
         "";
 
     // No commas allowed in text strings!
     static final String DEFAULT_FAVORITES =
         "anoncoin.i2p" + S + _x("The Anoncoin project") + S + "http://anoncoin.i2p/" + S + I + "anoncoin_32.png" + S +
-        _x("Bug Reports") + S + _x("Bug tracker") + S + "http://trac.i2p2.i2p/report/1" + S + I + "bug.png" + S +
+        _x("I2P Bug Reports") + S + _x("Bug tracker") + S + "http://trac.i2p2.i2p/report/1" + S + I + "bug.png" + S +
         //"colombo-bt.i2p" + S + _x("The Italian Bittorrent Resource") + S + "http://colombo-bt.i2p/" + S + I + "colomboicon.png" + S +
         _x("Dev Forum") + S + _x("Development forum") + S + "http://zzz.i2p/" + S + I + "group_gear.png" + S +
         _x("diftracker") + S + _x("Bittorrent tracker") + S + "http://diftracker.i2p/" + S + I + "magnet.png" + S +
         "echelon.i2p" + S + _x("I2P Applications") + S + "http://echelon.i2p/" + S + I + "box_open.png" + S +
         "exchanged.i2p" + S + _x("Anonymous cryptocurrency exchange") + S + "http://exchanged.i2p/" + S + I + "exchanged.png" + S +
-        _x("FAQ") + S + _x("Frequently Asked Questions") + S + "http://i2p-projekt.i2p/faq" + S + I + "question.png" + S +
-        _x("Forum") + S + _x("Community forum") + S + "http://forum.i2p/" + S + I + "group.png" + S +
-        _x("Anonymous Git Hosting") + S + _x("A public anonymous Git hosting site - supports pulling via Git and HTTP and pushing via SSH") + S + "http://git.repo.i2p/" + S + I + "git-logo.png" + S +
-        //"hiddengate.i2p" + S + _x("HiddenGate") + S + "http://hiddengate.i2p/" + S + I + "hglogo32.png" + S +
+        _x("I2P FAQ") + S + _x("Frequently Asked Questions") + S + "http://i2p-projekt.i2p/faq" + S + I + "question.png" + S +
+        _x("I2P Forum") + S + _x("Community forum") + S + "http://forum.i2p/" + S + I + "group.png" + S +
+        "git.repo.i2p" + S + _x("A public anonymous Git hosting site - supports pulling via Git and HTTP and pushing via SSH") + S + "http://git.repo.i2p/" + S + I + "git-logo.png" + S +
+        //"hiddengate [ru]" + S + _x("Russian I2P-related wiki") + S + "http://hiddengate.i2p/" + S + I + "hglogo32.png" + S +
         _x("I2P Wiki") + S + _x("Anonymous wiki - share the knowledge") + S + "http://i2pwiki.i2p/" + S + I + "i2pwiki_logo.png" + S +
         //"Ident " + _x("Microblog") + S + _x("Your premier microblogging service on I2P") + S + "http://id3nt.i2p/" + S + I + "ident_icon_blue.png" + S +
         //_x("Javadocs") + S + _x("Technical documentation") + S + "http://i2p-javadocs.i2p/" + S + I + "education.png" + S +
         //"jisko.i2p" + S + _x("Simple and fast microblogging website") + S + "http://jisko.i2p/" + S + I + "jisko_console_icon.png" + S +
         //_x("Key Server") + S + _x("OpenPGP Keyserver") + S + "http://keys.i2p/" + S + I + "education.png" + S +
         //"killyourtv.i2p" + S + _x("Debian and Tahoe-LAFS repositories") + S + "http://killyourtv.i2p/" + S + I + "television_delete.png" + S +
-        _x("Free Web Hosting") + S + _x("Free eepsite hosting with PHP and MySQL") + S + "http://open4you.i2p/" + S + I + "open4you-logo.png" + S +
-        _x("Pastebin") + S + _x("I2P Pastebin") + S + "http://zerobin.i2p/" + S + I + "paste_plain.png" + S +
+        _x("Open4You") + S + _x("Free eepsite hosting with PHP and MySQL") + S + "http://open4you.i2p/" + S + I + "open4you-logo.png" + S +
+        _x("Pastebin") + S + _x("Encrypted I2P Pastebin") + S + "http://zerobin.i2p/" + S + I + "paste_plain.png" + S +
         _x("Planet I2P") + S + _x("I2P News") + S + "http://planet.i2p/" + S + I + "world.png" + S +
-        _x("Plugins") + S + _x("Add-on directory") + S + "http://i2pwiki.i2p/index.php?title=Plugins" + S + I + "plugin.png" + S +
+        _x("I2P Plugins") + S + _x("Add-on directory") + S + "http://i2pwiki.i2p/index.php?title=Plugins" + S + I + "plugin.png" + S +
         _x("Postman's Tracker") + S + _x("Bittorrent tracker") + S + "http://tracker2.postman.i2p/" + S + I + "magnet.png" + S +
         _x("Project Website") + S + _x("I2P home page") + S + "http://i2p-projekt.i2p/" + S + I + "info_rhombus.png" + S +
-        //_x("Russian News Feed") + S + "lenta.i2p" + S + "http://lenta.i2p/" + S + I + "lenta_main_logo.png" + S +
+        //_x("lenta news [ru]") + S + _x("Russian News Feed") + S + "http://lenta.i2p/" + S + I + "lenta_main_logo.png" + S +
         //"Salt" + S + "salt.i2p" + S + "http://salt.i2p/" + S + I + "salt_console.png" + S +
         "stats.i2p" + S + _x("I2P Network Statistics") + S + "http://stats.i2p/cgi-bin/dashboard.cgi" + S + I + "chart_line.png" + S +
-        _x("Technical Docs") + S + _x("Technical documentation") + S + "http://i2p-projekt.i2p/how" + S + I + "education.png" + S +
+        _x("I2P Technical Docs") + S + _x("Technical documentation") + S + "http://i2p-projekt.i2p/how" + S + I + "education.png" + S +
         _x("The Tin Hat") + S + _x("Privacy guides and tutorials") + S + "http://secure.thetinhat.i2p/" + S + I + "thetinhat.png" + S +
         _x("Trac Wiki") + S + S + "http://trac.i2p2.i2p/" + S + I + "billiard_marker.png" + S +
         //_x("Ugha's Wiki") + S + S + "http://ugha.i2p/" + S + I + "billiard_marker.png" + S +
-        //_x("Sponge's main site") + S + _x("Seedless and the Robert BitTorrent applications") + S + "http://sponge.i2p/" + S + I + "user_astronaut.png" + S +
+        //"sponge.i2p" + S + _x("Seedless and the Robert BitTorrent applications") + S + "http://sponge.i2p/" + S + I + "user_astronaut.png" + S +
         "";
 
 
@@ -175,7 +176,7 @@ public class HomeHelper extends HelperBase {
     }
 
     private String renderApps(Collection<App> apps) {
-        String website = _t("Website");
+        String website = _t("Web Server");
         StringBuilder buf = new StringBuilder(1024);
         buf.append("<div class=\"appgroup\">");
         for (App app : apps) {
@@ -187,23 +188,18 @@ public class HomeHelper extends HelperBase {
             } else {
                 url = app.url;
             }
-            buf.append("<div class=\"app\">" +
+            buf.append("\n<div class=\"app\">\n" +
                        "<div class=\"appimg\">" +
-                       "<a href=\"").append(url).append("\">" +
-                       "<img class=\"");
-            // toopie is 54x68, not 16x16, needs special alignment and sizing
-            if (app.icon.endsWith("/itoopie_sm.png"))
-                buf.append("app2p");
-            else
-                buf.append("app");
-            buf.append("\" alt=\"\" title=\"").append(app.desc).append("\" src=\"").append(app.icon).append("\"></a>\n" +
-                       "</div>" +
-                       "<table class=\"app\"><tr class=\"app\"><td class=\"app\">" +
+                       // usability: add tabindex -1 so we avoid 2 tabs per app
+                       "<a href=\"").append(url).append("\" tabindex=\"-1\">" +
+                       "<img alt=\"\" title=\"").append(app.desc).append("\" src=\"").append(app.icon).append("\"></a>" +
+                       "</div>\n" +
+                       "<table><tr><td>" +
                        "<div class=\"applabel\">" +
                        "<a href=\"").append(url).append("\" title=\"").append(app.desc).append("\">").append(app.name).append("</a>" +
                        "</div>" +
-                       "</td></tr></table>" +
-                       "</div>\n");
+                       "</td></tr></table>\n" +
+                       "</div>");
         }
         buf.append("</div>\n");
         return buf.toString();
@@ -211,21 +207,27 @@ public class HomeHelper extends HelperBase {
 
     private String renderConfig(Collection<App> apps) {
         StringBuilder buf = new StringBuilder(1024);
-        buf.append("<table><tr><th>")
+        buf.append("<table class=\"homelinkedit\"><tr><th title=\"")
+           .append(_t("Mark for deletion"))
+           .append("\">")
            .append(_t("Remove"))
-           .append("</th><th colspan=\"2\">")
+           .append("</th><th></th><th>")
            .append(_t("Name"))
            .append("</th><th>")
            .append(_t("URL"))
            .append("</th></tr>\n");
         for (App app : apps) {
             buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" name=\"delete_")
+               .append(app.name)
+               .append("\" id=\"")
                .append(app.name)
                .append("\"></td><td align=\"center\">");
             if (app.icon != null) {
                 buf.append("<img height=\"16\" alt=\"\" src=\"").append(app.icon).append("\">");
             }
-            buf.append("</td><td align=\"left\">")
+            buf.append("</td><td align=\"left\"><label for=\"")
+               .append(app.name)
+               .append("\">")
                .append(DataHelper.escapeHTML(app.name))
                .append("</td><td align=\"left\"><a href=\"");
             String url = DataHelper.escapeHTML(app.url);
@@ -238,7 +240,7 @@ public class HomeHelper extends HelperBase {
                 buf.append(url);
             buf.append("</a></td></tr>\n");
         }
-        buf.append("<tr><td colspan=\"2\" align=\"center\"><b>")
+        buf.append("<tr id=\"addnew\"><td colspan=\"2\" align=\"center\"><b>")
            .append(_t("Add")).append(":</b>" +
                    "</td><td align=\"left\"><input type=\"text\" name=\"nofilter_name\"></td>" +
                    "<td align=\"left\"><input type=\"text\" size=\"40\" name=\"nofilter_url\"></td></tr>");
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/JobQueueHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/JobQueueHelper.java
index 7bc28287fb588aea42b170555dfcd97c8da354fd..2dcd3eeff070c3042f3829b339cd4b9ba8a9e234 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/JobQueueHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/JobQueueHelper.java
@@ -47,13 +47,16 @@ public class JobQueueHelper extends HelperBase {
         int numRunners = _context.jobQueue().getJobs(readyJobs, timedJobs, activeJobs, justFinishedJobs);
         
         StringBuilder buf = new StringBuilder(32*1024);
-        buf.append("<b><div class=\"joblog\"><h3>").append(_t("I2P Job Queue")).append("</h3><br><div class=\"wideload\">")
+        buf.append("<div class=\"joblog\">")
+           .append("<h2 id=\"jobrunners\">")
            .append(_t("Job runners")).append(": ").append(numRunners)
-           .append("</b><br>\n");
+           .append("</h2>\n");
 
         long now = _context.clock().now();
 
-        buf.append("<hr><b>").append(_t("Active jobs")).append(": ").append(activeJobs.size()).append("</b><ol>\n");
+        buf.append("<h3 id=\"activejobs\">")
+           .append(_t("Active jobs")).append(": ").append(activeJobs.size())
+           .append("</h3><ol>");
         for (int i = 0; i < activeJobs.size(); i++) {
             Job j = activeJobs.get(i);
             buf.append("<li>(").append(_t("started {0} ago", DataHelper.formatDuration2(now-j.getTiming().getStartAfter()))).append("): ");
@@ -61,7 +64,9 @@ public class JobQueueHelper extends HelperBase {
         }
         buf.append("</ol>\n");
 
-        buf.append("<hr><b>").append(_t("Just finished jobs")).append(": ").append(justFinishedJobs.size()).append("</b><ol>\n");
+        buf.append("<h3 id=\"finishedjobs\">")
+           .append(_t("Just finished jobs")).append(": ").append(justFinishedJobs.size())
+           .append("</h3><ol>");
         for (int i = 0; i < justFinishedJobs.size(); i++) {
             Job j = justFinishedJobs.get(i);
             buf.append("<li>(").append(_t("finished {0} ago", DataHelper.formatDuration2(now-j.getTiming().getActualEnd()))).append("): ");
@@ -69,7 +74,9 @@ public class JobQueueHelper extends HelperBase {
         }
         buf.append("</ol>\n");
 
-        buf.append("<hr><b>").append(_t("Ready/waiting jobs")).append(": ").append(readyJobs.size()).append("</b><ol>\n");
+        buf.append("<h3 id=\"readyjobs\">")
+           .append(_t("Ready/waiting jobs")).append(": ").append(readyJobs.size())
+           .append("</h3><ol>");
         ObjectCounter<String> counter = new ObjectCounter<String>();
         for (int i = 0; i < readyJobs.size(); i++) {
             Job j = readyJobs.get(i);
@@ -86,7 +93,9 @@ public class JobQueueHelper extends HelperBase {
         out.write(buf.toString());
         buf.setLength(0);
 
-        buf.append("<hr><b>").append(_t("Scheduled jobs")).append(": ").append(timedJobs.size()).append("</b><ol>\n");
+        buf.append("<h3 id=\"scheduledjobs\">")
+           .append(_t("Scheduled jobs")).append(": ").append(timedJobs.size())
+           .append("</h3><ol>");
         long prev = Long.MIN_VALUE;
         counter.clear();
         for (int i = 0; i < timedJobs.size(); i++) {
@@ -110,7 +119,9 @@ public class JobQueueHelper extends HelperBase {
         out.write(buf.toString());
         buf.setLength(0);
         
-        buf.append("<hr><b>").append(_t("Total Job Statistics")).append("</b>\n");
+        buf.append("<h3 id=\"totaljobstats\">")
+           .append(_t("Total Job Statistics"))
+           .append("</h3>\n");
         getJobStats(buf);
         out.write(buf.toString());
     }
@@ -120,8 +131,8 @@ public class JobQueueHelper extends HelperBase {
         List<String> names = new ArrayList<String>(counter.objects());
         if (names.size() < 4)
             return;
-        buf.append("<table style=\"width: 30%; margin-left: 100px;\">\n" +
-                   "<tr><th>").append(_t("Job")).append("</th><th>").append(_t("Queued")).append("<th>");
+        buf.append("<table id=\"schedjobs\" style=\"width: 30%; margin-left: 100px;\">\n" +
+                   "<tr><th>").append(_t("Job")).append("</th><th>").append(_t("Queued")).append("</th></tr>\n");
         Collections.sort(names, new JobCountComparator(counter));
         for (String name : names) {
             buf.append("<tr><td>").append(name)
@@ -137,7 +148,7 @@ public class JobQueueHelper extends HelperBase {
      *  @since 0.8.9
      */
     private void getJobStats(StringBuilder buf) { 
-        buf.append("<table>\n" +
+        buf.append("<div class=\"widescroll\"><table id=\"jobstats\">\n" +
                    "<tr><th>").append(_t("Job")).append("</th><th>").append(_t("Runs")).append("</th>" +
                    "<th>").append(_t("Dropped")).append("</th>" +
                    "<th>").append(_t("Time")).append("</th><th><i>").append(_t("Avg")).append("</i></th><th><i>")
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java
index 80c2fc8db35dc5e5d53c810dd2ac33b307bec67f..548be82f4fe8afa37aae0aad08f1974afdeec66b 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/LogsHelper.java
@@ -75,7 +75,7 @@ public class LogsHelper extends HelperBase {
      */
     public String getLogs() {
         String str = formatMessages(_context.logManager().getBuffer().getMostRecentMessages());
-        return "<p>" + _t("File location") + ": <a href=\"/router.log\">" + _context.logManager().currentFile() + "</a></p>" + str;
+        return "<p>" + _t("File location") + ": <a href=\"/router.log\" target=\"_blank\">" + _context.logManager().currentFile() + "</a></p>" + str;
     }
     
     /**
@@ -131,7 +131,7 @@ public class LogsHelper extends HelperBase {
             return "<p>" + _t("File not found") + ": <b><code>" + f.getAbsolutePath() + "</code></b></p>";
         } else {
             str = str.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;");
-            return "<p>" + _t("File location") + ": <a href=\"/wrapper.log\">" + f.getAbsolutePath() + "</a></p><pre>" + str + "</pre>";
+            return "<p>" + _t("File location") + ": <a href=\"/wrapper.log\" target=\"_blank\">" + f.getAbsolutePath() + "</a></p></td></tr>\n<tr><td><pre>" + str + "</pre>";
         }
     }
     
@@ -146,10 +146,10 @@ public class LogsHelper extends HelperBase {
     /** formats in reverse order */
     private String formatMessages(List<String> msgs) {
         if (msgs.isEmpty())
-            return "<p><i>" + _t("No log messages") + "</i></p>";
+            return "</td></tr><tr><td><p><i>" + _t("No log messages") + "</i></p>";
         boolean colorize = _context.getBooleanPropertyDefaultTrue("routerconsole.logs.color");
         StringBuilder buf = new StringBuilder(16*1024); 
-        buf.append("<ul>");
+        buf.append("</td></tr><tr><td><ul>");
         for (int i = msgs.size() - 1; i >= 0; i--) { 
             String msg = msgs.get(i);
             // don't display the dup message if it is last
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/NetDbHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/NetDbHelper.java
index 4d824efa5088bd9fb98b8ee09b5aefcd96a431b2..31961b11c5cd58ba24e2c2124b0d3e44be87a624 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/NetDbHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/NetDbHelper.java
@@ -206,9 +206,7 @@ public class NetDbHelper extends HelperBase {
     private void renderNavBar() throws IOException {
         StringBuilder buf = new StringBuilder(1024);
         buf.append("<div class=\"confignav\" id=\"confignav\">");
-        // TODO fix up the non-light themes
-        String theme = _context.getProperty(CSSHelper.PROP_THEME_NAME);
-        boolean span = _graphical && (theme == null || theme.equals(CSSHelper.DEFAULT_THEME));
+        boolean span = _graphical;
         if (!span)
             buf.append("<center>");
         int tab = getTab();
@@ -229,13 +227,13 @@ public class NetDbHelper extends HelperBase {
                 buf.append("<a href=\"netdb").append(links[i]).append("\">").append(_t(titles[i])).append("</a>");
             }
             if (span)
-                buf.append(" </span>\n");
+                buf.append("</span>\n");
             else if (i != titles.length - 1)
-                buf.append(" |\n");
+                buf.append("&nbsp;&nbsp;\n");
         }
         if (!span)
             buf.append("</center>");
-        buf.append("</div>");
+        buf.append("</div>\n");
         _out.write(buf.toString());
     }
 
@@ -243,23 +241,25 @@ public class NetDbHelper extends HelperBase {
      *  @since 0.9.28
      */
     private void renderLookupForm() throws IOException {
-        _out.write("<form action=\"/netdb\" method=\"GET\"><p><b>Pick One</b></p>\n" +
-                   "Caps <input type=\"text\" name=\"caps\">e.g. f or XOfR<br>\n" +
-                   "Cost <input type=\"text\" name=\"cost\"><br>\n" +
-                   "Country code <input type=\"text\" name=\"c\">e.g. ru<br>\n" +
-                   "Family <input type=\"text\" name=\"fam\"><br>\n" +
-                   "Hash prefix <input type=\"text\" name=\"r\"><br>\n" +
-                   "IP <input type=\"text\" name=\"ip\">host name, IPv4, or IPv6, /24,/16,/8 suffixes optional for IPv4<br>\n" +
-                   "IPv6 Prefix <input type=\"text\" name=\"ipv6\"><br>\n" +
-                   "MTU <input type=\"text\" name=\"mtu\"><br>\n" +
-                   "Port <input type=\"text\" name=\"port\"><br>\n" +
-                   "Sig Type <input type=\"text\" name=\"type\"><br>\n" +
-                   "SSU Caps <input type=\"text\" name=\"ssucaps\"><br>\n" +
-                   "Version <input type=\"text\" name=\"v\"><br>\n" +
-                   "<p><b>Add Sybil analysis (must pick one above):</b></p>\n" +
-                   "Sybil close to <input type=\"text\" name=\"sybil2\">Router hash, dest hash, b32, or from address book<br>\n" +
-                   "or Sybil close to this router <input type=\"checkbox\" class=\"optbox\" value=\"1\" name=\"sybil\"><br>" +
-                   "<p><input type=\"submit\" class=\"search\" value=\"Lookup\"></p>" +
-                   "</form>\n");
+        _out.write("<form action=\"/netdb\" method=\"GET\">\n" + 
+                   "<table id=\"netdblookup\"><tr><th colspan=\"3\">Network Database Search</th></tr>\n" +
+                   "<tr><td colspan=\"3\" class=\"subheading\"><b>Select one search field <i>only</i>:</b></td></tr>\n" +
+                   "<tr><td>Capabilities:</td><td><input type=\"text\" name=\"caps\"></td><td>e.g. f or XOfR</td></tr>\n" +
+                   "<tr><td>Cost:</td><td><input type=\"text\" name=\"cost\"></td><td></td></tr>\n" +
+                   "<tr><td>Country Code:</td><td><input type=\"text\" name=\"c\"></td><td>e.g. ru</td></tr>\n" +
+                   "<tr><td>Router Family:</td><td><input type=\"text\" name=\"fam\"></td><td></td></tr>\n" +
+                   "<tr><td>Hash Prefix:</td><td><input type=\"text\" name=\"r\"></td><td></td></tr>\n" +
+                   "<tr><td>IP or Hostname:</td><td><input type=\"text\" name=\"ip\"></td><td>host name, IPv4, or IPv6, /24,/16,/8 suffixes optional for IPv4</td></tr>\n" +
+                   "<tr><td>IPv6 Prefix:</td><td><input type=\"text\" name=\"ipv6\"></td><td></td></tr>\n" +
+                   "<tr><td>MTU:</td><td><input type=\"text\" name=\"mtu\"></td><td></td></tr>\n" +
+                   "<tr><td>Port Number:</td><td><input type=\"text\" name=\"port\"></td><td></td></tr>\n" +
+                   "<tr><td>Signature Type:</td><td><input type=\"text\" name=\"type\"></td><td></td></tr>\n" +
+                   "<tr><td>SSU Capabilities:</td><td><input type=\"text\" name=\"ssucaps\"></td><td></td></tr>\n" +
+                   "<tr><td>Router Version:</td><td><input type=\"text\" name=\"v\"></td><td></td></tr>\n" +
+                   "<tr><td colspan=\"3\" class=\"subheading\"><b>Add Sybil analysis (must pick one above):</b></td></tr>\n" +
+                   "<tr><td>Sybil close to:</td><td><input type=\"text\" name=\"sybil2\"></td><td>Router hash, dest hash, b32, or from address book</td>\n" +
+                   "<tr><td><label for=\"closetorouter\">or Sybil close to this router:</label></td><td><input type=\"checkbox\" class=\"optbox\" value=\"1\" name=\"sybil\" id=\"closetorouter\"></td><td></td></tr>\n" +
+                   "<tr><td colspan=\"3\" class=\"optionsave\"><button type=\"submit\" class=\"search\" value=\"Lookup\">Lookup</button></td></tr>\n" +
+                   "</table>\n</form>\n");
     }
 }
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/NetDbRenderer.java b/apps/routerconsole/java/src/net/i2p/router/web/NetDbRenderer.java
index 0792c0fe35aba6efd2aecd6eadcee1c2a43d04bb..8deac73f2ff11bacb224f408a9e07e93fdbe89fa 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/NetDbRenderer.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/NetDbRenderer.java
@@ -228,7 +228,7 @@ class NetDbRenderer {
     public void renderLeaseSetHTML(Writer out, boolean debug) throws IOException {
         StringBuilder buf = new StringBuilder(4*1024);
         if (debug)
-            buf.append("<p>Debug mode - Sorted by hash distance, closest first</p>\n");
+            buf.append("<p id=\"debugmode\">Debug mode - Sorted by hash distance, closest first</p>\n");
         Hash ourRKey;
         Set<LeaseSet> leases;
         DecimalFormat fmt;
@@ -246,9 +246,52 @@ class NetDbRenderer {
         int rapCount = 0;
         BigInteger median = null;
         int c = 0;
+
+
+        // Summary
+        FloodfillNetworkDatabaseFacade netdb = (FloodfillNetworkDatabaseFacade)_context.netDb();
+        if (debug) {
+            buf.append("<table id=\"leasesetdebug\">\n");
+        } else {
+            buf.append("<table id=\"leasesetsummary\">\n");
+        }
+        buf.append("<tr><th colspan=\"3\">Leaseset Summary</th>")
+           .append("<th><a href=\"/configadvanced\" title=\"").append(_t("Manually Configure Floodfill Participation")).append("\">[")
+           .append(_t("Configure Floodfill Participation"))
+           .append("]</a></th></tr>\n")
+           .append("<tr><td><b>Total Leasesets:</b></td><td colspan=\"3\">").append(leases.size()).append("</td></tr>\n");
+        if (debug) {
+            buf.append("<tr><td><b>Published (RAP) Leasesets:</b></td><td colspan=\"3\">").append(netdb.getKnownLeaseSets()).append("</td></tr>\n")
+               .append("<tr><td><b>Mod Data:</b></td><td>").append(DataHelper.getUTF8(_context.routerKeyGenerator().getModData())).append("</td>")
+               .append("<td><b>Last Changed:</b></td><td>").append(new Date(_context.routerKeyGenerator().getLastChanged())).append("</td></tr>\n")
+               .append("<tr><td><b>Next Mod Data:</b></td><td>").append(DataHelper.getUTF8(_context.routerKeyGenerator().getNextModData())).append("</td>")
+               .append("<td><b>Change in:</b></td><td>").append(DataHelper.formatDuration(_context.routerKeyGenerator().getTimeTillMidnight())).append("</td></tr>\n");
+        }
+        int ff = _context.peerManager().getPeersByCapability(FloodfillNetworkDatabaseFacade.CAPABILITY_FLOODFILL).size();
+        buf.append("<tr><td><b>Known Floodfills:</b></td><td colspan=\"3\">").append(ff).append("</td></tr>\n")
+           .append("<tr><td><b>Currently Floodfill?</b></td><td colspan=\"3\">").append(netdb.floodfillEnabled() ? "yes" : "no").append("</td></tr>\n");
+        if (debug) {
+            buf.append("<tr><td><b>Network data (only valid if floodfill):</b></td><td colspan=\"3\">");
+            //buf.append("</b></p><p><b>Center of Key Space (router hash): " + ourRKey.toBase64());
+            if (median != null) {
+                double log2 = biLog2(median);
+                buf.append("</td></tr>")
+                   .append("<tr><td><b>Median distance (bits):</b></td><td colspan=\"3\">").append(fmt.format(log2)).append("</td></tr>\n");
+                // 2 for 4 floodfills... -1 for median
+                // this can be way off for unknown reasons
+                int total = (int) Math.round(Math.pow(2, 2 + 256 - 1 - log2));
+                buf.append("<tr><td><b>Estimated total floodfills:</b></td><td colspan=\"3\">").append(total).append("</td></tr>\n");
+                buf.append("<tr><td><b>Estimated total leasesets:</b></td><td colspan=\"3\">").append(total * rapCount / 4);
+            } else {
+                buf.append("<i>Not floodfill or no data.</i>");
+            }
+            buf.append("</td></tr>\n");
+        }
+        buf.append("</table>\n");
+
         if (leases.isEmpty()) {
           if (!debug)
-              buf.append("<i>").append(_t("none")).append("</i>");
+              buf.append("<div id=\"noleasesets\"><i>").append(_t("No Leasesets currently active.")).append("</i></div>");
         } else {
           if (debug) {
             // Find the center of the RAP leasesets
@@ -258,109 +301,93 @@ class NetDbRenderer {
             }
             medianCount = rapCount / 2;
           }
+
           long now = _context.clock().now();
           for (LeaseSet ls : leases) {
             Destination dest = ls.getDestination();
             Hash key = dest.calculateHash();
-            buf.append("<b>").append(_t("LeaseSet")).append(": ").append(key.toBase64()).append("</b>\n");
+            buf.append("<table class=\"leaseset\">\n")
+               .append("<tr><th><b>").append(_t("LeaseSet")).append(":</b>&nbsp;<code>").append(key.toBase64()).append("</code></th>");
             if (_context.clientManager().isLocal(dest)) {
-                buf.append(" (<a href=\"tunnels#" + key.toBase64().substring(0,4) + "\">" + _t("Local") + "</a> ");
+                buf.append("<th><b><a href=\"tunnels#" + key.toBase64().substring(0,4) + "\">" + _t("Local") + "</a> ");
                 if (! _context.clientManager().shouldPublishLeaseSet(key))
                     buf.append(_t("Unpublished") + ' ');
-                buf.append(_t("Destination") + ' ');
+                buf.append("<b>").append(_t("Destination")).append(":</b> ");
                 TunnelPoolSettings in = _context.tunnelManager().getInboundSettings(key);
                 if (in != null && in.getDestinationNickname() != null)
                     buf.append(in.getDestinationNickname());
                 else
                     buf.append(dest.toBase64().substring(0, 6));
-                buf.append(")<br>\n");
+                buf.append("</th></tr>\n<tr><td>");
                 String b32 = dest.toBase32();
-                buf.append("<a href=\"http://").append(b32).append("\">").append(b32).append("</a><br>\n");
+                buf.append("<a href=\"http://").append(b32).append("\">").append(b32).append("</a></td>");
                 String host = _context.namingService().reverseLookup(dest);
                 if (host == null) {
-                    buf.append("<a href=\"/susidns/addressbook.jsp?book=private&amp;destination=")
-                       .append(dest.toBase64()).append("#add\">").append(_t("Add to local addressbook")).append("</a><br>\n");    
+                    buf.append("<td>").append("<a title=\"").append(_t("Add to addressbook"))
+                       .append("\" href=\"/susidns/addressbook.jsp?book=private&amp;destination=")
+                       .append(dest.toBase64()).append("#add\">").append(_t("Add to local addressbook")).append("</a></td>");
                 }
             } else {
-                buf.append(" (").append(_t("Destination")).append(' ');
+                buf.append("<th><b>").append(_t("Destination")).append(":</b> ");
                 String host = _context.namingService().reverseLookup(dest);
                 if (host != null) {
-                    buf.append("<a href=\"http://").append(host).append("/\">").append(host).append("</a>)<br>\n");
+                    buf.append("<a href=\"http://").append(host).append("/\">").append(host).append("</a></th>");
                 } else {
                     String b32 = dest.toBase32();
-                    buf.append(dest.toBase64().substring(0, 6)).append(")<br>\n" +
-                               "<a href=\"http://").append(b32).append("\">").append(b32).append("</a><br>\n" +
-                               "<a href=\"/susidns/addressbook.jsp?book=private&amp;destination=")
-                       .append(dest.toBase64()).append("#add\">").append(_t("Add to local addressbook")).append("</a><br>\n");    
+                    buf.append("<code>").append(dest.toBase64().substring(0, 6)).append("</code></th>")
+                       .append("</tr>\n<tr>")
+                       .append("<td><a href=\"http://").append(b32).append("\">").append(b32).append("</a></td>\n")
+                       .append("<td><a title=\"").append(_t("Add to addressbook"))
+                       .append("\" href=\"/susidns/addressbook.jsp?book=private&amp;destination=")
+                       .append(dest.toBase64()).append("#add\">").append(_t("Add to local addressbook")).append("</a></td>");
                 }
             }
+            buf.append("</tr>\n<tr><td colspan=\"2\">\n");
             long exp = ls.getLatestLeaseDate()-now;
             if (exp > 0)
-                buf.append(_t("Expires in {0}", DataHelper.formatDuration2(exp)));
+                buf.append("<b>").append(_t("Expires in {0}", DataHelper.formatDuration2(exp))).append("</b>");
             else
-                buf.append(_t("Expired {0} ago", DataHelper.formatDuration2(0-exp)));
-            buf.append("<br>\n");
+                buf.append("<b>").append(_t("Expired {0} ago", DataHelper.formatDuration2(0-exp))).append("</b>");
+            buf.append("</td></tr>\n");
             if (debug) {
-                buf.append("RAP? " + ls.getReceivedAsPublished());
-                buf.append(" RAR? " + ls.getReceivedAsReply());
+                buf.append("<tr><td colspan=\"2\">");
+                buf.append("<b>RAP?</b> ").append(ls.getReceivedAsPublished());
+                buf.append(" <b>RAR?</b> ").append(ls.getReceivedAsReply());
                 BigInteger dist = HashDistance.getDistance(ourRKey, ls.getRoutingKey());
                 if (ls.getReceivedAsPublished()) {
                     if (c++ == medianCount)
                         median = dist;
                 }
-                buf.append(" Dist: <b>").append(fmt.format(biLog2(dist))).append("</b><br>");
+                buf.append(" <b>Distance: </b><span id=\"distance\">").append(fmt.format(biLog2(dist))).append("</span></b>");
+                buf.append("</td></tr>\n<tr><td colspan=\"2\">");
                 //buf.append(dest.toBase32()).append("<br>");
-                buf.append("Sig type: ").append(dest.getSigningPublicKey().getType()).append("<br>");
-                buf.append("Routing Key: ").append(ls.getRoutingKey().toBase64());
-                buf.append("<br>");
-                buf.append("Encryption Key: ").append(ls.getEncryptionKey().toBase64().substring(0, 20)).append("...<br>");
+                buf.append("<b>Signature type:</b> ").append(dest.getSigningPublicKey().getType());
+                buf.append(" <b>Encryption Key:</b> ").append(ls.getEncryptionKey().toBase64().substring(0, 20)).append("&hellip;");
+                buf.append("</td></tr>\n<tr><td colspan=\"2\">");
+                buf.append("<b>Routing Key:</b> ").append(ls.getRoutingKey().toBase64());
+                buf.append("</td></tr>");
+
             }
             for (int i = 0; i < ls.getLeaseCount(); i++) {
                 Lease lease = ls.getLease(i);
-                buf.append(_t("Lease")).append(' ').append(i + 1).append(": ").append(_t("Gateway")).append(' ');
+                buf.append("<tr><td colspan=\"2\">");
+                buf.append("<b>").append(_t("Lease")).append(' ').append(i + 1).append(":</b> ").append(_t("Gateway")).append(' ');
                 buf.append(_context.commSystem().renderPeerHTML(lease.getGateway()));
                 buf.append(' ').append(_t("Tunnel")).append(' ').append(lease.getTunnelId().getTunnelId()).append(' ');
                 if (debug) {
                     long exl = lease.getEndDate().getTime() - now;
                     if (exl > 0)
-                        buf.append(_t("Expires in {0}", DataHelper.formatDuration2(exl)));
+                        buf.append("<b>").append(_t("Expires in {0}", DataHelper.formatDuration2(exl))).append("</b>");
                     else
-                        buf.append(_t("Expired {0} ago", DataHelper.formatDuration2(0-exl)));
+                        buf.append("<b>").append(_t("Expired {0} ago", DataHelper.formatDuration2(0-exl))).append("</b>");
                 }
-                buf.append("<br>\n");
+                buf.append("</td></tr>\n");
             }
-            buf.append("<hr>\n");
+            buf.append("</table>\n");
             out.write(buf.toString());
             buf.setLength(0);
           } // for each
         }  // !empty
-        if (debug) {
-            FloodfillNetworkDatabaseFacade netdb = (FloodfillNetworkDatabaseFacade)_context.netDb();
-            buf.append("<p><b>Total Leasesets: ").append(leases.size());
-            buf.append("</b></p><p><b>Published (RAP) Leasesets: ").append(netdb.getKnownLeaseSets());
-            buf.append("</b></p><p><b>Mod Data: \"").append(DataHelper.getUTF8(_context.routerKeyGenerator().getModData()))
-               .append("\" Last Changed: ").append(new Date(_context.routerKeyGenerator().getLastChanged()));
-            buf.append("</b></p><p><b>Next Mod Data: \"").append(DataHelper.getUTF8(_context.routerKeyGenerator().getNextModData()))
-               .append("\" Change in: ").append(DataHelper.formatDuration(_context.routerKeyGenerator().getTimeTillMidnight()));
-            int ff = _context.peerManager().getPeersByCapability(FloodfillNetworkDatabaseFacade.CAPABILITY_FLOODFILL).size();
-            buf.append("</b></p><p><b>Known Floodfills: ").append(ff);
-            buf.append("</b></p><p><b>Currently Floodfill? ");
-            buf.append(netdb.floodfillEnabled() ? "yes" : "no");
-            buf.append("</b></p><p><b>Network data (only valid if floodfill):");
-            //buf.append("</b></p><p><b>Center of Key Space (router hash): " + ourRKey.toBase64());
-            if (median != null) {
-                double log2 = biLog2(median);
-                buf.append("</b></p><p><b>Median distance (bits): ").append(fmt.format(log2));
-                // 2 for 4 floodfills... -1 for median
-                // this can be way off for unknown reasons
-                int total = (int) Math.round(Math.pow(2, 2 + 256 - 1 - log2));
-                buf.append("</b></p><p><b>Estimated total floodfills: ").append(total);
-                buf.append("</b></p><p><b>Estimated total leasesets: ").append(total * rapCount / 4);
-            } else {
-                buf.append("</b></p><p><b>Not floodfill or no data");
-            }
-            buf.append("</b></p>");
-        }
         out.write(buf.toString());
         out.flush();
     }
@@ -442,14 +469,14 @@ class NetDbRenderer {
      if (!showStats) {
 
         // the summary table
-        buf.append("<table border=\"0\" cellspacing=\"30\"><tr><th colspan=\"3\">")
+        buf.append("<table id=\"netdboverview\" border=\"0\" cellspacing=\"30\"><tr><th colspan=\"3\">")
            .append(_t("Network Database Router Statistics"))
            .append("</th></tr><tr><td style=\"vertical-align: top;\">");
         // versions table
         List<String> versionList = new ArrayList<String>(versions.objects());
         if (!versionList.isEmpty()) {
             Collections.sort(versionList, Collections.reverseOrder(new VersionComparator()));
-            buf.append("<table>\n");
+            buf.append("<table id=\"netdbversions\">\n");
             buf.append("<tr><th>" + _t("Version") + "</th><th>" + _t("Count") + "</th></tr>\n");
             for (String routerVersion : versionList) {
                 int num = versions.count(routerVersion);
@@ -468,7 +495,7 @@ class NetDbRenderer {
         start = end;
             
         // transports table
-        buf.append("<table>\n");
+        buf.append("<table id=\"netdbtransports\">\n");
         buf.append("<tr><th align=\"left\">" + _t("Transports") + "</th><th>" + _t("Count") + "</th></tr>\n");
         for (int i = 0; i < TNAMES.length; i++) {
             int num = transportCount[i];
@@ -490,12 +517,13 @@ class NetDbRenderer {
         List<String> countryList = new ArrayList<String>(countries.objects());
         if (!countryList.isEmpty()) {
             Collections.sort(countryList, new CountryComparator());
-            buf.append("<table>\n");
+            buf.append("<table id=\"netdbcountrylist\">\n");
             buf.append("<tr><th align=\"left\">" + _t("Country") + "</th><th>" + _t("Count") + "</th></tr>\n");
             for (String country : countryList) {
                 int num = countries.count(country);
-                buf.append("<tr><td><img height=\"11\" width=\"16\" alt=\"").append(country.toUpperCase(Locale.US)).append("\"");
-                buf.append(" src=\"/flags.jsp?c=").append(country).append("\"> <a href=\"/netdb?c=").append(country).append("\">");
+                buf.append("<tr><td><a href=\"/netdb?c=").append(country).append("\">");
+                buf.append("<img height=\"11\" width=\"16\" alt=\"").append(country.toUpperCase(Locale.US)).append("\"");
+                buf.append(" src=\"/flags.jsp?c=").append(country).append("\">");
                 buf.append(getTranslatedCountry(country));
                 buf.append("</a></td><td align=\"center\">").append(num).append("</td></tr>\n");
             }
@@ -552,36 +580,47 @@ class NetDbRenderer {
      */
     private void renderRouterInfo(StringBuilder buf, RouterInfo info, boolean isUs, boolean full) {
         String hash = info.getIdentity().getHash().toBase64();
-        buf.append("<table><tr><th><a name=\"").append(hash.substring(0, 6)).append("\" ></a>");
+        buf.append("<table class=\"netdbentry\">")
+           .append("<tr><th colspan=\"2\"><a name=\"").append(hash.substring(0, 6)).append("\" ></a>");
         if (isUs) {
-            buf.append("<a name=\"our-info\" ></a><b>" + _t("Our info") + ": ").append(hash).append("</b></th></tr><tr><td>\n");
+            buf.append("<a name=\"our-info\" ></a><b>" + _t("Our info") + ":</b>&nbsp;<code>").append(hash).append("</code></th><th>");
         } else {
-            buf.append("<b>" + _t("Peer info for") + ":</b> ").append(hash).append("\n");
+            buf.append("<b>" + _t("Peer info for") + ":</b>&nbsp;<code>").append(hash).append("</code></th><th>");
             if (!full) {
-                buf.append("[<a href=\"netdb?r=").append(hash.substring(0, 6)).append("\" >").append(_t("Full entry")).append("</a>]");
+                buf.append("<a title=\"").append(_t("View extended router info"))
+                   .append("\" class=\"viewfullentry\" href=\"netdb?r=").append(hash.substring(0, 6))
+                   .append("\" >[").append(_t("Full entry")).append("]</a>");
             }
-            buf.append("</th></tr><tr><td>\n");
         }
-        
+        buf.append("</th></tr>\n<tr>");
         long age = _context.clock().now() - info.getPublished();
         if (isUs && _context.router().isHidden()) {
-            buf.append("<b>").append(_t("Hidden")).append(", ").append(_t("Updated")).append(":</b> ")
-               .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+            buf.append("<td><b>").append(_t("Hidden")).append(", ").append(_t("Updated")).append(":</b></td>")
+               .append("<td colspan=\"2\">")
+               .append(_t("{0} ago", DataHelper.formatDuration2(age)))
+               .append("</td>");
         } else if (age > 0) {
-            buf.append("<b>").append(_t("Published")).append(":</b> ")
-               .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+            buf.append("<td><b>").append(_t("Published")).append(":</b></td>")
+               .append("<td colspan=\"2\">")
+               .append(_t("{0} ago", DataHelper.formatDuration2(age)))
+               .append("</td>");
         } else {
             // shouldnt happen
-            buf.append("<b>" + _t("Published") + ":</b> in ").append(DataHelper.formatDuration2(0-age)).append("???<br>\n");
+            buf.append("<td colspan=\"2\"><b>").append(_t("Published")).append(":</b> in ").append(DataHelper.formatDuration2(0-age)).append("???</td>");
         }
+        buf.append("</tr>\n<tr><td>");
         buf.append("<b>").append(_t("Signing Key")).append(":</b> ")
+           .append("</td><td colspan=\"2\">")
            .append(info.getIdentity().getSigningPublicKey().getType().toString());
-        buf.append("<br>\n<b>" + _t("Address(es)") + ":</b> ");
+        buf.append("</td></tr>\n<tr>")
+           .append("<td><b>" + _t("Address(es)") + ":</b></td>")
+           .append("<td colspan=\"2\">");
         String country = _context.commSystem().getCountry(info.getIdentity().getHash());
         if(country != null) {
+            buf.append("<a href=\"/netdb?c=").append(country).append("\">");
             buf.append("<img height=\"11\" width=\"16\" alt=\"").append(country.toUpperCase(Locale.US)).append('\"');
             buf.append(" title=\"").append(getTranslatedCountry(country)).append('\"');
-            buf.append(" src=\"/flags.jsp?c=").append(country).append("\"> ");
+            buf.append(" src=\"/flags.jsp?c=").append(country).append("\"> ").append("</a>");
         }
         for (RouterAddress addr : info.getAddresses()) {
             String style = addr.getTransportStyle();
@@ -598,7 +637,7 @@ class NetDbRenderer {
         }
         buf.append("</td></tr>\n");
         if (full) {
-            buf.append("<tr><td>" + _t("Stats") + ": <br><code>");
+            buf.append("<tr><td><b>" + _t("Stats") + ":</b><td colspan=\"2\"><code>");
             Map<Object, Object> p = info.getOptionsMap();
             for (Map.Entry<Object, Object> e : p.entrySet()) {
                 String key = (String) e.getKey();
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/NewsFeedHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/NewsFeedHelper.java
index 5bbf5a0712ae20967612e8851762dab6b7e0682a..f73bf64a4d15cbc07abb1aa582c42566270f33ae 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/NewsFeedHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/NewsFeedHelper.java
@@ -78,9 +78,9 @@ public class NewsFeedHelper extends HelperBase {
                 buf.append("<div class=\"newsentry\"><h3>");
                 if (entry.updated > 0) {
                     Date date = new Date(entry.updated);
-                    buf.append("<font size=\"-1\">")
+                    buf.append("<span class=\"newsDate\">")
                        .append(fmt.format(date))
-                       .append(":</font> ");
+                       .append("</span> ");
                 }
                 if (entry.link != null)
                     buf.append("<a href=\"").append(DataHelper.escapeHTML(entry.link)).append("\">");
@@ -88,9 +88,9 @@ public class NewsFeedHelper extends HelperBase {
                 if (entry.link != null)
                     buf.append("</a>");
                 if (entry.authorName != null) {
-                    buf.append(" <font size=\"-2\">(<i>")
-                       .append(Messages.getString("by {0}", DataHelper.escapeHTML(entry.authorName), ctx))
-                       .append("</i>)</font>\n");
+                    buf.append(" <span class=\"newsAuthor\" title=\"Post author\"><i>")
+                       .append(Messages.getString("{0}", DataHelper.escapeHTML(entry.authorName), ctx))
+                       .append("</i></span>\n");
                 }
                 buf.append("</h3>\n<div class=\"newscontent\">\n")
                    .append(entry.content)
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/NewsHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/NewsHelper.java
index f8bd51e6fd1f4dbf730a0cce9988b4e19d8322a2..3a75b7dcd4937bde849022c91458f5f29cd3db57 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/NewsHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/NewsHelper.java
@@ -286,7 +286,7 @@ public class NewsHelper extends ContentHelper {
     public static String status(RouterContext ctx) {
          StringBuilder buf = new StringBuilder(128);
          long now = ctx.clock().now();
-         buf.append("<i>");
+         buf.append("<span id=\"newsStatus\"><i>");
          long lastUpdated = lastUpdated(ctx);
          long lastFetch = lastChecked(ctx);
          if (lastUpdated > 0) {
@@ -300,7 +300,7 @@ public class NewsHelper extends ContentHelper {
                                            DataHelper.formatDuration2(now - lastFetch),
                                            ctx));
          }
-         buf.append("</i>");
+         buf.append("</i></span><span id=\"newsDisplay\">");
          String consoleNonce = CSSHelper.getNonce();
          if (lastUpdated > 0 && consoleNonce != null) {
              if (shouldShowNews(ctx)) {
@@ -311,9 +311,9 @@ public class NewsHelper extends ContentHelper {
                     .append(Messages.getString("Show news", ctx));
              }
              buf.append("</a>" +
-                        " - <a href=\"/news\">")
+                        " | <a href=\"/news\">")
                 .append(Messages.getString("Show all news", ctx))
-                .append("</a>");
+                .append("</a></span>");
          }
          return buf.toString();
     }
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ProfileOrganizerRenderer.java b/apps/routerconsole/java/src/net/i2p/router/web/ProfileOrganizerRenderer.java
index 2c7ca06aa0a933f05c9011639a5d6d9f9cffeedd..499a8e6118c24e6f79e26d0b65fc1b1b2ea30e13 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/ProfileOrganizerRenderer.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/ProfileOrganizerRenderer.java
@@ -26,7 +26,7 @@ import net.i2p.stat.RateStat;
 class ProfileOrganizerRenderer {
     private final RouterContext _context;
     private final ProfileOrganizer _organizer;
-    
+
     public ProfileOrganizerRenderer(ProfileOrganizer organizer, RouterContext context) {
         _context = context;
         _organizer = organizer;
@@ -38,10 +38,10 @@ class ProfileOrganizerRenderer {
     public void renderStatusHTML(Writer out, int mode) throws IOException {
         boolean full = mode == 1;
         Set<Hash> peers = _organizer.selectAllPeers();
-        
+
         long now = _context.clock().now();
         long hideBefore = now - 90*60*1000;
-        
+
         Set<PeerProfile> order = new TreeSet<PeerProfile>(mode == 2 ? new HashComparator() : new ProfileComparator());
         int older = 0;
         int standard = 0;
@@ -66,7 +66,7 @@ class ProfileOrganizerRenderer {
             }
             order.add(prof);
         }
-        
+
         int fast = 0;
         int reliable = 0;
         int integrated = 0;
@@ -78,26 +78,28 @@ class ProfileOrganizerRenderer {
       if (mode < 2) {
 
         //buf.append("<h2>").append(_t("Peer Profiles")).append("</h2>\n<p>");
+        buf.append("<p id=\"profiles_overview\" class=\"infohelp\">");
         buf.append(ngettext("Showing 1 recent profile.", "Showing {0} recent profiles.", order.size())).append('\n');
         if (older > 0)
             buf.append(ngettext("Hiding 1 older profile.", "Hiding {0} older profiles.", older)).append('\n');
         if (standard > 0)
             buf.append("<a href=\"/profiles?f=1\">").append(ngettext("Hiding 1 standard profile.", "Hiding {0} standard profiles.", standard)).append("</a>\n");
         buf.append("</p>");
-                   buf.append("<table>");
+                   buf.append("<div class=\"widescroll\"><table id=\"profilelist\">");
                    buf.append("<tr>");
                    buf.append("<th>").append(_t("Peer")).append("</th>");
-                   buf.append("<th>").append(_t("Groups (Caps)")).append("</th>");
+                   buf.append("<th>").append(_t("Groups")).append("</th>");
+                   buf.append("<th>").append(_t("Caps")).append("</th>");
                    buf.append("<th>").append(_t("Speed")).append("</th>");
                    buf.append("<th>").append(_t("Capacity")).append("</th>");
                    buf.append("<th>").append(_t("Integration")).append("</th>");
                    buf.append("<th>").append(_t("Status")).append("</th>");
-                   buf.append("<th>&nbsp;</th>");
+                   buf.append("<th>").append(_t("View/Edit")).append("</th>");
                    buf.append("</tr>");
         int prevTier = 1;
         for (PeerProfile prof : order) {
             Hash peer = prof.getPeer();
-            
+
             int tier = 0;
             boolean isIntegrated = false;
             if (_organizer.isFast(peer)) {
@@ -111,23 +113,23 @@ class ProfileOrganizerRenderer {
             } else {
                 tier = 3;
             }
-            
+
             if (_organizer.isWellIntegrated(peer)) {
                 isIntegrated = true;
                 integrated++;
             }
-            
+
             if (tier != prevTier)
-                buf.append("<tr><td colspan=\"7\"><hr></td></tr>\n");
+                buf.append("<tr><td colspan=\"8\"><hr></td></tr>\n");
             prevTier = tier;
-            
+
             buf.append("<tr><td align=\"center\" nowrap>");
             buf.append(_context.commSystem().renderPeerHTML(peer));
             // debug
             //if(prof.getIsExpandedDB())
             //   buf.append(" ** ");
             buf.append("</td><td align=\"center\">");
-            
+
             switch (tier) {
                 case 1: buf.append(_t("Fast, High Capacity")); break;
                 case 2: buf.append(_t("High Capacity")); break;
@@ -138,14 +140,14 @@ class ProfileOrganizerRenderer {
             RouterInfo info = _context.netDb().lookupRouterInfoLocally(peer);
             if (info != null) {
                 // prevent HTML injection in the caps and version
-                buf.append(" (").append(DataHelper.stripHTML(info.getCapabilities()));
+                buf.append("<td align=\"right\">").append(DataHelper.stripHTML(info.getCapabilities()));
                 String v = info.getOption("router.version");
                 if (v != null)
                     buf.append(' ').append(DataHelper.stripHTML(v));
-                buf.append(')');
+            } else {
+                buf.append("<td align=\"right\"><i>").append(_t("unknown")).append("</i></td>");
             }
-            
-            buf.append("<td align=\"right\">").append(num(prof.getSpeedValue()));
+            buf.append("</td><td align=\"right\">").append(num(prof.getSpeedValue()));
             long bonus = prof.getSpeedBonus();
             if (bonus != 0) {
                 if (bonus > 0)
@@ -177,18 +179,19 @@ class ProfileOrganizerRenderer {
                 if (total / fails <= 10)   // hide if < 10%
                     buf.append(' ').append(fails).append('/').append(total).append(' ').append(_t("Test Fails"));
             }
+
             buf.append("&nbsp;</td>");
             //buf.append("<td nowrap align=\"center\"><a target=\"_blank\" href=\"dumpprofile.jsp?peer=")
             //   .append(peer.toBase64().substring(0,6)).append("\">").append(_t("profile")).append("</a>");
             buf.append("<td nowrap align=\"center\"><a href=\"viewprofile?peer=")
                .append(peer.toBase64()).append("\">").append(_t("profile")).append("</a>");
-            buf.append("&nbsp;<a href=\"configpeer?peer=").append(peer.toBase64()).append("\">+-</a></td>\n");
+            buf.append("&nbsp;<a title=\"").append(_t("Configure peer")).append("\" href=\"configpeer?peer=").append(peer.toBase64()).append("\">+-</a></td>\n");
             buf.append("</tr>");
             // let's not build the whole page in memory (~500 bytes per peer)
             out.write(buf.toString());
             buf.setLength(0);
         }
-        buf.append("</table>");
+        buf.append("</table></div>");
 
       ////
       //// don't bother reindenting
@@ -197,7 +200,7 @@ class ProfileOrganizerRenderer {
 
         //buf.append("<h2><a name=\"flood\"></a>").append(_t("Floodfill and Integrated Peers"))
         //   .append(" (").append(integratedPeers.size()).append(")</h2>\n");
-        buf.append("<table>");
+        buf.append("<div class=\"widescroll\"><table id=\"floodfills\">");
         buf.append("<tr>");
         buf.append("<th class=\"smallhead\">").append(_t("Peer")).append("</th>");
         buf.append("<th class=\"smallhead\">").append(_t("Caps")).append("</th>");
@@ -250,7 +253,7 @@ class ProfileOrganizerRenderer {
             }
             buf.append("</tr>\n");
         }
-        buf.append("</table>");
+        buf.append("</table></div>");
 
       ////
       //// don't bother reindenting
@@ -258,21 +261,81 @@ class ProfileOrganizerRenderer {
       }
       if (mode < 2) {
 
-        buf.append("<h3>").append(_t("Thresholds")).append("</h3>");
-        buf.append("<p><b>").append(_t("Speed")).append(":</b> ").append(num(_organizer.getSpeedThreshold()))
-           .append(" (").append(fast).append(' ').append(_t("fast peers")).append(")<br>");
-        buf.append("<b>").append(_t("Capacity")).append(":</b> ").append(num(_organizer.getCapacityThreshold()))
-           .append(" (").append(reliable).append(' ').append(_t("high capacity peers")).append(")<br>");
-        buf.append("<b>").append(_t("Integration")).append(":</b> ").append(num(_organizer.getIntegrationThreshold()))
-           .append(" (").append(integrated).append(' ').append(_t(" well integrated peers")).append(")</p>");
-        buf.append("<h3>").append(_t("Definitions")).append("</h3><ul>");
-        buf.append("<li><b>").append(_t("groups")).append("</b>: ").append(_t("as determined by the profile organizer")).append("</li>");
-        buf.append("<li><b>").append(_t("caps")).append("</b>: ").append(_t("capabilities in the netDb, not used to determine profiles")).append("</li>");
-        buf.append("<li><b>").append(_t("speed")).append("</b>: ").append(_t("peak throughput (bytes per second) over a 1 minute period that the peer has sustained in a single tunnel")).append("</li>");
-        buf.append("<li><b>").append(_t("capacity")).append("</b>: ").append(_t("how many tunnels can we ask them to join in an hour?")).append("</li>");
-        buf.append("<li><b>").append(_t("integration")).append("</b>: ").append(_t("how many new peers have they told us about lately?")).append("</li>");
-        buf.append("<li><b>").append(_t("status")).append("</b>: ").append(_t("is the peer banned, or unreachable, or failing tunnel tests?")).append("</li>");
-        buf.append("</ul>");
+        buf.append("<h3 class=\"tabletitle\">").append(_t("Thresholds")).append("</h3>\n")
+           .append("<table id=\"thresholds\"><tbody>")
+           .append("<tr><th><b>")
+           .append(_t("Speed")).append(": </b>").append(num(_organizer.getSpeedThreshold()))
+           .append("</th><th><b>")
+           .append(_t("Capacity")).append(": </b>").append(num(_organizer.getCapacityThreshold()))
+           .append("</th><th><b>")
+           .append(_t("Integration")).append(": </b>").append(num(_organizer.getIntegrationThreshold()))
+           .append("</th></tr><tr><td>")
+           .append(fast).append(' ').append(_t("fast peers"))
+           .append("</td><td>")
+           .append(reliable).append(' ').append(_t("high capacity peers"))
+           .append("</td><td>")
+           .append(integrated).append(' ').append(_t(" well integrated peers"))
+           .append("</td></tr></tbody></table>\n");
+        buf.append("<h3 class=\"tabletitle\">").append(_t("Definitions")).append("</h3>\n")
+           .append("<table id=\"profile_defs\"><tbody>");
+        buf.append("<tr><td><b>")
+           .append(_t("groups")).append(":</b></td><td>").append(_t("as determined by the profile organizer"))
+           .append("</td></tr>");
+        buf.append("<tr><td><b>")
+           .append(_t("caps")).append(":</b></td><td>").append(_t("capabilities in the netDb, not used to determine profiles"))
+           .append("</td></tr>");
+        buf.append("<tr id=\"capabilities_key\"><td colspan=\"2\"><table><tbody>");
+        buf.append("<tr><td>&nbsp;</td>")
+           .append("<td><b>B:</b></td><td>").append(_t("SSU Testing")).append("</td>")
+           .append("<td><b>C:</b></td><td>").append(_t("SSU Introducer")).append("</td>")
+           .append("<td>&nbsp;</td></tr>");
+        buf.append("<tr><td>&nbsp;</td>")
+           .append("<td><b>f:</b></td><td>").append(_t("Floodfill")).append("</td>")
+           .append("<td><b>H:</b></td><td>").append(_t("Hidden")).append("</td>")
+           .append("<td>&nbsp;</td></tr>");
+        buf.append("<tr><td>&nbsp;</td>")
+           .append("<td><b>K:</b></td><td>").append(_t("Under {0} shared bandwidth", "12KBps")).append("</td>")
+           .append("<td><b>L:</b></td><td>").append(_t("{0} shared bandwidth", "12 - 32KBps")).append("</td>")
+           .append("<td>&nbsp;</td></tr>");
+        buf.append("<tr><td>&nbsp;</td>")
+           .append("<td><b>M:</b></td><td>").append(_t("{0} shared bandwidth", "32 - 64KBps")).append("</td>")
+           .append("<td><b>N:</b></td><td>").append(_t("{0} shared bandwidth", "64 - 128KBps")).append("</td>")
+           .append("<td>&nbsp;</td></tr>");
+        buf.append("<tr><td>&nbsp;</td>")
+           .append("<td><b>O:</b></td><td>").append(_t("{0} shared bandwidth", "128 - 256KBps")).append("</td>")
+           .append("<td><b>P:</b></td><td>").append(_t("{0} shared bandwidth", "256 - 2000KBps")).append("</td>")
+           .append("<td>&nbsp;</td></tr>");
+        buf.append("<tr><td>&nbsp;</td>")
+           .append("<td><b>R:</b></td><td>").append(_t("Reachable")).append("</td>")
+           .append("<td><b>U:</b></td><td>").append(_t("Unreachable")).append("</td>")
+           .append("<td>&nbsp;</td></tr>");
+        buf.append("<tr><td>&nbsp;</td>")
+           .append("<td><b>X:</b></td><td>").append(_t("Over {0} shared bandwidth", "2000KBps")).append("</td>")
+           .append("<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>");
+        buf.append("<tr><td>&nbsp;</td><td colspan=\"5\">").append(_t("Note: For P and X bandwidth tiers, O is included for the purpose of backward compatibility in the NetDB."))
+           .append("</tr>");
+        buf.append("</tbody></table></td></tr>"); // profile_defs
+        buf.append("<tr><td><b>")
+           .append(_t("speed"))
+           .append(":</b></td><td>")
+           .append(_t("peak throughput (bytes per second) over a 1 minute period that the peer has sustained in a single tunnel"))
+           .append("</td></tr>");
+        buf.append("<tr><td><b>")
+           .append(_t("capacity"))
+           .append(":</b></td><td>")
+           .append(_t("how many tunnels can we ask them to join in an hour?"))
+           .append("</td></tr>");
+        buf.append("<tr><td><b>")
+           .append(_t("integration"))
+           .append(":</b></td><td>")
+           .append(_t("how many new peers have they told us about lately?"))
+           .append("</td></tr>");
+        buf.append("<tr><td><b>")
+           .append(_t("status"))
+           .append(":</b></td><td>")
+           .append(_t("is the peer banned, or unreachable, or failing tunnel tests?"))
+           .append("</td></tr>");
+        buf.append("</tbody></table>\n"); // thresholds
 
       ////
       //// don't bother reindenting
@@ -282,7 +345,7 @@ class ProfileOrganizerRenderer {
         out.write(buf.toString());
         out.flush();
     }
-    
+
     private class ProfileComparator extends HashComparator {
         public int compare(PeerProfile left, PeerProfile right) {
             if (_context.profileOrganizer().isFast(left.getPeer())) {
@@ -319,7 +382,7 @@ class ProfileOrganizerRenderer {
             }
         }
     }
-        
+
     /**
      *  Used for floodfill-only page
      *  As of 0.9.29, sorts in true binary order, not base64 string
@@ -329,9 +392,9 @@ class ProfileOrganizerRenderer {
         public int compare(PeerProfile left, PeerProfile right) {
             return DataHelper.compareTo(left.getPeer().getData(), right.getPeer().getData());
         }
-        
+
     }
-    
+
     private final static DecimalFormat _fmt = new DecimalFormat("###,##0.00");
     private final static String num(double num) { synchronized (_fmt) { return _fmt.format(num); } }
     private final static String NA = HelperBase._x("n/a");
@@ -378,6 +441,10 @@ class ProfileOrganizerRenderer {
         return Messages.getString(s, _context);
     }
 
+    private String _t(String s, Object o) {
+        return Messages.getString(s, o, _context);
+    }
+
     /** translate (ngettext) @since 0.8.5 */
     public String ngettext(String s, String p, int n) {
         return Messages.getString(n, s, p, _context);
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/ProfilesHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/ProfilesHelper.java
index 3236d1f126cad7c5b2c6282d56cd174406be0f13..e9a3eb531ca09dc0b34a740c8f7841e5aeb39c4d 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/ProfilesHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/ProfilesHelper.java
@@ -9,7 +9,7 @@ public class ProfilesHelper extends HelperBase {
 
     private static final String titles[] =
                                           {_x("High Capacity"),                 // 0
-                                           _x("Floodfill "),                    // 1
+                                           _x("Floodfill"),                     // 1
                                            _x("Banned"),                        // 2
                                            _x("All"),      };                   // 3
 
@@ -93,9 +93,7 @@ public class ProfilesHelper extends HelperBase {
     private void renderNavBar() throws IOException {
         StringBuilder buf = new StringBuilder(1024);
         buf.append("<div class=\"confignav\" id=\"confignav\">");
-        // TODO fix up the non-light themes
-        String theme = _context.getProperty(CSSHelper.PROP_THEME_NAME);
-        boolean span = _graphical && (theme == null || theme.equals(CSSHelper.DEFAULT_THEME));
+        boolean span = _graphical;
         if (!span)
             buf.append("<center>");
         int tab = getTab();
@@ -112,9 +110,9 @@ public class ProfilesHelper extends HelperBase {
                 buf.append("<a href=\"profiles").append(links[i]).append("\">").append(_t(titles[i])).append("</a>");
             }
             if (span)
-                buf.append(" </span>\n");
+                buf.append("</span>\n");
             else if (i != titles.length - 1)
-                buf.append(" |\n");
+                buf.append("&nbsp;&nbsp;\n");
         }
         if (!span)
             buf.append("</center>");
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/StatsGenerator.java b/apps/routerconsole/java/src/net/i2p/router/web/StatsGenerator.java
index 634940edf5407631ecfb1bfd29c908d4be82c545..568253bfeb482aac00cfb522a2aa265ba2ebb938 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/StatsGenerator.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/StatsGenerator.java
@@ -30,11 +30,21 @@ public class StatsGenerator {
     
     public void generateStatsPage(Writer out, boolean showAll) throws IOException {
         StringBuilder buf = new StringBuilder(16*1024);
-        buf.append("<div class=\"joblog\"><form action=\"\">");
-        buf.append("<select name=\"go\" onChange='location.href=this.value'>");
+
+        buf.append("<div class=\"joblog\">\n");
+        buf.append("<p id=\"gatherstats\">");
+        buf.append(_t("Statistics gathered during this router's uptime")).append(" (");
+        long uptime = _context.router().getUptime();
+        buf.append(DataHelper.formatDuration2(uptime));
+        buf.append(").  ").append( _t("The data gathered is quantized over a 1 minute period, so should just be used as an estimate."));
+        buf.append(' ').append( _t("These statistics are primarily used for development and debugging."));
+        buf.append("</p>");
+
+        buf.append("<form action=\"\"><b>");
+        buf.append(_t("Jump to section")).append(":</b> <select name=\"go\" onChange='location.href=this.value'>");
         out.write(buf.toString());
         buf.setLength(0);
-        
+
         Map<String, SortedSet<String>> unsorted = _context.statManager().getStatsByGroup();
         Map<String, Set<String>> groups = new TreeMap<String, Set<String>>(new AlphaComparator());
         groups.putAll(unsorted);
@@ -56,25 +66,19 @@ public class StatsGenerator {
         }
         buf.append("</select> <input type=\"submit\" value=\"").append(_t("GO")).append("\" />");
         buf.append("</form>");
-        
-        buf.append(_t("Statistics gathered during this router's uptime")).append(" (");
-        long uptime = _context.router().getUptime();
-        buf.append(DataHelper.formatDuration2(uptime));
-        buf.append(").  ").append( _t("The data gathered is quantized over a 1 minute period, so should just be used as an estimate."));
-        buf.append(' ').append( _t("These statistics are primarily used for development and debugging."));
 
         out.write(buf.toString());
         buf.setLength(0);
-        
+
         for (Map.Entry<String, Set<String>> entry : groups.entrySet()) {
             String group = entry.getKey();
             Set<String> stats = entry.getValue();
-            buf.append("<h3><a name=\"");
+            buf.append("<h3 class=\"stats\"><a name=\"");
             buf.append(group);
             buf.append("\">");
             buf.append(_t(group));
             buf.append("</a></h3>");
-            buf.append("<ul>");
+            buf.append("<ul class=\"statlist\">");
             out.write(buf.toString());
             buf.setLength(0);
             for (String stat : stats) {
@@ -82,7 +86,7 @@ public class StatsGenerator {
                 buf.append(stat);
                 buf.append("\">");
                 buf.append(stat);
-                buf.append("</a></b><br>");
+                buf.append("</a>:</b>&nbsp;");
                 if (_context.statManager().isFrequency(stat))
                     renderFrequency(stat, buf);
                 else
@@ -102,7 +106,7 @@ public class StatsGenerator {
         buf.append(freq.getDescription());
         buf.append("</i><br>");
         if (freq.getEventCount() <= 0) {
-            buf.append(_t("No lifetime events")).append("<br>\n");
+            buf.append("<ul><li class=\"noevents\">").append(_t("No lifetime events")).append("</li></ul>\n");
             return;
         }
         long uptime = _context.router().getUptime();
@@ -153,7 +157,7 @@ public class StatsGenerator {
             buf.append("</i><br>");
         }
         if (rate.getLifetimeEventCount() <= 0) {
-            buf.append(_t("No lifetime events")).append("<br>\n");
+            buf.append("<ul><li class=\"noevents\">").append(_t("No lifetime events")).append("</li></ul>\n");
             return;
         }
         long now = _context.clock().now();
@@ -214,7 +218,7 @@ public class StatsGenerator {
                 buf.append(")");
             }
             if (curRate.getSummaryListener() != null) {
-                buf.append(" <a href=\"graph?stat=").append(name)
+                buf.append("<br><a href=\"graph?stat=").append(name)
                    .append('.').append(periods[i]);
                 buf.append("\">").append(_t("Graph Data")).append("</a> - ");
                 buf.append(" <a href=\"graph?stat=").append(name)
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java b/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java
index c4847df6048562a99e68d11bad9344c4061a3f83..1eddd32591d6342bfd29947a0e4a0cd80df1078a 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/SummaryBarRenderer.java
@@ -28,7 +28,7 @@ class SummaryBarRenderer {
     static final String ALL_SECTIONS[] =
         {"HelpAndFAQ", "I2PServices", "I2PInternals", "General", "ShortGeneral", "NetworkReachability",
         "UpdateStatus", "RestartStatus", "Peers", "FirewallAndReseedStatus", "Bandwidth", "Tunnels",
-        "Congestion", "TunnelStatus", "Destinations", "NewsHeadings" };
+        "Congestion", "TunnelStatus", "Destinations", "NewsHeadings", "Advanced" };
     static final Map<String, String> SECTION_NAMES;
 
     static {
@@ -49,6 +49,7 @@ class SummaryBarRenderer {
         aMap.put("TunnelStatus", "Tunnel Status");
         aMap.put("Destinations", "Local Tunnels");
         aMap.put("NewsHeadings", "News &amp; Updates");
+        aMap.put("Advanced", "Advanced");
         SECTION_NAMES = Collections.unmodifiableMap(aMap);
     }
 
@@ -88,6 +89,8 @@ class SummaryBarRenderer {
                 buf.append(renderI2PServicesHTML());
             else if ("I2PInternals".equals(section))
                 buf.append(renderI2PInternalsHTML());
+            else if ("Advanced".equals(section))
+                buf.append(renderAdvancedHTML());
             else if ("General".equals(section))
                 buf.append(renderGeneralHTML());
             else if ("ShortGeneral".equals(section))
@@ -123,7 +126,7 @@ class SummaryBarRenderer {
 
     public String renderHelpAndFAQHTML() {
         StringBuilder buf = new StringBuilder(512);
-        buf.append("<h3><a href=\"/help\" target=\"_top\" title=\"")
+        buf.append("<h3 id=\"helpfaq\"><a href=\"/help\" target=\"_top\" title=\"")
            .append(_t("I2P Router Help &amp; FAQ"))
            .append("\">")
            .append(_t("Help &amp; FAQ"))
@@ -139,7 +142,7 @@ class SummaryBarRenderer {
            .append(_t("I2P Services"))
            .append("</a></h3>\n" +
 
-                   "<hr class=\"b\"><table><tr><td>" +
+                   "<hr class=\"b\"><table id=\"sb_services\"><tr><td>" +
 
                    "<a href=\"/susimail/susimail\" target=\"_blank\" title=\"")
            .append(_t("Anonymous webmail client"))
@@ -160,7 +163,7 @@ class SummaryBarRenderer {
            .append("/\" target=\"_blank\" title=\"")
            .append(_t("Local web server"))
            .append("\">")
-           .append(nbsp(_t("Website")))
+           .append(nbsp(_t("Web Server")))
            .append("</a>\n")
 
            .append(NavHelper.getClientAppLinks(_context))
@@ -177,12 +180,44 @@ class SummaryBarRenderer {
            .append(_t("I2P Internals"))
            .append("</a></h3><hr class=\"b\">\n" +
 
-                   "<table><tr><td>\n" +
+                   "<table id=\"sb_internals\"><tr><td>\n" +
 
-                   "<a href=\"/tunnels\" target=\"_top\" title=\"")
-           .append(_t("View existing tunnels and tunnel build status"))
+                   "<a href=\"/dns\" target=\"_top\" title=\"")
+           .append(_t("Manage your I2P hosts file here (I2P domain name resolution)"))
            .append("\">")
-           .append(nbsp(_t("Tunnels")))
+           .append(nbsp(_t("Addressbook")))
+           .append("</a>\n");
+
+        if (!StatSummarizer.isDisabled()) {
+            buf.append("<a href=\"/graphs\" target=\"_top\" title=\"")
+               .append(_t("Graph router performance"))
+               .append("\">")
+               .append(nbsp(_t("Graphs")))
+               .append("</a>\n");
+        }
+
+        buf.append("<a href=\"/i2ptunnelmgr\" target=\"_top\" title=\"")
+           .append(_t("Local Tunnels"))
+           .append("\">")
+           .append(nbsp(_t("Hidden Services Manager")))
+           .append("</a>\n" +
+
+       //          "<a href=\"/jobs.jsp\" target=\"_top\" title=\"")
+       //  .append(_t("Show the router's workload, and how it's performing"))
+       //  .append("\">")
+       //  .append(_t("Jobs"))
+       //  .append("</a>\n" +
+
+                   "<a href=\"/logs\" target=\"_top\" title=\"")
+           .append(_t("Health Report"))
+           .append("\">")
+           .append(nbsp(_t("Logs")))
+           .append("</a>\n" +
+
+                   "<a href=\"/netdb\" target=\"_top\" title=\"")
+           .append(_t("Show list of all known I2P routers"))
+           .append("\">")
+           .append(nbsp(_t("NetDB")))
            .append("</a>\n" +
 
                    "<a href=\"/peers\" target=\"_top\" title=\"")
@@ -197,56 +232,86 @@ class SummaryBarRenderer {
            .append(nbsp(_t("Profiles")))
            .append("</a>\n" +
 
-                   "<a href=\"/netdb\" target=\"_top\" title=\"")
-           .append(_t("Show list of all known I2P routers"))
-           .append("\">")
-           .append(nbsp(_t("NetDB")))
-           .append("</a>\n" +
-
-                   "<a href=\"/logs\" target=\"_top\" title=\"")
-           .append(_t("Health Report"))
+                   "<a href=\"/tunnels\" target=\"_top\" title=\"")
+           .append(_t("View existing tunnels and tunnel build status"))
            .append("\">")
-           .append(nbsp(_t("Logs")))
+           .append(nbsp(_t("Tunnels")))
            .append("</a>\n");
 
-       //          "<a href=\"/jobs.jsp\" target=\"_top\" title=\"")
-       //  .append(_t("Show the router's workload, and how it's performing"))
-       //  .append("\">")
-       //  .append(_t("Jobs"))
-       //  .append("</a>\n" +
+        buf.append("</td></tr></table>\n");
+        return buf.toString();
+    }
 
-        if (!StatSummarizer.isDisabled()) {
-            buf.append("<a href=\"/graphs\" target=\"_top\" title=\"")
-               .append(_t("Graph router performance"))
-               .append("\">")
-               .append(nbsp(_t("Graphs")))
-               .append("</a>\n");
-        }
+    public String renderAdvancedHTML() {
+        StringBuilder buf = new StringBuilder(512);
 
-        buf.append("<a href=\"/stats\" target=\"_top\" title=\"")
-           .append(_t("Textual router performance statistics"))
-           .append("\">")
-           .append(nbsp(_t("Stats")))
-           .append("</a>\n" +
+        buf.append("<h3 id=\"advanced\"><a title=\"")
+           .append(_t("Advanced Configuration"))
+           .append("\" href=\"/configadvanced\">")
+           .append(_t("Advanced"))
+           .append("</a></h3>\n")
 
-                   "<a href=\"/dns\" target=\"_top\" title=\"")
-           .append(_t("Manage your I2P hosts file here (I2P domain name resolution)"))
-           .append("\">")
-           .append(nbsp(_t("Addressbook")))
-           .append("</a>\n" +
+           .append("<hr class=\"b\"><table id=\"sb_advanced\"><tr><td>")
 
-                    "<a href=\"/i2ptunnelmgr\" target=\"_top\" title=\"")
-           .append(_t("Local Tunnels"))
-           .append("\">")
-           .append(nbsp(_t("Hidden Services Manager")))
+           .append("<a title=\"")
+           .append(_t("Review active encryption certificates used in console"))
+           .append("\" href=\"/certs\">")
+           .append(nbsp(_t("Certs")))
+           .append("</a>\n")
+
+           .append("<a title=\"")
+           .append(_t("View full changelog"))
+           .append("\" href=\"/viewhistory\" target=\"_blank\">")
+           .append(nbsp(_t("Changelog")))
+           .append("</a>\n")
+
+           .append("<a title=\"")
+           .append(_t("View router debug information"))
+           .append("\" href=\"/debug\">")
+           .append(nbsp(_t("Debug")))
+           .append("</a>\n")
+
+           .append("<a title=\"")
+           .append(_t("Review extended info about installed .jar and .war files"))
+           .append("\" href=\"/jars\">")
+           .append(nbsp(_t("Jars")))
            .append("</a>\n");
 
-        if (_context.getBooleanProperty(HelperBase.PROP_ADVANCED))
-            buf.append("<a href=\"/debug\">Debug</a>\n");
         File javadoc = new File(_context.getBaseDir(), "docs/javadoc/index.html");
         if (javadoc.exists())
             buf.append("<a href=\"/javadoc/index.html\" target=\"_blank\">Javadoc</a>\n");
-        buf.append("</td></tr></table>\n");
+
+        buf.append("<a title=\"")
+           .append(_t("View active leasesets (debug mode)"))
+           .append("\" href=\"/netdb?l=2\">")
+           .append(nbsp(_t("Leasesets")))
+           .append("</a>\n")
+
+           .append("<a title=\"")
+           .append(_t("Network database search tool"))
+           .append("\" href=\"/netdb?f=4\">")
+           .append(nbsp(_t("NetDB Search")))
+           .append("</a>\n")
+
+           .append("<a title=\"")
+           .append(_t("Signed proof of ownership of this router"))
+           .append("\" href=\"/proof\">")
+           .append(nbsp(_t("Proof")))
+           .append("</a>\n")
+
+           .append("<a href=\"/stats\" target=\"_top\" title=\"")
+           .append(_t("Textual router performance statistics"))
+           .append("\">")
+           .append(nbsp(_t("Stats")))
+           .append("</a>\n")
+
+           .append("<a title=\"")
+           .append(_t("Review possible sybils in network database"))
+           .append("\" href=\"/netdb?f=3\">")
+           .append(nbsp(_t("Sybils")))
+           .append("</a>\n")
+
+           .append("</td></tr></table>");
         return buf.toString();
     }
 
@@ -259,7 +324,7 @@ class SummaryBarRenderer {
            .append(_t("General"))
            .append("</a></h3><hr class=\"b\">\n" +
 
-                   "<table><tr>" +
+                   "<table id=\"sb_localid\"><tr>" +
                    "<td align=\"left\"><b title=\"")
            .append(_t("Your Local Identity is your unique I2P router identity, similar to an ip address but tailored to I2P. "))
            .append(_t("Never disclose this to anyone, as it can reveal your real world ip."))
@@ -277,7 +342,7 @@ class SummaryBarRenderer {
            .append(_t("show"))
            .append("</a></td></tr>\n" +
 
-                   "</table><table>" + // fix for some rows with a big left side and some with a big right side
+                   "</table><table id=\"sb_version\">" + // fix for some rows with a big left side and some with a big right side
                    "<tr title=\"")
            .append(_t("The version of the I2P software we are running"))
            .append("\">" +
@@ -288,7 +353,7 @@ class SummaryBarRenderer {
            .append(_helper.getVersion())
            .append("</td></tr>\n" +
 
-                   "</table><table>" + // fix for some rows with a big left side and some with a big right side
+                   "</table><table id=\"sb_uptime\">" + // fix for some rows with a big left side and some with a big right side
                    "<tr title=\"")
            .append(_t("How long we've been running for this session"))
            .append("\">" +
@@ -304,7 +369,7 @@ class SummaryBarRenderer {
     public String renderShortGeneralHTML() {
         if (_helper == null) return "";
         StringBuilder buf = new StringBuilder(512);
-        buf.append("<table>" +
+        buf.append("<table id=\"sb_shortgeneral\">" +
                    "<tr title=\"")
            .append(_t("The version of the I2P software we are running"))
            .append("\">" +
@@ -330,7 +395,7 @@ class SummaryBarRenderer {
     public String renderNetworkReachabilityHTML() {
         if (_helper == null) return "";
         StringBuilder buf = new StringBuilder(512);
-        buf.append("<h4><a href=\"/confignet#help\" target=\"_top\" title=\"")
+        buf.append("<h4><a href=\"/help#confignet\" target=\"_top\" title=\"")
            .append(_t("Help with configuring your firewall and router for optimal I2P performance"))
            .append("\">")
            .append(_t("Network"))
@@ -387,7 +452,7 @@ class SummaryBarRenderer {
            .append(_t("Peers"))
            .append("</a></h3><hr class=\"b\">\n" +
 
-                   "<table>\n" +
+                   "<table id=\"sb_peers\">\n" +
 
                    "<tr title=\"")
            .append(_t("Peers we've been talking to in the last few minutes/last hour"))
@@ -456,7 +521,7 @@ class SummaryBarRenderer {
            .append("\" target=\"_top\">")
            .append(_t("Bandwidth in/out"))
            .append("</a></h3><hr class=\"b\">" +
-                   "<table>\n" +
+                   "<table id=\"sb_bandwidth\">\n" +
 
                    "<tr><td align=\"left\"><b>")
            .append(DataHelper.formatDuration2(3 * 1000))   // lie and say 3 sec since 1 sec would appear as 1000 ms
@@ -500,7 +565,7 @@ class SummaryBarRenderer {
            .append("\">")
            .append(_t("Tunnels"))
            .append("</a></h3><hr class=\"b\">" +
-                   "<table>\n" +
+                   "<table id=\"sb_tunnels\">\n" +
 
                    "<tr title=\"")
            .append(_t("Used for building and testing tunnels, and communicating with floodfill peers"))
@@ -550,7 +615,7 @@ class SummaryBarRenderer {
            .append("\">")
            .append(_t("Congestion"))
            .append("</a></h3><hr class=\"b\">" +
-                   "<table>\n" +
+                   "<table id=\"sb_queue\">\n" +
 
                    "<tr title=\"")
            .append(_t("Indicates router performance"))
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/SummaryHelper.java b/apps/routerconsole/java/src/net/i2p/router/web/SummaryHelper.java
index 56cffb20007b92abe18035a6ce683e94e67b0880..3c1400b814829f806e0aca720a83a6596e836c57 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/SummaryHelper.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/SummaryHelper.java
@@ -44,23 +44,24 @@ public class SummaryHelper extends HelperBase {
 
     static final String DEFAULT_FULL =
         "HelpAndFAQ" + S +
+        "ShortGeneral" + S +
+        "Bandwidth" + S +
+        "UpdateStatus" + S +
+        "FirewallAndReseedStatus" + S +
+        "NetworkReachability" + S +
         "I2PServices" + S +
         "I2PInternals" + S +
-        "General" + S +
-        "NetworkReachability" + S +
-        "UpdateStatus" + S +
-        "RestartStatus" + S +
         "Peers" + S +
-        "FirewallAndReseedStatus" + S +
-        "Bandwidth" + S +
         "Tunnels" + S +
-        "Congestion" + S +
         "TunnelStatus" + S +
+        "Congestion" + S +
+        "RestartStatus" + S +
         "Destinations" + S +
         "";
 
     static final String DEFAULT_MINIMAL =
         "ShortGeneral" + S +
+        "Bandwidth" + S +
         "NewsHeadings" + S +
         "UpdateStatus" + S +
         "NetworkReachability" + S +
@@ -76,7 +77,7 @@ public class SummaryHelper extends HelperBase {
      */
     public String getIdent() { 
         if (_context == null) return "[no router]";
-        
+
         if (_context.routerHash() != null)
             return _context.routerHash().toBase64().substring(0, 4);
         else
@@ -95,14 +96,14 @@ public class SummaryHelper extends HelperBase {
      */
     public String getUptime() { 
         if (_context == null) return "[no router]";
-        
+
         Router router = _context.router();
         if (router == null) 
             return "[not up]";
         else
             return DataHelper.formatDuration2(router.getUptime());
     }
-    
+
 /**
     this displayed offset, not skew - now handled in reachability()
 
@@ -117,17 +118,17 @@ public class SummaryHelper extends HelperBase {
         return " (" + DataHelper.formatDuration2(diff) + " " + _t("skew") + ")";
     }
 **/
-    
+
     /** allowReseed */
     public boolean allowReseed() {
         return _context.netDb().isInitialized() &&
                (_context.netDb().getKnownRouters() < 30) ||
                 _context.getBooleanProperty("i2p.alwaysAllowReseed");
     }
-    
+
     /** subtract one for ourselves, so if we know no other peers it displays zero */
     public int getAllPeers() { return Math.max(_context.netDb().getKnownRouters() - 1, 0); }
-    
+
     public String getReachability() {
         return reachability(); // + timeSkew();
         // testing
@@ -192,7 +193,7 @@ public class SummaryHelper extends HelperBase {
                 return _t(status.toStatusString());
 
             case DISCONNECTED:
-                return _t("Disconnected - check network cable");
+                return _t("Disconnected - check network connection");
 
             case HOSED:
                 return _t("ERR-UDP Port In Use - Set i2np.udp.internalPort=xxxx in advanced config and restart");
@@ -214,7 +215,7 @@ public class SummaryHelper extends HelperBase {
                 return _t(status.toStatusString());
         }
     }
-    
+
     /**
      * Retrieve amount of used memory.
      *
@@ -227,7 +228,7 @@ public class SummaryHelper extends HelperBase {
         return integerFormatter.format(used) + "KB (" + usedPc + "%)"; 
     }
 ********/
-    
+
     /**
      * How many peers we are talking to now
      *
@@ -325,14 +326,14 @@ public class SummaryHelper extends HelperBase {
         return formatPair(_context.bandwidthLimiter().getReceiveBps(), 
                           _context.bandwidthLimiter().getSendBps());
     }
-    
+
     /**
      *    @return "x.xx / y.yy {K|M}"
      */
     public String getFiveMinuteKBps() {
         if (_context == null) 
             return "0 / 0";
-        
+
         RateStat receiveRate = _context.statManager().getRate("bw.recvRate");
         double in = 0;
         if (receiveRate != null) {
@@ -349,14 +350,14 @@ public class SummaryHelper extends HelperBase {
         }
         return formatPair(in, out);
     }
-    
+
     /**
      *    @return "x.xx / y.yy {K|M}"
      */
     public String getLifetimeKBps() { 
         if (_context == null) 
             return "0 / 0";
-        
+
         RateStat receiveRate = _context.statManager().getRate("bw.recvRate");
         double in;
         if (receiveRate == null)
@@ -371,7 +372,7 @@ public class SummaryHelper extends HelperBase {
             out = sendRate.getLifetimeAverageValue();
         return formatPair(in, out);
     }
-    
+
     /**
      *    @return "x.xx / y.yy {K|M}"
      */
@@ -405,12 +406,12 @@ public class SummaryHelper extends HelperBase {
     public String getInboundTransferred() { 
         if (_context == null) 
             return "0";
-        
+
         long received = _context.bandwidthLimiter().getTotalAllocatedInboundBytes();
 
         return DataHelper.formatSize2(received) + 'B';
     }
-    
+
     /**
      * How much data have we sent since the router started (pretty printed
      * string with 2 decimal places and the appropriate units - GB/MB/KB/bytes)
@@ -419,11 +420,11 @@ public class SummaryHelper extends HelperBase {
     public String getOutboundTransferred() { 
         if (_context == null) 
             return "0";
-        
+
         long sent = _context.bandwidthLimiter().getTotalAllocatedOutboundBytes();
         return DataHelper.formatSize2(sent) + 'B';
     }
-    
+
     /**
      * Client destinations connected locally.
      *
@@ -432,20 +433,20 @@ public class SummaryHelper extends HelperBase {
     public String getDestinations() {
         // convert the set to a list so we can sort by name and not lose duplicates
         List<Destination> clients = new ArrayList<Destination>(_context.clientManager().listClients());
-        
+
         StringBuilder buf = new StringBuilder(512);
         buf.append("<h3><a href=\"/i2ptunnelmgr\" target=\"_top\" title=\"")
            .append(_t("Add/remove/edit &amp; control your client and server tunnels"))
            .append("\">").append(_t("Local Tunnels"))
-           .append("</a></h3><hr class=\"b\"><div class=\"tunnels\">");
+           .append("</a></h3><hr class=\"b\">");
         if (!clients.isEmpty()) {
             Collections.sort(clients, new AlphaComparator());
-            buf.append("<table>");
-            
+            buf.append("<table id=\"sb_localtunnels\">");
+
             for (Destination client : clients) {
                 String name = getName(client);
                 Hash h = client.calculateHash();
-                
+
                 buf.append("<tr><td align=\"right\"><img src=\"/themes/console/images/");
                 if (_context.clientManager().shouldPublishLeaseSet(h))
                     buf.append("server.png\" alt=\"Server\" title=\"").append(_t("Hidden Service")).append("\">");
@@ -462,9 +463,9 @@ public class SummaryHelper extends HelperBase {
                 if (ls != null && _context.tunnelManager().getOutboundClientTunnelCount(h) > 0) {
                     long timeToExpire = ls.getEarliestLeaseDate() - _context.clock().now();
                     if (timeToExpire < 0) {
-                        // red or yellow light                 
+                        // red or yellow light
                         buf.append("<td><img src=\"/themes/console/images/local_inprogress.png\" alt=\"").append(_t("Rebuilding")).append("&hellip;\" title=\"").append(_t("Leases expired")).append(" ").append(DataHelper.formatDuration2(0-timeToExpire));
-                        buf.append(" ").append(_t("ago")).append(". ").append(_t("Rebuilding")).append("&hellip;\"></td></tr>\n");                    
+                        buf.append(" ").append(_t("ago")).append(". ").append(_t("Rebuilding")).append("&hellip;\"></td></tr>\n");
                     } else {
                         // green light 
                         buf.append("<td><img src=\"/themes/console/images/local_up.png\" alt=\"Ready\" title=\"").append(_t("Ready")).append("\"></td></tr>\n");
@@ -478,10 +479,9 @@ public class SummaryHelper extends HelperBase {
         } else {
             buf.append("<center><i>").append(_t("none")).append("</i></center>");
         }
-        buf.append("</div>\n");
         return buf.toString();
     }
-    
+
     /**
      *  Compare translated nicknames - put "shared clients" first in the sort
      *  Inner class, can't be Serializable
@@ -529,7 +529,7 @@ public class SummaryHelper extends HelperBase {
         else
             return _context.tunnelManager().getFreeTunnelCount();
     }
-    
+
     /**
      * How many active outbound tunnels we have.
      *
@@ -540,7 +540,7 @@ public class SummaryHelper extends HelperBase {
         else
             return _context.tunnelManager().getOutboundTunnelCount();
     }
-    
+
     /**
      * How many inbound client tunnels we have.
      *
@@ -551,7 +551,7 @@ public class SummaryHelper extends HelperBase {
         else
             return _context.tunnelManager().getInboundClientTunnelCount();
     }
-    
+
     /**
      * How many active outbound client tunnels we have.
      *
@@ -562,7 +562,7 @@ public class SummaryHelper extends HelperBase {
         else
             return _context.tunnelManager().getOutboundClientTunnelCount();
     }
-    
+
     /**
      * How many tunnels we are participating in.
      *
@@ -591,7 +591,7 @@ public class SummaryHelper extends HelperBase {
     public String getJobLag() { 
         if (_context == null) 
             return "0";
-        
+
         RateStat rs = _context.statManager().getRate("jobQueue.jobLag");
         if (rs == null)
             return "0";
@@ -603,14 +603,14 @@ public class SummaryHelper extends HelperBase {
      * How long it takes us to pump out a message, averaged over the last minute 
      * (pretty printed with the units attached)
      *
-     */   
+     */
     public String getMessageDelay() { 
         if (_context == null) 
             return "0";
-        
+
         return DataHelper.formatDuration2(_context.throttle().getMessageDelay());
     }
-    
+
     /**
      * How long it takes us to test our tunnels, averaged over the last 10 minutes
      * (pretty printed with the units attached)
@@ -619,23 +619,23 @@ public class SummaryHelper extends HelperBase {
     public String getTunnelLag() { 
         if (_context == null) 
             return "0";
-        
+
         return DataHelper.formatDuration2(_context.throttle().getTunnelLag());
     }
-    
+
     public String getTunnelStatus() { 
         if (_context == null) 
             return "";
         return _context.throttle().getTunnelStatus();
     }
-    
+
     public String getInboundBacklog() {
         if (_context == null)
             return "0";
-        
+
         return String.valueOf(_context.tunnelManager().getInboundBuildQueueSize());
     }
-    
+
 /*******
     public String getPRNGStatus() {
         Rate r = _context.statManager().getRate("prng.bufferWaitTime").getRate(60*1000);
@@ -697,7 +697,7 @@ public class SummaryHelper extends HelperBase {
         String status = NewsHelper.getUpdateStatus();
         boolean needSpace = false;
         if (status.length() > 0) {
-            buf.append("<h4>").append(status).append("</h4>\n");
+            buf.append("<h4 class=\"sb_info\">").append(status).append("</h4>\n");
             needSpace = true;
         }
         String dver = NewsHelper.updateVersionDownloaded();
@@ -713,7 +713,7 @@ public class SummaryHelper extends HelperBase {
                 buf.append("<hr>");
             else
                 needSpace = true;
-            buf.append("<h4><b>").append(_t("Update downloaded")).append("<br>");
+            buf.append("<h4 class=\"sb_info\"><b>").append(_t("Update downloaded")).append("<br>");
             if (_context.hasWrapper())
                 buf.append(_t("Click Restart to install"));
             else
@@ -734,7 +734,7 @@ public class SummaryHelper extends HelperBase {
                 buf.append("<hr>");
             else
                 needSpace = true;
-            buf.append("<h4><b>").append(_t("Update available")).append(":<br>");
+            buf.append("<h4 class=\"sb_info\"><b>").append(_t("Update available")).append(":<br>");
             buf.append(_t("Version {0}", getUpdateVersion())).append("<br>");
             buf.append(constraint).append("</b></h4>");
             avail = false;
@@ -746,7 +746,7 @@ public class SummaryHelper extends HelperBase {
                 buf.append("<hr>");
             else
                 needSpace = true;
-            buf.append("<h4><b>").append(_t("Update available")).append(":<br>");
+            buf.append("<h4 class=\"sb_info\"><b>").append(_t("Update available")).append(":<br>");
             buf.append(_t("Version {0}", getUnsignedUpdateVersion())).append("<br>");
             buf.append(unsignedConstraint).append("</b></h4>");
             unsignedAvail = false;
@@ -758,7 +758,7 @@ public class SummaryHelper extends HelperBase {
                 buf.append("<hr>");
             else
                 needSpace = true;
-            buf.append("<h4><b>").append(_t("Update available")).append(":<br>");
+            buf.append("<h4 class=\"sb_info\"><b>").append(_t("Update available")).append(":<br>");
             buf.append(_t("Version {0}", getDevSU3UpdateVersion())).append("<br>");
             buf.append(devSU3Constraint).append("</b></h4>");
             devSU3Avail = false;
@@ -821,7 +821,7 @@ public class SummaryHelper extends HelperBase {
     public String getFirewallAndReseedStatus() {
         StringBuilder buf = new StringBuilder(256);
         if (showFirewallWarning()) {
-            buf.append("<h4><a href=\"/confignet\" target=\"_top\" title=\"")
+            buf.append("<h4 id=\"sb_warning\"><a href=\"/help#configurationhelp\" target=\"_top\" title=\"")
                .append(_t("Help with firewall configuration"))
                .append("\">")
                .append(_t("Check network connection and NAT/firewall"))
@@ -833,7 +833,7 @@ public class SummaryHelper extends HelperBase {
         if (allowReseed()) {
             if (reseedInProgress) {
                 // While reseed occurring, show status message instead
-                buf.append("<i>").append(_context.netDb().reseedChecker().getStatus()).append("</i><br>");
+                buf.append("<div class=\"sb_notice\"><i>").append(_context.netDb().reseedChecker().getStatus()).append("</i></div>");
             } else {
                 // While no reseed occurring, show reseed link
                 long nonce = _context.random().nextLong();
@@ -843,14 +843,15 @@ public class SummaryHelper extends HelperBase {
                 String uri = getRequestURI();
                 buf.append("<p><form action=\"").append(uri).append("\" method=\"POST\">\n");
                 buf.append("<input type=\"hidden\" name=\"reseedNonce\" value=\"").append(nonce).append("\" >\n");
-                buf.append("<button type=\"submit\" class=\"reload\" value=\"Reseed\" >").append(_t("Reseed")).append("</button></form></p>\n");
+                buf.append("<button type=\"submit\" title=\"").append(_t("Attempt to download router reference files (if automatic reseed has failed)"));
+                buf.append("\" class=\"reload\" value=\"Reseed\" >").append(_t("Reseed")).append("</button></form></p>\n");
             }
         }
         // If a new reseed ain't running, and the last reseed had errors, show error message
         if (!reseedInProgress) {
             String reseedErrorMessage = _context.netDb().reseedChecker().getError();
             if (reseedErrorMessage.length() > 0) {
-                buf.append("<i>").append(reseedErrorMessage).append("</i><br>");
+                buf.append("<div class=\"sb_notice\"><i>").append(reseedErrorMessage).append("</i></div>");
             }
         }
         if (buf.length() <= 0)
@@ -929,7 +930,7 @@ public class SummaryHelper extends HelperBase {
         String imgPath = CSSHelper.BASE_THEME_PATH + theme + "/images/";
 
         StringBuilder buf = new StringBuilder(2048);
-        buf.append("<table class=\"sidebarconf\"><tr><th>")
+        buf.append("<table id=\"sidebarconf\"><tr><th title=\"Mark section for removal from the sidebar\">")
            .append(_t("Remove"))
            .append("</th><th>")
            .append(_t("Name"))
@@ -938,11 +939,15 @@ public class SummaryHelper extends HelperBase {
            .append("</th></tr>\n");
         for (String section : sections) {
             int i = sections.indexOf(section);
-            buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" name=\"delete_")
+            buf.append("<tr><td align=\"center\"><input type=\"checkbox\" class=\"optbox\" id=\"")
+               .append(sectionNames.get(section))
+               .append("\" name=\"delete_")
                .append(i)
-               .append("\"></td><td align=\"left\">")
+               .append("\"></td><td align=\"left\"><label for=\"")
+               .append(sectionNames.get(section))
+               .append("\">")
                .append(_t(sectionNames.get(section)))
-               .append("</td><td align=\"right\"><input type=\"hidden\" name=\"order_")
+               .append("</label></td><td align=\"right\"><input type=\"hidden\" name=\"order_")
                .append(i).append('_').append(section)
                .append("\" value=\"")
                .append(i)
@@ -997,9 +1002,8 @@ public class SummaryHelper extends HelperBase {
         buf.append("<tr><td align=\"center\">" +
                    "<input type=\"submit\" name=\"action\" class=\"delete\" value=\"")
            .append(_t("Delete selected"))
-           .append("\"></td><td align=\"left\"><b>")
-           .append(_t("Add")).append(":</b> " +
-                   "<select name=\"name\">\n" +
+           .append("\"></td><td align=\"left\">")
+           .append("<select name=\"name\">\n" +
                    "<option value=\"\" selected=\"selected\">")
            .append(_t("Select a section to add"))
            .append("</option>\n");
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/SummaryRenderer.java b/apps/routerconsole/java/src/net/i2p/router/web/SummaryRenderer.java
index 546d094e6b298d6987834bf0503ce0672b073ead..dd58ef8afb4d8d26cdca4f719e1dcddee0e55cc2 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/SummaryRenderer.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/SummaryRenderer.java
@@ -35,7 +35,9 @@ class SummaryRenderer {
     private final Log _log;
     private final SummaryListener _listener;
     private final I2PAppContext _context;
-    private static final Color RESTART_BAR_COLOR = new Color(255, 144, 0, 224);
+    private static final Color AREA_COLOR = new Color(100, 160, 200, 240);
+    private static final Color LINE_COLOR = new Color(0, 30, 110, 255);
+    private static final Color RESTART_BAR_COLOR = new Color(223, 13, 13, 255);
 
     public SummaryRenderer(I2PAppContext ctx, SummaryListener lsnr) { 
         _log = ctx.logManager().getLog(SummaryRenderer.class);
@@ -131,8 +133,11 @@ class SummaryRenderer {
                 small = small.deriveFont(small.getSize2D() + 2.0f);
                 large = large.deriveFont(Font.PLAIN, large.getSize2D() + 3.0f);
             } else {
-                small = small.deriveFont(small.getSize2D() + 1.0f);
-                large = large.deriveFont(large.getSize2D() + 1.0f);
+            //    small = small.deriveFont(small.getSize2D() + 1.0f);
+            // if specified font family is missing, jrobin will use fallback
+                  small = new Font("Droid Sans Mono", Font.PLAIN, 11);
+            //    large = large.deriveFont(large.getSize2D() + 1.0f);
+                  large = new Font("Droid Sans", Font.PLAIN, 13);
             }
             def.setSmallFont(small);
             def.setLargeFont(large);
@@ -184,14 +189,14 @@ class SummaryRenderer {
 
             def.datasource(plotName, path, plotName, SummaryListener.CF, _listener.getBackendName());
             if (descr.length() > 0) {
-                def.area(plotName, Color.BLUE, descr + "\\r");
+                def.area(plotName, AREA_COLOR, descr + "\\l");
             } else {
-                def.area(plotName, Color.BLUE);
+                def.area(plotName, AREA_COLOR);
             }
             if (!hideLegend) {
-                def.gprint(plotName, SummaryListener.CF, _t("avg") + ": %.2f %s");
-                def.gprint(plotName, "MAX", ' ' + _t("max") + ": %.2f %S");
-                def.gprint(plotName, "LAST", ' ' + _t("now") + ": %.2f %S\\r");
+                def.gprint(plotName, SummaryListener.CF, "   " + _t("Avg") + ": %.2f%s");
+                def.gprint(plotName, "MAX", ' ' + _t("Max") + ": %.2f%S");
+                def.gprint(plotName, "LAST", ' ' + _t("Now") + ": %.2f%S\\l");
             }
             String plotName2 = null;
             if (lsnr2 != null) {
@@ -200,25 +205,32 @@ class SummaryRenderer {
                 String path2 = lsnr2.getData().getPath();
                 String descr2 = _t(lsnr2.getRate().getRateStat().getDescription());
                 def.datasource(plotName2, path2, plotName2, SummaryListener.CF, lsnr2.getBackendName());
-                def.line(plotName2, Color.RED, descr2 + "\\r", 3);
+                def.line(plotName2, LINE_COLOR, descr2 + "\\l", 2);
                 if (!hideLegend) {
-                    def.gprint(plotName2, SummaryListener.CF, _t("avg") + ": %.2f %s");
-                    def.gprint(plotName2, "MAX", ' ' + _t("max") + ": %.2f %S");
-                    def.gprint(plotName2, "LAST", ' ' + _t("now") + ": %.2f %S\\r");
+                    def.gprint(plotName2, SummaryListener.CF, "   " + _t("Avg") + ": %.2f%s");
+                    def.gprint(plotName2, "MAX", ' ' + _t("Max") + ": %.2f%S");
+                    def.gprint(plotName2, "LAST", ' ' + _t("Now") + ": %.2f%S\\l");
                 }
             }
             if (!hideLegend) {
-                // '07-Jul 21:09 UTC' with month name in the system locale
-                SimpleDateFormat sdf = new SimpleDateFormat("dd-MMM HH:mm");
+                // '07 Jul 21:09' with month name in the system locale
+                // TODO: Fix Arabic time display
+                SimpleDateFormat sdf = new SimpleDateFormat("dd MMM HH:mm");
                 Map<Long, String> events = ((RouterContext)_context).router().eventLog().getEvents(EventLog.STARTED, start);
                 for (Map.Entry<Long, String> event : events.entrySet()) {
                     long started = event.getKey().longValue();
                     if (started > start && started < end) {
-                        String legend = _t("Restart") + ' ' + sdf.format(new Date(started)) + " UTC " + event.getValue() + "\\r";
-                        def.vrule(started / 1000, RESTART_BAR_COLOR, legend, 4.0f);
+                        // String legend = _t("Restart") + ' ' + sdf.format(new Date(started)) + " UTC " + event.getValue() + "\\l";
+                        if ("ar".equals(lang)) {
+                            String legend = _t("Restart") + ' ' + sdf.format(new Date(started)) + " - " + event.getValue() + "\\l";
+                            def.vrule(started / 1000, RESTART_BAR_COLOR, legend, 2.0f);
+                        } else {
+                            String legend = _t("Restart") + ' ' + sdf.format(new Date(started)) + " [" + event.getValue() + "]\\l";
+                            def.vrule(started / 1000, RESTART_BAR_COLOR, legend, 2.0f);
+                        }
                     }
                 }
-                def.comment(sdf.format(new Date(start)) + " -- " + sdf.format(new Date(end)) + " UTC\\r");
+                def.comment(sdf.format(new Date(start)) + " — " + sdf.format(new Date(end)) + " UTC\\r");
             }
             if (!showCredit)
                 def.setShowSignature(false);
@@ -227,8 +239,8 @@ class SummaryRenderer {
             // (but with the same coordinates, so the values may look pretty skewed)
                 def.datasource(dsNames[0], path, dsNames[0], "AVERAGE", "MEMORY");
                 def.datasource(dsNames[1], path, dsNames[1], "AVERAGE", "MEMORY");
-                def.area(dsNames[0], Color.BLUE, _listener.getRate().getRateStat().getDescription());
-                def.line(dsNames[1], Color.RED, "Events per period");
+                def.area(dsNames[0], AREA_COLOR, _listener.getRate().getRateStat().getDescription());
+                def.line(dsNames[1], LINE_COLOR, "Events per period");
             */
             if (hideLegend) 
                 def.setNoLegend(true);
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/SybilRenderer.java b/apps/routerconsole/java/src/net/i2p/router/web/SybilRenderer.java
index 56120aa845bcef55588b9b7ab52b8c4c14ca3f1f..2ac4d5c519ee35ac8362ec1a7463e8e2d70fa77f 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/SybilRenderer.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/SybilRenderer.java
@@ -161,15 +161,15 @@ class SybilRenderer {
                  ris.add(ri);
         }
         if (ris.isEmpty()) {
-            out.write("<h3>No known floodfills</h3>");
+            out.write("<h3 class=\"sybils\">No known floodfills</h3>");
             return;
         }
 
         StringBuilder buf = new StringBuilder(4*1024);
-        buf.append("<p><b>This is an experimental network database tool for debugging and analysis. Do not panic even if you see warnings below. " +
+        buf.append("<p id=\"sybilinfo\"><b>This is an experimental network database tool for debugging and analysis. Do not panic even if you see warnings below. " +
                    "Possible \"threats\" are summarized at the bottom, however these are unlikely to be real threats. " +
                    "If you see anything you would like to discuss with the devs, contact us on IRC #i2p-dev.</b></p>" +
-                   "<ul><li><a href=\"#known\">FF Summary</a>" +
+                   "<div id=\"sybilnav\"><ul><li><a href=\"#known\">FF Summary</a>" +
                    "</li><li><a href=\"#family\">Same Family</a>" +
                    "</li><li><a href=\"#ourIP\">IP close to us</a>" +
                    "</li><li><a href=\"#sameIP\">Same IP</a>" +
@@ -181,10 +181,10 @@ class SybilRenderer {
                    "</li><li><a href=\"#dht\">DHT neighbors</a>" +
                    "</li><li><a href=\"#dest\">Close to our destinations</a>" +
                    "</li><li><a href=\"#threats\">Highest threats</a>" +
-                   "</li></ul>");
+                   "</li></ul></div>");
 
         renderRouterInfo(buf, _context.router().getRouterInfo(), null, true, false);
-        buf.append("<h3 id=\"known\">Known Floodfills: ").append(ris.size()).append("</h3>");
+        buf.append("<h3 id=\"known\" class=\"sybils\">Known Floodfills: ").append(ris.size()).append("</h3>");
 
         double tot = 0;
         int count = 200;
@@ -196,12 +196,13 @@ class SybilRenderer {
             tot += d;
         }
         double avgMinDist = tot / count;
-        buf.append("<p>Average closest floodfill distance: " + fmt.format(avgMinDist) + "</p>");
-        buf.append("<p>Routing Data: \"").append(DataHelper.getUTF8(_context.routerKeyGenerator().getModData()))
-           .append("\" Last Changed: ").append(new Date(_context.routerKeyGenerator().getLastChanged()));
-        buf.append("</p><p>Next Routing Data: \"").append(DataHelper.getUTF8(_context.routerKeyGenerator().getNextModData()))
-           .append("\" Rotates in: ").append(DataHelper.formatDuration(_context.routerKeyGenerator().getTimeTillMidnight()));
-        buf.append("</p>");
+        buf.append("<div id=\"sybils_summary\">\n");
+        buf.append("<b>Average closest floodfill distance:</b> ").append(fmt.format(avgMinDist)).append("<br>\n");
+        buf.append("<b>Routing Data:</b> \"").append(DataHelper.getUTF8(_context.routerKeyGenerator().getModData()))
+           .append("\" <b>Last Changed:</b> ").append(new Date(_context.routerKeyGenerator().getLastChanged())).append("<br>\n");
+        buf.append("<b>Next Routing Data:</b> \"").append(DataHelper.getUTF8(_context.routerKeyGenerator().getNextModData()))
+           .append("\" <b>Rotates in:</b> ").append(DataHelper.formatDuration(_context.routerKeyGenerator().getTimeTillMidnight())).append("\n");
+        buf.append("</div>\n");
 
         Map<Hash, Points> points = new HashMap<Hash, Points>(64);
 
@@ -216,20 +217,20 @@ class SybilRenderer {
         renderPairDistance(out, buf, ris, points);
 
         // Distance to our router analysis
-        buf.append("<h3 id=\"ritoday\">Closest Floodfills to Our Routing Key (Where we Store our RI)</h3>");
-        buf.append("<p><a href=\"/netdb?caps=f&amp;sybil\">See all</a></p>");
+        buf.append("<h3 id=\"ritoday\" class=\"sybils\">Closest Floodfills to Our Routing Key (Where we Store our RI)</h3>");
+        buf.append("<p class=\"sybil_info\"><a href=\"/netdb?caps=f&amp;sybil\">See all</a></p>");
         renderRouterInfoHTML(out, buf, ourRKey, avgMinDist, ris, points);
         RouterKeyGenerator rkgen = _context.routerKeyGenerator();
         Hash nkey = rkgen.getNextRoutingKey(us);
-        buf.append("<h3 id=\"ritmrw\">Closest Floodfills to Tomorrow's Routing Key (Where we will Store our RI)</h3>");
-        buf.append("<p><a href=\"/netdb?caps=f&amp;sybil\">See all</a></p>");
+        buf.append("<h3 id=\"ritmrw\" class=\"sybils\">Closest Floodfills to Tomorrow's Routing Key (Where we will Store our RI)</h3>");
+        buf.append("<p class=\"sybil_info\"><a href=\"/netdb?caps=f&amp;sybil\">See all</a></p>");
         renderRouterInfoHTML(out, buf, nkey, avgMinDist, ris, points);
 
-        buf.append("<h3 id=\"dht\">Closest Floodfills to Our Router Hash (DHT Neighbors if we are Floodfill)</h3>");
+        buf.append("<h3 id=\"dht\" class=\"sybils\">Closest Floodfills to Our Router Hash (DHT Neighbors if we are Floodfill)</h3>");
         renderRouterInfoHTML(out, buf, us, avgMinDist, ris, points);
 
         // Distance to our published destinations analysis
-        buf.append("<h3 id=\"dest\">Floodfills Close to Our Destinations</h3>");
+        buf.append("<h3 id=\"dest\" class=\"sybils\">Floodfills Close to Our Destinations</h3>");
         Map<Hash, TunnelPool> clientInboundPools = _context.tunnelManager().getInboundClientPools();
         List<Hash> destinations = new ArrayList<Hash>(clientInboundPools.keySet());
         boolean debug = _context.getBooleanProperty(HelperBase.PROP_ADVANCED);
@@ -245,12 +246,12 @@ class SybilRenderer {
             Hash rkey = ls.getRoutingKey();
             TunnelPool in = clientInboundPools.get(client);
             String name = (in != null) ? in.getSettings().getDestinationNickname() : client.toBase64().substring(0,4);
-            buf.append("<h3>Closest floodfills to the Routing Key for " + DataHelper.escapeHTML(name) + " (where we store our LS)</h3>");
-            buf.append("<p><a href=\"/netdb?caps=f&amp;sybil=" + ls.getHash().toBase64() + "\">See all</a></p>");
+            buf.append("<h3 class=\"sybils\">Closest floodfills to the Routing Key for " + DataHelper.escapeHTML(name) + " (where we store our LS)</h3>");
+            buf.append("<p class=\"sybil_info\"><a href=\"/netdb?caps=f&amp;sybil=" + ls.getHash().toBase64() + "\">See all</a></p>");
             renderRouterInfoHTML(out, buf, rkey, avgMinDist, ris, points);
             nkey = rkgen.getNextRoutingKey(ls.getHash());
-            buf.append("<h3>Closest floodfills to Tomorrow's Routing Key for " + DataHelper.escapeHTML(name) + " (where we will store our LS)</h3>");
-            buf.append("<p><a href=\"/netdb?caps=f&amp;sybil=" + ls.getHash().toBase64() + "\">See all</a></p>");
+            buf.append("<h3 class=\"sybils\">Closest floodfills to Tomorrow's Routing Key for " + DataHelper.escapeHTML(name) + " (where we will store our LS)</h3>");
+            buf.append("<p class=\"sybil_info\"><a href=\"/netdb?caps=f&amp;sybil=" + ls.getHash().toBase64() + "\">See all</a></p>");
             renderRouterInfoHTML(out, buf, nkey, avgMinDist, ris, points);
         }
 
@@ -261,7 +262,7 @@ class SybilRenderer {
         if (!points.isEmpty()) {
             List<Hash> warns = new ArrayList<Hash>(points.keySet());
             Collections.sort(warns, new PointsComparator(points));
-            buf.append("<h3 id=\"threats\">Routers with Most Threat Points</h3>");
+            buf.append("<h3 id=\"threats\" class=\"sybils\">Routers with Most Threat Points</h3>");
             for (Hash h : warns) {
                 RouterInfo ri = _context.netDb().lookupRouterInfoLocally(h);
                 if (ri == null)
@@ -270,7 +271,7 @@ class SybilRenderer {
                 double p = pp.points;
                 if (p < MIN_DISPLAY_POINTS)
                     break;  // sorted
-                buf.append("<p><b>Threat Points: " + fmt.format(p) + "</b><ul>");
+                buf.append("<p class=\"threatpoints\"><b>Threat Points: " + fmt.format(p) + "</b><ul>");
                 for (String s : pp.reasons) {
                     buf.append("<li>").append(s).append("</li>");
                 }
@@ -318,9 +319,9 @@ class SybilRenderer {
         }
 
         double avg = total / (sz * sz / 2);
-        buf.append("<h3>Average Floodfill Distance is ").append(fmt.format(avg)).append("</h3>");
+        buf.append("<h3 class=\"sybils\">Average Floodfill Distance is ").append(fmt.format(avg)).append("</h3>");
 
-        buf.append("<h3 id=\"pairs\">Closest Floodfill Pairs by Hash</h3>");
+        buf.append("<h3 id=\"pairs\" class=\"sybils\">Closest Floodfill Pairs by Hash</h3>");
         for (Pair p : pairs) {
             double distance = biLog2(p.dist);
             double point = MIN_CLOSE - distance;
@@ -328,7 +329,7 @@ class SybilRenderer {
                 break;  // sorted;
             if (point >= 2) {
                 // limit display
-                buf.append("<p><b>Hash Distance: ").append(fmt.format(distance)).append(": </b>");
+                buf.append("<p class=\"hashdist\"><b>Hash Distance: ").append(fmt.format(distance)).append(": </b>");
                 buf.append("</p>");
                 renderRouterInfo(buf, p.r1, null, false, false);
                 renderRouterInfo(buf, p.r2, null, false, false);
@@ -398,14 +399,14 @@ class SybilRenderer {
         byte[] ourIP = getIP(us);
         if (ourIP == null)
             return;
-        buf.append("<h3 \"ourIP\">Floodfills close to Our IP</h3>");
+        buf.append("<h3 id=\"ourIP\" class=\"sybils\">Floodfills close to Our IP</h3>");
         boolean found = false;
         for (RouterInfo info : ris) {
             byte[] ip = getIP(info);
             if (ip == null)
                 continue;
             if (ip[0] == ourIP[0] && ip[1] == ourIP[1]) {
-                buf.append("<p><b>");
+                buf.append("<p id=\"sybil_info\"><b>");
                 if (ip[2] == ourIP[2]) {
                     if (ip[3] == ourIP[3]) {
                         buf.append("Same IP as us");
@@ -424,14 +425,14 @@ class SybilRenderer {
             }
         }
         if (!found)
-            buf.append("<p>None</p>");
+            buf.append("<p class=\"notfound\">None</p>");
         out.write(buf.toString());
         out.flush();
         buf.setLength(0);
     }
 
     private void renderIPGroups32(Writer out, StringBuilder buf, List<RouterInfo> ris, Map<Hash, Points> points) throws IOException {
-        buf.append("<h3 id=\"sameIP\">Floodfills with the Same IP</h3>");
+        buf.append("<h3 id=\"sameIP\" class=\"sybils\">Floodfills with the Same IP</h3>");
         ObjectCounter<Integer> oc = new ObjectCounter<Integer>();
         for (RouterInfo info : ris) {
             byte[] ip = getIP(info);
@@ -456,7 +457,7 @@ class SybilRenderer {
             int i2 = (i >> 8) & 0xff;
             int i3 = i & 0xff;
             String sip = i0 + "." + i1 + '.' + i2 + '.' + i3;
-            buf.append("<p><b>").append(count).append(" floodfills with IP <a href=\"/netdb?ip=")
+            buf.append("<p class=\"sybil_info\"><b>").append(count).append(" floodfills with IP <a href=\"/netdb?ip=")
                .append(sip).append("&amp;sybil\">").append(sip)
                .append("</a>:</b></p>");
             for (RouterInfo info : ris) {
@@ -478,14 +479,14 @@ class SybilRenderer {
             }
         }
         if (!found)
-            buf.append("<p>None</p>");
+            buf.append("<p class=\"notfound\">None</p>");
         out.write(buf.toString());
         out.flush();
         buf.setLength(0);
     }
 
     private void renderIPGroups24(Writer out, StringBuilder buf, List<RouterInfo> ris, Map<Hash, Points> points) throws IOException {
-        buf.append("<h3 id=\"same24\">Floodfills in the Same /24 (2 minimum)</h3>");
+        buf.append("<h3 id=\"same24\" class=\"sybils\">Floodfills in the Same /24 (2 minimum)</h3>");
         ObjectCounter<Integer> oc = new ObjectCounter<Integer>();
         for (RouterInfo info : ris) {
             byte[] ip = getIP(info);
@@ -509,7 +510,7 @@ class SybilRenderer {
             int i1 = (i >> 8) & 0xff;
             int i2 = i & 0xff;
             String sip = i0 + "." + i1 + '.' + i2 + ".0/24";
-            buf.append("<p><b>").append(count).append(" floodfills with IP <a href=\"/netdb?ip=")
+            buf.append("<p class=\"sybil_info\"><b>").append(count).append(" floodfills with IP <a href=\"/netdb?ip=")
                .append(sip).append("&amp;sybil\">").append(sip)
                .append("</a>:</b></p>");
             for (RouterInfo info : ris) {
@@ -529,14 +530,14 @@ class SybilRenderer {
             }
         }
         if (!found)
-            buf.append("<p>None</p>");
+            buf.append("<p class=\"notfound\">None</p>");
         out.write(buf.toString());
         out.flush();
         buf.setLength(0);
     }
 
     private void renderIPGroups16(Writer out, StringBuilder buf, List<RouterInfo> ris, Map<Hash, Points> points) throws IOException {
-        buf.append("<h3 id=\"same16\">Floodfills in the Same /16 (4 minimum)</h3>");
+        buf.append("<h3 id=\"same16\" class=\"sybils\">Floodfills in the Same /16 (4 minimum)</h3>");
         ObjectCounter<Integer> oc = new ObjectCounter<Integer>();
         for (RouterInfo info : ris) {
             byte[] ip = getIP(info);
@@ -559,7 +560,7 @@ class SybilRenderer {
             int i0 = i >> 8;
             int i1 = i & 0xff;
             String sip = i0 + "." + i1 + ".0/16";
-            buf.append("<p><b>").append(count).append(" floodfills with IP <a href=\"/netdb?ip=")
+            buf.append("<p class=\"sybil_info\"><b>").append(count).append(" floodfills with IP <a href=\"/netdb?ip=")
                .append(sip).append("&amp;sybil\">").append(sip)
                .append("</a></b></p>");
             for (RouterInfo info : ris) {
@@ -578,14 +579,14 @@ class SybilRenderer {
             }
         }
         if (!found)
-            buf.append("<p>None</p>");
+            buf.append("<p class=\"notfound\">None</p>");
         out.write(buf.toString());
         out.flush();
         buf.setLength(0);
     }
 
     private void renderIPGroupsFamily(Writer out, StringBuilder buf, List<RouterInfo> ris, Map<Hash, Points> points) throws IOException {
-        buf.append("<h3>Floodfills in the Same Declared Family</h3>");
+        buf.append("<h3 id=\"samefamily\" class=\"sybils\">Floodfills in the Same Declared Family</h3>");
         ObjectCounter<String> oc = new ObjectCounter<String>();
         for (RouterInfo info : ris) {
             String fam = info.getOption("family");
@@ -601,8 +602,8 @@ class SybilRenderer {
         for (String s : foo) {
             int count = oc.count(s);
             String ss = DataHelper.escapeHTML(s);
-            buf.append("<p><b>").append(count).append(" floodfills in declared family \"<a href=\"/netdb?fam=")
-               .append(ss).append("&amp;sybil\">").append(ss).append("</a>\"</b></p>");
+            buf.append("<p class=\"family\"><b>").append(count).append(" floodfills in family:&nbsp;&nbsp;<a href=\"/netdb?fam=")
+               .append(ss).append("&amp;sybil\">").append(ss).append("</a></b></p>");
             for (RouterInfo info : ris) {
                 String fam = info.getOption("family");
                 if (fam == null)
@@ -626,7 +627,7 @@ class SybilRenderer {
             }
         }
         if (!found)
-            buf.append("<p>None</p>");
+            buf.append("<p class=\"notfound\">None</p>");
         out.write(buf.toString());
         out.flush();
         buf.setLength(0);
@@ -727,11 +728,11 @@ class SybilRenderer {
                 if (i == 0) {
                     //buf.append("<p><b>Not to worry, but above router is closer than average minimum distance " + fmt.format(avgMinDist) + "</b></p>");
                 } else if (i == 1) {
-                    buf.append("<p><b>Not to worry, but above routers are closer than average minimum distance " + fmt.format(avgMinDist) + "</b></p>");
+                    buf.append("<p class=\"sybil_info\"><b>Not to worry, but above routers are closer than average minimum distance " + fmt.format(avgMinDist) + "</b></p>");
                 } else if (i == 2) {
-                    buf.append("<p><b>Possible Sybil Warning - above routers are closer than average minimum distance " + fmt.format(avgMinDist) + "</b></p>");
+                    buf.append("<p class=\"sybil_info\"><b>Possible Sybil Warning - above routers are closer than average minimum distance " + fmt.format(avgMinDist) + "</b></p>");
                 } else {
-                    buf.append("<p><b>Major Sybil Warning - above router is closer than average minimum distance " + fmt.format(avgMinDist) + "</b></p>");
+                    buf.append("<p class=\"sybil_info\"><b>Major Sybil Warning - above router is closer than average minimum distance " + fmt.format(avgMinDist) + "</b></p>");
                 }
             }
             // this is dumb because they are already sorted
@@ -753,7 +754,7 @@ class SybilRenderer {
                 break;
         }
         double avg = tot / count;
-        buf.append("<p><b>Totals for " + count + " floodfills: </b>MIN=" + fmt.format(min) + " AVG=" + fmt.format(avg) + " MEDIAN=" + fmt.format(median) + " MAX=" + fmt.format(max) + "</p>\n");
+        buf.append("<p id=\"sybil_totals\"><b>Totals for " + count + " floodfills: </b>MIN=" + fmt.format(min) + " AVG=" + fmt.format(avg) + " MEDIAN=" + fmt.format(median) + " MAX=" + fmt.format(max) + "</p>\n");
         out.write(buf.toString());
         out.flush();
         buf.setLength(0);
@@ -788,35 +789,35 @@ class SybilRenderer {
      */
     private double renderRouterInfo(StringBuilder buf, RouterInfo info, Hash us, boolean isUs, boolean full) {
         String hash = info.getIdentity().getHash().toBase64();
-        buf.append("<table><tr><th><a name=\"").append(hash.substring(0, 6)).append("\" ></a>");
+        buf.append("<table class=\"sybil_routerinfo\"><a name=\"").append(hash.substring(0, 6)).append("\" ></a><tr>");
         double distance = 0;
         if (isUs) {
-            buf.append("<a name=\"our-info\" ></a><b>" + _t("Our info") + ": ").append(hash).append("</b></th></tr><tr><td>\n");
+            buf.append("<th colspan=\"4\"><a name=\"our-info\" ></a><b>" + _t("Our info") + ":</b> <code>").append(hash).append("</code></th></tr>\n");
         } else {
-            buf.append("<b>" + _t("Router") + ":</b> ").append(hash).append("\n");
+            buf.append("<th colspan=\"2\"><b>" + _t("Router") + ":</b> <code>").append(hash).append("</code>\n");
             if (!full) {
-                buf.append("[<a href=\"netdb?r=").append(hash.substring(0, 6)).append("\" >").append(_t("Full entry")).append("</a>]");
+                buf.append("</th><th><a title=\"View extended router info\" class=\"viewfullentry\" href=\"netdb?r=").append(hash.substring(0, 6)).append("\" >[").append(_t("Full entry")).append("]</a></th><th>");
             }
-            buf.append("</th><th><img src=\"/imagegen/id?s=32&amp;c=" + hash.replace("=", "%3d") + "\" height=\"32\" width=\"32\"> ");
-            buf.append("</th></tr><tr><td colspan=\"2\">\n");
+            buf.append("<img src=\"/imagegen/id?s=32&amp;c=" + hash.replace("=", "%3d") + "\" height=\"32\" width=\"32\"> ");
+            buf.append("</th></tr>\n");
             if (us != null) {
                 BigInteger dist = HashDistance.getDistance(us, info.getHash());
                 distance = biLog2(dist);
-                buf.append("<b>Hash Distance: ").append(fmt.format(distance)).append("</b><br>");
+                buf.append("<tr><td><b>Hash Distance:</b></td><td colspan=\"3\">").append(fmt.format(distance)).append("</td></tr>\n");
             }
         }
-        buf.append("<b>Routing Key: </b>").append(info.getRoutingKey().toBase64()).append("<br>\n");
-        buf.append("<b>Version: </b>").append(DataHelper.stripHTML(info.getVersion())).append("<br>\n");
-        buf.append("<b>Caps: </b>").append(DataHelper.stripHTML(info.getCapabilities())).append("<br>\n");
+        buf.append("<tr><td><b>Routing Key:</b></td><td colspan=\"3\">").append(info.getRoutingKey().toBase64()).append("</td></tr>\n");
+        buf.append("<tr><td><b>Version:</b></td><td colspan=\"3\">").append(DataHelper.stripHTML(info.getVersion())).append("</td></tr>\n");
+        buf.append("<tr><td><b>Caps:</b></td><td colspan=\"3\">").append(DataHelper.stripHTML(info.getCapabilities())).append("</td></tr>\n");
         String fam = info.getOption("family");
         if (fam != null)
-            buf.append("<b>Family: ").append(DataHelper.escapeHTML(fam)).append("</b><br>\n");
+            buf.append("<tr><td><b>Family:</b></td><td colspan=\"3\">").append(DataHelper.escapeHTML(fam)).append("</td></tr>\n");
         String kls = info.getOption("netdb.knownLeaseSets");
         if (kls != null)
-            buf.append("<b>Lease Sets: </b>").append(DataHelper.stripHTML(kls)).append("<br>\n");
+            buf.append("<tr><td><b>Lease Sets:</b></td><td colspan=\"3\">").append(DataHelper.stripHTML(kls)).append("</td></tr>\n");
         String kr = info.getOption("netdb.knownRouters");
         if (kr != null)
-            buf.append("<b>Routers: </b>").append(DataHelper.stripHTML(kr)).append("<br>\n");
+            buf.append("<tr><td><b>Routers:</b></td><td colspan=\"3\">").append(DataHelper.stripHTML(kr)).append("</td></tr>\n");
         
         long now = _context.clock().now();
         if (!isUs) {
@@ -825,46 +826,46 @@ class SybilRenderer {
                 long heard = prof.getFirstHeardAbout();
                 if (heard > 0) {
                     long age = Math.max(now - heard, 1);
-                    buf.append("<b>First heard about:</b> ")
-                       .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+                    buf.append("<tr><td><b>First heard about:</b></td><td colspan=\"3\">")
+                       .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("</td></tr>\n");
                 }
                 heard = prof.getLastHeardAbout();
                 if (heard > 0) {
                     long age = Math.max(now - heard, 1);
-                    buf.append("<b>Last heard about:</b> ")
-                       .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+                    buf.append("<tr><td><b>Last heard about:</b></td><td colspan=\"3\">")
+                       .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("</td></tr>\n");
                 }
                 heard = prof.getLastHeardFrom();
                 if (heard > 0) {
                     long age = Math.max(now - heard, 1);
-                    buf.append("<b>Last heard from:</b> ")
-                       .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+                    buf.append("<tr><td><b>Last heard from:</b></td><td colspan=\"3\">")
+                       .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("</td></tr>\n");
                 }
                 DBHistory dbh = prof.getDBHistory();
                 if (dbh != null) {
                     heard = dbh.getLastLookupSuccessful();
                     if (heard > 0) {
                         long age = Math.max(now - heard, 1);
-                        buf.append("<b>Last lookup successful:</b> ")
-                           .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+                        buf.append("<tr><td><b>Last lookup successful:</b></td><td colspan=\"3\">")
+                           .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("</td></tr>\n");
                     }
                     heard = dbh.getLastLookupFailed();
                     if (heard > 0) {
                         long age = Math.max(now - heard, 1);
-                        buf.append("<b>Last lookup failed:</b> ")
-                           .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+                        buf.append("<tr><td><b>Last lookup failed:</b></td><td colspan=\"3\"> ")
+                           .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("</td></tr>\n");
                     }
                     heard = dbh.getLastStoreSuccessful();
                     if (heard > 0) {
                         long age = Math.max(now - heard, 1);
-                        buf.append("<b>Last store successful:</b> ")
-                           .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+                        buf.append("<tr><td><b>Last store successful:</b></td><td colspan=\"3\">")
+                           .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("</td></tr>\n");
                     }
                     heard = dbh.getLastStoreFailed();
                     if (heard > 0) {
                         long age = Math.max(now - heard, 1);
-                        buf.append("<b>Last store failed:</b> ")
-                           .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+                        buf.append("<tr><td><b>Last store failed:</b></td><td colspan=\"3\">")
+                           .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("</td></tr>\n");
                     }
                 }
                 // any other profile stuff?
@@ -872,20 +873,21 @@ class SybilRenderer {
         }
         long age = Math.max(now - info.getPublished(), 1);
         if (isUs && _context.router().isHidden()) {
-            buf.append("<b>").append(_t("Hidden")).append(", ").append(_t("Updated")).append(":</b> ")
-               .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+            buf.append("<tr><td><b>").append(_t("Hidden")).append(", ").append(_t("Updated")).append(":</b></td><td colspan=\"3\">")
+               .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("</td></tr>\n");
         } else {
-            buf.append("<b>").append(_t("Published")).append(":</b> ")
-               .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("<br>\n");
+            buf.append("<tr><td><b>").append(_t("Published")).append(":</b></td><td colspan=\"3\">")
+               .append(_t("{0} ago", DataHelper.formatDuration2(age))).append("</td></tr>\n");
         }
-        buf.append("<b>").append(_t("Signing Key")).append(":</b> ")
-           .append(info.getIdentity().getSigningPublicKey().getType().toString());
-        buf.append("<br>\n<b>" + _t("Addresses") + ":</b> ");
+        buf.append("<tr><td><b>").append(_t("Signing Key")).append(":</b></td><td colspan=\"3\">")
+           .append(info.getIdentity().getSigningPublicKey().getType().toString()).append("</td></tr>\n");
+        buf.append("<tr><td><b>" + _t("Addresses") + ":</b></td><td colspan=\"3\">");
         String country = _context.commSystem().getCountry(info.getIdentity().getHash());
         if(country != null) {
+            buf.append("<a href=\"/netdb?c=").append(country).append("\">");
             buf.append("<img height=\"11\" width=\"16\" alt=\"").append(country.toUpperCase(Locale.US)).append('\"');
             buf.append(" title=\"").append(getTranslatedCountry(country)).append('\"');
-            buf.append(" src=\"/flags.jsp?c=").append(country).append("\"> ");
+            buf.append(" src=\"/flags.jsp?c=").append(country).append("\"> ").append("</a>");
         }
         for (RouterAddress addr : info.getAddresses()) {
             String style = addr.getTransportStyle();
@@ -920,7 +922,7 @@ class SybilRenderer {
             return;
         final DecimalFormat fmt = new DecimalFormat("#0.00");
         XORComparator<Hash> xor = new XORComparator<Hash>(Hash.FAKE_HASH);
-        out.write("<h3>Group Distances</h3><table><tr><th>Hash<th>Distance from previous</tr>\n");
+        out.write("<h3 class=\"tabletitle\">Group Distances</h3><table class=\"sybil_distance\"><tr><th>Hash<th>Distance from previous</tr>\n");
         Collections.sort(sybils, xor);
         Hash prev = null;
         for (Hash h : sybils) {
@@ -951,8 +953,8 @@ class SybilRenderer {
         prev = null;
         final int limit = Math.min(10, sybils.size());
         for (int i = start; i <= days; i++) {
-            out.write("<h3>Distance for " + new Date(now) +
-                      "</h3><table><tr><th>Hash<th>Distance<th>Distance from previous</tr>\n");
+            out.write("<h3 class=\"tabletitle\">Distance for " + new Date(now) +
+                      "</h3><table class=\"sybil_distance\"><tr><th>Hash<th>Distance<th>Distance from previous</tr>\n");
             Hash rkey = rkgen.getRoutingKey(from, now);
             xor = new XORComparator<Hash>(rkey);
             Collections.sort(sybils, xor);
diff --git a/apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java b/apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java
index 61bddd0e013a127aef4e990f1fd0ca293402437c..0a4fc2c5dc08978a514ab83753095b5542c6e046 100644
--- a/apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java
+++ b/apps/routerconsole/java/src/net/i2p/router/web/TunnelRenderer.java
@@ -33,7 +33,7 @@ class TunnelRenderer {
     }
     
     public void renderStatusHTML(Writer out) throws IOException {
-        out.write("<div class=\"wideload\"><h2><a name=\"exploratory\" ></a>" + _t("Exploratory tunnels") + " (<a href=\"/configtunnels#exploratory\">" + _t("configure") + "</a>)</h2>\n");
+        out.write("<h3 class=\"tabletitle\" id=\"exploratorytunnels\"><a name=\"exploratory\" ></a>" + _t("Exploratory tunnels") + " <a href=\"/configtunnels#exploratory\" title=\"" + _t("Configure tunnels") + "\">[" + _t("configure") + "]</a></h3>\n");
         renderPool(out, _context.tunnelManager().getInboundExploratoryPool(), _context.tunnelManager().getOutboundExploratoryPool());
         
         List<Hash> destinations = null;
@@ -54,20 +54,20 @@ class TunnelRenderer {
                 name = outPool.getSettings().getDestinationNickname();
             if (name == null)
                 name = client.toBase64().substring(0,4);
-            out.write("<h2><a name=\"" + client.toBase64().substring(0,4)
+            out.write("<h3 class=\"tabletitle\"><a name=\"" + client.toBase64().substring(0,4)
                       + "\" ></a>" + _t("Client tunnels for") + ' ' + DataHelper.escapeHTML(_t(name)));
             if (isLocal)
-                out.write(" (<a href=\"/configtunnels#" + client.toBase64().substring(0,4) +"\">" + _t("configure") + "</a>)</h2>\n");
+                out.write(" <a href=\"/configtunnels#" + client.toBase64().substring(0,4) +"\" title=\"" + _t("Configure tunnels for session") + "\">[" + _t("configure") + "]</a></h3>\n");
             else
-                out.write(" (" + _t("dead") + ")</h2>\n");
+                out.write(" (" + _t("dead") + ")</h3>\n");
             renderPool(out, in, outPool);
         }
         
         List<HopConfig> participating = _context.tunnelDispatcher().listParticipatingTunnels();
-        out.write("<h2><a name=\"participating\"></a>" + _t("Participating tunnels") + "</h2>\n");
+        out.write("<h3 class=\"tabletitle\"><a name=\"participating\"></a>" + _t("Participating tunnels") + "</h3>\n");
         if (!participating.isEmpty()) {
             Collections.sort(participating, new TunnelComparator());
-            out.write("<table><tr><th>" + _t("Receive on") + "</th><th>" + _t("From") + "</th><th>"
+            out.write("<table class=\"tunneldisplay tunnels_participating\"><tr><th>" + _t("Receive on") + "</th><th>" + _t("From") + "</th><th>"
                   + _t("Send on") + "</th><th>" + _t("To") + "</th><th>" + _t("Expiration") + "</th>"
                   + "<th>" + _t("Usage") + "</th><th>" + _t("Rate") + "</th><th>" + _t("Role") + "</th></tr>\n");
         }
@@ -131,12 +131,11 @@ class TunnelRenderer {
         if (displayed > DISPLAY_LIMIT)
             out.write("<div class=\"statusnotes\"><b>" + _t("Limited display to the {0} tunnels with the highest usage", DISPLAY_LIMIT)  + "</b></div>\n");
         if (inactive > 0)
-            out.write("<div class=\"statusnotes\"><b>" + _t("Inactive participating tunnels") + ": " + inactive + "</b></div>\n");
+            out.write("<div class=\"statusnotes\"><b>" + _t("Inactive participating tunnels") + ":&nbsp;&nbsp;" + inactive + "</b></div>\n");
         else if (displayed <= 0)
             out.write("<div class=\"statusnotes\"><b>" + _t("none") + "</b></div>\n");
-        out.write("<div class=\"statusnotes\"><b>" + _t("Lifetime bandwidth usage") + ": " + DataHelper.formatSize2(processed*1024) + "B</b></div>\n");
+        out.write("<div class=\"statusnotes\"><b>" + _t("Lifetime bandwidth usage") + ":&nbsp;&nbsp;" + DataHelper.formatSize2(processed*1024) + "B</b></div>\n");
         //renderPeers(out);
-        out.write("</div>");
     }
     
     private static class TunnelComparator implements Comparator<HopConfig>, Serializable {
@@ -164,7 +163,8 @@ class TunnelRenderer {
             if (info.getLength() > maxLength)
                 maxLength = info.getLength();
         }
-        out.write("<table><tr><th>" + _t("In/Out") + "</th><th>" + _t("Expiry") + "</th><th>" + _t("Usage") + "</th><th>" + _t("Gateway") + "</th>");
+        out.write("<table class=\"tunneldisplay tunnels_client\"><tr><th title=\"" + _t("Inbound or outbound?") + ("\">") + _t("In/Out")
+                  + "</th><th>" + _t("Expiry") + "</th><th>" + _t("Usage") + "</th><th>" + _t("Gateway") + "</th>");
         if (maxLength > 3) {
             out.write("<th align=\"center\" colspan=\"" + (maxLength - 2));
             out.write("\">" + _t("Participants") + "</th>");
@@ -215,7 +215,7 @@ class TunnelRenderer {
             // PooledTunnelCreatorConfig
             List<?> pending = in.listPending();
             if (!pending.isEmpty()) {
-                out.write("<div class=\"statusnotes\"><center><b>" + _t("Build in progress") + ": " + pending.size() + " " + _t("inbound") + "</b></center></div>\n");
+                out.write("<div class=\"statusnotes\"><center><b>" + _t("Build in progress") + ":&nbsp;&nbsp;" + pending.size() + " " + _t("inbound") + "</b></center></div>\n");
                 live += pending.size();
             }
         }
@@ -223,13 +223,13 @@ class TunnelRenderer {
             // PooledTunnelCreatorConfig
             List<?> pending = outPool.listPending();
             if (!pending.isEmpty()) {
-                out.write("<div class=\"statusnotes\"><center><b>" + _t("Build in progress") + ": " + pending.size() + " " + _t("outbound") + "</b></center></div>\n");
+                out.write("<div class=\"statusnotes\"><center><b>" + _t("Build in progress") + ":&nbsp;&nbsp;" + pending.size() + " " + _t("outbound") + "</b></center></div>\n");
                 live += pending.size();
             }
         }
         if (live <= 0)
             out.write("<div class=\"statusnotes\"><center><b>" + _t("No tunnels; waiting for the grace period to end.") + "</b></center></div>\n");
-        out.write("<div class=\"statusnotes\"><center><b>" + _t("Lifetime bandwidth usage") + ": " +
+        out.write("<div class=\"statusnotes\"><center><b>" + _t("Lifetime bandwidth usage") + ":&nbsp;&nbsp;" +
                   DataHelper.formatSize2(processedIn*1024) + "B " + _t("in") + ", " +
                   DataHelper.formatSize2(processedOut*1024) + "B " + _t("out") + "</b></center></div>");
     }
diff --git a/apps/routerconsole/jsp/certs.jsp b/apps/routerconsole/jsp/certs.jsp
index 3c4e59cf629822a3d1f9f33267473ae9fc317d36..1eba5d7001096e41fb0fc6f8a0ba1591ae78c680 100644
--- a/apps/routerconsole/jsp/certs.jsp
+++ b/apps/routerconsole/jsp/certs.jsp
@@ -9,7 +9,7 @@
 <%@include file="summaryajax.jsi" %>
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %><h1><%=intl._t("Certificates")%></h1>
-<div class="main" id="main">
+<div class="main" id="certs">
 <jsp:useBean class="net.i2p.router.web.CertHelper" id="certhelper" scope="request" />
 <jsp:setProperty name="certhelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <% certhelper.storeWriter(out); %>
diff --git a/apps/routerconsole/jsp/config.jsp b/apps/routerconsole/jsp/config.jsp
index 5e9c0de92fc6a5cb71668f365618b3921ecfc14b..c7cbac7e4fd6c3b95642e5045defc3e8ad40b894 100644
--- a/apps/routerconsole/jsp/config.jsp
+++ b/apps/routerconsole/jsp/config.jsp
@@ -15,21 +15,22 @@
 <jsp:useBean class="net.i2p.router.web.ConfigNetHelper" id="nethelper" scope="request" />
 <jsp:setProperty name="nethelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <h1><%=intl._t("I2P Bandwidth Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_bandwidth">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigNetHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
-<div class="configure">
  <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>">
  <input type="hidden" name="action" value="blah" >
  <input type="hidden" name="ratesOnly" value="1" >
- <h3><%=intl._t("Bandwidth limiter")%></h3><p>
- <img src="/themes/console/images/itoopie_xsm.png" alt="">
+
+ <h3 id="bwlimiter" class="tabletitle"><%=intl._t("Bandwidth Limiter")%>&nbsp;<a href="confignet">[<%=intl._t("Advanced Network Configuration")%>]</a></h3>
+ <table id="bandwidthconfig" class="configtable">
+ <tr><td class="infohelp" colspan="2">
  <b><%=intl._t("I2P will work best if you configure your rates to match the speed of your internet connection.")%></b>
- </p>
-   <div class="wideload"><table><tr><td><input style="text-align: right; width: 5em;" name="inboundrate" type="text" size="5" maxlength="5" value="<jsp:getProperty name="nethelper" property="inboundRate" />" >
+ </td></tr>
+   <tr><td><input style="text-align: right; width: 5em;" name="inboundrate" type="text" size="5" maxlength="5" value="<jsp:getProperty name="nethelper" property="inboundRate" />" >
           <%=intl._t("KBps In")%>
         </td><td>(<jsp:getProperty name="nethelper" property="inboundRateBits" />)</td>
 <% /********
@@ -55,8 +56,9 @@
     </tr><tr>
         <td><jsp:getProperty name="nethelper" property="sharePercentageBox" /> <%=intl._t("Share")%></td>
         <td>(<jsp:getProperty name="nethelper" property="shareRateBits" />)
-</td></tr></table></div>
-<p><% int share = nethelper.getShareBandwidth();
+</td></tr>
+<tr><td class="infohelp" colspan="2">
+<% int share = nethelper.getShareBandwidth();
     if (share < 12) {
         out.print("<b>");
         out.print(intl._t("NOTE"));
@@ -73,11 +75,11 @@
 
         out.print(intl._t("The higher the share bandwidth the more you improve your anonymity and help the network."));
     }
- %></p>
-<p><a href="confignet"><%=intl._t("Advanced network configuration page")%></a></p><hr>
-<div class="formaction">
+ %></td></tr>
+  <tr><td class="optionsave" colspan="2">
 <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
 <input type="submit" class="accept" name="save" value="<%=intl._t("Save changes")%>" >
-</div>
+  </td></tr>
+ </table>
 </form>
-</div></div></body></html>
+</div></body></html>
diff --git a/apps/routerconsole/jsp/configadvanced.jsp b/apps/routerconsole/jsp/configadvanced.jsp
index 3ba2deed10e4688874f0fce81c1ab80f6026588c..ed8a388859a41ea4a23068309f9ffec0ae135c08 100644
--- a/apps/routerconsole/jsp/configadvanced.jsp
+++ b/apps/routerconsole/jsp/configadvanced.jsp
@@ -16,7 +16,7 @@
 <jsp:setProperty name="advancedhelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 
 <h1><%=intl._t("I2P Advanced Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_advanced">
 
  <%@include file="confignav.jsi" %>
 
@@ -24,9 +24,14 @@
 <%@include file="formhandler.jsi" %>
  <div class="configure">
  <div class="wideload">
-<h3><%=intl._t("Floodfill Configuration")%></h3>
-<p><%=intl._t("Floodill participation helps the network, but may use more of your computer's resources.")%>
-</p><p>
+
+<h3 id="ffconf" class="tabletitle"><%=intl._t("Floodfill Configuration")%></h3>
+<form action="" method="POST">
+ <table id="floodfillconfig" class="configtable">
+  <tr><td class="infohelp">
+<%=intl._t("Floodfill participation helps the network, but may use more of your computer's resources.")%>
+  </td></tr>
+  <tr><td class="infohelp">
 <%
     if (advancedhelper.isFloodfill()) {
 %><%=intl._t("This router is currently a floodfill participant.")%><%
@@ -34,33 +39,51 @@
 %><%=intl._t("This router is not currently a floodfill participant.")%><%
     }
 %>
-</p>
-<form action="" method="POST">
+  </td></tr>
+  <tr><td>
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
 <input type="hidden" name="action" value="ff" >
-<input type="radio" class="optbox" name="ff" value="auto" <%=advancedhelper.getFFChecked(2) %> >
-<%=intl._t("Automatic")%><br>
-<input type="radio" class="optbox" name="ff" value="true" <%=advancedhelper.getFFChecked(1) %> >
-<%=intl._t("Force On")%><br>
-<input type="radio" class="optbox" name="ff" value="false" <%=advancedhelper.getFFChecked(0) %> >
-<%=intl._t("Disable")%><br>
-<div class="formaction">
+<b><%=intl._t("Enrollment")%>:</b>
+<label><input type="radio" class="optbox" name="ff" value="auto" <%=advancedhelper.getFFChecked(2) %> >
+<%=intl._t("Automatic")%></label>&nbsp;
+<label><input type="radio" class="optbox" name="ff" value="true" <%=advancedhelper.getFFChecked(1) %> >
+<%=intl._t("Force On")%></label>&nbsp;
+<label><input type="radio" class="optbox" name="ff" value="false" <%=advancedhelper.getFFChecked(0) %> >
+<%=intl._t("Disable")%></label>
+  </td></tr>
+  <tr><td class="optionsave" align="right">
 <input type="submit" name="shouldsave" class="accept" value="<%=intl._t("Save changes")%>" >
-</div></form>
-<h3><%=intl._t("Advanced I2P Configuration")%></h3>
+  </td></tr>
+ </table>
+</form>
+
+<h3 id="advancedconfig" class="tabletitle"><%=intl._t("Advanced I2P Configuration")%>&nbsp;<a title="Help with additional configuration settings" href="/help#advancedsettings">[Additional Options]</a></h3>
 <% if (advancedhelper.isAdvanced()) { %>
  <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="hidden" name="action" value="blah" >
 <% }  // isAdvanced %>
- <textarea rows="32" cols="60" name="nofilter_config" wrap="off" spellcheck="false" <% if (!advancedhelper.isAdvanced()) { %>readonly="readonly"<% } %>><jsp:getProperty name="advancedhelper" property="settings" /></textarea><br><hr>
+<table class="configtable" id="advconf">
 <% if (advancedhelper.isAdvanced()) { %>
-      <div class="formaction">
-        <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
-        <input type="submit" name="shouldsave" class="accept" value="<%=intl._t("Save changes")%>" >
- <br><b><%=intl._t("NOTE")%>:</b> <%=intl._t("Some changes may require a restart to take effect.")%>
- </div></form>
+ <tr><td class="infohelp">
+<b><%=intl._t("NOTE")%>:</b> <%=intl._t("Some changes may require a restart to take effect.")%>
+ </td></tr>
 <% } else { %>
+ <tr><td>
 <%=intl._t("To make changes, edit the file {0}.", "<tt>" + advancedhelper.getConfigFileName() + "</tt>")%>
+ </td></tr>
+<% }  // isAdvanced %>
+ <tr><td class="tabletextarea">
+ <textarea id="advancedsettings" rows="32" cols="60" name="nofilter_config" wrap="off" spellcheck="false" <% if (!advancedhelper.isAdvanced()) { %>readonly="readonly"<% } %>><jsp:getProperty name="advancedhelper" property="settings" /></textarea>
+ </td></tr>
+<% if (advancedhelper.isAdvanced()) { %>
+ <tr><td class="optionsave" align="right">
+        <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
+        <input type="submit" name="shouldsave" class="accept" value="<%=intl._t("Save changes")%>" >
+ </td></tr>
+<% }  // isAdvanced %>
+</table>
+<% if (advancedhelper.isAdvanced()) { %>
+</form>
 <% }  // isAdvanced %>
 </div></div></div></body></html>
diff --git a/apps/routerconsole/jsp/configclients.jsp b/apps/routerconsole/jsp/configclients.jsp
index 59f236071e00c9df345da823c1c2aa9e5b341afc..73a8a168172967611cae3ba6b7996003bca1e0b9 100644
--- a/apps/routerconsole/jsp/configclients.jsp
+++ b/apps/routerconsole/jsp/configclients.jsp
@@ -21,31 +21,37 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
 <jsp:setProperty name="clientshelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <jsp:setProperty name="clientshelper" property="edit" value="<%=request.getParameter(\"edit\")%>" />
 <h1><%=intl._t("I2P Client Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_clients">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigClientsHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
  <div class="configure">
- <h3><%=intl._t("Client Configuration")%></h3><p>
- <%=intl._t("The Java clients listed below are started by the router and run in the same JVM.")%><br>
- <img src="/themes/console/images/itoopie_xsm.png" alt=""><b><%=intl._t("Be careful changing any settings here. The 'router console' and 'application tunnels' are required for most uses of I2P. Only advanced users should change these.")%></b>
+ <h3 id="i2pclientconfig"><%=intl._t("Client Configuration")%>&nbsp;
+  <span class="h3navlinks">
+   <a href="configi2cp" title="<%=intl._t("Advanced Client Interface Configuration")%>">[I2CP]</a>&nbsp;
+   <a href="configplugins" title="<%=intl._t("Plugin Configuration")%>">[Plugins]</a>&nbsp;
+   <a href="configwebapps" title="<%=intl._t("WebApp Configuration")%>">[WebApps]</a>
+  </span>
+ </h3>
+ <p class="infohelp" id="clientconf">
+ <%=intl._t("The Java clients listed below are started by the router and run in the same JVM.")%>&nbsp;
+ <%=intl._t("To change other client options, edit the file")%>
+ <tt><%=net.i2p.router.startup.ClientAppConfig.configFile(net.i2p.I2PAppContext.getGlobalContext()).getAbsolutePath()%>.</tt>
+ <%=intl._t("All changes require restart to take effect.")%>
+ </p>
+ <p class="infowarn" id="clientconf">
+  <b><%=intl._t("Be careful changing any settings here. The 'router console' and 'application tunnels' are required for most uses of I2P. Only advanced users should change these.")%></b>
  </p><div class="wideload">
 <form action="" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
 <jsp:getProperty name="clientshelper" property="form1" />
-<p><i><%=intl._t("To change other client options, edit the file")%>
- <%=net.i2p.router.startup.ClientAppConfig.configFile(net.i2p.I2PAppContext.getGlobalContext()).getAbsolutePath()%>.
- <%=intl._t("All changes require restart to take effect.")%></i>
- </p><hr><div class="formaction">
+<div class="formaction" id="clientsconfig">
  <input type="submit" class="cancel" name="foo" value="<%=intl._t("Cancel")%>" />
 <% if (clientshelper.isClientChangeEnabled() && request.getParameter("edit") == null) { %>
  <input type="submit" name="edit" class="add" value="<%=intl._t("Add Client")%>" />
 <% } %>
  <input type="submit" class="accept" name="action" value="<%=intl._t("Save Client Configuration")%>" />
 </div></form></div>
-</div><hr>
-<p><a href="configi2cp"><%=intl._t("Advanced Client Interface Configuration")%></a></p>
-<p><a href="configwebapps"><%=intl._t("WebApp Configuration")%></a></p>
-<p><a href="configplugins"><%=intl._t("Plugin Configuration")%></a></p>
+</div>
 </div></body></html>
diff --git a/apps/routerconsole/jsp/configfamily.jsp b/apps/routerconsole/jsp/configfamily.jsp
index 119239098d758daf4e0b9bfda3914ef81e223bea..905701a71fb78e33ed99f6bcfd8656b7f6d65afb 100644
--- a/apps/routerconsole/jsp/configfamily.jsp
+++ b/apps/routerconsole/jsp/configfamily.jsp
@@ -14,13 +14,13 @@
 <jsp:useBean class="net.i2p.router.web.ConfigFamilyHelper" id="familyHelper" scope="request" />
 <jsp:setProperty name="familyHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <h1><%=intl._t("I2P Router Family Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_family">
 <%@include file="confignav.jsi" %>
 
 <jsp:useBean class="net.i2p.router.web.ConfigFamilyHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
 
-<p><%=intl._t("Routers in the same family share a family key.")%>
+<p class="infohelp"><%=intl._t("Routers in the same family share a family key.")%>
 <%=intl._t("To join an existing family, import the private key you exported from a router in the family.")%>
 <%=intl._t("To start a new family, enter a family name.")%>
 </p>
@@ -30,27 +30,35 @@
    if (family.length() <= 0) {
        // no family yet
 %>
-<div class="configure">
+<table class="configtable" id="joinfamily">
 <form action="" method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
-<h3><%=intl._t("Join Existing Router Family")%></h3>
-<p><%=intl._t("Import the secret family key that you exported from an existing router in the family.")%>
-<p><%=intl._t("Select secret key file")%> :
+ <tr><th colspan="2"><%=intl._t("Join Existing Router Family")%></th></tr>
+ <tr><td colspan="2" class="infohelp"><%=intl._t("Import the secret family key that you exported from an existing router in the family.")%></td></tr>
+ <tr>
+  <td><b><%=intl._t("Select secret key file")%>:</b>
 <input name="file" type="file" value="" />
-</p>
-<div class="formaction">
-<input type="submit" name="action" class="download" value="<%=intl._t("Join Existing Router Family")%>" />
-</div></form></div>
+  </td>
+  <td class="optionsave">
+<input type="submit" name="action" class="download" value="<%=intl._t("Join Family")%>" />
+  </td>
+ </tr>
+</form></table>
 
-<div class="configure"><form action="" method="POST">
+<table class="configtable" id="newfamily">
+<form action="" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
-<h3><%=intl._t("Create New Router Family")%></h3>
-<p><%=intl._t("Family Name")%> :
+ <tr><th colspan="2"><%=intl._t("Create New Router Family")%></th></tr>
+ <tr>
+  <td><b><%=intl._t("Family Name")%>:</b>
 <input name="family" type="text" size="30" value="" />
-</p>
-<div class="formaction">
-<input type="submit" name="action" class="accept" value="<%=intl._t("Create New Router Family")%>" />
-</div></form></div>
+  </td>
+  <td class="optionsave">
+<input type="submit" name="action" class="accept" value="<%=intl._t("Create Family")%>" />
+  </td>
+ </tr>
+</form>
+</table>
 <%
    } else {
        // family is configured
@@ -58,30 +66,36 @@
        if (keypw.length() > 0) {
            // family is active
 %>
-<div class="configure">
+<table class="configtable" id="exportfamily">
 <form action="/exportfamily" method="GET">
-<h3><%=intl._t("Export Family Key")%></h3>
-<p><%=intl._t("Export the secret family key to be imported into other routers you control.")%>
-</p>
-<div class="formaction">
+ <tr><th><%=intl._t("Export Family Key")%></th></tr>
+ <tr><td><%=intl._t("Export the secret family key to be imported into other routers you control.")%></td></tr>
+ <tr>
+  <td class="optionsave">
 <input type="submit" name="action" class="go" value="<%=intl._t("Export Family Key")%>" />
-</div></form></div>
+  </td>
+ </tr>
+</form></table>
 <%
        } else {
            // family is not active
 %>
-<p><b><%=intl._t("Restart required to activate family {0}.", '"' + family + '"')%>
+<p class="infohelp needrestart"><b><%=intl._t("Restart required to activate family {0}.", '"' + family + '"')%>
 <%=intl._t("After restarting, you may export the family key.")%></b></p>
 <%
        }
 %>
-<div class="configure"><form action="" method="POST">
+<table class="configtable" id="leavefamily">
+<form action="" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
-<h3><%=intl._t("Leave Router Family")%></h3>
-<p><%=intl._t("No longer be a member of the family {0}.", '"' + family + '"')%>
-<div class="formaction">
-<input type="submit" name="action" class="delete" value="<%=intl._t("Leave Router Family")%>" />
-</div></form></div>
+ <tr><th colspan="2"><%=intl._t("Leave Router Family")%></th></tr>
+ <tr><td><%=intl._t("No longer be a member of the family {0}.", '"' + family + '"')%></td>
+  <td class="optionsave">
+<input type="submit" name="action" class="delete" value="<%=intl._t("Leave Family")%>" />
+  </td>
+ </tr>
+</form>
+</table>
 <%
    }
 %>
diff --git a/apps/routerconsole/jsp/confighome.jsp b/apps/routerconsole/jsp/confighome.jsp
index 56be7b8bd0848dc0daa47543cb2044592f2fe139..b73a2bfa228f16a654787eb8743b330103642969 100644
--- a/apps/routerconsole/jsp/confighome.jsp
+++ b/apps/routerconsole/jsp/confighome.jsp
@@ -18,7 +18,7 @@ input.default {
 
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Home Page Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_homepage">
 <%@include file="confignav.jsi" %>
 
 <jsp:useBean class="net.i2p.router.web.ConfigHomeHandler" id="formhandler" scope="request" />
@@ -26,24 +26,32 @@ input.default {
 <jsp:useBean class="net.i2p.router.web.HomeHelper" id="homehelper" scope="request" />
 <jsp:setProperty name="homehelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 
-<h3><%=intl._t("Default Home Page")%></h3>
+<h3 class="tabletitle"><%=intl._t("Default Home Page")%></h3>
 <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="hidden" name="group" value="0">
- <input type="checkbox" name="oldHome" <jsp:getProperty name="homehelper" property="configHome" /> >
- <%=intl._t("Use old home page")%>
+<table id="oldhome" class="configtable">
+ <tr>
+  <td>
+ <label><input type="checkbox" name="oldHome" <jsp:getProperty name="homehelper" property="configHome" /> >
+ <%=intl._t("Use old home page")%></label>
+  </td>
+  <td class="optionsave">
  <input type="submit" name="action" class="accept" value="<%=intl._t("Save")%>" >
+  </td>
+ </tr>
+</table>
 </form>
 
 <%
    if (homehelper.shouldShowSearch()) {
 %>
-<h3><%=intl._t("Search Engines")%></h3>
+<h3 class="tabletitle"><%=intl._t("Search Engines")%></h3>
 <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="hidden" name="group" value="3">
  <jsp:getProperty name="homehelper" property="configSearch" />
- <div class="formaction">
+ <div class="formaction" id="homesearch">
   <input type="submit" name="action" class="default" value="<%=intl._t("Add item")%>" >
   <input type="submit" name="action" class="delete" value="<%=intl._t("Delete selected")%>" >
   <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
@@ -54,13 +62,12 @@ input.default {
 <%
    }  // shouldShowSearch()
 %>
-
-<h3><%=intl._t("Hidden Services of Interest")%></h3>
+<h3 class="tabletitle"><%=intl._t("Applications and Configuration")%></h3>
 <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
- <input type="hidden" name="group" value="1">
- <jsp:getProperty name="homehelper" property="configFavorites" />
- <div class="formaction">
+ <input type="hidden" name="group" value="2">
+ <jsp:getProperty name="homehelper" property="configServices" />
+ <div class="formaction" id="homeapps">
   <input type="submit" name="action" class="default" value="<%=intl._t("Add item")%>" >
   <input type="submit" name="action" class="delete" value="<%=intl._t("Delete selected")%>" >
   <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
@@ -69,12 +76,12 @@ input.default {
  </div>
 </form>
 
-<h3><%=intl._t("Applications and Configuration")%></h3>
+<h3 class="tabletitle"><%=intl._t("Hidden Services of Interest")%></h3>
 <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
- <input type="hidden" name="group" value="2">
- <jsp:getProperty name="homehelper" property="configServices" />
- <div class="formaction">
+ <input type="hidden" name="group" value="1">
+ <jsp:getProperty name="homehelper" property="configFavorites" />
+ <div class="formaction" id="homesites">
   <input type="submit" name="action" class="default" value="<%=intl._t("Add item")%>" >
   <input type="submit" name="action" class="delete" value="<%=intl._t("Delete selected")%>" >
   <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
diff --git a/apps/routerconsole/jsp/configi2cp.jsp b/apps/routerconsole/jsp/configi2cp.jsp
index f2e481f0526bef92b0e74ddfe19ab5f578f7257a..a4cee0ae678ae042928aa3700b30fdcdf8cff926 100644
--- a/apps/routerconsole/jsp/configi2cp.jsp
+++ b/apps/routerconsole/jsp/configi2cp.jsp
@@ -21,24 +21,33 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
 <jsp:setProperty name="clientshelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <jsp:setProperty name="clientshelper" property="edit" value="<%=request.getParameter(\"edit\")%>" />
 <h1><%=intl._t("I2P Client Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_i2cp">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigClientsHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
  <div class="configure">
-<h3><a name="i2cp"></a><%=intl._t("Advanced Client Interface Configuration")%></h3>
+<h3 id="advancedclientconfig"><a name="i2cp"></a><%=intl._t("Advanced Client Interface Configuration")%></h3>
 <form action="configi2cp" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
-<p>
-<b><%=intl._t("External I2CP (I2P Client Protocol) Interface Configuration")%></b><br>
-<input type="radio" class="optbox" name="mode" value="1" <%=clientshelper.i2cpModeChecked(1) %> >
-<%=intl._t("Enabled without SSL")%><br>
-<input type="radio" class="optbox" name="mode" value="2" <%=clientshelper.i2cpModeChecked(2) %> >
-<%=intl._t("Enabled with SSL required")%><br>
-<input type="radio" class="optbox" name="mode" value="0" <%=clientshelper.i2cpModeChecked(0) %> >
-<%=intl._t("Disabled - Clients outside this Java process may not connect")%><br>
-<%=intl._t("I2CP Interface")%>:
+<table class="configtable" id="externali2cp">
+<tr><td class="infowarn">
+<b><%=intl._t("The default settings will work for most people.")%></b>
+<%=intl._t("Any changes made here must also be configured in the external client.")%>
+<%=intl._t("Many clients do not support SSL or authorization.")%>
+<i><%=intl._t("All changes require restart to take effect.")%></i>
+</td></tr>
+<tr><th><%=intl._t("External I2CP (I2P Client Protocol) Interface Configuration")%></th></tr>
+<tr><td>
+<label><input type="radio" class="optbox" name="mode" value="1" <%=clientshelper.i2cpModeChecked(1) %> >
+<%=intl._t("Enabled without SSL")%></label><br>
+<label><input type="radio" class="optbox" name="mode" value="2" <%=clientshelper.i2cpModeChecked(2) %> >
+<%=intl._t("Enabled with SSL required")%></label><br>
+<label><input type="radio" class="optbox" name="mode" value="0" <%=clientshelper.i2cpModeChecked(0) %> >
+<%=intl._t("Disabled - Clients outside this Java process may not connect")%></label><br>
+</td></tr>
+<tr><td>
+<b><%=intl._t("I2CP Interface")%>:</b>
 <select name="interface">
 <%
        String[] ips = clientshelper.intfcAddresses();
@@ -53,23 +62,26 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
            out.print("</option>\n");
        }
 %>
-</select><br>
-<%=intl._t("I2CP Port")%>:
-<input name="port" type="text" size="5" maxlength="5" value="<jsp:getProperty name="clientshelper" property="port" />" ><br>
-<b><%=intl._t("Authorization")%></b><br>
-<input type="checkbox" class="optbox" name="auth" value="true" <jsp:getProperty name="clientshelper" property="auth" /> >
-<%=intl._t("Require username and password")%><br>
-<%=intl._t("Username")%>:
-<input name="user" type="text" value="" /><br>
-<%=intl._t("Password")%>:
-<input name="nofilter_pw" type="password" value="" /><br>
-</p><p><img src="/themes/console/images/itoopie_xsm.png" alt=""><b><%=intl._t("The default settings will work for most people.")%></b>
-<%=intl._t("Any changes made here must also be configured in the external client.")%>
-<%=intl._t("Many clients do not support SSL or authorization.")%>
-<i><%=intl._t("All changes require restart to take effect.")%></i>
-</p><hr><div class="formaction">
+</select>&nbsp;
+<b><%=intl._t("I2CP Port")%>:</b>
+<input name="port" type="text" size="5" maxlength="5" value="<jsp:getProperty name="clientshelper" property="port" />" >
+</td></tr>
+<tr><th><%=intl._t("Authorization")%></th></tr>
+<tr><td>
+<label><input type="checkbox" class="optbox" name="auth" value="true" <jsp:getProperty name="clientshelper" property="auth" /> >
+<%=intl._t("Require username and password")%></label><br>
+</td></tr>
+<tr><td>
+<b><%=intl._t("Username")%>:</b>
+<input name="user" type="text" value="" />&nbsp;
+<b><%=intl._t("Password")%>:</b>
+<input name="nofilter_pw" type="password" value="" />
+</td></tr>
+<tr><td class="optionsave" align="right">
 <input type="submit" class="default" name="action" value="<%=intl._t("Save Interface Configuration")%>" />
 <input type="submit" class="cancel" name="foo" value="<%=intl._t("Cancel")%>" />
 <input type="submit" class="accept" name="action" value="<%=intl._t("Save Interface Configuration")%>" />
-</div></form>
+</td></tr>
+</table>
+</form>
 </div></div></body></html>
diff --git a/apps/routerconsole/jsp/configkeyring.jsp b/apps/routerconsole/jsp/configkeyring.jsp
index 3653a94790ab5721dd6382b4399ce467aca825c9..1985b42b02c8bee9fd054e33429cd945239ee761 100644
--- a/apps/routerconsole/jsp/configkeyring.jsp
+++ b/apps/routerconsole/jsp/configkeyring.jsp
@@ -11,36 +11,35 @@
 
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Keyring Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_keyring">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigKeyringHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
  <jsp:useBean class="net.i2p.router.web.ConfigKeyringHelper" id="keyringhelper" scope="request" />
  <jsp:setProperty name="keyringhelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
-<div class="configure"><h2><%=intl._t("Keyring")%></h2><p>
+<p id="keyringhelp" class="infohelp">
  <%=intl._t("The router keyring is used to decrypt encrypted leaseSets.")%>
  <%=intl._t("The keyring may contain keys for local or remote encrypted destinations.")%></p>
- <div class="wideload">
  <jsp:getProperty name="keyringhelper" property="summary" />
-</div>
-
  <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
- <h3><%=intl._t("Manual Keyring Addition")%></h3><p>
+ <h3 class="tabletitle"><%=intl._t("Manual Keyring Addition")%></h3>
+ <table id="addkeyring">
+        <tr>
+          <td class="infohelp" colspan="2">
  <%=intl._t("Enter keys for encrypted remote destinations here.")%>
  <%=intl._t("Keys for local destinations must be entered on the")%> <a href="i2ptunnel/"><%=intl._t("I2PTunnel page")%></a>.
-</p>
-  <div class="wideload">
-      <table><tr>
-          <td class="mediumtags" align="right"><%=intl._t("Dest. name, hash, or full key")%>:</td>
+          </td>
+        </tr><tr>
+          <td align="right"><b><%=intl._t("Dest. name, hash, or full key")%>:</b></td>
           <td><textarea name="peer" cols="44" rows="1" style="height: 3em;" wrap="off" spellcheck="false"></textarea></td>
         </tr><tr>
-          <td class="mediumtags" align="right"><%=intl._t("Encryption Key")%>:</td>
+          <td align="right"><b><%=intl._t("Encryption Key")%>:</b></td>
           <td><input type="text" size="55" name="key" ></td>
         </tr><tr>
           <td align="right" colspan="2">
 <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
 <input type="submit" name="action" class="delete" value="<%=intl._t("Delete key")%>" >
 <input type="submit" name="action" class="add" value="<%=intl._t("Add key")%>" >
-</td></tr></table></div></form></div></div></body></html>
+</td></tr></table></form></div></body></html>
diff --git a/apps/routerconsole/jsp/configlogging.jsp b/apps/routerconsole/jsp/configlogging.jsp
index b68a8865b4559fe1373d5e15118bb3ec4d224ebd..77857914517cdaeff9d7a8636434d4d224c2da4b 100644
--- a/apps/routerconsole/jsp/configlogging.jsp
+++ b/apps/routerconsole/jsp/configlogging.jsp
@@ -14,40 +14,40 @@
 
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Logging Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_logging">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigLoggingHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
-<div class="configure">
  <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="hidden" name="action" value="blah" >
- <h3><%=intl._t("Configure I2P Logging Options")%></h3>
- <div class="wideload">
-      <table border="0" cellspacing="5">
-        <tr><td class="mediumtags" align="right"><b><%=intl._t("Log file")%>:</b></td>
+ <h3 class="tabletitle"><%=intl._t("Configure I2P Logging Options")%>&nbsp;<a title="<%=intl._t("View Router Logs")%>" href="/logs">[<%=intl._t("View Logs")%>]</a></h3>
+      <table id="loggingoptions" border="0" cellspacing="5">
+        <tr><td align="right"><b><%=intl._t("Log file")%>:</b></td>
           <td><input type="text" name="logfilename" size="40" disabled="disabled" title="<%=intl._t("Edit {0} to change", "logger.config")%>" value="<jsp:getProperty name="logginghelper" property="logFilePattern" />" >
-            <br><p style="margin: 0px 12px"><i><%=intl._t("(the symbol '@' will be replaced during log rotation)")%></i></p></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("Log record format")%>:</b></td>
+            </td>
+          <td><%=intl._t("(the symbol '@' will be replaced during log rotation)")%></td>
+        </tr><tr><td align="right"><b><%=intl._t("Log record format")%>:</b></td>
           <td><input type="text" name="logformat" size="20" value="<jsp:getProperty name="logginghelper" property="recordPattern" />" >
-            <br><p style="margin: 0px 12px"><i><%=intl._t("(use 'd' = date, 'c' = class, 't' = thread, 'p' = priority, 'm' = message)")%>
-            </i></p></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("Log date format")%>:</b></td>
+            </td>
+          <td><%=intl._t("(use 'd' = date, 'c' = class, 't' = thread, 'p' = priority, 'm' = message)")%></td>
+        </tr><tr><td align="right"><b><%=intl._t("Log date format")%>:</b></td>
           <td><input type="text" name="logdateformat" size="20" value="<jsp:getProperty name="logginghelper" property="datePattern" />" >
-            <br><p style="margin: 0px 12px"><i><%=intl._t("('MM' = month, 'dd' = day, 'HH' = hour, 'mm' = minute, 'ss' = second, 'SSS' = millisecond)")%>
-            </i></p></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("Max log file size")%>:</b></td>
-          <td><input type="text" name="logfilesize" size="10" value="<jsp:getProperty name="logginghelper" property="maxFileSize" />" ><br></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("Default log level")%>:</b></td>
-          <td><jsp:getProperty name="logginghelper" property="defaultLogLevelBox" /><br><p style="margin: 0px 12px"><i><%=intl._t("(DEBUG and INFO are not recommended defaults, as they will drastically slow down your router)")%>
-          </i></p></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("Log level overrides")%>:</b></td>
-          <td><jsp:getProperty name="logginghelper" property="logLevelTable" /></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("New override")%>:</b></td>
-          <td><jsp:getProperty name="logginghelper" property="newClassBox" /></td>
-        </tr><tr><td colspan="2"><hr></td>
-        </tr><tr class="tablefooter"><td colspan="2"> <div class="formaction">
+            </td>
+          <td><%=intl._t("('MM' = month, 'dd' = day, 'HH' = hour, 'mm' = minute, 'ss' = second, 'SSS' = millisecond)")%></td>
+        </tr><tr><td align="right"><b><%=intl._t("Max log file size")%>:</b></td>
+          <td><input type="text" name="logfilesize" size="10" value="<jsp:getProperty name="logginghelper" property="maxFileSize" />" ></td>
+          <td></td>
+        </tr><tr><td align="right"><b><%=intl._t("Default log level")%>:</b></td>
+          <td><jsp:getProperty name="logginghelper" property="defaultLogLevelBox" /></td>
+          <td><%=intl._t("(DEBUG and INFO are not recommended defaults, as they will drastically slow down your router)")%></td>
+        </tr><tr><td align="right"><b><%=intl._t("Log level overrides")%>:</b></td>
+          <td colspan="2"><jsp:getProperty name="logginghelper" property="logLevelTable" /></td>
+        </tr><tr><td align="right"><b><%=intl._t("New override")%>:</b></td>
+          <td colspan="2"><jsp:getProperty name="logginghelper" property="newClassBox" /></td>
+        </tr>
+        <tr><td class="optionsave" colspan="3">
           <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
           <input type="submit" name="shouldsave" class="accept" value="<%=intl._t("Save changes")%>" >
-</div></td></tr></table></div></form></div></div></body></html>
+</td></tr></table></form></div></body></html>
diff --git a/apps/routerconsole/jsp/confignet.jsp b/apps/routerconsole/jsp/confignet.jsp
index 4551668637608408ebacf477dcc74a45f874e4b8..e46b4e8120b29a53394018793a851392308ec6d6 100644
--- a/apps/routerconsole/jsp/confignet.jsp
+++ b/apps/routerconsole/jsp/confignet.jsp
@@ -14,66 +14,107 @@
 <jsp:useBean class="net.i2p.router.web.ConfigNetHelper" id="nethelper" scope="request" />
 <jsp:setProperty name="nethelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <h1><%=intl._t("I2P Network Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_network">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigNetHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
-<div class="configure">
  <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="hidden" name="action" value="blah" >
- <h3><%=intl._t("IP and Transport Configuration")%></h3><p>
- <img src="/themes/console/images/itoopie_xsm.png" alt="">
- <b><%=intl._t("The default settings will work for most people.")%>
- <a href="#chelp"><%=intl._t("There is help below.")%></a></b>
- </p><p><b><%=intl._t("UPnP Configuration")%>:</b><br>
-    <input type="checkbox" class="optbox" name="upnp" value="true" <jsp:getProperty name="nethelper" property="upnpChecked" /> >
-    <%=intl._t("Enable UPnP to open firewall ports")%> - <a href="peers#upnp"><%=intl._t("UPnP status")%></a>
- </p><p><b><%=intl._t("IP Configuration")%>:</b><br>
- <%=intl._t("Externally reachable hostname or IP address")%>:<br>
-    <input type="radio" class="optbox" name="udpAutoIP" value="local,upnp,ssu" <%=nethelper.getUdpAutoIPChecked(3) %> >
-    <%=intl._t("Use all auto-detect methods")%><br>
-    <input type="radio" class="optbox" name="udpAutoIP" value="local,ssu" <%=nethelper.getUdpAutoIPChecked(4) %> >
-    <%=intl._t("Disable UPnP IP address detection")%><br>
-    <input type="radio" class="optbox" name="udpAutoIP" value="upnp,ssu" <%=nethelper.getUdpAutoIPChecked(5) %> >
-    <%=intl._t("Ignore local interface IP address")%><br>
-    <input type="radio" class="optbox" name="udpAutoIP" value="ssu" <%=nethelper.getUdpAutoIPChecked(0) %> >
-    <%=intl._t("Use SSU IP address detection only")%><br>
-    <input type="radio" class="optbox" name="udpAutoIP" value="hidden" <%=nethelper.getUdpAutoIPChecked(2) %> >
-    <%=intl._t("Hidden mode - do not publish IP")%> <i><%=intl._t("(prevents participating traffic)")%></i><br>
-    <input type="radio" class="optbox" name="udpAutoIP" value="fixed" <%=nethelper.getUdpAutoIPChecked(1) %> >
-    <%=intl._t("Specify hostname or IP")%>:<br>
+ <h3 id="iptransport" class="tabletitle"><%=intl._t("IP and Transport Configuration")%>&nbsp;<a title="<%=intl._t("Help with router configuration")%>" href="/help#configurationhelp">[<%=intl._t("Configuration Help")%>]</a></h3>
+ <table id="netconfig" class="configtable">
+ <tr>
+  <td class="infohelp">
+ <b><%=intl._t("The default settings will work for most people.")%></b> 
+ <%=intl._t("Changing these settings will restart your router.")%>
+  </td>
+ </tr>
+ <tr>
+  <th id="upnpconfig"><%=intl._t("UPnP Configuration")%>&nbsp;<a href="peers#upnp">[<%=intl._t("UPnP Status")%>]</a></th>
+ </tr>
+ <tr>
+  <td>
+    <label><input type="checkbox" class="optbox" name="upnp" value="true" <jsp:getProperty name="nethelper" property="upnpChecked" /> >
+    <%=intl._t("Enable UPnP to open firewall ports")%></label>
+  </td>
+ </tr>
+ <tr>
+  <th id="ipconfig"><%=intl._t("IP Configuration")%></th>
+ </tr>
+ <tr>
+  <td>
+ <b class="suboption"><%=intl._t("Externally reachable hostname or IP address")%>:</b><br>
+    <label><input type="radio" class="optbox" name="udpAutoIP" value="local,upnp,ssu" <%=nethelper.getUdpAutoIPChecked(3) %> >
+    <%=intl._t("Use all auto-detect methods")%></label><br>
+    <label><input type="radio" class="optbox" name="udpAutoIP" value="local,ssu" <%=nethelper.getUdpAutoIPChecked(4) %> >
+    <%=intl._t("Disable UPnP IP address detection")%></label><br>
+    <label><input type="radio" class="optbox" name="udpAutoIP" value="upnp,ssu" <%=nethelper.getUdpAutoIPChecked(5) %> >
+    <%=intl._t("Ignore local interface IP address")%></label><br>
+    <label><input type="radio" class="optbox" name="udpAutoIP" value="ssu" <%=nethelper.getUdpAutoIPChecked(0) %> >
+    <%=intl._t("Use SSU IP address detection only")%></label><br>
+    <label><input type="radio" class="optbox" name="udpAutoIP" value="hidden" <%=nethelper.getUdpAutoIPChecked(2) %> >
+    <%=intl._t("Hidden mode - do not publish IP")%> <i><%=intl._t("(prevents participating traffic)")%></i></label><br>
+    <label><input type="radio" class="optbox" name="udpAutoIP" value="fixed" <%=nethelper.getUdpAutoIPChecked(1) %> >
+    <%=intl._t("Specify hostname or IP")%>:</label>
     <%=nethelper.getAddressSelector() %>
- </p><p>
- <%=intl._t("Action when IP changes")%>:<br>
-    <input type="checkbox" class="optbox" name="laptop" value="true" <jsp:getProperty name="nethelper" property="laptopChecked" /> >
+  </td>
+ </tr>
+ <tr>
+  <th id="ipchange"><%=intl._t("Action when IP changes")%></th>
+ </tr>
+ <tr>
+  <td>
+    <label><input type="checkbox" class="optbox" name="laptop" value="true" <jsp:getProperty name="nethelper" property="laptopChecked" /> >
     <%=intl._t("Laptop mode - Change router identity and UDP port when IP changes for enhanced anonymity")%>
-    (<i><%=intl._t("Experimental")%></i>)
- </p><p>
- <%=intl._t("IPv4 Configuration")%>:<br>
-    <input type="checkbox" class="optbox" name="IPv4Firewalled" value="true" <jsp:getProperty name="nethelper" property="IPv4FirewalledChecked" /> >
-    <%=intl._t("Disable inbound (Firewalled by Carrier-grade NAT or DS-Lite)")%>
- </p><p>
- <%=intl._t("IPv6 Configuration")%>:<br>
-    <input type="checkbox" class="optbox" name="IPv6Firewalled" value="true" <jsp:getProperty name="nethelper" property="IPv6FirewalledChecked" /> >
-    <%=intl._t("Disable inbound (Firewalled by Carrier-grade NAT or DS-Lite)")%><br>
-    <input type="radio" class="optbox" name="ipv6" value="false" <%=nethelper.getIPv6Checked("false") %> >
-    <%=intl._t("Disable IPv6")%><br>
-    <input type="radio" class="optbox" name="ipv6" value="enable" <%=nethelper.getIPv6Checked("enable") %> >
-    <%=intl._t("Enable IPv6")%><br>
-    <input type="radio" class="optbox" name="ipv6" value="preferIPv4" <%=nethelper.getIPv6Checked("preferIPv4") %> >
-    <%=intl._t("Prefer IPv4 over IPv6")%><br>
-    <input type="radio" class="optbox" name="ipv6" value="preferIPv6" <%=nethelper.getIPv6Checked("preferIPv6") %> >
-    <%=intl._t("Prefer IPv6 over IPv4")%><br>
-    <input type="radio" class="optbox" name="ipv6" value="only" <%=nethelper.getIPv6Checked("only") %> >
+    (<i><%=intl._t("Experimental")%></i>)</label>
+  </td>
+ </tr>
+ <tr>
+  <th id="ipv4config"><%=intl._t("IPv4 Configuration")%></th>
+ </tr>
+ <tr>
+  <td>
+    <label><input type="checkbox" class="optbox" name="IPv4Firewalled" value="true" <jsp:getProperty name="nethelper" property="IPv4FirewalledChecked" /> >
+    <%=intl._t("Disable inbound (Firewalled by Carrier-grade NAT or DS-Lite)")%></label>
+  </td>
+ </tr>
+ <tr>
+  <th id="ipv6config"><%=intl._t("IPv6 Configuration")%></th>
+ </tr>
+ <tr>
+  <td>
+    <label><input type="checkbox" class="optbox" name="IPv6Firewalled" value="true" <jsp:getProperty name="nethelper" property="IPv6FirewalledChecked" /> >
+    <%=intl._t("Disable inbound (Firewalled by Carrier-grade NAT or DS-Lite)")%></label><br>
+    <label><input type="radio" class="optbox" name="ipv6" value="false" <%=nethelper.getIPv6Checked("false") %> >
+    <%=intl._t("Disable IPv6")%></label><br>
+    <label><input type="radio" class="optbox" name="ipv6" value="enable" <%=nethelper.getIPv6Checked("enable") %> >
+    <%=intl._t("Enable IPv6")%></label><br>
+    <label><input type="radio" class="optbox" name="ipv6" value="preferIPv4" <%=nethelper.getIPv6Checked("preferIPv4") %> >
+    <%=intl._t("Prefer IPv4 over IPv6")%></label><br>
+    <label><input type="radio" class="optbox" name="ipv6" value="preferIPv6" <%=nethelper.getIPv6Checked("preferIPv6") %> >
+    <%=intl._t("Prefer IPv6 over IPv4")%></label><br>
+    <label><input type="radio" class="optbox" name="ipv6" value="only" <%=nethelper.getIPv6Checked("only") %> >
     <%=intl._t("Use IPv6 only (disable IPv4)")%>
-    (<i><%=intl._t("Experimental")%></i>)<br>
- </p><p><b><%=intl._t("UDP Configuration:")%></b><br>
- <%=intl._t("UDP port:")%>
+    (<i><%=intl._t("Experimental")%></i>)</label>
+  </td>
+ </tr>
+ <tr>
+  <th id="udpconfig"><%=intl._t("UDP Configuration")%></th>
+ </tr>
+ <tr>
+  <td class="infowarn">
+   <b><%=intl._t("Do not reveal your port numbers to anyone as they can be used to discover your ip address.")%></b>
+  </td>
+ </tr>
+ <tr>
+  <td>
+ <b><%=intl._t("UDP port:")%></b>
  <input name ="udpPort" type="text" size="5" maxlength="5" value="<jsp:getProperty name="nethelper" property="configuredUdpPort" />" ><br>
- <input type="checkbox" class="optbox" name="disableUDP" value="disabled" <%=nethelper.getUdpDisabledChecked() %> >
- <%=intl._t("Completely disable")%> <i><%=intl._t("(select only if behind a firewall that blocks outbound UDP)")%></i><br>
+ <label><input type="checkbox" class="optbox" name="disableUDP" value="disabled" <%=nethelper.getUdpDisabledChecked() %> >
+ <%=intl._t("Completely disable")%> <i><%=intl._t("(select only if behind a firewall that blocks outbound UDP)")%></i></label>
+  </td>
+ </tr>
 <% /********
 <!-- let's keep this simple...
 <input type="checkbox" class="optbox" name="requireIntroductions" value="true" <jsp:getProperty name="nethelper" property="requireIntroductionsChecked" /> />
@@ -83,125 +124,54 @@
  Current External UDP address: <i><jsp:getProperty name="nethelper" property="udpAddress" /></i><br>
 -->
 *********/ %>
- </p><p>
- <b><%=intl._t("TCP Configuration")%>:</b><br>
- <%=intl._t("Externally reachable hostname or IP address")%>:<br>
-    <input type="radio" class="optbox" name="ntcpAutoIP" value="true" <%=nethelper.getTcpAutoIPChecked(2) %> >
+ <tr>
+  <th id="tcpconfig"><%=intl._t("TCP Configuration")%></th>
+ </tr>
+ <tr>
+  <td>
+ <b class="suboption"><%=intl._t("Externally reachable hostname or IP address")%>:</b><br>
+    <label><input type="radio" class="optbox" name="ntcpAutoIP" value="true" <%=nethelper.getTcpAutoIPChecked(2) %> >
     <%=intl._t("Use auto-detected IP address")%>
     <i>(<%=intl._t("currently")%> <jsp:getProperty name="nethelper" property="udpIP" />)</i>
-    <%=intl._t("if we are not firewalled")%><br>
-    <input type="radio" class="optbox" name="ntcpAutoIP" value="always" <%=nethelper.getTcpAutoIPChecked(3) %> >
-    <%=intl._t("Always use auto-detected IP address (Not firewalled)")%><br>
-    <input type="radio" class="optbox" name="ntcpAutoIP" value="false" <%=nethelper.getTcpAutoIPChecked(1) %> >
-    <%=intl._t("Specify hostname or IP")%>:
+    <%=intl._t("if we are not firewalled")%></label><br>
+    <label><input type="radio" class="optbox" name="ntcpAutoIP" value="always" <%=nethelper.getTcpAutoIPChecked(3) %> >
+    <%=intl._t("Always use auto-detected IP address (Not firewalled)")%></label><br>
+    <label><input type="radio" class="optbox" name="ntcpAutoIP" value="false" <%=nethelper.getTcpAutoIPChecked(1) %> >
+    <%=intl._t("Specify hostname or IP")%>:</label>
     <input name ="ntcphost" type="text" size="16" value="<jsp:getProperty name="nethelper" property="ntcphostname" />" ><br>
-    <input type="radio" class="optbox" name="ntcpAutoIP" value="false" <%=nethelper.getTcpAutoIPChecked(0) %> >
-    <%=intl._t("Disable inbound (Firewalled)")%><br>
-    <input type="radio" class="optbox" name="ntcpAutoIP" value="disabled" <%=nethelper.getTcpAutoIPChecked(4) %> >
-    <%=intl._t("Completely disable")%> <i><%=intl._t("(select only if behind a firewall that throttles or blocks outbound TCP)")%></i><br>
- </p><p>
- <%=intl._t("Externally reachable TCP port")%>:<br>
-    <input type="radio" class="optbox" name="ntcpAutoPort" value="2" <%=nethelper.getTcpAutoPortChecked(2) %> >
+    <label><input type="radio" class="optbox" name="ntcpAutoIP" value="false" <%=nethelper.getTcpAutoIPChecked(0) %> >
+    <%=intl._t("Disable inbound (Firewalled)")%></label><br>
+    <label><input type="radio" class="optbox" name="ntcpAutoIP" value="disabled" <%=nethelper.getTcpAutoIPChecked(4) %> >
+    <%=intl._t("Completely disable")%> <i><%=intl._t("(select only if behind a firewall that throttles or blocks outbound TCP)")%></i></label>
+  </td>
+ </tr>
+ <tr>
+  <th id="externaltcp"><%=intl._t("Externally reachable TCP port")%></th>
+ </tr>
+ <tr>
+  <td>
+    <label><input type="radio" class="optbox" name="ntcpAutoPort" value="2" <%=nethelper.getTcpAutoPortChecked(2) %> >
     <%=intl._t("Use the same port configured for UDP")%>
-    <i>(<%=intl._t("currently")%> <jsp:getProperty name="nethelper" property="udpPort" />)</i><br>
-    <input type="radio" class="optbox" name="ntcpAutoPort" value="1" <%=nethelper.getTcpAutoPortChecked(1) %> >
-    <%=intl._t("Specify Port")%>:
-    <input name ="ntcpport" type="text" size="5" maxlength="5" value="<jsp:getProperty name="nethelper" property="ntcpport" />" ><br>
- </p><p><b><%=intl._t("Notes")%>: <%=intl._t("a) Do not reveal your port numbers to anyone!   b) Changing these settings will restart your router.")%></b></p>
-<hr><div class="formaction">
+    <i>(<%=intl._t("currently")%> <jsp:getProperty name="nethelper" property="udpPort" />)</i></label><br>
+    <label><input type="radio" class="optbox" name="ntcpAutoPort" value="1" <%=nethelper.getTcpAutoPortChecked(1) %> >
+    <%=intl._t("Specify Port")%>:</label>
+    <input name ="ntcpport" type="text" size="5" maxlength="5" value="<jsp:getProperty name="nethelper" property="ntcpport" />" >
+  </td>
+ </tr>
+ <tr>
+  <td class="optionsave">
 <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
 <input type="submit" class="accept" name="save" value="<%=intl._t("Save changes")%>" >
-</div><h3><a name="chelp"><%=intl._t("Configuration Help")%>:</a></h3><div align="justify"><p>
- <%=intl._t("While I2P will work fine behind most firewalls, your speeds and network integration will generally improve if the I2P port is forwarded for both UDP and TCP.")%>
- </p><p>
- <%=intl._t("If you can, please poke a hole in your firewall to allow unsolicited UDP and TCP packets to reach you.")%>
-   <%=intl._t("If you can't, I2P supports UPnP (Universal Plug and Play) and UDP hole punching with \"SSU introductions\" to relay traffic.")%>
-   <%=intl._t("Most of the options above are for special situations, for example where UPnP does not work correctly, or a firewall not under your control is doing harm.")%> 
-   <%=intl._t("Certain firewalls such as symmetric NATs may not work well with I2P.")%>
- </p>
+  </td>
+ </tr>
+</table>
+
 <% /********
 <!-- let's keep this simple...
 <input type="submit" name="recheckReachability" value="Check network reachability..." />
 </p>
 -->
 *********/ %>
-<p>
- <%=intl._t("UPnP is used to communicate with Internet Gateway Devices (IGDs) to detect the external IP address and forward ports.")%>
-   <%=intl._t("UPnP support is beta, and may not work for any number of reasons")%>:
-</p>
-<ul>
-<li class="tidylist"><%=intl._t("No UPnP-compatible device present")%>
-<li class="tidylist"><%=intl._t("UPnP disabled on the device")%>
-<li class="tidylist"><%=intl._t("Software firewall interference with UPnP")%>
-<li class="tidylist"><%=intl._t("Bugs in the device's UPnP implementation")%>
-<li class="tidylist"><%=intl._t("Multiple firewall/routers in the internet connection path")%>
-<li class="tidylist"><%=intl._t("UPnP device change, reset, or address change")%>
-</ul>
-<p><a href="peers#upnp"><%=intl._t("Review the UPnP status here.")%></a>
-<%=intl._t("UPnP may be enabled or disabled above, but a change requires a router restart to take effect.")%></p>
-<p><%=intl._t("Hostnames entered above will be published in the network database.")%>
-    <%=intl._t("They are <b>not private</b>.")%>
-    <%=intl._t("Also, <b>do not enter a private IP address</b> like 127.0.0.1 or 192.168.1.1.")%>
-    <%=intl._t("If you specify the wrong IP address or hostname, or do not properly configure your NAT or firewall, your network performance will degrade substantially.")%>
-    <%=intl._t("When in doubt, leave the settings at the defaults.")%>
-</p>
-<h3><a name="help"><%=intl._t("Reachability Help")%>:</a></h3><p>
- <%=intl._t("While I2P will work fine behind most firewalls, your speeds and network integration will generally improve if the I2P port is forwarded for both UDP and TCP.")%>
- <%=intl._t("If you think you have opened up your firewall and I2P still thinks you are firewalled, remember that you may have multiple firewalls, for example both software packages and external hardware routers.")%>
- <%=intl._t("If there is an error, the <a href=\"logs.jsp\">logs</a> may also help diagnose the problem.")%>
-</p>
- <ul>
-<li class="tidylist"><b><%=intl._t("OK")%></b> - 
-     <%=intl._t("Your UDP port does not appear to be firewalled.")%>
-<li class="tidylist"><b><%=intl._t("Firewalled")%></b> - 
-     <%=intl._t("Your UDP port appears to be firewalled.")%>
-     <%=intl._t("As the firewall detection methods are not 100% reliable, this may occasionally be displayed in error.")%>
-     <%=intl._t("However, if it appears consistently, you should check whether both your external and internal firewalls are open for your port.")%> 
-     <%=intl._t("I2P will work fine when firewalled, there is no reason for concern. When firewalled, the router uses \"introducers\" to relay inbound connections.")%>
-     <%=intl._t("However, you will get more participating traffic and help the network more if you can open your firewall(s).")%>
-     <%=intl._t("If you think you have already done so, remember that you may have both a hardware and a software firewall, or be behind an additional, institutional firewall you cannot control.")%>
-     <%=intl._t("Also, some routers cannot correctly forward both TCP and UDP on a single port, or may have other limitations or bugs that prevent them from passing traffic through to I2P.")%>
-<li class="tidylist"><b><%=intl._t("Testing")%></b> - 
-     <%=intl._t("The router is currently testing whether your UDP port is firewalled.")%>
-<li class="tidylist"><b><%=intl._t("Hidden")%></b> - 
-     <%=intl._t("The router is not configured to publish its address, therefore it does not expect incoming connections.")%>
-     <%=intl._t("Hidden mode is automatically enabled for added protection in certain countries.")%>
-<li class="tidylist"><b><%=intl._t("WARN - Firewalled and Fast")%></b> - 
-     <%=intl._t("You have configured I2P to share more than 128KBps of bandwidth, but you are firewalled.")%>
-     <%=intl._t("While I2P will work fine in this configuration, if you really have over 128KBps of bandwidth to share, it will be much more helpful to the network if you open your firewall.")%>
-<li class="tidylist"><b><%=intl._t("WARN - Firewalled and Floodfill")%></b> - 
-     <%=intl._t("You have configured I2P to be a floodfill router, but you are firewalled.")%> 
-     <%=intl._t("For best participation as a floodfill router, you should open your firewall.")%>
-<li class="tidylist"><b><%=intl._t("WARN - Firewalled with Inbound TCP Enabled")%></b> - 
-     <%=intl._t("You have configured inbound TCP, however your UDP port is firewalled, and therefore it is likely that your TCP port is firewalled as well.")%>
-     <%=intl._t("If your TCP port is firewalled with inbound TCP enabled, routers will not be able to contact you via TCP, which will hurt the network.")%> 
-     <%=intl._t("Please open your firewall or disable inbound TCP above.")%>
-<li class="tidylist"><b><%=intl._t("WARN - Firewalled with UDP Disabled")%></b> -
-     <%=intl._t("You have configured inbound TCP, however you have disabled UDP.")%> 
-     <%=intl._t("You appear to be firewalled on TCP, therefore your router cannot accept inbound connections.")%>
-     <%=intl._t("Please open your firewall or enable UDP.")%>
-<li class="tidylist"><b><%=intl._t("ERR - Clock Skew")%></b> - 
-     <%=intl._t("Your system's clock is skewed, which will make it difficult to participate in the network.")%> 
-     <%=intl._t("Correct your clock setting if this error persists.")%>
-<li class="tidylist"><b><%=intl._t("ERR - Private TCP Address")%></b> - 
-     <%=intl._t("You must never advertise an unroutable IP address such as 127.0.0.1 or 192.168.1.1 as your external address.")%> 
-     <%=intl._t("Correct the address or disable inbound TCP above.")%>
-<li class="tidylist"><b><%=intl._t("ERR - SymmetricNAT")%></b> - 
-     <%=intl._t("I2P detected that you are firewalled by a Symmetric NAT.")%>
-     <%=intl._t("I2P does not work well behind this type of firewall. You will probably not be able to accept inbound connections, which will limit your participation in the network.")%>
-<li class="tidylist"><b><%=intl._t("ERR - UDP Port In Use - Set i2np.udp.internalPort=xxxx in advanced config and restart")%></b> -
-     <%=intl._t("I2P was unable to bind to the configured port noted on the advanced network configuration page .")%>
-     <%=intl._t("Check to see if another program is using the configured port. If so, stop that program or configure I2P to use a different port.")%> 
-     <%=intl._t("This may be a transient error, if the other program is no longer using the port.")%> 
-     <%=intl._t("However, a restart is always required after this error.")%>
-<li class="tidylist"><b><%=intl._t("ERR - UDP Disabled and Inbound TCP host/port not set")%></b> -
-     <%=intl._t("You have not configured inbound TCP with a hostname and port above, however you have disabled UDP.")%> 
-     <%=intl._t("Therefore your router cannot accept inbound connections.")%>
-     <%=intl._t("Please configure a TCP host and port above or enable UDP.")%>
-<li class="tidylist"><b><%=intl._t("ERR - Client Manager I2CP Error - check logs")%></b> -
-     <%=intl._t("This is usually due to a port 7654 conflict. Check the logs to verify.")%> 
-     <%=intl._t("Do you have another I2P instance running? Stop the conflicting program and restart I2P.")%>
- </ul><hr>
 <% /********
       <!--
  <b>Dynamic Router Keys: </b>
@@ -223,4 +193,4 @@
  <br>
 -->
 *********/ %>
-</div></form></div></div></body></html>
+</form></div></body></html>
diff --git a/apps/routerconsole/jsp/configpeer.jsp b/apps/routerconsole/jsp/configpeer.jsp
index ca8a8022a555ec2570204158eb69a19a76e1c030..0a114e04b5bdb327539aa05abd89d2fd1730ff76 100644
--- a/apps/routerconsole/jsp/configpeer.jsp
+++ b/apps/routerconsole/jsp/configpeer.jsp
@@ -9,7 +9,7 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Peer Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_peers">
  <%@include file="confignav.jsi" %>
  <jsp:useBean class="net.i2p.router.web.ConfigPeerHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
@@ -19,42 +19,53 @@
     if (request.getParameter("peer") != null)
         peer = net.i2p.data.DataHelper.stripHTML(request.getParameter("peer"));  // XSS
  %>
- <div class="configure">
  <form action="configpeer" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <a name="sh"> </a>
  <a name="unsh"> </a>
  <a name="bonus"> </a>
- <h2><%=intl._t("Manual Peer Controls")%></h2>
- <div class="mediumtags"><p><%=intl._t("Router Hash")%>:
-<input type="text" size="55" name="peer" value="<%=peer%>" /></p></div>
- <h3><%=intl._t("Manually Ban / Unban a Peer")%></h3>
- <p><%=intl._t("Banning will prevent the participation of this peer in tunnels you create.")%></p>
-      <div class="formaction">
+ <h3 class="tabletitle"><%=intl._t("Manual Peer Controls")%></h3>
+ <table class="configtable">
+   <tr><td colspan="2"><b><%=intl._t("Router Hash")%>:</b> <input type="text" size="55" name="peer" value="<%=peer%>" /></td></tr>
+   <tr><th colspan="2"><%=intl._t("Manually Ban / Unban a Peer")%></th></tr>
+   <tr><td class="infohelp" colspan="2"><%=intl._t("Banning will prevent the participation of this peer in tunnels you create.")%></td></tr>
+   <tr>
+     <td class="optionsave" colspan="2">
         <input type="submit" name="action" class="delete" value="<%=intl._t("Ban peer until restart")%>" />
         <input type="submit" name="action" class="accept" value="<%=intl._t("Unban peer")%>" />
         <% if (! "".equals(peer)) { %>
         <!-- <font color="blue">&lt;---- click to verify action</font> -->
         <% } %>
-      </div>
- <h3><%=intl._t("Adjust Profile Bonuses")%></h3>
- <p><%=intl._t("Bonuses may be positive or negative, and affect the peer's inclusion in Fast and High Capacity tiers. Fast peers are used for client tunnels, and High Capacity peers are used for some exploratory tunnels. Current bonuses are displayed on the")%> <a href="profiles"><%=intl._t("profiles page")%></a>.</p>
+     </td>
+   </tr>
+   <tr><th colspan="2"><%=intl._t("Adjust Profile Bonuses")%></th></tr>
+   <tr>
+     <td class="infohelp" colspan="2">
+     <%=intl._t("Bonuses may be positive or negative, and affect the peer's inclusion in Fast and High Capacity tiers. Fast peers are used for client tunnels, and High Capacity peers are used for some exploratory tunnels. Current bonuses are displayed on the")%> <a href="profiles"><%=intl._t("profiles page")%></a>.
+     </td>
+   </tr>
+   <tr>
  <% long speed = 0; long capacity = 0;
     if (! "".equals(peer)) {
         // get existing bonus values?
     }
  %>
- <div class="mediumtags"><p><%=intl._t("Speed")%>:
+     <td><b><%=intl._t("Speed")%>:</b>
  <input type="text" size="8" name="speed" value="<%=speed%>" />
- <%=intl._t("Capacity")%>:
+ <b><%=intl._t("Capacity")%>:</b>
  <input type="text" size="8" name="capacity" value="<%=capacity%>" />
- <input type="submit" name="action" class="add" value="<%=intl._t("Adjust peer bonuses")%>" /></p></div>
+     </td>
+     <td class="optionsave">
+       <input type="submit" name="action" class="add" value="<%=intl._t("Adjust peer bonuses")%>" />
+     </td>
+   </tr>
+ </table>
  </form>
- <a name="banlist"> </a><h2><%=intl._t("Banned Peers")%></h2>
+ <a name="banlist"> </a><h3 id="bannedpeers"><%=intl._t("Banned Peers")%></h3>
  <jsp:useBean class="net.i2p.router.web.ProfilesHelper" id="profilesHelper" scope="request" />
  <jsp:setProperty name="profilesHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
  <% profilesHelper.storeWriter(out); %>
  <jsp:getProperty name="profilesHelper" property="banlistSummary" />
- <div class="wideload"><h2><%=intl._t("Banned IPs")%></h2>
+ <h3 class="tabletitle"><%=intl._t("Banned IPs")%></h3>
  <jsp:getProperty name="peerhelper" property="blocklistSummary" />
-</div></div></div></body></html>
+ </div></body></html>
diff --git a/apps/routerconsole/jsp/configplugins.jsp b/apps/routerconsole/jsp/configplugins.jsp
index 9eb7ec3d2d3d9b01be74cdcdcd07230a3bce1783..73a590c16e72ef2ebfe666d54f4cf1b04e327ffd 100644
--- a/apps/routerconsole/jsp/configplugins.jsp
+++ b/apps/routerconsole/jsp/configplugins.jsp
@@ -21,7 +21,7 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
 <jsp:setProperty name="clientshelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <jsp:setProperty name="clientshelper" property="edit" value="<%=request.getParameter(\"edit\")%>" />
 <h1><%=intl._t("Plugin Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_plugins">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigClientsHandler" id="formhandler" scope="request" />
@@ -31,13 +31,13 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
    if (clientshelper.showPlugins()) {
        if (clientshelper.isPluginUpdateEnabled()) {
 %>
-<h3><a name="pconfig"></a><%=intl._t("Plugin Configuration")%></h3><p>
+<h3 id="pconfig"><%=intl._t("Plugin Configuration")%></h3><p id="pluginconfigtext">
  <%=intl._t("The plugins listed below are started by the webConsole client.")%>
  </p><div class="wideload">
 <form action="" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <jsp:getProperty name="clientshelper" property="form3" />
-<div class="formaction">
+<div class="formaction" id="pluginconfigactions">
  <input type="submit" class="cancel" name="foo" value="<%=intl._t("Cancel")%>" />
  <input type="submit" name="action" class="accept" value="<%=intl._t("Save Plugin Configuration")%>" />
 </div></form></div>
@@ -45,38 +45,50 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
        } // pluginUpdateEnabled
        if (clientshelper.isPluginInstallEnabled()) {
 %>
-<h3><a name="plugin"></a><%=intl._t("Plugin Installation from URL")%></h3><p>
- <%=intl._t("Look for available plugins on {0}.", "<a href=\"http://i2pwiki.i2p/index.php?title=Plugins\">i2pwiki.i2p</a>")%>
- <%=intl._t("To install a plugin, enter the download URL:")%>
- </p>
-<div class="wideload">
+<h3 id="pluginmanage"><a name="plugin"></a><%=intl._t("Plugin Installation")%></h3><p>
+<table id="plugininstall" class="configtable">
+<tr><td class="infohelp" colspan="2">
+ <%=intl._t("Look for available plugins on {0}.", "<a href=\"http://i2pwiki.i2p/index.php?title=Plugins\" target=\"_blank\">i2pwiki.i2p</a>")%>
+</td></tr>
+<tr><th colspan="2">
+ <%=intl._t("Installation from URL")%>
+</th></tr>
+<tr>
 <form action="configplugins" method="POST">
-<input type="hidden" name="nonce" value="<%=pageNonce%>" >
-<p>
- <input type="text" size="60" name="pluginURL" >
- </p><hr><div class="formaction">
- <input type="submit" name="action" class="default" value="<%=intl._t("Install Plugin")%>" />
+<td>
+ <input type="hidden" name="nonce" value="<%=pageNonce%>" >
+ <b>URL:</b>
+ <input type="text" size="60" name="pluginURL" title="<%=intl._t("To install a plugin, enter the download URL:")%>" >
+</td>
+<td class="optionsave" align="right">
+ <input type="submit" name="action" class="default hideme" value="<%=intl._t("Install Plugin")%>" />
  <input type="submit" class="cancel" name="foo" value="<%=intl._t("Cancel")%>" />
  <input type="submit" name="action" class="download" value="<%=intl._t("Install Plugin")%>" />
-</div></form></div>
-
-
-<div class="wideload">
-<h3><a name="plugin"></a><%=intl._t("Plugin Installation from File")%></h3>
+</td>
+</form>
+</tr>
+<tr><th colspan="2">
+<a name="plugin"></a><%=intl._t("Installation from File")%>
+</th></tr>
+<tr>
 <form action="configplugins" method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
+<td>
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
-<p><%=intl._t("Install plugin from file.")%>
-<br><%=intl._t("Select xpi2p or su3 file")%> :
-<input type="file" name="pluginFile" >
-</p><hr><div class="formaction">
+<b><%=intl._t("Select xpi2p or su3 file")%>:</b>
+<input type="file" name="pluginFile" accept=".xpi2p,.su3" >
+</td>
+<td class="optionsave" align="right">
 <input type="submit" name="action" class="download" value="<%=intl._t("Install Plugin from File")%>" />
-</div></form></div>
+</td>
+</form>
+</tr>
+</table>
 <%
        } // pluginInstallEnabled
        if (clientshelper.isPluginUpdateEnabled()) {
 %>
-<h3><a name="plugin"></a><%=intl._t("Update All Plugins")%></h3>
-<div class="formaction">
+<h4 id="updateplugins" class="embeddedtitle"><a name="plugin"></a><%=intl._t("Update All Plugins")%></h4>
+<div class="formaction" id="pluginupdater">
 <form action="configplugins" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="submit" name="action" class="reload" value="<%=intl._t("Update All Installed Plugins")%>" />
diff --git a/apps/routerconsole/jsp/configreseed.jsp b/apps/routerconsole/jsp/configreseed.jsp
index 25b6704f9fac9a57f5f51f89a8521222d481e0d4..38ca7f0e3da151df1cbf60659f7d39e956afc6b6 100644
--- a/apps/routerconsole/jsp/configreseed.jsp
+++ b/apps/routerconsole/jsp/configreseed.jsp
@@ -14,106 +14,132 @@
 <jsp:useBean class="net.i2p.router.web.ConfigReseedHelper" id="reseedHelper" scope="request" />
 <jsp:setProperty name="reseedHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <h1><%=intl._t("I2P Reseeding Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_reseed">
 <%@include file="confignav.jsi" %>
 
 <jsp:useBean class="net.i2p.router.web.ConfigReseedHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
 
-<p><%=intl._t("Reseeding is the bootstrapping process used to find other routers when you first install I2P, or when your router has too few router references remaining.")%>
+<p class="infohelp">
+<%=intl._t("Reseeding is the bootstrapping process used to find other routers when you first install I2P, or when your router has too few router references remaining.")%>
 <%=intl._t("If reseeding has failed, you should first check your network connection.")%>
 <%=intl._t("See {0} for instructions on reseeding manually.", "<a href=\"https://geti2p.net/faq#manual_reseed\">" + intl._t("the FAQ") + "</a>")%>
 </p>
-
-<div class="configure"><form action="" method="POST">
+<h3 class="tabletitle"><%=intl._t("Manual Reseed")%></h3>
+<table id="manualreseed" class="configtable">
+ <tr>
+  <td class="infohelp" colspan="2">
+<%=intl._t("The su3 format is preferred, as it will be verified as signed by a trusted source.")%>&nbsp;
+<%=intl._t("The zip format is unsigned; use a zip file only from a source that you trust.")%>
+  </td>
+ <tr>
+  <th colspan="2"><%=intl._t("Reseed from URL")%></th>
+ </tr>
+ <tr>
+<form action="" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
-<h3><%=intl._t("Manual Reseed from URL")%></h3>
-<p><%=intl._t("Enter zip or su3 URL")%> :
+  <td>
+<b><%=intl._t("Enter zip or su3 URL")%>:</b>
 <input name="url" type="text" size="60" value="" />
-<br><%=intl._t("The su3 format is preferred, as it will be verified as signed by a trusted source.")%>
-<%=intl._t("The zip format is unsigned; use a zip file only from a source that you trust.")%>
-</p>
-<div class="formaction">
+  </td>
+  <td class="optionsave">
 <input type="submit" name="action" class="download" value="<%=intl._t("Reseed from URL")%>" />
-</div></form></div>
-
-<div class="configure">
+  </td>
+</form>
+ </tr>
+ <tr>
+  <th colspan="2"><%=intl._t("Reseed from File")%></th>
+ </tr>
+ <tr>
 <form action="" method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
-<h3><%=intl._t("Manual Reseed from File")%></h3>
-<p><%=intl._t("Select zip or su3 file")%> :
-<input name="file" type="file" value="" />
-<br><%=intl._t("The su3 format is preferred, as it will be verified as signed by a trusted source.")%>
-<%=intl._t("The zip format is unsigned; use a zip file only from a source that you trust.")%>
-</p>
-<div class="formaction">
+  <td>
+<b><%=intl._t("Select zip or su3 file")%>:</b>
+<input name="file" type="file" accept=".zip,.su3" value="" />
+  </td>
+  <td class="optionsave">
 <input type="submit" name="action" class="download" value="<%=intl._t("Reseed from file")%>" />
-</div></form></div>
-
-<div class="configure">
-<form action="/createreseed" method="GET">
-<h3><%=intl._t("Create Reseed File")%></h3>
-<p><%=intl._t("Create a new reseed zip file you may share for others to reseed manually.")%>
+  </td>
+</form>
+ </tr>
+ <tr>
+  <th colspan="2">
+<%=intl._t("Create Reseed File")%>
+  </th>
+ </tr>
+ <tr>
+  <td class="infohelp" colspan="2">
+<%=intl._t("Create a new reseed zip file you may share for others to reseed manually.")%>&nbsp;
 <%=intl._t("This file will never contain your own router's identity or IP.")%>
-</p>
-<div class="formaction">
+  </td>
+ </tr>
+ <tr>
+  <td class="optionsave" colspan="2">
+<form action="/createreseed" method="GET">
 <input type="submit" name="action" class="go" value="<%=intl._t("Create reseed file")%>" />
-</div></form></div>
+</form>
+  </td>
+ </tr>
+</table>
 
-<div class="configure">
 <form action="" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
-<h3><%=intl._t("Reseeding Configuration")%></h3>
-<p><b><%=intl._t("The default settings will work for most people.")%></b>
+<h3 class="tabletitle"><%=intl._t("Reseeding Configuration")%></h3>
+<table id="reseedconfig" class="configtable" border="0" cellspacing="5">
+ <tr>
+  <td class="infohelp" colspan="2">
+<b><%=intl._t("The default settings will work for most people.")%></b>&nbsp;
 <%=intl._t("Change these only if HTTPS is blocked by a restrictive firewall and reseed has failed.")%>
-</p>
-<div class="wideload">
-<table border="0" cellspacing="5">
-<tr><td class="mediumtags" align="right"><b><%=intl._t("Reseed URL Selection")%>:</b></td>
-<td><input type="radio" class="optbox" name="mode" value="0" <%=reseedHelper.modeChecked(0) %> >
-<b><%=intl._t("Try SSL first then non-SSL")%></b><br>
-<input type="radio" class="optbox" name="mode" value="1" <%=reseedHelper.modeChecked(1) %> >
-<b><%=intl._t("Use SSL only")%></b><br>
-<input type="radio" class="optbox" name="mode" value="2" <%=reseedHelper.modeChecked(2) %> >
-<b><%=intl._t("Use non-SSL only")%></b></td></tr>
-<tr><td class="mediumtags" align="right"><b><%=intl._t("Reseed URLs")%>:</b></td>
+  </td>
+ </tr>
+<tr><td align="right"><b><%=intl._t("Reseed URL Selection")%>:</b></td>
+<td><label><input type="radio" class="optbox" name="mode" value="0" <%=reseedHelper.modeChecked(0) %> >
+<%=intl._t("Try SSL first then non-SSL")%></label><br>
+<label><input type="radio" class="optbox" name="mode" value="1" <%=reseedHelper.modeChecked(1) %> >
+<%=intl._t("Use SSL only")%></label><br>
+<label><input type="radio" class="optbox" name="mode" value="2" <%=reseedHelper.modeChecked(2) %> >
+<%=intl._t("Use non-SSL only")%></label></td></tr>
+<tr><td align="right"><b><%=intl._t("Reseed URLs")%>:</b></td>
 <td><textarea wrap="off" name="reseedURL" cols="60" rows="7" spellcheck="false"><jsp:getProperty name="reseedHelper" property="reseedURL" /></textarea>
-<div class="formaction"><input type="submit" name="action" class="reload" value="<%=intl._t("Reset URL list")%>" /></div>
+<div class="formaction" id="resetreseed"><input type="submit" name="action" class="reload" value="<%=intl._t("Reset URL list")%>" /></div>
 </td></tr>
 
-<tr><td class="mediumtags" align="right"><b><%=intl._t("Enable HTTP Proxy?")%></b></td>
-<td><input type="checkbox" class="optbox" name="enable" value="true" <jsp:getProperty name="reseedHelper" property="enable" /> ></td></tr>
-<tr><td class="mediumtags" align="right"><b><%=intl._t("HTTP Proxy Host")%>:</b></td>
+<tr><td align="right"><label for="enableproxy"><b><%=intl._t("Enable HTTP Proxy?")%></b></label></td>
+<td><input type="checkbox" class="optbox" name="enable" id="enableproxy" value="true" <jsp:getProperty name="reseedHelper" property="enable" /> ></td></tr>
+<tr><td align="right"><b><%=intl._t("HTTP Proxy Host")%>:</b></td>
 <td><input name="host" type="text" value="<jsp:getProperty name="reseedHelper" property="host" />" ></td></tr>
-<tr><td class="mediumtags" align="right"><b><%=intl._t("HTTP Proxy Port")%>:</b></td>
+<tr><td align="right"><b><%=intl._t("HTTP Proxy Port")%>:</b></td>
 <td><input name="port" type="text" size="5" maxlength="5" value="<jsp:getProperty name="reseedHelper" property="port" />" ></td></tr>
 
-<tr><td class="mediumtags" align="right"><b><%=intl._t("Use HTTP Proxy Authorization?")%></b></td>
-<td><input type="checkbox" class="optbox" name="auth" value="true" <jsp:getProperty name="reseedHelper" property="auth" /> ></td></tr>
-<tr><td class="mediumtags" align="right"><b><%=intl._t("HTTP Proxy Username")%>:</b></td>
+<tr><td align="right"><label for="useproxyauth"><b><%=intl._t("Use HTTP Proxy Authorization?")%></b></label></td>
+<td><input type="checkbox" class="optbox" name="auth" id="useproxyauth" value="true" <jsp:getProperty name="reseedHelper" property="auth" /> ></td></tr>
+<tr><td align="right"><b><%=intl._t("HTTP Proxy Username")%>:</b></td>
 <td><input name="username" type="text" value="<jsp:getProperty name="reseedHelper" property="username" />" ></td></tr>
-<tr><td class="mediumtags" align="right"><b><%=intl._t("HTTP Proxy Password")%>:</b></td>
+<tr><td align="right"><b><%=intl._t("HTTP Proxy Password")%>:</b></td>
 <td><input name="nofilter_password" type="password" value="<jsp:getProperty name="reseedHelper" property="nofilter_password" />" ></td></tr>
 
 <!-- TODO Need SSLEepGet support
-<tr><td class="mediumtags" align="right"><b><%=intl._t("Enable HTTPS Proxy?")%></b></td>
+<tr><td align="right"><b><%=intl._t("Enable HTTPS Proxy?")%></b></td>
 <td><input type="checkbox" class="optbox" name="senable" value="true" <jsp:getProperty name="reseedHelper" property="senable" /> ></td></tr>
-<tr><td class="mediumtags" align="right"><b><%=intl._t("HTTPS Proxy Host")%>:</b></td>
+<tr><td align="right"><b><%=intl._t("HTTPS Proxy Host")%>:</b></td>
 <td><input name="shost" type="text" value="<jsp:getProperty name="reseedHelper" property="shost" />" ></td></tr>
-<tr><td class="mediumtags" align="right"><b><%=intl._t("HTTPS Proxy Port")%>:</b></td>
+<tr><td align="right"><b><%=intl._t("HTTPS Proxy Port")%>:</b></td>
 <td><input name="sport" type="text" size="5" maxlength="5" value="<jsp:getProperty name="reseedHelper" property="sport" />" ></td></tr>
 
-<tr><td class="mediumtags" align="right"><b><%=intl._t("Use HTTPS Proxy Authorization?")%></b></td>
+<tr><td align="right"><b><%=intl._t("Use HTTPS Proxy Authorization?")%></b></td>
 <td><input type="checkbox" class="optbox" name="sauth" value="true" <jsp:getProperty name="reseedHelper" property="sauth" /> ></td></tr>
-<tr><td class="mediumtags" align="right"><b><%=intl._t("HTTPS Proxy Username")%>:</b></td>
+<tr><td align="right"><b><%=intl._t("HTTPS Proxy Username")%>:</b></td>
 <td><input name="susername" type="text" value="<jsp:getProperty name="reseedHelper" property="susername" />" ></td></tr>
-<tr><td class="mediumtags" align="right"><b><%=intl._t("HTTPS Proxy Password")%>:</b></td>
+<tr><td align="right"><b><%=intl._t("HTTPS Proxy Password")%>:</b></td>
 <td><input name="nofilter_spassword" type="password" value="<jsp:getProperty name="reseedHelper" property="nofilter_spassword" />" ></td></tr>
 -->
 
-</table></div>
-<div class="formaction">
+ <tr>
+  <td class="optionsave" colspan="2">
 <input type="submit" class="cancel" name="foo" value="<%=intl._t("Cancel")%>" />
 <input type="submit" name="action" class="download" value="<%=intl._t("Save changes and reseed now")%>" />
 <input type="submit" name="action" class="accept" value="<%=intl._t("Save changes")%>" />
-</div></form></div></div></body></html>
+  </td>
+ </tr>
+</table>
+</form></div></body></html>
diff --git a/apps/routerconsole/jsp/configservice.jsp b/apps/routerconsole/jsp/configservice.jsp
index 331543d238fd502f0bbe717661cfdcfbb53780cd..a56ab20865b73ec084529e63c00bf88898df5bc7 100644
--- a/apps/routerconsole/jsp/configservice.jsp
+++ b/apps/routerconsole/jsp/configservice.jsp
@@ -11,18 +11,18 @@
 
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Service Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_service">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigServiceHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
- <div class="configure">
  <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
- <h3><%=intl._t("Shutdown the router")%></h3>
- <p><%=intl._t("Graceful shutdown lets the router satisfy the agreements it has already made before shutting down, but may take a few minutes.")%> 
+ <h3 class="ptitle" id="shutdownrouter"><%=intl._t("Shutdown the router")%></h3>
+ <p class="infohelp">
+    <%=intl._t("Graceful shutdown lets the router satisfy the agreements it has already made before shutting down, but may take a few minutes.")%>
     <%=intl._t("If you need to kill the router immediately, that option is available as well.")%></p>
-  <hr><div class="formaction">
+  <hr><div class="formaction" id="shutdown">
  <input type="submit" class="stop" name="action" value="<%=intl._t("Shutdown gracefully")%>" >
  <input type="submit" class="stop" name="action" value="<%=intl._t("Shutdown immediately")%>" >
  <% if (formhandler.shouldShowCancelGraceful()) { %>
@@ -30,19 +30,21 @@
  <% } %>
  </div>
  <% if (System.getProperty("wrapper.version") != null) { %>
- <p><%=intl._t("If you want the router to restart itself after shutting down, you can choose one of the following.")%> 
+ <h3 class="ptitle" id="restartrouter"><%=intl._t("Restart the router")%></h3>
+ <p class="infohelp">
+    <%=intl._t("If you want the router to restart itself after shutting down, you can choose one of the following.")%>
     <%=intl._t("This is useful in some situations - for example, if you changed some settings that client applications only read at startup, such as the routerconsole password or the interface it listens on.")%> 
     <%=intl._t("A graceful restart will take a few minutes (but your peers will appreciate your patience), while a hard restart does so immediately.")%> 
     <%=intl._t("After tearing down the router, it will wait 1 minute before starting back up again.")%></p>
- <hr><div class="formaction">
+ <hr><div class="formaction" id="restart">
  <input type="submit" class="reload" name="action" value="<%=intl._t("Graceful restart")%>" >
  <input type="submit" class="reload" name="action" value="<%=intl._t("Hard restart")%>" >
  <% } %></div>
 
 <% if (formhandler.shouldShowSystray()) { %>
- <h3><%=intl._t("Systray integration")%></h3>
- <p><%=intl._t("Control the system tray icon")%> 
- <hr><div class="formaction">
+ <h3 class="ptitle" id="systray"><%=intl._t("Systray integration")%></h3>
+ <p class="infohelp"><%=intl._t("Control the system tray icon")%></p>
+ <hr><div class="formaction" id="systray">
 <% if (!formhandler.isSystrayEnabled()) { %>
  <input type="submit" name="action" class="accept" value="<%=intl._t("Show systray icon")%>" >
 <% } else {%>
@@ -53,34 +55,37 @@
    }  
    if ( (System.getProperty("os.name") != null) && (System.getProperty("os.name").startsWith("Win")) ) {
 %>
- <h3><%=intl._t("Run on startup")%></h3>
- <p><%=intl._t("You can control whether I2P is run on startup or not by selecting one of the following options - I2P will install (or remove) a service accordingly.")%> 
+ <h3 class="ptitle" id="runonstartup"><%=intl._t("Run on startup")%></h3>
+ <p class="infohelp">
+    <%=intl._t("You can control whether I2P is run on startup or not by selecting one of the following options - I2P will install (or remove) a service accordingly.")%>
     <%=intl._t("If you prefer the command line, you can also run the ")%> <code>install_i2p_service_winnt.bat</code> (<%=intl._t("or")%>
  <code>uninstall_i2p_service_winnt.bat</code>).</p>
- <hr><div class="formaction">
+ <hr><div class="formaction" id="runonstart">
  <input type="submit" name="action" class="accept" value="<%=intl._t("Run I2P on startup")%>" >
-<input type="submit" name="action" class="cancel" value="<%=intl._t("Don't run I2P on startup")%>" ></div>
- <p><b><%=intl._t("Note")%>:</b> <%=intl._t("If you are running I2P as service right now, removing it will shut down your router immediately.")%> 
+ <input type="submit" name="action" class="cancel" value="<%=intl._t("Don't run I2P on startup")%>" ></div>
+ <p class="infohelp" id="winfoservice"><b>
+    <%=intl._t("Note")%>:</b> <%=intl._t("If you are running I2P as service right now, removing it will shut down your router immediately.")%>
     <%=intl._t("You may want to consider shutting down gracefully, as above, then running uninstall_i2p_service_winnt.bat.")%></p>
-<% } %>
+ <% } %>
 
- <h3><%=intl._t("Debugging")%></h3>
- <p><a href="/jobs"><%=intl._t("View the job queue")%></a>
+ <h3 class="ptitle" id="servicedebug"><%=intl._t("Debugging")%>&nbsp;<a href="/jobs">[<%=intl._t("View the job queue")%>]</a></h3>
 <% if (System.getProperty("wrapper.version") != null) { %>
- <p><%=intl._t("At times, it may be helpful to debug I2P by getting a thread dump. To do so, please select the following option and review the thread dumped to <a href=\"logs.jsp#servicelogs\">wrapper.log</a>.")%></p>
-  <hr>
+ <p class="infohelp">
+    <%=intl._t("At times, it may be helpful to debug I2P by getting a thread dump. To do so, please select the following option and review the thread dumped to <a href=\"logs.jsp#servicelogs\">wrapper.log</a>.")%></p>
+ <hr>
 <% } %>
- <div class="formaction">
+ <div class="formaction" id="dumpthreads">
  <input type="submit" class="reload" name="action" value="<%=intl._t("Force GC")%>" >
 <% if (System.getProperty("wrapper.version") != null) { %>
  <input type="submit" class="download" name="action" value="<%=intl._t("Dump threads")%>" >
 <% } %>
  </div>
 
- <h3><%=intl._t("Launch browser on router startup?")%></h3>
- <p><%=intl._t("I2P's main configuration interface is this web console, so for your convenience I2P can launch a web browser on startup pointing at")%>
+ <h3 class="ptitle" id="browseronstart"><%=intl._t("Launch browser on router startup?")%></h3>
+ <p class="infohelp">
+    <%=intl._t("I2P's main configuration interface is this web console, so for your convenience I2P can launch a web browser on startup pointing at")%>
  <a href="http://127.0.0.1:7657/">http://127.0.0.1:7657/</a> .</p>
- <hr><div class="formaction">
+ <hr><div class="formaction" id="browserstart">
  <input type="submit" class="check" name="action" value="<%=intl._t("View console on startup")%>" >
  <input type="submit" class="delete" name="action" value="<%=intl._t("Do not view console on startup")%>" >
-</div></form></div></div></body></html>
+</div></form></div></body></html>
diff --git a/apps/routerconsole/jsp/configsidebar.jsp b/apps/routerconsole/jsp/configsidebar.jsp
index 63c3ed18ceebd77e55a23028f1922d65bc825c68..9ac596667939e3d3d176a440f0964ea3c4bab9d3 100644
--- a/apps/routerconsole/jsp/configsidebar.jsp
+++ b/apps/routerconsole/jsp/configsidebar.jsp
@@ -18,7 +18,7 @@ input.default {
 
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Summary Bar Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_summarybar">
 <%@include file="confignav.jsi" %>
 
 <jsp:useBean class="net.i2p.router.web.ConfigSummaryHandler" id="formhandler" scope="request" />
@@ -29,21 +29,29 @@ input.default {
 <jsp:useBean class="net.i2p.router.web.SummaryHelper" id="summaryhelper" scope="request" />
 <jsp:setProperty name="summaryhelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 
-<h3><%=intl._t("Refresh Interval")%></h3>
+<h3 class="tabletitle"><%=intl._t("Refresh Interval")%></h3>
+<table class="configtable">
+ <tr>
 <form action="" method="POST">
+  <td>
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="hidden" name="group" value="0">
  <input type="text" name="refreshInterval" value="<jsp:getProperty name="intl" property="refresh" />" >
  <%=intl._t("seconds")%>
+  </td>
+  <td class="optionsave">
  <input type="submit" name="action" class="accept" value="<%=intl._t("Save")%>" >
+  </td>
 </form>
+ </tr>
+</table>
 
-<h3><%=intl._t("Customize Summary Bar")%></h3>
+<h3 class="tabletitle"><%=intl._t("Customize Summary Bar")%></h3>
 <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="hidden" name="group" value="2">
  <jsp:getProperty name="summaryhelper" property="configTable" />
- <div class="formaction">
+ <div class="formaction" id="sidebardefaults">
   <input type="submit" class="reload" name="action" value="<%=intl._t("Restore full default")%>" >
   <input type="submit" class="reload" name="action" value="<%=intl._t("Restore minimal default")%>" >
  </div>
diff --git a/apps/routerconsole/jsp/configstats.jsp b/apps/routerconsole/jsp/configstats.jsp
index 802d615e5c0f07fa2a4c6861d6db57639788d0d0..9fbe48dbc84303a71b20be6ac8658417e9d52034 100644
--- a/apps/routerconsole/jsp/configstats.jsp
+++ b/apps/routerconsole/jsp/configstats.jsp
@@ -6,6 +6,7 @@
 <html><head>
 <%@include file="css.jsi" %>
 <%=intl.title("config stats")%>
+<noscript><style>.script {display: none;}</style></noscript>
 <script src="/js/ajax.js" type="text/javascript"></script>
 <%@include file="summaryajax.jsi" %>
 <script type="text/javascript">
@@ -62,7 +63,7 @@ function toggleAll(category)
 </head><body onLoad="init();">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Stats Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_stats">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigStatsHandler" id="formhandler" scope="request" />
@@ -73,33 +74,33 @@ function toggleAll(category)
  <form id="statsForm" name="statsForm" action="" method="POST">
  <input type="hidden" name="action" value="foo" >
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
- <h3><%=intl._t("Configure I2P Stat Collection")%></h3>
- <p><%=intl._t("Enable full stats?")%>
+ <h3 class="ptitle"><%=intl._t("Configure I2P Stat Collection")%>&nbsp;<a class="script" title="<%=intl._t("Toggle full stat collection and all graphing options")%>" href="javascript:void(null);" onclick="toggleAll('*')">[<%=intl._t("toggle all")%>]</a></h3>
+ <p id="enablefullstats"><label><b><%=intl._t("Enable full stats?")%></b>
  <input type="checkbox" class="optbox" name="isFull" value="true" <%
  if (statshelper.getIsFull()) { %>checked="checked" <% } %> >
- (<%=intl._t("change requires restart to take effect")%>)<br>
+ (<%=intl._t("change requires restart to take effect")%>)</label><br>
 <%
 
   // stats.log for devs only and grows without bounds, not recommended
   boolean shouldShowLog = statshelper.shouldShowLog();
   if (shouldShowLog) {
 
-%><%=intl._t("Stat file")%>: <input type="text" name="filename" value="<%=statshelper.getFilename()%>" ><br>
+%><%=intl._t("Stat file")%>: <input type="text" name="filename" value="<%=statshelper.getFilename()%>" >
 Warning - Log with care, stat file grows without limit.<br>
 <%
 
   }  // shouldShowLog
 
-%><%=intl._t("Filter")%>: (<a href="javascript:void(null);" onclick="toggleAll('*')"><%=intl._t("toggle all")%></a>)<br></p>
+%></p>
  <div class="wideload">
- <table>
+ <table id="configstats">
  <% while (statshelper.hasMoreStats()) {
       while (statshelper.groupRequired()) { %>
- <tr class="tablefooter">
-     <td align="left" colspan="3" id=<%=statshelper.getCurrentGroupName()%>>
+ <tr>
+     <th align="left" colspan="3" id=<%=statshelper.getCurrentGroupName()%>>
      <b><%=intl._t(statshelper.getCurrentGroupName())%></b>
-     (<a href="javascript:void(null);" onclick="toggleAll('<%=statshelper.getCurrentGroupName()%>')"><%=intl._t("toggle all")%></a>)
-     </td></tr>
+     <a class="script" title="<%=intl._t("Toggle section graphing options")%>" href="javascript:void(null);" onclick="toggleAll('<%=statshelper.getCurrentGroupName()%>')">[<%=intl._t("toggle all")%>]</a>
+     </th></tr>
  <tr class="tablefooter">
 <%
 
@@ -110,7 +111,7 @@ Warning - Log with care, stat file grows without limit.<br>
 
   }  // shouldShowLog
 
-%>    <td align="center"><b><%=intl._t("Graph")%></b></td>
+%>    <td align="center"><b title="<%=intl._t("Select stats for visualization on /graphs")%>"><%=intl._t("Graph")%></b></td>
     <td></td></tr>
         <%
      } // end iterating over required groups for the current stat %>
@@ -119,33 +120,29 @@ Warning - Log with care, stat file grows without limit.<br>
 
   if (shouldShowLog) {
 
-%>   <td align="center">
-     <a name="<%=statshelper.getCurrentStatName()%>"></a>
-     <input type="checkbox" class="optbox <%=statshelper.getCurrentGroupName()%>" name="statList" value="<%=statshelper.getCurrentStatName()%>" <%
+%>   <td align="center"><a name="<%=statshelper.getCurrentStatName()%>"></a><input type="checkbox" class="optbox <%=statshelper.getCurrentGroupName()%>" name="statList" value="<%=statshelper.getCurrentStatName()%>" <%
      if (statshelper.getCurrentIsLogged()) { %>checked="checked" <% } %> ></td>
 <%
 
   }  // shouldShowLog
 
-%>   <td align="center">
-     <% if (statshelper.getCurrentCanBeGraphed()) { %>
-       <input type="checkbox" class="optbox <%=statshelper.getCurrentGroupName()%>" name="graphList" value="<%=statshelper.getCurrentGraphName()%>" <%
-       if (statshelper.getCurrentIsGraphed()) { %>checked="checked" <% } %> ><% } %></td>
-     <td align="left"><b><%=statshelper.getCurrentStatName()%>:</b><br>
-     <%=statshelper.getCurrentStatDescription()%></td></tr><%
+%>   <td align="center"><% if (statshelper.getCurrentCanBeGraphed()) { %><input type="checkbox" class="optbox <%=statshelper.getCurrentGroupName()%>" id="<%=statshelper.getCurrentStatName()%>" name="graphList" value="<%=statshelper.getCurrentGraphName()%>" <%
+       if (statshelper.getCurrentIsGraphed()) { %>checked="checked" <% } %> ><% } %></td> <% // no whitespace here so we can use td:empty to remove css pointer from inert labels %>
+     <td align="left"><label for="<%=statshelper.getCurrentStatName()%>"><b><%=statshelper.getCurrentStatName()%>:</b>&nbsp;
+     <%=statshelper.getCurrentStatDescription()%></label></td></tr><%
     } // end iterating over all stats
 
   if (shouldShowLog) {
 
 %> <tr><td colspan="3"></td></tr>
- <tr><td align="center"><input type="checkbox" class="optbox" name="explicitFilter" ></td>
-     <td colspan="2"><%=intl._t("Advanced filter")%>:
-     <input type="text" name="explicitFilterValue" value="<%=statshelper.getExplicitFilter()%>" size="40" ></td></tr>
+ <tr><td align="center"><label><input type="checkbox" class="optbox" name="explicitFilter" ></td>
+     <td colspan="2"><%=intl._t("Advanced filter")%>:</label>
+<input type="text" name="explicitFilterValue" value="<%=statshelper.getExplicitFilter()%>" size="40" ></td></tr>
 <%
 
   }  // shouldShowLog
 
-%>   <tr class="tablefooter"><td colspan="3" align="right">
+%>   <tr class="tablefooter"><td colspan="3" align="right" class="optionsave">
 <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
 <input type="submit" name="shouldsave" class="accept" value="<%=intl._t("Save changes")%>" >
 </td></tr>
diff --git a/apps/routerconsole/jsp/configtunnels.jsp b/apps/routerconsole/jsp/configtunnels.jsp
index 09a2ceee97c5b9868cc6a1e7db99bf4f2d2b9613..273758979fc968a8911ee924184d33b4b98d04f0 100644
--- a/apps/routerconsole/jsp/configtunnels.jsp
+++ b/apps/routerconsole/jsp/configtunnels.jsp
@@ -14,27 +14,27 @@
 <jsp:useBean class="net.i2p.router.web.ConfigTunnelsHelper" id="tunnelshelper" scope="request" />
 <jsp:setProperty name="tunnelshelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <h1><%=intl._t("I2P Tunnel Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_tunnels">
  <%@include file="confignav.jsi" %>
  <jsp:useBean class="net.i2p.router.web.ConfigTunnelsHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
- <div class="configure"><p>
- <%=intl._t("NOTE")%>: 
+ <p id="tunnelconfig" class="infowarn">
  <%=intl._t("The default settings work for most people.")%> 
  <%=intl._t("There is a fundamental tradeoff between anonymity and performance.")%>
  <%=intl._t("Tunnels longer than 3 hops (for example 2 hops + 0-2 hops, 3 hops + 0-1 hops, 3 hops + 0-2 hops), or a high quantity + backup quantity, may severely reduce performance or reliability.")%>
  <%=intl._t("High CPU and/or high outbound bandwidth usage may result.")%>
  <%=intl._t("Change these settings with care, and adjust them if you have problems.")%>
-<div class="wideload">
+ </p>
+ <p class="infohelp">
+ <%=intl._t("Exploratory tunnel setting changes are stored in the router.config file.")%>
+ <%=intl._t("Client tunnel changes are temporary and are not saved.")%>
+ <%=intl._t("To make permanent client tunnel changes see the")%>&nbsp;<a href="/i2ptunnelmgr"><%=intl._t("i2ptunnel page")%></a>.
+ </p>
 <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="hidden" name="action" value="blah" >
  <jsp:getProperty name="tunnelshelper" property="form" />
- <%=intl._t("Note")%>: <%=intl._t("Exploratory tunnel setting changes are stored in the router.config file.")%>
- <%=intl._t("Client tunnel changes are temporary and are not saved.")%>
-<%=intl._t("To make permanent client tunnel changes see the")%> <a href="i2ptunnel/index.jsp"><%=intl._t("i2ptunnel page")%></a>.
- <hr><div class="formaction">
+ <hr><div class="formaction" id="tunnelconfigsave">
 <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
 <input type="submit" name="shouldsave" class="accept" value="<%=intl._t("Save changes")%>" >
-</div>
- </form></div></div></div></body></html>
+</div></form></div></body></html>
diff --git a/apps/routerconsole/jsp/configui.jsp b/apps/routerconsole/jsp/configui.jsp
index 96f7bf84cd73be6099a71b4b77bc180966639bc9..10bc861211047f14311e9484d6723ecfa08ee218 100644
--- a/apps/routerconsole/jsp/configui.jsp
+++ b/apps/routerconsole/jsp/configui.jsp
@@ -23,17 +23,18 @@ input.default {
 <jsp:setProperty name="uihelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 
 <h1><%=uihelper._t("I2P UI Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_ui">
 
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigUIHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
-<div class="configure"><div class="topshimten"><h3><%=uihelper._t("Router Console Theme")%></h3></div>
+<h3 id="themeheading"><%=uihelper._t("Router Console Theme")%></h3>
  <form action="" method="POST">
  <input type="hidden" name="consoleNonce" value="<%=net.i2p.router.web.CSSHelper.getNonce()%>" >
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <input type="hidden" name="action" value="blah" >
+<div id ="themesettings">
 <%
  String userAgent = request.getHeader("User-Agent");
  if (userAgent == null || userAgent.contains("Trident/6") || !userAgent.contains("MSIE")) {
@@ -45,23 +46,32 @@ input.default {
 <%=uihelper._t("If you're not using IE, it's likely that your browser is pretending to be IE; please configure your browser (or proxy) to use a different User Agent string if you'd like to access the console themes.")%>
 <% } %>
  <jsp:getProperty name="uihelper" property="forceMobileConsole" />
-<h3><%=uihelper._t("Router Console Language")%></h3>
+<hr><div class="formaction" id="themeui">
+<input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
+<input type="submit" name="shouldsave" class="accept" value="<%=intl._t("Apply")%>" >
+</div></div></form>
+<h3 id="langheading"><%=uihelper._t("Router Console Language")%></h3>
+ <form action="" method="POST">
+ <input type="hidden" name="consoleNonce" value="<%=net.i2p.router.web.CSSHelper.getNonce()%>" >
+ <input type="hidden" name="nonce" value="<%=pageNonce%>" >
+ <input type="hidden" name="action" value="blah" >
+<div id="langsettings">
 <jsp:getProperty name="uihelper" property="langSettings" />
-<p><%=uihelper._t("Please contribute to the router console translation project! Contact the developers in #i2p-dev on IRC to help.")%>
-</p><hr><div class="formaction">
+<p id="helptranslate"><%=uihelper._t("Please contribute to the router console translation project! Contact the developers in #i2p-dev on IRC to help.")%>
+</p><hr><div class="formaction" id="langui">
 <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
 <input type="submit" name="shouldsave" class="accept" value="<%=intl._t("Apply")%>" >
-</div></form>
+</div></div></form>
 
-<h3><%=uihelper._t("Router Console Password")%></h3>
+<h3 id="passwordheading"><%=uihelper._t("Router Console Password")%></h3>
 <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <jsp:getProperty name="uihelper" property="passwordForm" />
- <div class="formaction">
+ <div class="formaction" id="consolepass">
   <input type="submit" name="action" class="default" value="<%=intl._t("Add user")%>" >
   <input type="submit" name="action" class="delete" value="<%=intl._t("Delete selected")%>" >
   <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
   <input type="submit" name="action" class="add" value="<%=intl._t("Add user")%>" >
  </div>
-</form></div>
+</form>
 </div></body></html>
diff --git a/apps/routerconsole/jsp/configupdate.jsp b/apps/routerconsole/jsp/configupdate.jsp
index e1e0734043b007af92d5eab766a48eb7c87f3d21..ebc9e26ec6cd4a924c0c6d54d541d030fa28428b 100644
--- a/apps/routerconsole/jsp/configupdate.jsp
+++ b/apps/routerconsole/jsp/configupdate.jsp
@@ -12,7 +12,7 @@
 
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Update Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_update">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigUpdateHandler" id="formhandler" scope="request" />
@@ -21,63 +21,59 @@
  <jsp:setProperty name="updatehelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <div class="messages">
  <jsp:getProperty name="updatehelper" property="newsStatus" /></div>
-<div class="configure">
  <form action="" method="POST">
  <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <% /* set hidden default */ %>
  <input type="submit" name="action" value="" style="display:none" >
     <% if (updatehelper.canInstall()) { %>
-      <h3><%=intl._t("Check for I2P and news updates")%></h3>
-      <div class="wideload"><table border="0" cellspacing="5">
-        <tr><td colspan="2"></tr>
-        <tr><td class="mediumtags" align="right"><b><%=intl._t("News &amp; I2P Updates")%>:</b></td>
+      <h3 class="tabletitle"><%=intl._t("Check for I2P and News Updates")%></h3>
+      <table id="i2pupdates" class="configtable" border="0" cellspacing="5">
+      <tr><td align="right"><b><%=intl._t("News &amp; I2P Updates")%>:</b></td>
      <% } else { %>
       <h3><%=intl._t("Check for news updates")%></h3>
-      <div class="wideload"><table border="0" cellspacing="5">
+      <table id="i2pupdates" class="configtable" border="0" cellspacing="5">
         <tr><td colspan="2"></tr>
-        <tr><td class="mediumtags" align="right"><b><%=intl._t("News Updates")%>:</b></td>
+        <tr><td align="right"><b><%=intl._t("News Updates")%>:</b></td>
      <% }   // if canInstall %>
           <td> <% if ("true".equals(System.getProperty("net.i2p.router.web.UpdateHandler.updateInProgress", "false"))) { %> <i><%=intl._t("Update In Progress")%></i><br> <% } else { %> <input type="submit" name="action" class="check" value="<%=intl._t("Check for updates")%>" />
             <% } %></td></tr>
-        <tr><td colspan="2"><br></td></tr>
-        <tr><td class="mediumtags" align="right"><b><%=intl._t("News URL")%>:</b></td>
+        <tr><td align="right"><b><%=intl._t("News URL")%>:</b></td>
           <td><input type="text" size="60" name="newsURL" <% if (!updatehelper.isAdvanced()) { %>readonly="readonly"<% } %> value="<jsp:getProperty name="updatehelper" property="newsURL" />"></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("Refresh frequency")%>:</b>
+        </tr><tr><td align="right"><b><%=intl._t("Refresh frequency")%>:</b>
           <td><jsp:getProperty name="updatehelper" property="refreshFrequencySelectBox" /></td></tr>
     <% if (updatehelper.canInstall()) { %>
-        <tr><td class="mediumtags" align="right"><b><%=formhandler._t("Update policy")%>:</b></td>
+        <tr><td align="right"><b><%=formhandler._t("Update policy")%>:</b></td>
           <td><jsp:getProperty name="updatehelper" property="updatePolicySelectBox" /></td></tr>
     <% }   // if canInstall %>
-        <tr><td class="mediumtags" align="right"><b><%=intl._t("Fetch news through the eepProxy?")%></b></td>
+        <tr><td align="right"><label for="newsThroughProxy"><b><%=intl._t("Fetch news through the eepProxy?")%></b></label></td>
           <td><jsp:getProperty name="updatehelper" property="newsThroughProxy" /></td></tr>
-        <tr><td class="mediumtags" align="right"><b><%=intl._t("Update through the eepProxy?")%></b></td>
+        <tr><td align="right"><b><label for="updateThroughProxy"><%=intl._t("Update through the eepProxy?")%></b></label></td>
           <td><jsp:getProperty name="updatehelper" property="updateThroughProxy" /></td></tr>
       <% if (updatehelper.isAdvanced()) { %>
-        <tr><td class="mediumtags" align="right"><b><%=intl._t("eepProxy host")%>:</b></td>
+        <tr><td align="right"><b><%=intl._t("eepProxy host")%>:</b></td>
           <td><input type="text" size="10" name="proxyHost" value="<jsp:getProperty name="updatehelper" property="proxyHost" />" /></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("eepProxy port")%>:</b></td>
+        </tr><tr><td align="right"><b><%=intl._t("eepProxy port")%>:</b></td>
           <td><input type="text" size="10" name="proxyPort" value="<jsp:getProperty name="updatehelper" property="proxyPort" />" /></td></tr>
       <% }   // if isAdvanced %>
     <% if (updatehelper.canInstall()) { %>
       <% if (updatehelper.isAdvanced()) { %>
-        <tr><td class="mediumtags" align="right"><b><%=intl._t("Update URLs")%>:</b></td>
+        <tr><td align="right"><b><%=intl._t("Update URLs")%>:</b></td>
           <td><textarea cols="60" rows="6" name="updateURL" wrap="off" spellcheck="false"><jsp:getProperty name="updatehelper" property="updateURL" /></textarea></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("Trusted keys")%>:</b></td>
+        </tr><tr><td align="right"><b><%=intl._t("Trusted keys")%>:</b></td>
           <td><textarea cols="60" rows="6" name="trustedKeys" wrap="off" spellcheck="false"><jsp:getProperty name="updatehelper" property="trustedKeys" /></textarea></td></tr>
-        <tr><td id="devSU3build" class="mediumtags" align="right"><b><%=intl._t("Update with signed development builds?")%></b></td>
+        <tr><td id="devSU3build" align="right"><b><label for="updateDevSU3"><%=intl._t("Update with signed development builds?")%></b></label></td>
           <td><jsp:getProperty name="updatehelper" property="updateDevSU3" /></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("Signed Build URL")%>:</b></td>
+        </tr><tr><td align="right"><b><%=intl._t("Signed Build URL")%>:</b></td>
           <td><input type="text" size="60" name="devSU3URL" value="<jsp:getProperty name="updatehelper" property="devSU3URL" />"></td></tr>
-        <tr><td id="unsignedbuild" class="mediumtags" align="right"><b><%=intl._t("Update with unsigned development builds?")%></b></td>
+        <tr><td id="unsignedbuild" align="right"><b><label for="updateUnsigned"><%=intl._t("Update with unsigned development builds?")%></b></label></td>
           <td><jsp:getProperty name="updatehelper" property="updateUnsigned" /></td>
-        </tr><tr><td class="mediumtags" align="right"><b><%=intl._t("Unsigned Build URL")%>:</b></td>
+        </tr><tr><td align="right"><b><%=intl._t("Unsigned Build URL")%>:</b></td>
           <td><input type="text" size="60" name="zipURL" value="<jsp:getProperty name="updatehelper" property="zipURL" />"></td></tr>
       <% }   // if isAdvanced %>
     <% } else { %>
-        <tr><td class="mediumtags" align="center" colspan="2"><b><%=intl._t("Updates will be dispatched via your package manager.")%></b></td></tr>
+        <tr><td align="center" colspan="2"><b><%=intl._t("Updates will be dispatched via your package manager.")%></b></td></tr>
     <% }   // if canInstall %>
-        <tr class="tablefooter"><td colspan="2">
-        <div class="formaction">
+        <tr class="tablefooter"><td colspan="2" class="optionsave">
             <input type="reset" class="cancel" value="<%=intl._t("Cancel")%>" >
             <input type="submit" name="action" class="accept" value="<%=intl._t("Save")%>" >
-        </div></td></tr></table></div></form></div></div></body></html>
+        </td></tr></table></form></div></body></html>
diff --git a/apps/routerconsole/jsp/configwebapps.jsp b/apps/routerconsole/jsp/configwebapps.jsp
index 25f4734f28eb9aaf776e60b8f92ea5d41e5f84dc..e349d1c538bc3c365e3de43e13e3470272aae435 100644
--- a/apps/routerconsole/jsp/configwebapps.jsp
+++ b/apps/routerconsole/jsp/configwebapps.jsp
@@ -21,22 +21,22 @@ input.default { width: 1px; height: 1px; visibility: hidden; }
 <jsp:setProperty name="clientshelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <jsp:setProperty name="clientshelper" property="edit" value="<%=request.getParameter(\"edit\")%>" />
 <h1><%=intl._t("WebApp Configuration")%></h1>
-<div class="main" id="main">
+<div class="main" id="config_webapps">
  <%@include file="confignav.jsi" %>
 
  <jsp:useBean class="net.i2p.router.web.ConfigClientsHandler" id="formhandler" scope="request" />
 <%@include file="formhandler.jsi" %>
  <div class="configure">
-<h3><a name="webapp"></a><%=intl._t("WebApp Configuration")%></h3><p>
- <%=intl._t("The Java web applications listed below are started by the webConsole client and run in the same JVM as the router. They are usually web applications accessible through the router console. They may be complete applications (e.g. i2psnark),front-ends to another client or application which must be separately enabled (e.g. susidns, i2ptunnel), or have no web interface at all (e.g. addressbook).")%>
- </p><p>
+<h3 id="webappconfig"><a name="webapp"></a><%=intl._t("WebApp Configuration")%></h3><p>
+<p class="infohelp" id="webappconfigtext">
+ <%=intl._t("The Java web applications listed below are started by the webConsole client and run in the same JVM as the router. They are usually web applications accessible through the router console. They may be complete applications (e.g. i2psnark), front-ends to another client or application which must be separately enabled (e.g. susidns, i2ptunnel), or have no web interface at all (e.g. addressbook).")%>&nbsp;
  <%=intl._t("A web app may also be disabled by removing the .war file from the webapps directory; however the .war file and web app will reappear when you update your router to a newer version, so disabling the web app here is the preferred method.")%>
+ <i><%=intl._t("All changes require restart to take effect.")%></i>
  </p><div class="wideload">
 <form action="configwebapps" method="POST">
 <input type="hidden" name="nonce" value="<%=pageNonce%>" >
  <jsp:getProperty name="clientshelper" property="form2" />
- <p><i><%=intl._t("All changes require restart to take effect.")%></i>
- </p><hr><div class="formaction">
+ <div class="formaction" id="webappconfigactions">
  <input type="submit" class="cancel" name="foo" value="<%=intl._t("Cancel")%>" />
  <input type="submit" name="action" class="accept" value="<%=intl._t("Save WebApp Configuration")%>" />
 </div></form></div>
diff --git a/apps/routerconsole/jsp/console.jsp b/apps/routerconsole/jsp/console.jsp
index c1ae98e3e2be2b399569a574ca6cb620a3c8e632..88c307a742e5f26a824926cad7234303244cda15 100644
--- a/apps/routerconsole/jsp/console.jsp
+++ b/apps/routerconsole/jsp/console.jsp
@@ -28,7 +28,7 @@
  <jsp:useBean class="net.i2p.router.web.ConfigUpdateHelper" id="updatehelper" scope="request" />
  <jsp:setProperty name="updatehelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
  <jsp:getProperty name="updatehelper" property="newsStatus" /><br>
-</div><div class="main" id="main">
+</div><div class="main" id="console">
  <jsp:useBean class="net.i2p.router.web.ContentHelper" id="contenthelper" scope="request" />
  <div class="welcome">
   <div class="langbox"> <% /* English, then alphabetical by English name please */ %>
@@ -42,7 +42,7 @@
     <a href="/console?lang=es&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=es" title="Español" alt="Español"></a>
     <a href="/console?lang=fi&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=fi" title="Suomi" alt="Suomi"></a>
     <a href="/console?lang=fr&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=fr" title="Français" alt="Français"></a>
-    <a href="/console?lang=gl&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=lang_gl" title="Galician" alt=Galician"></a>
+    <a href="/console?lang=gl&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=lang_gl" title="Galician" alt="Galician"></a>
     <a href="/console?lang=el&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=gr" title="ελληνικά" alt="ελληνικά"></a>
     <a href="/console?lang=hu&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=hu" title="Magyar" alt="Magyar"></a>
     <a href="/console?lang=it&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=it" title="Italiano" alt="Italiano"></a>
diff --git a/apps/routerconsole/jsp/debug.jsp b/apps/routerconsole/jsp/debug.jsp
index 3c154d88c0a5da72715872089fe9d6382918ccc4..cb55e8f2df5e3b5f456d2277a4fe8dbb4c56682e 100644
--- a/apps/routerconsole/jsp/debug.jsp
+++ b/apps/routerconsole/jsp/debug.jsp
@@ -14,7 +14,7 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1>Router Debug</h1>
-<div class="main" id="main">
+<div class="main" id="debug">
 <%
     /*
      *  Quick and easy place to put debugging stuff
diff --git a/apps/routerconsole/jsp/dns.jsp b/apps/routerconsole/jsp/dns.jsp
index 23a353416e779c0ab9b45e5399d4dcd1a2912b0f..5b7ce17aaadcb2d03706e65cb0f7dd9ecd28f23f 100644
--- a/apps/routerconsole/jsp/dns.jsp
+++ b/apps/routerconsole/jsp/dns.jsp
@@ -31,7 +31,7 @@
 <%@include file="summary.jsi" %>
 
 <h1><%=intl._t("I2P Addressbook")%> <span class="newtab"><a href="/susidns/index" target="_blank" title="<%=intl._t("Open in new tab")%>"><img src="<%=intl.getTheme(request.getHeader("User-Agent"))%>images/newtab.png" /></a></span></h1>
-<div class="main" id="main">
+<div class="main" id="dns">
 <iframe src="/susidns/index" width="100%" height="100%" frameborder="0" border="0" name="susidnsframe" id="susidnsframe" onload="setupFrame()" allowtransparency="true">
 <%=intl._t("Your browser does not support iFrames.")%>
 &nbsp;<a href="/susidns/index"><%=intl._t("Click here to continue.")%></a>
diff --git a/apps/routerconsole/jsp/events.jsp b/apps/routerconsole/jsp/events.jsp
index 29838e7a7824fcf787cf890dc98f2b0afb23d078..85077a236a51ad36521d5adb231a7f5eee3b29a6 100644
--- a/apps/routerconsole/jsp/events.jsp
+++ b/apps/routerconsole/jsp/events.jsp
@@ -19,7 +19,7 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Event Log")%></h1>
-<div class="main" id="main">
+<div class="main" id="events">
  <div class="eventspanel">
  <div class="widepanel">
  <jsp:getProperty name="eventHelper" property="allMessages" />
diff --git a/apps/routerconsole/jsp/graphs.jsp b/apps/routerconsole/jsp/graphs.jsp
index 6cde501311db0e87e3fbe2583561edb96d35cc84..c4c61b6cbe8f4521d7ada3c49ed63cf86bc4eefd 100644
--- a/apps/routerconsole/jsp/graphs.jsp
+++ b/apps/routerconsole/jsp/graphs.jsp
@@ -24,10 +24,11 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Performance Graphs")%></h1>
-<div class="main" id="main">
- <div class="graphspanel">
+<div class="main" id="graphs">
  <div class="widepanel">
  <jsp:getProperty name="graphHelper" property="allMessages" />
+ <div class="graphspanel">
  <jsp:getProperty name="graphHelper" property="images" />
+ </div>
  <jsp:getProperty name="graphHelper" property="form" />
-</div></div></div></body></html>
+</div></div></body></html>
diff --git a/apps/routerconsole/jsp/help-advancedsettings.jsi b/apps/routerconsole/jsp/help-advancedsettings.jsi
new file mode 100644
index 0000000000000000000000000000000000000000..a27438b56cece91cfda548c7c55daffbc4093943
--- /dev/null
+++ b/apps/routerconsole/jsp/help-advancedsettings.jsi
@@ -0,0 +1,41 @@
+<h2>Advanced Router Configuration</h2>
+
+<p class="infohelp">The router configuration options listed below are not available in the user interface, usually because they are rarely used or provide access to advanced settings that most users will not need. This is not a comprehensive list. Some settings will require a restart of the router to take effect. Note that all settings are case sensitive. You will need to edit your <code>router.config</code> file to add options, or, once you have added <code>routerconsole.advanced=true</code> to the router.config file, you may edit settings within the console on the <a href="/configadvanced">Advanced Configuration page</a>.</p>
+
+<table id="configinfo"> <!-- sections separated for legibility -->
+
+<tr><th>i2p.vmCommSystem={true|false}</th></tr>
+<tr><td>When set to true, I2P runs without network connectivity, which is helpful if you are constantly restarting the router to test code updates as this prevents network disruption.</td></tr>
+
+<tr><th>routerconsole.advanced={true|false}</th></tr>
+<tr><td class="infowarn">Only set this to true if you know what you are doing!</td></tr>
+<tr><td>When set to true, additional functionality will be enabled in the console and the user will be able to edit settings directly on the <a href="/configadvanced">Advanced Configuration page</a>. Extra display options are provided in the <a href="/netdb">Network Database section</a>, including the <a href="/netdb?f=3">Sybil Analysis tool</a>, and there are additional configuration options on the <a href="/configclients">Clients Configuration page</a>. This will also enable the installation of unsigned updates, manual configuration of the news URL, and the installation of plugins. You may also wish to enable the "Advanced" sidebar section on the <a href="/configsidebar">Summary Bar Configuration page</a>.</td></tr>
+
+<tr><th>routerconsole.browser={/path/to/browser}</th></tr>
+<tr><td>This setting allows the manual selection of the browser which I2P will launch on startup (if the console is <a href="/configservice#browseronstart">configured</a> to launch a browser on startup), overriding the OS default browser.</td></tr>
+
+<tr><th>router.updateUnsigned={true|false}</th></tr>
+<tr><td>If you wish to install unsigned (.zip) I2P updates, this should be added to your <code>router.config</code> file unless you have already configured <code>routerconsole.advanced=true</code>, in which case this option is already provisioned.</td></tr>
+
+<tr><th>router.updateUnsignedURL={url}</th></tr>
+<tr><td>This setting allows you to configure the update url for the unsigned update feature, if enabled. The url should end with <code>/i2pupdate.zip</code>. Note: do not install unsigned updates unless you trust the source of the update!</td></tr>
+
+<tr><th>routerconsole.enablePluginInstall={true|false}</th></tr>
+<tr><td>When set to true, this enables plugin installation on the <a href="/configplugins">Plugin Configuration page</a>. Setting <code>routerconsole.advanced=true</code> will also enable this feature. [Enabled by default]</td></tr>
+
+<tr><th>routerconsole.allowUntrustedPlugins={true|false}</th></tr>
+<tr><td>Plugins signed with the cryptographic key of the developer are the recommended format, but if you wish to install unsigned plugins you can set this to true. Note that you may still encounter issues attempting to install an unsigned plugin if the developer has included additional checks in the plugin build process.</td></tr> 
+
+<tr><th>routerconsole.showSearch={true|false}</th></tr>
+<tr><td>When set to true, a configurable search bar will appear on the <a href="/home">console homepage</a>. Additional searches may then be added on the <a href="/confighome">home configuration page</a>.</td></tr>
+
+<tr><th>router.buildHandlerThreads={n}</th></tr>
+<tr><td>Allocate number of processor threads for building tunnels. If your processor supports hyperthreading or simultaneous multithreading, you may multiply the number of processor cores by 2 to get the maximum number of threads to allocate, otherwise number of processor cores = maximum number of threads available. Note that you may wish to allocate less than the theoretical maximum to ensure you have headroom for other tasks.</td></tr>
+
+<tr><th>router.maxParticipatingTunnels={n}</th></tr>
+<tr><td>Determines the maximum number of participating tunnels the router can build. To disable participation completely, set to 0.</td></tr>
+
+<tr><th>router.networkDatabase.flat={true|false}</th></tr>
+<tr><td>When set to true, the router info files stored in your profile's netDB directory will not be split into 64 sub-directories. 
+
+</table>
diff --git a/apps/routerconsole/jsp/help-configuration.jsi b/apps/routerconsole/jsp/help-configuration.jsi
new file mode 100644
index 0000000000000000000000000000000000000000..d19e0ba50cfbbde91a8cf378bfda1399d5e616a3
--- /dev/null
+++ b/apps/routerconsole/jsp/help-configuration.jsi
@@ -0,0 +1,33 @@
+<h2><a name="confignet"><%=intl._t("Configuration Help")%></a></h2>
+<p>
+  <%=intl._t("While I2P will work fine behind most firewalls, your speeds and network integration will generally improve if the I2P port is forwarded for both UDP and TCP.")%>&nbsp;<a href="/confignet">[<%=intl._t("Network Configuration")%>]</a>.
+</p>
+<p>
+  <%=intl._t("If you can, please poke a hole in your firewall to allow unsolicited UDP and TCP packets to reach you.")%>&nbsp;
+  <%=intl._t("If you can't, I2P supports UPnP (Universal Plug and Play) and UDP hole punching with \"SSU introductions\" to relay traffic.")%>&nbsp;
+  <%=intl._t("Most of the options on the Network Configuration page are for special situations, for example where UPnP does not work correctly, or a firewall not under your control is doing harm.")%>&nbsp;
+  <%=intl._t("Certain firewalls such as symmetric NATs may not work well with I2P.")%>
+</p>
+<p>
+  <%=intl._t("UPnP is used to communicate with Internet Gateway Devices (IGDs) to detect the external IP address and forward ports.")%>&nbsp;
+  <%=intl._t("UPnP support is beta, and may not work for any number of reasons")%>:
+</p>
+<ul id="upnphelp">
+  <li class="tidylist"><%=intl._t("No UPnP-compatible device present")%></li>
+  <li class="tidylist"><%=intl._t("UPnP disabled on the device")%></li>
+  <li class="tidylist"><%=intl._t("Software firewall interference with UPnP")%></li>
+  <li class="tidylist"><%=intl._t("Bugs in the device's UPnP implementation")%></li>
+  <li class="tidylist"><%=intl._t("Multiple firewall/routers in the internet connection path")%></li>
+  <li class="tidylist"><%=intl._t("UPnP device change, reset, or address change")%></li>
+</ul>
+<p>
+  <%=intl._t("UPnP may be enabled or disabled on the Network Configuration page, but a change requires a router restart to take effect.")%>&nbsp;
+  <a href="peers#upnp">[<%=intl._t("Review the UPnP status here.")%>]</a>
+</p>
+<p>
+  <%=intl._t("Hostnames entered on the Network Configuration page will be published in the network database.")%>&nbsp;
+  <%=intl._t("They are <b>not private</b>.")%>&nbsp;
+  <%=intl._t("Also, <b>do not enter a private IP address</b> like 127.0.0.1 or 192.168.1.1.")%>&nbsp;
+  <%=intl._t("If you specify the wrong IP address or hostname, or do not properly configure your NAT or firewall, your network performance will degrade substantially.")%>&nbsp;
+  <%=intl._t("When in doubt, leave the settings at the defaults.")%>&nbsp;
+</p>
diff --git a/apps/routerconsole/jsp/help-faq.jsi b/apps/routerconsole/jsp/help-faq.jsi
new file mode 100644
index 0000000000000000000000000000000000000000..2b8b021917d72bd35677423b80154cc74c28935b
--- /dev/null
+++ b/apps/routerconsole/jsp/help-faq.jsi
@@ -0,0 +1,80 @@
+<h2>Abridged I2P FAQ</h2>
+
+<p class="infohelp">This is a shortened version of the official FAQ. For the full version, please visit <a href="https://geti2p.net/faq" target="_blank">https://geti2p.net/faq</a> or <a href="http://i2p-projekt.i2p/faq" target="_blank">http://i2p-projekt.i2p/faq</a>.
+
+<h3>My router has been up for several minutes and has zero or very few connections</h3>
+
+<p>If after a few minutes of uptime your router is indicating 0 Active Peers and 0 Known Peers, with a notification in the sidebar that you need to check your network connection, verify that you can access the internet. If your internet connection is functional, you may need to unblock Java in your firewall. Otherwise, you may need to reseed your I2P router. Visit the <a href="/configreseed#reseedconfig">Reseed Configuration page</a> and click the <i>Save Changes and Reseed Now</i> button.</p>
+
+<h3>My router has very few active peers, is this OK?</h3>
+
+<p>If your router has 10 or more active peers, everything is fine. The router should maintain connections to a few peers at all times. The best way to stay "better-connected" to the network is to <a href="/config">share more bandwidth</a>.</p>
+
+<h3 id="addressbooksubs">I'm missing lots of hosts in my addressbook. What are some good subscription links?</h3>
+
+<p>The default subscription is to <code>http://i2p-projekt.i2p/hosts.txt</code> which is seldom updated. If you don't have another subscription, you may often have to use "jump" links which is much slower but ensures that your addressbook is only populated by sites you use (in addition to the default subscription addresses). To speed up browsing on I2P, it's a good idea to add some addressbook subscriptions.</p>
+
+<p>Here are some other public addressbook subscription links. You may wish to add one or two to your <a href="/susidns/subscriptions">susidns subscription list</a>. In the event that addresses conflict in the subscriptions, the lists placed at the top of your susidns configuration will take precedence over those placed further down.</p>
+
+<ul>
+<li><code>http://stats.i2p/cgi-bin/newhosts.txt</code></li>
+<li><code>http://no.i2p/export/alive-hosts.txt</code></li>
+<li><code>http://identiguy.i2p/hosts.txt</code></li>
+</ul>
+
+<p>Note that subscribing to a hosts.txt service is an act of trust, as a malicious subscription could give you incorrect addresses, so be careful subscribing to lists from unknown sources. The operators of these services may have various policies for listing hosts. Presence on this list does not imply endorsement.</p>
+
+<h3>How do I access IRC, BitTorrent, or other services on the regular Internet?</h3>
+
+<p>Unless an outproxy has been set up for the service you want to connect to, this is not possible. There are only three types of outproxies running right now: HTTP, HTTPS, and email. Note that there is currently no publicly listed SOCKS outproxy. If this type of service is required, try <a href="https://torproject.org/" target="_blank">Tor</a>.</p>
+
+<h3>How do I configure my browser to access .i2p websites?</h3>
+<p>You will need to configure your browser to use the HTTP proxy server (by default on host: <code>127.0.0.1</code> port: <code>4444</code>). See the <a href="https://geti2p.net/en/about/browser-config" target="_blank">Browser Proxy Configuration Guide</a> for a more detailed explanation.</p>
+
+<h3>What is an eepsite?</h3>
+
+<p>An eepsite is a website that is hosted anonymously on the I2P network - you can access it by configuring your web browser to use I2P's HTTP proxy (see above) and browsing to the <code>.i2p</code> suffixed website (e.g. <a href="http://i2p-projekt.i2p" target="_blank">http://i2p-projekt.i2p</a>). Also ensure your browser is configured to resolve DNS remotely when using the proxy to avoid DNS leaks.</p>
+
+<h3>Most of the eepsites are down?</h3>
+
+<p>If you consider every eepsite that has ever been created, yes, most of them are down. People and eepsites come and go. A good way to get started in I2P is check out a list of eepsites that are currently up. <a href="http://identiguy.i2p" target="_blank">http://identiguy.i2p</a> tracks active eepsites.</p>
+
+<h3>How do I connect to IRC within I2P?</h3>
+
+<p>A tunnel to the main IRC server network within I2P, Irc2P, is created when I2P is installed (see the <a href="/i2ptunnelmgr">I2P Tunnel Manager</a>), and is automatically started when the I2P router starts. To connect to it, tell your IRC client to connect to server: <code>127.0.0.1</code> port: <code>6668</code>.</p>
+
+<p>XChat-like client users can create a new network with the server <code>127.0.0.1/6668</code> (remember to tick <i>Bypass proxy server</i> if you have a proxy server configured), or you can connect with the command <code>/server 127.0.0.1 6668</code>. Different IRC clients may vary the syntax.</p>
+
+<h3>What ports does I2P use?</h3>
+
+<table id="portfaq">
+<tr><th colspan="3">LOCAL PORTS</th></tr>
+<tr><td colspan="3" class="infohelp">These are the local I2P port mappings, listening only to local connections by default, except where noted. Unless you require access from other machines, they should only be accessible from localhost.</td></tr>
+<tr><th>Port</th><th>Function</th><th>Notes</th></tr>
+<tr><td>1900</td><td>UPnP SSDP UDP multicast listener</td><td>Cannot be changed. Binds to all interfaces. Can be disabled on the <a href="/confignet">Network Configuration page</a>.</td></tr>
+<tr><td>2827</td><td>BOB bridge</td><td>A higher level socket API for clients. Can be enabled/disabled on the <a href="/configclients">Client Configuration page</a>. Can be changed in the <code>bob.config</code> file. [Disabled by default]</td></tr>
+<tr><td>4444</td><td>HTTP proxy</td><td>Can be disabled or changed in the <a href="/i2ptunnelmgr">I2P Tunnel Manager</a>. Can also be configured to bind to a specific interface or all interfaces.</td></tr>
+<tr><td>4445</td><td>HTTPS proxy</td><td>Can be disabled or changed in the <a href="/i2ptunnelmgr">I2P Tunnel Manager</a>. Can also be configured to bind to a specific interface or all interfaces.</td></tr>
+<tr><td>6668</td><td>IRC proxy</td><td>Can be disabled or changed in the <a href="/i2ptunnelmgr">I2P Tunnel Manager</a>. Can also be configured to bind to a specific interface or all interfaces.</td></tr>
+<tr><td>7652</td><td>UPnP HTTP TCP event listener</td><td>Binds to the LAN address. Can be changed with advanced config <code>i2np.upnp.HTTPPort=nnnn</code>. Can be disabled on the <a href="/confignet">Network Configuration page</a>.</td></tr>
+<tr><td>7653</td><td>UPnP SSDP UDP search response listener</td><td>Binds to all interfaces. Can be changed with advanced config <code>i2np.upnp.SSDPPort=nnnn</code>. Can be disabled on the <a href="/configclients">Client Configuration page</a>.</td></tr>
+<tr><td>7654</td><td>I2P Client Protocol port</td><td>Used by client apps. Can be changed to a different port on the <a href="/configclients">Client Configuration page</a> but this is not recommended. Can be bound to a different interface or all interfaces, or disabled, on the <a href="/configclients">Client Configuration page</a>.</td></tr>
+<tr><td>7655</td><td>UDP for SAM bridge</td><td>A higher level socket API for clients. Only opened when a SAM V3 client requests a UDP session. Can be enabled/disabled on the <a href="/configclients"> Client Configuration page</a>. Can be changed in the <code>clients.config</code> file with the SAM command line option <code>sam.udp.port=nnnn</code>.</td></tr>
+<tr><td>7656</td><td>SAM bridge</td><td>A higher level socket API for clients. Can be enabled/disabled on the <a href="/configclients">Client Configuration page</a>. Can be changed in the <code>clients.config</code> file. [Disabled by default]</td></tr>
+<tr><td>7657</td><td>I2P Router Console (Web interface)</td><td>Can be disabled in the <code>clients.config</code> file. Can also be configured to bind to a specific interface or all interfaces in that file. If you make the Router Console available over the network, you might wish to <a href="/configui#passwordheading">enforce an access password</a> to prevent unauthorized access.</td></tr>
+<tr><td>7658</td><td>I2P Web Server</td><td>Can be disabled in the <code>clients.config</code> file. Can also be configured to bind to a specific interface or all interfaces in the <code>jetty.xml</code> file.</td>
+</tr>
+<tr><td>7659</td><td>Outgoing mail to smtp.postman.i2p</td><td>Can be disabled or changed in the <a href="/i2ptunnelmgr">I2P Tunnel Manager</a>. Can also be configured to bind to a specific interface or all interfaces.</td></tr>
+<tr><td>7660</td><td>Incoming mail from pop.postman.i2p</td><td>Can be disabled or changed in the <a href="/i2ptunnelmgr">I2P Tunnel Manager</a>. Can also be configured to bind to a specific interface or all interfaces.</td></tr>
+<tr><td>8998</td><td>mtn.i2p2.i2p (I2P's Monotone DVCS)</td><td>Can be disabled or changed in the <a href="/i2ptunnelmgr">I2P Tunnel Manager</a>. Can also be configured to bind to a specific interface or all interfaces. [Disabled by default]</td></tr>
+<tr><td>31000</td><td>Local connection to wrapper control channel port</td><td>Outbound to 32000 only, does not listen on this port. Starts at 31000 and will increment until 31999 looking for a free port. To change, see the <a href="http://wrapper.tanukisoftware.com/doc/english/prop-port.html" target="_blank">wrapper documentation</a>.</td></tr>
+<tr><td>32000</td><td>Local control channel for the service wrapper</td><td>To change, see the <a href="http://wrapper.tanukisoftware.com/doc/english/prop-port.html" target="_blank">wrapper documentation</a>.</td></tr>
+<tr><th colspan="3">INTERNET FACING PORTS</th></tr>
+<tr><td colspan="3" class="infohelp">I2P selects a random port between 9000 and 31000 to communicate with other routers when the program is run for the first time, or when your external IP address changes when running in <a href="/confignet#ipchange">Laptop Mode</a>. The <a href="/confignet#udpconfig">selected port</a> is shown on the <a href="/confignet">Network Configuration page</a>.</td></tr>
+<tr><td colspan="3">Outbound UDP from the <a href="/confignet#udpconfig">random port</a> noted on the Network Configuration page to arbitrary remote UDP ports, allowing replies.</td></tr>
+<tr><td colspan="3">Outbound TCP from random high ports to arbitrary remote TCP ports.</td></tr>
+<tr><td colspan="3">Inbound UDP to the <a href="/confignet#udpconfig">port</a> noted on the Network Configuration page from arbitrary locations (optional, but recommended).</td></tr>
+<tr><td colspan="3">Inbound TCP to the <a href="/confignet#externaltcp">port</a> noted on the Network Configuration page from arbitrary locations (optional, but recommended). <a href="/confignet#tcpconfig">Inbound TCP</a> may be disabled on the Network Configuration page.</td></tr>
+<tr><td colspan="3">Outbound UDP on port 123, allowing replies: this is necessary for I2P's internal time sync (via SNTP - querying a random SNTP host in <code>pool.ntp.org</code> or another server you specify).</td></tr></td></tr>
+</table>
+
diff --git a/apps/routerconsole/jsp/help-legal.jsi b/apps/routerconsole/jsp/help-legal.jsi
index c2b31bd68f4784f3b341937447d7452f8428ed13..b243607220a82ad3893d5d1c2b9183f07640dbf0 100644
--- a/apps/routerconsole/jsp/help-legal.jsi
+++ b/apps/routerconsole/jsp/help-legal.jsi
@@ -1,38 +1,34 @@
 <h2>Legal stuff</h2>
-<p>The I2P router (router.jar) and SDK (i2p.jar) are almost entirely public domain, with
-a few notable exceptions:</p>
+<p>The I2P router (router.jar) and SDK (i2p.jar) are almost entirely public domain, with a few notable exceptions:</p>
+
 <ul>
 <li class="tidylist">ElGamal and DSA code, under the BSD license, written by TheCrypto</li>
-<li class="tidylist">SHA256 and HMAC-SHA256, under the MIT license, written by the Legion of the Bouncycastle</li>
-<li class="tidylist">AES code, under the Cryptix (MIT) license, written by the Cryptix team</li>
-<li class="tidylist">SNTP code, under the BSD license, written by Adam Buckley</li>
-<li class="tidylist">The rest is outright public domain, written by jrandom, mihi, hypercubus, oOo,
-    ugha, duck, shendaras, and others.</li>
+<li class="tidylist">SHA256 and HMAC-SHA256, under the MIT license, written by the <a href="https://www.bouncycastle.org/" target="_blank">Legion of the Bouncycastle</a></li>
+<li class="tidylist">AES code, under the Cryptix (MIT) license, written by the <a href="http://www.cryptix.org/" target="_blank">Cryptix team</a></li>
+<li class="tidylist"><a href="http://support.ntp.org/bin/view/Support/JavaSntpClient" target="_blank">SNTP code</a>, under the BSD license, written by Adam Buckley</li>
+<li class="tidylist">The rest is outright public domain, written by jrandom, mihi, hypercubus, oOo, ugha, duck, shendaras, and others.</li>
 </ul>
 
-<p>On top of the I2P router are a series of client applications, each with their own set of
-licenses and dependencies.  This webpage is being served as part of the I2P routerconsole
-client application, which is built off a trimmed down <a href="http://jetty.mortbay.com/jetty/index.html">Jetty</a>
-instance (trimmed down, as in, we do not include the demo apps or other add-ons, and we simplify configuration),
-allowing you to deploy standard JSP/Servlet web applications into your router.  Jetty in turn makes use of
-Apache's javax.servlet (javax.servlet.jar) implementation.
-This product includes software developed by the Apache Software Foundation
-(http://www.apache.org/).</p>
+<p>On top of the I2P router are a series of client applications, each with their own set of licenses and dependencies:
 
-<p>Another application you can see on this webpage is <a href="http://i2p-projekt.i2p/i2ptunnel">I2PTunnel</a>
-(your <a href="i2ptunnel/" target="_blank">web interface</a>) - a GPL'ed application written by mihi that
-lets you tunnel normal TCP/IP traffic over I2P (such as the eepproxy and the irc proxy).  There is also a
-<a href="http://susi.i2p/">susimail</a> web based mail client <a href="susimail/susimail">available</a> on
-the console, which is a GPL'ed application written by susi23.  The addressbook application, written by
-<a href="http://ragnarok.i2p/">Ragnarok</a> helps maintain your hosts.txt files (see ./addressbook/ for
-more information).</p>
+<ul>
+<li class="tidylist"><a href="http://i2p-projekt.i2p/i2ptunnel" target="_blank">I2PTunnel</a> - a GPL'ed application written by mihi
+that lets you tunnel normal TCP/IP traffic over I2P (such as the http proxy and the irc proxy), with a <a href="/i2ptunnelmgr">browser-based front end.</a></li>
+<li class="tidylist"><a href="/webmail">Susimail</a>, a GPL'ed browser based mail client written by susi23.</li>
+<li class="tidylist">The <a href="http://i2p-projekt.i2p/en/docs/naming#addressbook" target="_blank">addressbook application</a>,
+written by Ragnarok helps maintain your hosts.txt files, with a <a href="/dns">front end</a> written by susi23.</li>
+<li class="tidylist">The <a href="http://i2p-projekt.i2p/en/docs/api/samv3" target="_blank">SAM</a> bridge by human (public domain), an API
+which other client applications (such the <a href="http://i2pwiki.i2p/index.php?title=Tahoe-LAFS" target="_blank">I2P Tahoe-LAFS cloud filesystem</a>) can use to interface with I2P.</li>
+<li class="tidylist"><a href="http://i2p-projekt.i2p/en/misc/jbigi" target="_blank">jbigi</a> - an optimized library for doing large number calculations which uses the
+LGPL licensed <a href="http://swox.com/gmp/" target="_blank">GMP</a> library, tuned for various PC architectures.</li>
+<li class="tidylist">Launchers for windows users are built with <a href="http://launch4j.sourceforge.net/" target="_blank">Launch4J</a>,
+and the installer is built with  <a href="http://www.izforge.com/izpack/" target="_blank">IzPack</a>.</li>
+<li class="tidylist">The <a href="/">I2P Router Console</a>, built from a streamlined <a href="http://jetty.mortbay.com/jetty/index.html" target="_blank">Jetty Web Server</a> instance
+which allows you to deploy standard JSP/Servlet web applications in your router.</li>
+<li class="tidylist">Jetty makes use of Apache's <a href="https://docs.oracle.com/javaee/7/api/javax/servlet/package-summary.html" target="_blank">javax.servlet</a>
+(javax.servlet.jar) implementation. This product includes software developed by the <a href="http://www.apache.org/" target="_blank">Apache Software Foundation</a>.</li>
+<li class="tidylist">Source for the I2P code and most bundled client applications can be found on our <a href="http://i2p-projekt.i2p/download" target="_blank">download page</a>.</li>
+</ul>
 
-<p>The router by default also includes human's public domain <a href="http://i2p-projekt.i2p/sam">SAM</a> bridge,
-which other client applications (such the <a href="http://duck.i2p/i2p-bt/">bittorrent port</a>) can use.
-There is also an optimized library for doing large number calculations - jbigi - which in turn uses the
-LGPL licensed <a href="http://swox.com/gmp/">GMP</a> library, tuned for various PC architectures.  Launchers for windows users 
-are built with <a href="http://launch4j.sourceforge.net/">Launch4J</a>, and the installer is built with 
-<a href="http://www.izforge.com/izpack/">IzPack</a>.  For
-details on other applications available, as well as their licenses, please see the
-<a href="http://i2p-projekt.i2p/licenses">license policy</a>.  Source for the I2P code and most bundled
-client applications can be found on our <a href="http://i2p-projekt.i2p/download">download page</a>.</p>
+<p>For details on other applications available, as well as their licenses, please see the <a href="http://i2p-projekt.i2p/licenses" target="_blank">
+license policy</a>. Additional licenses can be found in the <code>licenses</code> sub-directory of your I2P installation.</p>
diff --git a/apps/routerconsole/jsp/help-reachability.jsi b/apps/routerconsole/jsp/help-reachability.jsi
new file mode 100644
index 0000000000000000000000000000000000000000..6563583f704030669c6af72c7645658595b4b6a6
--- /dev/null
+++ b/apps/routerconsole/jsp/help-reachability.jsi
@@ -0,0 +1,72 @@
+<h2><a name="reachability"><%=intl._t("Reachability Help")%></a></h2>
+<p>
+  <%=intl._t("While I2P will work fine behind most firewalls, your speeds and network integration will generally improve if the I2P port is forwarded for both UDP and TCP.")%>&nbsp;
+  <%=intl._t("If you think you have opened up your firewall and I2P still thinks you are firewalled, remember that you may have multiple firewalls, for example both software packages and external hardware routers.")%>&nbsp;
+  <%=intl._t("If there is an error, the <a href=\"logs.jsp\">logs</a> may also help diagnose the problem.")%>
+</p>
+<ul id="reachability">
+  <li class="tidylist"><b><%=intl._t("OK")%>:</b>
+     <%=intl._t("Your UDP port does not appear to be firewalled.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("Firewalled")%>:</b>
+     <%=intl._t("Your UDP port appears to be firewalled.")%>&nbsp;
+     <%=intl._t("As the firewall detection methods are not 100% reliable, this may occasionally be displayed in error.")%>&nbsp;
+     <%=intl._t("However, if it appears consistently, you should check whether both your external and internal firewalls are open for your port.")%>&nbsp; 
+     <%=intl._t("I2P will work fine when firewalled, there is no reason for concern. When firewalled, the router uses \"introducers\" to relay inbound connections.")%>&nbsp;
+     <%=intl._t("However, you will get more participating traffic and help the network more if you can open your firewall(s).")%>&nbsp;
+     <%=intl._t("If you think you have already done so, remember that you may have both a hardware and a software firewall, or be behind an additional, institutional firewall you cannot control.")%>&nbsp;
+     <%=intl._t("Also, some routers cannot correctly forward both TCP and UDP on a single port, or may have other limitations or bugs that prevent them from passing traffic through to I2P.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("Testing")%>:</b>
+     <%=intl._t("The router is currently testing whether your UDP port is firewalled.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("Hidden")%>:</b>
+     <%=intl._t("The router is not configured to publish its address, therefore it does not expect incoming connections.")%>&nbsp;
+     <%=intl._t("Hidden mode is automatically enabled for added protection in certain countries.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("WARN - Firewalled and Fast")%>:</b>
+     <%=intl._t("You have configured I2P to share more than 128KBps of bandwidth, but you are firewalled.")%>&nbsp;
+     <%=intl._t("While I2P will work fine in this configuration, if you really have over 128KBps of bandwidth to share, it will be much more helpful to the network if you open your firewall.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("WARN - Firewalled and Floodfill")%>:</b>
+     <%=intl._t("You have configured I2P to be a floodfill router, but you are firewalled.")%>&nbsp;
+     <%=intl._t("For best participation as a floodfill router, you should open your firewall.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("WARN - Firewalled with Inbound TCP Enabled")%>:</b>
+     <%=intl._t("You have configured inbound TCP, however your UDP port is firewalled, and therefore it is likely that your TCP port is firewalled as well.")%>
+     <%=intl._t("If your TCP port is firewalled with inbound TCP enabled, routers will not be able to contact you via TCP, which will hurt the network.")%> 
+     <%=intl._t("Please open your firewall or disable inbound TCP above.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("WARN - Firewalled with UDP Disabled")%>:</b>
+     <%=intl._t("You have configured inbound TCP, however you have disabled UDP.")%>&nbsp;
+     <%=intl._t("You appear to be firewalled on TCP, therefore your router cannot accept inbound connections.")%>&nbsp;
+     <%=intl._t("Please open your firewall or enable UDP.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("ERR - Clock Skew")%>:</b>
+     <%=intl._t("Your system's clock is skewed, which will make it difficult to participate in the network.")%>&nbsp;
+     <%=intl._t("Correct your clock setting if this error persists.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("ERR - Private TCP Address")%>:</b>
+     <%=intl._t("You must never advertise an unroutable IP address such as 127.0.0.1 or 192.168.1.1 as your external address.")%> 
+     <%=intl._t("Correct the address or disable inbound TCP on the Network Configuration page.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("ERR - SymmetricNAT")%>:</b>
+     <%=intl._t("I2P detected that you are firewalled by a Symmetric NAT.")%>
+     <%=intl._t("I2P does not work well behind this type of firewall. You will probably not be able to accept inbound connections, which will limit your participation in the network.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("ERR - UDP Port In Use - Set i2np.udp.internalPort=xxxx in advanced config and restart")%>:</b>
+     <%=intl._t("I2P was unable to bind to the configured port noted on the advanced network configuration page .")%>&nbsp;
+     <%=intl._t("Check to see if another program is using the configured port. If so, stop that program or configure I2P to use a different port.")%>&nbsp;
+     <%=intl._t("This may be a transient error, if the other program is no longer using the port.")%>&nbsp; 
+     <%=intl._t("However, a restart is always required after this error.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("ERR - UDP Disabled and Inbound TCP host/port not set")%>:</b>
+     <%=intl._t("You have not configured inbound TCP with a hostname and port on the Network Configuration page, however you have disabled UDP.")%>&nbsp;
+     <%=intl._t("Therefore your router cannot accept inbound connections.")%>&nbsp;
+     <%=intl._t("Please configure a TCP host and port on the Network Configuration page or enable UDP.")%>
+  </li>
+  <li class="tidylist"><b><%=intl._t("ERR - Client Manager I2CP Error - check logs")%>:</b>
+     <%=intl._t("This is usually due to a port 7654 conflict. Check the logs to verify.")%>&nbsp;
+     <%=intl._t("Do you have another I2P instance running? Stop the conflicting program and restart I2P.")%>
+  </li>
+</ul>
diff --git a/apps/routerconsole/jsp/help-sidebar.jsi b/apps/routerconsole/jsp/help-sidebar.jsi
index 2cd4a4185d8e535b5879c329312313ed68253d34..8f9ad1b652b8155083775b71f7967cabbc6ac5ca 100644
--- a/apps/routerconsole/jsp/help-sidebar.jsi
+++ b/apps/routerconsole/jsp/help-sidebar.jsi
@@ -17,7 +17,7 @@ your computer's time.</li> */
 %>
 <li class="tidylist"><b>Reachability:</b>
 The router's view of whether it can be contacted by other routers.
-Further information is on the <a href="confignet#help">configuration page</a>.
+See <a href="#confignet">below</a> for more information.
 </li></ul><h3>Peers</h3><ul>
 <li class="tidylist"><b>Active:</b>
 The first number is the number of peers you've sent or received a message from in the last few minutes.
@@ -47,20 +47,20 @@ This number is not the total size of the network;
 it may vary widely depending on your total bandwidth,
 shared bandwidth, and locally-generated traffic.
 I2P does not require a router to know every other router.</li>
-</ul><h3>Bandwidth in/out</h3><div align="justify">
-Should be self-explanatory. All values are in bytes per second, not bits per second.
-Change your bandwidth limits on the <a href="confignet#help">configuration page</a>.
-Bandwidth is <a href="graphs.jsp">graphed</a> by default.</div>
-
-<h3>Local destinations</h3><div align="justify">
-The local applications connecting through your router.
+</ul><h3>Bandwidth in/out</h3>
+<p>Should be self-explanatory. All values are in bytes per second, not bits per second.
+Change your bandwidth limits on the <a href="config">configuration page</a>.
+Bandwidth is <a href="graphs.jsp">graphed</a> by default.</p>
+<h3>Local destinations</h3>
+<p>The local applications connecting through your router.
 These may be clients started through <a href="i2ptunnel/index.jsp">I2PTunnel</a>
-or external programs connecting through SAM, BOB, or directly to I2CP.
-</div><h3>Tunnels in/out</h3><div align="justify">
-The actual tunnels are shown on the <a href="tunnels.jsp">the tunnels page</a>.</div><ul>
-<li class="tidylist"><div align="justify"><b>Exploratory:</b>
+or external programs connecting through SAM, BOB, or directly to I2CP.</p>
+
+<h3>Tunnels in/out</h3>
+<p>The actual tunnels are shown on the <a href="tunnels.jsp">the tunnels page</a>.</p>
+<ul><li class="tidylist"><b>Exploratory:</b>
 Tunnels built by your router and used for communication with the floodfill peers,
-building new tunnels, and testing existing tunnels.</div></li>
+building new tunnels, and testing existing tunnels.</li>
 <li class="tidylist"><b>Client:</b>
 Tunnels built by your router for each client's use.</li>
 <li class="tidylist"><b>Participating:</b>
@@ -68,7 +68,7 @@ Tunnels built by other routers through your router.
 This may vary widely depending on network demand, your
 shared bandwidth, and amount of locally-generated traffic.
 The recommended method for limiting participating tunnels is
-to change your share percentage on the <a href="confignet#help">configuration page</a>.
+to change your share percentage on the <a href="config">configuration page</a>.
 You may also limit the total number by setting <tt>router.maxParticipatingTunnels=nnn</tt> on
 the <a href="configadvanced.jsp">advanced configuration page</a>. <a href="configstats.jsp#tunnel.participatingTunnels">[Enable graphing]</a>.</li>
 <li class="tidylist"><b>Share ratio:</b>
@@ -77,8 +77,8 @@ all your exploratory and client tunnels.
 A number greater than 1.00 means you are contributing more tunnels to the network than you are using.</li>
 </ul>
 
-<h3>Congestion</h3><div align="justify">
-Some basic indications of router overload:</div><ul>
+<h3>Congestion</h3>
+<p>Some basic indications of router overload:</p><ul>
 <li class="tidylist"><b>Job lag:</b>
 How long jobs are waiting before execution. The job queue is listed on the <a href="jobs.jsp">jobs page</a>.
 Unfortunately, there are several other job queues in the router that may be congested,
diff --git a/apps/routerconsole/jsp/help.jsi b/apps/routerconsole/jsp/help.jsi
index 5ee964bc53febdc0c35c7f411140b36658a8e2b0..5bfa202b817c0dc035d84a61598bcc6004f5a053 100644
--- a/apps/routerconsole/jsp/help.jsi
+++ b/apps/routerconsole/jsp/help.jsi
@@ -1,9 +1,9 @@
-If you'd like to help improve or translate the documentation, or
-help with other aspects of the project, please see the documentation for
-<a href="http://i2p-projekt.i2p/en/get-involved">volunteers.</a>
-</p><p>Further assistance is available here:</p>
+<h2>Further Assistance</h2>
+<p>If you'd like to help improve or translate the documentation, or help with other aspects of the project, please see the documentation for <a href="http://i2p-projekt.i2p/en/get-involved" target="_blank">volunteers.</a></p>
+<p>Further assistance is available here:</p>
 <ul class="links">
-<li class="tidylist"><a href="http://i2p-projekt.i2p/en/faq">FAQ on i2p-projekt.i2p</a></li>
-<li class="tidylist"><a href="http://i2p-projekt.i2p/de/faq">Deutsch FAQ</a>.</li></ul>
-<br>You may also try the <a href="http://forum.i2p/">I2P forum</a>
-or IRC.
+<li class="tidylist"><a href="http://i2p-projekt.i2p/en/faq" target="_blank">FAQ on i2p-projekt.i2p</a></li>
+<li class="tidylist"><a href="http://i2pwiki.i2p/" target="_blank">I2PWiki</a></li>
+<li class="tidylist"><a href="http://forum.i2p/" target="_blank">I2P forum</a></li></ul>
+<p>You may also try <a href="http://zzz.i2p" target="_blank">zzz's developer forum</a>,
+or <a href="irc://127.0.0.1:6668/i2p">I2P's IRC network</a>.</p>
diff --git a/apps/routerconsole/jsp/help.jsp b/apps/routerconsole/jsp/help.jsp
index 230c6a557174982bb90f382323bb3f9de209b56b..035938f8baf42b19407b365f7e09b9a5e6c5b8b8 100644
--- a/apps/routerconsole/jsp/help.jsp
+++ b/apps/routerconsole/jsp/help.jsp
@@ -14,12 +14,26 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1>I2P Router Help &amp; Support</h1>
-<div class="main" id="main"><p>
+<div class="main" id="help">
 
-<%@include file="help.jsi" %>
-<%@include file="help-legal.jsi" %>
-<%@include file="help-sidebar.jsi" %>
+<div class="confignav">
+<span class="tab"><a href="#sidebarhelp">Sidebar</a></span>
+<span class="tab"><a href="#configurationhelp">Configuration</a></span>
+<span class="tab"><a href="#reachabilityhelp">Reachability</a></span>
+<span class="tab"><a href="#advancedsettings">Advanced Settings</a></span>
+<span class="tab"><a href="#faq">FAQ</a></span>
+<span class="tab"><a href="#legal">Legal</a></span>
+<span class="tab"><a href="#changelog">Change Log</a></span>
+</div>
 
+<div id="volunteer"><%@include file="help.jsi" %></div>
+<div id="sidebarhelp"><%@include file="help-sidebar.jsi" %></div>
+<div id="configurationhelp"><%@include file="help-configuration.jsi" %></div>
+<div id="reachabilityhelp"><%@include file="help-reachability.jsi" %></div>
+<div id="advancedsettings"><%@include file="help-advancedsettings.jsi" %></div>
+<div id="faq"><%@include file="help-faq.jsi" %></div>
+<div id="legal"><%@include file="help-legal.jsi" %></div>
+<div id="changelog">
 <h2>Change Log</h2>
  <jsp:useBean class="net.i2p.router.web.ContentHelper" id="contenthelper" scope="request" />
  <% java.io.File fpath = new java.io.File(net.i2p.I2PAppContext.getGlobalContext().getBaseDir(), "history.txt"); %>
@@ -27,6 +41,7 @@
  <jsp:setProperty name="contenthelper" property="maxLines" value="256" />
  <jsp:setProperty name="contenthelper" property="startAtBeginning" value="true" />
  <jsp:getProperty name="contenthelper" property="textContent" />
+<p id="fullhistory"><a href="/history.txt" target="_blank">View the full change log</a></p>
+</div>
 
- <p><a href="/history.txt">View the full change log</a>
- </p><hr></div></body></html>
+</div></body></html>
diff --git a/apps/routerconsole/jsp/help_ar.jsp b/apps/routerconsole/jsp/help_ar.jsp
index d7d6b1454d28007bdd56ace1fa607bb8a6d4e8dd..13dfb4590615a3819cbfd7893c34c64fd8df9210 100644
--- a/apps/routerconsole/jsp/help_ar.jsp
+++ b/apps/routerconsole/jsp/help_ar.jsp
@@ -14,16 +14,30 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1>I2P مساعدة لوحة التحكم</h1>
-<div class="main" id="main" dir="rtl" lang="ar"><p>
-اذا رغبت في المساعدة أو ترجمة الوثائق، أو المساعدة في أشياء أخرى، انظر اسفله
 
-<a href="http://i2p-projekt.i2p/ar/get-involved">تطوع</a>
-</p>المزيد من المساعدة هنا:
+<div class="main" id="help" dir="rtl" lang="ar">
+
+<div class="confignav">
+<span class="tab"><a href="#sidebarhelp">Sidebar</a></span>
+<span class="tab"><a href="#configurationhelp">Configuration</a></span>
+<span class="tab"><a href="#reachabilityhelp">Reachability</a></span>
+<span class="tab"><a href="#advancedsettings">Advanced Settings</a></span>
+<span class="tab"><a href="#faq">FAQ</a></span>
+<span class="tab"><a href="#legal">Legal</a></span>
+<span class="tab"><a href="#changelog">Change Log</a></span>
+</div>
+
+<div id="volunteer">
+<h2>مساعدة إضافية</h2>
+<p>اذا رغبت في المساعدة أو ترجمة الوثائق، أو المساعدة في أشياء أخرى، انظر اسفله <a href="http://i2p-projekt.i2p/ar/get-involved">تطوع</a></p>
+<p>المزيد من المساعدة هنا:</p>
 <ul class="links">
-<li class="tidylist"><a href="http://i2p-projekt.i2p/ar/faq">ابئلة شائعة i2p-projekt.i2p</a>
-<br>يمكن ايضا<a href="http://forum.i2p/">I2P منتدى</a>
-او بالدردشة على  IRC.</li></ul>
+<li class="tidylist"><a href="http://i2p-projekt.i2p/ar/faq">ابئلة شائعة i2p-projekt.i2p</a></li>
+<li>يمكن ايضا<a href="http://forum.i2p/">I2P منتدى</a></li>
+<li>او بالدردشة على IRC.</li></ul>
+</div>
 
+<div id="sidebarhelp">
 <h2>شريط المعلومات</h2><p>
 يمكن للاحصائات أن
 <a href="configstats.jsp">تتغير</a> لكي تظهر على شكل
@@ -66,20 +80,19 @@ The full hash is shown on your <a href="netdb.jsp?r=.">صفحة معلومات 
 هذا العدد ليس حجم الاجمالي للشبكة، 
 يمكنه ان بتغيير حسب سرعة الاتصال.
 </li>
-</ul><h3>سرعة الاتصال الداخلي/خارجي</h3><div align="justify">
-السرعة ب بايت في الثانية
+</ul>
+<h3>سرعة الاتصال الداخلي/خارجي</h3>
+<p>السرعة ب بايت في الثانية
 غير السرعة في <a href="confignet#help">صفحة الاعدادات</a>.
-السرعة <a href="graphs.jsp">مرسومة</a> </div>
-<h3>الوجهات الداخلية</h3><div align="justify">
-الاتصالات الداخلية 
-البرامج المحلية المتصلة عبر الموجه
-<a href="i2ptunnel/index.jsp">I2PTunnel</a>
-او برامج خارجية متصلة SAM, BOB, او مباشرة بـ I2CP.
-</div><h3>الأنفاق الداخلة/خارجة</h3><div align="justify">
-الأنفاق الحالية موجودة في <a href="tunnels.jsp">صفحة الأنفاق</a>.</div><ul>
-<li class="tidylist"><div align="justify"><b>تصفح</b>
+السرعة <a href="graphs.jsp">مرسومة</a> </p>
+<h3>الوجهات الداخلية</h3>
+<p>الاتصالات الداخلية  البرامج المحلية المتصلة عبر الموجه <a href="i2ptunnel/index.jsp">I2PTunnel</a></p>
+<p>او برامج خارجية متصلة SAM, BOB, او مباشرة بـ I2CP.</p>
+<h3>الأنفاق الداخلة/خارجة</h3>
+<p>الأنفاق الحالية موجودة في <a href="tunnels.jsp">صفحة الأنفاق</a>.</p><ul>
+<li class="tidylist"><b>تصفح</b>
 الأنفاق المستخدمة من طرف الموجه تستعمل في الاتصال مع النظائر، انشاء انفاق جديدة.
-</div></li>
+</li>
 <li class="tidylist"><b>المستخدمين</b>
 الأنفاق المستخدمة من طرف الموجه </li>
 <li class="tidylist"><b>المشاركة</b>
@@ -93,8 +106,9 @@ the <a href="configadvanced.jsp">صفحة الاعدادات المتقدمة</a
 عدد أكبر من 1.00 يعني انك تساهم في الشبكة بعدد اكبر مما تستهلك.</li>
 </ul>
 
-<h3>ازدحام</h3><div align="justify">
-بعض مشرات ازدحام الموجه</div><ul>
+<h3>ازدحام</h3>
+<p>بعض مشرات ازدحام الموجه</p>
+<ul>
 <li class="tidylist"><b>Job lag:</b>
 How long jobs are waiting before execution. The job queue is listed on the <a href="jobs.jsp">jobs page</a>.
 Unfortunately, there are several other job queues in the router that may be congested,
@@ -131,15 +145,22 @@ Your router may accept all requests, accept or reject a percentage of requests,
 or reject all requests for a number of reasons, to control
 the bandwidth and CPU demands and maintain capacity for
 local clients.</li></ul>
+</div>
+
+<% /* untranslated */ %>
+<div id="configurationhelp"><%@include file="help-configuration.jsi" %></div>
+<div id="reachabilityhelp"><%@include file="help-reachability.jsi" %></div>
+<div id="advancedsettings"><%@include file="help-advancedsettings.jsi" %></div> <% /* untranslated */ %>
+<div id="faq"><%@include file="help-faq.jsi" %></div> <% /* untranslated */ %>
 
+<div id="legal">
 <h2>Legal stuff</h2><p>The I2P router (router.jar) and SDK (i2p.jar) are almost entirely public domain, with
 a few notable exceptions:</p><ul>
 <li class="tidylist">ElGamal and DSA code, under the BSD license, written by TheCrypto</li>
 <li class="tidylist">SHA256 and HMAC-SHA256, under the MIT license, written by the Legion of the Bouncycastle</li>
 <li class="tidylist">AES code, under the Cryptix (MIT) license, written by the Cryptix team</li>
 <li class="tidylist">SNTP code, under the BSD license, written by Adam Buckley</li>
-<li class="tidylist">The rest is outright public domain, written by jrandom, mihi, hypercubus, oOo,
-    ugha, duck, shendaras, and others.</li>
+<li class="tidylist">The rest is outright public domain, written by jrandom, mihi, hypercubus, oOo, ugha, duck, shendaras, and others.</li>
 </ul>
 
 <p>On top of the I2P router are a series of client applications, each with their own set of
@@ -169,7 +190,9 @@ details on other applications available, as well as their licenses, please see t
 <a href="http://i2p-projekt.i2p/ar/get-involved/develop/licenses">license policy</a>.  Source for the I2P code and most bundled
 client applications can be found on our <a href="http://i2p-projekt.i2p/ar/download">download page</a>.
 .</p>
+</div>
 
+<div id="changelog">
 <h2>Change Log</h2>
  <jsp:useBean class="net.i2p.router.web.ContentHelper" id="contenthelper" scope="request" />
  <% java.io.File fpath = new java.io.File(net.i2p.I2PAppContext.getGlobalContext().getBaseDir(), "history.txt"); %>
@@ -178,5 +201,7 @@ client applications can be found on our <a href="http://i2p-projekt.i2p/ar/downl
  <jsp:setProperty name="contenthelper" property="startAtBeginning" value="true" />
  <jsp:getProperty name="contenthelper" property="textContent" />
 
- <p><a href="/history.txt">View the full change log</a>
- </p><hr></div></body></html>
+ <p id="fullhistory"><a href="/history.txt">View the full change log</a></p>
+</div>
+
+</div></body></html>
diff --git a/apps/routerconsole/jsp/help_fr.jsp b/apps/routerconsole/jsp/help_fr.jsp
index e22bd30a9cd74c59d0d7f14f2989d1ea3c885696..f76c2f62378859de6b37da6d42ca41ade28d8ebb 100644
--- a/apps/routerconsole/jsp/help_fr.jsp
+++ b/apps/routerconsole/jsp/help_fr.jsp
@@ -15,16 +15,31 @@
 <%@include file="summary.jsi" %>
 <!-- Traduction de mars 2011 (magma@mail.i2p) -->
 <h1>Aide et assistance du routeur I2P</h1>
-<div class="main" id="main"><p>
-Si vous souhaitez améliorer ou traduire la documentation ou d'autres versants du projet, merci de vous reporter à 
+<div class="main" id="help">
+
+<div class="confignav">
+<span class="tab"><a href="#sidebarhelp">Barre latérale</a></span>
+<span class="tab"><a href="#configurationhelp">Configuration</a></span>
+<span class="tab"><a href="#reachabilityhelp">Joignabilité</a></span>
+<span class="tab"><a href="#advancedsettings">Réglages avancés</a></span>
+<span class="tab"><a href="#faq">FAQ</a></span>
+<span class="tab"><a href="#legal">Légal</a></span>
+<span class="tab"><a href="#changelog">Historique</a></span>
+</div>
+
+<div id="volunteer">
+<h2>Assistance Supplémentaire</h2>
+<p>Si vous souhaitez améliorer ou traduire la documentation ou d'autres versants du projet, merci de vous reporter à 
 la page consacrée aux <a href="http://i2p-projekt.i2p/fr/get-involved">volontaires</a>.
 </p>D'autres détails sont disponibles ici:
 <ul class="links">
 <li class="tidylist"><a href="http://i2p-projekt.i2p/en/faq">FAQ en anglais sur i2p-projekt.i2p</a></li>
-<li class="tidylist"><a href="http://i2p-projekt.i2p/fr/faq">les FAQ en français</a>.</li></ul>
-<br>Il y a aussi le <a href="http://forum.i2p/">forum I2P</a>
-et l'IRC.
+<li class="tidylist"><a href="http://i2p-projekt.i2p/fr/faq">les FAQ en français</a>.</li>
+<li>Il y a aussi le <a href="http://forum.i2p/">forum I2P</a> et l'IRC.</li>
+</ul><br>
+</div>
 
+<div id="sidebarhelp">
 <h2>Informations du panneau de surveillance</h2><p>
 Plusieurs des statistiques affichées dans le panneau de surveillance peuvent être 
 <a href="configstats.jsp">configurées</a> pour être affichées sous forme de <a href="graphs.jsp">graphiques</a> pour 
@@ -64,19 +79,20 @@ diffusion ("floodfill"). Vos pairs "bien intégrés" sont affichés en bas de la
 page <a href="netdb.jsp">base de données du réseau</a>. De moins de 100 à 1000 ou plus. Ce nombre ne représente pas la 
 taille totale du réseau; il varie en fonction de votre bande passante totale et son rapport de partage, et du trafic 
 local. I2P n'a pas besoin que chaque routeur connaisse tous les autres.
-</li></ul><h3>Bande passante entrée/sortie</h3><div align="justify"> 
-Ça parle tout seul. Toutes les valeurs sont en octets par seconde (o/s), pas en bits par seconde (b/s). Modifiez vos 
+</li></ul><h3>Bande passante entrée/sortie</h3>
+<p>Ça parle tout seul. Toutes les valeurs sont en octets par seconde (o/s), pas en bits par seconde (b/s). Modifiez vos 
 limites de bande passante sur la page de <a href="confignet#help">configuration</a>.
-Le <a href="graphs.jsp">graphique de bande passante</a> est activé par défaut.</div>
+Le <a href="graphs.jsp">graphique de bande passante</a> est activé par défaut.</p>
 
-<h3>Destinations locales</h3><div align="justify">
-C'est le nom I2P des applications qui se connectent par votre routeur. Elles peuvent être des clients lancés depuis 
+<h3>Destinations locales</h3>
+<p>C'est le nom I2P des applications qui se connectent par votre routeur. Elles peuvent être des clients lancés depuis 
 <a href="i2ptunnel/index.jsp">I2PTunnel</a> ou des programmes tiers qui se connectent via SAM, BOB ou directement à 
-I2CP.
-</div><h3>TUNNELS:</h3><div align="justify">
-Les tunnels actuels sont affichés sur la page <a href="tunnels.jsp">tunnels</a>.</div><ul>
-<li class="tidylist"><div align="justify"><b>Exploratoires:</b> tunnels créés par votre routeur et utilisés avec les 
-pairs diffuseurs pour la création des nouveaux tunnels et le test des tunnels existants.</div></li>
+I2CP.</p>
+<h3>TUNNELS:</h3>
+<p>Les tunnels actuels sont affichés sur la page <a href="tunnels.jsp">tunnels</a>.</p>
+<ul>
+<li class="tidylist"><b>Exploratoires:</b> tunnels créés par votre routeur et utilisés avec les 
+pairs diffuseurs pour la création des nouveaux tunnels et le test des tunnels existants.</li>
 <li class="tidylist"><b>Clients:</b> tunnels créés par votre routeur pour chaque utilisation cliente.</li>
 <li class="tidylist"><b>Participants:</b> les tunnels créés par d'autres routeurs et qui passent par le votre. Leur 
 nombre dépend largement de la demande du réseau, de votre part de bande passante partagée, et du trafic local. 
@@ -87,10 +103,12 @@ La méthode recommandée pour limiter leur nombre est de diminuer le rapport de
 <li class="tidylist"><b>Rapport de partage:</b> le nombre de tunnels participants que vous routez pour les autres, 
 divisé par le nombre total de sauts dans tous vos tunnels exploratoires et clients. S'il est supérieur à 1, cela 
 signifie que vous contribuez à plus de tunnels que vous n'en utilisez.
-</li></ul>
+</li>
+</ul>
 
-<h3>ENCOMBREMENT</h3><div align="justify">
-Indications de base sur la charge du routeur:</div><ul>
+<h3>ENCOMBREMENT</h3>
+<p>Indications de base sur la charge du routeur:</p>
+<ul>
 <li class="tidylist"><b>Retard de tâches:</b> temps d'attente des tâches avant exécution. La file d'attente est 
 présentée la pages des <a href="jobs.jsp">tâches</a>. Malheureusement, il y a dans le routeur plusieurs autres files 
 d'attentes qui ne peuvent être affichées dans la console. Le retard de tâches devrait rester à zéro en permamence. s'il 
@@ -112,7 +130,14 @@ limite de bande passante partagée.</li>
 des demandes de création de tunnels participants provenant d'autres routeurs. Votre routeur peut accepter ou refuser 
 tout ou partie des requêtes, ou les refuser en totalité pour des raisons prévues telles que le contrôle de la bande 
 passante et des ressources CPU en vue de préserver les performances des clients locaux.</li></ul>
+</div>
+
+<div id="configurationhelp"><%@include file="help-configuration.jsi" %></div>
+<div id="reachabilityhelp"><%@include file="help-reachability.jsi" %></div>
+<div id="advancedsettings"><%@include file="help-advancedsettings.jsi" %></div> <% /* untranslated */ %>
+<div id="faq"><%@include file="help-faq.jsi" %></div> <% /* untranslated */ %>
 
+<div id="legal">
 <h2>Informations légales</h2><p>Le routeur I2P (router.jar) et le SDK (i2p.jar) sont presque entièrement dans le 
 domaine public, à quelques notobles exceptions près:</p><ul>
 <li class="tidylist">Le code ElGamal et DSA, sous licence BSD, écrits par TheCrypto</li>
@@ -148,7 +173,9 @@ leurs licences respectives, référez-vous à notre <a href="http://i2p-projekt.
 Les sources du code I2P et de la plupart des applications jointes est sur notre page de 
 <a href="http://i2p-projekt.i2p/fr/download">téléchargements</a>.
 .</p>
+</div>
 
+<div id="changelog">
 <h2>Historique des évolutions</h2>
  <jsp:useBean class="net.i2p.router.web.ContentHelper" id="contenthelper" scope="request" />
  <% java.io.File fpath = new java.io.File(net.i2p.I2PAppContext.getGlobalContext().getBaseDir(), "history.txt"); %>
@@ -157,5 +184,7 @@ Les sources du code I2P et de la plupart des applications jointes est sur notre
  <jsp:setProperty name="contenthelper" property="startAtBeginning" value="true" />
  <jsp:getProperty name="contenthelper" property="textContent" />
 
- <p><a href="/history.txt">Historique complet</a>
- </p><hr></div></body></html>
+ <p id="fullhistory"><a href="/history.txt" target="_blank">Historique complet</a>
+ </p>
+</div>
+</div></body></html>
diff --git a/apps/routerconsole/jsp/help_nl.jsp b/apps/routerconsole/jsp/help_nl.jsp
index 03da62ee8b60ab29eb8db41fc17b5a02c28c26c1..27f35184f604564411af4860faf5ed371b3df118 100644
--- a/apps/routerconsole/jsp/help_nl.jsp
+++ b/apps/routerconsole/jsp/help_nl.jsp
@@ -14,17 +14,31 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1>I2P Router Help &amp; Support</h1>
-<div class="main" id="main"><p>
-Als je wilt helpen om de documentatie te verbeteren of vertalen, of wilt helpen
+<div class="main" id="help">
+
+<div class="confignav">
+<span class="tab"><a href="#sidebarhelp">Summary Bar</a></span>
+<span class="tab"><a href="#configurationhelp">Configuratie</a></span>
+<span class="tab"><a href="#reachabilityhelp">Bereikbaarheid</a></span>
+<span class="tab"><a href="#advancedsettings">Geavanceerde Instellingen</a></span>
+<span class="tab"><a href="#faq">FAQ</a></span>
+<span class="tab"><a href="#legal">Juridische</a></span>
+<span class="tab"><a href="#changelog">Geschiedenis</a></span>
+</div>
+
+<div id="volunteer">
+<h2>Verdere Assistentie</h2>
+<p>Als je wilt helpen om de documentatie te verbeteren of vertalen, of wilt helpen
 met andere aspecten van het project, zie dan de documentatie voor 
 <a href="http://i2p-projekt.i2p/nl/get-involved">vrijwilligers.</a>
-</p>Verdere ondersteuning is hier beschikbaar:
+</p><p>Verdere ondersteuning is hier beschikbaar:</p>
 <ul class="links">
 <li class="tidylist"><a href="http://i2p-projekt.i2p/nl/faq">FAQ op i2p-projekt.i2p</a></li>
-</ul>
-<br>Je kunt ook het <a href="http://forum.i2p/">I2P forum</a>
-of IRC proberen.
+<li class="tidylist">Je kunt ook het <a href="http://forum.i2p/">I2P forum</a> of IRC proberen.</li>
+</ul><br>
+</div>
 
+<div id="sidebarhelp">
 <h2>Informatie over de Summary Bar</h2><p>
 Veel van de statistieken op de summary bar kunnen
 <a href="configstats.jsp">geconfigureerd</a> worden om te worden
@@ -79,16 +93,17 @@ gedeelde bandbreedte en lokaal gegenereerd verkeer.
 Voor I2P is het niet nodig dat een router alle andere routers kent.
 </li></ul>
 
-<h3>Bandbreedte in/out</h3><div align="justify">
-Dit zou zichzelf moeten verklaren. Alle waarden zijn in bytes per seconde, niet in bits per seconde.
+<h3>Bandbreedte in/out</h3>
+<p>Dit zou zichzelf moeten verklaren. Alle waarden zijn in bytes per seconde, niet in bits per seconde.
 Wijzig je bandbreedte limieten op de <a href="confignet#help">configuratie pagina</a>.
-Bandbreedte wordt standaard <a href="graphs.jsp">geplot</a>.</div>
+Bandbreedte wordt standaard <a href="graphs.jsp">geplot</a>.</p>
 
-<h3>Tunnels</h3><div align="justify">
-De tunnels zelf worden getoond op de <a href="tunnels.jsp">tunnels pagina</a>.</div><ul>
-<li class="tidylist"><div align="justify"><b>Onderzoekend:</b>
+<h3>Tunnels</h3>
+<p>De tunnels zelf worden getoond op de <a href="tunnels.jsp">tunnels pagina</a>.</p>
+<ul>
+<li class="tidylist"><b>Onderzoekend:</b>
 Tunnels gebouwd door je router en gebruikt om te communiceren met de floodfill peers,
-voor het bouwen van nieuwe tunnels en testen van bestaande tunnels.</div></li>
+voor het bouwen van nieuwe tunnels en testen van bestaande tunnels.</li>
 <li class="tidylist"><b>Client:</b>
 Tunnels gebouwd door je router voor het gebruik door elke client.</li>
 <li class="tidylist"><b>Deelnemend:</b>
@@ -102,10 +117,12 @@ de <a href="configadvanced.jsp">geavanceerde configuratie pagina</a>. <a href="c
 <li class="tidylist"><b>Share rato:</b>
 Het aantal deelnemende tunnels dat je voor andere routeert, gedeeld door het totale aantal hops in al je onderzoekende en client tunnels.
 Een aantal groter dan 1.00 betekent dat je meer tunnels aan het netwerk bijdraagt dan je gebruikt.
-</li></ul>
+</li>
+</ul>
 
-<h3>Verstopping</h3><div align="justify">
-Een aantal basis indicatoren voor een router overbelasting:</div><ul>
+<h3>Verstopping</h3>
+<p>Een aantal basis indicatoren voor een router overbelasting:</p>
+<ul>
 <li class="tidylist"><b>Taak vertraging:</b>
 Hoe lang taken moeten wachten voordat ze uitgevoerd worden. De taak wachtrij wordt getoond op de <a href="jobs.jsp">taken pagina</a>.
 Helaas zijn er ook verschillende andere taak wachtrijen in de router die verstopt kunnen raken,
@@ -141,19 +158,26 @@ Je router kan alle aanvragen accepteren, een percentage accepteren of weigeren,
 of alle aanvragen weigeren om verschillende redenen, om de bandbreedte en CPU
 gebruik te beheren en capaciteit te houden voor lokale clients.</li></ul>
 
-<h3>Lokale bestemmingen</h3><div align="justify">
-De lokale applicaties die door je router verbinden.
+<h3>Lokale bestemmingen</h3>
+<p>De lokale applicaties die door je router verbinden. 
 Dit kunnen clients zijn die gestart zijn door <a href="i2ptunnel/index.jsp">I2PTunnel</a>
-of externe programma's die verbinden via SAM, BOB of direct met I2CP.
+of externe programma's die verbinden via SAM, BOB of direct met I2CP.</p>
 </div>
 
-<h2>Juridische zaken</h2><p>De I2P router (router.jar) en SDK (i2p.jar) zijn bijna geheel in het publieke domein, met een aantal noemenswaardige uitzonderingen:</p><ul>
+<div id="configurationhelp"><%@include file="help-configuration.jsi" %></div>
+<div id="reachabilityhelp"><%@include file="help-reachability.jsi" %></div>
+<div id="advancedsettings"><%@include file="help-advancedsettings.jsi" %></div> <% /* untranslated */ %>
+<div id="faq"><%@include file="help-faq.jsi" %></div> <% /* untranslated */ %>
+
+<div id="legal">
+<h2>Juridische zaken</h2>
+<p>De I2P router (router.jar) en SDK (i2p.jar) zijn bijna geheel in het publieke domein, met een aantal noemenswaardige uitzonderingen:</p>
+<ul>
 <li class="tidylist">ElGamal en DSA code, valt onder de BSD licentie, geschreven door TheCrypto</li>
 <li class="tidylist">SHA256 en HMAC-SHA256, valt onder de MIT licentie, geschreven door the Legion of the Bouncycastle</li>
 <li class="tidylist">AES code, valt onder de MIT licentie, geschreven door het Cryptix team</li>
 <li class="tidylist">SNTP code, valt onder de BSD licentie, geschreven door Adam Buckley</li>
-<li class="tidylist">De rest is helemaal public domain, geschreven door jrandom, mihi, hypercubus, oOo,
-    ugha, duck, shendaras, en anderen.</li>
+<li class="tidylist">De rest is helemaal public domain, geschreven door jrandom, mihi, hypercubus, oOo, ugha, duck, shendaras, en anderen.</li>
 </ul>
 
 <p>Bovenop de I2P router zijn een aantal client applicaties gemaakt, elk met
@@ -187,10 +211,12 @@ architecturen.  Opstarters voor windows gebruikers zijn gemaakt met <a
 href="http://launch4j.sourceforge.net/">Launch4J</a>, en de installer is
 gemaakt met <a href="http://www.izforge.com/izpack/">IzPack</a>.  Voor details
 over andere beschikbare applicaties, en hun licenties, zie het <a
-href="http://i2p-projekt.i2p/nl/get-involved/develop/licenses">licentie beleid</a>.  Broncode voor I2P en
+href="http://i2p-projekt.i2p/nl/get-involved/develop/licenses">licentie beleid</a>. Broncode voor I2P en
 de meeste gebundelde client applicaties kan gevonden worden op onze <a
 href="http://i2p-projekt.i2p/nl/download">download pagina</a>.</p>
+</div>
 
+<div id="changelog">
 <h2>Release geschiedenis</h2>
  <jsp:useBean class="net.i2p.router.web.ContentHelper" id="contenthelper" scope="request" />
  <% java.io.File fpath = new java.io.File(net.i2p.I2PAppContext.getGlobalContext().getBaseDir(), "history.txt"); %>
@@ -199,6 +225,6 @@ href="http://i2p-projekt.i2p/nl/download">download pagina</a>.</p>
  <jsp:setProperty name="contenthelper" property="startAtBeginning" value="true" />
  <jsp:getProperty name="contenthelper" property="textContent" />
 
- <p>Een completere lijst met wijzigingen is te vinden
- in het history.txt bestand in je i2p directory.
- </p><hr></div></body></html>
+ <p id="fullhistory"><a href="/history.txt" target="_blank">Completere lijst met wijzigingen</a></p>
+</div>
+</div></body></html>
diff --git a/apps/routerconsole/jsp/help_ru.jsp b/apps/routerconsole/jsp/help_ru.jsp
index b3ef9e551922b3e20338abd6c810590b06056ba7..8159ed17dd66c19f56382a6684d81cbabc7dcd99 100644
--- a/apps/routerconsole/jsp/help_ru.jsp
+++ b/apps/routerconsole/jsp/help_ru.jsp
@@ -16,15 +16,31 @@
 
 <h1>Справка маршрутизатора I2P</h1>
 
-<div class="main" id="main">
+<div class="main" id="help">
+
+<div class="confignav">
+<span class="tab"><a href="#sidebarhelp">Боковая панель</a></span>
+<span class="tab"><a href="#configurationhelp">Конфигурация</a></span>
+<span class="tab"><a href="#reachabilityhelp">Достижимость</a></span>
+<span class="tab"><a href="#advancedsettings">Расширенная конфигурация</a></span>
+<span class="tab"><a href="#faq">Вопросы-Ответы</a></span>
+<span class="tab"><a href="#legal">Юридический</a></span>
+<span class="tab"><a href="#changelog">История компании</a></span>
+</div>
+
+<div id="volunteer">
+<h2>дальнейшая помощь</h2>
 
 <p> Если Вы хотите помочь в улучшении или переводе документации, если у Вас есть идеи, как еще помочь проекту, пожалуйста, загляните в раздел документации 
 <a href="http://i2p-projekt.i2p/ru/get-involved">как стать участником</a>. </p>
 
-<p>Дальнейшие инструкции доступны в <a href="http://i2p-projekt.i2p/ru/faq">FAQ на i2p-projekt.i2p</a>
+<p>Дальнейшие инструкции доступны в <a href="http://i2p-projekt.i2p/ru/faq">FAQ на i2p-projekt.i2p</a></p>
 
-<br>Также, имеет смысл зайти на <a href="http://forum.i2p/">форум I2P</a> и IRC-каналы проекта.</p>
+<p>Также, имеет смысл зайти на <a href="http://forum.i2p/">форум I2P</a> и IRC-каналы проекта.</p>
 
+</div>
+
+<div id="sidebarhelp">
 <h2>Описание статусной панели</h2>
 
 <p>
@@ -78,25 +94,21 @@
 
 <h3>Трафик (входящий/исходящий)</h3>
 
-<div align="justify">
-Все значения показаны в байтах/секунду. Настроить ограничения трафика можно на странице <a href="config.jsp">сетевых настроек</a>.
-Для трафика по умолчанию включено <a href="graphs.jsp">построение графиков</a>.</div>
+<p>Все значения показаны в байтах/секунду. Настроить ограничения трафика можно на странице <a href="config.jsp">сетевых настроек</a>.
+Для трафика по умолчанию включено <a href="graphs.jsp">построение графиков</a>.</p>
 
 <h3>Локальные туннели</h3>
 
-<div align="justify">
-Локальные приложения, выходящие в I2P сеть через Ваш маршрутизатор. Это могут быть клиенты, запущенные через <a href="i2ptunnel/index.jsp">менеджер туннелей</a>, внешние программы, подключающиеся через интерфейсы SAM, BOB или напрямую через I2CP.    
-</div>
+<p>Локальные приложения, выходящие в I2P сеть через Ваш маршрутизатор. Это могут быть клиенты, запущенные через <a href="i2ptunnel/index.jsp">менеджер туннелей</a>, внешние программы, подключающиеся через интерфейсы SAM, BOB или напрямую через I2CP.</p>
 
 <h3>Туннели (входящие/исходящие)</h3>
 
-<div align="justify">
-Список туннелей можно посмотреть на странице <a href="tunnels.jsp">обзор туннелей</a>.</div>
+<p>Список туннелей можно посмотреть на странице <a href="tunnels.jsp">обзор туннелей</a>.</p>
 
 <ul>
 
-<li class="tidylist"><div align="justify"><b>Зондирующие:</b>
-Туннели, созданные Вашим маршрутизатором для связи с floodfill-пирами, тестирования уже существующих туннелей и построения новых.</div> 
+<li class="tidylist"><b>Зондирующие:</b>
+Туннели, созданные Вашим маршрутизатором для связи с floodfill-пирами, тестирования уже существующих туннелей и построения новых.
 </li>
 <li class="tidylist"><b>Клиентские:</b>
 Туннели, созданные Вашим маршрутизатором для каждого локального клиента.
@@ -115,7 +127,7 @@
 
 <h3>Занятость</h3>
 
-<div align="justify">Некоторые базовые индикаторы перегруженности маршрутизатора:</div>
+<p>Некоторые базовые индикаторы перегруженности маршрутизатора:</p>
 <ul>
 
 <li class="tidylist"><b>Задержка заданий:</b>
@@ -145,7 +157,14 @@
 Состояние Вашего маршрутизатора по приему или отклонению запросов от других маршрутизаторов о построении туннелей. Ваш маршрутизатор может принимать все запросы, принимать/отклонять часть запросов или отклонять все запросы, в зависимости от сетевой загрузки, нагрузки на процессор и необходимости резервировать полосу пропускания для локальных клиентов. 
 </li>
 </ul>
+</div>
+
+<div id="configurationhelp"><%@include file="help-configuration.jsi" %></div>
+<div id="reachabilityhelp"><%@include file="help-reachability.jsi" %></div>
+<div id="advancedsettings"><%@include file="help-advancedsettings.jsi" %></div> <% /* untranslated */ %>
+<div id="faq"><%@include file="help-faq.jsi" %></div> <% /* untranslated */ %>
 
+<div id="legal">
 <h2>Лицензии</h2>
 
 <p>Код I2P-маршрутизатора (router.jar) и его SDK (i2p.jar) находятся в общественном достоянии с некоторыми исключениями:</p>
@@ -164,8 +183,9 @@
 <p>Ещё одно приложение на этой странице — <a href="http://i2p-projekt.i2p/ru/docs/api/i2ptunnel">I2PTunnel</a> (а тут <a href="i2ptunnel/" target="_blank">его вебинтерфейс</a>).  Автор mihi, лицензия GPL. I2PTunnel занимается туннелированнием обычного TCP/IP трафика через I2P (может применяться для eepproxy и irc-прокси). <a href="http://susi.i2p/">susimail</a> — почтовый клиент с <a href="susimail/susimail">вебинтерфейсом</a>, автор susi23, лицензия  GPL. Адресная книга помогает управлять содержимым Ваших hosts.txt файлов (подробнее см. ./addressbook/), автор <a href="http://ragnarok.i2p/">Ragnarok</a>.</p> 
 
 <p>В поставку маршрутизатора включен <a href="http://i2p-projekt.i2p/ru/docs/api/sam">SAM</a> интерфейс, автор human, приложение в общественном достоянии. SAM предназначен для использования приложениями-клиентами, такими как <a href="http://duck.i2p/i2p-bt/">bittorrent-клиенты</a>. Маршрутизатором используется оптимизированная под разные PC-архитектуры библиотека для вычислений с большими числами – jbigi, которая в свою очередь использует библиотеку <a href="http://swox.com/gmp/">GMP</a> (LGPL лицензия). Вспомогательные приложения для Windows созданы с использованием <a href="http://launch4j.sourceforge.net/">Launch4J</a>, а инсталлятор собран при помощи <a href="http://www.izforge.com/izpack/">IzPack</a>. Подробнее о других доступных приложениях и их лицензиях смотрите на странице <a href="http://i2p-projekt.i2p/ru/get-involved/develop/licenses">I2P Software Licenses</a>. Исходный код I2P маршрутизатора и идущих в комплекте приложений можно найти на нашей <a href="http://i2p-projekt.i2p/ru/download">странице загрузки</a>. </p> 
+</div>
 
-
+<div id="changelog">
 <h2>История версий</h2>
 
  <jsp:useBean class="net.i2p.router.web.ContentHelper" id="contenthelper" scope="request" />
@@ -175,5 +195,7 @@
  <jsp:setProperty name="contenthelper" property="startAtBeginning" value="true" />
  <jsp:getProperty name="contenthelper" property="textContent" />
 
- <p>Более подробный список изменений можно найти в файле history.txt, который находится в директории установки I2P.
- </p><hr></div></body></html>
+ <p id="fullhistory"><a href="/history" target="_blank">Просмотр полной версии</a>
+ </p>
+ </div>
+ </div></body></html>
diff --git a/apps/routerconsole/jsp/home.jsp b/apps/routerconsole/jsp/home.jsp
index 4622bf1e509c14281fae1858693398efb5341fe9..0e5c915672ff2ca6b7e4a3f1140bcc10dae3d0a0 100644
--- a/apps/routerconsole/jsp/home.jsp
+++ b/apps/routerconsole/jsp/home.jsp
@@ -53,11 +53,11 @@
    }  // shouldShowNews()
 %>
 
-<div class="main" id="main">
+<div class="main" id="home">
 <jsp:useBean class="net.i2p.router.web.HomeHelper" id="homehelper" scope="request" />
 <jsp:setProperty name="homehelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <% if (homehelper.shouldShowWelcome()) { %>
-<div class="welcome" title="<%=intl._t("Click a flag to select a language. Click 'configure language' below to change it later.")%>">
+<div class="welcome" title="<%=intl._t("Click a flag to select a language. Click 'Configure UI' below to change it later.")%>">
   <div class="langbox" id="langbox">
     <a href="/home?lang=en&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=us" title="English" alt="English"></a>
     <a href="/home?lang=ar&amp;consoleNonce=<%=consoleNonce%>"><img height="11" width="16" style="padding: 0 2px;" src="/flags.jsp?c=lang_ar" title="عربية" alt="عربية"></a>
@@ -94,16 +94,16 @@
 </div>
 <% }  // shouldShowWelcome %>
 
-<div class="home" id="home">
+<div id="homepanel">
 <%
    if (homehelper.shouldShowSearch()) {
 %>
   <div class="search">
-    <form action="/search.jsp" method="POST">
+    <form action="/search.jsp" target="_blank" method="POST">
       <table class="search"><tr><td align="right">
         <input size="40" type="text" class="search" name="query" />
       </td><td align="left">
-        <button type="submit" value="search" class="search"><%=intl._t("Search I2P")%></button>
+        <button type="submit" value="search" class="search"><%=intl._t("Search")%></button>
       </td><td align="left">
         <jsp:useBean class="net.i2p.router.web.SearchHelper" id="searchhelper" scope="request" />
         <jsp:setProperty name="searchhelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
@@ -115,12 +115,12 @@
    }  // shouldShowSearch()
 %>
   <div class="ag2">
-    <h4 class="app"><%=intl._t("Hidden Services of Interest")%></h4>
-    <jsp:getProperty name="homehelper" property="favorites" /><br>
+    <h4 class="app"><%=intl._t("Applications and Configuration")%></h4>
+    <jsp:getProperty name="homehelper" property="services" /><br>
   </div>
   <div class="ag2">
-    <h4 class="app2"><%=intl._t("Applications and Configuration")%></h4>
-    <jsp:getProperty name="homehelper" property="services" /><br>
+    <h4 class="app2"><%=intl._t("Hidden Services of Interest")%></h4>
+    <jsp:getProperty name="homehelper" property="favorites" /><br>
     <div class="clearer">&nbsp;</div>
   </div>
 </div>
diff --git a/apps/routerconsole/jsp/i2ptunnelmgr.jsp b/apps/routerconsole/jsp/i2ptunnelmgr.jsp
index a4a5ff6b75b26dcbe8a911ac411175ab0e98447d..fcc9f2b24786e45419c119d51a778b92e2bf6d1a 100644
--- a/apps/routerconsole/jsp/i2ptunnelmgr.jsp
+++ b/apps/routerconsole/jsp/i2ptunnelmgr.jsp
@@ -53,7 +53,7 @@
 <%@include file="summary.jsi" %>
 
 <h1><%=intl._t("Hidden Services Manager")%> <span class="newtab"><a href="/i2ptunnel/" target="_blank" title="<%=intl._t("Open in new tab")%>"><img src="<%=intl.getTheme(request.getHeader("User-Agent"))%>images/newtab.png" /></a></span></h1>
-<div class="main" id="main">
+<div class="main" id="tunnelmgr">
 <iframe src="/i2ptunnel/" width="100%" height="100%" frameborder="0" border="0" name="i2ptunnelframe" id="i2ptunnelframe" onload="setupFrame()" allowtransparency="true">
 <%=intl._t("Your browser does not support iFrames.")%>
 &nbsp;<a href="/i2ptunnel/"><%=intl._t("Click here to continue.")%></a>
diff --git a/apps/routerconsole/jsp/jars.jsp b/apps/routerconsole/jsp/jars.jsp
index 527f06074bc848cfe20ac41972eed00d03c73d15..77f8cea7254aa3bbb356170ec0cb1e395e23e19b 100644
--- a/apps/routerconsole/jsp/jars.jsp
+++ b/apps/routerconsole/jsp/jars.jsp
@@ -9,7 +9,7 @@
 <%@include file="summaryajax.jsi" %>
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %><h1>Jar File Dump</h1>
-<div class="main" id="main">
+<div class="main" id="jardump">
 <jsp:useBean class="net.i2p.router.web.FileDumpHelper" id="dumpHelper" scope="request" />
 <jsp:setProperty name="dumpHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <jsp:getProperty name="dumpHelper" property="fileSummary" />
diff --git a/apps/routerconsole/jsp/jobs.jsp b/apps/routerconsole/jsp/jobs.jsp
index c77ba192ecaac9372d09d9c6c52c68680d0d9ab2..d7bc0a36fd51924017e998cde85fee301e690762 100644
--- a/apps/routerconsole/jsp/jobs.jsp
+++ b/apps/routerconsole/jsp/jobs.jsp
@@ -10,9 +10,9 @@
 <%@include file="summaryajax.jsi" %>
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %><h1><%=intl._t("I2P Router Job Queue")%></h1>
-<div class="main" id="main">
+<div class="main" id="jobs">
  <jsp:useBean class="net.i2p.router.web.JobQueueHelper" id="jobQueueHelper" scope="request" />
  <jsp:setProperty name="jobQueueHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
  <% jobQueueHelper.storeWriter(out); %>
  <jsp:getProperty name="jobQueueHelper" property="jobQueueSummary" />
-<hr></div></body></html>
+</div></body></html>
diff --git a/apps/routerconsole/jsp/logs.jsp b/apps/routerconsole/jsp/logs.jsp
index f3a16481f23c349664e6249a501648e885216687..3aec1100c997a500d49b11173b1308cd631154b4 100644
--- a/apps/routerconsole/jsp/logs.jsp
+++ b/apps/routerconsole/jsp/logs.jsp
@@ -10,9 +10,12 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Router Logs")%></h1>
-<div class="main" id="main">
-<div class="joblog"><h3><%=intl._t("I2P Version and Running Environment")%></h3><a name="version"> </a>
-<p>
+<div class="main" id="logs">
+
+<table id="bugreports"><tbody>
+  <tr><td class="infohelp">
+<%=intl._t("Please include this information in bug reports")%>.
+<%=intl._t("Note that system information, log timestamps, and log messages may provide clues to your location; please review everything you include in a bug report.")%>
 <% /* note to translators - both parameters are URLs */
 %><%=intl._t("Please report bugs on {0} or {1}.",
           "<a href=\"http://trac.i2p2.i2p/newticket\">trac.i2p2.i2p</a>",
@@ -20,44 +23,65 @@
 <!--
 <%=intl._t("You may use the username \"guest\" and password \"guest\" if you do not wish to register.")%>
 -->
-<p><i><%=intl._t("Please include this information in bug reports")%>:</i>
- <p>
-<b>I2P version:</b> <%=net.i2p.router.RouterVersion.FULL_VERSION%><br>
-<b>Java version:</b> <%=System.getProperty("java.vendor")%> <%=System.getProperty("java.version")%> (<%=System.getProperty("java.runtime.name")%> <%=System.getProperty("java.runtime.version")%>)<br>
+  </td></tr>
+</tbody></table>
+
+<h3 class="tabletitle"><%=intl._t("I2P Version and Running Environment")%></h3><a name="version"> </a>
+<table id="enviro"><tbody>
+<tr><td><b>I2P version:</b></td><td><%=net.i2p.router.RouterVersion.FULL_VERSION%></td></tr>
+<tr><td><b>Java version:</b></td><td><%=System.getProperty("java.vendor")%> <%=System.getProperty("java.version")%> (<%=System.getProperty("java.runtime.name")%> <%=System.getProperty("java.runtime.version")%>)</td></tr>
  <jsp:useBean class="net.i2p.router.web.LogsHelper" id="logsHelper" scope="request" />
  <jsp:setProperty name="logsHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <jsp:getProperty name="logsHelper" property="unavailableCrypto" />
-<b>Wrapper version:</b> <%=System.getProperty("wrapper.version", "none")%><br>
-<b>Server version:</b> <jsp:getProperty name="logsHelper" property="jettyVersion" /><br>
-<b>Servlet version:</b> <%=getServletInfo()%><br>
-<b>JSTL version:</b> <jsp:getProperty name="logsHelper" property="jstlVersion" /><br>
-<b>Platform:</b> <%=System.getProperty("os.name")%> <%=System.getProperty("os.arch")%> <%=System.getProperty("os.version")%><br>
+<tr><td><b>Wrapper version:</b></td><td><%=System.getProperty("wrapper.version", "none")%></td></tr>
+<tr><td><b>Server version:</b></td><td><jsp:getProperty name="logsHelper" property="jettyVersion" /></td></tr>
+<tr><td><b>Servlet version:</b></td><td><%=getServletInfo()%></td></tr>
+<tr><td><b>JSTL version:</b></td><td><jsp:getProperty name="logsHelper" property="jstlVersion" /></td></tr>
+<tr><td><b>Platform:</b></td><td><%=System.getProperty("os.name")%> <%=System.getProperty("os.arch")%> <%=System.getProperty("os.version")%></td></tr>
 <%
    boolean isX86 = net.i2p.util.SystemVersion.isX86();
    if (isX86) {
-%><b>Jcpuid version:</b> <%=freenet.support.CPUInformation.CPUID.getJcpuidVersion()%><br>
+%><tr><td><b>Jcpuid version:</b></td><td><%=freenet.support.CPUInformation.CPUID.getJcpuidVersion()%></td></tr>
 <%
    }
-%><b>Processor:</b>
+%><tr><td><b>Processor:</b></td><td>
 <%
    if (isX86) {
 %> <%=net.i2p.util.NativeBigInteger.cpuModel()%>
 <%
    }
-%> (<%=net.i2p.util.NativeBigInteger.cpuType()%>)<br>
-<b>Jbigi:</b> <%=net.i2p.util.NativeBigInteger.loadStatus()%><br>
-<b>Jbigi version:</b> <%=net.i2p.util.NativeBigInteger.getJbigiVersion()%><br>
-<b>GMP version:</b> <%=net.i2p.util.NativeBigInteger.getLibGMPVersion()%><br>
-<b>Encoding:</b> <%=System.getProperty("file.encoding")%><br>
-<b>Charset:</b> <%=java.nio.charset.Charset.defaultCharset().name()%><br>
-</p>
-<p><%=intl._t("Note that system information, log timestamps, and log messages may provide clues to your location; please review everything you include in a bug report.")%></p>
-<h3><%=intl._t("Critical Logs")%></h3><a name="criticallogs"> </a>
+%> (<%=net.i2p.util.NativeBigInteger.cpuType()%>)</td></tr>
+<tr><td><b>Jbigi:</b></td><td><%=net.i2p.util.NativeBigInteger.loadStatus()%></td></tr>
+<tr><td><b>Jbigi version:</b></td><td><%=net.i2p.util.NativeBigInteger.getJbigiVersion()%></td></tr>
+<tr><td><b>GMP version:</b></td><td><%=net.i2p.util.NativeBigInteger.getLibGMPVersion()%></td></tr>
+<tr><td><b>Encoding:</b></td><td><%=System.getProperty("file.encoding")%></td></tr>
+<tr><td><b>Charset:</b></td><td><%=java.nio.charset.Charset.defaultCharset().name()%></td></tr></tbody></table>
+
+<h3 class="tabletitle"><%=intl._t("Critical Logs")%></h3>
+<table id="criticallogs" class="logtable"><tbody>
+<tr><td>
  <jsp:getProperty name="logsHelper" property="criticalLogs" />
-<h3><%=intl._t("Router Logs")%> (<a href="configlogging"><%=intl._t("configure")%></a>)</h3>
+</td></tr>
+</tbody></table>
+
+<h3 class="tabletitle"><%=intl._t("Router Logs")%>&nbsp;<a title="<%=intl._t("Configure router logging options")%>" href="configlogging">[<%=intl._t("Configure")%>]</a></h3>
+<table id="routerlogs" class="logtable"><tbody>
+<tr><td>
  <jsp:getProperty name="logsHelper" property="logs" />
-<h3><%=intl._t("Event Logs")%></h3>
+</td></tr>
+</tbody></table>
+
+<h3 class="tabletitle"><%=intl._t("Event Logs")%></h3>
+<table id="eventlogs" class="logtable"><tbody>
+<tr><td>
  <p><a href="events"><%=intl._t("View event logs")%></a></p>
-<h3><%=intl._t("Service (Wrapper) Logs")%></h3><a name="servicelogs"> </a>
+</td></tr>
+</tbody></table>
+
+<h3 class="tabletitle" id="servicelogs"><%=intl._t("Service (Wrapper) Logs")%></h3>
+<table id="wrapperlogs" class="logtable"><tbody>
+<tr><td>
  <jsp:getProperty name="logsHelper" property="serviceLogs" />
-</div></div></body></html>
+</td></tr>
+</tbody></table>
+</div></body></html>
diff --git a/apps/routerconsole/jsp/netdb.jsp b/apps/routerconsole/jsp/netdb.jsp
index b87cb03fb4af0848b969416300bc91d0e44652b9..54e3ec26fe38902ac5c4f58076060774fdb6ae86 100644
--- a/apps/routerconsole/jsp/netdb.jsp
+++ b/apps/routerconsole/jsp/netdb.jsp
@@ -11,8 +11,7 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Network Database")%></h1>
-<div class="main" id="main">
- <div class="wideload">
+<div class="main" id="netdb">
  <jsp:useBean class="net.i2p.router.web.NetDbHelper" id="netdbHelper" scope="request" />
  <jsp:setProperty name="netdbHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <%
@@ -37,4 +36,4 @@
  <jsp:setProperty name="netdbHelper" property="mtu" value="<%=request.getParameter(\"mtu\")%>" />
  <jsp:setProperty name="netdbHelper" property="ssucaps" value="<%=request.getParameter(\"ssucaps\")%>" />
  <jsp:getProperty name="netdbHelper" property="netDbSummary" />
-</div></div></body></html>
+</div></body></html>
diff --git a/apps/routerconsole/jsp/news.jsp b/apps/routerconsole/jsp/news.jsp
index f85836a40f0119c3cf2f2e083471f50f33af9873..eb23a67d5de66995864226b49f27070296a6dd53 100644
--- a/apps/routerconsole/jsp/news.jsp
+++ b/apps/routerconsole/jsp/news.jsp
@@ -10,10 +10,10 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("Latest News")%></h1>
-<div class="main" id="main">
+<div class="main" id="news">
 <jsp:useBean class="net.i2p.router.web.NewsFeedHelper" id="feedHelper" scope="request" />
 <jsp:setProperty name="feedHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <% feedHelper.setLimit(0); %>
-<div class="fixme" id="fixme">
+<div id="newspage">
 <jsp:getProperty name="feedHelper" property="entries" />
 </div></div></body></html>
diff --git a/apps/routerconsole/jsp/oldconsole.jsp b/apps/routerconsole/jsp/oldconsole.jsp
index 125ea5e75ea3489af9b84289d7af21f4b0cf8984..f1799f0a192044c1a7f00316d693741441b579af 100644
--- a/apps/routerconsole/jsp/oldconsole.jsp
+++ b/apps/routerconsole/jsp/oldconsole.jsp
@@ -17,6 +17,6 @@
 <jsp:setProperty name="conhelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <% conhelper.storeWriter(out); %>
  <h1>I2P Router &raquo; Old Console</h1>
-<div class="main" id="main">
+<div class="main" id="oldconsole"><p>
  <jsp:getProperty name="conhelper" property="console" />
-</div></body></html>
+</p></div></body></html>
diff --git a/apps/routerconsole/jsp/peers.jsp b/apps/routerconsole/jsp/peers.jsp
index 70cb9d93eaa9688ce963cea2f1cf6e46099ad141..e1599e5484e761a624a3de3cd2dedf5c363714c5 100644
--- a/apps/routerconsole/jsp/peers.jsp
+++ b/apps/routerconsole/jsp/peers.jsp
@@ -11,11 +11,11 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Network Peers")%></h1>
-<div class="main" id="main"><div class="wideload">
+<div class="main" id="peers">
  <jsp:useBean class="net.i2p.router.web.PeerHelper" id="peerHelper" scope="request" />
  <jsp:setProperty name="peerHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
  <% peerHelper.storeWriter(out); %>
  <jsp:setProperty name="peerHelper" property="urlBase" value="peers.jsp" />
  <jsp:setProperty name="peerHelper" property="sort" value="<%=request.getParameter(\"sort\") != null ? request.getParameter(\"sort\") : \"\"%>" />
  <jsp:getProperty name="peerHelper" property="peerSummary" />
-</div></div></body></html>
+</div></body></html>
diff --git a/apps/routerconsole/jsp/profiles.jsp b/apps/routerconsole/jsp/profiles.jsp
index c2ffaba3e88e406be8d8b2820d40366b975f403b..bb31fdc5927a8b51dfc31d3f628b63507ca1d91c 100644
--- a/apps/routerconsole/jsp/profiles.jsp
+++ b/apps/routerconsole/jsp/profiles.jsp
@@ -11,7 +11,7 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("I2P Network Peer Profiles")%></h1>
-<div class="main" id="main"><div class="wideload">
+<div class="main" id="profiles"><div class="wideload">
  <jsp:useBean class="net.i2p.router.web.ProfilesHelper" id="profilesHelper" scope="request" />
  <jsp:setProperty name="profilesHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <%
@@ -21,4 +21,4 @@
 %>
  <jsp:setProperty name="profilesHelper" property="full" value="<%=request.getParameter(\"f\")%>" />
  <jsp:getProperty name="profilesHelper" property="summary" />
-<hr></div></div></body></html>
+</div></div></body></html>
diff --git a/apps/routerconsole/jsp/proof.jsp b/apps/routerconsole/jsp/proof.jsp
index 95007120106d46dd3f0fb7f12585fac2d01e16fd..c99c52eedc2d310dbe07db3df2d6c003184c9da6 100644
--- a/apps/routerconsole/jsp/proof.jsp
+++ b/apps/routerconsole/jsp/proof.jsp
@@ -9,8 +9,8 @@
 <%@include file="summaryajax.jsi" %>
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %><h1>Proof of Ownership</h1>
-<div class="main" id="main">
+<div class="main" id="proof"><p>
 <jsp:useBean class="net.i2p.router.web.ProofHelper" id="proofHelper" scope="request" />
 <jsp:setProperty name="proofHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
 <textarea cols="70" rows="15" wrap="off" readonly="readonly" spellcheck="false"><jsp:getProperty name="proofHelper" property="proof" /></textarea>
-</div></body></html>
+</p></div></body></html>
diff --git a/apps/routerconsole/jsp/stats.jsp b/apps/routerconsole/jsp/stats.jsp
index ac53608e2b983ea0f003b34fd3efbf772f145df9..8b6d0ccfdd7364d934c244645741bf08d0421c15 100644
--- a/apps/routerconsole/jsp/stats.jsp
+++ b/apps/routerconsole/jsp/stats.jsp
@@ -15,6 +15,6 @@
 <% oldhelper.storeWriter(out); %>
 <jsp:setProperty name="oldhelper" property="full" value="<%=request.getParameter(\"f\")%>" />
  <h1><%=intl._t("I2P Router Statistics")%></h1>
-<div class="main" id="main">
+<div class="main" id="stats">
  <jsp:getProperty name="oldhelper" property="stats" />
-<hr></div></body></html>
+</div></body></html>
diff --git a/apps/routerconsole/jsp/torrents.jsp b/apps/routerconsole/jsp/torrents.jsp
index 7ac23775c51b11c1d858780e9255002a8d094ae8..96c7df907ba7886d1140dc75d8b6e3d99daf97cb 100644
--- a/apps/routerconsole/jsp/torrents.jsp
+++ b/apps/routerconsole/jsp/torrents.jsp
@@ -30,8 +30,8 @@
 
 <%@include file="summary.jsi" %>
 
-<h1><%=intl._t("I2P Torrent Downloader")%> <span class="newtab"><a href="/i2psnark/" target="_blank" title="<%=intl._t("Open in new tab")%>"><img src="<%=intl.getTheme(request.getHeader("User-Agent"))%>images/newtab.png" /></a></span></h1>
-<div class="main" id="main">
+<h1><%=intl._t("I2P Torrent Manager")%> <span class="newtab"><a href="/i2psnark/" target="_blank" title="<%=intl._t("Open in new tab")%>"><img src="<%=intl.getTheme(request.getHeader("User-Agent"))%>images/newtab.png" /></a></span></h1>
+<div class="main" id="torrents">
 <iframe src="/i2psnark/" width="100%" height="100%" frameborder="0" border="0" name="i2psnarkframe" id="i2psnarkframe" onload="setupFrame()" allowtransparency="true">
 <%=intl._t("Your browser does not support iFrames.")%>
 &nbsp;<a href="/i2psnark/"><%=intl._t("Click here to continue.")%></a>
diff --git a/apps/routerconsole/jsp/tunnels.jsp b/apps/routerconsole/jsp/tunnels.jsp
index 41f25df0f8f7d8a4d82028ff45ea14ed84d1c108..a41e0a18a9c097a5c8ab3fbc9ab06f21b8dca604 100644
--- a/apps/routerconsole/jsp/tunnels.jsp
+++ b/apps/routerconsole/jsp/tunnels.jsp
@@ -10,7 +10,7 @@
 <%@include file="summaryajax.jsi" %>
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %><h1><%=intl._t("I2P Tunnel Summary")%></h1>
-<div class="main" id="main">
+<div class="main" id="tunnels">
  <jsp:useBean class="net.i2p.router.web.TunnelHelper" id="tunnelHelper" scope="request" />
  <jsp:setProperty name="tunnelHelper" property="contextId" value="<%=(String)session.getAttribute(\"i2p.contextId\")%>" />
  <% tunnelHelper.storeWriter(out); %>
diff --git a/apps/routerconsole/jsp/viewprofile.jsp b/apps/routerconsole/jsp/viewprofile.jsp
index 693d00350124f1ebc7de6276460466c74dd4c41f..98bfadd93745269b9afcb58193674e50b46d349d 100644
--- a/apps/routerconsole/jsp/viewprofile.jsp
+++ b/apps/routerconsole/jsp/viewprofile.jsp
@@ -11,7 +11,7 @@
 </head><body onload="initAjax()">
 <%@include file="summary.jsi" %>
 <h1><%=intl._t("Peer Profile")%></h1>
-<div class="main" id="main"><div class="wideload">
+<div class="main" id="view_profile"><div class="wideload">
 <%
     String peerB64 = request.getParameter("peer");
     if (peerB64 == null || peerB64.length() <= 0 ||
@@ -25,9 +25,9 @@
 <jsp:setProperty name="stathelper" property="peer" value="<%=peerB64%>" />
 <% stathelper.storeWriter(out); %>
 <h2><%=intl._t("Profile for peer {0}", peerB64)%></h2>
-<pre>
+<table id="viewprofile"><tbody><tr><td><pre>
 <jsp:getProperty name="stathelper" property="profile" />
-</pre>
+</pre></td></tr></tbody></table>
 <%
     }
 %>
diff --git a/apps/routerconsole/jsp/webmail.jsp b/apps/routerconsole/jsp/webmail.jsp
index ad7abe05e1cd31e3cd5767007830dcd146bba62f..0138a946d2b807666fcade68e4b762fe2173378f 100644
--- a/apps/routerconsole/jsp/webmail.jsp
+++ b/apps/routerconsole/jsp/webmail.jsp
@@ -31,7 +31,7 @@
 <%@include file="summary.jsi" %>
 
 <h1><%=intl._t("I2P Webmail")%> <span class="newtab"><a href="/susimail/susimail" target="_blank" title="<%=intl._t("Open in new tab")%>"><img src="<%=intl.getTheme(request.getHeader("User-Agent"))%>images/newtab.png" /></a></span></h1>
-<div class="main" id="main">
+<div class="main" id="webmail">
 <iframe src="/susimail/susimail" width="100%" height="100%" frameborder="0" border="0" name="susimailframe" id="susimailframe" onload="setupFrame()" allowtransparency="true">
 <%=intl._t("Your browser does not support iFrames.")%>
 &nbsp;<a href="/susimail/susimail"><%=intl._t("Click here to continue.")%></a>
diff --git a/apps/susidns/src/java/src/i2p/susi/dns/AddressbookBean.java b/apps/susidns/src/java/src/i2p/susi/dns/AddressbookBean.java
index b79f894a6decbbd995318b66e6ec8a49ddf94a0b..483cc47b6fd5ef72021ca4bfb2a71838d80b56d4 100644
--- a/apps/susidns/src/java/src/i2p/susi/dns/AddressbookBean.java
+++ b/apps/susidns/src/java/src/i2p/susi/dns/AddressbookBean.java
@@ -174,7 +174,7 @@ public class AddressbookBean extends BaseBean
 				try { fis.close(); } catch (IOException ioe) {}
 		}
 		if( message.length() > 0 )
-			message = "<p>" + message + "</p>";
+			message = "<p id=\"filtered\">" + message + "</p>";
 		return message;
 	}
 
diff --git a/apps/susidns/src/java/src/i2p/susi/dns/NamingServiceBean.java b/apps/susidns/src/java/src/i2p/susi/dns/NamingServiceBean.java
index a47b125f6fd453a86d893272d6940e97dda5cbbe..99a516581b8f2dccbaa406ab7cd9c264783ea95d 100644
--- a/apps/susidns/src/java/src/i2p/susi/dns/NamingServiceBean.java
+++ b/apps/susidns/src/java/src/i2p/susi/dns/NamingServiceBean.java
@@ -211,7 +211,7 @@ public class NamingServiceBean extends AddressbookBean
 			warn(e);
 		}
 		if( message.length() > 0 )
-			message = "<p>" + message + "</p>";
+			message = "<p id=\"filtered\">" + message + "</p>";
 		return message;
 	}
 
diff --git a/apps/susidns/src/jsp/addressbook.jsp b/apps/susidns/src/jsp/addressbook.jsp
index ce7f573b13deae253a9b3fc771e59ef150223f25..8e694b25d2ee9413426c0967e89d806ecebd7af5 100644
--- a/apps/susidns/src/jsp/addressbook.jsp
+++ b/apps/susidns/src/jsp/addressbook.jsp
@@ -59,19 +59,16 @@
 </div>
 <hr>
 <div id="navi">
-<p>
-<%=intl._t("Address books")%>:
-<a href="addressbook?book=private&amp;filter=none&amp;begin=0&amp;end=49"><%=intl._t("private")%></a> |
-<a href="addressbook?book=master&amp;filter=none&amp;begin=0&amp;end=49"><%=intl._t("master")%></a> |
-<a href="addressbook?book=router&amp;filter=none&amp;begin=0&amp;end=49"><%=intl._t("router")%></a> |
-<a href="addressbook?book=published&amp;filter=none&amp;begin=0&amp;end=49"><%=intl._t("published")%></a> *
-<a href="subscriptions"><%=intl._t("Subscriptions")%></a> *
-<a href="config"><%=intl._t("Configuration")%></a> *
-<a href="index"><%=intl._t("Overview")%></a>
-</p>
+<a id="overview" href="index"><%=intl._t("Overview")%></a>&nbsp;
+<a class="abook" href="addressbook?book=private"><%=intl._t("Private")%></a>&nbsp;
+<a class="abook" href="addressbook?book=master"><%=intl._t("Master")%></a>&nbsp;
+<a class="abook" href="addressbook?book=router"><%=intl._t("Router")%></a>&nbsp;
+<a class="abook" href="addressbook?book=published"><%=intl._t("Published")%></a>&nbsp;
+<a id="subs" href="subscriptions"><%=intl._t("Subscriptions")%></a>&nbsp;
+<a id="config" href="config"><%=intl._t("Configuration")%></a>
 </div>
 <hr>
-<div id="headline">
+<div class="headline" id="addressbook">
 <h3><%=intl._t("Address book")%>: <%=intl._t(book.getBook())%></h3>
 <h4><%=intl._t("Storage")%>: ${book.displayName}</h4>
 </div>
@@ -81,11 +78,33 @@
 ${book.loadBookMessages}
 
 <c:if test="${book.notEmpty}">
+<% if (book.getEntries().length > 0) { /* Don't show if no results. Can't figure out how to do this with c:if */ %>
+<form action="export" method="GET" target="_top">
+<div id="export">
+<input type="hidden" name="book" value="${book.book}">
+<c:if test="${book.search} != null && ${book.search}.length() > 0">
+<input type="hidden" name="search" value="${book.search}">
+</c:if>
+<c:if test="${book.hasFilter}">
+<input type="hidden" name="filter" value="${book.filter}">
+</c:if>
+<input type="submit" class="export" value="<%=intl._t("Export in hosts.txt format")%>" />
+</div>
+</form>
+<% } /* book.getEntries().length() > 0 */ %>
+
 <div id="filter">
-<p><%=intl._t("Filter")%>:
+<c:if test="${book.hasFilter}">
+<span><%=intl._t("Current filter")%>: <b>${book.filter}</b>
+<a href="addressbook?filter=none&amp;begin=0&amp;end=49"><%=intl._t("clear filter")%></a></span>
+</c:if>
+<c:if test="${!book.hasFilter}">
+<span><%=intl._t("Filter")%></span>
+</c:if>
+<p>
 <a href="addressbook?filter=a&amp;begin=0&amp;end=49">a</a>
 <a href="addressbook?filter=b&amp;begin=0&amp;end=49">b</a>
-<a href="addressbook?filter=c&amp;begin=0&amp;end=49">c</a> 
+<a href="addressbook?filter=c&amp;begin=0&amp;end=49">c</a>
 <a href="addressbook?filter=d&amp;begin=0&amp;end=49">d</a>
 <a href="addressbook?filter=e&amp;begin=0&amp;end=49">e</a>
 <a href="addressbook?filter=f&amp;begin=0&amp;end=49">f</a>
@@ -111,11 +130,8 @@ ${book.loadBookMessages}
 <a href="addressbook?filter=z&amp;begin=0&amp;end=49">z</a>
 <a href="addressbook?filter=0-9&amp;begin=0&amp;end=49">0-9</a>
 <a href="addressbook?filter=xn--&amp;begin=0&amp;end=49"><%=intl._t("other")%></a>
-<a href="addressbook?filter=none&amp;begin=0&amp;end=49"><%=intl._t("all")%></a></p>
-<c:if test="${book.hasFilter}">
-<p><%=intl._t("Current filter")%>: ${book.filter}
-(<a href="addressbook?filter=none&amp;begin=0&amp;end=49"><%=intl._t("clear filter")%></a>)</p>
-</c:if>
+<a href="addressbook?filter=none&amp;begin=0&amp;end=49"><%=intl._t("all")%></a>
+</p>
 </div>
 
 <div id="search">
@@ -123,12 +139,14 @@ ${book.loadBookMessages}
 <input type="hidden" name="book" value="${book.book}">
 <input type="hidden" name="begin" value="0">
 <input type="hidden" name="end" value="49">
-<table><tr>
+<table>
+<tr>
 <td class="search"><%=intl._t("Search")%>: <input class="search" type="text" name="search" value="${book.search}" size="20" ></td>
 <td class="search"><input class="search" type="submit" name="submitsearch" value="<%=intl._t("Search")%>" ></td>
 </tr>
 </table>
-</form></div>
+</form>
+</div>
 </c:if>
 
 <%
@@ -143,32 +161,37 @@ ${book.loadBookMessages}
 <input type="hidden" name="end" value="49">
 <jsp:setProperty name="book" property="trClass"	value="0" />
 <div id="book">
-<table class="book" cellspacing="0" cellpadding="5">
+<table class="book" id="host_list" cellspacing="0" cellpadding="5">
 <tr class="head">
 
+<% if (book.getEntries().length > 0) { /* Don't show if no results. Can't figure out how to do this with c:if */ %>
+<th><%=intl._t("Hostname")%></th>
+<th><%=intl._t("Link (b32)")%></th>
+<th>Helper</th>
+<th>Details</th>
+<th><%=intl._t("Destination")%></th>
+
 <c:if test="${book.validBook}">
-<th>&nbsp;</th>
+<th title="<%=intl._t("Select hosts for deletion from addressbook")%>"></th>
 </c:if>
 
-<% if (book.getEntries().length > 0) { /* Don't show if no results. Can't figure out how to do this with c:if */ %>
-<th><%=intl._t("Name")%></th>
-<th colspan="2"><%=intl._t("Links")%></th>
-<th><%=intl._t("Destination")%></th>
 </tr>
+
 <!-- limit iterator, or "Form too large" may result on submit, and is a huge web page if we don't -->
 <c:forEach items="${book.entries}" var="addr" begin="${book.resultBegin}" end="${book.resultEnd}">
 <tr class="list${book.trClass}">
+<td class="names"><a href="/imagegen/id?s=256&amp;c=${addr.b32}" target="_blank" title="<%=intl._t("View larger version of identicon for this hostname")%>"><img src="/imagegen/id?s=20&amp;c=${addr.b32}"></a><a href="http://${addr.name}/" target="_top">${addr.displayName}</a></td>
+<td class="names"><span class="addrhlpr"><a href="http://${addr.b32}/" target="_blank" title="<%=intl._t("Base 32 address")%>">b32</a></span></td>
+<td class="helper"><a href="http://${addr.name}/?i2paddresshelper=${addr.destination}" target="_blank" title="<%=intl._t("Helper link to share host address with option to add to addressbook")%>">link</a></td>
+<td class="names"><span class="addrhlpr"><a href="details?h=${addr.name}&amp;book=${book.book}" title="<%=intl._t("More information on this entry")%>"><%=intl._t("details")%></a></span></td>
+<td class="destinations"><div class="destaddress" name="dest_${addr.name}" width="200px">${addr.destination}</div></td>
+
 <c:if test="${book.validBook}">
 <td class="checkbox"><input type="checkbox" name="checked" value="${addr.name}" title="<%=intl._t("Mark for deletion")%>"></td>
 </c:if>
-<td class="names"><a href="http://${addr.name}/" target="_top">${addr.displayName}</a>
-</td><td class="names">
-<span class="addrhlpr"><a href="http://${addr.b32}/" target="_top" title="<%=intl._t("Base 32 address")%>">b32</a></span>
-</td><td class="names">
-<span class="addrhlpr"><a href="details?h=${addr.name}&amp;book=${book.book}" title="<%=intl._t("More information on this entry")%>"><%=intl._t("details")%></a></span>
-</td>
-<td class="destinations"><textarea rows="1" style="height:3em;" wrap="off" cols="40" readonly="readonly" name="dest_${addr.name}" >${addr.destination}</textarea></td>
+
 </tr>
+
 </c:forEach>
 <% } /* book..getEntries().length() > 0 */ %>
 </table>
@@ -185,22 +208,6 @@ ${book.loadBookMessages}
 </c:if>
 <% } /* book..getEntries().length() > 0 */ %>
 </form>
-
-<% if (book.getEntries().length > 0) { /* Don't show if no results. Can't figure out how to do this with c:if */ %>
-<form action="export" method="GET" target="_top">
-<div id="buttons">
-<p class="buttons">
-<input type="hidden" name="book" value="${book.book}">
-<c:if test="${book.search} != null && ${book.search}.length() > 0">
-<input type="hidden" name="search" value="${book.search}">
-</c:if>
-<c:if test="${book.hasFilter}">
-<input type="hidden" name="filter" value="${book.filter}">
-</c:if>
-<input type="submit" class="export" value="<%=intl._t("Export in hosts.txt format")%>" />
-</p></div></form>
-<% } /* book..getEntries().length() > 0 */ %>
-
 </c:if><% /* book.notEmpty */ %>
 
 <c:if test="${book.isEmpty}">
@@ -215,12 +222,17 @@ ${book.loadBookMessages}
 <input type="hidden" name="begin" value="0">
 <input type="hidden" name="end" value="49">
 <div id="add">
-<h3><%=intl._t("Add new destination")%>:</h3>
-<table><tr><td>
-<b><%=intl._t("Host Name")%></b></td><td><input type="text" name="hostname" value="${book.hostname}" size="54">
-</td></tr><tr><td>
-<b><%=intl._t("Destination")%></b></td><td><textarea name="destination" rows="1" style="height:3em" wrap="off" cols="70" spellcheck="false">${book.destination}</textarea>
-</td></tr></table>
+<h3><%=intl._t("Add new destination")%></h3>
+<table>
+<tr>
+<td><b><%=intl._t("Hostname")%></b></td>
+<td><input type="text" name="hostname" value="${book.hostname}" size="54"></td>
+</tr>
+<tr>
+<td><b><%=intl._t("Destination")%></b></td>
+<td><textarea name="destination" rows="1" style="height:3em" wrap="off" cols="70" spellcheck="false">${book.destination}</textarea></td>
+</tr>
+</table>
 <p class="buttons">
 <input class="cancel" type="reset" value="<%=intl._t("Cancel")%>" >
 <input class="accept" type="submit" name="action" value="<%=intl._t("Replace")%>" >
@@ -229,7 +241,8 @@ ${book.loadBookMessages}
 <% } %>
 <input class="add" type="submit" name="action" value="<%=intl._t("Add")%>" >
 </p>
-</div></form>
+</div>
+</form>
 
 <div id="footer">
 <hr>
diff --git a/apps/susidns/src/jsp/config.jsp b/apps/susidns/src/jsp/config.jsp
index 207f332bb17c6274bdc1ee742b6929d473be9407..af65652dea73a781f269ad1e0dba0166a33668fb 100644
--- a/apps/susidns/src/jsp/config.jsp
+++ b/apps/susidns/src/jsp/config.jsp
@@ -53,34 +53,34 @@
 <div class="page">
 <div id="logo">
 <a href="index"><img src="<%=base.getTheme()%>images/logo.png" alt="" title="<%=intl._t("Overview")%>" border="0"/></a>
-</div><hr>
+</div>
+<hr>
 <div id="navi">
-<p>
-<%=intl._t("Address books")%>:
-<a href="addressbook?book=private"><%=intl._t("private")%></a> |
-<a href="addressbook?book=master"><%=intl._t("master")%></a> |
-<a href="addressbook?book=router"><%=intl._t("router")%></a> |
-<a href="addressbook?book=published"><%=intl._t("published")%></a> *
-<a href="subscriptions"><%=intl._t("Subscriptions")%></a> *
-<%=intl._t("Configuration")%> *
-<a href="index"><%=intl._t("Overview")%></a>
-</p>
-</div><hr>
-<div id="headline">
-<h3>${cfg.fileName}</h3>
+<a id="overview" href="index"><%=intl._t("Overview")%></a>&nbsp;
+<a class="abook" href="addressbook?book=private"><%=intl._t("Private")%></a>&nbsp;
+<a class="abook" href="addressbook?book=master"><%=intl._t("Master")%></a>&nbsp;
+<a class="abook" href="addressbook?book=router"><%=intl._t("Router")%></a>&nbsp;
+<a class="abook" href="addressbook?book=published"><%=intl._t("Published")%></a>&nbsp;
+<a id="subs" href="subscriptions"><%=intl._t("Subscriptions")%></a>&nbsp;
+<a id="config" href="config"><%=intl._t("Configuration")%></a>
+</div>
+<hr>
+<div class="headline" id="config">
+<h3><%=intl._t("Configuration")%></h3>
+<h4><%=intl._t("Location:")%> ${cfg.fileName}</h4>
 </div>
 <div id="messages">${cfg.messages}</div>
 <form method="POST" action="config">
 <div id="config">
 <input type="hidden" name="serial" value="${cfg.serial}" >
-<textarea name="config" rows="10" cols="80">${cfg.config}</textarea>
+<textarea name="config" rows="10" cols="80" spellcheck="false">${cfg.config}</textarea>
 </div>
 <div id="buttons">
 <input class="reload" type="submit" name="action" value="<%=intl._t("Reload")%>" >
 <input class="accept" type="submit" name="action" value="<%=intl._t("Save")%>" >
 </div>
 </form>
-<div id="help">
+<div class="help" id="helpconfig">
 <h3><%=intl._t("Hints")%></h3>
 <ol>
 <li>
diff --git a/apps/susidns/src/jsp/details.jsp b/apps/susidns/src/jsp/details.jsp
index 56ca71d377e9db9b98336230812b1c8b65b9bb9b..04db5178ef673ba2a1e3bd7c102881b49e1a02eb 100644
--- a/apps/susidns/src/jsp/details.jsp
+++ b/apps/susidns/src/jsp/details.jsp
@@ -53,23 +53,19 @@
 </div>
 <hr>
 <div id="navi">
-<p>
-<%=intl._t("Address books")%>:
-<a href="addressbook?book=private&amp;filter=none&amp;begin=0&amp;end=49"><%=intl._t("private")%></a> |
-<a href="addressbook?book=master&amp;filter=none&amp;begin=0&amp;end=49"><%=intl._t("master")%></a> |
-<a href="addressbook?book=router&amp;filter=none&amp;begin=0&amp;end=49"><%=intl._t("router")%></a> |
-<a href="addressbook?book=published&amp;filter=none&amp;begin=0&amp;end=49"><%=intl._t("published")%></a> *
-<a href="subscriptions"><%=intl._t("Subscriptions")%></a> *
-<a href="config"><%=intl._t("Configuration")%></a> *
-<a href="index"><%=intl._t("Overview")%></a>
-</p>
+<a id="overview" href="index"><%=intl._t("Overview")%></a>&nbsp;
+<a class="abook" href="addressbook?book=private"><%=intl._t("Private")%></a>&nbsp;
+<a class="abook" href="addressbook?book=master"><%=intl._t("Master")%></a>&nbsp;
+<a class="abook" href="addressbook?book=router"><%=intl._t("Router")%></a>&nbsp;
+<a class="abook" href="addressbook?book=published"><%=intl._t("Published")%></a>&nbsp;
+<a id="subs" href="subscriptions"><%=intl._t("Subscriptions")%></a>&nbsp;
+<a id="config" href="config"><%=intl._t("Configuration")%></a>
 </div>
 <hr>
-<div id="headline">
+<div class="headline">
 <h3><%=intl._t("Address book")%>: <%=intl._t(book.getBook())%></h3>
 <h4><%=intl._t("Storage")%>: ${book.displayName}</h4>
 </div>
-
 <div id="book">
 <%
     String detail = request.getParameter("h");
@@ -87,56 +83,70 @@
                 String b32 = addr.getB32();
 %>
 <jsp:setProperty name="book" property="trClass"	value="0" />
-<table class="book" cellspacing="0" cellpadding="5">
+<table class="book" id="host_details" cellspacing="0" cellpadding="5">
 <tr class="list${book.trClass}">
-<td><%=intl._t("Host Name")%></td>
+<td><%=intl._t("Hostname")%></td>
 <td><a href="http://<%=addr.getName()%>/" target="_top"><%=addr.getDisplayName()%></a></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <%
     if (addr.isIDN()) {
 %>
 <td><%=intl._t("Encoded Name")%></td>
 <td><a href="http://<%=addr.getName()%>/" target="_top"><%=addr.getName()%></a></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <%
     }
 %>
 <td><%=intl._t("Base 32 Address")%></td>
 <td><a href="http://<%=b32%>/" target="_top"><%=b32%></a></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Base 64 Hash")%></td>
 <td><%=addr.getB64()%></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Address Helper")%></td>
 <td><a href="http://<%=addr.getName()%>/?i2paddresshelper=<%=addr.getDestination()%>" target="_top"><%=intl._t("link")%></a></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Public Key")%></td>
 <td><%=intl._t("ElGamal 2048 bit")%></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Signing Key")%></td>
 <td><%=addr.getSigType()%></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Certificate")%></td>
 <td><%=addr.getCert()%></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Added Date")%></td>
 <td><%=addr.getAdded()%></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Validated")%></td>
 <td><%=addr.isValidated() ? intl._t("yes") : intl._t("no")%></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Source")%></td>
 <td><%=addr.getSource()%></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Last Modified")%></td>
 <td><%=addr.getModded()%></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Notes")%></td>
 <td><%=addr.getNotes()%></td>
-</tr><tr class="list${book.trClass}">
+</tr>
+<tr class="list${book.trClass}">
 <td><%=intl._t("Destination")%></td>
-<td class="destinations"><textarea rows="1" style="height:3em;" wrap="off" cols="70" readonly="readonly" ><%=addr.getDestination()%></textarea></td>
-</tr></table>
+<td class="destinations"><div class="destaddress"><%=addr.getDestination()%></div></td>
+</tr>
+</table>
 </div>
 <div id="buttons">
 <form method="POST" action="addressbook">
@@ -151,11 +161,17 @@
 </p>
 </form>
 </div>
-<div><table><tr><td>
-<img src="/imagegen/id?s=320&amp;c=<%=addr.getB64().replace("=", "%3d")%>" width="320" height="320">
-</td><td>
-<img src="/imagegen/qr?s=320&amp;t=<%=addr.getName()%>&amp;c=http%3a%2f%2f<%=addr.getName()%>%2f%3fi2paddresshelper%3d<%=addr.getDestination()%>">
-</td></tr></table>
+<div id="visualid">
+<h3><%=intl._t("Visual Identification for")%> <span id="idAddress"><%=addr.getName()%></span></h3>
+<table>
+<tr>
+<td><img src="/imagegen/id?s=256&amp;c=<%=addr.getB64().replace("=", "%3d")%>" width="256" height="256"></td>
+<td><img src="/imagegen/qr?s=384&amp;t=<%=addr.getName()%>&amp;c=http%3a%2f%2f<%=addr.getName()%>%2f%3fi2paddresshelper%3d<%=addr.getDestination()%>"></td>
+</tr>
+<tr>
+<td colspan="2"><a class="fakebutton" href="/imagegen" title="<%=intl._t("Create your own identification images")%>" target="_blank"><%=intl._t("Launch Image Generator")%></a></td>
+</tr>
+</table>
 <hr>
 <%
             }  // foreach addr
diff --git a/apps/susidns/src/jsp/index.jsp b/apps/susidns/src/jsp/index.jsp
index fa2e3a30a93f34f02a7ca4a4b51f57bf2daf7b8c..22fafa88217ba643e187f41760ea2f17468c1b42 100644
--- a/apps/susidns/src/jsp/index.jsp
+++ b/apps/susidns/src/jsp/index.jsp
@@ -54,16 +54,13 @@
 </div>
 <hr>
 <div id="navi">
-<p>
-<%=intl._t("Address books")%>:
-<a href="addressbook?book=private"><%=intl._t("private")%></a> |
-<a href="addressbook?book=master"><%=intl._t("master")%></a> |
-<a href="addressbook?book=router"><%=intl._t("router")%></a> |
-<a href="addressbook?book=published"><%=intl._t("published")%></a> *
-<a href="subscriptions"><%=intl._t("Subscriptions")%></a> *
-<a href="config"><%=intl._t("Configuration")%></a> *
-<%=intl._t("Overview")%>
-</p>
+<a id="overview" href="index"><%=intl._t("Overview")%></a>&nbsp;
+<a class="abook" href="addressbook?book=private"><%=intl._t("Private")%></a>&nbsp;
+<a class="abook" href="addressbook?book=master"><%=intl._t("Master")%></a>&nbsp;
+<a class="abook" href="addressbook?book=router"><%=intl._t("Router")%></a>&nbsp;
+<a class="abook" href="addressbook?book=published"><%=intl._t("Published")%></a>&nbsp;
+<a id="subs" href="subscriptions"><%=intl._t("Subscriptions")%></a>&nbsp;
+<a id="config" href="config"><%=intl._t("Configuration")%></a>
 </div>
 <hr>
 <div id="content">
diff --git a/apps/susidns/src/jsp/subscriptions.jsp b/apps/susidns/src/jsp/subscriptions.jsp
index d44212db522359db9192ee6a637b1790872aad6c..e26be175e25ff7537e2120aa86c611fe886860f9 100644
--- a/apps/susidns/src/jsp/subscriptions.jsp
+++ b/apps/susidns/src/jsp/subscriptions.jsp
@@ -54,19 +54,18 @@
 <a href="index"><img src="<%=subs.getTheme()%>images/logo.png" alt="" title="<%=intl._t("Overview")%>" border="0"/></a>
 </div><hr>
 <div id="navi">
-<p>
-<%=intl._t("Address books")%>:
-<a href="addressbook?book=private"><%=intl._t("private")%></a> |
-<a href="addressbook?book=master"><%=intl._t("master")%></a> |
-<a href="addressbook?book=router"><%=intl._t("router")%></a> |
-<a href="addressbook?book=published"><%=intl._t("published")%></a> *
-<%=intl._t("Subscriptions")%> *
-<a href="config"><%=intl._t("Configuration")%></a> *
-<a href="index"><%=intl._t("Overview")%></a>
-</p>
-</div><hr>
-<div id="headline">
-<h3>${subs.fileName}</h3>
+<a id="overview" href="index"><%=intl._t("Overview")%></a>&nbsp;
+<a class="abook" href="addressbook?book=private"><%=intl._t("Private")%></a>&nbsp;
+<a class="abook" href="addressbook?book=master"><%=intl._t("Master")%></a>&nbsp;
+<a class="abook" href="addressbook?book=router"><%=intl._t("Router")%></a>&nbsp;
+<a class="abook" href="addressbook?book=published"><%=intl._t("Published")%></a>&nbsp;
+<a id="subs" href="subscriptions"><%=intl._t("Subscriptions")%></a>&nbsp;
+<a id="config" href="config"><%=intl._t("Configuration")%></a>
+</div>
+<hr>
+<div class="headline" id="subscriptions">
+<h3><%=intl._t("Subscriptions")%></h3>
+<h4><%=intl._t("Location:")%> ${subs.fileName}</h4>
 </div>
 <div id="messages">${subs.messages}</div>
 <form method="POST" action="subscriptions">
@@ -79,14 +78,14 @@
 <input class="accept" type="submit" name="action" value="<%=intl._t("Save")%>" >
 </div>
 </form>
-<div id="help">
+<div class="help" id="helpsubs">
 <p class="help">
 <%=intl._t("The subscription file contains a list of i2p URLs.")%>
 <%=intl._t("The addressbook application regularly checks this list for new eepsites.")%>
 <%=intl._t("Those URLs refer to published hosts.txt files.")%>
 <%=intl._t("The default subscription is the hosts.txt from {0}, which is updated infrequently.", "i2p-projekt.i2p")%>
 <%=intl._t("So it is a good idea to add additional subscriptions to sites that have the latest addresses.")%>
-<a href="http://i2p-projekt.i2p/faq.html#subscriptions" target="_top"><%=intl._t("See the FAQ for a list of subscription URLs.")%></a>
+<a href="/help#addressbooksubs" target="_top"><%=intl._t("See the FAQ for a list of subscription URLs.")%></a>
 </p>
 </div>
 <div id="footer">
diff --git a/apps/susimail/src/css/print.css b/apps/susimail/src/css/print.css
index 6f56a1fd98910a4e3d69f069a13f6361b95f428a..bbee9b7344fcfe8f121ee87cd214c146020f09dd 100644
--- a/apps/susimail/src/css/print.css
+++ b/apps/susimail/src/css/print.css
@@ -1,27 +1,76 @@
-.header, .footer, .topbuttons, .bottombuttons {
-	display: none;
+/* Susimail Print Theme Override */
+
+*, th, .list0 td:nth-child(3) a, .list1 td:nth-child(3) a, #mailbox th:nth-child(n+1) {
+     text-shadow: none !important;
+     background: #fff !important;
+     color: #000 !important;
+}
+
+html, body, .page, form {
+     margin: 0;
+     padding: 0;
+}
+
+body, td, p.mailbody {
+     font-size: 10pt !important;
 }
 
-p.error, p.info {
-	display: none;
+.page, table {
+     width: 100%;
+     margin: 0;
+     float: none;
 }
 
-a.sort, img.sort {
-	display: none;
+#mailhead, .mailbody, table, td, tr, .attached, th {
+     border-color: #999 !important;
 }
 
-input.optbox {
-	display: none;
+#mailbox th:nth-child(1), #mailbox td:nth-child(1),
+#mailbox th:nth-child(2), #mailbox td:nth-child(2),
+#mailbox th:nth-child(6), #mailbox td:nth-child(6),
+#mailbox th:nth-child(8), #mailbox td:nth-child(8) {
+     display: none;
 }
 
-div.page, table {
-	width: 100%;
-	margin: 0;
-	float: none;
+#mailbox tr th:last-child, .list0 td:last-child, .list1 td:last-child {
+     padding-right: 4px;
+}
+
+p.mailbody {
+     margin: 0;
+     padding-left: 0 !important;
+     padding-right: 0 !important;
+}
+
+tr.list0 td, tr.list1 td {
+     border-top: 1px solid rgba(240,240,240,0.5);
+}
+
+tr.list1 td, tr.list1 a, .list1 td:nth-child(3) a, .list1 td:nth-child(4) img  {
+     background: rgba(245,245,245,0.5) !important;
+     -webkit-print-color-adjust: exact;
+}
+
+form, textarea, input[type=text] {
+     border: none;
 }
 
 textarea, input[type=text] {
-	border-style: none;
-	border-color: Transparent;
-	overflow: auto;
+     overflow: auto;
+}
+
+.header, .footer, .topbuttons, .bottombuttons, .notifications, p.error, p.info, a.sort, img.sort, .optbox, hr {
+     display: none;
+}
+
+div.attached {
+     border-bottom: none !important;
+     padding-top: 5px !important;
+}
+
+.attached a::before {
+     content: url(/themes/susimail/images/attach.png);
+     vertical-align: middle;
+     margin-left: -25px;
+     margin-bottom: 2px;
 }
diff --git a/apps/susimail/src/src/i2p/susi/webmail/Mail.java b/apps/susimail/src/src/i2p/susi/webmail/Mail.java
index 726dab5a8f646448ca8356f20b58c5b41a20f992..3b43564d8fb0d137bfd9653d498319590af711f2 100644
--- a/apps/susimail/src/src/i2p/susi/webmail/Mail.java
+++ b/apps/susimail/src/src/i2p/susi/webmail/Mail.java
@@ -319,9 +319,9 @@ class Mail {
 								shortSender = shortSender.substring(0, lt).trim();
 							else if (lt < 0 && shortSender.contains("@"))
 								shortSender = '<' + shortSender + '>';  // add missing <> (but thunderbird doesn't...)
-							boolean trim = shortSender.length() > 40;
+							boolean trim = shortSender.length() > 25;
 							if (trim)
-								shortSender = shortSender.substring( 0, 37 ).trim();
+								shortSender = shortSender.substring( 0, 22 ).trim();
 							shortSender = html.encode( shortSender );
 							if (trim)
 								shortSender += "&hellip;";  // must be after html encode
@@ -344,9 +344,9 @@ class Mail {
 							subject = line.substring( 8 ).trim();
 							formattedSubject = subject;
 							shortSubject = formattedSubject;
-							boolean trim = formattedSubject.length() > 60;
+							boolean trim = formattedSubject.length() > 65;
 							if (trim)
-								shortSubject = formattedSubject.substring( 0, 57 ).trim();
+								shortSubject = formattedSubject.substring( 0, 62 ).trim();
 							shortSubject = html.encode( shortSubject );
 							if (trim)
 								shortSubject += "&hellip;";  // must be after html encode
diff --git a/apps/susimail/src/src/i2p/susi/webmail/WebMail.java b/apps/susimail/src/src/i2p/susi/webmail/WebMail.java
index 95f633282e1c14d95cf1836bb2220e86cd4f972c..a01c1861059fa47ba29f0dba7ac5404be5102508 100644
--- a/apps/susimail/src/src/i2p/susi/webmail/WebMail.java
+++ b/apps/susimail/src/src/i2p/susi/webmail/WebMail.java
@@ -202,7 +202,7 @@ public class WebMail extends HttpServlet
 	private static final String CONFIG_THEME = "theme";
 	private static final String DEFAULT_THEME = "light";
 
-	private static final String spacer = "&nbsp;&nbsp;&nbsp;";
+	private static final String spacer = ""; /* this is best done with css */
 	private static final String thSpacer = "<th>&nbsp;</th>\n";
 	private static final String CONSOLE_BUNDLE_NAME = "net.i2p.router.web.messages";
 	
@@ -664,7 +664,7 @@ public class WebMail extends HttpServlet
 			}
 			if( prepareAttachment ) {
 				if( html ) {
-					out.println( "<hr><p class=\"mailbody\">" );
+					out.println( "<hr><div class=\"attached\">" );
 					String type = mailPart.type;
 					if (type != null && type.startsWith("image/")) {
 						// we at least show images safely...
@@ -685,7 +685,7 @@ public class WebMail extends HttpServlet
 							 mailPart.hashCode() + "\">" + _t("Download attachment {0}", ident) + "</a>" +
 							 " (" + _t("File is packed into a zipfile for security reasons.") + ')');
 					}
-					out.println( "</p>" );					
+					out.println( "</div>" );
 				}
 				else {
 					out.println( _t("Attachment ({0}).", ident) );
@@ -1811,10 +1811,10 @@ public class WebMail extends HttpServlet
 					"<input type=\"hidden\" name=\"" + SUSI_NONCE + "\" value=\"" + nonce + "\">");
 
 				if( sessionObject.error != null && sessionObject.error.length() > 0 ) {
-					out.println( "<p class=\"error\">" + quoteHTML(sessionObject.error).replace("\n", "<br>") + "</p>" );
+					out.println( "<div class=\"notifications\"><p class=\"error\">" + quoteHTML(sessionObject.error).replace("\n", "<br>") + "</p></div>" );
 				}
 				if( sessionObject.info != null && sessionObject.info.length() > 0 ) {
-					out.println( "<p class=\"info\"><b>" + quoteHTML(sessionObject.info).replace("\n", "<br>") + "</b></p>" );
+					out.println( "<div class=\"notifications\"><p class=\"info\"><b>" + quoteHTML(sessionObject.info).replace("\n", "<br>") + "</b></p></div>" );
 				}
 				/*
 				 * now write body
@@ -1835,7 +1835,7 @@ public class WebMail extends HttpServlet
 					showConfig(out, sessionObject);
 				
 				//out.println( "</form><div id=\"footer\"><hr><p class=\"footer\">susimail v0." + version +" " + ( RELEASE ? "release" : "development" ) + " &copy; 2004-2005 <a href=\"mailto:susi23@mail.i2p\">susi</a></div></div></body>\n</html>");				
-				out.println( "</form><div class=\"footer\"><hr><p class=\"footer\">susimail &copy; 2004-2005 susi</p></div></div></body>\n</html>");				
+				out.println( "</form><div class=\"footer\"><p class=\"footer\">susimail &copy; 2004-2005 susi</p></div></div></body>\n</html>");
 				out.flush();
 		}
 	}
@@ -2170,19 +2170,17 @@ public class WebMail extends HttpServlet
 		sessionObject.subject = null;
 		sessionObject.body = null;
 		
-		out.println( "<table cellspacing=\"0\" cellpadding=\"5\">\n" +
+		out.println( "<div id=\"composemail\"><table id=\"newmail\" cellspacing=\"0\" cellpadding=\"5\">\n" +
 				"<tr><td colspan=\"2\" align=\"center\"><hr></td></tr>\n" +
 				"<tr><td align=\"right\">" + _t("From") + ":</td><td align=\"left\"><input type=\"text\" size=\"80\" name=\"" + NEW_FROM + "\" value=\"" + quoteHTML(from) + "\" " + ( fixed ? "disabled" : "" ) +"></td></tr>\n" +
 				"<tr><td align=\"right\">" + _t("To") + ":</td><td align=\"left\"><input type=\"text\" size=\"80\" name=\"" + NEW_TO + "\" value=\"" + quoteHTML(to) + "\"></td></tr>\n" +
 				"<tr><td align=\"right\">" + _t("Cc") + ":</td><td align=\"left\"><input type=\"text\" size=\"80\" name=\"" + NEW_CC + "\" value=\"" + quoteHTML(cc) + "\"></td></tr>\n" +
 				"<tr><td align=\"right\">" + _t("Bcc") + ":</td><td align=\"left\"><input type=\"text\" size=\"80\" name=\"" + NEW_BCC + "\" value=\"" + quoteHTML(bcc) + "\"></td></tr>\n" +
-				"<tr><td align=\"right\">" + _t("Bcc to self") + ": </td><td align=\"left\"><input type=\"checkbox\" class=\"optbox\" name=\"" + NEW_BCC_TO_SELF + "\" value=\"1\" " + (sessionObject.bccToSelf ? "checked" : "" ) + "></td></tr>\n" +
+				"<tr><td align=\"right\"><label for=\"bcctoself\">" + _t("Bcc to self") + ":</label></td><td align=\"left\"><input type=\"checkbox\" class=\"optbox\" id=\"bcctoself\" name=\"" + NEW_BCC_TO_SELF + "\" value=\"1\" " + (sessionObject.bccToSelf ? "checked" : "" ) + "></td></tr>\n" +
 				"<tr><td align=\"right\">" + _t("Subject") + ":</td><td align=\"left\"><input type=\"text\" size=\"80\" name=\"" + NEW_SUBJECT + "\" value=\"" + quoteHTML(subject) + "\"></td></tr>\n" +
-				"<tr><td colspan=\"2\" align=\"center\"><textarea cols=\"" + Config.getProperty( CONFIG_COMPOSER_COLS, 80 )+ "\" rows=\"" + Config.getProperty( CONFIG_COMPOSER_ROWS, 10 )+ "\" name=\"" + NEW_TEXT + "\">" + text + "</textarea>" +
+				"<tr><td></td><td align=\"left\"><textarea cols=\"" + Config.getProperty( CONFIG_COMPOSER_COLS, 80 )+ "\" rows=\"" + Config.getProperty( CONFIG_COMPOSER_ROWS, 10 )+ "\" name=\"" + NEW_TEXT + "\">" + text + "</textarea></td></tr>" +
 				"<tr class=\"bottombuttons\"><td colspan=\"2\" align=\"center\"><hr></td></tr>\n" +
-				"<tr class=\"bottombuttons\"><td align=\"right\">" + _t("Add Attachment") + ":</td><td align=\"left\"><input type=\"file\" size=\"50%\" name=\"" + NEW_FILENAME + "\" value=\"\"></td></tr>" +
-				// TODO disable/hide in JS if no file selected
-				"<tr class=\"bottombuttons\"><td>&nbsp;</td><td align=\"left\">" + button(NEW_UPLOAD, _t("Add another attachment")) + "</td></tr>");
+				"<tr class=\"bottombuttons\"><td align=\"right\">" + _t("Add Attachment") + ":</td><td id=\"addattach\" align=\"left\"><input type=\"file\" size=\"50%\" name=\"" + NEW_FILENAME + "\" value=\"\">&nbsp;" + button(NEW_UPLOAD, _t("Add another attachment")) + "</td></tr>");
 		
 		if( sessionObject.attachments != null && !sessionObject.attachments.isEmpty() ) {
 			boolean wroteHeader = false;
@@ -2193,14 +2191,14 @@ public class WebMail extends HttpServlet
 				} else {
 					out.println("<tr><td align=\"right\">&nbsp;</td>");
 				}
-				out.println("<td align=\"left\"><input type=\"checkbox\" class=\"optbox\" name=\"check" + attachment.hashCode() + "\" value=\"1\">&nbsp;" + quoteHTML(attachment.getFileName()) + "</td></tr>");
+				out.println("<td id=\"attachedfile\" align=\"left\"><label><input type=\"checkbox\" class=\"optbox\" name=\"check" + attachment.hashCode() + "\" value=\"1\">&nbsp;" + quoteHTML(attachment.getFileName()) + "</label></td></tr>");
 			}
 			// TODO disable in JS if none selected
-			out.println("<tr class=\"bottombuttons\"><td>&nbsp;</td><td align=\"left\">" +
+			out.println("<tr class=\"bottombuttons\"><td>&nbsp;</td><td align=\"left\" id=\"deleteattached\">" +
 			            button( DELETE_ATTACHMENT, _t("Delete selected attachments") ) +
 				    "</td></tr>");
 		}
-		out.println( "</table>" );
+		out.println( "</table></div>" );
 	}
 
 	/**
@@ -2214,7 +2212,7 @@ public class WebMail extends HttpServlet
 		String pop3 = Config.getProperty( CONFIG_PORTS_POP3, "" + DEFAULT_POP3PORT );
 		String smtp = Config.getProperty( CONFIG_PORTS_SMTP, "" + DEFAULT_SMTPPORT );
 		
-		out.println( "<table cellspacing=\"3\" cellpadding=\"5\">\n" +
+		out.println( "<div id=\"dologin\"><h1>" + _t("I2PMail Login") + "</h1><table cellspacing=\"3\" cellpadding=\"5\">\n" +
 			// current postman hq length limits 16/12, new postman version 32/32
 			"<tr><td align=\"right\" width=\"30%\">" + _t("User") + "</td><td width=\"40%\" align=\"left\"><input type=\"text\" size=\"32\" name=\"" + USER + "\" value=\"" + "\"> @mail.i2p</td></tr>\n" +
 			"<tr><td align=\"right\" width=\"30%\">" + _t("Password") + "</td><td width=\"40%\" align=\"left\"><input type=\"password\" size=\"32\" name=\"pass\" value=\"" + "\"></td></tr>\n");
@@ -2227,18 +2225,16 @@ public class WebMail extends HttpServlet
 			"<tr><td align=\"right\" width=\"30%\">" + _t("SMTP Port") + "</td><td width=\"40%\" align=\"left\"><input type=\"text\" style=\"text-align: right;\" size=\"5\" name=\"" + SMTP +"\" value=\"" + quoteHTML(smtp) + "\"" + ( fixed ? " disabled" : "" ) + "></td></tr>\n");
 		}
 		out.println(
-			"<tr><td colspan=\"2\">&nbsp;</td></tr>\n" +
-			"<tr><td></td><td align=\"left\">" + button( LOGIN, _t("Login") ) + spacer +
+			"<tr><td colspan=\"2\"><hr></td></tr>\n" +
+			"<tr><td colspan=\"2\" align=\"center\">" + button( LOGIN, _t("Login") ) + spacer +
 			 button(OFFLINE, _t("Read Mail Offline") ) +
 			 //spacer +
 			 //" <input class=\"cancel\" type=\"reset\" value=\"" + _t("Reset") + "\">" +
 			 spacer +
 			 button(CONFIGURE, _t("Settings")) +
 			"</td></tr>\n" +
-			"<tr><td colspan=\"2\">&nbsp;</td></tr>\n" +
-			"<tr><td></td><td align=\"left\"><a href=\"http://hq.postman.i2p/?page_id=14\">" + _t("Learn about I2P mail") + "</a></td></tr>\n" +
-			"<tr><td></td><td align=\"left\"><a href=\"http://hq.postman.i2p/?page_id=16\">" + _t("Create Account") + "</a></td></tr>\n" +
-			"</table>");
+			"<tr><td align=\"center\" colspan=\"2\"><hr><a href=\"http://hq.postman.i2p/?page_id=14\">" + _t("Learn about I2P mail") + "</a> | <a href=\"http://hq.postman.i2p/?page_id=16\">" + _t("Create Account") + "</a></td></tr>\n" +
+			"</table></div>");
 	}
 
 	/**
@@ -2269,8 +2265,7 @@ public class WebMail extends HttpServlet
 		String curSort = sessionObject.folder.getCurrentSortBy();
 		Folder.SortOrder curOrder = sessionObject.folder.getCurrentSortingDirection();
 		out.println("<table id=\"mailbox\" cellspacing=\"0\" cellpadding=\"5\">\n" +
-			"<tr><td colspan=\"9\"><hr></td></tr>\n<tr>" +
-			thSpacer +
+			"<tr><td colspan=\"9\"><hr></td></tr>\n<tr><th title=\"" + _t("Mark for deletion") + "\">&nbsp;</th>" +
 			thSpacer + "<th>" + sortHeader( SORT_SENDER, _t("From"), sessionObject.imgPath, curSort, curOrder ) + "</th>" +
 			thSpacer + "<th>" + sortHeader( SORT_SUBJECT, _t("Subject"), sessionObject.imgPath, curSort, curOrder ) + "</th>" +
 			thSpacer + "<th>" + sortHeader( SORT_DATE, _t("Date"), sessionObject.imgPath, curSort, curOrder ) +
@@ -2330,8 +2325,8 @@ public class WebMail extends HttpServlet
 			i++;
 		}
 		if (i == 0)
-			out.println("<tr><td colspan=\"9\" align=\"center\"><i>" + _t("No messages") + "</i></td></tr>");
-		out.println( "<tr class=\"bottombuttons\"><td colspan=\"9\"><hr></td></tr>");
+			out.println("<tr><td colspan=\"9\" align=\"center\"><div id=\"emptymailbox\"><i>" + _t("No messages") + "</i></div></td></tr>");
+		out.println( "<tr class=\"bottombuttons\"></tr>");
 		if (sessionObject.folder.getPages() > 1 && i > 30) {
 			// show the buttons again if page is big
 			out.println("<tr class=\"bottombuttons\"><td colspan=\"9\" align=\"center\">");
@@ -2373,16 +2368,18 @@ public class WebMail extends HttpServlet
 	 */
 	private static void showPageButtons(PrintWriter out, Folder<?> folder) {
 		out.println(
-			"<br>" +
+			"<table id=\"pagenav\"><tr><td>" +
 			( folder.isFirstPage() ?
 						button2( FIRSTPAGE, _t("First") ) + "&nbsp;" + button2( PREVPAGE, _t("Previous") ) :
 						button( FIRSTPAGE, _t("First") ) + "&nbsp;" + button( PREVPAGE, _t("Previous") ) ) +
-			" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
+			"</td><td>" +
 			_t("Page {0} of {1}", folder.getCurrentPage(), folder.getPages()) +
-			"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; " +
+			"</td><td>" +
 			( folder.isLastPage() ? 
 						button2( NEXTPAGE, _t("Next") ) + "&nbsp;" + button2( LASTPAGE, _t("Last") ) :
-						button( NEXTPAGE, _t("Next") ) + "&nbsp;" + button( LASTPAGE, _t("Last") ) )
+						button( NEXTPAGE, _t("Next") ) + "&nbsp;" + button( LASTPAGE, _t("Last") ) ) +
+			"</td></tr></table>"
+
 		);
 	}
 
@@ -2415,36 +2412,38 @@ public class WebMail extends HttpServlet
 			out.println(button2(DELETE, _t("Delete")));
 		else
 			out.println(button(DELETE, _t("Delete")));
-		out.println(spacer + button(LOGOUT, _t("Logout") ));
-		out.println("<br>" +
+		out.println(button(LOGOUT, _t("Logout") ));
+		out.println("<div id=\"messagenav\">" +
 			( sessionObject.folder.isFirstElement( sessionObject.showUIDL ) ? button2( PREV, _t("Previous") ) : button( PREV, _t("Previous") ) ) + spacer +
 			button( LIST, _t("Back to Folder") ) + spacer +
 			( sessionObject.folder.isLastElement( sessionObject.showUIDL ) ? button2( NEXT, _t("Next") ) : button( NEXT, _t("Next") ) ));
-		out.println("</div>");
+		out.println("</div></div>");
 		//if (Config.hasConfigFile())
 		//	out.println(button( RELOAD, _t("Reload Config") ) + spacer);
+		out.println( "<div id=\"viewmail\"><table id=\"message_full\" cellspacing=\"0\" cellpadding=\"5\">\n");
 		if( mail != null ) {
-			out.println( "<table cellspacing=\"0\" cellpadding=\"5\">\n" +
+			out.println("<tr><td colspan=\"2\"><table id=\"mailhead\">\n" +
 					"<tr><td colspan=\"2\" align=\"center\"><hr></td></tr>\n" +
-					"<tr class=\"mailhead\"><td align=\"right\" valign=\"top\">" + _t("From") +
+					"<tr><td align=\"right\">" + _t("From") +
 					":</td><td align=\"left\">" + quoteHTML( mail.sender ) + "</td></tr>\n" +
-					"<tr class=\"mailhead\"><td align=\"right\" valign=\"top\">" + _t("Subject") +
+					"<tr><td align=\"right\">" + _t("Subject") +
 					":</td><td align=\"left\">" + quoteHTML( mail.formattedSubject ) + "</td></tr>\n" +
-					"<tr class=\"mailhead\"><td align=\"right\" valign=\"top\">" + _t("Date") +
+					"<tr><td align=\"right\">" + _t("Date") +
 					":</td><td align=\"left\">" + mail.quotedDate + "</td></tr>\n" +
-					"<tr><td colspan=\"2\" align=\"center\"><hr></td></tr>" );
+					"<tr><td colspan=\"2\" align=\"center\"><hr></td></tr>" +
+					"</table></td></tr>\n" );
 			if( mail.hasPart()) {
 				mail.setNew(false);
 				showPart( out, mail.getPart(), 0, SHOW_HTML );
 			}
 			else {
-				out.println( "<tr class=\"mailbody\"><td colspan=\"2\" align=\"center\"><p class=\"error\">" + _t("Could not fetch mail body.") + "</p></td></tr>" );
+				out.println( "<tr class=\"mailbody\"><td colspan=\"2\" align=\"center\"><p class=\"error\">" + _t("Could not fetch mail body.") + "</p></td></tr>\n" );
 			}
 		}
 		else {
-			out.println( "<tr class=\"mailbody\"><td colspan=\"2\" align=\"center\"><p class=\"error\">" + _t("Could not fetch mail.") + "</p></td></tr>" );
+			out.println( "<tr class=\"mailbody\"><td colspan=\"2\" align=\"center\"><p class=\"error\">" + _t("Could not fetch mail.") + "</p></td></tr>\n" );
 		}
-		out.println( "<tr><td colspan=\"2\" align=\"center\"><hr></td></tr>\n</table>" );
+		out.println( "</table></div>" );
 	}
 
 	/**
@@ -2458,25 +2457,24 @@ public class WebMail extends HttpServlet
 			sz = sessionObject.folder.getPageSize();
 		else
 			sz = Config.getProperty(Folder.PAGESIZE, Folder.DEFAULT_PAGESIZE);
-		out.println("<div class=\"topbuttons\">");
+		out.println("<div class=\"topbuttons\"><b>");
 		out.println(
-			_t("Folder Page Size") + ":&nbsp;<input type=\"text\" style=\"text-align: right;\" name=\"" + PAGESIZE +
+			_t("Folder Page Size") + ":</b>&nbsp;<input type=\"text\" style=\"text-align: right;\" name=\"" + PAGESIZE +
 			"\" size=\"4\" value=\"" +  sz + "\">" +
 			"&nbsp;" + 
 			button( SETPAGESIZE, _t("Set") ) );
-		out.println("<p>");
 		out.println("</div>");
+		out.println("<h3 id=\"config\">");
 		out.print(_t("Advanced Configuration"));
 		Properties config = Config.getProperties();
-		out.print(":</p><textarea cols=\"80\" rows=\"" + Math.max(8, config.size() + 2) + "\" spellcheck=\"false\" name=\"" + CONFIG_TEXT + "\">");
+		out.print("</h3><textarea cols=\"80\" rows=\"" + Math.max(8, config.size() + 2) + "\" spellcheck=\"false\" name=\"" + CONFIG_TEXT + "\">");
 		for (Map.Entry<Object, Object> e : config.entrySet()) {
 			out.print(quoteHTML(e.getKey().toString()));
 			out.print('=');
 			out.println(quoteHTML(e.getValue().toString()));
 		}
 		out.println("</textarea>");
-		out.println("<div id=\"bottombuttons\">");
-		out.println("<br>");
+		out.println("<div id=\"prefsave\">");
 		out.println(button(SAVE, _t("Save Configuration")));
 		out.println(button(CANCEL, _t("Cancel")));
 		if (sessionObject.folder != null)
diff --git a/core/java/src/net/i2p/data/DataHelper.java b/core/java/src/net/i2p/data/DataHelper.java
index f7d50d2f668e8dfb3e8ce756aa510e98fdac298a..e4e322c8de89c64229fd217e6174b6fb9f11260d 100644
--- a/core/java/src/net/i2p/data/DataHelper.java
+++ b/core/java/src/net/i2p/data/DataHelper.java
@@ -1566,17 +1566,19 @@ public class DataHelper {
         
         DecimalFormat fmt = new DecimalFormat("##0.00");
 
+        // Replace &nbsp; with thin non-breaking space &#8239; (more consistent/predictable width between fonts & point sizes)
+
         String str = fmt.format(val);
         switch (scale) {
-            case 1: return str + "&nbsp;K";
-            case 2: return str + "&nbsp;M";
-            case 3: return str + "&nbsp;G";
-            case 4: return str + "&nbsp;T";
-            case 5: return str + "&nbsp;P";
-            case 6: return str + "&nbsp;E";
-            case 7: return str + "&nbsp;Z";
-            case 8: return str + "&nbsp;Y";
-            default: return bytes + "&nbsp;";
+            case 1: return str + "&#8239;K";
+            case 2: return str + "&#8239;M";
+            case 3: return str + "&#8239;G";
+            case 4: return str + "&#8239;T";
+            case 5: return str + "&#8239;P";
+            case 6: return str + "&#8239;E";
+            case 7: return str + "&#8239;Z";
+            case 8: return str + "&#8239;Y";
+            default: return bytes + "&#8239;";
         }
     }
     
diff --git a/core/java/src/net/i2p/kademlia/KBucketSet.java b/core/java/src/net/i2p/kademlia/KBucketSet.java
index d0d8ef3568596c9683bf5760b661e58b7c0b0043..29af4c144f19aabb127727eeb00f20df6915ba8a 100644
--- a/core/java/src/net/i2p/kademlia/KBucketSet.java
+++ b/core/java/src/net/i2p/kademlia/KBucketSet.java
@@ -765,18 +765,18 @@ public class KBucketSet<T extends SimpleDataStructure> {
     @Override
     public String toString() {
         StringBuilder buf = new StringBuilder(1024);
-        buf.append("Bucket set rooted on: ").append(_us.toString())
+        buf.append("<hr><b>Bucket set rooted on:</b> ").append(_us.toString())
            .append(" K=").append(BUCKET_SIZE)
            .append(" B=").append(B_VALUE)
            .append(" with ").append(size())
-           .append(" keys in ").append(_buckets.size()).append(" buckets:\n");
+           .append(" keys in ").append(_buckets.size()).append(" buckets:<br>\n");
         getReadLock();
         try {
             int len = _buckets.size();
             for (int i = 0; i < len; i++) {
                 KBucket<T> b = _buckets.get(i);
-                buf.append("* Bucket ").append(i).append("/").append(len).append(": ");
-                buf.append(b.toString()).append("\n");
+                buf.append("<b>Bucket ").append(i).append("/").append(len).append(":</b> ");
+                buf.append(b.toString()).append("<br>\n");
             }
         } finally { releaseReadLock(); }
         return buf.toString();
diff --git a/installer/resources/eepsite/docroot/help/index.html b/installer/resources/eepsite/docroot/help/index.html
index 61de18dc743488872462cd6a2d9bdf7623708485..813f8b4e8015c3004ed8fbee35c4d5abd21999ff 100644
--- a/installer/resources/eepsite/docroot/help/index.html
+++ b/installer/resources/eepsite/docroot/help/index.html
@@ -1,127 +1,250 @@
-<html>
- <head>
-  <title>I2P Hidden Service Website</title>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>I2P Anonymous WebServer</title>
   <link rel="shortcut icon" href="favicon.ico" />
-    <link rel="stylesheet" type="text/css" href="lib/eepsite.css" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- </head>
- <body>
-<div class="fairylights">
-<div class="main">
- <h1>I2P Hidden Service Website</h1>
-<div class="langbar">
-<!-- Some of these languages listed here are yet to be translated -->
-<a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
-<a href="index_zh.html"><img src="lib/cn.png" title="中文" alt="中文"></a>
-<a href="index_de.html"><img src="lib/de.png" title="Deutsch" alt="Deutsch"></a>
-<a href="index_es.html"><img src="lib/es.png" title="Español" alt="Español"></a>
-<a href="index_fr.html"><img src="lib/fr.png" title="Français" alt="Français"></a>
-<a href="index_na.html"><img src="lib/ir.png" title="فارسی" alt="فارسی"></a>
-<a href="index_na.html"><img src="lib/jp.png" title="日本語" alt="日本語"></a>
-<a href="index_nl.html"><img src="lib/nl.png" title="Nederlands" alt="Nederlands"></a>
-<a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
-<a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
-</div>
-<h2>Quick Guide to Anonymous Webserving on I2P</h2>
-
- <p>This is your own anonymous I2P webserver ("eepsite") - simply edit the files under <code>~/.i2p/eepsite/docroot/</code> (Linux),
- <code>%APPDATA%\I2P\eepsite\docroot\</code> (Windows),
- or <code>/Users/(user)/Library/Application Support/i2p</code> (Mac),
- and they'll be reachable by others once you follow the instructions below.
- In I2P, hidden services are addressed using a 'key', which is represented as a really long Base64 string.
- (The 'key' is somewhat analogous to an IP address, and
- is shown on the hidden service
- <a href="http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=3">configuration page</a>).
- The instructions below detail how to assign a name like "mysite.i2p" to your key and start up your website.</p>
- <p>You can reach your site locally via 
- <a href="http://127.0.0.1:7658/">http://127.0.0.1:7658/</a>.
-</p>
-
- <h2>How to set up and announce your hidden service website</h2>
- Your website is stopped by default.
- After you start it, it will be difficult for other people to find because it
- doesn't have a name and they don't have your really long Base64 key.
- You could just tell people that really long key, but thankfully I2P has an address book
- and several easy ways to tell people about your website. Here's detailed instructions.
- <ul>
- <li>Pick a name for your website (<i>something</i>.i2p). Use all lower-case.
-     You may wish to check first in your own router's address book
-     <a href="http://127.0.0.1:7657/susidns/addressbook.jsp?book=router&amp;filter=none">here</a>,
-     or the file <code>i2p/hosts.txt</code> to see if your name is already taken.
-     Enter the new name for your website on the
-     <a href="http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=3">hidden service configuration page</a>
-     where it says "Website name". This will replace the default "mysite.i2p".
-     Also, check the "Auto Start" box. Your website will now start every time you start your router.
-     Be sure to click "Save".</li>
- <li>Click the start button for your website on the
-     <a href="http://127.0.0.1:7657/i2ptunnel/index.jsp">main i2ptunnel configuration page</a>.
-     You should now see it listed under "Hidden Services and Clients" on the left side of the
-     <a href="http://127.0.0.1:7657/index.jsp">I2P Router Console</a>.
-     Your website is now running.</li>
- <li>Highlight the entire "Local destination" key on the
-     <a href="http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=3">hidden service configuration page</a>.
-     and copy it for
-     later pasting. Make sure you get the whole thing - it's over 500 characters.</li>
- <li>Enter the name and paste in the destination key into your
-     <a href="http://127.0.0.1:7657/susidns/addressbook.jsp?book=master">master address book</a>.
-     Click "Add" to add the destination to your address book.</li>
- <li>In your browser, enter in your website name (<i>something</i>.i2p) and you should
- be right back here. Hopefully it worked.</li>
- <li>Before you tell the world about your new website, you should add some content.
- Go to <code>~/.i2p/eepsite/docroot/</code> (Linux), <code>%APPDATA%\I2P\eepsite\docroot\</code> (Windows),
- or <code>/Users/(user)/Library/Application Support/i2p</code> (Mac),
- and replace the index.html redirect page with your own content. Virtual folders work, so you can host files from a sub directory without explicitly needing to provide a page with links to files. If you need a template for a basic site, feel free to borrow and adapt <a href="pagetemplate.html">this page</a> and <a href="lib/">content</a>!</li>
-</ul>
-<h2>Register your own .I2P Domain</h2><ul>
- <li>Now it's time to add your website to an I2P address book hosted by a site
-     such as <a href="http://stats.i2p/">stats.i2p</a> or <a href="http://no.i2p/">no.i2p</a>.
-     That is, you must enter
-     your website name and key into a web interface on one or more of these sites.
-     Here is <a href="http://stats.i2p/i2p/addkey.html">the key entry form at stats.i2p</a>.
-     Again, your key is the entire "Local destination" key on the
-     <a href="http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=3">hidden service configuration page</a>.
-     Be sure you get the whole thing.
-     Don't forget to click "add a key".
-     Check to see if it reports the key was added.
-     Since many routers periodically get address book updates from these sites, within several hours others will be able to find your website by simply typing <i>something</i>.i2p into their browser.</li>
-</ul><h2>Adding Addressbook Subscriptions</h2><ul>
- <li>Speaking of address book updates, this would be a good time to add some more addressbooks
-     to your own <a href="http://127.0.0.1:7657/susidns/subscriptions.jsp">subscription list</a>. Go to your subscriptions configuration page and add a couple of these for an automatically updated list of new hosts:<ul>
-     <li><a href="http://stats.i2p/cgi-bin/newhosts.txt">http://stats.i2p/cgi-bin/newhosts.txt</a></li>
-     <li><a href="http://i2host.i2p/cgi-bin/i2hostetag">http://i2host.i2p/cgi-bin/i2hostetag</a></li>
-     <li><a href="http://no.i2p/export/alive-hosts.txt">http://no.i2p/export/alive-hosts.txt</a></li></ul>
- <li>If you are in a hurry and can't wait a few hours, you can tell people to use a "jump" address helper redirection service.
-     This will work within a few minutes of your entering the key to an address book on the same site.
-     Test it yourself first by entering<code>
-     http://stats.i2p/cgi-bin/jump.cgi?a=<i>something</i>.i2p</code>
-     or <code>http://i2host.i2p/cgi-bin/i2hostjump?<i>something</i>.i2p</code>
-     into your browser.
-     Once it's working, then you can tell others to use it.</li>
- <li>Some people check website lists such as
- <a href="http://inproxy.tino.i2p/status.php">inproxy.tino.i2p/status.php</a> or <a href="http://perv.i2p">perv.i2p</a> for new eepsites, so you may start getting a few visitors. But there are plenty of other ways to tell people. Here are a few ideas:
-     <ul>
-     <li>Post a message on the <a href="http://forum.i2p/viewforum.php?f=16">Eepsite announce forum</a>
-     on <a href="http://forum.i2p/">forum.i2p</a>.</li>
-     <li>Tell people about it on the #i2p or #i2p-chat channels on IRC.</li>
-     <li>Put it in a new post on <a href="http://syndie.i2p2.de/">the new Syndie</a>.</li>
-     <li>Put it in <a href="http://ugha.i2p/EepsiteIndex">Ugha's Eepsite Index Wiki</a></li>
-     </ul>
-     Note that some sites recommend pasting in that really long destination key.
-     You can if you want - but
-     if you have successfully posted your key at an add-key service,
-     tested it using a jump service, and waited 24 hours for the
-     address book update to propagate to others, that shouldn't be necessary.</ul>
-<h2>Further Assistance</h2><ul>
-	<li>If you have any questions, the following places are available for support:
-<ul>
-<li>Our IRC support channel: <ul><li><a href="irc://irc.freenode.net/i2p">#i2p on Freenode</a></li>
-<li>Anonymously via your resident <a href="irc://127.0.0.1:6668/i2p-help">I2P IRC tunnel</a>.</li></ul>
-	<li><a href="http://forum.i2p/viewforum.php?f=10">The technical problems section</a> on
-     <a href="http://forum.i2p/">forum.i2p</a>.</li></ul>
- </ul><div class="notify">
-<b>Note:</b> This page, the website and the console all need translating into YOUR language if it's not already been done or in progress. Please consider helping the project grow by <a href="http://www.i2p2.i2p/getinvolved.html">volunteering your time</a> to translate. Contact the project via the IRC channel listed above. Thanks in advance!</div>
-<hr><div class="footnote">	
-Document last edited: November 2010.</div>
-</div></div>
- </body>
-</html>
+  <link rel="stylesheet" type="text/css" href="lib/eepsite.css" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+</head>
+
+<body>
+
+   <div class="main">
+
+   <div class="langbar">
+      <!-- Some of these languages listed here are yet to be translated -->
+      <a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
+      <a href="index_zh.html"><img src="lib/cn.png" title="中文" alt="中文"></a>
+      <a href="index_de.html"><img src="lib/de.png" title="Deutsch" alt="Deutsch"></a>
+      <a href="index_es.html"><img src="lib/es.png" title="Español" alt="Español"></a>
+      <a href="index_fr.html"><img src="lib/fr.png" title="Français" alt="Français"></a>
+      <a href="index_na.html"><img src="lib/ir.png" title="فارسی" alt="فارسی"></a>
+      <a href="index_na.html"><img src="lib/jp.png" title="日本語" alt="日本語"></a>
+      <a href="index_nl.html"><img src="lib/nl.png" title="Nederlands" alt="Nederlands"></a>
+      <a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
+      <a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
+    </div>
+
+    <h1>I2P Anonymous Webserver</h1>
+
+    <h2>Quick Guide to Anonymous Webserving on I2P</h2>
+
+    <p>This is your own anonymous I2P webserver ("eepsite"). To serve your own content, simply edit the files in the webserver's
+      root directory and they'll be reachable by others once you follow the instructions below.
+    </p>
+
+    <p>The webserver's root directory can be found in the following location:
+    </p>
+
+    <ul>
+      <li><code>~/.i2p/eepsite/docroot/</code> <b>(Linux)</b>
+      </li>
+      <li><code>%APPDATA%\I2P\eepsite\docroot\</code> <b>(Windows)</b>
+      </li>        
+      <li><code>/Users/(user)/Library/Application Support/i2p</code> <b>(Mac)</b>
+      </li>
+    </ul>
+
+    <p>In I2P, hidden services are addressed using a 'key', which is represented as a really long 
+      <a href="https://en.wikipedia.org/wiki/Base64" target="_blank">Base64</a> string. (The 'key'
+      is somewhat analogous to an IP address, and is shown on the 
+      <a href="http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=3">Hidden Service Configuration page</a>).
+    </p>
+
+    <p>The instructions below detail how to assign a name like "mysite.i2p" to your key and start up your website. You can
+      reach your site locally via <a href="http://127.0.0.1:7658/">http://127.0.0.1:7658/</a>.
+    </p>
+
+    <h2>How to set up and announce your hidden service website</h2>
+
+    <p>Your website is stopped by default. After you start it, it will be difficult for other people to find because it
+      doesn't have a name and they don't have your really long Base64 key. You could just tell people that really long
+      key, but thankfully I2P has an address book and several easy ways to tell people about your website. Here's detailed
+      instructions.
+    </p>
+
+    <ul>
+      <li>Pick a name for your website (<i>something</i>.i2p). Use all lower-case. You may wish to check first in your own
+         router's address book
+         <a href="http://127.0.0.1:7657/susidns/addressbook.jsp?book=router&amp;filter=none">here</a>, or the file
+         <code>i2p/hosts.txt</code> to see if your name is already taken. Enter the new name for your website on the
+         <a href="http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=3">Hidden Service Configuration page</a> where it says
+         "Website name". This will replace the default "mysite.i2p". Also, check the "Auto Start" box. Your website will
+         now start every time you start your router. Be sure to click "Save".
+      </li>
+      <li>Click the start button for your website on the
+         <a href="http://127.0.0.1:7657/i2ptunnel/index.jsp">main Hidden Service Manager page</a>. You should now see
+         it listed under "Local Tunnels" on the left side of the
+         <a href="http://127.0.0.1:7657/index.jsp">I2P Router Console</a>. Your website is now running.
+      </li>
+      <li>Highlight the entire "Local destination" key on the
+         <a href="http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=3">Hidden Service Configuration page</a>. and copy it
+         for later pasting. Make sure you get the whole thing - it's over 500 characters.
+      </li>
+      <li>Enter the name and paste in the destination key into your
+         <a href="http://127.0.0.1:7657/susidns/addressbook.jsp?book=master">master address book</a>. Click "Add" to add
+         the destination to your address book.
+      </li>
+      <li>In your browser, enter in your website name (<i>something</i>.i2p) and you should be right back here. Hopefully
+         it worked.
+      </li>
+      <li>Before you tell the world about your new website, you should add some content. Go to the following directory and 
+         replace the index.html redirect page with your own content:
+         <ul>
+           <li><code>~/.i2p/eepsite/docroot/</code> <b>(Linux)</b>
+           </li>
+           <li><code>%APPDATA%\I2P\eepsite\docroot\</code> <b>(Windows)</b>
+           </li>
+           <li><code>/Users/(user)/Library/Application Support/i2p</code> <b>(Mac)</b>
+           </li>
+           </ul>
+      </li>
+    </ul>            
+
+    <p>Virtual folders work, so you can host files from a sub directory without explicitly needing to provide a page 
+      with links to files. You can change the appearance of the directory listing by supplying an edited jetty-dir.css file 
+      for each of the directories you are serving, demonstrated <a href="lib/">here</a>. The 
+      <a href="lib/resources">resources sub-directory</a> (containing filetype images for the directory listing) 
+      reverts to the default style. If you need a template for a basic site, feel free to borrow and adapt 
+      <a href="pagetemplate.html">this page</a> and <a href="lib/">content</a>!
+    </p>
+
+    <p>If you're returned to this page after editing the content, try clearing your browser's web cache:</p>
+
+    <ul>
+      <li>in <b>Firefox</b> via: Preferences ➜ Advanced ➜ Network ➜ Cached Web Content ➜ Clear Now</li>
+      <li>in <b>Chrome/Chromium</b> via: Settings ➜ Advanced Settings ➜ Privacy ➜ Clear browsing data...</li>
+      <li> in <b>Opera</b> via: Settings ➜ Privacy ➜ Clear browsing data...
+    </ul>
+
+    <h2>Register your own .I2P Domain</h2>
+
+    <p>Now it's time to add your website to an I2P address book hosted by a site such as 
+      <a href="http://stats.i2p/ " target="_blank">stats.i2p</a>
+      or <a href="http://no.i2p/" target="_blank">no.i2p</a>. That is, you must enter your website name and key into a web interface
+      on one or more of these sites. Here is <a href="http://stats.i2p/i2p/addkey.html" target="_blank">the key entry form</a> at stats.i2p.
+      Again, your key is the entire "Local destination" key on the
+      <a href="http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=3">Hidden Service Configuration page</a>. Be sure you
+      get the whole thing. Don't forget to click "add a key". Check to see if it reports the key was added. Since many
+      routers periodically get address book updates from these sites, within several hours others will be able to find
+      your website by simply typing <i>something</i>.i2p into their browser.</p>
+    <h2>Adding Addressbook Subscriptions</h2>
+
+    <p>Speaking of address book updates, this would be a good time to add some more addressbooks to your own
+          subscription list. Go to your <a href="http://127.0.0.1:7657/susidns/subscriptions.jsp">Subscriptions Configuration
+          page</a> and add a couple of these for an automatically updated list of new hosts:
+    </p>
+
+    <ul>
+      <li><code>http://stats.i2p/cgi-bin/newhosts.txt</code> (<a href="http://stats.i2p/cgi-bin/newhosts.txt" target="_blank">stats.i2p</a>)
+      </li>
+      <li><code>http://i2host.i2p/cgi-bin/i2hostetag</code> (<a href="http://i2host.i2p/cgi-bin/i2hostetag" target="_blank">i2host.i2p</a>)
+      </li>
+      <li><code>http://no.i2p/export/alive-hosts.txt</code> (<a href="http://no.i2p/export/alive-hosts.txt" target="_blank">no.i2p</a>)
+      </li>
+    </ul>
+    
+    <p>If you are in a hurry and can't wait a few hours, you can tell people to use a "jump" address helper redirection
+      service. This will work within a few minutes of your entering the key to an address book on the same site. Test
+      it yourself first by entering <code>http://stats.i2p/cgi-bin/jump.cgi?a=<i>something</i>.i2p</code> or 
+      <code>http://i2host.i2p/cgi-bin/i2hostjump?<i>something</i>.i2p</code> into your browser. 
+      Once it's working, you can tell others to use it.
+    </p>
+<!--
+        <p>Some people check website lists such as <a href="http://inproxy.tino.i2p/status.php">inproxy.tino.i2p/status.php</a>
+          or <a href="http://perv.i2p">perv.i2p</a> for new eepsites, so you may start getting a few visitors. But there
+          are plenty of other ways to tell people. Here are a few ideas:</p>
+-->
+
+    <p>Some people check website lists such as <a href="http://identiguy.i2p/" target="_blank">Identiguy's eepsite status list</a>
+      or <a href="http://no.i2p/browse/" target="_blank">no.i2p's active host list</a> for new eepsites, so you may start getting a few 
+      visitors. But there are plenty of other ways to tell people. Here are a few ideas:
+    </p>
+
+    <ul>
+      <li>Post a message on the <a href="http://forum.i2p/viewforum.php?f=16" target="_blank">Eepsite announce forum</a> on
+        <a href="http://forum.i2p/" target="_blank">forum.i2p</a>.
+      </li>
+      <li>Tell people about it on the #i2p or #i2p-chat channels on IRC.
+      </li>
+      <li>Put it in a new post on <a href="http://syndie.i2p2.de/" target="_blank">the new Syndie</a>.
+      </li>
+      <li>Put it on <a href="http://ugha.i2p/EepsiteIndex" target="_blank">Ugha Wiki's Eepsite Index</a>
+      </li>
+    </ul>
+
+    <p>Note that some sites recommend pasting in that really long destination key. You can if you want - but if you have
+      successfully posted your key at an add-key service, tested it using a jump service, and waited 24 hours for the
+      address book update to propagate to others, that shouldn't be necessary.</p>
+
+    <h2>Using an alternative webserver to host your site</h2>
+
+    <p>This site (and the I2P router console) is running on the 
+      <a href="https://en.wikipedia.org/wiki/Jetty_(web_server)" target="_blank">Jetty webserver</a>, 
+      but you may want to use a different webserver to host your content. 
+      To maintain anonymity, be sure that your webserver is configured to only allow connections from localhost (127.0.0.1), 
+      and check the documentation to ensure your webserver isn't advertising details that may compromise your anonymity.
+    </p>
+
+     <p>To configure your webserver for use on I2P, you can either use the existing webserver tunnel and 
+       <a href="http://127.0.0.1:7657/configclients">disable the default webserver</a> from running, 
+       or create a new HTTP Server tunnel in the <a href="http://127.0.0.1:7657/i2ptunnelmgr">Hidden Services Manager</a>.
+       Whatever you choose, you need to make sure the listening port configured for the webserver (7658 by default for the I2P webserver
+       Jetty instance) is also configured in the Hidden Services Webserver settings. So, for example if your webserver is listening 
+       by default on address 127.0.0.1 port 80, you'd need to also ensure that the Target port in the Hidden Service Manager settings page
+       for the service is also configured to port 80. 
+        </p> 
+
+        <p>Please be aware that a poorly configured webserver or web appplication can leak potentially compromising information such as 
+          your real ip address or server details that may reduce your anonymity or assist a hacker, which is why it's recommended to use the
+          default server until you're up to speed on securing your alternative server and any webapps you may be running, 
+          for which there are many guides on the internet. The following may be of help:
+        </p>
+
+        <ul>
+           <li><a href="https://geekflare.com/apache-web-server-hardening-security/" target="_blank">Apache Web Server Hardening 
+              & Security Guide</a>
+           </li>
+           <li><a href="https://geekflare.com/nginx-webserver-security-hardening-guide/" target="_blank">Nginx Web Server Security 
+              & Hardening Guide</a>
+           </li>
+           <li><a href="https://www.wordfence.com/learn/how-to-harden-wordpress-sites/" target="_blank">How to Harden Your WordPress
+              Site From Attacks</a></li>
+        </ul>         
+
+        <h2>Further Assistance</h2>
+
+        <p>If you have any questions, the following places are available for support:
+        </p>
+
+        <ul>
+          <li>Our IRC support channel:
+             <ul>
+                <li><a href="irc://irc.freenode.net/i2p">#i2p on Freenode</a>
+                </li>
+                <li>Anonymously via your resident <a href="irc://127.0.0.1:6668/i2p-help">I2P IRC tunnel</a>.</li>
+             </ul>
+            <li><a href="http://forum.i2p/viewforum.php?f=10" target="_blank">The technical problems section</a> on
+              <a href="http://forum.i2p/" target="_blank">forum.i2p</a>.
+            </li>
+            <li><a href="http://ugha.i2p/EepsiteHosting" target="_blank">Ugha Wiki's Eepsite Hosting guide</a> or
+              <a href="http://i2pwiki.i2p/index.php?title=EepsiteHosting" target="_blank">I2PWiki's Eepsite Hosting guide</a>
+            </li>
+        </ul>
+
+        <div class="notify">
+          <b>Note:</b> This page, the website and the console all need translating into YOUR language if it's not already
+          been done or in progress. Please consider helping the project grow by <a href="http://www.i2p2.i2p/getinvolved.html" target="_blank">
+          volunteering your time</a> to <a href="http://i2p-projekt.i2p/en/get-involved/guides/new-translators" target="_blank">translate</a>. Contact the project via the IRC channel listed above. Thanks in advance!
+        </div>
+       
+        <hr>
+
+        <div class="footnote">
+          Document last edited: July 2016.
+       </div>
+
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/installer/resources/eepsite/docroot/help/index_de.html b/installer/resources/eepsite/docroot/help/index_de.html
index 476e4d7a99e5ef9e54589e4ca50d34ec6861667e..381549407e2844350f0b18c7c91b3ee41cbb60fd 100644
--- a/installer/resources/eepsite/docroot/help/index_de.html
+++ b/installer/resources/eepsite/docroot/help/index_de.html
@@ -1,15 +1,10 @@
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-<html><head>
-
-  
+<html lang="de"><head>
     <title>Anonymer Webserver im I2P | Willkommen auf Ihrer Eepseite!</title>
-    <meta name="generator" content="muse.el">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link rel="stylesheet" type="text/css" href="lib/eepsite.css">
   </head><body>
-<div class="fairylights">
 <div class="main">
-    <h1>Anonymer Webserver im I2P</h1>
 <div class="langbar">
 <!-- Some of these languages listed here are yet to be translated -->
 <a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
@@ -22,9 +17,10 @@
 <a href="index_nl.html"><img src="lib/nl.png" title="Nederlands" alt="Nederlands"></a>
 <a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
 <a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
-
 </div>
 
+    <h1>Anonymer Webserver im I2P</h1>
+
 <h2>Kurzanleitung zum anonymen Hosten von Webseiten in I2P</h2>
 <p>Dies ist Ihre <strong>Eepseite</strong>, Ihre Web-Präsens im I2P. Editieren Sie einfach die Dateien unter 
 <code>~/.i2p/eepsite/docroot/</code> (Linux),
diff --git a/installer/resources/eepsite/docroot/help/index_es.html b/installer/resources/eepsite/docroot/help/index_es.html
index 1fcd8a9da128664755b11e4d799737ef63c39528..cb4f152c21aab3d95f9235565bc61b237a572623 100644
--- a/installer/resources/eepsite/docroot/help/index_es.html
+++ b/installer/resources/eepsite/docroot/help/index_es.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="es">
  <head>
   <title>Servidor web anónimo I2P| Bienvenido a tu eepsite</title>
   <link rel="shortcut icon" href="favicon.ico" />
@@ -6,9 +7,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
-<div class="fairylights">
 <div class="main">
- <h1>Servidor web anónimo I2P</h1>
 <div class="langbar">
 <!-- Some of these languages listed here are yet to be translated -->
 <a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
@@ -22,7 +21,8 @@
 <a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
 <a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
 </div>
-<h2>Guía rápida para crear el servidor web en I2P</h2>
+ <h1>Servidor web anónimo I2P</h1>
+ <h2>Guía rápida para crear el servidor web en I2P</h2>
  <p>Esta es tu eepsite, tu propio servidor web anónimo en I2P - simplemente edita los archivos dentro de <code>~/.i2p/eepsite/docroot/</code> (en Linux),
  <code>%APPDATA%\I2P\eepsite\docroot\</code> (en Windows),
  o <code>/Users/(user)/Library/Application Support/i2p</code> (en Mac),
@@ -36,12 +36,12 @@
 </p>
 
  <h2>Cómo configurar y anunciar tu eepsite</h2>
- Tu eepsite por defecto está apagada.
+ <p>Tu eepsite por defecto está apagada.
  Después de arrancarla será difícil que otras personas la encuentren porque
  no tiene un nombre y porque ellos no tienen la clave Base64.
  Podrías simplemente decir a la gente tu clave Base64, pero afortunadamente I2P tiene
  una libreta de direcciones y varias formas fáciles de indicar a la gente como alcanzar tu eepsite.
- Aquí están las instrucciones detalladas.
+ Aquí están las instrucciones detalladas.</p>
  <ul>
  <li>Selecciona un nombre para tu eepsite (<i>algo</i>.i2p). Usa sólo minúsculas.
      Deberías comprobar primero si el nombre ya existe en tu libreta de direcciones
@@ -65,18 +65,17 @@
      <a href="http://127.0.0.1:7657/susidns/addressbook.jsp?book=master">libreta de direcciones maestras</a>.
      Pulsa "Add/Añadir" para añadir la destinación a tu libreta de direcciones.</li>
  <li>Escribe el nombre de la eepsite en tu navegador (<i>algo</i>.i2p) y deberías
- verla inmediatamente.</li>
- <li>Antes de anunciar tu nueva eepsite al mundo, deberías añadir contenido.
+ verla inmediatamente.</li></ul>
+ <p>Antes de anunciar tu nueva eepsite al mundo, deberías añadir contenido.
  Ves a <code>~/.i2p/eepsite/docroot/</code> (en Linux),
  <code>%APPDATA%\I2P\eepsite\docroot\</code> (en Windows),
  o <code>/Users/(user)/Library/Application Support/i2p</code> (en Mac),
  y reemplaza la página de redirección index.html con tu contenido. Las carpetas virtuales funcionan, por lo que puedes hospedar 
  archivos desde un subdirectorio sin la necesidad de proveer explícitamente una página con enlaces a los archivos.
  Si necesitas una plantilla para una web básica, puedes utilizar y adaptar <a href="pagetemplate.html">esta página</a>
- y <a href="lib/">su contenido</a></li>
-</ul>
-<h2>Registra tu propio dominio .I2P</h2><ul>
- <li>Ahora es el momento de añadir tu eepsite a una libreta de direcciones de I2P
+ y <a href="lib/">su contenido</a>.</p>
+<h2>Registra tu propio dominio .I2P</h2>
+ <p>Ahora es el momento de añadir tu eepsite a una libreta de direcciones de I2P
      alojada en una web como <a href="http://stats.i2p/">stats.i2p</a>.
      Debes ingresar el nombre de tu eepsite y la clave en una o más de estas webs.
      Aquí tienes <a href="http://stats.i2p/i2p/addkey.html">el formulario en stats.i2p</a>.
@@ -86,27 +85,26 @@
      No olvides en pulsar "add a key/añadir una clave".
      Comprueba que ha indicado que la clave ha sido añadida.
      Ya que muchos ruters periódicamente obtienen las direcciones de estas webs, en unas cuantas horas
-     otros usuarios serán capaces de encontrar tu eepsite simplemente escribiendo <i>algo</i>.i2p en sus navegadores.</li>
-</ul>
-<h2>Añadiendo suscripciones a otras libretas de direcciones</h2><ul>
- <li>Ya que hablamos de las actualizaciones de las libretas de direcciones, este es buen 
+     otros usuarios serán capaces de encontrar tu eepsite simplemente escribiendo <i>algo</i>.i2p en sus navegadores.</p>
+<h2>Añadiendo suscripciones a otras libretas de direcciones</h2>
+ <p>Ya que hablamos de las actualizaciones de las libretas de direcciones, este es buen 
      momento para añadir más libretas de direcciones a tu propia 
      <a href="http://127.0.0.1:7657/susidns/subscriptions.jsp">lista de suscripciones</a>.
      Ves a tu página de configuración de suscripciones y añade algunas de estas para la
-     actualización automática de nuevas eepsites:<ul>
+     actualización automática de nuevas eepsites:</p><ul>
      <li><a href="http://tino.i2p/hosts.txt">http://tino.i2p/hosts.txt</a></li>
      <li><a href="http://stats.i2p/cgi-bin/newhosts.txt">http://stats.i2p/cgi-bin/newhosts.txt</a></li>
      <li><a href="http://i2host.i2p/cgi-bin/i2hostetag">http://i2host.i2p/cgi-bin/i2hostetag</a></li></ul>
- <li>Si tienes prisa y no puedes esperar unas horas, puedes decir a la gente que use los servicios de ayuda de
+ <p>Si tienes prisa y no puedes esperar unas horas, puedes decir a la gente que use los servicios de ayuda de
      redirección "saltos/jump".
      Esto hará que funcione en unos minutos tras haber incluido la clave en la libreta de direcciones de 
      dicha web. Puedes probarlo tu mismo escribiendo <code>http://stats.i2p/cgi-bin/jump.cgi?a=<i>algo</i>.i2p</code>
      o <code>http://i2host.i2p/cgi-bin/i2hostjump?<i>algo</i>.i2p</code> en tu navegador.
-     Una vez que ya funcione ya puedes avisar a otros para que lo utilicen.</li>
- <li>Algunas personas comprueban listas de eepsites como
+     Una vez que ya funcione ya puedes avisar a otros para que lo utilicen.</p>
+ <p>Algunas personas comprueban listas de eepsites como
  <a href="http://inproxy.tino.i2p/status.php">inproxy.tino.i2p/status.php</a> o <a href="http://perv.i2p">perv.i2p</a> en busca 
      de nuevas eepsites, con lo cual puede ser que empiece a visitarla gente.
-     Pero hay muchas otras formas de avisar a la gente. Aquí tienes unas cuantas ideas:</li>
+     Pero hay muchas otras formas de avisar a la gente. Aquí tienes unas cuantas ideas:</p>
      <ul>
      <li>Escribe un mensaje en el <a href="http://forum.i2p/viewforum.php?f=16">foro de anuncio de Eepsites</a>
      en <a href="http://forum.i2p/">forum.i2p</a>.</li>
@@ -114,24 +112,24 @@
      <li>Escribe una nueva entrada en <a href="http://syndie.i2p2.de/">el nuevo Syndie</a>.</li>
      <li>Escribe en la <a href="http://ugha.i2p/EepsiteIndex">Wiki de Ugha</a></li>
      </ul>
-     Date cuenta que algunas webs recomiendan pegar esa clave de destino Base64 larga.
+     <p>Date cuenta que algunas webs recomiendan pegar esa clave de destino Base64 larga.
      Pero si has conseguido poner tu clave en un servicio 'add-key/añadido-de-clave', haberla probado
      usando un servicio de 'salto', y esperado 24 horas para que se propague por
-     las libretas de direcciones de otros, esto no debería ser necesario.</ul>
-<h2>Más ayuda</h2><ul>
-    <li>Si tienes alguna pregunta, puedes mirar en los siguientes sitios para obtener ayuda:</li>
+     las libretas de direcciones de otros, esto no debería ser necesario.</p>
+<h2>Más ayuda</h2>
+    <p>Si tienes alguna pregunta, puedes mirar en los siguientes sitios para obtener ayuda:</p>
 <ul>
 <li>Nuestro canal de soporte en el IRC: <ul><li><a href="irc://irc.freenode.net/i2p">#i2p en Freenode</a></li>
 <li>Anónimamente a través de nuestro <a href="irc://127.0.0.1:6668/i2p-help">túnel de IRC en I2P</a>.</li></ul>
 	<li><a href="http://forum.i2p/viewforum.php?f=10">La sección de problemas técnicos</a> en
      <a href="http://forum.i2p/">forum.i2p</a>.</li></ul>
- </ul><div class="notify">
+<div class="notify">
 <b>Nota:</b> Esta web y la consola necesitan ser traducidas a TU idioma si esto no ha sido sido hecho ya
    o está en progreso de traducirse. Por favor, considere ayudar al crecimiento del proyecto
    <a href="http://www.i2p2.i2p/getinvolved.html">ayudando</a> a traducir. Contacta con el proyecto a través 
    del canal de IRC mostrado más abajo. ¡Gracias!</div>
 <hr><div class="footnote">	
 Documento editado por última vez en: Noviembre del 2010.</div>
-</div></div>
+</div>
  </body>
 </html>
diff --git a/installer/resources/eepsite/docroot/help/index_fr.html b/installer/resources/eepsite/docroot/help/index_fr.html
index 5c609155402874c4cc0e2443903e77080241eb90..6def27692cb27ba419bbd6741bfa9cd15cc199cd 100644
--- a/installer/resources/eepsite/docroot/help/index_fr.html
+++ b/installer/resources/eepsite/docroot/help/index_fr.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="fr">
  <head>
   <title>I2P serveur web anonyme | Bienvenue à votre eepsite</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
@@ -6,9 +7,7 @@
     <link rel="stylesheet" type="text/css" href="lib/eepsite.css" />
  </head>
  <body>
-<div class="fairylights">
 <div class="main">
- <h1>Serveur web anonyme I2P</h1>
 <div class="langbar">
 <!-- Some of these languages listed here are yet to be translated -->
 <a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
@@ -21,8 +20,9 @@
 <a href="index_nl.html"><img src="lib/nl.png" title="Nederlands" alt="Nederlands"></a>
 <a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
 <a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
-</div>
-<h2>Guide rapide pour faire un serveur web anonyme dans I2P</h2>
+</div> 
+ <h1>Serveur web anonyme I2P</h1>
+ <h2>Guide rapide pour faire un serveur web anonyme dans I2P</h2>
 
  <p>Ceci est votre eepsite, fonctionnant sur votre propre serveur web anonyme I2P. Pour le modifier, il suffit d'éditer les fichiers dans <code>~/.i2p/eepsite/docroot/</code> (Linux),
  <code>%APPDATA%\I2P\eepsite\docroot\</code> (Windows),
@@ -36,11 +36,11 @@
 </p>
 
  <h2>Comment configurer et annoncer votre eepsite</h2>
- Votre eepsite est par défaut arrêté. 20
+ <p>Votre eepsite est par défaut arrêté.
  Après que vous l'ayez lancé, il sera difficile à trouver par les autres gens, car ils n'a pas de nom et les gens n'ont pas votre longue clé Base64.
  
  Vous pourriez simplement distribuer manuellement aux gens cette longue clé, mais heureusement I2P a un carnet d'adresses 
- et plusieurs manières faciles de faire connaitre votre eepsite. Voici les instructions détaillées :
+ et plusieurs manières faciles de faire connaitre votre eepsite. Voici les instructions détaillées:</p>
  <ul>
  <li>Choissisez un nom pour votre eepsite (<i>quelquechose</i>.i2p). N'utilisez que des minuscules.
      D'abord, vérifiez dans le carnet d'adresse de votre routeur
@@ -71,8 +71,8 @@
  ou <code>/Users/(user)/Library/Application Support/i2p</code> (Mac), et remplacez la page index.html avec votre propre page. Les dossiers virtuels fonctionnent, 
  donc vous pouvez héberger un sous-dossier sans explicitement ajouter des liens vers des fichiers. Si vous avez besoin d'un gabarit pour un site de base, n'hésitez pas à utiliser et à changer <a href="pagetemplate.html">cette page</a> et <a href="lib/">contenu</a>!</li>
 </ul>
-<h2>Enregistrer votre propre domaine .I2P</h2><ul>
- <li>Maintenant il est temps d'ajouter votre eepsite à un carnet d'adresses hébergé par un site 
+<h2>Enregistrer votre propre domaine .I2P</h2>
+ <p>Maintenant il est temps d'ajouter votre eepsite à un carnet d'adresses hébergé par un site 
      tel que <a href="http://stats.i2p/">stats.i2p</a> ou <a href="http://no.i2p/">no.i2p</a>.
      C'est-à-dire que vous devez entrer
      le nom de votre eepsite et sa clé dans l'interface web d'un ou plus de ces sites. 
@@ -83,26 +83,26 @@
      Prenez toute la clé.
      N'oubliez pas de cliquer sur le bouton de validation (ex: "submit").
      Vérifiez que le site montre que la clé a été correctement ajoutée.
-     Sachant que beaucoup de routeurs récupèrent périodiquement des mises à jour de carnets d'adresses depuis ces sites, en quelques heures d'autres utilisateurs seront capables de trouver et d'accéder à votre eepsite simplement en tapant <i>quelquechose</i>.i2p dans leurs navigateurs web.</li>
-</ul><h2>Comment ajouter des abonnements de carnets d'adresses</h2><ul>
- <li>En parlant de mises à jour de carnets d'adresses, ce serait un bon moment pour ajouter quelques carnets d'adresses 
+     Sachant que beaucoup de routeurs récupèrent périodiquement des mises à jour de carnets d'adresses depuis ces sites, en quelques heures d'autres utilisateurs seront capables de trouver et d'accéder à votre eepsite simplement en tapant <i>quelquechose</i>.i2p dans leurs navigateurs web.</p>
+<h2>Comment ajouter des abonnements de carnets d'adresses</h2>
+ <p>En parlant de mises à jour de carnets d'adresses, ce serait un bon moment pour ajouter quelques carnets d'adresses 
  à votre <a href="http://127.0.0.1:7657/susidns/subscriptions.jsp">liste de souscriptions.</a> Allez sur la page appropriée afin d'en a
- jouter quelques uns listés ci-dessous afin que votre liste d'hôtes soit mise à jour automatiquement :</li><ul>
+ jouter quelques uns listés ci-dessous afin que votre liste d'hôtes soit mise à jour automatiquement:</p><ul>
 	 <li><a href="http://tino.i2p/hosts.txt">http://tino.i2p/hosts.txt</a></li>
 	 <li><a href="http://stats.i2p/cgi-bin/newhosts.txt">http://stats.i2p/cgi-bin/newhosts.txt</a></li>
 	 <li><a href="http://i2host.i2p/cgi-bin/i2hostetag">http://i2host.i2p/cgi-bin/i2hostetag</a></li>
 	 <li><a href="http://no.i2p/export/alive-hosts.txt">http://no.i2p/export/alive-hosts.txt</a></li></ul>
- <li>Si vous êtes pressé et que vous ne pouvez pas attendre quelques heures, vous pouvez demander aux gens d'utiliser une adresse de service de saut (jump service, service d'aide à la re-direction d'adresse).
+ <p>Si vous êtes pressé et que vous ne pouvez pas attendre quelques heures, vous pouvez demander aux gens d'utiliser une adresse de service de saut (jump service, service d'aide à la re-direction d'adresse).
      Cela marchera en quelques minutes après que vous ayez entré votre clé dans le carnet d'adresses du même site.
-     Testez-le vous-même en entrant : <code>
+     Testez-le vous-même en entrant: <code>
      http://stats.i2p/cgi-bin/jump.cgi?a=<i>que
  lquechose</i>.i2p</code>
      ou <code>http://i2host.i2p/cgi-bin/i2hostjump?<i>quelquechose</i>.i2p</code>
      dans votre navigateur web.
-     Dès que cela fonctionnera, vous pourrez en informer les gens.</li>
- <li>Certains personnes s'informent des nouveaux eepsites sur des listes telles que
+     Dès que cela fonctionnera, vous pourrez en informer les gens.</p>
+ <p>Certains personnes s'informent des nouveaux eepsites sur des listes telles que
      <a href="http://inproxy.tino.i2p/status.php">inproxy.tino.i2p/status.php</a> ou <a href="http://perv.i2p">perv.i2p</a>, c'est pourquoi vous pourriez commencer à avoir
-     quelques visiteurs. Mais il y a beaucoup d'autres manières d'informer les gens. Voici quelques idées :
+     quelques visiteurs. Mais il y a beaucoup d'autres manières d'informer les gens. Voici quelques idées:</p>
      <ul>
      <li>Poster un message sur le <a href="http://forum.i2p/viewforum.php?f=16">Eepsite announce forum</a> (forum d'annonce d'eepsite)
      situé sur <a href="http://forum.i2p/">forum.i2p</a>.</li>
@@ -111,21 +111,21 @@
  dans Syndie</a>.</li>
      <li>L'ajouter dans <a href="http://ugha.i2p/EepsiteIndex">Ugha's Eepsite Index Wiki</a></li>
      </ul>
-     Notez que certains sites recommandent de coller la longue clé de destination. Vous pouvez si vous voulez, 
+     <p>Notez que certains sites recommandent de coller la longue clé de destination. Vous pouvez si vous voulez, 
      mais si vous avez déjà réussi à poster la clé sur un service d'ajout de clé (type stats.i2p) et attendu 24 heures afin que la mise à jour de carnet d'adresses
-     se propage aux autres gens, cela ne devrait pas être nécessaire. </ul>
-<h2>Obtenir davantage d'assistance</h2><ul>
-	<li>Si vous avez d'autres questions, trouvez du soutien à ces endroits :
+     se propage aux autres gens, cela ne devrait pas être nécessaire.</p>
+<h2>Obtenir davantage d'assistance</h2>
+	<p>Si vous avez d'autres questions, trouvez du soutien à ces endroits:</p>
 <ul>
-	<li>Notre canal IRC de soutien : <ul><li><a href="irc://irc.freenode.net/i2p">#i2p sur Freenode</a></li>
+	<li>Notre canal IRC de soutien: <ul><li><a href="irc://irc.freenode.net/i2p">#i2p sur Freenode</a></li>
 		<li>Anonymement via votre <a href="irc://127.0.0.1:6668/i2p">tunnel IRC I2P</a>.</li></ul>
      <li><a href="http://forum.i2p/viewforum.php?f=10">Section Technical problems</a> dans
   
     <a href="http://forum.i2p/">forum.i2p</a>.</li></ul>
- </ul><div class="notify">
+ <div class="notify">
 <b>Note:</b> cette page, le site web, et la console, ont tous besoin de traductions dans VOTRE langue si ce n'est pas encore fait ni en cours. Veuillez envisager d'aider le projet à grandir en <a href="http://www.i2p2.i2p/getinvolved.html">donnant volontairement de votre temps</a> pour la traduction. Contactez le projet via le canal IRC listé ci-dessus. Merci par avance !</div>
 <hr><div class="footnote">	
 Document dernièrement édité: Mai 2014.</div>
-</div></div>
+</div>
  </body>
 </html>
diff --git a/installer/resources/eepsite/docroot/help/index_na.html b/installer/resources/eepsite/docroot/help/index_na.html
index 06da52e8960e37731928a713d8e406869144b4bb..f3d829d614871b803bd4aeb9125e482cd2541763 100644
--- a/installer/resources/eepsite/docroot/help/index_na.html
+++ b/installer/resources/eepsite/docroot/help/index_na.html
@@ -1,13 +1,13 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
  <head>
   <title>I2P Anonymous Webserver | I'm a non-translated welcome page</title>
   <link rel="shortcut icon" href="favicon.ico" />
-    <link rel="stylesheet" type="text/css" href="lib/eepsite.css" />
+  <link rel="stylesheet" type="text/css" href="lib/eepsite.css" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
-<div class="fairylights">
 <div class="main">
- <h1>I2P Anonymous Webserver</h1>
 <div class="langbar">
 <!-- Some of these languages listed here are yet to be translated -->
 <a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
@@ -21,6 +21,7 @@
 <a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
 <a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
 </div>
+ <h1>I2P Anonymous Webserver</h1>
 <h2>Help translate this page into your language!</h2>
 <div class="notify">
 If you're viewing this page and not an actual translation of the welcome page into your
@@ -36,7 +37,6 @@ Please visit our IRC support channel via <a href="irc://irc.freenode.net/i2p">#i
 anonymously via your resident <a href="irc://127.0.0.1:6668/i2p">I2P IRC tunnel</a> for more information.</div> 
 <hr><div class="footnote">	
 Document last edited: November 2009.</div>
-</div>
 </div>
  </body>
 </html>
diff --git a/installer/resources/eepsite/docroot/help/index_nl.html b/installer/resources/eepsite/docroot/help/index_nl.html
index f2a96e7b04deba3e9c09e8eca4d4678feb7f2034..a9eda0f0f837c670f86741c496a6d099cf5a86fe 100644
--- a/installer/resources/eepsite/docroot/help/index_nl.html
+++ b/installer/resources/eepsite/docroot/help/index_nl.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="nl">
  <head>
   <title>I2P Anonieme Webserver | Welkom op je eepsite</title>
   <link rel="shortcut icon" href="favicon.ico" />
@@ -6,9 +7,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
-<div class="fairylights">
 <div class="main">
- <h1>I2P Anonieme Webserver</h1>
 <div class="langbar">
 <!-- Some of these languages listed here are yet to be translated -->
 <a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
@@ -22,7 +21,8 @@
 <a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
 <a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
 </div>
-<h2>Korte Handleiding voor Anoniem Webhosten op I2P</h2>
+ <h1>I2P Anonieme Webserver</h1>
+ <h2>Korte Handleiding voor Anoniem Webhosten op I2P</h2>
 
  <p>Dit is je eepsite, je eigen anonieme I2P webserver - pas de bestanden onder <code>~/.i2p/eepsite/docroot/</code> (Linux),
  <code>%APPDATA%\I2P\eepsite\docroot\</code> (Windows),
@@ -38,12 +38,12 @@
 </p>
 
  <h2>Hoe je eepsite op te zetten en aan te kondigen</h2>
- Je eepsite is standaard gestopt. 
+ <p>Je eepsite is standaard gestopt. 
  Nadat je tunnel voor je eepsite start, zullen anderen je site nog niet kunnen vinden
  want het heeft nog geen naam en ze hebben je erg lange Base64 destination nog niet.
  Je zou deze lange destination aan iedereen kunnen vertellen, maar gelukkig heeft
  i2p een adresboek en verschillende eenvoudige manieren om anderen over je eepsite te
- vertellen. Hier zijn de gedetailleerde instructies.
+ vertellen. Hier zijn de gedetailleerde instructies.</p>
  <ul>
  <li>Kies een naam voor je eepsite (<i>mijnsite</i>.i2p). Gebruik alleen kleine letters.
      Kijk eerst 
@@ -66,14 +66,13 @@
      <li>Voer de naam in en plak je destination in je
      <a href="http://127.0.0.1:7657/susidns/addressbook.jsp?book=master">hoofd adresboek</a>.
      Klik "Toevoegen" om de destination aan je adresboek toe te voegen.</li>
-     <li>In je browser, voel je eepsite naam in (<i>mijnsite</i>.i2p) en je komt hier hopelijk weer terug.</li>
- <li>Voordat je de rest van de wereld over je nieuwe eepsite vertelt, zorg eerst voor wat content.
+     <li>In je browser, voel je eepsite naam in (<i>mijnsite</i>.i2p) en je komt hier hopelijk weer terug.</li></ul>
+ <p>Voordat je de rest van de wereld over je nieuwe eepsite vertelt, zorg eerst voor wat content.
  Ga naar <code>~/.i2p/eepsite/docroot/</code> (Linux),
  <code>%APPDATA%\I2P\eepsite\docroot\</code> (Windows),
- of <code>/Users/(user)/Library/Application Support/i2p</code> (Mac), en vervang de index.html verwijs pagina met je eigen content. Virtual folders werken, dus kan je bestanden vanuit een subdirectory hosten zonder dat je een pagina met links naar deze files moet maken. Mocht je een template nodig hebben voor een basis site, weer vrij om <a href="pagetemplate.html">deze pagina</a> en <a href="lib/">deze content</a> te gebruiken en aan te passen!</li>
-</ul>
-<h2>Registreer je eigen .I2P Domein</h2><ul>
-  <li>Nu is het tijd om je eepsite toe te voegen aan een I2P adresboek gehost door een site
+ of <code>/Users/(user)/Library/Application Support/i2p</code> (Mac), en vervang de index.html verwijs pagina met je eigen content. Virtual folders werken, dus kan je bestanden vanuit een subdirectory hosten zonder dat je een pagina met links naar deze files moet maken. Mocht je een template nodig hebben voor een basis site, weer vrij om <a href="pagetemplate.html">deze pagina</a> en <a href="lib/">deze content</a> te gebruiken en aan te passen!</p>
+<h2>Registreer je eigen .I2P Domein</h2>
+  <p>Nu is het tijd om je eepsite toe te voegen aan een I2P adresboek gehost door een site
      zoals <a href="http://stats.i2p/">stats.i2p</a>.
      Om dat te doen, voer je eepsite naam en destination in op de web interface van een of meer van deze sites.
      Hier is het <a href="http://stats.i2p/i2p/addkey.html">invoer formulier op stats.i2p</a>.
@@ -82,22 +81,22 @@
      Zorg ervoor dat je het geheel plakt, de destination.
      Lees de voorwaarden en klik op de "Submit" button.
      Het kan een aantal uren duren (afhankelijk van de voorwaarden van de gebruikte site en de subscription update instellingen van andere routers) waarna anderen je eepsite kunnen vinden door het invoeren van <i>mijnsite</i>.i2p in hun browser.</li>
-</ul><h2>Adresboek Subscriptions Toevoegen</h2><ul>
- <li>Over adresboek updates gesproken, dit zou een goed moment zijn om wat adresboek subscriptions toe te voegen aan je eigen
- <a href="http://127.0.0.1:7657/susidns/subscriptions.jsp">subscription pagina</a>. Ga naar je subscriptions configuratie pagina en voeg een aantal van deze URLs toe om automatisch op de hoogte te blijven van nieuwe hosts:</li><ul>
+</p><h2>Adresboek Subscriptions Toevoegen</h2>
+ <p>Over adresboek updates gesproken, dit zou een goed moment zijn om wat adresboek subscriptions toe te voegen aan je eigen
+ <a href="http://127.0.0.1:7657/susidns/subscriptions.jsp">subscription pagina</a>. Ga naar je subscriptions configuratie pagina en voeg een aantal van deze URLs toe om automatisch op de hoogte te blijven van nieuwe hosts:</p><ul>
 	 <li><a href="http://tino.i2p/hosts.txt">http://tino.i2p/hosts.txt</a></li>
 	 <li><a href="http://stats.i2p/cgi-bin/newhosts.txt">http://stats.i2p/cgi-bin/newhosts.txt</a></li>
      <li><a href="http://i2host.i2p/cgi-bin/i2hostetag">http://i2host.i2p/cgi-bin/i2hostetag</a></ul>
- <li>Mocht je haast hebben en niet een aantal uren kunnen wachten, dan kan je gebruik maken van een "jump" adres helper redirection service.
+ <p>Mocht je haast hebben en niet een aantal uren kunnen wachten, dan kan je gebruik maken van een "jump" adres helper redirection service.
      Dit dit werkt al een paar minuten nadat je de destination aan het adresboek van dezelfde site hebt toegevoegd.
      Test het eerst zelf door het invoeren van 
-     http://stats.i2p/cgi-bin/jump.cgi?a=<i>mijnsite</i>.i2p of
-     http://i2host.i2p/cgi-bin/i2hostjump?<i>mijnsite</i>.i2p
+     <code>http://stats.i2p/cgi-bin/jump.cgi?a=<i>mijnsite</i>.i2p</code> of
+     <code>http://i2host.i2p/cgi-bin/i2hostjump?<i>mijnsite</i>.i2p</code>
      in je browser.
-     Zodra dit werkt kan je anderen hierover vertellen.</li>
- <li>Sommigen kijken op eepsite lijsten zoals
+     Zodra dit werkt kan je anderen hierover vertellen.</p>
+ <p>Sommigen kijken op eepsite lijsten zoals
      <a href="http://inproxy.tino.i2p/status.php">inproxy.tino.i2p/status.php</a> of <a href="http://perv.i2p">perv.i2p</a> voor nieuwe eepsites, dus kan je zo een aantal bezoekers krijgen.
-     Maar er zijn genoeg andere manieren om je eepsite te promoten. Hier zijn er een aantal:</li>
+     Maar er zijn genoeg andere manieren om je eepsite te promoten. Hier zijn er een aantal:</p>
      <ul>
      <li>Plaats een bericht op het <a href="http://forum.i2p/viewforum.php?f=16">Eepsite announce forum</a>
      op <a href="http://forum.i2p/">forum.i2p</a>.</li>
@@ -105,18 +104,17 @@
      <li>Plaats een bericht op <a href="http://syndie.i2p2.de/">het nieuwe Syndie</a>.</li>
      <li>Plaatst het op de <a href="http://ugha.i2p/EepsiteIndex">Ugha's Eepsite Index Wiki</a></li>
      </ul>
-     </ul>
-<h2>Verdere assistentie</h2><ul>
- <li>In dien je nog vragen hebt, de volgende plaatsen bieden support:
+<h2>Verdere assistentie</h2>
+ <p>In dien je nog vragen hebt, de volgende plaatsen bieden support:</p>
 <ul>
 <li>Ons IRC support kanaal: <ul><li><a href="irc://irc.freenode.net/i2p">#i2p op Freenode</a></li>
 	<li>Anoniem via onze eigen <a href="irc://127.0.0.1:6668/i2p">I2P IRC tunnel</a>.</li></ul>
      <li>De <a href="http://forum.i2p/viewforum.php?f=10">technical problems</a> afdeling op
      <a href="http://forum.i2p/">forum.i2p</a>.</li></ul>
- </ul><div class="notify">
+ <div class="notify">
 <b>Noot:</b> Deze pagina, de website en console moeten allemaal vertaald worden in JOUW eigen taal, mocht dit nog niet gedaan zijn. Help de groei van dit project door <a href="http://www.i2p2.i2p/getinvolved.html">bij te dragen</a> aan de vertaling. Neem contact op met het project via het hierboven genoemde IRC kanaal. Alvast bedankt!</div>
 <hr><div class="footnote">	
 Document laatst gewijzigd: November 2010.</div>
-</div></div>
+</div>
  </body>
 </html>
diff --git a/installer/resources/eepsite/docroot/help/index_ru.html b/installer/resources/eepsite/docroot/help/index_ru.html
index fb43e9ea87d608422128565d9f0ceb5167f5b822..097f4b86a454900c92770e5f986a3a5f25f097cd 100644
--- a/installer/resources/eepsite/docroot/help/index_ru.html
+++ b/installer/resources/eepsite/docroot/help/index_ru.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="ru">
  <head>
   <title>Анонимный I2P веб-сервер | Добро пожаловать на ваш I2P-сайт</title>
   <link rel="shortcut icon" href="favicon.ico" />
@@ -6,9 +7,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
-<div class="fairylights">
 <div class="main">
- <h1>Анонимный I2P веб-сервер</h1>
 <div class="langbar">
 <!-- Some of these languages listed here are yet to be translated -->
 <a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
@@ -22,6 +21,7 @@
 <a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
 <a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
 </div>
+ <h1>Анонимный I2P веб-сервер</h1>
 <h2>Краткое руководство по анонимному хостингу сайтов в I2P</h2>
 
 <p>
@@ -101,7 +101,6 @@
  
 <hr><div class="footnote">	
 На основе шаблонов: zzz, 07.10.2009 и dr|z3d, Ноябрь 2010.</div>
-</div>
 </div>
  </body>
 </html>
diff --git a/installer/resources/eepsite/docroot/help/index_sv.html b/installer/resources/eepsite/docroot/help/index_sv.html
index 39e4084351506a14641abfe79b45ed0960eff1ab..b624629274d913a75fb804cf3ff2f744adb2b6bb 100644
--- a/installer/resources/eepsite/docroot/help/index_sv.html
+++ b/installer/resources/eepsite/docroot/help/index_sv.html
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="sv">
  <head>
   <title>I2P Anonym Webbserver | Välkommen till din eepsite</title>
   <link rel="shortcut icon" href="favicon.ico" />
@@ -6,9 +7,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
-<div class="fairylights">
 <div class="main">
- <h1>I2P Anonym Webbserver</h1>
 <div class="langbar">
 <!-- Some of these languages listed here are yet to be translated -->
 <a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
@@ -22,6 +21,7 @@
 <a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
 <a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
 </div>
+ <h1>I2P Anonym Webbserver</h1>
 <h2>Snabb vägledning till anonym webbservning på I2P</h2>
 
  <p>Det här är din eepsite, din egen anonyma I2P-webbserver - redigera bara filerna
@@ -38,11 +38,11 @@
 </p>
 
  <h2>Att sätta upp och annonsera din eepsajt</h2>
- Din eepsajt är stoppad som standard.
+ <p>Din eepsajt är stoppad som standard.
  Efter att du startat den kommer det att vara svårt för att andra att hitta den,
  eftersom den inte har ett namn och de inte känner till din mycket långa Base64-nyckel.
  Du skulle bara kunna berätta för andra om den långa nyckeln, men tacksamt nog har i2p en
- adressbok och många enkla sätt att berätta för folk om din eepsajt. Här är alla stegen.
+ adressbok och många enkla sätt att berätta för folk om din eepsajt. Här är alla stegen.</p>
  <ul>
  <li>Välj ett namn åt din eepsajt (<i>ettbranamn</i>.i2p). Små bokstäver.
      Kanske vill du först kolla i
@@ -77,8 +77,8 @@
      varsågod och låna och anpassa
      <a href="pagetemplate.html">denna sida</a> och <a href="lib/">det här innehållet</a>!</li>
 </ul>
-<h2>Registrera din egen .I2P-domän</h2><ul>
- <li>Nu är det dags att lägga till din eepsajt till en I2P-adressbok som hostas på en sajt
+<h2>Registrera din egen .I2P-domän</h2>
+ <p>Nu är det dags att lägga till din eepsajt till en I2P-adressbok som hostas på en sajt
      som <a href="http://stats.i2p/">stats.i2p</a>.
      Alltså, du måste skriva in namn och nyckeln på din eepsajt i ett webbgränssnitt på
      en eller flera av dessa sajter.
@@ -90,17 +90,17 @@
      Kolla att den rapporterar att nyckeln lagts till.
      Eftersom många routrar periodiskt skaffar adressboksuppdateringar från dessa sajter
      så kommer andra att kunna finna din eepsajt inom ett antal timmar, bara genom att
-     skriva <i>ettbranamn</i>.i2p i sin webbläsare.</li>
-</ul><h2>Att prenumerera på adressböcker</h2><ul>
- <li>På tal adressboksuppdateringar, nu vore en bra tidpunkt att lägga till några fler adressböcker
+     skriva <i>ettbranamn</i>.i2p i sin webbläsare.</p>
+<h2>Att prenumerera på adressböcker</h2>
+ <p>På tal adressboksuppdateringar, nu vore en bra tidpunkt att lägga till några fler adressböcker
      till din egen
      <a href="http://127.0.0.1:7657/susidns/subscriptions.jsp">prenumerationslista</a>.
      Gå till din prenumerationsinställningssida och lägg till ett par av de här för en automatiskt uppdaterad
-     lista över nya hosts:<ul>
+     lista över nya hosts:</p><ul>
      <li><a href="http://tino.i2p/hosts.txt">http://tino.i2p/hosts.txt</a></li>
      <li><a href="http://stats.i2p/cgi-bin/newhosts.txt">http://stats.i2p/cgi-bin/newhosts.txt</a></li>
      <li><a href="http://i2host.i2p/cgi-bin/i2hostetag">http://i2host.i2p/cgi-bin/i2hostetag</a></li></ul>
- <li>Om du har bråttom och inte kan vänta ett par timmar så kan du säga åt folk att använda en "jump"-adresshjälpar-
+ <ul><li>Om du har bråttom och inte kan vänta ett par timmar så kan du säga åt folk att använda en "jump"-adresshjälpar-
      omdirigeringstjänst.
      Detta kommer att funka inom ett par minuter efter att du skrivit in nyckeln i en adressbok på samma sajt.
      Prova först själv genom att skriva:
@@ -118,11 +118,11 @@
      <li>Berätta det för folk på chattkanalen #i2p eller #i2p-chat på IRC.</li>
      <li>Säg det i en ny post och lägg den på <a href="http://syndie.i2p2.de/">den nya Syndie</a>.</li>
      <li>Lägg det i <a href="http://ugha.i2p/EepsiteIndex">Ugha's Eepsite Index Wiki</a></li>
-     </ul>
-     Notera att vissa sajter rekommenderar att du klistrar in den verkligt
+     </ul></ul>
+     <p>Notera att vissa sajter rekommenderar att du klistrar in den verkligt
      långa destinationsnyckeln. Det kan du om vill - men om du har framgångsrikt har skickat din
      nyckel, testat den med en "hopptjänst", och väntat 24 timmar på att adressboken ska börja
-     propagera sina ändringar till andra, så det borde inte vara nödvändigt.</ul>
+     propagera sina ändringar till andra, så det borde inte vara nödvändigt.</p>
 <h2>Vidare assistans</h2>
 <p>
     Ifall du har några frågor, så finns följande ställen för support:
@@ -138,6 +138,6 @@
 <b>Note:</b> This page, the website and the console all need translating into YOUR language if it's not already been done or in progress. Please consider helping the project grow by <a href="http://www.i2p2.i2p/getinvolved.html">volunteering your time</a> to translate. Contact the project via the IRC channel listed above. Thanks in advance!</div>
 <hr><div class="footnote">
 Document last edited: November 2010.</div>
-</div></div>
+</div>
  </body>
 </html>
diff --git a/installer/resources/eepsite/docroot/help/index_zh.html b/installer/resources/eepsite/docroot/help/index_zh.html
index c3a6ff2cb764e58db56db95b346ec7398c551bb4..25cb14bf0e2e7186a589f58f4ab2d6a62b06abeb 100644
--- a/installer/resources/eepsite/docroot/help/index_zh.html
+++ b/installer/resources/eepsite/docroot/help/index_zh.html
@@ -1,14 +1,14 @@
-<html>
+<!DOCTYPE html>
+<html lang="zh">
  <head>
   <title>I2P匿名网页服务器|欢迎来到您的eepsite</title>
   <link rel="shortcut icon" href="favicon.ico" />
-    <link rel="stylesheet" type="text/css" href="lib/eepsite.css" />
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <link rel="stylesheet" type="text/css" href="lib/eepsite.css" />
+  <link rel="stylesheet" type="text/css" href="lib/eepsite_zh.css" />
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
-<div class="fairylights">
 <div class="main">
- <h1>I2P匿名网页服务器</h1>
 <div class="langbar">
 <!-- Some of these languages listed here are yet to be translated -->
 <a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
@@ -22,6 +22,7 @@
 <a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
 <a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
 </div>
+ <h1>I2P匿名网页服务器</h1>
 <h2>I2P匿名网页服务快速指南</h2>
 
  <p>这是您的eepsite,您自己的匿名I2P网络服务器 - 只要编辑 <code>~/.i2p/eepsite/docroot/</code> (Linux),
@@ -36,9 +37,9 @@
 </p>
 
  <h2>如何设置和宣告您的eepsite</h2>
-  默认情况下,您的eepsite是停止运行的.
+  <p>默认情况下,您的eepsite是停止运行的.
   您启动它后,它将很难被其他人找到,因为它没有名称,其他人也没有您的很长的Base64密钥.
-  您可以告诉别人那真的很长的密钥,但值得庆幸的是,I2P有一个地址簿和几个简单的方法来告诉其他人您eepsite.这是详细说明.
+  您可以告诉别人那真的很长的密钥,但值得庆幸的是,I2P有一个地址簿和几个简单的方法来告诉其他人您eepsite.这是详细说明.</p>
  <ul>
  <li>为您的eepsite选个名称(<i>something</i>.i2p).全部用小写字母.
      您可能要先在<a href="http://127.0.0.1:7657/susidns/addressbook.jsp?book=router&amp;filter=none">这里</a>检查自己路由器的地址簿,
@@ -63,8 +64,8 @@
  <code>%APPDATA%\I2P\eepsite\docroot\</code> (Windows),
  或 <code>/Users/(user)/Library/Application Support/i2p</code> (Mac),  并用自己的内容替换掉index.html重定向页面.虚拟文件夹会起作用,这样您就可以从一个子目录中提供文件服务而不用明确需要提供链接到文件的一个页面.如果您需要一个基本的网站模板, 请自由借来并适用 <a href="pagetemplate.html">本页</a> 和 <a href="lib/">内容</a> !</li>
 </ul>
-<h2>注册自己的.I2P域名</h2><ul>
- <li>现在,是时候把您的eepsite加入到其它网站的I2P地址簿了
+<h2>注册自己的.I2P域名</h2>
+ <p>现在,是时候把您的eepsite加入到其它网站的I2P地址簿了
      比如<a href="http://stats.i2p/">stats.i2p</a> 或<a href="http://no.i2p/">no.i2p</a>.
      就是,您必须在一个或多个这样网站的网页界面输入您eepsite的名称和密钥.
      这是在stats.i2p的<a href="http://stats.i2p/i2p/addkey.html">密钥输入表格</a>.
@@ -74,13 +75,13 @@
      不要忘记点击“添加一个密钥”.
      检查看看是否报告密钥有添加.
      由于许多路由器周期性地从这些网站获取更新地址簿,在几个小时内其他人就能够通过在他们的浏览器里简单的输入 <i>something</i>.i2p 来找到您的网站.</li>
-</ul><h2>添加地址簿订阅</h2><ul>
- <li>说到地址簿更新,这会是个很好的时机来添加些更多的地址簿到您自己的<a href="http://127.0.0.1:7657/susidns/subscriptions.jsp">订阅列表</a>. 到您的订阅配置页面,并添加以下内容以自动更新新主机列表:<ul>
+</p><h2>添加地址簿订阅</h2>
+ <p>说到地址簿更新,这会是个很好的时机来添加些更多的地址簿到您自己的<a href="http://127.0.0.1:7657/susidns/subscriptions.jsp">订阅列表</a>. 到您的订阅配置页面,并添加以下内容以自动更新新主机列表:</p><ul>
      <li><a href="http://tino.i2p/hosts.txt">http://tino.i2p/hosts.txt</a></li>
      <li><a href="http://stats.i2p/cgi-bin/newhosts.txt">http://stats.i2p/cgi-bin/newhosts.txt</a></li>
      <li><a href="http://i2host.i2p/cgi-bin/i2hostetag">http://i2host.i2p/cgi-bin/i2hostetag</a></li>
      <li><a href="http://no.i2p/export/alive-hosts.txt">http://no.i2p/export/alive-hosts.txt</a></li></ul>
- <li>若您很匆忙不能等待几个小时,您可以告诉别人用“跳转”地址助手重定向服务.
+ <ul><li>若您很匆忙不能等待几个小时,您可以告诉别人用“跳转”地址助手重定向服务.
      这将会在您输入密钥到同一个网站上的地址簿内的几分钟内起作用.
      自己先测试一下,在您的浏览器里输入<code>
      http://stats.i2p/cgi-bin/jump.cgi?a=<i>something</i>.i2p</code>
@@ -94,19 +95,19 @@
      <li>在IRC的#i2p 或 #i2p-chat频道告诉人们您的eepsite站点</li>
      <li>在<a href="http://syndie.i2p2.de/">新Syndie</a>上发一个新贴告诉人们您的eepsite站点.</li>
      <li>把它放入<a href="http://ugha.i2p/EepsiteIndex">Ugha的 Eepsite 索引 Wiki</a></li>
-     </ul>
-     请注意,有些网站推荐贴那很长的目标密钥. 若您愿意您可以-但是,如果您已成功在添加密钥服务里发布您的密钥,使用跳转服务测试过了,并等待了24个小时以便地址簿更新传播给他人,这应该不是很必要.</ul>
-<h2>更进一步的援助</h2><ul>
-	<li>如果您有任何问题,以下地方可提供支持:
+     </ul></ul>
+     <p>请注意,有些网站推荐贴那很长的目标密钥. 若您愿意您可以-但是,如果您已成功在添加密钥服务里发布您的密钥,使用跳转服务测试过了,并等待了24个小时以便地址簿更新传播给他人,这应该不是很必要.</p>
+<h2>更进一步的援助</h2>
+	<p>如果您有任何问题,以下地方可提供支持:</p>
 <ul>
 <li>我们的 IRC 支持频道: <ul><li><a href="irc://irc.freenode.net/i2p">在Freenode上的 #i2p </a></li>
 <li>匿名的,通过您常驻的 <a href="irc://127.0.0.1:6668/i2p-help">I2P IRC隧道</a>.</li></ul>
 	<li><a href="http://forum.i2p/viewforum.php?f=10">技术问题部分</a> 在
      <a href="http://forum.i2p/">forum.i2p</a>.</li></ul>
- </ul><div class="notify">
+<div class="notify">
 <b>注:</b> 本页, 网站和控制台都需要翻译成您的语言,如果不是已经完成或在进展中,请考虑<a href="http://www.i2p2.i2p/getinvolved.html">奉献您的时间</a>来翻译 以帮助项目的成长. 请通过上面列出的IRC频道联系项目组. 先谢谢了!</div>
 <hr><div class="footnote">	
 文件最后编辑:2014.06</div>
-</div></div>
+</div>
  </body>
 </html>
diff --git a/installer/resources/eepsite/docroot/help/lib/cn.png b/installer/resources/eepsite/docroot/help/lib/cn.png
new file mode 100644
index 0000000000000000000000000000000000000000..89144146219e6fbec7eaa89e1bf4b073d299569e
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/cn.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/de.png b/installer/resources/eepsite/docroot/help/lib/de.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac4a977362738ca7daa20784717f10f9617136b4
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/de.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/eepsite.css b/installer/resources/eepsite/docroot/help/lib/eepsite.css
index 80558fa3f18b7ef0a5ffc21cac666a52d17c0de8..935b4c0d15207f141273893bff7bc800de361831 100644
--- a/installer/resources/eepsite/docroot/help/lib/eepsite.css
+++ b/installer/resources/eepsite/docroot/help/lib/eepsite.css
@@ -1,48 +1,279 @@
-body            { background-color:#000000; color: #ffffe0; margin-left: 8.7%; margin-right: 8.7%; margin-top: 6%; margin-bottom: 6%; text-align: justify; background-image: url(bg.png); }
-
-body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,div,td,th,address,blockquote {font-family: "Segoe UI", Ubuntu, "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif; }
-
-h1              { font-size:23pt; margin-bottom:20pt; border-bottom: 1px solid #ffbb77; letter-spacing: 0.05em; text-shadow: 0px 0px 24px rgba(255, 96, 48, 0.9); background-image: url(itoopie.png); background-repeat: no-repeat; background-position: right top; line-height; 200% !important; padding-bottom: 10px; word-wrap: no-wrap;}
-h1.ph1          { font-size:20pt; margin-bottom:18pt; margin-right: -5px; margin-leftL -5px;}
-h2              { font-size:11.5pt; margin-bottom:15px; padding: 5px 10px; border: 1px solid #ffbb77; -moz-border-radius: 5px;background-color:#110500; font-variant: small-caps; text-transform: capitalize; letter-spacing: 0.09em; background-image: url(h2bg.png); background-repeat: no-repeat; background-position: right center;}
-h3              { font-size:16pt; }
-h4              { font-size:14pt; }
-h5              { font-size:13pt; }
-p,ul,ol,li,dl,dt,dd,div,td,th,address,blockquote { font-size:9.5pt; }
-
-a.footref       { font-size: 70%; }
-a:link          { color:#ffc266; text-decoration:none; }
-a:visited       { color:#ffd699; text-decoration:none; }
-a:active        { color:#ff9900; text-decoration:none; }
-a:hover         { color:#ffbb00; text-decoration:underline; }
-a.nonexistent   { color: #ffffe0; text-decoration:underline; }
-a.nonexistent:visited { color: #ffffe0; text-decoration:none; }
-a               { font-weight: bold; font-size: 10pt; }
-
-dl.contents	{ margin-top: 0; }
-dt.contents	{ margin-bottom: 0; }
-em		{ font-style: italic; }
-li,dt           { margin: 4px 0; padding-right: 25px; list-style: square;}
-p.footnote      { font-size: 90%;  }
-p.verse         { white-space: pre; margin-left: 8.7%; }
-pre             { font-family: monospace; white-space: pre; margin-left: 8.7%; }
-strong		{ font-weight: bold; }
-table           { width:100%; }png
-td              { border:0px solid #000; vertical-align:top; overflow:hidden; }
-ul		{ list-style-type: disc; margin: 10px 0;}
-/*
-body            { border: 1px solid #ffbb77; -moz-border-radius: 5px; padding: 25px; font-size: 9.5pt; -moz-box-shadow: inset 0px 0px 1px 0px #ffbb77; background-image: url(bg.png); background-repeat: no-repeat; background-position: center center;line-height: 135%; background-attachment: fixed;}
-*/
-hr { color: #fb7; background: #fb7; height: 1px; border: 0px solid #fb7; margin: 5px 0; }
-div.langbar     { margin-top: -25px; text-align: right; font-size: 8.5pt; }
-div.langbar a   { font-size: 8.5pt; outline: none;}
-div.langbar img { border: 0; padding: 4px 2px 0 2px; opacity: 0.7; }
-div.langbar img:hover { opacity: 1; }
-div.langbar img:last-child { padding-right: 0; }
-div.main        { border: 2px solid #220800; -moz-border-radius: 5px; padding: 5px 25px 20px 25px; font-size: 9.5pt; -moz-box-shadow: inset 0px 0px 1px 0px #220800; background-color: #220800; min-width: 570px; background-image: url(brown.png);}
-div.footnote    { font-size: 7.5pt; font-style: italic; text-align: right; }
-div.notify      { padding: 10px; border: 1px solid #994400; background-color: #440A00; -moz-border-radius: 5px; margin: 15px 0 15px 0;}
-div.fairylights { border: 1px solid #ffbb77; -moz-border-radius: 5px; padding: 1px; -moz-box-shadow: inset 0px 0px 1px 0px #ffbb77; background-color: #220800; min-width: 625px;}
-code     {font-size: 9pt; font-weight: bold; color: yellow;}
+body {
+    margin: 6% 8.7%;
+    margin: 25px 10%;
+    text-align: justify;
+    color: #ffffe0;
+    background: #210800 url(bg.png);
+    background-size: 120px 120px;
+}
 
+body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, div, td, th, address, blockquote {
+    font-family: "Droid Sans", "Noto Sans", Ubuntu, 'Segoe UI', 'Bitstream Vera Sans', Verdana, Helvetica, sans-serif;
+}
 
+h1 {
+    font-size: 23pt;
+    margin: 5px 0 20px;
+    padding: 20px 0 5px 48px;
+    white-space: nowrap;
+    letter-spacing: .05em;
+    border-bottom: 1px solid #5f3423;
+    background-image: url(itoopie.png);
+    background-repeat: no-repeat;
+    background-position: left 5px bottom 5px;
+    text-shadow: 0 0 24px rgba(255, 96, 48, .9);
+    text-shadow: 2px 2px 1px #110500 !important;
+}
+
+h2 {
+    font-size: 12pt;
+    font-variant: small-caps;
+    margin-bottom: 10px;
+    padding: 5px 10px;
+    letter-spacing: .09em;
+    text-transform: capitalize;
+    border: 1px solid #5f3423;
+    border-radius: 2px;
+    background: #110500 url(h2bg.png) right center no-repeat;
+    background: url(h2bg.png) right 1px center no-repeat, linear-gradient(to bottom, #2f160c 50%, #110500 50%);
+    box-shadow: inset 0 0 0 1px #000;
+    background-size: auto 112%, 100% 100%;
+    filter: drop-shadow(0 0 1px #000);
+    -webkit-filter: drop-shadow(0 0 1px #000);
+}
+
+h3 {
+    font-size: 11pt;
+}
+
+h4 {
+    font-size: 10pt;
+    padding: 4px 10px;
+    letter-spacing: .09em;
+    text-transform: capitalize;
+    border: 1px solid #5f3423;
+    border-radius: 2px;
+    background: #110500 url(h2bg.png) right center no-repeat;
+    background: url(h2bg.png) right 1px center no-repeat, linear-gradient(to bottom, #2f160c 50%, #110500 50%);
+    box-shadow: inset 0 0 0 1px #000;
+    background-size: auto 112%, 100% 100%;
+    filter: drop-shadow(0 0 1px #000);
+    -webkit-filter: drop-shadow(0 0 1px #000);
+    vertical-align: middle;
+}
+
+h5 {
+    font-size: 10pt;
+}
+
+p, ul, ol, li, dl, dt, dd, div, td, th, address, blockquote {
+    font-size: 10pt;
+}
+
+a.footref {
+    font-size: 70%;
+}
+
+a:link {
+    text-decoration: none;
+    outline: none;
+    color: #ffc266;
+}
+
+a:visited {
+    text-decoration: none;
+    color: #ffd699;
+}
+
+a:active {
+    text-decoration: none;
+    color: #f90;
+}
+
+a:hover, a:focus {
+    text-decoration: none;
+    color: #fb0;
+}
+
+a:focus {
+     text-decoration: underline;
+}
+
+a.nonexistent {
+    text-decoration: underline;
+    color: #ffffe0;
+}
+
+a.nonexistent:visited {
+    text-decoration: none;
+    color: #ffffe0;
+}
+
+a {
+    font-size: 10pt;
+    font-weight: bold;
+}
+
+dl.contents {
+    margin-top: 0;
+}
+
+dt.contents {
+    margin-bottom: 0;
+}
+
+em {
+    font-style: italic;
+}
+
+li, dt {
+    margin: 8px 0;
+    padding-right: 25px;
+    list-style: square;
+}
+
+p {
+     padding: 0 10px;
+}
+
+p, ul {
+     line-height: 130%;
+}
+
+p.verse {
+    margin-left: 8.7%;
+    white-space: pre;
+}
+
+pre {
+    font-family: monospace;
+    margin-left: 8.7%;
+    white-space: pre;
+}
+
+strong {
+    font-weight: bold;
+}
+
+table {
+    width: 100%;
+}
+
+td {
+    overflow: hidden;
+    vertical-align: top;
+    border: 0 solid #000;
+}
+
+ul {
+    margin: 10px 0;
+    list-style-type: square;
+}
+
+hr {
+    height: 1px;
+    margin: 5px 0;
+    color: #5f3423;
+    border: 0 solid #5f3423;
+    background: #5f3423;
+}
+
+div.langbar {
+    font-size: 8.5pt;
+    text-align: right;
+    display: block;
+    width: auto;
+    padding: 5px 10px 5px 5px;
+    float: right;
+    margin: -6px -26px 0 0;
+    border: 1px solid #fb7;
+    border: 1px solid #7f462f;
+    background: #310;
+    border-radius: 0 2px 0 0;
+    box-shadow: inset 0 0 0 3px #000;
+}
+
+div.langbar a {
+    font-size: 8.5pt;
+    outline: none;
+}
+
+div.langbar img {
+    padding: 3px 5px 0;
+    opacity: .7;
+    border: 0;
+}
+
+div.langbar img:hover, .langbar a:focus img {
+    opacity: 1 !important;
+}
+
+div.langbar img:last-child {
+    padding-right: 0;
+}
+
+div.sidenav {
+    float: right;
+    width: 200px;
+    border: 1px solid #7f462f;
+}
+
+div.main {
+    font-size: 10pt;
+    min-width: 570px;
+    padding: 5px 25px 10px 25px;
+    border: 2px solid #220800;
+    border: 1px solid #fb7;
+    border: 1px solid #7f462f;
+    border-radius: 2px;
+    background: #220800 url(brown.png);
+    background: linear-gradient(to bottom, rgba(47, 18, 6, 0.3), rgba(47, 18, 6, 0.5)), url(brown.png);
+    background-size: 100% 100%, 120px 120px;
+    box-shadow: inset 0 0 1px 0 #220800;
+    box-shadow: inset 0 0 0 3px #000;
+    filter: drop-shadow(0 0 5px #000);
+    -webkit-filter: drop-shadow(0 0 5px #000);
+}
+
+div.footnote {
+    font-size: 8pt;
+    font-style: italic;
+    text-align: right;
+}
+
+div.notify {
+    margin: 15px 0 15px 0;
+    padding: 10px;
+    border: 1px solid #940;
+    border-radius: 2px;
+    background: #440a00;
+    box-shadow: inset 0 0 0 1px #000;
+    filter: drop-shadow(0 0 1px #000);
+    -webkit-filter: drop-shadow(0 0 1px #000);
+}
+
+code {
+    font-size: 9pt;
+    font-weight: bold;
+    color: #ff5;
+    text-shadow: 1px 1px 1px #000;
+}
+
+#navbar {
+     border: 1px solid #7f462f;
+     border-left: none;
+     border-right: none; 
+     margin: -6px -22px 0;
+     border-radius: 2px 2px 0 0;
+     text-align: center;
+}
+
+#navbar a {
+     border: 1px solid #7f462f;
+     display: inline-block;
+     padding: 8px 10px;
+     margin: -1px;
+     background: #000;
+     text-decoration: none;
+     outline: none;
+}
\ No newline at end of file
diff --git a/installer/resources/eepsite/docroot/help/lib/eepsite_zh.css b/installer/resources/eepsite/docroot/help/lib/eepsite_zh.css
new file mode 100644
index 0000000000000000000000000000000000000000..19a65d2b88bc5cdfb7bc3ea7933dcf14034909f7
--- /dev/null
+++ b/installer/resources/eepsite/docroot/help/lib/eepsite_zh.css
@@ -0,0 +1,45 @@
+body, p, li, a {
+     font-size: 12pt;
+     line-height: 160%;
+     font-weight: normal;
+     letter-spacing: 0.08em;
+}
+
+.langbar, h1 {
+     line-height: 130%;
+}
+
+.langbar {
+     padding-bottom: 2px !important;
+}
+
+h2 {
+     font-size: 16pt;
+     font-weight: normal;
+}
+
+p {
+     padding: 0 15px;
+}
+
+li {
+     padding-right: 35px;
+     margin-left: 15px;
+}
+
+code {
+     font-size: 11pt;
+     font-weight: normal;
+}
+
+.notify {
+     font-size: 14pt;
+     line-height: 150%;
+     font-weight: normal;
+     padding: 10px 15px !important;
+}
+
+.footnote {
+     font-size: 10pt !important; 
+ }
+ 
\ No newline at end of file
diff --git a/installer/resources/eepsite/docroot/help/lib/es.png b/installer/resources/eepsite/docroot/help/lib/es.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2de2d7111e3cb59cf6511dd2ab045e824bdb43e
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/es.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/fr.png b/installer/resources/eepsite/docroot/help/lib/fr.png
new file mode 100644
index 0000000000000000000000000000000000000000..8332c4ec23c853944c29b02d7b32a88033f48a71
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/fr.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/ir.png b/installer/resources/eepsite/docroot/help/lib/ir.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5fd136aee534ecb59914e336cad18d18ead2a4a
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/ir.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/it.png b/installer/resources/eepsite/docroot/help/lib/it.png
new file mode 100644
index 0000000000000000000000000000000000000000..89692f74f051cd43503744c3dab65c8ba773b7e2
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/it.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/jetty-dir.css b/installer/resources/eepsite/docroot/help/lib/jetty-dir.css
new file mode 100644
index 0000000000000000000000000000000000000000..f83f3868d709fc60e82c5ddad98760353d148a04
--- /dev/null
+++ b/installer/resources/eepsite/docroot/help/lib/jetty-dir.css
@@ -0,0 +1,176 @@
+html {
+     min-height: 100%;
+}
+
+body {
+     background: #bfbfff;
+     background: linear-gradient(to bottom, #bfbfff, #dfdfff) !important;
+     color: #333;
+     font-family: sans-serif;
+     margin: 0;
+     font-size: 10pt;
+}
+
+h1 {
+     text-shadow: 1px 1px 1px #000;
+     font-size: 12pt;
+     color: #fff;
+     width: auto;
+     padding: 7px 5px 7px 30px;
+     background: #bbf url(itoopie.png) 5px center no-repeat;
+     background: url(itoopie.png) 5px center no-repeat, linear-gradient(to right, #ddf, #bbf);
+     background-size: auto 80%, 100% 100%;
+}
+
+a {
+     text-decoration: none;
+     outline: none;
+     color: #23b;
+}
+
+a:hover, a:focus, a:visited:hover, a:visited:focus {
+     color: #d40;
+}
+
+a:visited {
+     color: #125;
+}
+
+table {
+     border-collapse: collapse;
+     font-size: 10pt;
+     width: 100%;
+     margin-top: -11px;
+     color: #333;
+}
+
+tr {
+     border-top: 1px solid #337;
+     border-bottom: 1px solid #337;
+}
+
+tr:hover td {
+     background: #ffe;
+     color: #111;
+     border-top: 1px solid #115;
+     border-bottom: 1px solid #115;
+}
+
+tr:nth-child(odd) {
+     background: #efefff;
+}
+
+tr:nth-child(even) {
+     background: #dfdfff;
+}
+
+td {
+     padding: 5px;
+     text-align: right;
+     white-space: nowrap;
+}
+
+td:first-child {
+     width: 90%;
+     white-space: nowrap;
+     text-align: left;
+}
+
+td:last-child {
+     text-align: right;
+     font-style: italic;
+}
+
+/* filetype icons */
+
+td:first-child a {
+     display: inline-block;
+     padding: 0 0 0 25px;
+     width: 100%;
+     background: url(resources/file.png) left center no-repeat;
+}
+
+td:first-child a[href$="/"] {
+     background: url(resources/folder.png) left center no-repeat;
+}
+
+td:first-child a:hover[href$="/"] {
+     background: url(resources/folder_open.png) left center no-repeat;
+}
+
+td:first-child a[href$=".png"],
+td:first-child a[href$=".jpg"],
+td:first-child a[href$=".jpeg"],
+td:first-child a[href$=".gif"],
+td:first-child a[href$=".tif"],
+td:first-child a[href$=".tga"],
+td:first-child a[href$=".bmp"] {
+     background: url(resources/image.png) left center no-repeat;
+}
+
+td:first-child a[href$=".txt"],
+td:first-child a[href$=".css"],
+td:first-child a[href$=".html"],
+td:first-child a[href$=".htm"],
+td:first-child a[href$=".js"],
+td:first-child a[href$=".log"],
+td:first-child a[href$=".nfo"] {
+     background: url(resources/text.png) left center no-repeat;
+}
+
+td:first-child a[href$=".wav"],
+td:first-child a[href$=".mp3"],
+td:first-child a[href$=".flac"],
+td:first-child a[href$=".mpa"],
+td:first-child a[href$=".mka"],
+td:first-child a[href$=".wma"],
+td:first-child a[href$=".pcm"],
+td:first-child a[href$=".cda"],
+td:first-child a[href$=".ape"] {
+     background: url(resources/audio.png) left center no-repeat;
+}
+
+td:first-child a[href$=".m3u"],
+td:first-child a[href$=".m3a"],
+td:first-child a[href$=".wpl"] {
+     background: url(resources/playlist.png) left center no-repeat;
+}
+
+
+td:first-child a[href$=".mpg"],
+td:first-child a[href$=".mp4"],
+td:first-child a[href$=".mov"],
+td:first-child a[href$=".wmv"],
+td:first-child a[href$=".flv"],
+td:first-child a[href$=".avi"],
+td:first-child a[href$=".webm"],
+td:first-child a[href$=".divx"] {
+     background: url(resources/video.png) left center no-repeat;
+}
+
+td:first-child a[href$=".zip"],
+td:first-child a[href$=".7z"],
+td:first-child a[href$=".rar"],
+td:first-child a[href$=".tar"],
+td:first-child a[href$=".gz"] {
+     background: url(resources/zip.png) left center no-repeat;
+}
+
+td:first-child a[href$=".fla"],
+td:first-child a[href$=".swf"] {
+     background: url(resources/flash.png) left center no-repeat;
+}
+
+td:first-child a[href$=".docx"],
+td:first-child a[href$=".doc"] {
+     background: url(resources/word.png) left center no-repeat;
+}
+
+td:first-child a[href$=".pdf"] {
+     background: url(resources/pdf.png) left center no-repeat;
+}
+
+td:first-child a[href$=".iso"],
+td:first-child a[href$=".nrg"]  {
+     background: url(resources/iso.png) left center no-repeat;
+}
\ No newline at end of file
diff --git a/installer/resources/eepsite/docroot/help/lib/jp.png b/installer/resources/eepsite/docroot/help/lib/jp.png
new file mode 100644
index 0000000000000000000000000000000000000000..325fbad3ffd3075a4a84d8d898ad26ef7d3e0d56
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/jp.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/nl.png b/installer/resources/eepsite/docroot/help/lib/nl.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe44791e32b790949b0317ab3c258864b9024ebe
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/nl.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/audio.png b/installer/resources/eepsite/docroot/help/lib/resources/audio.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2618819b8cb5acb912f68817bce3e3478d4df08
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/audio.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/file.png b/installer/resources/eepsite/docroot/help/lib/resources/file.png
new file mode 100644
index 0000000000000000000000000000000000000000..a63dcbac52d64039fb7af18222345f1e740a87c3
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/file.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/flash.png b/installer/resources/eepsite/docroot/help/lib/resources/flash.png
new file mode 100644
index 0000000000000000000000000000000000000000..054c5c1805215a3537583549930c5bdd4115d7d9
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/flash.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/folder.png b/installer/resources/eepsite/docroot/help/lib/resources/folder.png
new file mode 100644
index 0000000000000000000000000000000000000000..87ff12017cecef023337de505cf617cc42300f09
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/folder.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/folder_open.png b/installer/resources/eepsite/docroot/help/lib/resources/folder_open.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc05885d64710472f4f59309e04fac48008efce4
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/folder_open.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/image.png b/installer/resources/eepsite/docroot/help/lib/resources/image.png
new file mode 100644
index 0000000000000000000000000000000000000000..9665bb71d1b7127b3637a0ceb4e2fe7a9432809a
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/image.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/iso.png b/installer/resources/eepsite/docroot/help/lib/resources/iso.png
new file mode 100644
index 0000000000000000000000000000000000000000..fae703d7a3a698cfddff14db1f00c7bddb8d95b6
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/iso.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/pdf.png b/installer/resources/eepsite/docroot/help/lib/resources/pdf.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f9d7effd5214b290313224fad6189182ecf0cf4
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/pdf.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/playlist.png b/installer/resources/eepsite/docroot/help/lib/resources/playlist.png
new file mode 100644
index 0000000000000000000000000000000000000000..f375880372fd1f74682c7eed131ac12b3a9d6645
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/playlist.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/text.png b/installer/resources/eepsite/docroot/help/lib/resources/text.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c2bbbf6c1e658607d05ab70a782d551f8e0540e
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/text.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/video.png b/installer/resources/eepsite/docroot/help/lib/resources/video.png
new file mode 100644
index 0000000000000000000000000000000000000000..d34c1816e6c19ae46d4a6b49c6db0f6f1f2bc0b3
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/video.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/word.png b/installer/resources/eepsite/docroot/help/lib/resources/word.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f67833aab28f5e9683168560e73a2adaaae70f6
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/word.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/resources/zip.png b/installer/resources/eepsite/docroot/help/lib/resources/zip.png
new file mode 100644
index 0000000000000000000000000000000000000000..049d4de7fe21eacc550c6baad3c23e99f5b697ca
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/resources/zip.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/ru.png b/installer/resources/eepsite/docroot/help/lib/ru.png
new file mode 100644
index 0000000000000000000000000000000000000000..47da4214fd9edb383687c1d4f84fe8b42a51ceb2
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/ru.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/se.png b/installer/resources/eepsite/docroot/help/lib/se.png
new file mode 100644
index 0000000000000000000000000000000000000000..1994653dac1fc1c6ee3c9fcb35c8af97f16eefc7
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/se.png differ
diff --git a/installer/resources/eepsite/docroot/help/lib/us.png b/installer/resources/eepsite/docroot/help/lib/us.png
new file mode 100644
index 0000000000000000000000000000000000000000..10f451fe85c41c6c9a06d543a57114ae2f87ecc1
Binary files /dev/null and b/installer/resources/eepsite/docroot/help/lib/us.png differ
diff --git a/installer/resources/eepsite/docroot/help/pagetemplate.html b/installer/resources/eepsite/docroot/help/pagetemplate.html
index 31793baf78973fec07ec0699ecac3411613c79c1..7e529483c9771954021b862a4badc3460d8bf462 100644
--- a/installer/resources/eepsite/docroot/help/pagetemplate.html
+++ b/installer/resources/eepsite/docroot/help/pagetemplate.html
@@ -5,30 +5,16 @@
     <link rel="stylesheet" type="text/css" href="lib/eepsite.css" />
  </head>
  <body>
-<div class="fairylights">
 <div class="main">
+<div id="navbar"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#" target="_blank">Link 3</a><a href="/help">Help</a></div>
  <h1>MY EEPSITE</h1>
-<div class="langbar">
-<!-- Some of these languages listed here are yet to be translated -->
-<a href="index.html"><img src="lib/us.png" title="English" alt="English"></a>
-<a href="index_de.html"><img src="lib/de.png" title="Deutsch" alt="Deutsch"></a>
-<a href="index_es.html"><img src="lib/es.png" title="Español" alt="Español"></a>
-<a href="index_fr.html"><img src="lib/fr.png" title="Français" alt="Français"></a>
-<a href="index_na.html"><img src="lib/ir.png" title="فارسی" alt="فارسی"></a>
-<a href="index_na.html"><img src="lib/jp.png" title="日本語" alt="日本語"></a>
-<a href="index_nl.html"><img src="lib/nl.png" title="Nederlands" alt="Nederlands"></a>
-<a href="index_ru.html"><img src="lib/ru.png" title="Русский" alt="Русский"></a>
-<a href="index_sv.html"><img src="lib/se.png" title="Svenska" alt="Svenska"></a>
-<a href="index_zh.html"><img src="lib/cn.png" title="中文" alt="中文"></a>
-</div>
 <h2>Words and pictures and stuff</h2>
-Your cool stuff here...
+<p>Your cool stuff here...</p>
 <div class="notify">
 Bring more attention to something of interest here!
 </div> 
 <hr><div class="footnote">	
 Document last edited: November 2009.</div>
-</div>
 </div>
  </body>
 </html>
diff --git a/installer/resources/proxy/dnf-header.ht b/installer/resources/proxy/dnf-header.ht
index c723ed73084556082db2903f081c901bcbbd61cd..1e4ca54652926935b4dc4862a397ab2bd9be1659 100644
--- a/installer/resources/proxy/dnf-header.ht
+++ b/installer/resources/proxy/dnf-header.ht
@@ -6,7 +6,8 @@ Proxy-Connection: close
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
-<title>_("Website Unreachable")</title>
+<title>_("Website Unreachable")</title>
+<noscript><style>.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
@@ -20,7 +21,9 @@ Proxy-Connection: close
 <p>
 _("The website was not reachable.")
 _("The website is offline, there is network congestion, or your router is not yet well-integrated with peers.")
-_("You may want to {0}retry{1}.", "<a href=\"javascript:window.location.reload()\">", "</a>")</p>
+<span class="script">_("You may want to {0}retry{1}.", "<a href=\"javascript:window.location.reload()\">", "</a>")</span>
+<noscript>_("You may want to retry.")</noscript>
+</p>
 <hr>
 <p><b>_("Could not find the following destination:")</b>
 </p>
diff --git a/installer/resources/proxy/dnfb-header.ht b/installer/resources/proxy/dnfb-header.ht
index d98c4ab599d9957c79d6b201265c933099014de9..5bae893d5edb828dc60692af8d115722baadbeb5 100644
--- a/installer/resources/proxy/dnfb-header.ht
+++ b/installer/resources/proxy/dnfb-header.ht
@@ -6,7 +6,8 @@ Proxy-Connection: close
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
-<title>_("Warning: Invalid Destination")</title>
+<title>_("Warning: Invalid Destination")</title>
+<noscript><style>.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
@@ -21,6 +22,9 @@ Proxy-Connection: close
 _("The website destination specified was not valid, or was otherwise unreachable.")
 _("Perhaps you pasted in the wrong Base 64 string or the link you are following is bad.")
 _("The I2P host could also be offline.")
-_("You may want to {0}retry{1}.", "<a href=\"javascript:window.location.reload()\">", "</a>")
-<hr><b>_("Could not find the following destination:")</b>
+<span class="script">_("You may want to {0}retry{1}.", "<a href=\"javascript:window.location.reload()\">", "</a>")</span>
+<noscript>_("You may want to retry.")</noscript>
+</p>
+<hr>
+<p><b>_("Could not find the following destination:")</b>
 </p>
diff --git a/installer/resources/proxy/dnfp-header.ht b/installer/resources/proxy/dnfp-header.ht
index 4c80f587934131c6802b946ffdce1d1c94a52ed5..364505433d09471662a492fb0c039569f9768d39 100644
--- a/installer/resources/proxy/dnfp-header.ht
+++ b/installer/resources/proxy/dnfp-header.ht
@@ -6,7 +6,8 @@ Proxy-Connection: close
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
-<title>_("Outproxy Not Found")</title>
+<title>_("Outproxy Not Found")</title>
+<noscript><style>.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
@@ -20,7 +21,8 @@ Proxy-Connection: close
 <p>
 _("The HTTP Outproxy was not found.")
 _("It is offline, there is network congestion, or your router is not yet well-integrated with peers.")
-_("You may want to {0}retry{1} as this will randomly reselect an outproxy from the pool you have defined {2}here{3} (if you have more than one configured).", "<a href=\"javascript:parent.window.location.reload()\">", "</a>", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")
+<span class="script">_("You may want to {0}retry{1} as this will randomly reselect an outproxy from the pool you have defined {2}here{3} (if you have more than one configured).", "<a href=\"javascript:parent.window.location.reload()\">", "</a>", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")</span>
+<noscript>_("You may want to retry as this will randomly reselect an outproxy from the pool you have defined {0}here{1} (if you have more than one configured).", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")</noscript>
 _("If you continue to have trouble you may want to edit your outproxy list {0}here{1}.", "<a href=\"http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=0\">", "</a>")
 </p>
 <hr><p><b>_("Could not find the following destination:")</b></p>
diff --git a/installer/resources/proxy/encp-header.ht b/installer/resources/proxy/encp-header.ht
index e32aad38b88820fddabe6dac40fc61833a3f0225..cbeb39383ed94719618ea49bdaade3636deeb782 100644
--- a/installer/resources/proxy/encp-header.ht
+++ b/installer/resources/proxy/encp-header.ht
@@ -6,7 +6,8 @@ Proxy-Connection: close
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
-<title>_("Outproxy Unreachable")</title>
+<title>_("Outproxy Unreachable")</title>
+<noscript><style>.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
@@ -19,7 +20,8 @@ Proxy-Connection: close
 <h3>_("Outproxy Unreachable")</h3>
 <p>
 _("The HTTP outproxy was not reachable, because it uses encryption options that are not supported by your I2P or Java version.")
-_("You may want to {0}retry{1} as this will randomly reselect an outproxy from the pool you have defined {2}here{3} (if you have more than one configured).", "<a href=\"javascript:parent.window.location.reload()\">", "</a>", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")
+<span class="script">_("You may want to {0}retry{1} as this will randomly reselect an outproxy from the pool you have defined {2}here{3} (if you have more than one configured).", "<a href=\"javascript:parent.window.location.reload()\">", "</a>", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")</span>
+<noscript>_("You may want to retry as this will randomly reselect an outproxy from the pool you have defined {0}here{1} (if you have more than one configured).", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")</noscript>
 _("If you continue to have trouble you may want to edit your outproxy list {0}here{1}.", "<a href=\"http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=0\">", "</a>")
 </p>
 <hr><p><b>_("Could not connect to the following destination:")</b></p>
diff --git a/installer/resources/proxy/nols-header.ht b/installer/resources/proxy/nols-header.ht
index 8c817a3fbd7eeea4650ead574ee4cc99b0043cf0..4b9c19aa35a6486b2359fdbb54a08103bdc25d4f 100644
--- a/installer/resources/proxy/nols-header.ht
+++ b/installer/resources/proxy/nols-header.ht
@@ -6,7 +6,8 @@ Proxy-Connection: close
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
-<title>_("Website Unreachable")</title>
+<title>_("Website Unreachable")</title>
+<noscript><style>.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
@@ -20,7 +21,9 @@ Proxy-Connection: close
 <p>
 _("The website was not reachable, because its lease set was not found.")
 _("The website is probably down, but there could also be network congestion.")
-_("You may want to {0}retry{1}.", "<a href=\"javascript:window.location.reload()\">", "</a>")</p>
+<span class="script">_("You may want to {0}retry{1}.", "<a href=\"javascript:window.location.reload()\">", "</a>")</span>
+<noscript>_("You may want to retry.")</noscript></p>
+</p>
 <hr>
 <p><b>_("Could not find the following destination:")</b>
 </p>
diff --git a/installer/resources/proxy/nolsp-header.ht b/installer/resources/proxy/nolsp-header.ht
index 6d162123f8338cdc677484ed50be16fd8f1a9245..dc25d20b48780196388e97800060c884bf1d258d 100644
--- a/installer/resources/proxy/nolsp-header.ht
+++ b/installer/resources/proxy/nolsp-header.ht
@@ -6,7 +6,8 @@ Proxy-Connection: close
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
-<title>_("Outproxy Not Found")</title>
+<title>_("Outproxy Not Found")</title>
+<noscript><style>.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
@@ -20,7 +21,8 @@ Proxy-Connection: close
 <p>
 _("The HTTP outproxy was not reachable, because its lease set was not found.")
 _("The outproxy is probably down, but there could also be network congestion.")
-_("You may want to {0}retry{1} as this will randomly reselect an outproxy from the pool you have defined {2}here{3} (if you have more than one configured).", "<a href=\"javascript:parent.window.location.reload()\">", "</a>", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")
+<span class="script">_("You may want to {0}retry{1} as this will randomly reselect an outproxy from the pool you have defined {2}here{3} (if you have more than one configured).", "<a href=\"javascript:parent.window.location.reload()\">", "</a>", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")</span>
+<noscript>_("You may want to retry as this will randomly reselect an outproxy from the pool you have defined {0}here{1} (if you have more than one configured).", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")</noscript>
 _("If you continue to have trouble you may want to edit your outproxy list {0}here{1}.", "<a href=\"http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=0\">", "</a>")
 </p>
 <hr><p><b>_("Could not find the following destination:")</b></p>
diff --git a/installer/resources/proxy/reset-header.ht b/installer/resources/proxy/reset-header.ht
index 23743ed3d40ec34cf8227b3145eef38f05484e35..ebf470807c318c6a076bb8eee67fac6a940abb93 100644
--- a/installer/resources/proxy/reset-header.ht
+++ b/installer/resources/proxy/reset-header.ht
@@ -6,7 +6,8 @@ Proxy-Connection: close
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
-<title>_("Connection Reset")</title>
+<title>_("Connection Reset")</title>
+<noscript><style>.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
@@ -20,7 +21,9 @@ Proxy-Connection: close
 <p>
 _("The connection to the website was reset while the page was loading.")
 _("The website could be temporarily unavailable, too busy, or it has blocked your access.")
-_("You may want to {0}retry{1}.", "<a href=\"javascript:window.location.reload()\">", "</a>")</p>
+<span class="script">_("You may want to {0}retry{1}.", "<a href=\"javascript:window.location.reload()\">", "</a>")</span>
+<noscript>_("You may want to retry.")</noscript></p>
+</p>
 <hr>
 <p><b>_("Could not find the following destination:")</b>
 </p>
diff --git a/installer/resources/proxy/resetp-header.ht b/installer/resources/proxy/resetp-header.ht
index 1f1e53dc69b75c94409b8c68c2ea9a15811b2cb3..632be830cf1ab7ffcefd84f89cbbac3c1728d704 100644
--- a/installer/resources/proxy/resetp-header.ht
+++ b/installer/resources/proxy/resetp-header.ht
@@ -6,7 +6,8 @@ Proxy-Connection: close
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
-<title>_("Connection Reset")</title>
+<title>_("Connection Reset")</title>
+<noscript><style>.script {display: none;}</style></noscript>
 <link rel="shortcut icon" href="http://proxy.i2p/themes/console/images/favicon.ico">
 <link href="http://proxy.i2p/themes/console/default/console.css" rel="stylesheet" type="text/css">
 </head>
@@ -20,7 +21,10 @@ Proxy-Connection: close
 <p>
 _("The connection to the proxy was reset.")
 _("The proxy could be temporarily unavailable, too busy, or it has blocked your access.")
-_("You may want to {0}retry{1} as this will randomly reselect an outproxy from the pool you have defined {2}here{3} (if you have more than one configured).", "<a href=\"javascript:parent.window.location.reload()\">", "</a>", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")
+<span class="script">_("You may want to {0}retry{1} as this will randomly reselect an outproxy from the pool you have defined {2}here{3} (if you have more than one configured).", "<a href=\"javascript:parent.window.location.reload()\">", "</a>", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")</span>
+<noscript>_("You may want to retry as this will randomly reselect an outproxy from the pool you have defined {0}here{1} (if you have more than one configured).", "<a href=\"http://127.0.0.1:7657/i2ptunnel/index.jsp\">", "</a>")</noscript>
 _("If you continue to have trouble you may want to edit your outproxy list {0}here{1}.", "<a href=\"http://127.0.0.1:7657/i2ptunnel/edit.jsp?tunnel=0\">", "</a>")
 </p>
-<hr><p><b>_("Could not find the following destination:")</b></p>
+<hr>
+<p><b>_("Could not find the following destination:")</b>
+</p>
diff --git a/installer/resources/readme/readme.html b/installer/resources/readme/readme.html
index 2c26ebc6a1a8339c442a5adf9e8344fb09029389..2c6643c05d20d87a648aaf57e4177c844f8feb02 100644
--- a/installer/resources/readme/readme.html
+++ b/installer/resources/readme/readme.html
@@ -3,8 +3,8 @@
 <ul class="links"><li class="tidylist"><b>Starting Up&hellip;</b><br>If you've just started I2P, the number of <i>Active Peers</i> indicated under the <i>Peers</i> section in the side panel on the left should start to grow over the next few minutes and you'll also see a <i>Local Destination</i> named <i>Shared Clients</i> listed there, and possibly other clients and servers depending on how I2P is configured (if not, see the troubleshooting section <a href="#trouble">below</a>). These <i>Local Destinations</i> provide connections on different ports (and sometimes protocols) to the I2P network, enabling your bittorrent, e-mail, web proxy and other services to function. Your <a href="/netdb">Network Database</a> indicates all known peers on the network. Additionally, you can monitor existing <a href="/peers">Peer Connections</a>, and view existing <a href="/tunnels">Tunnels</a> and their status. More information is available on the <a href="/help">help page</a>.</li>
 
 <li class="tidylist"><b>Network integration</b><br> The first time you start I2P it may take a few minutes to bootstrap (integrate) you into the network and find additional peers to optimize your integration, so please be patient. When I2P starts up, and during normal operation, I2P's tunnel build readiness indicator (immediately above the <i>Local Destinations</i> section in the sidepanel) may tell you that I2P is "Rejecting Tunnels"; this is normal behavior and should be of no cause for concern! Once green stars are indicated next to your <i>Local Destinations</i>, there is a wide variety of things you can do with I2P, and below we introduce you to some of them.</li></ul>
-  
-<h3>Services on I2P</h3>
+
+<h3 class="welcome">Services on I2P</h3>
 <ul class="links">
 
 <li class="tidylist"><b>Invisible Internet &amp; Public Web Browsing</b><br>On I2P you can access hidden service websites ("eepsites") and other services (e.g. ssh over I2P, IRC, Jabber etc.) in addition to being able to host your own services. You can also access the normal web anonymously via I2P's built-in web proxy (outproxy). <a href="https://geti2p.net/en/about/browser-config" target="_blank">Configure your browser</a> to use the HTTP proxy at <code>127.0.0.1 port 4444</code>, then browse to a hidden service website or a normal, unencrypted <code>http://</code> address. If you wish to disable or change outproxy access to the normal internet, remove or modify the outproxy entry for <code>false.i2p</code> under the <i>Outproxies</i> option in the <a href="/i2ptunnel/edit?tunnel=0" target="_blank">I2P HTTP Proxy  Tunnel Editor</a>. In the "Sites of Interest" section <a href="#eepsites">below</a>, we list a few of the sites hosted on I2P.</li>
@@ -32,7 +32,7 @@
   If you're a <a href="http://i2pwiki.i2p/index.php?title=Plugins" target="_blank">developer</a>, a complete language-agnostic framework for writing your own plugins is provided with <a href="http://i2p-projekt.i2p/plugins.html" target="_blank">documentation</a>; I2P plugins can be coded in any language.</li>
 </ul>
 
-<h3>Anonymous Encrypted Web Hosting on I2P</h3>
+<h3 class="welcome">Anonymous Encrypted Web Hosting on I2P</h3>
 <ul class="links">
 
 <li class="tidylist"><b>Ready to Roll!</b><br>I2P comes with a built-in, ready-to-go web server for hosting your own hidden service website ("eepsite") on the I2P network: a <a href="https://www.eclipse.org/jetty/" target="_blank">Jetty</a> instance listening on <a href="http://127.0.0.1:7658/" target="_blank">http://127.0.0.1:7658/</a>. To host your own content,
@@ -46,7 +46,7 @@
   your website, registering an .i2p domain and promoting your site to others are accessible via your own I2P webserver on <a href="http://127.0.0.1:7658/help/" target="_blank">http://127.0.0.1:7658/help/</a>.</li></ul>
     
 <a name="eepsites"></a>    
-    <h3>I2P-Hidden Services of Interest</h3>
+    <h3 class="welcome">I2P-Hidden Services of Interest</h3>
     <ul class="links">
       <li class="tidylist"><b>Invisible Internet Project (I2P) Official Website</b><br><a href="http://i2p-projekt.i2p" target="_blank">i2p-projekt.i2p</a>: Secure and
         anonymous connections to <a href="https://geti2p.net/en/" target="_blank">geti2p.net</a>. If you want to know more about how I2P works or how you can participate, this is your first port of call!</li>
diff --git a/installer/resources/readme/readme_fr.html b/installer/resources/readme/readme_fr.html
index 78d6aff1677730a2b897caf1de22e59b5a2330d3..43ba14ce394e8f0bf1184f7ad317f60c3e67a4c2 100644
--- a/installer/resources/readme/readme_fr.html
+++ b/installer/resources/readme/readme_fr.html
@@ -9,7 +9,7 @@ dessus de la section <i>Destinations locales</i> dans le panneau de contrôle),
 s'affichent en face des <i>Destinations locales</i>, le monde d'I2P vous est ouvert, et ci-dessous nous vous en présentons quelques unes.
 </li></ul>
 
-<h3>Les services sur I2P</h3>
+<h3 class="welcome">Les services sur I2P</h3>
 <ul class="links">
 
 <li class="tidylist"><b>Internet invisible et exploration anonyme du web public</b><br>Sur I2P vous pouvez accéder 
@@ -78,7 +78,7 @@ environnement d'écriture de greffons indépendant de tout langage, avec
 n'importe quel langage.</li>
 </ul>
 
-<h3>Hébergement web anonyme crypté sur I2P</h3>
+<h3 class="welcome">Hébergement web anonyme crypté sur I2P</h3>
 <ul class="links">
 
 <li class="tidylist"><b>Prêt à servir !</b><br>I2P est fourni avec un serveur web intégré, prêt à héberger votre propre site web 
@@ -94,7 +94,7 @@ d'enregistrement d'un domaine .i2p, et de promotion de votre site, sont accessib
 l'adresse <a href="http://127.0.0.1:7658/help/" target="_blank">http://127.0.0.1:7658/help/</a>.</li></ul>
     
 <a name="eepsites"></a>    
-    <h3>Sites I2P intéressants</h3>
+    <h3 class="welcome">Sites I2P intéressants</h3>
     <ul class="links">
       <li class="tidylist"><b>Le site officiel de l'Invisible Internet Project (I2P)</b><br>
 <a href="http://i2p-projekt.i2p/" target="_blank">i2p-projekt.i2p</a> et son miroir 
diff --git a/installer/resources/readme/readme_nl.html b/installer/resources/readme/readme_nl.html
index 7704ffe07388d55095b130c68e306490f26dfd57..9259fd03a928d54deeaa8212bfea196dd035a0c1 100644
--- a/installer/resources/readme/readme_nl.html
+++ b/installer/resources/readme/readme_nl.html
@@ -4,7 +4,7 @@
 
 <li class="tidylist"><b>Netwerk integratie</b><br> De eerste keer dat I2P start duurt het mogelijk enkele minuten om de router te integreren in het netwerk en meerdere peers te vinden om de verbinding te optimaliseren. Als I2P opstart, bij een normale werking, geeft de tunnel gereedheid indicator (direct boven het <i>Lokale bestemmingen</i> gedeelte in het zijpaneel) mogelijk de melding "Tunnels Geweigerd"; dit is normaal en is geen reden voor zorgen. Zodra de <i>Lokale bestemmingen</i> eenmaal aangegeven worden met groene sterren zijn er veel mogelijkheden voor het gebruik van I2P, hieronder worden enkele voorbeelden geïntroduceerd.</li></ul>
   
-<h3>Diensten op I2P</h3>
+<h3 class="welcome">Diensten op I2P</h3>
 <ul class="links">
 
 <li class="tidylist"><b>Invisible Internet &amp; Public Web Browsing</b><br>Op I2P kan je toegang verkrijgen tot anonieme websites (eepsites) en andere diensten (zoals; SSH over I2P, IRC, Jabber etc.), daarnaast heb je ook de mogelijkheid om je eigen dienst aan te bieden. Je kan ook anoniem toegang krijgen tot het normale Internet via de ingebouwde web proxy (outproxy). <a href="https://geti2p.net/htproxyports.html" target="_blank">Configureer je browser</a> voor het gebruik van de HTTP proxy op <code>127.0.0.1 poort 4444</code>, waarna je naar zowel eepsites als normale, onversleutelde <code>http://</code> websites kan surfen. Als je een aanpassing wilt maken aan de outproxy of deze wilt uitschakelen kan je de 'client tunnel' voor <code>false.i2p</code> onder het <i>Outproxies</i> gedeelte in de <a href="/i2ptunnel/edit?tunnel=0" target="_blank">I2P HTTP Proxy Tunnel Editor</a>. In het "Interessante websites" gedeelte <a href="#eepsites">hier onder</a> staat een lijst met een paar van de bekende sites die op I2P gehost worden.</li>
@@ -23,7 +23,7 @@ en maak verbinding met de <a href="irc://127.0.0.1:6668/i2p">server</a> op <code
 <li class="tidylist"><a name="plugins"></a><b>Plugins voor I2P</b><br>Breid de gebruiks mogelijkheden van I2P uit door het installeren van plugins &hellip; blogging, chatting, file sharing en andere plugins zijn al geschreven of geport en wachten op <a href="http://i2pwiki.i2p/index.php?title=Plugins" target="_blank">installatie</a>! Surf naar de plugins en gerelateerde info op <a href="http://i2pwiki.i2p/index.php?title=Plugins" target="_blank">i2pwiki.i2p</a>. Als je een <a href="http://i2pwiki.i2p/index.php?title=Plugins" target="_blank">ontwikkelaar</a> bent is er een compleet taal-agnostisch framework beschikbaar voor het schrijven van eigen plugins, geleverd met  <a href="http://i2p-projekt.i2p/nl/docs/plugins" target="_blank">documentatie</a>; I2P plugins kunnen geprogrammeerd worden in elke taal.</li>
 </ul>
 
-<h3>Anoniem en versleutelde Web Hosting op I2P</h3>
+<h3 class="welcome">Anoniem en versleutelde Web Hosting op I2P</h3>
 <ul class="links">
 
 <li class="tidylist"><b>Ready to Roll!</b><br> I2P komt met een ingebouwde, ready-to-go web server voor het hosten van je eigen anonieme website (eepsite) op het I2P netwerk: een <a href="https://www.eclipse.org/jetty/" target="_blank">Jetty</a> server die luistert op <a href="http://127.0.0.1:7658/" target="_blank">http://127.0.0.1:7658/</a>. Om je eigen inhoud te hosten plaats je simpelweg alle bestanden in de <code>eepsite/docroot/</code> directory (of plaats elke standaard JSP/Servlet .war bestanden onder <code>eepsite/webapps</code>,
@@ -34,7 +34,7 @@ en maak verbinding met de <a href="irc://127.0.0.1:6668/i2p">server</a> op <code
   zal je eepsite zichtbaar zijn (maar niet vindbaar) voor anderen. Gedetaïlleerde instructies voor het starten van je eepsite, het registreren van een.i2p domein en promotie van je website aan anderen zijn toegankelijk via je eigen I2P webserver op <a href="http://127.0.0.1:7658/help/" target="_blank">http://127.0.0.1:7658/help/</a>.</li></ul>
 
 <a name="eepsites"></a>    
-    <h3>I2P-Hosted Sites of Interest</h3>
+    <h3 class="welcome">I2P-Hosted Sites of Interest</h3>
     <ul class="links">
       <li class="tidylist"><b>Invisible Internet Project (I2P) Officiële Website</b><br><a href="http://i2p-projekt.i2p/nl/" target="_blank">i2p-projekt.i2p</a>: Veilige en  
         anonieme verbindingen naar <a href="https://geti2p.net/nl/" target="_blank">geti2p.net</a>. Als je meer wilt weten over hoe I2P werkt of hoe je mee kan doen is dit de website waar je terecht kan!</li>
diff --git a/installer/resources/readme/readme_ru.html b/installer/resources/readme/readme_ru.html
index 24bc484e77258e526843718b0895d10b253eb0f9..c39ead2f3503da8e19fc28be1d24bcfb6f81ac5f 100644
--- a/installer/resources/readme/readme_ru.html
+++ b/installer/resources/readme/readme_ru.html
@@ -3,7 +3,7 @@
 <ul class="links"><li class="tidylist"><b>Начало&hellip;</b><br>Если вы только что запустили I2P, число <i>Активных пиров</i>, отображаемых под секцией <i>Пиры</i> на боковой панели должно начать увеличиваться через несколько минут, и вы так же увидите <i>Локальный туннель</i> с именем <i>Коллективные Клиенты</i>, и, возможно, другие клиентские и серверные туннели в зависимости от того, как настроен I2P (если нет, смотрите секцию по разрешению проблем <a href="#trouble">ниже</a>). Эти <i>Локальные туннели</i> предоставляют соединения на разных портах (и иногда разные протоколы) для сети I2P, позволяя функционировать вашим torrent, e-mail, прокси и другим сервисам. Ваша <a href="/netdb">База данных сети I2P</a> показывает всех известных роутеру пиров в сети. Больше информации доступно на <a href="/help">странице помощи</a>.</li>
 <li class="tidylist"><b>Сетевая интеграция</b><br> Когда вы впервые запускаете I2P, это может занять несколько минут, т.к. роутер выполняет процедуру начальной загрузки (bootstrap) для интеграции в сеть и поиска пиров для оптимизации интегрированности. Будте терпеливы. Когда I2P запускается, и во время нормальной работы, индикатор готовности к построению туннелей (прямо над секцией <i>Локальные туннели</i> на боковой панели) может показывать "Не принимаем туннели"; это нормальное поведение и не стоит слишком беспокоиться. Когда возле ваших <i>Локальных туннелей</i> загорятся зелёные звёздочки, вы сможете делать с I2P разнообразные вещи, и ниже мы представим вам некоторые из них. </li></ul>
   
-<h3>Сервисы в I2P</h3>
+<h3 class="welcome">Сервисы в I2P</h3>
 <ul class="links">
 
 <li class="tidylist"><b>Невидимый Интернет и просмотр обычных сайтов </b><br>В I2P вы можете заходить на анонимные веб-сайты (так же известные как eepsites) и пользоваться другими сервисами (такими как ssh over I2P, IRC, Jabber и т.д.), а так же поддерживать собственные сервисы. Ещё вы можете выходить в обычный веб анонимно через имеющиеся в I2P веб-прокси (outproxy). <a href="https://geti2p.net/ru/about/browser-config" target="_blank">Настройте ваш браузер</a> на использование <a href="http://proxy.i2p" target="_blank">HTTP proxy</a> на <code>127.0.0.1 порт 4444</code>, затем откройте eepsite или обычный <code>http://</code> адрес. Если вы хотите отключить или изменить возможность доступа в обычный интернет через outproxy, удалите или измените содержимое <code>false.i2p</code> в поле опции <i>Outproxies</i> на странице <a href="/i2ptunnel/edit?tunnel=0" target="_blank">редактирования HTTP Proxy туннеля</a>. В секции Достопримечательности <a href="#eepsites">ниже</a>, мы представляем список некоторых сайтов, имеющихся в I2P.</li>
@@ -23,7 +23,7 @@
       <li class="tidylist"><a name="plugins"></a><b>Плагины для I2P</b><br>Повысьте полезность I2P установив плагины&hellip; блоггинг, чат, обмен файлами и другие плагины уже были написаны или портированы и ждут когда вы их <a href="http://i2pwiki.i2p/index.php?title=Plugins" target="_blank">установите</a>! Смотрите плагины и сопутствующую информацию на <a href="http://i2pwiki.i2p/index.php?title=Plugins" target="_blank">i2pwiki.i2p</a>. Если вы <a href="http://i2pwiki.i2p/index.php?title=Plugins" target="_blank">программист</a>, полный языконезависимый фреймворк для написания плагинов доступен и <a href="http://i2p-projekt.i2p/ru/docs/plugins" target="_blank">документирован</a>; I2P плагины могут быть написаны на любом языке.</li>
 </ul>
 
-<h3>Анонимный шифрованный веб-хостинг в I2P</h3>
+<h3 class="welcome">Анонимный шифрованный веб-хостинг в I2P</h3>
 <ul class="links">
 
 <li class="tidylist"><b>Готовы к действию!</b><br>I2P идёт со встроенным готовым к работе веб-сервером для хостинга вашего собственного анонимного веб-сайта (eepsite) в сети I2P: <a href="https://www.eclipse.org/jetty/" target="_blank">Jetty</a> развёрнут и слушает на <a href="http://127.0.0.1:7658/" target="_blank">http://127.0.0.1:7658/</a>. Для размещения собственного контента, 
@@ -37,7 +37,7 @@
   I2P-сайта, регистрации .i2p домена и распространению информации о вашем сайте доступны через ваш I2P веб-сервер на странице <a href="http://127.0.0.1:7658/help/" target="_blank">http://127.0.0.1:7658/help/</a>.</li></ul>
     
 <a name="eepsites"></a>    
-    <h3>Достопримечательности I2P</h3>
+    <h3 class="welcome">Достопримечательности I2P</h3>
     <ul class="links">
       <li class="tidylist"><b>Официальный веб-сайт Invisible Internet Project (I2P)</b><br><a href="http://i2p-projekt.i2p/ru/" target="_blank">i2p-projekt.i2p</a>: безопасный и анонимный
         доступ к <a href="https://geti2p.net/ru/" target="_blank">geti2p.net</a>. Так же имеется официальное зеркало на <a href="http://geti2p.net" target="_blank">geti2p.net</a>. Если вы хотите узнать больше о том, как работает I2P, или о том, как вы можете принять участие, это послужит вам точкой входа.</li>
diff --git a/installer/resources/themes/console/classic/console.css b/installer/resources/themes/console/classic/console.css
index ff6d24f572867217c3b5421e3421875de74b15ec..7a18aa0f35def64783d63605acc8c6e151278fb1 100644
--- a/installer/resources/themes/console/classic/console.css
+++ b/installer/resources/themes/console/classic/console.css
@@ -1,18 +1,31 @@
-/* I2P Theme: Classic (aka corporat) */
+/* I2P Theme: Classic */
 /* I2P Description: Light blue "classic" I2P theme; optimized for less capable browsers and system specifications. */
 /* Author: dr|z3d */
 
-
 body {
-     margin: 5px 3px 5px 6px;
+     margin: 3px 2px 3px 4px;
      padding: 0;
      text-align: left;
-     background: #bbf;
-     color: #000;
-     font: 9pt/140% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+     background: #bbf url(images/bg.png) center center fixed;
+     color: #0c153d;
+     font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
 }
 
-.hide {
+/* preload button mouseovers */
+body {
+     background: url(images/bg.png) fixed,
+     url(/themes/console/images/buttons/clean_hover.png) no-repeat,
+     url(/themes/console/images/buttons/configure_hover.png) no-repeat,
+     url(/themes/console/images/buttons/delete_hover.png) no-repeat,
+     url(/themes/console/images/buttons/restart_hover.png) no-repeat,
+     url(/themes/console/images/buttons/restore_hover.png) no-repeat,
+     url(/themes/console/images/buttons/search_hover.png) no-repeat,
+     url(/themes/console/images/buttons/shutdown_hover.png) no-repeat,
+     url(/themes/console/images/buttons/update_hover.png) no-repeat, #bbf;
+     background-size: 150px 150px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
+}
+
+.hide, .hideme {
      display: none;
 }
 
@@ -26,1177 +39,5707 @@ img {
      border: none;
 }
 
-pre {
-     overflow: auto;
-     font-size: 8pt !important;
-     width: 95%;
-     padding-top: 10px;
-}
-
 /* Sidepanel for proxy errors */
 
-div.logo {
+.logo {
      float: left;
-     position-relative: top 20px ;
+     position: relative;
      width: 200px;
      margin: 0 0 0 20px;
-     padding: 10px 5px;
-     text-align: center;
+     padding: 10px 5px 8px;
+     text-align: center;;
      border: 5px solid #ddf;
-     background-color: #eef;
-     -moz-box-shadow: inset 0px 0px 0px 2px #99f;
-     -khtml-box-shadow: inset 0px 0px 0px 2px #99f;
+     background: #eff1ff;
+}
+
+.logo {
+     background: url(/themes/console/classic/images/i2plogo.png) center 12px no-repeat #eff1ff !important;
+     background-size: 90% auto !important;
+     background-blend-mode: luminosity;
+}
+
+.logo:hover {
+     background-blend-mode: normal;
 }
 
-div.logo hr {
+.logo a img, .logo a:first-child:hover {
+     opacity: 0;
+     background: none !important;
+}
+
+.logo hr {
      color: #ddf;
      background: #ddf;
      height: 5px;
-     border: 0px solid #ddf;
-     margin: 8px -3px;
+     border: 0 solid #ddf;
+     margin: 8px -5px 8px;
 }
 
-div.logo a:link, div.logo a:visited {
-     text-shadow: 0px 0px 1px rgba(0, 0, 32, 0.5);
+.logo a {
+     display: inline-block;
+     padding: 4px 0;
+     width: 100%;
 }
 
-div.logo a:active {
-     text-shadow: 0px 0px 1px rgba(255, 96, 0, 0.7);
+.logo a:active {
      color: #f60;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999 !important;
 }
 
-div.logo a:hover {
-     text-shadow: 0px 0px 1px rgba(128, 0, 0, 0.7);
+.logo a:hover {
      color: #900;
+     background: rgba(220,220,255,0.5);
+     box-shadow: inset 0 0 0 1px #fff;
+     border-radius: 3px;
 }
 
 /* HTTP Proxy warning Main box */
 
-div.warning {
-     margin: 25px 20px 15px 260px;
-     padding: 0px 20px 20px 75px;
-     background: #ffd;
+.warning {
+     margin: 25px 20px 0 260px;
+     padding: 0 20px 40px;
      border: 5px solid #fb7;
      text-align: left;
      color: inherit;
-     background-image:url("../images/itoopie_sm.png");
-     background-position: 12px center;
-     background-repeat:no-repeat;
-     -moz-box-shadow: inset 0px 0px 0px 2px #f60;
-     -khtml-box-shadow: inset 0px 0px 0px 2px #f60;
+     background: #ffd;
+     box-shadow: inset 0 0 0 2px #f60;
+     min-width: 500px;
 }
 
-div.warning a:link {
-     color: #f60;
-     text-shadow: 0px 0px 1px rgba(255, 96, 0, 0.5);
+.warning a:link {
+     color: #f60 !important;
 }
 
-div.warning a:visited {
-     color: #f90;
+.warning a:visited {
+     color: #f90 !important;
 }
 
-div.warning a:hover {
-     color: #d30;
-     text-shadow: 0px 0px 1px rgba(255, 96, 0, 0.7);
+.warning a:hover {
+     color: #d30 !important;
 }
 
-div.warning a:active {
-     color: #900;
+.warning a:active {
+     color: #900 !important;
 }
 
-div.warning hr {
+.warning hr {
      color: #fb7;
      background: #fb7;
-     height: 5px;
-     border: 0px solid #fb7;
+     height: 1px;
+     border: 0 solid #fb7;
      margin: 5px 0;
 }
 
-div.warning h3 {
+.warning h3 {
      border: 0;
-     border-bottom: 5px solid #fb7;
+     border-bottom: 1px solid #fb7;
      padding-bottom: 10px;
-     background:none #FFFFDD !important;
+     background: none !important;
      padding-left: 0;
+     font-size: 10.5pt;
+}
+
+.warning h3:first-child {
+     margin: 2px -18px 10px -18px;
+     padding: 10px 10px 10px 38px;
+     background: #ffe !important;
+     background: #ffe url(/themes/console/images/itoopie_sm.png) 6px center no-repeat !important;
+     background-size: auto 80% !important;
+     border-bottom: 1px solid #fb7;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     font-size: 12.5pt;
+}
+
+.warning p {
+     padding: 5px 0 0;
+}
+
+.warning > br + br {
+     display: none;
+}
+
+.warning textarea {
+     width: 100%;
+     resize: none;
+     white-space: pre-wrap;
+     word-break: break-all;
+     height: 100% !important;
+     font-size: 8pt;
+     border: none;
+}
+
+.warning .formaction {
+     background: none !important;
+}
+
+.warning button {
+     min-width: 450px;
+     margin-bottom: 5px;
+     margin-right: 0;
+}
+
+.warning table {
+     margin-bottom: 15px;
+     border: 1px solid #fb7;
+}
+
+.warning tr {
+     background: #ffe !important;
+     border: 1px solid #fb7;
+}
+
+.warning tr:last-child {
+     background: #fff !important;
+     height: 80px;
+     white-space: nowrap;
+}
+
+.warning table td:first-child {
+     font-weight: bold;
+     vertical-align: top;
+}
+
+.warning a[href*="jump"]::before {
+     content: "\279F\00A0";
+     font-size: 14pt;
+     display: inline-block;
+     padding: 3px 0;
+}
+
+.proxyfooter {
+     font-size: 8pt;
+     padding: 0 5px 5px;
+     margin: -50px 8px 0 260px;
+     min-width: 600px;
+}
+
+.proxyfooter p {
+     text-align: right !important;
+     line-height: 115%;
+     color: #6b4612;
 }
 
 /* console error messages */
 
-div.sorry {
-     padding: 20px;
-     background: #ddf;
+.sorry {
+     padding: 20px 20px 20px 60px;
+     background: #fff url(/themes/console/images/info/errortriangle.png) 10px center no-repeat;
+     background: url(/themes/console/images/info/errortriangle.png) 10px center no-repeat, linear-gradient(to bottom, #fff, #ffe);
      margin: -1px 1px 0 200px;
+     min-width: 460px;
      border: 1px solid #89f;
+     box-shadow: inset 0 0 0 1px #ff9;
      text-align: justify;
      word-wrap: break-word;
      font-weight: bold;
-     color: #001;
+     color: #351d02;
 }
 
-div.sorry hr {
+.sorry hr {
      color: #89f;
-     background: #89f;
+     background: #8c4d16;
      height: 1px;
-     border: 0px solid #89f;
+     border: 0 solid #89f;
      margin: 10px 0;
 }
 
-div.toolbar {
-     margin: 0em 0em 2em 0em;
-     font-weight: bold;
-     display: none !important;
-}
-
-/* Side panel */
+/* Sidebar */
 
-div.routersummaryouter {
+.routersummaryouter {
      float: left;
      width: 193px;
      margin: 0;
      padding: 0;
      border: 0;
      clear: left; /* fixes a bug in Opera */
-     position: absolute;/* so no interference with /home app icons */
+     position: absolute; /* so no interference with /home app icons */
 }
 
-div.routersummary {
-     background: #eef;
+.routersummary {
+     background: #eef url(images/bg0.png);
+     background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.2)), url(images/bg0.png);
      width: 193px;
      color: inherit;
      margin: 0 0 5px;
      padding: 9px 1px 7px 1px;
      text-align: center !important;
      border: 1px solid #89f;
-     border-bottom: 1px solid #89f;
-     border-right: 1px solid #89f;
      word-wrap: break-word;
-     font: 9pt/125% !important;
-     -moz-border-radius: 3px 0 0 3px;
-     -khtml-border-radius: 3px 0 0 3px;
-     border-radius: 3px 0 0 3px;
+     font-size: 9pt;
+     line-height: 125%;
+}
+
+.routersummary img[src$="i2plogo.png"] {
+    margin-top: 3px;
+     margin-left: 0;
+     width: 173px;
+     height: auto;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+.routersummary a {
+     padding: 2px;
 }
 
-div.routersummary input[type=text] {
+.routersummary input[type=text] {
      text-align: right !important;
 }
 
+.routersummary button[type="submit"] {
+     min-width: 87px;
+     margin: 2px 2px 1px;
+}
+
 #xhr {
-     margin-top: 15px;     
+     margin-top: 15px;
 }
 
-div.routersummary hr {
+.routersummary hr {
      color: #89f;
      background: #89f;
-     height: 0px;
+     height: 0;
      border-bottom: 1px solid #89f;
      margin: 8px -1px 7px -1px;
 }
 
-div.routersummary h3 {
-     border: 0px solid #f00;
+.routersummary b {
+     text-transform: capitalize;
+}
+
+.routersummary h3 {
+     border: none;
      font-size: 9.5pt;
      letter-spacing: 0.05em;
      margin: -7px -1px -8px -1px;
      padding: 3px 0;
-     background: #f;
+     background: #fff url(images/tinytitle.png) center center repeat;
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%) !important;
      text-transform: uppercase;
 }
 
-div.routersummary h4 {
+.routersummary h3:hover {
+     background: linear-gradient(to bottom, #fff 50%, #ffd 50%) !important;
+}
+
+.routersummary h3:hover a {
+     color: #f60 !important;
+}
+
+.routersummary h3:active {
+     box-shadow: inset 2px 2px 2px #777;
+}
+
+.routersummary h3:active a {
+     color: #f90 !important;
+}
+
+.routersummary h4 {
      border: 0;
      border-bottom: 0 !important;
      font-size: 8.5pt;
      letter-spacing: 0.05em;
-     margin: -7px -1px -8px -1px !important;
-     padding: 8px 0;
+     margin: -7px -1px -7px -1px !important;
+     padding: 8px 2px;
      text-transform: capitalize;
      text-decoration: none !important;
-     color: #2b2;
-     line-height: 90%;
-     background: #fff url(../light/images/magic.png);
+     color: #1f7096;
+     line-height: 110%;
+     background: #fff url(images/bg2.png);
+     background: linear-gradient(to right, #eff2ff 0%, #fff 50%, #eff2ff);
+     box-shadow: inset 0 0 2px 1px #f2f7fa;
 }
 
-div.routersummary h3 a, div.routersummary h4 a {
+.routersummary h3 a, .routersummary h4 a {
      text-decoration: none;
+     white-space: normal;
+     display: inline-block;
+     width: 100%;
+     width: calc(100% - 5px);
 }
 
-div.routersummary ul {
+.routersummary ul {
      text-align: left !important;
 }
 
-div.routersummary table {
+.routersummary table {
+     table-layout: fixed;
      border: 0;
      text-align: center !important;
-     margin: -5px 0px 5px 0px;
-     width: 193px !important;
+     margin: -5px 0 -5px 0;
+     width: 192px !important;
      overflow: hidden;
      font-size: 8pt;
-     padding: 0 -12px;
+     padding: 0;
      background-image: none !important;
      background-color: transparent !important;
 }
 
-div.routersummary tr {
+.routersummary tr {
      background-image: none !important;
      background-color: transparent !important;
      border: 0 !important;
 }
 
-div.routersummary form {
-     margin: 0;     
-}
-
-div.newsheadings {
-     text-align: right;
-     margin: 0 5px 0 -20px;
-     padding: 0;
-     font-size: 8pt;
+.routersummary td {
+     padding: 0 3px;
+     background-image: none !important;
+     border: 0 !important;
 }
 
-div.newsheadings li {
-     list-style: none outside url('images/newsbullet_mini.png');
-     margin: 0 -4px 2px 8px;
+#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+     margin-bottom: -5px !important;
+     margin-top: -6px !important;
 }
 
-div.newsheadings ul {
-     margin: 0 5px -3px 38px;
-     padding: 0;
+#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, #sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+   content: "";
+   display: inline-block;
+   min-height: 14px;
 }
 
-div.tunnels table {
-     margin: 0 -7px !important;
-     width: 193px;
+#sb_peers td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, #sb_bandwidth td:first-child, #sb_general td:first-child, #sb_shortgeneral td:first-child {
+     white-space: nowrap;
 }
 
-div.tunnels table {
-     margin: -2px 0px -4px 0px !important;
-     text-align: center !important;
-     width: 190px;
+#sb_bandwidth td:nth-child(2) {
+     white-space: nowrap;
+     width: 60%;
 }
 
-.tunnels tr {
-     padding: 2px 0 !important;
+#sb_localid {
+     margin: -3px 0 -1px;
 }
 
-.tunnels a {
-     text-transform: capitalize;
+#sb_version {
+     margin: -1px 0;
 }
 
-.tunnels td:first-child {
-     width: 16px !important;
-     padding-right: 0px;
-     text-align: left;
+#sb_uptime {
+     margin: -1px 0 -3px;
 }
 
-.tunnels td:last-child {
-     width: 12px;
-     text-align: right;
-     margin-right: -2px;
+#sb_internals, #sb_services, #sb_advanced {
+     margin-top: -3px !important;
 }
 
-div.refresh {
-     margin-top: 10px !important;
-     margin-bottom: 10px !important;
-     padding: 2px 0 !important;
+#sb_internals a, #sb_services a, #sb_advanced a {
+     display: inline-block;
+     padding: 2px;
+     max-width: 178px;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     vertical-align: middle !important;
 }
 
-div.routersummary p {
-     padding: 0;
+#sb_localtunnels {
+     margin: -6px -2px -6px 0 !important;
+     text-align: center !important;
+     width: 196px;
+     box-sizing: border-box;
 }
 
-div.routersummary a:link, div.routersummary a:visited {
-     text-shadow: 0px 0px 1px rgba(0, 0, 32, 0.3);
+#sb_localtunnels td {
+     padding: 1px !important;
 }
 
-div.routersummary a:hover {
-     text-shadow: 0px 0px 1px rgba(255, 96, 0, 0.7);
-     color: #f60;
+#sb_localtunnels tr:nth-child(odd) td {
+     background: rgba(220,220,255,0.5);
 }
 
-div.routersummary td {
-     padding: 0 4px;
-     background-image: none !important;
-     border: 0 !important;
+#sb_localtunnels tr:nth-child(even) td {
+     background: rgba(230,230,255,0.5);
 }
 
-div.main {
-     margin: 0px 1px 0px 200px;
-     padding: 15px 15px 10px 15px;
-     background: #eef;
-     border: 1px solid #89f;
-     border-bottom: 1px solid #89f;
-     border-right: 1px solid #89f;
-     border-top: 0;
-     text-align: left;
-     color: #001;
-     min-width: 510px;
-     -moz-border-radius: 0 0 3px 0;
-     -khtml-border-radius: 0 0 3px 0;
-     border-radius: 0 0 3px 0;
-     background: #eef url("/themes/snark/ubergine/images/hat.png") no-repeat scroll right bottom !important;
+#sb_localtunnels tr:hover td {
+     background: #ffe !important;
+     transition: ease background 0.3s;
 }
 
-div.main ul {
-     margin: -10px 0 10px -10px;
+#sb_localtunnels a {
+     text-transform: capitalize;
+     display: inline-block;
+     width: 100%;
 }
 
-div.main li {
-     padding: 0 0 5px 0;
-     list-style: square;
-     word-wrap: break-word;
-     margin-right: 20px;
+#sb_localtunnels td:first-child {
+     width: 12px !important;
+     padding-right: 0;
+     text-align: left;
 }
 
-div.main li:first-child {
-     padding-top: 15px;
+#sb_localtunnels td:nth-child(2) {
+     width: 156px;
 }
 
-div.main li b {
-     color: #161!important;
-     letter-spacing: 0.01em;
-     font-size: 9.5pt;
-     line-height: 170%;
+#sb_localtunnels td:last-child {
+     width: 12px;
+     text-align: right;
+     padding-right: 2px !important;
 }
 
-div.main hr:last-child {
-     margin: 15px 0 10px 0;
+#sb_warning {
+     border-bottom: 1px solid #89f !important;
 }
 
-div.main textarea {
-     width: 98% !important;
-     margin: 2px 0 2px 5px;
-     min-height: 96px;
+#sb_warning + hr {
+     margin-bottom: 5px;
 }
 
-div.main h2 {
-     margin-bottom: 10px !important;
-     -moz-border-radius: 0 3px 0 0;
-     -khtml-border-radius: 0 3px 0 0;
-     border-radius: 0 3px 0 0;
+.sb_notice {
+     background: #fff;
+     border: 1px solid #89f;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #bbb;
+     margin: -5px 1px -6px;
+     padding: 5px 3px;
 }
 
-div.welcome {
-     margin-top: 5px;
+p:empty + .sb_notice {
+     margin-top: 7px;
 }
 
-div.main h2:first-child, div.main h3:first-child {
-     margin-top: 0px;
-     margin-bottom: -5px;
+.routersummary form {
+     margin: -2px 0;
 }
 
-.topness {
+div.newsheadings {
      text-align: right;
-     font-size: 8pt;  
-}
-
-div.wideload h2 {
-     margin-bottom: 0px !important;
+     margin: -1px 5px -5px -23px;
+     padding: 0;
+     font-size: 8pt;
 }
 
-div.wideload h3:first-child {
-     margin-top: 0 !important;
+div.newsheadings li {
+     list-style: none outside url(images/newsbullet_mini.png);
+     margin: 0 -4px 2px 8px;
 }
 
-div.wideload h3 {
-     margin-top: 15px !important;
-     margin-bottom: 0px !important;
+div.newsheadings li:first-child {
+     margin-top: -3px;
 }
 
-div.wideload p !important {
-     margin-top: 5px;
+div.newsheadings ul {
+     margin: 0 5px -3px 38px;
+     padding: 0;
 }
 
-div.news {
-     margin: -1px 1px 0 200px;
-     background: #ffffc0;
-     border: 1px solid #89f;
-     border-bottom: 1px solid #89f;
-     border-right: 1px solid #89f;
-     text-align: right;
-     color: #770;
-     min-width: 500px;
-     padding: 3px 10px 3px 10px;
-     font-size: 8pt;
+div.refresh {
+     margin-top: 10px !important;
+     margin-bottom: 10px !important;
+     padding: 2px 0 !important;
 }
 
-/* convert the list entry to our title */
-
-div.news li {
-     text-align: justify;
-     list-style: none;
-     margin: 15px 15px -10px -20px;
-     padding: 0px 0 15px 0;
-     border-bottom: 2px dotted #cc7;
-     border-top: 0px solid #cc7;
-     padding: 3px 5px 5px 0;
-     font-size: 10pt;
-     color: #540;
-     text-transform: capitalize;
+.routersummary p {
+     padding: 0;
 }
 
-div.news h3 {
-     background: none !important;
-     text-align: left;
-     border: none !important;
-     border-bottom: 1px dotted !important;
-     -moz-box-shadow: none;
-     -hktml-box-shadow: none;
-     box-shadow: none;
-     font-size: 10pt !important;
-     letter-spacing: 0.05em;
-     text-transform: capitalize !important;
-     text-shadow: none !important;
-     padding: 5px 10px 3px;
-     margin: 10px 10px -7px !important;
+.routersummary a:hover {
+     color: #f60;
 }
 
-div.news p {
-     color: #330;
-     font-size: 9pt;
-     margin-bottom: -10px;
-}
-/*
-div.news p:first-child {
-     padding-top: 15px !important;
+.routersummary a img:first-child {
+     opacity: 0.8;
+     border: none;
 }
 
-
-div.news p:nth-child(2n) {
-     padding-top: 15px !important;
-}
-*/
-div.news p:last-child {
-     margin-bottom: 10px;
+.routersummary a img:first-child:hover, .routersummary a img:first-child:active {
+     opacity: 1;
+     filter: drop-shadow(0 0 1px #89f);
 }
 
-div.news a:link {
-     color: #663;
-     text-shadow: 0px 0px 1px rgba(128, 128, 48, 0.3);
+.routersummary a[href="/"], .routersummary a[href="/console"] {
+     outline: none !important;
 }
 
-div.news a:visited {
-     color: #773 !important;
-     text-shadow: 0px 0px 1px rgba(128, 128, 48, 0.3);
+.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img {
+     filter: drop-shadow(0 0 1px #f60) saturate(200%);
 }
 
-div.news hr {
-     color: #cc7;
-     background: #cc7;
-     height: 1px;
-     border: 0px solid #cc7;
-     margin: 10px 0 2px 0;
-}
+/* end Sidebar */
 
-div.news hr:last-child {
-     margin-bottom: 10px !important;
+a:link {
+     color: #33a;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
 }
 
-div.confignav {
-     padding: 15px 0;
-     margin: -16px -16px 5px -16px;
-     border: 1px solid #89f;
-     font-size: 8.5pt;
+a:visited {
+     color: #448 !important;
+     text-decoration: none;
+     font-weight: bold;
 }
 
-div.confignav a {
+a:hover, a:visited:hover, a:focus, a:visited:focus {
+     color: #f60 !important;
+     text-decoration: none;
+     font-weight: bold;
+     outline: none;
 }
 
-div.configure {
-     margin: 1px -20px 0 -20px;
-     padding: 0px 20px 0px 20px;
+a:active, a:visited:active {
+     color: #f93 !important;
+     text-decoration: none;
+     font-weight: bold;
 }
 
-div.configure hr {
-     margin: 15px 0;
+a.script {
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
+pre {
+     margin: 0 20px;
+     overflow: auto;
+     font-size: 8pt !important;
+     width: 95%;
+     padding-top: 10px;
+}
+
+tt, code {
+     font-size: 9pt;
+     font-weight: bold !important;
+     color: darkgreen;
+}
+
+/* buttons & inputs */
+
+select {
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     background: url(images/dropdown.png) right center no-repeat #fff;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     margin: 3px 5px;
+     vertical-align: middle;
+     min-width: 160px;
+     border-radius: 2px;
+     border: 1px solid #bbb;
+     box-shadow: inset 0 0 0 1px #fff;
+     padding: 4px 16px 4px 4px;
+     text-overflow: ellipsis;
+     color: #333;
+     cursor: pointer;
+}
+
+select option {
+     background: #fff;
+}
+
+select:hover, select:active {
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+}
+
+select:focus {
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     box-shadow: 0 0 0 1px #89f;
+}
+
+select:focus {
+     color: #000;
+}
+
+select::-ms-expand {
+     display: none;
+}
+
+select[name="newlogclass"] {
+     width: 80%;
+     width: calc(100% - 180px);
+     margin-right: 0;
+}
+
+select[name="newlogclass"] {
+     margin-right: 0;
+}
+
+.optbox {
+     vertical-align: middle;
+     margin-right: 0;
+}
+
+.homelinkedit .optbox {
+     margin: 0;
+}
+
+#config_homepage .delete {
+     float: left !important;
+     margin-left: 5px;
+}
+
+input {
+     margin: 3px 5px 3px 0;
+}
+
+input[type="radio"], input[type="checkbox"] {
+     min-width: 16px !important;
+     min-height: 16px !important;
+     vertical-align: sub;
+     background: none;
+     margin: 6px;
+}
+
+input[type="radio"]:hover, input[type="radio"]:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus {
+     filter: drop-shadow(0 0 2px #89f);
+     box-shadow: inset 0 0 1px 2px #89f;
+     outline: none;
+}
+
+input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover,
+input[type="checkbox"][disabled]:focus, input[type="radio"][disabled]:focus {
+     box-shadow: none;
+     filter: none;
+}
+
+label {
+     cursor: pointer;
+}
+
+label:hover {
+     color: #03050f;
+}
+
+label[for="0"] {
+     cursor: default;
+     color: #0c153d;
+}
+
+.main#config_clients label[for="0"] {
+     cursor: default;
+     color: #0c153d;
+}
+
+input[type="file"] {
+     margin: 3px 5px;
+}
+
+input[type="text"], input[type="password"] {
+     margin: 3px 5px 3px 5px;
+     vertical-align: middle;
+     min-width: 160px;
+     border: 1px solid #bbb;
+     box-shadow: inset 1px 1px 1px #ddd;
+     border-radius: 2px;
+     padding: 4px;
+     color: #333;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+     box-shadow: inset 0 0 0 1px #89f, 0 0 1px rgba(136, 153, 255, 0.4);
+     color: #000;
+}
+
+input[type="text"][readonly], input[type="text"][readonly]:focus {
+     background: #efefef;
+     box-shadow: inset 1px 1px 1px #ddd;
+     color: #333;
+}
+
+button, input, select {
+     font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     color: #333;
+}
+
+button:hover, input[type="submit"]:hover, input[type="reset"]:hover {
+     background: #fff;
+     background: linear-gradient(to bottom, #ddd, #fff);
+}
+
+button:active, input[type="submit"]:active, input[type="reset"]:active {
+     background: #ddd;
+}
+
+input.search[type="text"] {
+     background: #fff url(/themes/console/images/buttons/search.png) no-repeat 2px center;
+     padding: 3px 3px 3px 24px;
+     min-height: 22px;
+     border: 1px solid #bbb;
+     color: #333 !important;
+}
+
+input[name="refreshInterval"] {
+     text-align: right;
+}
+
+input[type="submit"], input[type="reset"], button, .optbox {
+     cursor: pointer;
+}
+
+/* accessibility tweak - colors rather than focus rings where possible */
+
+.optbox:hover, .optbox:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus {
+     filter: drop-shadow(0 0 2px #89f);
+     box-shadow: 0 0 0 1px #89f;
+     border: 0;
+     outline: none;
+}
+
+.optbox:disabled:hover, input:disabled:hover {
+     filter: none;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+     outline: none;
+     border: none;
+}
+
+/* end accessibility */
+
+/* confignet tidyup */
+
+#netconfig .optbox {
+     margin: 10px 6px 2px !important;
+     display: inline-block !important;
+     vertical-align: sub !important;
+}
+
+#netconfig .optbox:first-child {
+     margin-top: 6px !important;
+     margin-bottom: 6px !important;
+}
+
+#netconfig .optbox:last-child, #netconfig .optbox[value="only"], #netconfig .optbox[name="disableUDP"], #netconfig .optbox[value="disabled"] {
+     margin-bottom: 6px !important;
+}
+
+#netconfig input[type="text"] + br + .optbox, #netconfig .optbox[name="ntcpAutoPort"] {
+     margin-top: 3px !important;
+}
+
+#netconfig input[name*="ost"] {
+     width: 250px !important;
+}
+
+/* end confignet tidyup */
+
+/* graphical buttons */
+
+input[type="submit"], input[type="reset"], button {
+     border: 1px solid #999;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;
+     background: #eee;
+     background: linear-gradient(to bottom, #fff, #ddd);
+     color: #333;
+     margin: 3px 8px 3px 0;
+     font: 9pt "Droid Sans", Ubuntu, "Noto Sans", "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+     padding: 4px 5px;
+     text-decoration: none;
+     border-radius: 2px;
+     opacity: 1;
+     background-size: 14px auto, 100% 100% !important;
+}
+
+button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus {
+     background: linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #89f;
+     color: #222;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #89f;
+}
+
+button:active, input[type="submit"]:active, input[type="reset"]:active {
+     border: 1px solid #999;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #555;
+     background-blend-mode: luminosity;
+     color: #555;
+}
+
+input.accept, button.accept {
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.accept:hover, button.accept:hover,
+input.accept:focus, button.accept:focus {
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.accept[value^="Unban"], button.accept[value^="Unban"] {
+     background: url(/themes/console/images/buttons/unban.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.accept[value^="Unban"]:hover, button.accept[value^="Unban"]:hover,
+input.accept[value^="Unban"]:focus, button.accept[value^="Unban"]:focus {
+     background: url(/themes/console/images/buttons/unban.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.accept[value^="Create"], button.accept[value^="Create"] {
+     background: url(/themes/console/images/buttons/create.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.accept[value^="Create"]:hover, button.accept[value^="Create"]:hover,
+input.accept[value^="Create"]:focus, button.accept[value^="Create"]:focus {
+     background: url(/themes/console/images/buttons/create.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.accept[value^="Filter"], button.accept[value^="Filter"] {
+     background: url(/themes/console/images/buttons/filter.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.accept[value^="Filter"]:hover, button.accept[value^="Filter"]:hover,
+input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus {
+     background: url(/themes/console/images/buttons/filter.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.add, button.add {
+     background: url(/themes/console/images/buttons/add.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.add:hover, button.add:hover,
+input.add:focus, button.add:focus {
+     background: url(/themes/console/images/buttons/add.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.add[value^="Adjust"], button.add[value^="Adjust"] {
+     background: url(/themes/console/images/buttons/edit2.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.add[value^="Adjust"]:hover, button.add[value^="Adjust"]:hover,
+input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus {
+     background: url(/themes/console/images/buttons/edit2.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.cancel, button.cancel {
+     background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.cancel:hover, button.cancel:hover,
+input.cancel:focus, button.cancel:focus {
+     background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.accept[value^="Show"], button.accept[value^="Show"],
+input.check[value^="View"], button.check[value^="View"] {
+     background: url(/themes/console/images/buttons/show.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.accept[value^="Show"]:hover, button.accept[value^="Show"]:hover,
+input.check[value^="View"]:hover, button.check[value^="View"]:hover,
+input.accept[value^="Show"]:focus, button.accept[value^="Show"]:focus,
+input.check[value^="View"]:focus, button.check[value^="View"]:focus {
+     background: url(/themes/console/images/buttons/show.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.cancel[value^="Hide"], button.cancel[value^="Hide"],
+input.delete[value^="Do not view"], button.delete[value^="Do not view"] {
+     background: url(/themes/console/images/buttons/hide.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.cancel[value^="Hide"]:hover, button.cancel[value^="Hide"]:hover,
+input.delete[value^="Do not view"]:hover, button.delete[value^="Do not view"]:hover,
+input.cancel[value^="Hide"]:focus, button.cancel[value^="Hide"]:focus,
+input.delete[value^="Do not view"]:focus, button.delete[value^="Do not view"]:focus {
+     background: url(/themes/console/images/buttons/hide.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.check, button.check {
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.check:hover, button.check:hover,
+input.check:focus, button.check:focus {
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.check[value$="updates"], button.check[value$="updates"] {
+     background: url(/themes/console/images/buttons/update.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.check[value$="updates"]:hover, button.check[value$="updates"]:hover,
+input.check[value$="updates"]:focus, button.check[value$="updates"]:focus {
+     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.delete, button.delete {
+     background: url(/themes/console/images/buttons/delete.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.delete:hover, button.delete:hover,
+input.delete:focus, button.delete:focus {
+     background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.delete[value^="Ban"], button.delete[value^="Ban"] {
+     background: url(/themes/console/images/buttons/ban.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.delete[value^="Ban"]:hover, button.delete[value^="Ban"]:hover,
+input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus {
+     background: url(/themes/console/images/buttons/ban.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.download, button.download {
+     background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.download:hover, button.download:hover,
+input.download:focus, button.download:focus {
+     background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.download[value^="Join"], button.download[value^="Join"] {
+     background: url(/themes/console/images/buttons/users.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.download[value^="Join"]:hover, button.download[value^="Join"]:hover,
+input.download[value^="Join"]:focus, button.download[value^="Join"]:focus {
+     background: url(/themes/console/images/buttons/users.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.download[value$="from File"], button.download[value$="from File"],
+input.download[value$="from file"], button.download[value$="from file"] {
+     background: url(/themes/console/images/buttons/from-file.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.download[value$="from File"]:hover, button.download[value$="from File"]:hover,
+input.download[value$="from file"]:hover, button.download[value$="from file"]:hover,
+input.download[value$="from File"]:focus, button.download[value$="from File"]:focus,
+input.download[value$="from file"]:focus, button.download[value$="from file"]:focus {
+     background: url(/themes/console/images/buttons/from-file.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.download[value^="Dump"], button.download[value^="Dump"] {
+     background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.download[value^="Dump"]:hover, button.download[value^="Dump"]:hover,
+input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus {
+     background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.go, button.go, input[value="GO"] {
+     background: url(/themes/console/images/buttons/go.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.go:hover, button.go:hover, input[value="GO"]:hover,
+input.go:focus, button.go:focus, input[value="GO"]:focus {
+     background: url(/themes/console/images/buttons/go.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.go[value^="Create"], button.go[value^="Create"] {
+     background: url(/themes/console/images/buttons/create-file.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.go[value^="Create"]:hover, button.go[value^="Create"]:hover,
+input.go[value^="Create"]:focus, button.go[value^="Create"]:focus {
+     background: url(/themes/console/images/buttons/create-file.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.reload, button.reload {
+     background: url(/themes/console/images/buttons/restore.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.reload:hover, button.reload:hover,
+input.reload:focus, button.reload:focus {
+     background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.reload[value$="restart"], button.reload[value$="restart"] {
+     background: url(/themes/console/images/buttons/restart.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.reload[value$="restart"]:hover, button.reload[value$="restart"]:hover,
+input.reload[value$="restart"]:focus, button.reload[value$="restart"]:focus {
+     background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.reload[value^="Update"], button.reload[value^="Update"] {
+     background: url(/themes/console/images/buttons/update.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.reload[value^="Update"]:hover, button.reload[value^="Update"]:hover,
+input.reload[value^="Update"]:focus, button.reload[value^="Update"]:focus {
+     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.reload[value="Force GC"], button.reload[value="Force GC"] {
+     background: url(/themes/console/images/buttons/clean.png) no-repeat 7px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.reload[value="Force GC"]:hover, button.reload[value="Force GC"]:hover,
+input.reload[value="Force GC"]:focus, button.reload[value="Force GC"]:focus {
+     background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.stop, button.stop {
+     background: url(/themes/console/images/buttons/shutdown.png) no-repeat 7px 6px, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+input.stop:hover, button.stop:hover,
+input.stop:focus, button.stop:focus {
+     background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 7px 6px, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.search {
+     background: url(/themes/console/images/buttons/search.png) no-repeat 7px 6px, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 23px;
+}
+
+button.search:hover,
+button.search:focus {
+     background: url(/themes/console/images/buttons/search_hover.png) no-repeat 7px 6px, linear-gradient(to bottom, #ddd, #fff);
+}
+
+/* client config buttons aka project "X" */
+
+button.control {
+     font-size: 0 !important;
+     text-indent: -99999px !important;
+     background-size: 16px 16px, 100% 100% !important;
+     padding: 12px !important;
+}
+
+button.accept.control {
+     background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.accept.control:hover, button.accept.control:focus {
+     background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.stop.control {
+     background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.stop.control:hover, button.stop.control:focus {
+     background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.add.control {
+     background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.add.control:hover, button.add.control:focus {
+     background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.delete.control {
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.delete.control:hover, button.delete.control:focus {
+     background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.check.control {
+     background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.check.control:hover, button.check.control:focus {
+     background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.download.control {
+     background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.download.control:hover, button.download.control:focus {
+     background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner  {
+     outline: none;
+     border: none;
+}
+
+/* end project "X" */
+
+/* sidebar buttons */
+
+.routersummary button {
+     margin: 0 1px -3px;
+     min-width: 87px;
+}
+
+.routersummary .reload, .routersummary .stop {
+     text-indent: -99999px;
+     background-size: 16px 16px, 100% 100% !important;
+}
+
+.routersummary .reload {
+     background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+}
+
+.routersummary .reload:hover, .routersummary .reload:focus {
+     background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     border: 1px solid #89f;
+}
+
+.routersummary .reload:active, .routersummary .stop:active, .routersummary .download:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #555;
+     border: 1px solid #999 !important;
+}
+
+.routersummary .stop {
+     background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.routersummary .stop:hover, .routersummary .stop:focus {
+     background: url(/themes/console/images/buttons/shutdown_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #89f;
+}
+
+/* Show text on context specific buttons (eg deferred shutdown) */
+
+.routersummary .reload[value="restartImmediate"], .routersummary .stop[value="shutdownImmediate"], .routersummary .reload[value="Reseed"] {
+     text-indent: 0;
+     text-align: left;
+     min-width: 0 !important;
+     padding: 5px 7px 5px 23px !important;
+     text-transform: capitalize;
+}
+
+.routersummary .cancel {
+     text-transform: capitalize;
+}
+
+.routersummary .reload[value="restartImmediate"] {
+     background: url(/themes/console/images/buttons/restart.png) center left 7px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     background-size: 14px auto, 100% 100% !important;
+}
+
+.routersummary .reload[value="restartImmediate"]:hover, .routersummary .reload[value="restartImmediate"]:focus, .routersummary .reload[value="restartImmediate"]:active {
+     background: url(/themes/console/images/buttons/restart_hover.png) center left 7px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     background-size: 14px auto, 100% 100% !important;
+}
+
+.routersummary .stop[value="shutdownImmediate"] {
+     background: url(/themes/console/images/buttons/shutdown.png) center left 7px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     background-size: 14px auto, 100% 100% !important;
+}
+
+.routersummary .stop[value="shutdownImmediate"]:hover, .routersummary .stop[value="shutdownImmediate"]:focus, .routersummary .stop[value="shutdownImmediate"]:active {
+     background: url(/themes/console/images/buttons/shutdown_hover.png) center left 7px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     background-size: 14px auto, 100% 100% !important;
+}
+
+.routersummary .reload[value="Reseed"] {
+     background: url(/themes/console/images/buttons/download.png) center left 7px no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     background-size: 14px auto, 100% 100% !important;
+}
+
+.routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus, .routersummary .reload[value="Reseed"]:active {
+     background: url(/themes/console/images/buttons/download.png) center left 7px no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     background-size: 14px auto, 100% 100% !important;
+}
+
+.routersummary .download {
+     background: url(/themes/console/images/buttons/download.png) 7px center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active {
+     background: url(/themes/console/images/buttons/download.png) 7px center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+/* end sidebar buttons */
+/* end buttons & inputs */
+
+.main {
+     margin: 0 1px 0 200px;
+     padding: 15px 15px 10px 15px;
+     background: #eff1ff;
+     border: 1px solid #89f;
+     border-top: 0;
+     text-align: left;
+     color: #0c153d;
+     min-width: 540px;
+     background: #eef url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom !important;
+     background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, url(images/bg0.png) repeat scroll top left !important;
+     background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.1)), url(images/bg0.png) !important;
+}
+
+.main#news h3 {
+     padding: 3px 0;
+     font-size: 10pt;
+     border: none;
+     border-bottom: 1px solid #bfc9ff;
+     background: none;
+}
+
+.main#news p {
+     padding: 0 10px 3px;
+}
+
+.main ul {
+     margin: -10px 0 10px -10px;
+}
+
+.main li {
+     padding: 0 0 5px 0;
+     list-style: square;
+     word-wrap: break-word;
+     margin-right: 20px;
+}
+
+.main li:first-child {
+     padding-top: 15px;
+}
+
+.main li b {
+     color: #1f7096 !important;
+     letter-spacing: 0.01em;
+     font-size: 9.5pt;
+     line-height: 170%;
+}
+
+.main hr:last-child {
+     margin: 15px 0 10px 0;
+}
+
+.main textarea {
+     width: 98%;
+     width: calc(100% - 5px);
+     margin: 2px 0 2px 5px;
+     min-height: 96px;
+     resize: none;
+     box-shadow: inset 1px 1px 1px #ddd;
+     border: 1px solid #bbb;
+     border-radius: 2px;
+     padding: 3px 4px;
+     color: #333;
+}
+
+.main textarea:focus {
+     box-shadow: inset 0 0 0 1px #89f;
+     box-shadow: inset 0 0 0 1px #89f, 0 0 1px rgba(136, 153, 255, 0.4);
+     color: #000;
+}
+
+.main h2 {
+     margin-bottom: 10px !important;
+}
+
+.main#home .welcome h2 {
+     margin: -9px -10px -8px;
+}
+
+.main#home .langbox {
+     margin-right: -7px;
+}
+
+div.welcome {
+     margin-top: 0;
+}
+
+.welcome + div .tidylist {
+     line-height: 150% !important;
+}
+
+.main#dns, .main#webmail, .main#torrents {
+     padding: 0 !important;
+     min-width: 570px;
+}
+
+.main#jardump {
+     padding: 0;
+     overflow-y: hidden !important;
+     min-width: 570px;
+}
+
+.main#proof {
+     padding: 0;
+     min-width: 570px;
+}
+
+.main#tunnelmgr {
+     padding: 0 10px;
+     min-width: 550px;
+}
+
+.main#help {
+     background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.1)), url(images/bg0.png) !important;
+}
+
+.welcome h2 {
+     margin-top: 0;
+}
+
+.main h2:first-child, .main h3:first-child {
+     margin-top: 0;
+}
+
+.topness {
+     text-align: right;
+     font-size: 8pt;
+}
+
+div.wideload h2 {
+     margin-bottom: 0 !important;
+}
+
+div.wideload h3 {
+     margin-top: 15px !important;
+     margin-bottom: 0 !important;
+}
+
+div.wideload p  {
+     margin-top: 5px !important;
+}
+
+div.news {
+     margin: -1px 1px 0 200px;
+     background: #f9f9ea url(images/bg1.png);
+     background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0.5)), url(images/bg1.png) #efefe0;
+     border: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+     border-right: 1px solid #89f;
+     text-align: right;
+     color: #331e0c;
+     min-width: 540px;
+     padding: 3px 10px 3px 10px;
+     font-size: 8pt;
+}
+
+/* convert the list entry to our title */
+
+div.news li {
+     text-align: justify;
+     list-style: none;
+     margin: 15px 15px -10px -20px;
+     border-bottom: 2px dotted #331e0c;
+     border-top: 0 solid #331e0c;
+     padding: 3px 5px 5px 0;
+     font-size: 10pt;
+     color: #331e0c;
+     text-transform: capitalize;
+}
+
+div.news h3 {
+     text-align: left;
+     border: none !important;
+     border-bottom: 1px dotted !important;
+     box-shadow: none;
+     font-size: 10pt !important;
+     letter-spacing: 0.05em;
+     text-transform: capitalize !important;
+     text-shadow: none !important;
+     padding: 5px 0 3px 10px;
+     margin: 10px 10px -7px !important;
+     letter-spacing: 0.1em;
+}
+
+.newsentry h3 {
+     letter-spacing: 0.1em;
+     box-shadow: none;
+     background: url(/themes/console/images/info/newspaper.png) left center no-repeat !important;
+     background-size: 16px 16px !important;
+     padding-left: 22px !important;
+}
+
+.newsentry h3 a {
+     letter-spacing: 0.08em !important;
+     font-size: 10pt !important;
+}
+
+.newsentry p {
+     line-height: 140% !important;
+}
+
+div.news p {
+     color: #331e0c;
+     font-size: 9pt;
+     margin-bottom: -10px;
+}
+
+div.news p:last-child {
+     margin-bottom: 10px;
+}
+
+div.news a {
+     color: #663;
+}
+
+div.news a:hover, div.news a:visited:hover {
+     color: #f60 !important;
+}
+
+div.news a:visited {
+     color: #773 !important;
+}
+
+div.news hr {
+     color: #cc7;
+     background: #775628;
+     height: 1px;
+     border: 0 solid #cc7;
+     margin: 10px 0 2px !important;
+     opacity: 0.7;
+}
+
+div.news hr:last-child {
+     margin-bottom: 10px !important;
+}
+
+.newsentry + hr {
+     margin-bottom: 5px !important;
+}
+
+.newsAuthor {
+     padding-left: 14px;
+     float: right;
+     background: url(/themes/console/images/info/author.png) left 2px bottom 3px no-repeat;
+     background-size: 10px 10px;
+     font-size: 8.5pt;
+     padding: 2px 4px 0 14px;
+     display: inline-block;
+     opacity: 0.8;
+     text-transform: none;
+}
+
+.newsDate {
+     font-size: 10pt !important;
+}
+
+#newsStatus {
+     float: left;
+     text-align: justify;
+}
+
+#newsDisplay {
+     white-space: nowrap;
+     margin-left: 10px;
+     color: #663;
+     font-weight: bold;
+}
+
+#news #newsDisplay, #news #newsStatus {
+     margin-top: 3px !important;
+     margin-bottom: 3px !important;
+     display: inline-block;
+}
+
+.messages #newsStatus, .messages #newsDisplay {
+     float: none;
+     color: #005;
+}
+
+.messages #newsDisplay {
+     margin-left: 5px;
+}
+
+/* top navigation */
+
+div.confignav {
+     padding: 6px 5px;
+     margin: -16px -16px 5px -16px;
+     border: 1px solid #89f;
+     font-size: 9pt;
+     text-align: center;
+     font-weight: bold;
+     color: #000;
+}
+
+.tab, .tab2 {
+     box-sizing: border-box;
+     display: inline-block;
+     border: 1px solid #89f;
+     margin: 0 -2px -1px -2px !important;
+     padding: 1px 0;
+     background: #fff;
+     min-width: 60px !important;
+}
+
+.tab a {
+     display: inline-block;
+     padding: 4px 14px;
+}
+
+.tab:hover a {
+     color: #f60 !important;
+}
+
+.tab {
+     background: linear-gradient(to bottom, #fff 50%, #efefff 50%);
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+.tab:hover {
+     background: #fff;
+     box-shadow: inset 0 0 0 1px #f90;
+}
+
+.tab:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #5f2400;
+     background: #f60;
+}
+
+.tab:active a {
+     color: #fff !important;
+}
+
+.tab2 {
+     background: #89f;
+     box-shadow: inset 0 0 0 1px #fff;
+     color: #fff;
+     padding: 5px 12px;
+}
+
+/* end topnav */
+
+div.configure {
+     padding: 0;
+}
+
+div.configure hr {
+     margin: 15px 0;
+     display: none;
 }
 
 div.configure table {
      font-size: 9pt;
+     border: 1px solid #89f;
+}
+
+table.configtable, #permabanned, #loggingoptions, #configstats, ul#banlist {
+     margin-bottom: -5px;
+}
+
+.configtable, .main[id^="config_"] table {
+     background: #fff;
+}
+
+#config_homepage td {
+     padding: 5px;
+}
+
+#config_peers #permabanned {
+     margin-bottom: 5px;
+}
+
+#configstats th {
+     text-align: left;
+     padding: 6px 10px;
+     font-size: 10pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+#configstats th a {
+     float: right;
+     font-size: 9pt;
+     text-transform: none;
+}
+
+#configstats td:first-child:empty + td > label { /* remove pointer from inert labels */
+     cursor: default;
+}
+
+#configstats td:last-child { /* epiphany fix */
+     border-right: 1px solid #89f !important;
+}
+
+.configtable td, #joinfamily td {
+     padding: 5px 10px;
+     border-top: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+}
+
+#joinfamily, #exportfamily{
+     margin-top: 15px !important;
+}
+
+#newfamily {
+     margin-bottom: 6px;
+     margin-top: 4px;
+}
+
+#exportfamily tr:nth-child(2) td:first-child {
+     background: #fff url(/themes/console/images/info/export_key.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#leavefamily {
+     margin-top: 19px;
+     margin-bottom: 7px;
+}
+
+#leavefamily tr:last-child td:first-child {
+     background: #fff url(/themes/console/images/info/leave_family.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#peerdefs td:first-child {
+     text-align: right;
+     width: 10%;
+     white-space: nowrap;
+     padding: 5px;
+     border-right: 1px inset #ccf;
+}
+
+#bandwidthconfig td:first-child {
+     width: 10%;
+     white-space: nowrap;
+}
+
+#advconf {
+     margin-bottom: -5px !important;
+}
+
+#addkeyring {
+     margin-bottom: -5px;
+}
+
+#addkeyring td:first-child:not(.infohelp) {
+     line-height: 115%;
+}
+
+#addkeyring input[type="text"] {
+     width: 99%;
+     width: calc(100% - 5px);
+}
+
+#manualreseed {
+     margin-bottom: 10px;
+}
+
+#manualreseed tr:nth-child(odd) {
+     background: #fff;
+}
+
+#manualreseed td:first-child {
+     white-space: nowrap;
+}
+
+#manualreseed .optionsave {
+     padding-left: 0;
+}
+
+#manualreseed .optionsave input {
+     min-width: 110px;
+}
+
+#manualreseed input[type="text"], #manualreseed input[type="file"] {
+     width: 60%;
+}
+
+#reseedconfig tr:nth-child(2) br {
+     display: none;
+}
+
+#reseedconfig tr:nth-child(2) label {
+     white-space: nowrap;
+     margin-right: 10px;
+}
+
+#loggingoptions textarea {
+     width: 99%;
+     width: calc(100% - 5px);
+}
+
+#loggingoptions td:nth-child(2) {
+     width: 170px;
+}
+
+#profilelist {
+     margin: 0 !important;
+}
+
+#profilelist td:first-child, #profilelist td:last-child {
+     width: 1%;
+     white-space: nowrap;
+}
+
+#profilelist th:nth-child(3), #profiles th:nth-child(4), #profiles th:nth-child(5), #profiles th:nth-child(6) {
+     text-align: right;
+}
+
+#profilelist td[colspan="8"], #profilelist tr td[colspan="8"]:hover {
+     background: #77f;
+     padding: 1px 0;
+     border-top: 1px inset #fff !important;
+     border-bottom: 1px inset #fff !important;
+}
+
+#profilelist td[colspan="8"] hr {
+     display: none;
+}
+
+#profilelist tr:hover, #floodfills tr:hover,  #ntcpconnections tr:hover, #udpconnections tr:hover,
+.homelinkedit tr:hover, .main#debug table:first-of-type tr:hover td {
+     background: #ffe;
+     background: linear-gradient(to bottom, #fff, #ffe);
+     color: #104e99;
+     border-top: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+}
+
+tr.tablefooter:hover td {
+     color: #0c153d;
+}
+
+/* peers - sort icons */
+
+#udpconnections th {
+     vertical-align: top;
+     background: #fff;
+     padding-top: 3px;
+}
+
+#ntcpconnections th {
+     background: #fff;
+}
+
+#peers > #ntcpcon {
+     margin-top: 0 !important;
+}
+
+#upnpstatus + #ntcpcon {
+     margin-top: 10px !important;
+}
+
+.sortup, .sortdown, .sortupactive, .sortdownactive {
+     padding: 1px 0;
+     border: 1px solid #999;
+     border-radius: 2px;
+     margin: 2px 1px 0;
+     vertical-align: middle;
+     text-align: center;
+     display: inline-block;
+     width: 16px;
+     height: 12px;
+     background-size: 10px auto, 100% 100% !important;
+}
+
+.sortup, .sortdown {
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;;
+     opacity: 0.7;
+}
+
+.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
+     margin: 0;
+     padding: 0;
+     opacity: 0;
+     width: 16px;
+     height: 14px;
+     vertical-align: middle;
+     text-align: center;
+}
+
+.sortupactive, .sortdownactive {
+     opacity: 1;
+     box-shadow: inset 1px 1px 1px #ccc;
+}
+
+.sortup {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.sortup:hover {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #89f;
+     opacity: 1;
+}
+
+.sortup a:focus, .sortdown a:focus {
+     background: rgba(255,102,0,0.15);
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff;
+     margin-top: -1px;
+     display: inline-block;
+}
+
+.sortupactive {
+     background: url(images/sort_up.png) center center no-repeat, #fff;
+}
+
+.sortdown {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.sortdown:hover {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #89f;
+     opacity: 1;
+}
+
+.sortdownactive {
+     background: url(images/sort_down.png) center center no-repeat, #fff;
+}
+
+/* end peer sort */
+
+.backlogged {
+     font-size: 14pt;
+     line-height: 0;
+}
+
+tr:hover th {
+     color: #0c153d;
+}
+
+#thresholds, #profile_defs {
+     margin-top: -1px;
+     line-height: 150%;
+}
+
+#thresholds p {
+     padding: 0 10px 0 5px;
+     margin-top: 0 !important;
+}
+
+#profile_defs td:first-child {
+     width: 5% !important;
+     white-space: nowrap;
+     text-align: right;
+}
+
+#profile_defs td:last-child {
+     white-space: normal;
+     line-height: 120%;
+}
+
+#thresholds th, #thresholds td {
+     text-align: center !important;
+     width: auto !important;
+}
+
+#profile_defs td:nth-child(2)::first-letter {
+     text-transform: uppercase;
+}
+
+#capabilities_key td {
+     padding: 0 !important;
+}
+
+#capabilities_key table td:nth-child(2)::first-letter {
+     text-transform: none;
+}
+
+#capabilities_key table {
+     margin: 0 !important;
+     border: none;
+     border-top: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+}
+
+#capabilities_key table td {
+     padding: 3px 5px !important;
+}
+
+#capabilities_key table td:nth-child(even) {
+     width: 16px;
+}
+
+#thresholds tr:hover td, #profile_defs tr:hover td {
+     background: none;
+}
+
+#profile_defs b {
+     text-transform: capitalize;
+}
+
+#capabilities_key b {
+     text-transform: none !important;
+}
+
+#floodfills {
+     margin-top: 10px;
+}
+
+#floodfills th {
+     font-size: 8pt;
+}
+
+#floodfills td:first-child, #profilelist td:first-child {
+     text-align: right;
+}
+
+ul#banlist {
+     border: 1px solid #89f;
+     margin: 15px 0 5px;
+     padding: 8px 10px;
+     background: #eff1ff;
+     -moz-column-count: 4;
+     -moz-column-width: 270px;
+     -moz-column-gap: 35px;
+     -moz-column-rule: 1px dotted #89f;
+     -webkit-column-count: 4;
+     -webkit-column-width: 270px;
+     -webkit-column-gap: 35px;
+     -webkit-column-rule: 1px dotted #89f;
+     column-count: 4;
+     column-width: 270px;
+     column-gap: 35px;
+     column-rule: 1px dotted #89f;
+     font-size: 8pt;
+}
+
+ul#banlist + h3.tabletitle {
+     margin-top: 9px !important;
+}
+
+#banlist li {
+     list-style: none !important;
+     border-bottom: 1px dotted #89f;
+     margin-bottom: 5px;
+     min-width: 250px;
+     width: calc(100% - 5px);
+     padding-bottom: 2px;
+     break-inside: avoid;
+     page-break-inside: avoid;
+     -webkit-column-break-inside: avoid;
+     display: table;
+     padding: 3px !important;
+}
+
+#banlist li img {
+     margin-right: 3px;
+}
+
+#banlist li:first-child {
+     margin-top: 0;
+}
+
+/* /configpeers banlist */
+
+#bannedips {
+     margin-bottom: 4px;
+}
+
+#bannedips table {
+     margin-bottom: -1px !important;
+}
+
+#bannedips td {
+     vertical-align: top;
+     padding: 0;
+     width: 50%;
+}
+
+#bannedips table tr {
+     border-top: 1px solid #ddf;
+}
+
+#bannedips table td {
+     text-align: center;
+     padding: 4px 2px;
+}
+
+#bannedips table tr:last-child {
+     border-bottom: 1px solid #89f;
+}
+
+#permabanned, #banneduntilrestart {
+     margin: -1px 0 !important;
+     border: none;
+}
+
+#permabanned td:first-child {
+     border-left: 1px solid #89f;
+     text-align: right;
+     padding-right: 10px;
+     width: 49%;
+}
+
+#permabanned td:nth-child(2) {
+     width: 2%;
+}
+
+#permabanned td:last-child {
+     text-align: left;
+     padding-left: 10px;
+     width: 49%;
+}
+
+#banneduntilrestart td {
+     border-right: 1px solid #89f;
+     text-align: center !important;
+}
+
+#ipv4, #ipv6, #permabanned tr:nth-child(2) {
+     background: url(images/tinytitle.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+     border-top: 1px solid #89f !important;
+     border-bottom: 1px solid #89f !important;
+}
+
+/* end /configpeer banlist */
+
+.widescroll {
+     overflow: auto;
+}
+
+a[href^="configpeer?peer"] {
+     font-size: 0;
+     filter: drop-shadow(0 0 1px #777);
+}
+
+a[href^="configpeer?peer"]::after {
+     content: url(/themes/console/images/buttons/edit.png);
+     vertical-align: top;
+}
+
+a[href^="configpeer?peer"]:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+pre#transports {
+     border: 1px solid #89f;
+     padding: 15px 15px 0;
+     margin: -11px 0 0;
+     width: 95%;
+     width: calc(100% - 32px);
+     background: #fff;
+}
+
+#view_profile pre {
+     word-break: break-all;
+     word-wrap: break-word;
+     white-space: pre-wrap;
+}
+
+#view_profile h2 {
+     text-transform: none;
+     line-height: 120%;
+     margin-bottom: -1px !important;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     letter-spacing: 0;
+     word-spacing: 0;
+}
+
+#pluginconfig {
+     margin-bottom: 0 !important;
+}
+
+#pluginconfig table {
+     margin: 3px;
+     width: calc(100% - 5px);
+}
+
+#pluginconfig tr td {
+     background: #fff;
+}
+
+#pluginconfig button, #webappconfig button, #clientconfig button {
+     margin: 3px;
+}
+
+#enviro td, #eventlogs td {
+     padding: 5px 10px;
+}
+
+#enviro td:first-child {
+     text-align: right;
+     width: 120px;
+     white-space: nowrap;
+     padding-right: 0;
+}
+
+#wrapperlogs pre {
+     white-space: pre-wrap;
+     word-break: break-all;
+     margin: 0;
+     width: 100%;
+     padding: 0;
+     height: 600px;
+     overflow: auto;
+}
+
+#wrapperlogs tr:last-child td {
+     padding: 0 0 0 2px;
+}
+
+#criticallogs tr:first-child {
+     display: none;
+}
+
+.logtable tr:first-child {
+     border-bottom: 1px solid #89f;
+     padding: 5px 10px;
+}
+
+.logtable p {
+     margin: 0;
+     padding: 0;
+}
+
+.logtable ul {
+     margin-bottom: 0 !important;
+}
+
+#i2pupdates input[type="text"], #i2pupdates select {
+     min-width: 200px;
+}
+
+#i2pupdates input[name*="URL"] {
+     width: 99%;
+     width: calc(100% - 5px) !important;
+}
+
+#i2pupdates input.check, .optbox {
+     margin-left: 5px;
+}
+
+#i2pupdates td:first-child {
+     padding-right: 0;
+     line-height: 120%;
+}
+
+#i2pupdates tr:last-child td {
+     background: #fff !important;
+     padding: 5px;
+}
+
+#i2pupdates td:last-child {
+     padding-left: 0;
+     padding-right: 8px;
+}
+div.configure tr, div.configure td {
+     padding: 5px;
+}
+
+div.configure li:first-child, .main li:first-child {
+     margin-top: -10px;
+}
+
+div.configure li:last-child {
+     margin-bottom: -5px;
+}
+
+div.configure h2:first-child {
+     margin-top: 15px;
+}
+
+#sidebarconf button {
+     margin: 2px;
+     padding: 2px 3px;
+     background-size: 100% 100% !important;
+}
+
+#sidebarconf button img {
+     height: 14px;
+     width: 14px;
+}
+
+#sidebarconf th:nth-child(1) {
+     text-align: center;
+}
+
+#sidebarconf th:nth-child(2), #sidebarconf td:nth-child(2) {
+     text-align: left;
+     padding-left: 20px;
+}
+
+#sidbarconf td:last-child[colspan="2"] {
+     text-align: center !important;
+     padding: 2px;
+}
+
+#sidebarconf tr, .homelinkedit tr, #clientconfig tr, #webappconfig tr,  #configstats tr, #tunnelconfig tr, #profiles tr,
+#floodfills tr, #netdboverview tr, .netdbentry tr, #leasesetdebug tr, #leasesetsummary tr, .leaseset tr,
+.sybil_routerinfo tr, #enviro tr, #schedjobs tr, #jobstats tr, #eventlog tr, .tunneldisplay tr, #udpconnections tr, #ntcpconnections tr {
+     border-top: 1px inset #ccf;
+}
+
+#config_stats tr:not(.tablefooter) td:first-child::after {
+     content: "";
+     display: inline-block;
+     min-height: 24px;
+     vertical-align: middle;
+}
+
+#addkeyring tr, #loggingoptions tr, tr.tablefooter, #profilelist tr:hover, #floodfills tr:hover, #jardump tr {
+     border-top: 1px solid #89f !important;
+     border-bottom: 1px solid #89f !important;
+}
+
+#sidebarconf tr:hover, #eventlog tr:hover, .tunneldisplay tr:hover, #jobstats tr:hover, #schedjobs tr:hover, #jardump tr:hover {
+     background: #ffd;
+     background: linear-gradient(to bottom, #fff, #ffe);
+     color: #104e99;
+     border-top: 1px solid #89f !important;
+     border-bottom: 1px solid #89f;
+}
+
+#sidebarconf tr:last-child, #sidebarconf tr:last-child:hover  {
+     border-top: 1px solid #89f;
+     background: #eff1ff;
+}
+
+#sidebarconf select {
+     margin-left: 0;
+     width: 100%;
+}
+
+#sidebarconf td:first-child {
+     width: 60px;
+     text-align: center;
+}
+
+#sidebarconf td:nth-child(3), #sidebarconf td:nth-child(4) {
+     width: 59px;
+     padding: 0;
+     white-space: nowrap;
+}
+
+#sidebarconf td:nth-child(4) {
+     text-align: left;
+}
+
+#sidebarconf tr:last-child td:last-child {
+     text-align: right;
+     padding-right: 2px;
+}
+
+.topshimten {
+     margin-top: 15px;
+     margin-bottom: 15px;
+}
+
+.messages {
+     padding: 15px 10px;
+     background: #fff;
+     border: 1px solid #89f;
+     border-right: 0;
+     margin: -6px -15px 10px -16px;
+     text-align: center;
+     font-size: 9pt;
+     font-weight: bold;
+     color: #474;
+}
+
+#config_update .messages {
+     background: url(/themes/console/images/info/newspaper.png) 10px center no-repeat #fff;
+     background-size: 28px 28px;
+     padding-left: 48px;
+     text-align: left;
+     font-weight: normal;
+}
+
+#messages {
+     margin-bottom: 5px;
+}
+
+.messages li, .messages ul {
+     padding: 0 !important;
+     margin: -10px 0 0 25px !important;
+     list-style: none;
+     text-align: left;
+}
+
+.messages li {
+     padding-left: 60px !important
+}
+
+#graphs .messages, #events #messages {
+     margin-top: -16px;
+}
+
+#events #messages {
+     margin-bottom: 15px;
+     vertical-align: middle;
+}
+
+#events .messages li {
+     padding: 0 !important;
+     margin: 10px 10px 0 35px !important;
+     text-align: justify;
+}
+
+div.error {
+     color: #900;
+     background: url(/themes/console/images/info/errortriangle.png) 20px center no-repeat;
+     background-size: 28px auto;
+     padding: 10px 5px;
+     margin-left: -5px;
+}
+
+div.notice {
+     padding: 10px 10px 10px 0 !important;
+     margin: 0;
+     background: url(/themes/console/images/info/infohelp.png) 15px center no-repeat;
+}
+
+.notice ul, .notice li {
+     margin: 0 !important;
+}
+
+h1 {
+     font-size: 18pt;
+     text-align: left;
+     border: 1px solid #89f;
+     padding: 19px 20px;
+     margin: 0 1px 0 200px;
+     line-height: 93%;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background: #fff url(images/titlebg.png) center right no-repeat !important;
+     background: linear-gradient(to right, #fff 20%, rgba(255,255,255, 0.5) 70%), linear-gradient(to bottom, #e5f0f7 0%, #e5f0f7 50%, #b9c2f9 50%, #b9c2f9 100%) !important;
+     min-width: 530px;
+}
+
+span.newtab {
+     text-align: right;
+     font-size: 8pt;
+     float: right;
+     letter-spacing: 0;
+}
+
+.newtab img:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+h2 {
+     font-size: 14pt;
+     padding: 10px;
+     border: 1px solid #89f;
+     letter-spacing: 0.04em;
+     text-transform: uppercase;
+     background: #fff;
+}
+
+h3, h4#updateplugins {
+     font-size: 11pt;
+     padding: 6px 10px;
+     border: 1px solid #89f;
+     margin-bottom: 10px;
+     background: #fff;
+}
+
+h3.tabletitle {
+     margin-bottom: -1px;
+}
+
+h3.ptitle {
+     margin-bottom: -13px;
+}
+
+h3.ptitle, h3.tabletitle, th.th_title {
+     font-size: 11pt;
+}
+
+h3.enbeddedtitle, h4.embeddedtitle {
+     margin-bottom: 5px !important;
+}
+
+h3#udpcon, h3#ntcpcon {
+     margin-bottom: -1px;
+}
+
+h3#i2pclientconfig {
+     margin-top: 15px;
+     margin-bottom: -13px;
+}
+
+h3#bannedpeers {
+     margin-bottom: -16px;
+}
+
+h3#bwlimiter, h3#iptransport {
+     margin: 15px 0 -1px !important;
+}
+
+h3#iptransport a, th#upnpconfig a, h3#bwlimiter a, #config_stats h3 a, #config_logging h3 a, h3#graphdisplay a, #logs h3 a, h3#advancedconfig a, .h3navlinks {
+     float: right;
+     font-size: 9pt;
+     letter-spacing: normal;
+}
+
+.h3navlinks a {
+     text-transform: capitalize;
+     letter-spacing: normal;
+     margin-left: 5px;
+}
+
+h3#iptransport a:not(old), h3#advancedconfig a:not(old) {
+     font-size: 0
+}
+
+h3#iptransport a::after, h3#advancedconfig a::after {
+     content: url(images/help.png);
+     padding: 0;
+     margin: 0;
+     vertical-align: bottom;
+     height: 16px !important;
+     display: inline-block;
+}
+
+h3#iptransport a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+h4 {
+     border: 1px solid #89f;
+     background: #fff;
+     background: linear-gradient(to right, #fff, #eff2ff);
+     padding: 3px 5px;
+     font-size: 9pt;
+     margin: 5px 0;
+}
+
+p#clientconf {
+     margin-bottom: -1px !important;
+}
+
+table[id*="connections"] td {
+     text-align: center;
+}
+
+table[id*="connections"] td:first-child {
+     width: 1%;
+     white-space: nowrap;
+     text-align: right;
+}
+
+table[id*="connections"] .tablefooter td:first-child {
+     text-align: left;
+}
+
+h3[id*="heading"] {
+     margin-bottom: -1px;
+}
+
+h3#advancedclientconfig, h3#ffconf, h3#advancedconfig {
+     margin-bottom: -1px !important;
+}
+
+h3#pluginmanage {
+     margin-bottom: -18px !important;
+}
+
+.configure > h3#pluginmanage {
+     margin-top: 15px;
+}
+
+h3#advancedclientconfig, h3#pconfig {
+     margin-top: 15px;
+}
+
+h3#pluginmanage + p {
+     padding: 5px 0 0 !important;
+}
+
+h3#webappconfig {
+     margin-bottom: -30px;
+     margin-top: 15px;
+}
+
+p#webappconfigtext {
+     margin-bottom: -1px;
+}
+
+p:empty {
+     display: none;
+}
+
+h2 {
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+h2, h3, h4#updateplugins {
+     background: url(images/titlebg.png) right center no-repeat;
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+h4#updateplugins {
+     margin-top: -13px;
+}
+
+.routersummary h2, .routersummary h3, div.confignav, th {
+     background: url(images/tinytitle.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+}
+
+table {
+     border-collapse: collapse;
+     border: 1px solid #89f;
+     margin: 0 0 5px 0;
+     font-size: 9pt;
+     background: #fff;
+     background: rgba(255,255,255,0.1);
+     width: 100%;
+}
+
+table hr {
+     padding: 0;
+     color: #89f;
+     background: #89f;
+     border: 0 solid #89f;
+     margin: -5px -5px -10px -5px !important;
+     height: 1px;
+}
+
+table tt {
+     font-size: 8pt;
+}
+
+th {
+     background-color: #fff;
+     padding: 5px;
+     text-align: center;
+     border-bottom: 1px solid #89f;
+     border-top: 1px solid #89f;
+     font-size: 9pt;
+}
+
+th.th_title {
+     text-align: left;
+     padding: 6px 10px;
+}
+
+.configtable th {
+     padding: 5px 10px;
+     line-height: normal;
+}
+
+td {
+     padding: 3px 5px;
+}
+
+td.optionsave {
+     text-align: right;
+     border-top: 1px solid #89f;
+     background: #fff;
+     padding: 8px 5px;
+}
+
+td.optionsave[colspan="2"] {
+     background: #fff;
+}
+
+td.infohelp, p.infohelp, td.infowarn, p.infowarn, p#upnpstatus, p#gatherstats, p#debugmode, p#sybilinfo, p#pluginconfigtext {
+     padding: 15px 15px 15px 55px !important;
+     border: 1px solid #89f;
+     background: #fff url(/themes/console/images/info/infohelp.png) 15px center no-repeat;
+     white-space: normal !important;
+     text-align: justify;
+}
+
+td.infowarn, p.infowarn {
+     background: #fff url(/themes/console/images/info/infowarn.png) 15px center no-repeat !important;
+}
+
+#config_summarybar .configtable td:not(.optionsave) {
+     padding: 15px 15px 15px 50px !important;
+     background: url(/themes/console/images/info/interval.png) 12px center no-repeat, #fff;
+     background-size: 28px 28px;
+}
+
+.confignav + .infohelp, .confignav + h3.tabletitle, .confignav + form > h3.tabletitle, .confignav + .configure > form > h3.ptitle {
+     margin-top: 15px !important;
+}
+
+p#profiles_overview, h3#shutdownrouter, h3#themeheading {
+     margin-top: 15px !important;
+}
+
+p#gatherstats {
+     margin-top: -9px;
+     margin-bottom: 28px;
+}
+
+p#upnpstatus {
+     margin-top: 0;
+}
+
+td.tabletextarea {
+     padding: 0 !important;
+}
+
+.tabletextarea textarea {
+     margin: 0 !important;
+     width: 100% !important;
+     height: 600px;
+     resize: none;
+     overflow: auto;
+     border: 0;
+     white-space: pre-wrap;
+     padding: 5px;
+     box-shadow: 0 0 0 0 !important;
+     border: none !important;
+     color: #222;
+}
+
+.tabletextarea textarea:focus {
+     box-shadow: inset 0 0 0 1px #89f !important;
+     border-radius: 0 !important;
+     color: #000;
+}
+
+tr:nth-child(even), #pluginconfig table tr:nth-child(even) td {
+     background: #dde1ff;
+     background: rgba(220,220,255,0.5);
+}
+
+tr:nth-child(odd), #pluginconfig table tr:nth-child(odd) td, .main#profiles ul#banlist {
+     background: #eff1ff;
+     background: rgba(230,230,255,0.5);
+}
+
+.configtable th {
+     text-align: left;
+}
+
+/* begin home page */
+
+h4.app, h4.app2 {
+     margin: 0 -1px 7px;
+     font-size: 11pt;
+     padding: 7px 10px 6px;
+     border: 1px solid #89f;
+     box-shadow: inset 0 0 0 1px #fff;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background: #fff;
+     text-transform: uppercase;
+     background: url(images/tinytitle.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+}
+
+h4.app {
+     margin-top: -5px;
+}
+
+h4.app2 {
+     clear: left;
+     margin-top: 5px !important;
+}
+
+div.ag2 {
+     margin: 0 -15px -9px;
+}
+
+div.app {
+     float: left;
+     padding: 0;
+     min-width: 104px;
+     text-align: center !important;
+     border: none;
+     margin: 3px ;
+     border: 1px solid #89f;
+     border-radius: 2px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, #ddf);
+     box-shadow: 0 0 1px #fff;
+}
+
+div.app:hover {
+     border: 1px solid #f60;
+     background: #fff;
+     cursor: pointer;
+}
+
+div.app:hover a {
+     color: #f60 !important;
+}
+
+.app td {
+     vertical-align: middle;
+}
+
+div.applabel {
+     background: url(images/tinytitle.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+     font-size: 9pt;
+     margin: 0;
+     padding: 4px 2px;
+     text-align: center;
+     width: 120px;
+     line-height: 110%;
+     text-transform: lowercase;
+     font-size: 8pt;
+     border-top: 1px solid #89f;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+}
+
+.applabel a {
+     margin: 0;
+     padding: 1px;
+     display: inline-block;
+     width: 100%;
+     width: calc(100% - 2px);
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+}
+
+.app:hover div.applabel {
+     border-top: 1px solid #f60;
+     background: #fff;
+}
+
+.app:active .applabel {
+     background: #f60 !important;
+     color: #fff !important;
+     box-shadow: inset 0 0 0 1px #fff !important;
+}
+
+.app:active .applabel a {
+     color: #fff !important;
+}
+
+div.app:last-child {
+     margin-bottom: 10px;
+}
+
+div.app a:link, div.app a:visited, div.app a:hover, div.app a:active {
+     text-decoration: none;
+}
+
+div.app:hover a, .applabel a:focus {
+     color: #f60;
+     outline: none;
+}
+
+div.app:hover img, .appimg a:focus {
+     filter: drop-shadow(0 0 1px rgba(255, 102, 0, 0.6)) saturate(150%);
+     outline: none;
+}
+
+div.app:hover .applabel {
+     box-shadow: none;
+}
+
+.appimg {
+     min-height: 42px;
+}
+
+.appimg a {
+     display: inline-block;
+     width: 100%;
+}
+
+div.appgroup {
+     margin: 0;
+     padding: 0 8px;
+     width: auto;
+}
+
+div.search {
+     margin: -24px 10px 0 10px;
+     padding: 8px 8px 0 8px;
+     width: auto;
+}
+
+table.search {
+     background: #eff1ff;
+     margin-left: auto;
+     margin-right: auto;
+     width: auto;
+     border: 1px solid #89f !important;
+     border-collapse: separate;
+     border-radius: 0 0 2px 2px;
+}
+
+.search td:nth-child(2) {
+     text-align: center !important;
+     padding: 0;
+}
+
+.search button.search {
+     margin: 0;
+}
+
+.app img {
+     height: 32px;
+     width: auto;
+     max-height: 32px;
+     max-width: 32px;
+     padding: 10px 46px 9px;
+}
+
+.app table {
+     background: none;
+     border: 0;
+     margin: auto;
+     width: auto;
+}
+
+.app tr {
+     background: none;
+     border: 0;
+     margin: 0;
+}
+
+.app td {
+     background: none;
+     border: 0;
+     margin: 0;
+     padding: 0;
+}
+
+div.applabel:hover {
+     box-shadow: none;
+}
+
+/* end home page */
+
+#i2psnarkframe {
+     margin-bottom: -18px;
+}
+
+#i2ptunnelframe {
+     margin-bottom: -3px;
+}
+
+tt, pre, textarea, code {
+     font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+}
+
+hr {
+     color: #89f;
+     background: #89f;
+     height: 2px;
+     border: 0 solid #89f;
+     margin: 3px 0;
+}
+
+p.infohelp + hr, p.infohelp + p + hr, #tunnelconfig + hr { /*configservice */
+     display: none;
+}
+
+h3#servicedebug a, h3#graphinfo a {
+     float: right;
+     font-size: 9pt;
+}
+
+.main#tunnels h3 {
+     padding-right: 5px;
+}
+
+.main#tunnels h3 a {
+     float: right;
+}
+
+.main#tunnels h3 a:not(old), #logs h3 a:not(old) {
+     font-size: 0;
+}
+
+.main#tunnels h3 a[href^="/configtunnels#"]::after, #logs h3 a::after {
+     content: url(/themes/console/images/buttons/configure.png);
+     float: right;
+     padding: 1px;
+}
+
+.main#tunnels h3 a[href^="/configtunnels#"]:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+.main#debug h2 {
+     padding: 6px 10px;
+     font-size: 12pt;
+}
+
+.main#debug h3 {
+     padding: 4px 10px;
+}
+
+.main#debug th:last-child, .main#debug td:last-child {
+     text-align: right;
+}
+
+.main#debug td[colspan="2"] {
+     text-align: left;
+}
+
+.main#debug h2 + hr {
+     display: none;
+}
+
+h3 + .statusnotes {
+     margin-top: -1px;
+}
+
+.statusnotes {
+     font-style: italic;
+     font-size: 9pt;
+     color: #0c153d;
+     text-align: center;
+     margin: -6px 0 7px 0;
+     border: 1px solid #89f !important;
+     border-top: 0;
+     padding: 5px 0;
+     background: #fff url(images/tinytitle.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+}
+
+.statusnotes + .statusnotes {
+     margin-top: -8px !important;
+}
+
+div.joblog {
+     margin: 10px 0;
+     line-height: 130% !important;
+}
+
+div.joblog li {
+     word-wrap: break-word !important;
+     line-height: 105% !important;
+}
+
+div.joblog ul {
+     word-wrap: break-word !important;
+     text-align: justify;
+}
+
+div.joblog li:first-child {
+     margin-top: -5px;
+}
+
+div.joblog li:last-child {
+     margin-bottom: -5px;
+}
+
+div.joblog form:first-child {
+     margin-top: 10px;
+}
+
+div.joblog table {
+     margin-top: 15px;
+}
+
+div.joblog p {
+     line-height: 130%;
+}
+
+div.joblog h3 {
+     margin: 10px 0 20px 0;
+}
+
+div.joblog h3:first-child {
+     margin: -10px 0 15px 0;
+}
+
+div.joblog hr {
+     margin: 15px 0 15px;
+}
+
+h2#jobrunners {
+     margin-top: -10px;
+}
+
+div.joblog ol {
+     margin-bottom: 5px !important;
+     margin-top: -21px;
+     -moz-column-count: 2;
+     -moz-column-width: 400px;
+     -moz-column-gap: 100px;
+     -moz-column-rule: 1px dotted #89f;
+     -webkit-column-count: 2;
+     -webkit-column-width: 400px;
+     -webkit-column-gap: 100px;
+     column-count: 2;
+     column-width: 400px;
+     column-gap: 100px;
+     column-rule: 1px dotted #89f;
+     background: #eff1ff;
+     border: 1px solid #89f;
+     padding: 15px 50px;
+}
+
+.joblog ol:empty + h3 {
+     margin-top: -10px;
+}
+
+.joblog ol:empty {
+     display: none;
+}
+
+.joblog ol li {
+     break-inside: avoid;
+     page-break-inside: avoid;
+     -webkit-column-break-inside: avoid;
+     display: inline-block;
+     border-bottom: 1px dotted #89f;
+     min-width: 400px;
+     margin-left: -15px;
+     margin-bottom: 5px;
+}
+
+.joblog ol li:first-child {
+     padding-top: 5px;
+}
+
+.joblog ol li:last-child {
+     border: none;
+}
+
+h3#finishedjobs + ol li, h3#scheduledjobs + ol li, h3#activejobs + ol li, h3#readyjobs + ol li {
+    list-style: none !important;
+    width: 100%;
+}
+
+h3#activejobs + ol li:before, h3#scheduledjobs + ol li:before, h3#readyjobs + ol li:before, h3#finishedjobs + ol li:before {
+     content: '\2023\00A0\00A0';
+     margin-left: -20px;
+     font-size: 15pt;
+     font-weight: bold;
+     line-height: 50%;
+     vertical-align: sub;
+     color: #393;
+}
+
+h3#finishedjobs + ol li:before {
+     color: #5a5;
+     content: '\2714\00A0';
+}
+
+h3#readyjobs + ol li:before {
+     color: #dd3;
+}
+
+h3#scheduledjobs + ol li:before {
+     color: #970;
+}
+
+h3#totaljobstats {
+     margin-bottom: -1px !important;
+}
+
+#jobstats th:first-child, #jobstats td:first-child {
+     text-align: left;
+     padding-left: 10px;
+}
+
+#jobstats th {
+     text-align: right;
+}
+
+#jobstats .tablefooter td {
+     font-size: 9pt;
+}
+
+#schedjobs {
+     width: 100% !important;
+     margin: -11px 0 0 !important;
+}
+
+#schedjobs th {
+     padding: 3px 10px;
+}
+
+#schedjobs td {
+     padding: 3px 10px;
+}
+
+#schedjobs th:first-child {
+     text-align: left;
+}
+
+#schedjobs td:first-child {
+     font-weight: bold;
+}
+
+#oldhome {
+     margin-bottom: 10px;
+}
+
+#oldhome input[type="checkbox"] {
+     vertical-align: sub !important;
+}
+
+.homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child {
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+     font-size: 0 !important;
+     width: 5%;
+}
+
+.homelinkedit th:last-child, .homelinkedit th:nth-child(3) {
+     text-align: left !important;
+}
+
+.homelinkedit input[type="text"], #reseedconfig input[type="text"], #reseedconfig input[type="password"], #reseedconfig .optbox, #reseedconfig textarea {
+     margin-left: 0;
+}
+
+#reseedconfig textarea {
+     width: 100% !important;
+}
+
+.homelinkedit tr:last-child {
+     border-top: 1px solid #89f;
+}
+
+#addnew {
+     background: #efefff;
+}
+
+#addnew td:first-child {
+     text-align: right;
+}
+
+tr#addnew:hover {
+     color: #0c153d !important;
+}
+
+#loggingoptions input[type="text"] {
+     width: 160px;
+}
+
+#loggingoptions td:first-child {
+     line-height: 120%;
+}
+
+#oldhome {
+     margin-bottom: 10px;
+}
+
+#oldhome input[type="checkbox"] {
+     vertical-align: sub !important;
+}
+
+p {
+     padding: 5px 20px 0 20px;
+     text-align: justify;
+}
+
+p img:first-child {
+     display: none;
+}
+
+p.infohelp, p.infohelp + p, p#enablefullstats {
+     border: 1px solid #89f;
+}
+
+p.infohelp + p.infowarn {
+     padding: 10px;
+     margin-top: -1px;
+}
+
+p#keyringhelp {
+     margin-top: 15px;
+}
+
+p#pluginconfigtext {
+     border: 1px solid #89f;
+     padding: 10px;
+     margin: -11px 0 -1px;
+}
+
+#config_logging p {
+     text-align: left;
+     margin: 3px 0 5px -15px !important;
+}
+
+.formaction, td.optionsave {
+     padding-right: 3px !important;
+}
+
+.configtable tr:last-child, #addkeyring tr:last-child, #loggingoptions tr:last-child  {
+     background: #fff;
+     border-top: 1px solid #89f;
+}
+
+#addkeyring tr:last-child td {
+     padding: 7px 2px;
+}
+
+.formaction form, td form {
+     margin-bottom: 0;
+}
+
+p#enablefullstats {
+     padding: 5px 10px;
+     line-height: 120%;
+     background: #fff;
+     text-align: left;
+}
+
+.formaction {
+     text-align: right;
+     margin: 0;
+     padding: 8px 5px;
+     background: #fff;
+}
+
+.formaction, td.optionsave {
+     padding-right: 3px !important;
+}
+
+.configtable tr:last-child, #addkeyring tr:last-child, #loggingoptions tr:last-child  {
+     background: #fff;
+     border-top: 1px solid #89f;
+}
+
+.formaction form, td form {
+     margin-bottom: 0;
+}
+
+.formaction#shutdown, .formaction#restart, .formaction#systray, .formaction#runonstart,
+.formaction#dumpthreads, .formaction#browserstart, .formaction#sidebardefaults,
+.formaction#tunnelconfigsave, .formaction#updateplugins, .formaction#consolepass {
+     border: 1px solid #89f;
+     margin-top: -13px;
+     margin-bottom: -5px;
+}
+
+.formaction#clientsconfig, .formaction#webappconfigactions, .formaction#pluginupdater, .formaction#sidebardefaults,
+.formaction#tunnelconfigsave, .formaction#consolepass {
+     border: 1px solid #89f;
+     margin-top: -6px;
+}
+
+.formaction#pluginconfigactions {
+     border: 1px solid #89f;
+     margin-top: -1px;
+}
+
+.formaction#pluginupdater {
+     margin-bottom: 6px;
+     background: url(/themes/console/images/info/update.png) 12px center no-repeat, #fff;
+     background-size: 28px 28px;
+     padding: 15px 15px 15px 50px;
+}
+
+.formaction#webappconfigactions, .formaction#clientsconfig {
+     margin-bottom: -5px;
+}
+
+.formaction#resetreseed {
+     margin: 0 -10px 0 0;
+     background: none;
+}
+
+.formaction[id*="home"] {
+     margin-top: -6px;
+     padding: 5px;
+     border: 1px solid #89f;
+}
+
+.formaction#homeapps {
+     margin-top: -6px;
+     margin-bottom: -5px;
+}
+
+.formaction#homesites {
+     margin-bottom: -6px;
+}
+
+.formaction#themeui {
+     margin: 8px -5px 0;
+     border-top: 1px solid #89f;
+}
+
+.formaction#langui {
+     margin: 0 -5px;
+}
+
+.langbox {
+     margin: 3.5px 2px 0;
+     color: #001;
+     font-size: 7pt;
+     width: 360px;
+     text-align: right;
+     float: right;
+     padding: 1px;
+     overflow: hidden;
+}
+
+.langbox img {
+     padding: 0 !important;
+     margin: 0 1px -1px;
+     opacity: 0.9;
+     border: 1px solid #999;
+     transform: none !important;
+}
+
+.langbox img:hover, .langbox a:focus img {
+     opacity: 1;
+     transform: scale(1.1) !important;
+}
+
+.links {
+     padding-bottom: 0;
+     text-align: justify;
+     margin-top: 5px !important;
+}
+
+.links li {
+     list-style-image: url(images/link.png) !important;
+     padding: 5px 10px 0 !important;
+}
+
+.links li:first-child {
+     padding: 14px 10px 5px !important;
+}
+
+.links li:last-child {
+     margin-bottom: 0 !important;
+     margin-top: 0;
+}
+
+.links b {
+     font-size: 10pt;
+     line-height: 150%;
+     letter-spacing: 0.02em;
+}
+
+.main#logs code {
+     font-size: 8pt;
+}
+
+.tablefooter {
+     border: 1px solid #89f;
+}
+
+.tablefooter tr, .tablefooter td {
+     background: #fff !important;
+     font-size: 9pt;
+     line-height: 150%;
+     white-space: nowrap;
+     padding: 8px 5px !important;
+}
+
+#config_stats .tablefooter td {
+     line-height: normal;
+     padding: 2px 5px;
+}
+
+#netconfig tr, #externali2cp tr {
+     background: #fff;
+}
+
+#externali2cp label + br {
+     display: none;
+}
+
+#externali2cp label {
+     white-space: nowrap;
+     margin-right: 10px;
+}
+
+#pluginconfig tr {
+     border-bottom: 1px solid #89f;
+}
+
+#pluginconfig td:first-child {
+     width: 80px;
+     white-space: nowrap;
+}
+
+.tidylist {
+     text-align: justify;
+     padding-right: 25px;
+     margin-right: 15px !important;
+     margin-left: 15px;
+}
+
+.tidylist code {
+     text-align: left;
+     font: 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     color: #723;
+     font-weight: bold;
+}
+
+div.graphspanel {
+     padding: 15px 5px 0;
+     margin: -16px -16px -11px -16px;
+     text-align: center !important;
+     overflow: hidden;
+}
+
+div.graphspanel img {
+     margin: 5px;
+     border: 1px solid #777;
+     max-width: 95%;
+     max-width: calc(100% - 50px);
+}
+
+div.graphspanel a img {
+     border: 1px solid #77f;
+     padding: 2px;
+     background: #ccf;
+     opacity: 0.9;
+     vertical-align: top;
+}
+
+div.graphspanel a img:hover {
+     border: 1px solid #f60;
+     text-align: center !important;
+     background: #ccf;
+     opacity: 1;
+     cursor: url(/themes/console/images/cursor_zoom.png), pointer;
+}
+
+div.graphspanel hr {
+     margin: 10px 0;
+}
+
+div.graphspanel form:last-child {
+     text-align: left;
+     margin: 0 20px;
+}
+
+div.graphspanel h3 {
+     text-align: left;
+     margin: 10px 20px 10px 20px;
+}
+
+form[action="graphs"] {
+     border: 1px solid #89f;
+     padding: 5px 10px;
+     margin: -11px 0 5px;
+     background: #eef;
+}
+
+form[action="graphs"] hr {
+     margin: 5px -11px 3px;
+     height: 1px;
+}
+
+form[action="graphs"] input[type="text"] {
+     min-width: 80px !important;
+}
+
+p#graphopts {
+     text-align: center;
+     border: 1px solid #89f;
+     background: rgba(255,255,255,0.8);
+     margin: 25px -5px 0;
+     padding: 10px;
+     text-transform: capitalize;
+}
+
+h3#graphinfo {
+     margin: 5px 10px 15px;
+     text-transform: capitalize;
+}
+
+p#graphopts + p {
+     text-align: right;
+     background: #fff;
+     margin: -1px -5px 0;
+     padding: 10px;
+     border: 1px solid #89f;
+     display: none;
+}
+
+.formaction#graphing {
+     margin: -3px -10px -5px;
+}
+
+/* new graphs optionbox */
+
+#graphs form {
+     padding: 0 !important;
+}
+
+#graphs form hr {
+     margin: 0 -1px 8px !important;
+}
+
+#graphs form table {
+     border: none;
+     margin: 0;
+}
+
+.formaction#graphing {
+     margin: -8px 0 0 !important;
+     padding: 5px;
+     border-left: none;
+     border-right: none;
+}
+
+#graphs tr:first-child td {
+     border-top: none;
+}
+
+#graphs td:first-child {
+     text-align: right;
+     width: 85px;
+     white-space: nowrap;
+     padding: 13px 3px 13px 5px;
+}
+
+#graphs td:nth-child(2) {
+     width: 260px;
+     white-space: nowrap;
+}
+
+#graphs td.infohelp {
+     border: none;
+     border-right: none;
+     background-size: 20px 20px !important;
+     padding: 5px 5px 5px 40px !important;
+     background: url(/themes/console/images/info/infohelp.png) 15px center no-repeat #eaeaff;
+     text-align: left;
+}
+
+#graphs form input, #graphs form select {
+     margin: 3px 5px 3px 0;
+     vertical-align: middle;
+}
+
+#graphs input[type="text"] {
+     min-width: 60px;
+}
+
+/* end new graphs optionbox */
+
+div.footnote {
+     text-align: right;
+     color: #339;
+     font-size: 7pt;
+     margin-bottom: -4px !important;
+}
+
+div.footnote hr {
+     margin: 10px 0 5px 0 !important;
+     color: #99f;
+     background: #99f;
+     height: 1px;
+     border: 0 solid #99f;
+}
+
+.topness {
+     font-size: 7.5pt;
+     text-align: right;
+     margin-top: -8px;
+     margin-bottom: -5px;
+     margin-right: 5px;
+}
+
+/* Fixes for when app is not started and console error loads inside iframe */
+
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+}
+
+.iframed .routersummaryouter {
+     display: none !important;
+}
+
+.iframed h1 {
+     margin: 0 1px 0 0 !important;
+}
+
+.iframed .sorry {
+     margin: -1px 1px 0 0 !important;
+}
+
+/* end iframed console fixes */
+
+/* Theme choice & Language selection in /configui */
+
+.themechoice .optbox, .langselect .optbox {
+     vertical-align: text-bottom;
+}
+
+div.themechoice {
+     width: 115px;
+     min-height: 78px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     border: 1px solid #89f;
+     float: left;
+     text-align: center;
+     padding: 0 4px;
+     margin: 4px;
+     border-radius: 2px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, #ddf);
+     transition: all 0.3s ease 0s;
+     box-shadow: 0 0 1px #fff;
+}
+
+.themechoice:hover {
+     border: 1px solid #f60;
+     background: #fff;
+}
+
+.themechoice:hover > object ~ .themelabel {
+     border-top: 1px solid #f60 !important;
+     background: #fff;
+     transition: all 0.1s ease 0s;
+}
+
+.themechoice:hover > object {
+     filter: drop-shadow(0px 0 1px #f60);
+}
+
+.themechoice .optbox {
+     height: 80px !important;
+     width: 110px !important;
+     padding: 2px;
+     opacity: 0; /* hide the radio icon so we can use thumbnail img instead */
+     margin-top: 4px;
+     margin-left: -32px;
+     position: absolute;
+     z-index: 999;
+}
+
+.themechoice .optbox + object {
+     margin-left: 0;
+     margin-top: 8px;
+     padding: 0 !important;
+     margin-bottom: 31px;
+}
+
+.themechoice img {
+     margin-bottom: 31px !important;
+}
+
+.themechoice .optbox:hover + img ~ div.themelabel {
+     color: #f60;
+     font-weight: bold;
+}
+
+.themechoice:active .themelabel {
+     background: #f60 !important;
+     color: #fff !important;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+.themechoice .optbox:checked + object ~ div.themelabel {
+     background: #ddf;
+     color: #338;
+     font-weight: bold;
+}
+
+.themechoice .optbox:focus + object ~ div.themelabel {
+     color: #f60 !important;
+     background: #fff;
+     background: linear-gradient(to right, #eef, #fff, #eef);
+}
+
+.themechoice .optbox:active + object ~ div.themelabel {
+     color: #fff !important;
+}
+
+.themechoice:active .optbox:checked + object ~ .themelabel {
+     background: linear-gradient(to right, #eef, #fff, #eef) !important;
+     color: #f60 !important;
+     box-shadow: none !important;
+     font-weight: bold;
+}
+
+#themeoptions {
+     clear: both;
+     border-top: 1px solid #89f;
+     background: rgba(230, 230, 255, 0.5);
+     margin: 0 -5px -3px;
+     position: relative;
+     top: 4px;
+     padding: 5px 10px 3px 5px;
+}
+
+#themeoptions br {
+     display: none;
+}
+
+#themeoptions label {
+     white-space: nowrap;
+     margin: 4px 10px 4px 0 !important;
+     display: inline-block;
+}
+
+p#helptranslate {
+     position: relative;
+     top: 4px;
+     padding: 15px 10px 15px 50px !important;
+     text-align: left !important;
+     border-top: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+     background: url(/themes/console/images/info/notice.png) left 14px center no-repeat, #fff;
+     background-size: 28px 28px;
+}
+
+#themeoptions input {
+     margin: 6px 8px 6px 6px;
+     vertical-align: sub;
+}
+
+div.themelabel {
+     border-top: 1px solid #89f !important;
+     margin: -25px -4px 0;
+     padding: 3px 2px;
+     background: #eef url(images/tinytitle.png) center center;
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+}
+
+div#themesettings {
+     clear: both;
+     border: 1px solid #89f;
+     padding: 4px 5px 0;
+     margin: -1px 0;
+     background: #eff1ff;
+}
+
+div#langsettings {
+     border: 1px solid #89f;
+     padding: 4px 5px 0;
+     background: #eff1ff;
+}
+
+#themesettings hr {
+     display: none;
+}
+
+#langsettings hr {
+     margin: 0 -5px;
+     height: 1px;
+}
+
+div.langselect { /* containing box for lang selection */
+     width: 115px;
+     float: left;
+     margin: 4px;
+     text-align: center;
+     border: 1px solid #89f;
+     padding: 4px 4px 0;
+     border-radius: 2px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, #ddf);
+     transition: all 0.3s ease 0s;
+     box-shadow: 0 0 1px #fff;
+}
+
+.langselect:hover {
+     border: 1px solid #f60;
+     background: #fff;
+     transition: ease all 0.3s 0s;
+}
+
+.langselect .optbox {
+     width: 122px;
+     height: 66px;
+     margin: -4px 0 8px -54px;
+     opacity: 0;
+     z-index: 999;
+     position: relative;
+}
+
+.langselect:hover > input + img {
+     transform: scale(1.1);
+     border: 1px solid #f60 !important;
+}
+
+.langselect img[src^="/flags"] {
+     border: 1px solid #89f;
+     margin-bottom: 42px;
+     margin-left: -72px;
+     opacity: 1;
+     z-index: 3;
+     position: relative;
+}
+
+.langselect input, .themechoice input {
+     cursor: pointer;
+}
+
+.langselect input[name="lang"]:checked + img {
+     transform: scale(1.1);
+     -webkit-transform: scale(1.1);
+     border: 1px solid #338;
+}
+
+.langselect:hover > input[name="lang"] + img + .ui_lang {
+     color: #f60;
+     border-top: 1px solid #f60;
+     font-weight: bold;
+     background: #fff !important;
+     transition: all 0.1s ease 0s;
+}
+
+.langselect input[name="lang"]:checked + img + .ui_lang {
+     background: #ddf !important;
+     color: #338;
+     font-weight: bold;
+     margin: -32px -4px 0;
+     z-index: 2;
+}
+
+.langselect:active .ui_lang, .langselect:active > input[name="lang"] + img + .ui_lang {
+     background: #f60 !important;
+     color: #fff !important;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+.langselect:active input[name="lang"]:checked + img + .ui_lang {
+     color: #f60 !important;
+     box-shadow: none !important;
+     background: linear-gradient(to right, #eef, #fff, #eef) !important;
+}
+
+.langselect input[name="lang"]:focus + img + .ui_lang {
+     color: #f60 !important;
+     background: #fff !important;
+     background: linear-gradient(to right, #eef, #fff, #eef) !important;
+}
+
+.langselect input[name="lang"]:active + img + .ui_lang {
+     color: #fff !important;
+     background: #f60 !important;
+}
+
+div.flagradio {
+     margin-top: 2px;
+}
+
+div.langselect + br {
+     display: none !important;
+}
+
+div.langselect br {
+     display: block;
+}
+
+div.ui_lang { /* lang text label */
+     text-align: center;
+     background: #eef url(images/tinytitle.png) center center;
+     background: linear-gradient(to bottom, #fff 50%, #eff2ff 50%);
+     padding: 3px 2px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     margin: -32px -4px 0;
+     border-top: 1px solid #89f;
+     border-radius: 0 0 2px 2px;
+     text-transform: capitalize;
+     font-size: 9pt;
+     z-index: 2;
+}
+
+p#helptranslate {
+     clear: both;
+     padding: 5px 10px 10px;
+     text-align: right;
+     margin: 0 -5px;
+}
+
+/* configui password*/
+
+#consolepass th:nth-child(2) {
+     text-align: left;
+}
+
+#consolepass tr:first-child td {
+     background: #fff url("/themes/console/images/info/user_add.png") no-repeat scroll 12px center / 28px 28px;
+     padding: 15px 15px 15px 50px;
+}
+
+#consolepass td {
+     padding: 5px 10px;
+     font-size: 9pt;
+     white-space: nowrap;
+}
+
+#consolepass input {
+     margin: 5px;
+}
+
+#consolepass td#pw_adduser {
+     padding: 5px 10px;
+     border-top: 1px solid #89f;
+}
+
+td#pw_adduser input {
+     margin: 5px 20px 5px 5px !important;
+}
+
+#consolepass input[name="name"] {
+     margin-right: 20px;
+}
+
+/* end configui */
+
+.main#jardump {
+     overflow: auto;
+}
+
+#jardump table {
+     border-left: none;
+     border-right: none;
+     margin-top: -1px;
+     margin-bottom: -1px;
+     font-size: 8pt;
+}
+
+#jardump th {
+     padding: 5px;
+     font-size: 9pt;
+}
+
+#jardump td {
+     vertical-align: top;
+}
+
+.main#jardump th:nth-child(1), .main#jardump th:nth-child(3), .main#jardump th:nth-child(6), .main#jardump th:nth-child(7) {
+     text-align: left;
+}
+
+#jardump tt {
+     letter-spacing: -0.05em;
+}
+
+#jardump a tt {
+     color: #006 !important;
+}
+
+#jardump a:hover tt {
+     color: #f60 !important;
+}
+
+
+.main#netdb > .confignav {
+     margin-bottom: 15px;
+}
+
+#clientconfig th:first-child, #webappconfig th:first-child, #pluginconfig th:first-child {
+     text-align: right;
+}
+
+#clientconfig th:last-child, #webappconfig th:last-child, #pluginconfig th:last-child {
+     text-align: left;
+}
+
+#netconfig {
+     line-height: 160%;
+}
+
+/* netdb */
+
+.netdbentry {
+     margin-top: 10px !important;
+}
+
+.netdbentry th {
+     font-weight: normal;
+}
+
+.netdbentry th:last-child {
+     text-align: right;
+     padding: 5px;
+     white-space: nowrap;
+     width: 50px;
+}
+
+.netdbentry th code, .sybil_routerinfo th code, .leaseset th code {
+     color: #030 !important;
+     border-radius: 3px;
+     padding: 1px 3px;
+     margin-left: 4px;
+     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace !important;
+}
+
+a.viewfullentry:not(old) {
+     font-size: 0;
+}
+
+a.viewfullentry::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+}
+
+a.viewfullentry:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+.netdbentry th:first-child, .netdbentry td:first-child  {
+     white-space: nowrap;
+     padding: 4px 6px !important;
+     text-align: left;
+}
+
+.netdbentry td:first-child  {
+     width: 80px;
+}
+
+.netdbentry td:nth-child(2) {
+     word-wrap: break-word;
+}
+
+.netdbentry img {
+     margin: 1px 0 0 0;
+}
+
+#leasesetsummary {
+     margin-top: 15px;
+     margin-bottom: 10px;
+}
+
+#leasesetsummary td:first-child {
+     width: 50px;
+     white-space: nowrap;
+}
+
+#leasesetdebug, #leasesetsummary {
+     font-size: 9pt;
+}
+
+#leasesetdebug td, #leaseset td {
+     padding: 5px !important;
+}
+
+#leasesetdebug {
+     margin-bottom: 10px;
+}
+
+#leasesetdebug th, #leasesetsummary th {
+     font-weight: bold;
+     padding: 8px 5px;
+     text-align: left;
+}
+
+#leasesetdebug th:last-child, #leasesetsummary th:last-child {
+     text-align: right;
+}
+
+#leasesetdebug th:first-child, #leasesetsummary th:first-child {
+     font-size: 10pt;
+}
+
+#leasesetdebug th a, #leasesetsummary th a {
+     font-size: 8pt;
+     text-transform: capitalize;
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
+#leasesetdebug th a:not(old), #leasesetsummary th a:not(old) {
+     font-size: 0;
+}
+
+#leasesetdebug th a::after, #leasesetsummary th a::after {
+     content: url(/themes/console/images/buttons/floodfill.png);
+}
+
+#leasesetdebug th a:hover, #leasesetsummary th a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+#leasesetdebug td:nth-child(odd) {
+     width: 200px;
+     white-space: nowrap;
+     text-align: right;
+     border-right: 1px inset #ccf;
+}
+
+#leasesetdebug td:nth-child(even) {
+     text-align: left;
+     white-space: nowrap;
+}
+
+#leasesetdebug td:nth-child(2) {
+     width: 10px;
+}
+
+table.leaseset {
+     font-size: 9pt;
+     margin: 5px 0 10px;
+}
+
+table.leaseset:last-child {
+     margin-bottom: 5px;
+}
+
+.leaseset th {
+     font-weight: normal;
+     padding: 5px;
+     text-align: left;
+}
+
+.leaseset th:last-child, .leaseset td:nth-child(2) {
+     text-align: right;
+     padding-right: 5px;
+}
+
+.leaseset tr:nth-child(2) td:last-child a:not(old) {
+     font-size: 0;
+}
+
+.leaseset tr:nth-child(2) td:last-child a::after {
+     content: url(/themes/console/images/buttons/add_address.png);
+}
+
+.leaseset tr:nth-child(2) td:last-child a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+div#noleasesets {
+     border: 1px solid #89f;
+     padding: 20px;
+     font-weight: bold;
+     background: #eff1ff;
+     margin: 10px 0 7px;
+     text-align: center;
+}
+
+div#sybilnav, div#sybils_summary {
+     border: 1px solid #89f;
+     padding: 10px;
+     margin-bottom: 10px;
+     background: #fff;
+}
+
+div#sybilnav {
+     padding: 5px 5px 0;
+}
+
+#sybilnav ul li:first-child {
+     margin-top: -10px;
+}
+
+#sybilnav ul li:last-child {
+     margin-bottom: 0;
+}
+
+#sybilnav li a {
+     display: inline-block;
+     width: calc(100% - 34px);
+     vertical-align: middle;
+     line-height: 100%;
+}
+
+table.sybil_routerinfo {
+     margin-bottom: 10px;
+}
+
+table.sybil_routerinfo:last-child {
+     margin-bottom: 5px;
+}
+
+.sybil_routerinfo th {
+     padding: 1px 1px 1px 6px !important;
+}
+
+table.sybil_routerinfo:first-of-type th {
+     padding: 6px !important;
+}
+
+.sybil_routerinfo th:first-child {
+     white-space: nowrap;
+     text-align: left;
+}
+
+.sybil_routerinfo th:nth-last-child(2) {
+     text-align: right !important;
+     padding-right: 0 !important;
+}
+
+.sybil_routerinfo th:last-child {
+     width: 20px;
+}
+
+.sybil_routerinfo td:first-child {
+     width: 50px;
+     white-space: nowrap;
+}
+
+.sybil_routerinfo img[width="32"] {
+     width: 24px;
+     height: 24px;
+     margin: -1px;
+     border-left: 1px solid #89f;
+}
+
+.main#netdb code, .main#netdb tt {
+     color: #03183f;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     font-weight: normal;
+}
+
+div#sybilnav {
+     background: #eff1ff;
+     -moz-columns: 4 200px;
+     -webkit-columns: 4 200px;
+     columns: 4 200px;
+     padding: 10px 0 0 5px;
+}
+
+#sybilnav li {
+     border: 1px solid #ddf;
+     border-bottom: 2px solid #ccf;
+     list-style: none;
+     margin-bottom: 5px;
+     margin-left: -15px;
+     padding: 3px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff 0%, #eef 100%);
+     border-radius: 2px 2px 0 0;
+     min-width: 170px;
+     box-sizing: border-box;
+     break-inside: avoid;
+     page-break-before: right;
+     -webkit-column-break-inside: avoid;
+}
+
+#sybilnav li:first-child {
+     margin-top: 10px !important;
+}
+
+#sybilnav ul li::before {
+     content: '\00A0\1F441\00A0';
+     content: url(images/eye.png);
+     padding: 0 5px;
+     font-size: 16pt;
+     line-height: 50%;
+     vertical-align: middle;
+}
+
+p.sybil_info, p.family, p.threatpoints, p.hashdist, p.notfound {
+     border: 1px solid #89f;
+     padding: 5px 5px 5px 30px;
+     margin: 3px 0;
+     color: #33f;
+     font-weight: bold;
+     text-align: left;
+     background: #ffe url(images/eye.png) 8px center no-repeat;
+     background: url(images/eye.png) 8px center no-repeat, linear-gradient(to right, #fff 40%, #dde1ff);
+}
+
+p.family a {
+     display: inline-block;
+}
+
+p.family + p.family, p.sybil_info + p.sybil_info {
+     margin-top: -4px;
+}
+
+p.sybil_info + a[name] + table.sybil_routerinfo, p.hashdist + a[name] + table.sybil_routerinfo  {
+     margin-top: 10px !important;
+}
+
+.threatpoints + a[name] + ul {
+     border: 1px solid #89f;
+     padding: 5px 5px 0;
+}
+
+.threatpoints + ul {
+     border: 1px solid #89f;
+     padding: 0 15px 0 30px;
+     margin: -4px 0 10px !important;
+     background: #eff1ff;
+}
+
+.threatpoints + ul li {
+     padding: 0;
+}
+
+.threatpoints + ul li:last-child {
+     margin-bottom: 6px;
+}
+
+p#sybil_totals {
+     padding: 15px;
+     border: 1px solid #89f;
+     background: #fff;
+}
+
+p:empty { /* empty paragraph nuke */
+     display: none;
+}
+
+/* Advanced lookup */
+
+#netdblookup {
+     margin-bottom: -8px;
+}
+
+#netdblookup th {
+     font-size: 11pt;
+     text-align: left;
+     padding: 10px;
+}
+
+#netdblookup td:first-child {
+     text-align: right;
+     width: 100px;
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+#netdblookup td:nth-child(2) {
+     width: 100px;
+}
+
+.subheading {
+     text-align: left !important;
+     background: #fff;
+     padding: 10px;
+     border: 1px solid #89f;
+}
+
+.subheading b {
+     font-size: 10pt !important;
+}
+
+/* end netdb */
+
+/* /stats */
+
+form#statnav {
+     border: 1px solid #89f !important;
+     padding: 10px 10px 10px 15px;
+}
+
+h3.stats {
+     border: 1px solid #89f;
+     border-radius: 0;
+}
+
+ul.statlist {
+     border: 1px solid #89f;
+     padding: 0 10px 0 0;
+     margin-left: 0 !important;
+     margin-bottom: -27px !important;
+     background: #eff1ff;
+}
+
+ul.statlist:last-of-type {
+     margin-bottom: -22px !important;
+}
+
+ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover {
+     text-decoration: none;
+     letter-spacing: normal;
+     font-size: 9pt;
+     line-height: 120%;
+}
+
+.statlist ul + br {
+     display: none !important;
+}
+
+ul.statlist li b, ul.statlist b a:hover, h3.stats a:hover  {
+     color: #0c153d !important;
+}
+
+ul.statlist li::before {
+     content: "\2B26\00A0";
+     margin-left: 5px;
+     font-size: 14pt;
+     line-height: 60%;
+     vertical-align: baseline;
+     color: #0c153d;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+ul.statlist li {
+     margin-left: 5px;
+     padding: 2px;
+     list-style: none;
+}
+
+ul.statlist li li {
+     margin-left: 16px;
+     margin-right: -20px;
+     margin-top: 2px;
+     line-height: 130% !important;
+     list-style: none;
+     padding: 2px 0;
+     border-top: 1px dotted #89f;
+     text-align: justify;
+}
+
+.statlist li li:first-child {
+     margin-top: 12px !important;
+     border-top: none;
+     padding-top: 2px;
+}
+
+ul.statlist li li::before {
+     content: "\279F\00A0";
+     vertical-align: baseline;
+     margin-left: 3px;
+}
+
+.main#stats a[href^="graph?"]::before {
+     content: "\279F\00A0";
+     color: #33a;
+     font-size: 14pt;
+     margin-left: 4px;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+.main#stats a[href^="graph?"]:hover::before {
+     color: #33a;
+}
+
+.main#stats a[href$="showEvents=true"]::before {
+     display: none;
+}
+
+ul.statlist li li:last-child {
+     padding-bottom: 2px;
+     border: 1px dotted #89f;
+     background: #fff;
+     background: linear-gradient(to right, #fff 0%, #eef 70%, #ddf 100%);
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+ul.statlist li:last-child {
+     padding-bottom: 15px;
+     margin-top: 2px;
+}
+
+ul.statlist li:first-child {
+     margin-top: -5px;
+}
+
+ul.statlist li li:last-child::before {
+     content: "\27A1\00A0";
+     margin-left: 2px;
+     vertical-align: text-top;
+}
+
+.statlist a[href*="graph"] {
+     margin-top: 2px !important;
+}
+
+.statlist li a[href*="graph"]:first-of-type {
+     margin-left: -1px;
+}
+
+.statlist a[href*="graph"]::after {
+     content: "\00A0";
+}
+
+#gatherstats + form {
+     background: #fff;
+}
+
+.main#stats form {
+     border: 1px solid #89f;
+     padding: 10px;
+     margin: -13px 0 -11px;
+}
+
+h3.stats {
+     margin-bottom: 9px !important;
+}
+/* end stats */
+
+/* netdb (main section) */
+
+#netdboverview {
+     margin: 15px 0 5px;
+     border: 1px solid #89f !important;
+}
+
+#netdboverview th {
+     padding: 5px;
+     font-size: 10pt;
+}
+
+#netdboverview td {
+     padding: 5px 5px 0;
+     padding: 0;
+     background: rgba(255,255,255,0.4) !important;
+}
+
+#netdbtransports th:first-child, #netdbcountrylist th:first-child {
+     text-align: left;
+}
+
+#netdbversions, #netdbtransports, #netdbcountrylist {
+     border: none;
+     margin: -1px 0;
+}
+
+#netdbversions {
+     border-right: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+}
+
+#netdbtransports {
+     border-bottom: 1px solid #89f;
+}
+
+#netdbcountrylist {
+     border-left: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+}
+
+#netdbversions td, #netdbtransports td, #netdbcountrylist td {
+     padding: 5px;
+}
+
+#netdbcountrylist img {
+     margin-right: 5px;
+     text-align: right;
+}
+
+.sybil_distance th {
+     text-align: left;
+     padding: 5px;
+}
+
+.sybil_distance th:last-child, .sybil_distance td:last-child {
+     text-align: right;
+}
+
+.sybil_distance tr:nth-child(n+2):hover {
+     background: #ffe;
+     font-weight: bold;
+}
+
+/* /help */
+
+#volunteer, #sidebarhelp, #configurationhelp, #reachabilityhelp, #legal, #changelog, #faq {
+     border: 1px solid #89f;
+     padding: 10px 15px 5px;
+     margin-bottom: 20px;
+     margin-top: 15px !important;
+     background: #eff1ff;
+     background: rgba(230,230,255,0.5);
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+#advancedsettings {
+     margin-top: -5px;
+     margin-bottom: 20px;
+}
+
+#volunteer {
+     margin-top: 20px !important;
+     padding-bottom: 0 !important;
+     background: linear-gradient(to bottom, rgba(230,230,255,0.5), rgba(230,230,255,0.5)), url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom !important;
+     background-size: 100% 100%, auto 75% !important;
+}
+
+#volunteer ul li, #volunteer ul li:first-child {
+     padding: 2px 0 !important;
+}
+
+#sidebarhelp h2 {
+     margin-bottom: 5px !important;
+}
+
+.main#help h2 {
+     margin: -16px -16px 0;
+}
+
+.main#help h3 {
+     margin: -5px -16px 3px;
+}
+
+.main#help p {
+     padding: 5px 0 0;
+     margin-top: 0;
+}
+
+.main#help ul {
+     margin-bottom: 5px;
+     margin-top: -5px;
+     padding-left: 15px;
+}
+
+.main#help ul li:first-child {
+     padding-top: 0;
+     margin-top: 10px !important;
+}
+
+#help ul.links {
+     margin-left: 20px;
+     padding-top: 0;
+}
+
+ul#reachability {
+     padding-left: 15px;
+}
+
+#configinfo th {
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+#changelog {
+     padding: 0;
+     margin-top: -5px !important;
+     margin-bottom: 10px !important;
+}
+
+#changelog h2 {
+     margin: -1px -1px 5px !important;
+}
+
+.main#help pre {
+     padding-left: 0;
+     padding-bottom: 20px;
+     margin: -5px 0 5px 10px;
+     width: 98%;
+     width: calc(100% - 10px);
+     height: 600px;
+     overflow: auto;
+     white-space: pre-wrap;
+}
+
+p#fullhistory {
+     text-align: right;
+     margin-bottom: -5px;
+     margin: -5px -1px -6px !important;
+     border: 1px solid #89f;
+     padding: 5px 10px 5px 5px !important;
+     background: #fff;
+}
+
+.main#help td.infohelp, .main#help td.infowarn, .main#help td.infohelp, .main#help p.infohelp {
+     background-size: 24px 24px !important;
+     padding-left: 46px !important;
+}
+
+/* mini faq */
+
+#faq h3 {
+     padding-left: 35px;
+     background: url(/themes/console/images/info/question.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, #eff2ff 50%) !important;
+     background-size: 18px 18px, 100% 100% !important;
+     background-blend-mode: luminosity, normal;
+     text-transform: none;
+     letter-spacing: 0;
+     word-spacing: 0;
+     font-size: 10.5pt;
+}
+
+#faq p.infohelp {
+     margin: -11px -16px 4px;
+}
+
+#faq ul {
+     margin: -5px 15px 0 !important;
+}
+
+#portfaq {
+     margin: -4px -16px -6px;
+     width: auto;
+}
+
+#portfaq th:first-child, #portfaq td:first-child {
      font-weight: bold;
+     text-align: right;
+     padding-top: 6px;
+     padding-bottom: 6px;
+     padding-left: 10px;
+}
+
+#portfaq th:nth-child(n+2) {
+     text-align: left;
+}
+
+#portfaq .infohelp {
+     padding-top: 15px !important;
+     padding-bottom: 15px !important;
+}
+
+#portfaq th[colspan="3"] {
+     text-align: left;
+     font-size: 10.5pt !important;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+#portfaq td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#portfaq td:last-child, #portfaq td[colspan="3"] {
+     text-align: justify;
+     padding-right: 10px;
+}
+
+#portfaq td[colspan="3"] {
+     font-weight: normal;
+}
+
+/* end mini faq */
+
+/* end /help */
+
+.eventspanel br {
+     display: none;
+}
+
+.eventspanel h3 {
+     margin-top: 0;
+}
+
+.eventspanel form {
+     border: 1px solid #89f;
+     padding: 10px;
+     margin-top: -11px;
+     background: #fff;
+}
+
+.eventspanel th {
+     text-align: left;
+}
+
+#proof p {
+     margin: 0;
+     padding: 0;
+}
+
+#proof textarea, #proof textarea:focus {
+     border: none;
+     margin: 0;
+     padding: 15px 20px;
+     width: 100%;
+     box-shadow: none;
+     color: #333;
+     background: none;
+}
+
+#debug h2 + table {
+     margin-top: -11px;
+}
+
+#debug th {
+     text-align: left;
+}
+
+#debug tr {
+     border-bottom: 1px solid #89f;
+}
+
+#debug td {
+     padding: 2px 5px;
+}
+
+#debug ul {
+      line-height: 120%;
+}
+
+#debug li:first-child {
+     padding: 10px 0 0;
+}
+
+#debug li:last-child {
+     padding-bottom: 0;
+     margin-bottom: -9px;
+}
+
+#debug li {
+     padding-bottom: 0;
+     margin-left: -5px;
+     margin-bottom: -2px;
+}
+
+#certs p {
+     margin: 3px 0;
+     padding: 10px 5px;
      border: 1px solid #89f;
+     background: #fff;
 }
 
-div.configure tr, div.configure td {
-     padding: 10px 2px;
+#certs h4 + p {
+     margin-top: -6px;
+     margin-bottom: 10px;
 }
 
-div.configure tr {
+#certs textarea {
+     margin: -1px 0 10px 0;
+     width: 100%;
 }
 
-div.configure li:first-child, div.main li:first-child {
-     margin-top: -10px;
+#advancedsettings h2 {
+     margin: 10px 0 0 !important;
 }
 
-div.configure li:last-child {
-     margin-bottom: -5px;
+#advancedsettings p.infohelp {
+     margin: -1px 0;
 }
 
-div.configure h2:first-child {
+#advancedsettings td.infowarn {
+     padding: 10px 10px 10px 40px !important;
+     border: 1px solid #89f;
+     background: #fffff5 url(/themes/console/images/info/infowarn.png) 10px center no-repeat !important;
+     background-size: 22px 22px !important;
+}
+
+#configinfo th {
+     text-align: left;
+     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     padding: 7px 10px;
+     color: #050;
+}
+
+#configinfo td {
+     text-align: justify;
+     padding: 5px 15px;
+     background: #eff1ff;
+     background: rgba(230,230,255,0.5);
+}
+
+/* informational images */
+
+#bugreports td.infohelp {
+     background: #fff url(/themes/console/images/info/bugreport.png) no-repeat 12px center;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+p#debugmode {
+     padding: 15px 15px 15px 50px;
+     background: #fff url(/themes/console/images/info/debug.png) 12px center no-repeat;
+     background-size: 28px 28px;
+}
+
+p#sybilinfo {
+     padding: 15px 15px 15px 50px;
+     background: #fff url(/themes/console/images/info/experimental.png) 12px center no-repeat;
+     background-size: 28px 28px;
+}
+
+p.infowarn {
+     border: 1px solid #89f;
+     padding: 15px 15px 15px 50px;
+     background: #fff url(/themes/console/images/info/infowarn.png) 10px center no-repeat;
+     line-height: 130%;
+}
+
+.infowarn#tunnelconfig {
      margin-top: 15px;
 }
 
-.sidebarconf button {
-     margin: 2px;
-     padding: 1px;
-     min-width: 0;
-     background: none;
+#bandwidthconfig tr:first-child .infohelp {
+     background: #fff url(/themes/console/images/info/bandwidth.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-.sidebarconf th:nth-child(1) {
-     text-align: center;     
+#addkeyring td.infohelp {
+     background: #fff url(/themes/console/images/info/keys.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-.sidebarconf th:nth-child(2) {
-     text-align: left;     
+#joinfamily tr:nth-child(3) td:first-child {
+     background: #fff url(/themes/console/images/info/key.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-.sidebarconf td:first-child {
-     width: 60px;
-     text-align: right;
-     padding-right: 50px;
+#newfamily tr:last-child td:first-child {
+     background: #fff url(/themes/console/images/info/label.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-.sidebarconf td {
-     font-weight: bold;
-     font-size: 9pt;  
+#oldhome td:first-child {
+     background: #fff url(/themes/console/images/info/home.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-.sidebarconf td:nth-child(3), .sidebarconf td:nth-child(4) {
-     width: 70px;
-     padding: 0;  
+#floodfillconfig tr:first-child .infohelp {
+     background: #fff url(/themes/console/images/info/floodfill_32x32.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-.sidebarconf td:nth-child(3) {
-     text-align: right;
-     padding-left: 50px;
+p#clientconf.infohelp, p#webappconfigtext.infohelp {
+     background: #fff url(/themes/console/images/info/java_edit.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-.sidebarconf td:nth-child(4) {
-     text-align: left;
-     padding-right: 50px;
+p#pluginconfigtext {
+     background: #fff url(/themes/console/images/info/plugin_edit.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-.topshimten {
-     margin-top: 15px;
-     margin-bottom: 15px;
+#plugininstall .infohelp {
+     background: #fff url(/themes/console/images/info/plugin_link.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-div.messages {
-     padding: 10px 10px;
-     background: #fff;
-     border: 1px solid #89f;
-     border-right: 0;
-     margin: -6px -15px 10px -16px;
-     text-align: center;
-     font-size: 9pt;
-     font-weight: bold;
-     color: #474;
+#plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2) {
+     background: #fff url(/themes/console/images/info/url.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-div.messages li, div.messages ul {
-     padding: 10px 0 0 5px !important;
-     margin: -10px 0 0 25px !important;
+#manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2) {
+     background: #fff url(/themes/console/images/info/from_file.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#manualreseed tr:nth-last-child(2) td.infohelp {
+     background: #fff url(/themes/console/images/info/box.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#config_peers tr:nth-child(3) td.infohelp {
+     background: #fff url(/themes/console/images/info/blocked.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#shutdownrouter + p.infohelp {
+     background: #fff url(/themes/console/images/info/power.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#restartrouter + p.infohelp, #config_family .infohelp.needrestart {
+     background: #fff url(/themes/console/images/info/reboot.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#systray + p.infohelp {
+     background: #fff url(/themes/console/images/info/systray.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#servicedebug + p.infohelp {
+     background: #fff url(/themes/console/images/info/debug.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#browseronstart + p.infohelp {
+     background: #fff url(/themes/console/images/info/launch_browser.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+.main#config_reseed p.infohelp {
+     background: #fff url(/themes/console/images/info/connect.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+p#enablefullstats, p#gatherstats {
+     background: #fff url(/themes/console/images/info/statistics.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#config_family .infohelp {
+      background: #fff url(/themes/console/images/info/family.png) 12px center no-repeat;
+      padding: 15px 15px 15px 50px;
+      background-size: 28px 28px;
+      margin-bottom: -1px !important;
+}
+/* end informational images */
+
+/* login inputs */
+
+#consolepass input[name="name"], #externali2cp input[name="user"] {
+     background: #fff url(/themes/console/images/buttons/user.png) 5px center no-repeat;
+     padding: 4px 5px 4px 26px !important;
+     background-size: 16px 16px !important;
+}
+
+#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"] {
+     background: #fff url(/themes/console/images/buttons/password.png) 5px center no-repeat;
+     padding: 4px 5px 4px 26px !important;
+     background-size: 16px 16px !important;
+}
+
+/* logs */
+
+#logs ul {
+     margin-left: -22px;
+     margin-right: -28px;
+     margin: -4px 0 0 -20px;
+     display: inline-block;
+     word-break: break-all;
+}
+
+#logs li {
      list-style: none;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     line-height: 130%;
      text-align: left;
+     display: inline-block;
+     width: 100%;
 }
 
-div.error {
-     color: #d00000;
-     background-image: url("../images/errortriangle.png");
-     background-position: 10px center;
-     background-repeat: no-repeat;
-     padding: 10px 0;
-     margin-left: -5px;
+#logs li::after {
+     content: "";
+     display: block;
+     border-top: 1px dotted #bbf;
+     width: 100%;
+     margin: 4px 0 0;
 }
 
-div.notice {
-     font-style: italic;
+#logs li:last-child::after {
+     border: none;
+     margin: 0;
 }
 
-h1 {
-     font-size: 18pt;
-     text-shadow: 0px 0px 1px rgba(0, 0, 32, 0.7);
-     text-align: left;
-     border: 1px solid #89f;
-     border-bottom: 1px solid #89f;
-     border-right: 1px solid #89f;
-     padding: 19px 20px;
-     margin: 0 1px 0 200px;
-     line-height: 93%;
-     text-transform: uppercase;
-     letter-spacing: 0.3em;
-     background: #fff url(images/titlebg.png) center right no-repeat !important;
-     min-width: 500px;
-     -moz-border-radius: 0 3px 0 0;
-     -khtml-border-radius: 0 3px 0 0;
-     border-radius: 0 3px 0 0;
+#logs font[color^="#"]::before {
+     content: "";
+     display: inline-block;
+     width: 6px;
+     height: 6px;
+     background: #fff;
+     border-radius: 50%;
+     margin-right: 5px;
+     margin-left: -17px;
+     vertical-align: calc(1px);
 }
 
-span.newtab {
-     text-align: right;
+#logs li font[color="#cc0000"]::before {
+     background: #cc0000;
+}
+
+#logs li font[color="#006600"]::before {
+     background: #006600;
+}
+
+#logs li font[color="#ff3300"]::before {
+     background: #ff3300;
+}
+
+#logs li font[color="#ff00cc"]::before {
+     background: #ff00cc;
+}
+
+#logs li font[color="#000099"]::before {
+     background: #000099;
+}
+
+/* end logs */
+
+/* responsive layout */
+
+@media screen and (max-width: 900px) {
+.welcome h2 {
+     font-size: 10pt !important;
+}
+
+.homelinkedit input[name="nofilter_url"] {
+     width: 240px !important;
+}
+
+#newfamily input[type="text"] {
+     width: 160px !important;
+}
+
+#joinfamily input[type="file"] {
+     width: 220px;
+}
+
+h3.ptitle, h3.tabletitle, th.th_title, h3#udpcon, h3#ntcpcon {
+     font-size: 10pt;
+}
+
+#ntcpconnections th:last-child:not(old) {
+     font-size: 0;
+}
+
+#ntcpconnections th:last-child::before {
+     content: url(/themes/console/images/info/backlogged.png) !important;
+}
+
+#consolepass input[name="name"], #externali2cp input[name="user"],
+#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"] {
+     width: 130px !important;
+     min-width: 130px !important;
+}
+
+input[name="pluginURL"] {
+     width: 190px !important;
+     margin-left: 0 !important;
+}
+
+#plugininstall tr:nth-child(3) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2) {
+     background-size: 0 0 !important;
+     padding-left: 5px !important;
+}
+
+#plugininstall .optionsave {
+     padding-right: 0 !important;
+}
+
+input[name="pluginFile"] {
+     transform: scale(0.9);
+     margin-left: 0 !important;
+}
+
+.main#profiles table, .main#peers table, .main#tunnels table, .main#jobs table {
      font-size: 8pt;
-     float: right;
-     letter-spacing: 0;
 }
-/* opera targetted hack */
-x:-o-prefocus, span.newtab {
-     margin-top: -25px;
+
+#netdbversions th:last-child, #netdbtransports th:last-child, #netdbcountrylist th:last-child {
+     max-width: 60px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+}
+
+#netdbversions td, #netdbtransports td, #netdbcountrylist td {
+     font-size: 8.5pt !important;
+}
 }
 
-h2 {
-     font-size: 14pt;
-     padding: 10px;
-     border: 1px solid #89f;
-     letter-spacing: 0.04em;
-/*     font-variant: small-caps; */
-     text-transform: uppercase;
-     background: #fff;
-     text-shadow: 0px 1px 1px #99f;
+@media screen and (max-width: 1000px) {
+.welcome h2 {
+     font-size: 11pt;
 }
 
-h3 {
-     font-size: 12pt;
-     padding: 6px 10px 8px;
-     border: 1px solid #89f;
-     letter-spacing: 0.04em;
-     margin-bottom: 10px;
-     background: #fff;
-     text-transform: uppercase;
-     text-shadow: 0px 1px 1px #99f;
+div.confignav {
+     font-size: 8.5pt !important;
 }
 
-h2, h3 {
-     background-image: url("images/titlebg.png") !important;
-     background-repeat: no-repeat;
-     background-position: center right;
-     -moz-border-radius: 0 3px 0 0;
-     -khtml-border-radius: 0 3px 0 0;
-     border-radius: 0 3px 0 0;
+.tab2 {
+     padding: 3px 8px;
 }
 
-.routersummary h2, .routersummary h3, div.confignav, th {
-     background-image: url("images/tinytitle.png") !important;
-     background-repeat: repeat-x;
-     background-position: center right;
+.tab a {
+     padding: 2px 10px;
 }
 
+input.search[type="text"] {
+     width: 200px;
+}
 
-.proxyfooter{
-     font-size: 7pt;
-     display: none !important;
+input[name="pluginURL"] {
+     width: 260px;
 }
 
-table {
-     border-collapse: collapse;
-     border: 1px solid #89f;
-     margin: 0 0 5px 0;
-     cell-padding: 1px;
+#plugininstall tr:nth-child(3) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2) {
+     background-size: 20px 20px;
+     padding: 15px 0 15px 36px;
+     background-position: 10px center;
+}
+
+.logo {
+     float: none;
+     position: absolute;
+     top: 10px !important;
+     margin: 0 5px !important;
+     display: block;
+     background-size: 200px auto !important;
+     min-width: 500px;
+     width: calc(100% - 36px);
+}
+
+.warning {
+     margin: 140px 5px 0 !important;
+}
+
+.logo a:nth-child(n+2) {
+     width: 25%;
+     white-space: nowrap;
+     font-size: 10pt;
+}
+
+.proxyfooter {
+     display: none;
+}
+
+img[src$="bound.png"] {
+     transform: scale(0.9);
+}
+
+.main#tunnels th, .main#profiles th {
      font-size: 8pt;
-     background: #fff;
+}
+
+#config_update .messages {
+     background-size: 22px 22px;
+     background-position: 8px center;
+     padding-left: 40px;
+}
+
+.main#view_profile {
+     padding: 0 !important;
+     min-width: 540px;
+}
+
+#view_profile pre {
+     margin: -5px 5px;
+     width: calc(100% - 5px);
+}
+
+#view_profile h2 {
+     margin: -1px;
+     font-size: 13pt;
+}
+
+#viewprofile {
+     border: none;
+     min-width: 500px;
+}
+
+input[name="speed"], input[name="capacity"] {
+     min-width: 80px;
+     width: 80px;
+}
+
+#netdbversions th, #netdbtransports th, #netdbcountrylist th {
+     font-size: 9pt !important;
+}
+
+.main#events {
+     min-width: 510px;
+}
+
+#events select {
+     min-width: 100px;
+}
+
+#events table {
+     table-layout: fixed;
      width: 100%;
 }
 
-table hr {
-     padding: 0;
-     color: #89f;
-     background: #89f;
-     border: 0px solid #89f;
-     margin: -5px -5px -10px -5px !important;
-     height: 1px;
+#events td:last-child {
+     word-break: break-all;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.tab, .tab2 {
+     padding: 1px 0;
+     min-width: 50px !important;
+}
+
+.tab2 {
+     padding: 3px 10px;
+}
+
+.tab a {
+     padding: 2px 12px;
+}
+
+.main#peers th {
+     font-size: 8pt;
+}
+
+#peers img[src^="/flags.jsp"], #profiles img[src^="/flags.jsp"], #tunnels img[src^="/flags.jsp"] {
+     transform: scale(0.9);
+}
+
+p#enablefullstats input[type="checkbox"] {
+     float: left;
+     margin-top: 0;
+}
+
+/* profiles, peers, tunnels, job queue, netdb - whitespace reduction */
+
+.main#profiles, .main#peers, .main#tunnels, .main#jobs, .main#netdb {
+     padding: 5px;
+     min-width: 560px;
+}
+
+.main#profiles .confignav, .main#netdb .confignav {
+     margin: -6px;
+}
+
+.main#profiles table, .main#peers table, .main#tunnels table {
+     margin: 5px 0;
+} 
+
+#ntcpconnections {
+     margin-bottom: 0 !important;
+}
+
+.main#profiles .infohelp {
+     margin: 11px 0 5px !important;
+}
+
+.widescroll + .infohelp {
+     margin: 0 !important;
 }
 
-table tt {
-     font-size: 8pt;
+.main#peers #upnpstatus {
+     margin-bottom: 5px 0 !important;
 }
 
-table code {
-     font-size: 120%;
+.main#peers .infohelp {
+     margin: 5px 0 0;
 }
 
-th {
-     background-color: #fff;
-     padding: 8px 2px;
-     text-align: center;
-     border-bottom: 1px solid #89f;
+.main#profiles h3, .main#peers h3, .main#tunnels h3 {
+     margin: 5px 0 -6px !important;
+     font-size: 10.5pt;
 }
 
-/* begin home page */
+.main#tunnels h3 {
+     margin-top: -2px !important;
+}
 
-/*
-#appsummary {
-     clear: none;
-     float: none;
-     left: 10px;
-     margin: 0;
-     position: absolute;
-     top: 10px;
+.main#jobs h3 {
+     margin-top: 0;
 }
 
-#homemain {
-     left: 217px;
-     margin: 0 10px 10px 0;
-     position: absolute;
-     text-align: center;
-     top: 10px;
+.main#tunnels h3#exploratorytunnels {
+     margin-top: 0 !important;
 }
 
-#homenews {
-     margin: 0 10px 5px 0;
+h3 + .statusnotes {
+     margin-top: 5px !important;
 }
 
-h2.app {
-     border-radius: 8px;
-     margin: 1px 10px 15px 0 !important;
+h2 {
+     font-size: 12pt !important;
 }
-*/
 
-h4.app, h4.app2 {
-     margin: 0 10px 5px 10px;
-     padding: 10px 0 8px 0;
-     font-size: 12pt;
-     padding: 6px 10px 8px;
-     border: 1px solid #89f;
-     letter-spacing: 0.04em;
-     background: #fff;
-     text-transform: uppercase;
-     text-shadow: 0px 1px 1px #99f;
-     background: url('images/tinytitle.png') center center repeat-x;
+.main#jobs h2 {
+     margin-bottom: 5px !important;
 }
 
-h4.app2 {
-     clear: left;
-     margin-top: 5px !important;
+.main#jobs h3 + ol:empty + h3 {
+     margin-top: -16px !important;
 }
 
-div.ag2 {
-     margin: 0 -10px -5px;
+#jobstats {
+     margin-bottom: 0;
 }
 
-div.app {
-     float: left;
-     padding: 2px;
-     min-width: 60px;
-     text-align: center !important;
-     border: none;
-     margin: 0 2px 2px;
+h3#totaljobstats {
+     margin-top: 11px !important;
 }
 
-div.app:last-child {
-     margin-bottom: 10px;
+.statusnotes:last-child {
+     margin-bottom: 0;
 }
 
-div.app a:link, div.app a:visited, div.app a:hover, div.app a:active {
-     text-decoration: none;
+#profile_defs, #floodfills, #profiles ul, .main#peers h3#transports {
+     margin-bottom: 0 !important;
 }
 
-div.appgroup {
-     margin: 0;
-     padding: 0 8px;
-     width: auto;
+.main#peers pre {
+     margin-top: -1px;
 }
 
-div.search {
-     margin: 10px 10px 0 0;
-     padding: 8px 8px 0 8px;
-     width: auto;
+.main#peers pre + h3 {
+     margin-bottom: 5px !important;
 }
 
-table.search {
-     background: none;
-     margin-left:auto;
-     margin-right:auto;
-     padding: 8px;
-     width: auto;
+#floodfills, #profiles ul {
+     margin-top: 11px !important;
 }
 
-img.app {
-     height: 32px;
-     width: 32px;
-     padding: 5px 15px;
+table[id*="connections"] td, #floodfills td,  #profilelist td, #jobstats td, .main#tunnels td {
+    padding: 3px;
+    border-right: 1px inset #ccf;
 }
 
-img.app2 {
-     height: 40px;
-     padding: 3px 6px 0 6px;
+.main#netdb #netdboverview, #netdblookup {
+     margin: 11px 0 0;
 }
 
-.app table {
-     background: none;
-     border: 0;
-     margin: auto;
-     width: auto;
+#netdb h3.tabletitle, h3.sybils {
+     font-size: 10pt;
 }
 
-.app tr {
-     background: none;
-     border: 0;
-     margin: 0;
+#netdblookup {
+     margin-bottom: -11px;
 }
 
-.app td {
-     background: none;
-     border: 0;
-     margin: 0;
-     padding: 0;
+.netdbentry, #leasesetdebug, #leasesetsummary, table.leaseset {
+     margin: 11px 0 -6px !important;
 }
 
-div.applabel {
-     background: url('images/tinytitle.png') center center repeat-x;
-     -moz-border-radius: 3px;
-     -khtml-border-radius: 3px;
-     border-radius: 3px;
-     font-size: 9pt;
-     margin: 0;
-     padding: 4px;
-     text-align: center;
-     min-width: 60px;
-     line-height: 110%;
-     text-transform: lowercase;
+.netdbentry:last-child, table.leaseset:last-child {
+     margin-bottom: 0 !important;
+}
+
+.netdbentry th code, .sybil_routerinfo th code, .leaseset th code {
      font-size: 8pt;
-     border: 1px solid #89f;
-     box-shadow: 0 1px 1px #bbb;
 }
 
-div.applabel:hover {
-     box-shadow: none;
+#debugmode {
+     margin-bottom: -6px !important;
 }
 
-/* end home page */
+table.sybil_routerinfo:last-child {
+     margin-bottom: 0 !important;
+}
 
-tt {
-     font-size: 8pt;
+#banlist li {
+     width: calc(100% - 5px);
 }
 
-tt, pre {
-     font: 8pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+#schedjobs {
+     margin: -11px 0 -6px !important;
 }
 
-td {
-     padding: 4px;
+#upnpstatus + #ntcpcon {
+     margin-top: 5px !important;
 }
+/* end whitespace reduction */
 
-tr:nth-child(even) {
-     background: #fff url(../light/images/magic.png);
+.main#help h3, #faq h3 {
+     font-size: 10pt !important;
 }
 
-tr:nth-child(odd) {
-     background: #eef url(../light/images/magic.png);
+#portfaq td:nth-child(2) {
+     white-space: normal;
+}
 }
 
-hr {
-     color: #89f;
-     background: #89f;
-     height: 2px;
-     border: 0px solid #89f;
-     margin: 3px 0;
+@media screen and (max-width: 1500px) {
+#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,
+#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {
+   min-height: 12px;
 }
 
-.statusnotes {
-     font-style: italic;
-     font-size: 8pt;
-     color: #001;
-     text-align: center;
-     margin: -8px 0 7px 0;
-     background: #fff;
-     border: 1px solid #89f !important;
-     border-top: 0;
-     padding: 4px 0 2px 0;
-     background-image: url("images/tinytitle.png") !important;
-     background-repeat: repeat-x;
-     background-position: center right;
+.langbox {
+     margin-top: 3px !important;
 }
 
-div.joblog {
-     margin: 10px 0;
-     line-height: 130% !important;
+#sb_localtunnels td:first-child {
+     padding-right: 3px !important;
 }
 
-div.joblog:li {
-     word-wrap: break-word !important;
-     line-height: 80% !important;
+.tunnels_client th:first-child:not(old) {
+     font-size: 0 !important;
 }
 
-div.joblog:ul {
-     word-wrap: break-word !important;
-     text-align: justify;
+.tunnels_client th:first-child::after {
+     content: "\21E9\21E7";
+     font-size: 12pt;
+     line-height: 0;
+     vertical-align: middle;
+     letter-spacing: -0.3em;
 }
 
-div.joblog li:first-child {
-     margin-top: -10px;
+.main#help h3, #faq h3 {
+     font-size: 10.5pt !important;
+}
 }
 
-div.joblog li:last-child {
-     margin-bottom: -10px;
+@media screen and (min-width: 900px) {
+#consolepass input[name="name"], #externali2cp input[name="user"],
+#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"] {
+     width: 160px;
+}
 }
 
-div.joblog form:first-child {
-     margin-top: 10px;
+@media screen and (min-width: 1500px) {
+body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes, .routersummary button.download,
+#peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, code, tt, pre, .netdbentry th, .configtable th, ul.statlist a[name],
+ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover, div.messages, th {
+     font-size: 10pt !important;
 }
 
-div.joblog table {
-     margin-top: 15px;
+.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, #banlist li, .news #newsStatus, .news #ewsDisplay, .topness, .footnote {
+     font-size: 9pt !important;
 }
 
-div.joblog p {
-     line-height: 130%;
+.main, .news, h1 {
+     margin-left: 232px !important;
 }
 
-div.joblog h3 {
-     margin: 10px 0 20px 0;
+.routersummary {
+     width: 225px !important;
 }
 
-div.joblog h3:first-child {
-     margin: -10px 0 15px 0;
+.routersummary img[src$="i2plogo.png"] {
+     margin-left: -2px;
+     transform: none;
+     width: 210px;
+     margin-top: -1px;
 }
 
-div.joblog hr {
-     margin: 15px 0 15px;
+.routersummary table[id^="sb_"] {
+     width: 226px !important;
 }
 
-div.joblog ol {
-     margin-bottom: 0px;
+.routersummary h3 a, #netdboverview th {
+     font-size: 11pt !important;
 }
 
-input {
-     margin: 3px 5px 3px 0;
-     vertical-align: middle;
+.routersummary h3 {
+     padding: 4.5px 0 !important;
 }
 
-input[type=text], input[type=password] {
-     margin: 3px 5px 3px 5px;
-     vertical-align: middle;
+#sb_internals a, #sb_services a, #sb_advanced a {
+     max-width: 210px;
 }
-select {
-     margin: 3px 5px 3px 5px;
-     vertical-align: middle;
+.routersummary button[type="submit"] {
+     min-width: 100px;
+     margin: 2px 4px 1px;
 }
 
-submit {
-     margin: 3px 5px 3px 5px;
-     padding 2px 0;
-     font: 8pt/140% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+div.app {
+     width: 154px;
 }
 
-p {
-     padding: 5px 20px 0px 20px;
-     text-align: justify;
+.app img {
+     padding: 10px 60px 9px;
 }
 
-p img:first-child {
-     display: none;     
+.applabel {
+     width: 150px !important;
+     padding: 4px 2px 2px !important;
 }
 
-.formaction {
-     text-align: right;
-     margin: -10px -5px;
+.applabel a {
+     height: 16px !important;
 }
 
-.langbox {
-     margin: 5px 5px 0 5px;
-     color: #001;
-     font-size: 7pt;
-     width: 330px;
-     text-align: right;
-     float: right;
-     valign: middle;
+.footnote {
+     font-size: 8pt !important;
 }
 
-/* opera targetted hack */
-x:-o-prefocus, .langbox img {
-     margin-bottom: 2px;
-     margin-top: 2px;
+h3, h3.ptitle, h3.tabletitle, th.th_title {
+     font-size: 11pt;
 }
 
-.langbox img {
-     padding: 0 2px; /* Ignored by IE8 */
+.newsentry h3, .newsentry h3 a, #news.main h3, .newsDate {
+     font-size: 10.5pt !important;
 }
 
-.links {
-     padding-bottom: -2px;
-     text-align: justify;
-     margin-top: 5px !important;
+.newsAuthor {
+     font-size: 9pt;
+     background-size: 12px 12px;
+     padding-left: 14px;
+     background-position: left center;
 }
 
-.links li {
-     list-style-image: url("images/link.png") !important;
-     padding: 5px 10px 0 !important;
+#news #newsDisplay, #news #newsStatus {
+     margin-bottom: 0 !important;
 }
 
-.links li:first-child {
-     padding: 14px 10px 5px !important;
+#console h3 {
+     font-size: 12pt;
 }
 
-.links li:last-child {
-     margin-bottom: 0px !important;
-     margin-top: 0px;
+#netdb h3.tabletitle, h3.sybils {
+     font-size: 10.5pt;
 }
 
-.links b {
-     font-size: 10pt;
-     line-height: 150%;
-     letter-spacing: 0.02em;
+h3#i2pclientconfig, h3.ptitle {
+     margin-bottom: -15px !important;
 }
 
-a:link {
-     color: #006;
-     text-decoration: none;
-     font-weight: bold;
-     word-wrap: break-word;
+h3#systray, h3#servicedebug, h3#browseronstart {
+     margin-bottom: -15px !important;
 }
 
-a:visited {
-     color: #448;
-     text-decoration: none;
-     font-weight: bold;
+h3#pluginmanage {
+     margin-bottom: -20px !important;
 }
 
-a:hover {
-     color: #f60;
-     text-decoration: underline;
-     font-weight: bold;
+h4#updateplugins {
+     margin-top: -16px !important;
+     font-size: 10pt;
+     padding: 5px 10px;
 }
 
-a:active {
-     color: #f93;
-     text-decoration: underline;
-     font-weight: bold;
+h3#webappconfig {
+     margin-bottom: -33px;
 }
 
-pre {
-     font-size: 9pt;
-     margin: 0px 20px;
+#shutdown.formaction, #restart.formaction, #systray.formaction, #runonstart.formaction, #dumpthreads.formaction, #browserstart.formaction,  #updateplugins.formaction {
+     margin-top: -15px;
 }
 
-tt {
-     font-size: 9pt;
-     font-weight: bold;
-     color: darkgreen;
+button.control {
+     font-size: 0 !important;
+     padding: 14px !important;
 }
 
-.tablefooter {
-     border: 1px solid #a8f;
+#jardump td {
+     font-size: 9pt !important;
 }
 
-.tablefooter tr, .tablefooter td {
-     background: #fff;
-     background-image: url("images/tinytitle.png") !important;
-     background-repeat: repeat-x;
-     background-position: center right;
-     font-size: 8pt;
-     font-weight: bold;
-     line-height: 150%;
-     word-wrap: nowrap;
-     padding: 8px 1px;
-     border-top: 2px solid #89f;
+#jardump tt, #wrapperlogs pre {
+     font-size: 8pt !important;
 }
 
-.tidylist {
-     text-align: justify;
-     padding-right: 25px;
-     margin-right: 15px !important;
-     margin-left: 15px;
+#leasesetdebug th, #leasesetsummary th {
+     font-size: 11pt !important;
 }
 
-.tidylist code {
-     text-align: left;
-     font: 9pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     color: #723;
-     padding: 2px 3px;
-/*     background: #fff;*/
-     font-weight: bold;
+div.news {
+     padding-bottom: 5px !important;
 }
 
-div.graphspanel {
-     padding: 10px 5px 20px 5px;
-     margin: -16px -16px -11px -16px;
-/*     border: 1px solid #89f;*/
-     text-align: center !important;
+.sorry {
+     margin-left: 232px !important;
 }
 
-div.graphspanel img {
-     border: 1px solid #77f;
-     padding: 2px;
-     margin: 6px;
-     background: #ccf;
-     -moz-box-shadow: inset 0px 0px 0px 0px #002;
-     opacity: 0.9;
+div.joblog h3 {
+     margin-top: 8px;
 }
 
-div.graphspanel img:hover {
-     border: 1px solid #89f;
-     padding: 2px;
-     margin: 6px;
-     text-align: center !important;
-     background: #001;
-     -moz-box-shadow: inset 0px 0px 2px 1px #f60;
-     opacity: 1;
+.subheading b {
+     font-size: 10.5pt !important;
 }
 
-div.graphspanel hr {
-     margin: 10px 0;
+#stats.main form {
+     margin-top: -14px;
 }
 
-div.graphspanel form:last-child {
-     text-align: left;
-     margin: 0 20px;
+.confignav {
+     padding: 0 5px !important;
 }
 
-div.graphspanel h3 {
-     text-align: left;
-     margin: 10px 20px 10px 20px;
+.tab, .tab2 {
+     margin-top: -1px !important;
 }
 
-div.footnote {
-     text-align: right;
-     color: #339;
-     font-size: 7pt;
-     margin-bottom: -4px !Important;
+#help .confignav {
+     padding: 0 !important;
+     position: sticky;
+     top: -1px;
+     z-index: 999;
 }
 
-div.footnote hr{
-     margin: 10px 0 5px 0 !important;
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border: 0px solid #99f;
+#help .tab {
+     margin-top: -1px !important;
+     margin-bottom: -1px !important;
 }
 
-button.search {
-     background: #ffe url('../images/magnifier.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main[id^="config_"] th, h4#updateplugins {
+    font-size: 10.5pt !important;
 }
 
-input.search[type="text"] {
-     background: #ffe url('../images/magnifier.png') no-repeat 2px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+.homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child {
+     font-size: 0 !important;
 }
-+
-.topness {
-     font-size: 7.5pt;
-     text-align: right;
-     margin-top: -8px;
-     margin-bottom: -5px;
-     margin-right: 5px;
 }
 
-/* Fixes for when app is not started and console error loads inside iframe */
+/* end responsive layout */
 
-body.iframed {
-     background: transparent url('../dark/images/transparent.gif') !important;
-}
+/* Edge/IE tweaks */
 
-.iframed div.routersummaryouter {
-     display: none !important;
+_:-ms-lang(x), #sidebarconf tr, .homelinkedit tr, #clientconfig tr, #webappconfig tr,  #configstats tr, #tunnelconfig tr, #profiles tr,
+#floodfills tr, #netdboverview tr, .netdbentry tr, #leasesetdebug tr, #leasesetsummary tr, .leaseset tr,
+.sybil_routerinfo tr, #enviro tr, #schedjobs tr, #jobstats tr, #eventlog tr, .tunneldisplay tr, #udpconnections tr, #ntcpconnections tr {
+     border-top: 1px solid #ccf;
 }
 
-.iframed h1 {
-     margin: 0 1px 0 0 !important;
+_:-ms-lang(x), #peerdefs td:first-child {
+     border-right: 1px solid #ccf;
 }
 
-.iframed div.sorry {
-     margin: -1px 1px 0 0 !important;
+_:-ms-lang(x), .tunnels_client th:first-child::after {
+     letter-spacing: -0.05em;
+     font-weight: normal;
 }
 
-/* end iframed console fixes */
+/* end Edge/IE tweaks */
diff --git a/installer/resources/themes/console/classic/console_big.css b/installer/resources/themes/console/classic/console_big.css
index 0bb0fc0f892d67e5deefcad6a96b747efa34e9e3..13a4589530098c377da728e62635ff045a64958e 100644
--- a/installer/resources/themes/console/classic/console_big.css
+++ b/installer/resources/themes/console/classic/console_big.css
@@ -1,54 +1,74 @@
 /* I2P Theme: I2P Classic Theme Override */
 /* I2P Description: Larger fontsize override for console to accomodate foreign charactersets */
-/* Author: Dr|Z3d */
+/* Author: dr|z3d */
 
+* {
+     text-shadow: none !important;
+     font-weight: normal !important;
+     font-size: 11pt !important;
+     letter-spacing: normal !important;
+     word-spacing: normal !important;
+     line-height: 140% !important;
+}
 
-/* sidepanel */
+input[type="submit"], input[type="cancel"], input[type="file"], button, button.search, input.cancel {
+     font-size: 11pt !important;
+     padding-top: 5px;
+     padding-bottom: 5px;
+}
 
-div.routersummary {
-     font: 9.5pt/125%;
+input[type="submit"], input[type="cancel"], input[type="file"], button, button.search, input.cancel, div.app, .themelabel, .ui_lang, .tab a, label, a, li {
+     letter-spacing: 0.05em !important;
 }
 
-div.routersummary h3 {
-     font-size: 12.5pt;
+.routersummary button {
+     min-width: 100px !important;
 }
 
-div.routersummary h4 {
-     font-size: 11.5pt;
-     letter-spacing: 0;
+/* sidepanel */
+
+div.routersummary h3, .routersummary h3 a  {
+     font-size: 13pt !important;
 }
 
-div.routersummary table {
-     font-size: 9pt;
+div.routersummary h4, .routersummary h4 a {
+     font-size: 13pt !important;
+     letter-spacing: 0;
 }
 
-div.routersummary table a:link, div.routersummary table a:visited {
-     font-size: 10.5pt;
+div.routersummary td {
+     font-size: 11pt;
 }
 
-div.routersummary a {
-     word-spacing: 0em !important;
-     letter-spacing: 0.2em !important;
+div.routersummary {
+     width: 220px;
 }
 
-div.tunnels a {
-     font-size: 9pt !important;
+div.routersummary table {
+     width: 219px !important;
 }
 
-div.tunnels table {
+#sb_bandwidth td:first-child {
+     width: 20px !important;
+     white-space: nowrap;
 }
 
-div.tunnels td:first-child, div.tunnels td:last-child  {
-     width: 16px;
+#sb_bandwidth td:last-child {
+     width: 80% !important;
 }
 
-div.tunnels td:last-child {
-     text-align: left;
+#sb_bandwidth td:last-child, #sb_peers td:last-child, #sb_queue td:last-child,  #sb_tunnels td:last-child, #sb_general td:last-child, #sb_shortgeneral td:last-child {
+     font-size: 10pt !important;
 }
 
-div.tunnels td {
-     padding: 0 2px;
+div.routersummary table a:link, div.routersummary table a:visited {
+     font-size: 12pt;
+     font-weight: normal;
+     text-shadow: none;
 }
+
+/* end sidepanel */
+
 /* global overrides */
 
 a, b, div.routersummary h3 a, div.routersummary h4 {
@@ -56,22 +76,75 @@ a, b, div.routersummary h3 a, div.routersummary h4 {
     font-size: 100%;
 }
 
-b, a, input, button, submit, i, th, thead, tfoot, h1, h2, h3, h4{
+b, a, input, button, submit, i, th, thead, tfoot, h1, h2, h3, h4, .messages {
      font-weight: normal !important;
      font-style: normal !important;
-     -moz-text-shadow: 0 0 0;
-     -khtml-text-shadow: 0 0 0;
-     text-shadow: 0 0 0;
+     text-shadow: none;
+}
+
+body, .main {
+     font: 12pt "Noto Sans", "Droid Sans", "Segoe UI", "Lucida Grande", Verdana, "Bitstream Vera Sans", Helvetica, Sans, sans-serif;
+}
+
+h1 {
+     font-size: 18pt !important;
+     padding: 14px 20px 12px;
+}
+
+h2 {
+     font-size: 16pt !important;
+}
+
+h3, .configtable th {
+     font-size: 14pt !important;
+}
+
+h3 a {
+     display: inline-block;
+     padding: 3px 2px;
+}
+
+h4 {
+     font-size: 13pt !important;
+}
+
+h1, h2, h3, h4 {
+     letter-spacing: 0.08em !important;
+     word-spacing: 0.1em !important;
+}
+
+/* end global overrides */
+
+div.tunnels a {
+     font-size: 12pt !important;
+}
+
+div.tunnels td:first-child, div.tunnels td:last-child  {
+     width: 16px;
+}
+
+div.tunnels td:last-child {
+     text-align: left;
 }
 
-body {
-     font: 10pt Verdana, "Bitstream Vera Sans", Helvetica, Sans, sans-serif;
+div.tunnels td {
+     padding: 0 2px;
 }
 
 div.main, div.main p, div.news p {
      line-height: 140%;
 }
 
+div.main, div.news, h1 {
+     margin-left: 226px;
+}
+
+.langbox {
+     width: 400px;
+     margin-top: 5px;
+     margin-right: 8px;
+}
+
 div.joblog li i {
      font-weight: normaL;
 }
@@ -83,4 +156,306 @@ b, div.joblog b {
 
 table code {
      font-size: 120%;
-}
\ No newline at end of file
+}
+
+.tab, .tab2 {
+     font-size: 11pt;
+} 
+
+.applabel a {
+     padding: 0 2px 6px !important;
+}
+
+.themelabel, .ui_lang {
+     font-size: 12pt !important;
+     font-weight: normal !important;
+     overflow: hidden;
+     text-overflow: hidden;
+     margin-bottom: -2px;
+     padding-bottom: 4px !important;
+}
+
+#themeui.formaction {
+     margin-top: 8px !important;
+}
+
+div.themechoice, div.langselect {
+     width: 128px;
+}
+
+h3.ptitle, h3#i2pclientconfig {
+     margin-bottom: -17px !important;
+}
+
+h3#systray, h3#servicedebug, h3#browseronstart {
+     margin-bottom: -17px !important;
+}
+
+h3#pluginmanage {
+     margin-bottom: -22px !important;
+}
+
+.formaction, #consolepass + .formaction, #sidebardefaults, #webappconfigactions.formaction, #clientsconfig.formaction, #homesites, #homeapps {
+     margin-top: -6px !important;
+}
+
+table + .formaction {
+     margin-top: -1px !important;
+}
+
+hr + .formaction {
+     margin-top: 0 !important;
+}
+
+h4#updateplugins {
+     margin-top: -16px;
+}
+
+ #tunnelconfigsave {
+     margin-top: -6px !important;
+}
+
+#resetreseed input.reload {
+     margin-top: 20px;
+     margin-bottom: 0;
+}
+
+p#keyringhelp, #tunnelconfig + .infohelp {
+     margin-bottom: 15px !important;
+}
+
+h3.stats {
+     margin-top: -1px !important;
+}
+
+.main#stats form {
+     margin-top: 0;
+     margin-bottom: -1px;
+}
+input[type="text"], input[type="password"] {
+     min-width: 0;
+}
+
+input[type="radio"], input[type="checkbox"] {
+     margin-top: 6px;
+     margin-bottom: 6px;
+}
+
+input[name="pluginURL"] {
+     max-width: 250px !important;
+     width: 250px !important;
+}
+
+button.control {
+     font-size: 0 !important;
+}
+
+.infohelp, .infowarn {
+     line-height: 160% !important;
+}
+
+p.infohelp {
+     margin-bottom: -7px;
+}
+
+#advancedsettings, .main textarea {
+     font-size: 10pt !important;
+}
+
+#webappconfig {
+     margin-bottom: -37px !important;
+}
+
+.formaction#webappconfigactions {
+     margin-top: 36px !important;
+}
+
+p[style="margin: 0px 12px"] {
+     margin-left: 5px !important;
+     padding: 8px 0 !important;
+}
+
+#news hr + i {
+     display: inline-block;
+     margin-top: 4px !important;
+}
+
+.newsAuthor {
+     background-position: left top 8px !important;
+     background-size: 12px 12px !important;
+     padding-left: 14px;
+}
+
+input.search[type="text"] {
+     padding-left: 30px;
+     background-position: 8px center;
+}
+
+.main#jardump b {
+     font-size: 9pt !important;
+}
+
+#wrapperlogs pre, pre#transports {
+     font-size: 10pt !important;
+}
+
+table#leasesetdebug th a:not(old), table#leasesetsummary th a:not(old), #tunnels.main h3 a:not(old), #logs h3 a:not(old), a[href^="configpeer?peer"] {
+     font-size: 0 !important;
+}
+
+h3#iptransport a:not(old), h3#advancedconfig a:not(old) {
+     font-size: 0 !important;
+}
+
+h3#iptransport a::after, h3#advancedconfig a::after {
+     vertical-align: sub;
+     margin-left: 5px;
+}
+
+/* responsive layout */
+
+@media screen and (max-width: 1200px) {
+.main td, .main td b {
+     font-size: 10pt !important;
+}
+
+.tab, .tab2 {
+     margin-right: -2px !important;
+}
+}
+
+@media screen and (max-width: 1500px) {
+div.applabel {
+     height: 22px !important;
+     padding: 2px;
+     width: 140px;
+}
+}
+
+@media screen and (min-width: 0) {
+div.routersummary img[src$="i2plogo.png"] {
+     margin-top: -1px;
+     transform: none;
+     width: 210px;
+}
+
+.routersummary .reload[value="restartImmediate"], .routersummary .stop[value="shutdownImmediate"], .routersummary .reload[value="Reseed"], .routersummary button[name="updateAction"] {
+     font-size: 11pt !important;
+}
+
+.tab, .tab2, .main[id^="config_"] td {
+     font-size: 11pt !important;
+}
+
+.main[id^="config_"] th {
+     font-size: 12pt !important;
+}
+
+.optbox, #netconfig .optbox:last-child, #netconfig .optbox[value="only"], #netconfig .optbox[name="disableUDP"], #netconfig .optbox[value="disabled"] {
+     margin-top: 10px !important;
+     margin-bottom: 10px !important;
+}
+
+.langselect .optbox {
+     margin: -4px 0 8px -54px !important;
+}
+
+#console h2 {
+     margin-bottom: -5px !important;
+}
+
+#console h2 a[name], #console h2 a[name]:hover {
+     font-size: 16pt !important;
+     color: #0c153d !important;
+}
+
+.welcome h2 {
+     font-size: 14pt !important;
+}
+
+p#fullhistory {
+     padding: 8px 10px !important;
+}
+
+div.news {
+     padding-bottom: 7px !important;
+}
+
+div.news h3, .newsDate, div.news a {
+     font-size: 12pt !important;
+}
+
+#sb_internals, #sb_services, #sb_advanced {
+     margin-top: -5px !important;
+}
+
+.main#console code {
+     font-size: 13pt !important;
+}
+
+#faq ul {
+     margin-bottom: 0 !important;
+}
+
+#changelog pre {
+     font-size: 10pt !important;
+}
+
+.homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child {
+     font-size: 0 !important;
+}
+
+.homelinkedit td img {
+     width: 24px;
+     height: 24px;
+}
+
+#netdboverview th {
+     font-size: 12pt !important;
+}
+}
+
+@media screen and (min-width: 1200px) {
+.tab, .tab2 {
+     margin-right: -3px !important;
+}
+
+#faq th, #portfaq th, #portfaq th[colspan="3"] {
+     font-size: 12pt !important;
+}
+}
+
+@media screen and (min-width: 1500px) {
+body, .main, .main td, .news p, #news p, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, .statusnotes,
+#peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, code, tt, pre,
+.netdbentry th, .configtable th, ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover, div.messages, th {
+     font-size: 12pt !important;
+}
+
+.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.news, #banlist li {
+     font-size: 11pt !important;
+}
+
+.langbox {
+     margin-top: 2px !important;
+}
+
+div.routersummary img[src$="i2plogo.png"] {
+     margin-left: 1px;
+}
+
+.routersummary table[id^="sb_"] {
+     width: 225px !important;
+}
+
+div.app {
+     width: 164px;
+}
+
+div.applabel {
+     padding: 3px 2px 4px !important;
+     width: 160px !important;
+}
+}
+
+/* end responsive layout */
\ No newline at end of file
diff --git a/installer/resources/themes/console/classic/default.css b/installer/resources/themes/console/classic/default.css
deleted file mode 100644
index 621f9be2d26d69d472f12db70c022076726c9231..0000000000000000000000000000000000000000
--- a/installer/resources/themes/console/classic/default.css
+++ /dev/null
@@ -1,219 +0,0 @@
-body {
-     margin: 0px;
-     padding: 0px;
-     text-align: center;
-     font: 10pt/140% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     background: #bbf;
-     color: #000;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-body.iframed {
-     background: transparent url('../dark/images/transparent.gif') !important;
-     padding-top: 5px;
-}
-
-div {
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-h4, label {
-     margin: 0px;
-     padding: 2px;
-     float: left;
-     width: 150px;
-     height: 24px;
-     font-weight: normal;
-     text-align: right;
-     font-size: 8.5pt;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-h4 {
-     font-size: 10.5pt;
-     text-align: left !important;
-     font-weight: bold;
-     border: 1px solid #77f;
-     border-top: 2px solid #77f;
-     margin: -6px 0 5px -10px !important;
-     padding: 5px 10px 25px 10px;
-     background: #fff;
-     text-shadow: 0px 0px 1px rgba(32, 32, 192, 0.3);
-     text-transform: uppercase;
-     white-space: nowrap;
-     width: 782px;
-     letter-spacing: 0.09em;
-     background: #fff url("/themes/console/classic/images/titlebg.png") no-repeat right center !important;
-}
-
-label {
-     font-style: italic;
-     margin: 0 3px 0 -3px;
-}
-
-a {
-     text-decoration: none;
-}
-
-form {
-     margin: 0px;
-}
-
-textarea, input, select, button, a {
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-     font: 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     float: left;
-     margin: 2px 0 5px 0;
-}
-
-button {
-     float: none;
-     height: 20px !important;
-}
-
-textarea {
-     border: 1px solid #aaf;
-     min-height: 40px;
-}
-
-br {
-     clear: left;
-}
-
-div.statusNotRunning {
-     float: left;
-     width: 82px;
-     height: 24px;
-     color: #d00;
-}
-
-div.statusRunning {
-     float: left;
-     width: 82px;
-     height: 24px;
-     color: #0d0;
-}
-
-div.statusStarting {
-     float: left;
-     width: 82px;
-     height: 24px;
-     color: #393;
-}
-
-hr {
-     display: none;
-}
-
-.separator, .subdivider {
-     clear: both;
-     height: 1px;
-     margin: 5px -8px 5px -8px;
-     border-bottom: 1px solid #aaf;
-}
-
-.subdivider {
-     border-bottom: 1px dotted #aaf;
-     margin: 0 0 10px 0;
-}
-
-.freetext {
-     width: 150px;
-     height: 22px;
-     border: 1px solid #aaf;
-}
-
-.control {
-     margin: 2px;
-     padding: 1px 2px 2px 2px;
-     overflow: hidden;
-     height: 20px;
-     width: 60px;
-     font-weight: bold;
-     background: #ddd;
-     color: #000;
-     border: 1px outset #ddddc0;
-     text-align: center;
-     vertical-align: middle;
-     white-space: nowrap;
-}
-
-.control:hover {
-     background: #229;
-     color: #fff;
-}
-
-.control:active {
-     border: 2px inset;
-}
-
-.panel {
-     width: 790px;
-     margin: 16px auto 16px auto;
-     padding: 5px 10px;
-     overflow: hidden;
-     text-align: left;
-     font-size: 8pt;
-     background: #eef;
-     border: 4px solid #77f;
-     -moz-box-shadow: inset 0px 0px 0px 1px #99f;
-}
-
-.iframed .panel {
-     margin: 16px auto -8px auto !important;
-}
-
-.iframed .panel.iframed {
-     margin: 0 auto -8px auto !important;
-}
-
-.panel .footer {
-
-     padding: 4px;
-}
-
-.toolbox {
-     width: 100%;
-}
-
-.rowItem {
-     width: 750px;
-     float: left;
-     margin: 0px;
-}
-
-.comment {
-     font-style: italic;
-     white-space: nowrap;
-}
-
-.text {
-     height: 24px;
-     width: 150px;
-     padding: 2px 0 0 2px;
-     float: left;
-     margin: 0;
-     font-weight: bold;
-}
-
-.accessKey {
-     text-decoration: underline;
-}
-
-#globalOperationsPanel {
-     background: #eef;
-     border: 4px solid #77f;
-     -moz-box-shadow: inset 0px 0px 0px 1px #900;
-     padding: 5px 5px 10px 5px;
-     text-align: right;
-}
-
-#globalOperationsPanel .control {
-     width: 100px !important;
-     margin-top: 3px;
-     float: right;
-}
diff --git a/installer/resources/themes/console/classic/i2ptunnel.css b/installer/resources/themes/console/classic/i2ptunnel.css
index 95df82e44f7fcdab84224c8ce423625760c8eea5..0b8b2f17f11219170c85e7fb9afdc86047a8fdb5 100644
--- a/installer/resources/themes/console/classic/i2ptunnel.css
+++ b/installer/resources/themes/console/classic/i2ptunnel.css
@@ -1,179 +1,970 @@
-/* I2P Tunnel Edit Page
-*/
+/* I2PTunnel Manager Theme "Classic" */
+/* Author: dr|z3d */
 
-#tunnelEditPage input {
-    width: 458px;
+body {
+     margin: 0;
+     padding: 0;
+     text-align: center;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     color: #333;
+     font-size: 9pt;
+     background: #a4a4cb url(images/bg.png);
 }
 
-#tunnelEditPage select {
-    width: 308px;
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
 }
 
-#tunnelEditPage option[selected] {
-    color: green;
+div {
+     -moz-box-sizing: border-box;
+     -webkit-box-sizing: border-box;
+     box-sizing: border-box;
 }
 
-#tunnelEditPage #targetField,
-#tunnelEditPage #accessField,
-#tunnelEditPage #optionsField {
-    height: 48px;
-    width: 150px;
+a {
+     text-decoration: none;
 }
-#tunnelEditPage #tunnelOptionsField {
-    height: 96px;
-    width: 150px;
+
+form {
+     margin: 0;
+}
+
+br {
+     clear: left;
+}
+
+div.statusNotRunning {
+     width: 100%;
+     height: 16px;
+     overflow: hidden;
+     color: #d00;
+     background: url(images/console_status_stopped.png) center center no-repeat;
+     padding-top: 24px;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+div.statusRunning {
+     width: 100%;
+     height: 16px;
+     overflow: hidden;
+     color: #0b0;
+     background: url(images/console_status_running.png) center center no-repeat;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+div.statusStarting {
+     float: left;
+     width: 100%;
+     height: 16px;
+     overflow: hidden;
+     color: #339933;
+     background: url(images/console_status_starting.png) center center no-repeat;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+div[class^="status"] {
+     float: none;
+     font-size: 0 !important;
+     background-position: center center;
+     text-align: center;
+     margin: 0;
+     padding: 0;
+     width: 100%;
+     background-size: auto 16px;
+     height: 16px;
+}
+
+hr {
+     display: none;
+}
+
+.freetext {
+     width: 150px;
+     border: 1px solid #999;
+     padding: 4px;
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     background: #fff;
+     color: #333;
+     border-radius: 2px;
+     box-shadow: inset 1px 1px 1px #ddd;
+}
+
+.freetext:focus {
+     box-shadow: 0 0 0 1px #89f;
+     box-shadow: inset 0 0 0 1px #89f, 0 0 1px rgba(136, 153, 255, 0.4); 
+     color: #111;
+}
+
+.freetext[readonly], .freetext[readonly]:focus {
+     background: #ddd;
+     box-shadow: inset 2px 2px 1px #ccc;
+     color: #333;
+}
+
+#clientHost {
+     width: 300px;
+}
+
+#clientPort {
+     width: 100px;
+}
+
+.control, .control:link, .control:visited {
+     overflow: hidden;
+     min-width: 60px;
+     margin: 2px 4px !important;
+     padding: 4px 3px;
+     text-align: center;
+     white-space: nowrap;
+     text-decoration: none;
+     font-style: normal;
+     font-weight: normal;
+     color: #333;
+     border: 1px solid #999;
+     border-radius: 2px;
+     background: #eee;
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 #ccc;
+}
+
+.control:hover, .control:focus {
+     text-decoration: none;
+     color: #111 !important;
+     border: 1px solid #89f !important;
+     background: #ddd;
+     background: linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     box-shadow: inset 0 0 0 1px #fff !important;
+}
+
+.control:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px 1px #555 !important;
+     border: 1px solid #999 !important;
+     color: #333 !important;
+}
+
+.iframed .panel.iframed {
+     margin: 0 auto -8px !important;
+}
+
+.panel {
+     width: calc(100% - 14px);
+     margin: 8px auto;
+     min-width: 640px;
+     max-width: 1500px;
+     overflow: hidden;
+     text-align: left !important;
+     border-radius: 2px;
+     padding: 0 10px 10px;
+     box-shadow: inset 0 0 1px #999;
+     background: #fff;
+     background: linear-gradient(to right, #fff 0%, rgba(247, 248, 255, 0.5), #fff), linear-gradient(to bottom, #eff1ff, #fff, #eff1ff);
+     border: 1px solid #447;
+}
+
+.iframed .panel {
+     border: none;
+     background: none;
+     box-shadow: none;
+     padding: 0;
+     margin: 16px auto -8px !important;
+     width: 100%;
+}
+
+.iframed .panel#clients {
+     margin-top: 8px !important;
+}
+
+select {
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     background: url(images/dropdown.png) right center no-repeat #fff;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 4px 16px 4px 4px;
+     color: #333;
+     margin: 4px !important;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     border: 1px solid #999;
+     padding: 4px 16px 4px 4px;
+     min-width: 140px;
+     font-size: 9pt;
+     border-radius: 2px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     box-shadow: 0 0 0 1px #fff inset, 0 0 1px 0 #ccc;
+}
+
+select:hover {
+     color: #111;
+}
+
+select:focus {
+     box-shadow: 0 0 1px #89f;
+}
+
+select option {
+     background: #fff;
+}
+
+select:hover, select:active {
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+}
+
+select:focus {
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     box-shadow: 0 0 1px #89f;
+}
+
+select::-ms-expand {
+     display: none;
+}
+
+a:link {
+     color: #33a;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
+     outline: none;
+}
+
+a:visited {
+     color: #448;
+     text-decoration: none;
+}
+
+a:hover, a:focus {
+     color: #f60;
+     text-decoration: none;
+}
+
+a:active {
+     color: #f30;
+}
+
+input[type="hidden"], input.default {
+     display: none;
+}
+
+h2, h3 {
+     padding: 6px 10px;
+     border: 1px solid #89f;
+     background: #fff url(/themes/console/classic/images/tinytitle.png) repeat right center;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%);
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     margin: 10px 0 -1px;
+     color: #0c153d;
+     box-shadow: inset 0 0 0 1px #fff;
+     position: relative;
+}
+
+/* title images */
+
+h2, h3 {
+     padding-left: 30px;
+}
+
+#messages h2 {
+     background: url(/themes/console/images/info/logs.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#globalTunnelControl h2 {
+     background: url(/themes/console/images/info/control.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#servers h2 {
+     background: url(/themes/console/images/info/server.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#clients h2 {
+     background: url(/themes/console/images/info/client.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3 {
+     background: url(/themes/console/images/info/configure.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#wizardPanel h2 {
+     background: url(/themes/console/images/info/wizard.png) left 6px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+/* end title images */
+
+.iframed #globalTunnelControl h2 {
+     margin-top: 2px;
+}
+
+.iframed #globalTunnelControl {
+     margin-bottom: -16px !important;
+}
+
+.panel table {
+     width: 100%;
+     border-collapse: collapse;
+     border: 1px solid #89f;
+     margin: 0;
+     background: #fff url(images/bg2.png);
+     background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5)), url(images/bg2.png);
+}
+
+th {
+     background: #fff url(/themes/console/classic/images/tinytitle.png) repeat-x center center;
+     background: linear-gradient(to bottom, #fff, #eff2ff) !important;
+     padding: 5px;
+     text-align: left;
+     border-top: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+     font-size: 10pt;
+     color: #0c153d;
+}
+
+tr {
+     background: rgba(239, 241, 255, 0.5);
+}
+
+td {
+     vertical-align: middle;
+     border-top: 1px inset #cfd1ff;
+     padding: 5px;
+}
+
+th:last-child, td:last-child {
+     border-right: 1px solid #89f; /* fixes chrome rendering bug */
+}
+
+#throttler th:last-child, #throttler td:last-child {
+     border-right: none;
+}
+
+td.infohelp {
+     background: url(/themes/console/images/info/infohelp.png) 10px center no-repeat;
+     background-size: 20px 20px;
+     padding: 10px 10px 10px 38px !important;
+}
+
+.tunnelConfig td {
+     width: 50%;
+}
+
+#clientTunnels tr, #serverTunnels tr {
+     background: #eef;
+}
+
+.tunnelProperties {
+     background: #fff !important;
+     border-top: 1px solid #89f;
+}
+
+.tunnelProperties:hover {
+     background: #ffe !important;
+     transition: ease background 0.3s;
+}
+
+.newTunnel {
+     text-align: right;
+     border-top: 1px solid #89f !important;
+     padding: 7px !important;
+     background: #fff;
+}
+
+.newTunnel select, .newTunnel input, .newTunnel .control {
+     float: none;
+     margin: 2px !important;
+}
+
+.newtunnel form {
+     width: 100%;
+     text-align: right;
+}
+
+.tunnelName {
+     width: 25%;
+     min-width: 150px;
+}
+
+.tunnelName a {
+     background: url(/themes/console/images/buttons/configure.png) left center no-repeat;
+     padding: 3px 3px 3px 20px !important;
+}
+
+.tunnelName a:hover {
+     background: url(/themes/console/images/buttons/configure_hover.png) left center no-repeat;
+}
+
+.tunnelName a {
+     font-weight: bold;
+}
+
+.tunnelType {
+     width: 25%;
+}
+
+.tunnelPreview {
+     text-align: left;
+}
+
+.tunnelPreview, .tunnelPort {
+     width: 15%;
+     text-align: center;
+}
+
+.tunnelLocation, .tunnelInterface {
+     width: 20%;
+}
+
+.tunnelLocation font[color="red"] {
+     margin-left: 3px;
+}
+
+.tunnelStatus {
+     text-align: center;
+     width: 10%;
+     float: none;
+     min-width: 48px;
+}
+
+.tunnelControl {
+     width: 5%;
+     text-align: right;
+     white-space: nowrap;
+}
+
+.tunnelControl > * {
+     vertical-align: middle;
+}
+
+th.tunnelControl {
+     text-align: center;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     vertical-align: sub;
+     min-width: 16px;
+     min-height: 16px;
+     margin: 0;
+     background: none;
+}
+
+input[type="radio"]:hover, input[type="radio"]:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus {
+     filter: drop-shadow(0 0 2px #89f);
+     box-shadow: inset 0 0 1px 2px #89f;
+     outline: none;
+}
+
+label {
+     cursor: pointer;
+}
+
+input[type="checkbox"] {
+     margin: 5px 3px 5px 5px;
+}
+
+textarea, input, select, button {
+     font-size: 9pt;
+     vertical-align: middle;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+     outline: none;
+     border: none;
+}
+
+button {
+     text-decoration: none;
 }
 
-#tunnelEditPage #targetField label,
-#tunnelEditPage #accessField label,
-#tunnelEditPage #tunnelOptionsField label,
-#tunnelEditPage #optionsField label{
-    height: 48px;
-    width: 150px;
+button, input[type="submit"], input[type="reset"], a.control {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     font-size: 9pt;
 }
 
-#tunnelEditPage #reachField,
-#tunnelEditPage #hostField,
-#tunnelEditPage #depthField,
-#tunnelEditPage #countField,
-#tunnelEditPage #optionsHostField {
-    width: 304px;
-    margin-right: 4px;
+textarea {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #333;
+     background: #fff;
+     border: 1px solid #999;
+     border-radius: 2px;
+     resize: none;
+     box-shadow: inset 1px 1px 1px #ddd;
 }
 
-#tunnelEditPage #portField,
-#tunnelEditPage #optionsPortField,
-#tunnelEditPage #backupField,
-#tunnelEditPage #varianceField {
-    width: 140px;
+textarea:focus {
+     box-shadow: inset 0 0 0 1px #89f;
+     box-shadow: inset 0 0 0 1px #89f, 0 0 1px rgba(136, 153, 255, 0.4);
+     color: #111;
 }
 
-#tunnelEditPage #reachField label,
-#tunnelEditPage #hostField label,
-#tunnelEditPage #portField label,
-#tunnelEditPage #optionsHostField label,
-#tunnelEditPage #optionsPortField label,
-#tunnelEditPage #depthField label,
-#tunnelEditPage #countField label,
-#tunnelEditPage #backupField label,
-#tunnelEditPage #varianceField label {
-    text-align: left;
+textarea#statusMessages {
+     width: 99%;
+     width: calc(100% - 8px);
+     border-radius: 0;
+     padding: 2px 4px;
+     color: #070;
+     box-shadow: none;
+     border: none;
+     margin: 0;
+     font-family: "Droid Sans Mono", "Noto Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+
+textarea#statusMessages:focus {
+     caret-color: transparent;
+}
+
+a.control {
+     display: inline-block;
+     padding: 5px 8px !important;
+}
+
+.control {
+     box-sizing: border-box;
+     margin: 2px 4px !important;
+     min-width: 70px !important;
+     padding: 4px 8px !important;
+     color: #333 !important;
+}
+
+.buttons, .newTunnel {
+     text-align: right;
+     padding: 7px 5px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, #eff1ff);
+     border-top: 1px solid #89f;
+}
+
+button.control, input[type="submit"], input[type="reset"] {
+     padding: 5px 8px !important;
+}
+
+.buttons > * {
+     vertical-align: middle;
+}
+
+.tunnelConfig tr:last-child td {
+     border-top: 1px solid #89f;
+}
+
+.tunnelDescriptionLabel, .tunnelDestinationLabel {
+     text-align: right;
+     min-width: 150px;
+     display: inline-block;
+     margin-right: 3px;
+     white-space: nowrap;
+}
+
+input {
+     vertical-align: middle;
+}
+
+.tickbox {
+     vertical-align: middle;
+}
+
+#hostField, #leasesetKey, #userAgents {
+     width: 90% !important;
+     margin: 0 !important;
+     text-align: left !important;
+}
+
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity,
+#localDestination, #customOptions, #leasesetKey, #name, #description, textarea[name="accessList"] {
+     width: 100% !important;
+     margin: 0 !important;
+     text-align: left !important;
+}
+
+#oldName, #targetDestination, select#profile, select#connectionProfile {
+     min-width: 280px;
+     width: 30%;
+     width: calc(100% - 10px) !important;
+}
+
+td[colspan="2"] select#profile {
+     width: calc(50% - 15px) !important;
+}
+
+#customOptions, #userAgents {
+     width: calc(100% - 10px) !important;
+}
+
+#localDestination, textarea[name="accessList"], #hostField {
+     width: calc(100% - 5px) !important;
+     margin: 3px 0 !important;
+}
+
+#localDestination, .authentication {
+     height: 32px !important;
+}
+
+#leasesetKey {
+     height: 24px !important;
+     vertical-align: middle;
+}
+
+.multiOption {
+     display: inline-block;
+     margin: 5px 10px 5px 5px;
+}
+
+.multiOption input {
+     vertical-align: sub;
+}
+
+.multiOption#isServer {
+     background: url(/themes/console/images/server.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+.multiOption#isClient {
+     background: url(/themes/console/images/client.png) left center no-repeat;
+     padding-left: 21px;
+}
+
+td#throttle {
+     padding: 0;
+}
+
+#throttler {
+     border: none;
+}
+
+#throttler th {
+     padding-left: 20px;
+}
+
+#throttler td {
+     width: 20%;
+}
+
+#throttler td:first-child {
+     text-align: right;
+     width: 20%;
+     white-space: nowrap;
+}
+
+#throttler tr:first-child th {
+     border-top: none;
+}
 
+td.blankColumn {
+     width: 20% !important;
 }
 
-#tunnelEditPage #otherField label {
-    width: 300px;
+#throttler tr:nth-child(odd), #wizardTunnelTypes tr:nth-child(odd), #wizardSummary tr:nth-child(odd) {
+     background: #eff2ff;
+     background: rgba(240,240,255,0.5);
 }
 
-#tunnelEditPage #reachableByOther,
-#tunnelEditPage #tunnelDepth,
-#tunnelEditPage #tunnelQuantity,
-#tunnelEditPage #targetHost,
-#tunnelEditPage #clientHost {
-    width: 306px;
+#throttler tr:nth-child(even),  #wizardTunnelTypes tr:nth-child(even), #wizardSummary tr:nth-child(even) {
+     background: #e7e7ff;
+     background: rgba(220,220,255,0.5);
 }
 
-#tunnelEditPage #port {
-    width: 80px;
+#throttler input[type="text"] {
+     width: 80px;
 }
 
-#tunnelEditPage #targetPort,
-#tunnelEditPage #clientPort,
-#tunnelEditPage #tunnelBackupQuantity,
-#tunnelEditPage #tunnelVariance {
-    width: 150px;
+table {
+     background: #fff;
 }
 
-#tunnelEditPage #shared,
-#tunnelEditPage #connectDelay,
-#tunnelEditPage #startOnLoad {
-    width: 16px;
+table#statusMessages textarea, table#statusMessages textarea:active {
+     margin: 0;
+     border: 0;
+     box-shadow: none;
+     height: 80px;
+     font-size: 9pt;
 }
 
-#tunnelEditPage label {
-    width: 150px;
-    font-weight: bold;
-    text-align: right;
-    float: left;
+#tunnelMessages {
+     padding: 0;
 }
 
-/* I2P Tunnel List Page
-*/
+.required:not(old) {
+     display: none;
+}
+
+input::-moz-placeholder {
+     color: #900;
+     opacity: 1;
+}
+
+::-webkit-input-placeholder {
+     color: #900;
+     opacity: 1;
+}
 
-#tunnelListPage .rowItem {
-    width: 150px;
+input:focus::-moz-placeholder {
+     opacity: 0;
 }
 
-#tunnelListPage select {
-    width: 150px;
+:focus::-webkit-input-placeholder {
+     opacity: 0;
 }
 
-#tunnelListPage textarea {
-    width: 100%;
-    height: 88px;
-    padding: 0 0 0 4px;
-    color: green;
-    margin-bottom: 7px;
+input.tunnelName, input.tunnelDescription, #userAgents {
+     width: 80%;
+     min-width: 280px;
+     text-overflow: ellipsis;
 }
 
-#tunnelListPage .footer .control {
-    margin-left: 2px;
+input[type="file"] {
+     margin: 5px 3px;
 }
 
-#tunnelListPage .footer label {
-    text-align: right;
-    height: 24px;
-    width: 360px;
-    float: left;
+#websiteName, #privKeyFile, #targetHost, .host {
+     width: 30%;
+     min-width: 250px;
+}
 
+.port, .quantity, .period {
+     width: 80px;
 }
 
-/* Use Leary and Langridge content replacement methods (LIR)
-** to embed accessibility information into the document.
-** Should allow the lists to be rendered nicely by
-** screen readers. (and lynx!)
-*/
+.username, .password {
+     width: 200px;
+}
 
-#tunnelListPage label {
-    height: 0;
-    width: 0;
-    overflow: hidden;
+.username {
+     background: #fff url(/themes/console/images/buttons/user.png) 3px center no-repeat;
+     padding-left: 22px;
 }
 
-#tunnelListPage .nameHeaderField label,
-#tunnelListPage .portHeaderField label,
-#tunnelListPage .typeHeaderField label,
-#tunnelListPage .interfaceHeaderField label,
-#tunnelListPage .targetHeaderField label,
-#tunnelListPage .previewHeaderField label,
-#tunnelListPage .statusHeaderField label {
-    text-align: left;
-    width: 150px;
-    height: 24px;
-    float: left;
+.password {
+     background: #fff url(/themes/console/images/buttons/password.png) 3px center no-repeat;
+     padding-left: 22px;
 }
 
-#tunnelListPage .targetField,
-#tunnelListPage .targetField .text,
-#tunnelListPage .targetHeaderField,
-#tunnelListPage .targetHeaderField label {
-    width: 300px;
+.proxyList {
+     width: 40%;
+     min-width: 280px;
 }
 
-#tunnelListPage .descriptionField,
-#tunnelListPage .destinationField {
-    width: 750px;
+#notReady {
+     border: 1px solid #900;
+     padding: 30px;
+     background: #ffd;
+     margin: 30px auto;
+     width: 400px;
+     text-align: center;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px #333);
+     font-size: 11pt;
+     font-weight: bold;
+}
+
+/* wizard specifics */
+
+#wizardPanel {
+    font-size: 10pt;
 }
 
-#tunnelListPage .descriptionField .text,
-#tunnelListPage .destinationField .text {
-    width: 450px;
+#wizardTable {
+     padding: 0;
 }
 
-#tunnelListPage .descriptionField label,
-#tunnelListPage .destinationField label {
-    text-align: right;
-    width: 150px;
-    height: 24px;
-    float: left;
+#wizardTunnelTypes td:first-child, #wizardSummary td:first-child {
+     font-weight: bold;
+     width: 10%;
+     min-width: 150px;
+     text-align: right;
+     white-space: nowrap;
 }
+
+#wizardTunnelTypes td:last-child {
+     text-align: justify;
+     padding: 5px 10px 5px 5px;
+     border: none;
+}
+
+#wizardTunnelTypes select {
+     margin-left: 0 !important;
+}
+
+#wizardTunnelTypes, #wizardSummary {
+     border: none;
+     margin-top: -1px;
+}
+
+#wizardSummary td:last-child {
+     border-right: none !important;
+}
+
+#wizardTable td {
+     border-top: 1px solid #cfd1ff !important;
+}
+
+#wizardTunnelTypes tr:last-child {
+     background: #fff;
+}
+
+#wizardPanel #name, #wizardPanel #description {
+     width: 300px !important;
+     margin: 5px 0 !important;
+}
+
+#wizardPanel p {
+     padding: 5px 10px;
+     margin: 0;
+     text-align: justify;
+}
+
+#wizardPanel input::-moz-placeholder {
+     color: #999;
+     font-weight: normal;
+}
+
+#wizardPanel ::-webkit-input-placeholder {
+     color: #999;
+     font-weight: normal;
+}
+
+#wizardPanel .options {
+     padding: 10px;
+}
+
+#wizardPanel .tag {
+     width: 10%;
+     min-width: 150px;
+     white-space: nowrap;
+     display: inline-block;
+     font-weight: bold;
+     text-align: right;
+     margin-right: 3px;
+}
+
+#wizardPanel select {
+     min-width: 160px;
+     margin-left: 0 !important;
+}
+
+#wizardPanel .infohelp p { /* wizard complete - advanced options info */
+     margin: 0;
+     padding: 0;
+}
+
+/* more space */
+
+.freetext, .tunnelConfig textarea, #customOptions, #userAgents, #hostField  {
+     margin: 5px !important;
+}
+
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity, #leasesetKey {
+     margin: 5px !important;
+     width: calc(100% - 10px) !important;
+}
+
+.tunnelConfig select, select#profile select#connectionProfile {
+     margin: 5px !important;
+}
+
+textarea[name="accessList"], #hostField, #localDestination, .authentication {
+     width: calc(100% - 15px) !important;
+     margin: 5px !important;
+}
+
+#customOptions, #userAgents, #leasesetKey {
+     width: calc(100% - 20px) !important;
+}
+
+.tunnelConfig td > b {
+     min-width: 30px;
+     display: inline-block;
+     margin-left: 5px;
+}
+
+.tunnelDestination {
+     padding-bottom: 1px !important;
+     border-bottom: 1px solid transparent !important;
+}
+
+#clientTunnels .tunnelDescription {
+     padding-top: 1px !important;
+}
+
+.tunnelDestination b, .tunnelDescription b {
+     color: #444;
+}
+
+td.tunnelDestination, td.tunnelDescription {
+     background: linear-gradient(to right, #fff 50%, #eff2ff);
+}
+
+/* end more space */
+
+/* responsive layout */
+
+@media screen and (max-width: 700px) {
+#leasesetKey, #tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity, #leasesetKey {
+    min-width: 270px;
+}
+}
+
+@media screen and (max-width: 800px) {
+.tunnelProperties td {
+     border-right: 1px dotted #cfd1ff;
+}
+
+.tunnelProperties td:last-child {
+     border-right: 1px solid #89f;
+}
+
+div[class^="status"] {
+     background-size: auto 14px;
+}
+
+.port, .quantity, .period {
+     width: 60px;
+}
+
+#clientHost, .host {
+     width: 200px;
+     min-width: 210px;
+}
+
+.control, .control:link, .control:visited {
+     min-width: 60px !important;
+}
+}
+
+@media screen and (min-width: 1200px) {
+body, .control, button, select, textarea, .freetext {
+     font-size: 10pt !important;
+}
+
+th {
+     font-size: 10.5pt;
+}
+
+h2, h3 {
+     font-size: 12pt;
+}
+
+#localDestination, .authentication {
+     height: 34px !important;
+}
+}
+
+/* Edge/IE tweaks */
+
+_:-ms-lang(x), td {
+     border-top: 1px solid #cfd1ff;
+}
+
+_:-ms-lang(x), td.tunnelDestination, td.tunnelDescription {
+     border-bottom-color: transparent;
+}
+
+_:-ms-lang(x), h2, h3 {
+     box-shadow: none;
+}
+
+/* end Edge/IE tweaks */
diff --git a/installer/resources/themes/console/classic/ieshim.css b/installer/resources/themes/console/classic/ieshim.css
index 0c3212f8473df3c60b99206541c000005640ed46..e4ba6915eb6979dcf20a1485f1c4d335399343d7 100644
--- a/installer/resources/themes/console/classic/ieshim.css
+++ b/installer/resources/themes/console/classic/ieshim.css
@@ -246,7 +246,7 @@ th {
      padding-right: 1px;
 }
 
-div.configure hr{
+div.configure hr {
      margin: 10px 0 15px 0;
 }
 
@@ -258,7 +258,6 @@ div.graphspanel img {
      border: 1px solid #99f;
      margin: 6px 0 !important;
      background: #ddf;
-     -moz-box-shadow: inset 0px 0px 1px 1px #99f;
 }
 
 div.graphspanel hr {
@@ -278,7 +277,6 @@ table {
      display:list-item;
 }
 
-
 div.news {
      margin: -1px 2px 0 200px !important;
      padding: -10px 0px 8px 0px;
@@ -297,3 +295,4 @@ div.news {
 
 .routersummary h2, .routersummary h3 {
      background: #fff url(images/tinytitle.png) center right tile-x !important;
+}
\ No newline at end of file
diff --git a/installer/resources/themes/console/classic/images/bg.png b/installer/resources/themes/console/classic/images/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..adf435fb10750420aee2789f16d4f1acec903ff4
Binary files /dev/null and b/installer/resources/themes/console/classic/images/bg.png differ
diff --git a/installer/resources/themes/console/classic/images/bg0.png b/installer/resources/themes/console/classic/images/bg0.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b9473a66b50fbb904a2cd4bf3ba12c3a52d6703
Binary files /dev/null and b/installer/resources/themes/console/classic/images/bg0.png differ
diff --git a/installer/resources/themes/console/classic/images/bg1.png b/installer/resources/themes/console/classic/images/bg1.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b95e548cb70a9d390fa264b8fb93f2269e3e240
Binary files /dev/null and b/installer/resources/themes/console/classic/images/bg1.png differ
diff --git a/installer/resources/themes/console/classic/images/bg2.png b/installer/resources/themes/console/classic/images/bg2.png
new file mode 100644
index 0000000000000000000000000000000000000000..a739538464dd9f7ee6c914f549c6d8450469f892
Binary files /dev/null and b/installer/resources/themes/console/classic/images/bg2.png differ
diff --git a/installer/resources/themes/console/classic/images/console_status_running.png b/installer/resources/themes/console/classic/images/console_status_running.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bbc5e37aad0b1118ccc86b31e985c75832ab5e3
Binary files /dev/null and b/installer/resources/themes/console/classic/images/console_status_running.png differ
diff --git a/installer/resources/themes/console/classic/images/console_status_starting.png b/installer/resources/themes/console/classic/images/console_status_starting.png
new file mode 100644
index 0000000000000000000000000000000000000000..fbff2340912a95cc59554a5c36fb8d8dfbdf4fe5
Binary files /dev/null and b/installer/resources/themes/console/classic/images/console_status_starting.png differ
diff --git a/installer/resources/themes/console/classic/images/console_status_stopped.png b/installer/resources/themes/console/classic/images/console_status_stopped.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d43eb4eab436a06e60a33922f27638db4e327e0
Binary files /dev/null and b/installer/resources/themes/console/classic/images/console_status_stopped.png differ
diff --git a/installer/resources/themes/console/classic/images/dropdown.png b/installer/resources/themes/console/classic/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..317d64e08161d30d86c3b2e2b44dfb0c062b7889
Binary files /dev/null and b/installer/resources/themes/console/classic/images/dropdown.png differ
diff --git a/installer/resources/themes/console/classic/images/dropdown_hover.png b/installer/resources/themes/console/classic/images/dropdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec983e14ae70dcf0f3a7f64ec47f533d55a8e7f5
Binary files /dev/null and b/installer/resources/themes/console/classic/images/dropdown_hover.png differ
diff --git a/installer/resources/themes/console/classic/images/eye.png b/installer/resources/themes/console/classic/images/eye.png
new file mode 100644
index 0000000000000000000000000000000000000000..2aead17e09ea66ad6c2353c1e9f2a18473f8ac52
Binary files /dev/null and b/installer/resources/themes/console/classic/images/eye.png differ
diff --git a/installer/resources/themes/console/classic/images/help.png b/installer/resources/themes/console/classic/images/help.png
new file mode 100644
index 0000000000000000000000000000000000000000..be52814717ef790cd13d33c7ec1fc9c5d14b0eb2
Binary files /dev/null and b/installer/resources/themes/console/classic/images/help.png differ
diff --git a/installer/resources/themes/console/classic/images/i2plogo.png b/installer/resources/themes/console/classic/images/i2plogo.png
index c8ad1d23ddccb65e8f85cc5645c95905c4f0f3a4..d7053ccfcaa39b403ece9111ea67bfc185b63e42 100644
Binary files a/installer/resources/themes/console/classic/images/i2plogo.png and b/installer/resources/themes/console/classic/images/i2plogo.png differ
diff --git a/installer/resources/themes/console/classic/images/sort_down.png b/installer/resources/themes/console/classic/images/sort_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..42879e6ed7ea928745136174539f2fa5b9814869
Binary files /dev/null and b/installer/resources/themes/console/classic/images/sort_down.png differ
diff --git a/installer/resources/themes/console/classic/images/sort_up.png b/installer/resources/themes/console/classic/images/sort_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..65a374f68f25068da0f59bb1920748ff00fa3007
Binary files /dev/null and b/installer/resources/themes/console/classic/images/sort_up.png differ
diff --git a/installer/resources/themes/console/classic/images/thumbnail.png b/installer/resources/themes/console/classic/images/thumbnail.png
new file mode 100644
index 0000000000000000000000000000000000000000..6822aca3ba48fbe8bdddb52130291529d0f03e6a
Binary files /dev/null and b/installer/resources/themes/console/classic/images/thumbnail.png differ
diff --git a/installer/resources/themes/console/classic/mobile.css b/installer/resources/themes/console/classic/mobile.css
index 437f77ee46b1cd19db059f771073deac43baca8c..779c62d84712147c24f5bd59f7da3f9d98f2689e 100644
--- a/installer/resources/themes/console/classic/mobile.css
+++ b/installer/resources/themes/console/classic/mobile.css
@@ -1,6 +1,8 @@
+/* Console Theme "Classic" - Mobile Override */
+
 div.routersummaryouter {
      float: none;
-     margin: 0 1px 0 0;
+     margin: 0 !important;
      position: relative;
      width: auto;
 }
@@ -8,23 +10,146 @@ div.routersummaryouter {
 div.routersummary {
      float: none;
      width: auto;
+     max-width: 600px;
+     margin: 0 auto -6px;
+}
+
+@media screen and (min-width: 1500px) {
+div.routersummary {
+     width: 600px !important;
+}
+
+.routersummary table[id^="sb_"] {
+     width: 600px !important;
+}
+}
+
+#xhr {
+     margin-top: 9px !important;
+}
+
+#xhr hr:first-child {
+     margin-bottom: 7px !important;
+}
+
+.routersummary div[style="height: 36px;"] {
+     margin: 0 0 15px !important;
+}
+
+.routersummary div[style="height: 36px;"] + a {
+     margin: -5px 0 -3px !important;
+     display: inline-block;
 }
 
-div.routersummary table {
+.routersummary hr:first-child {
+     margin-bottom: 11px;
+}
+
+.routersummary td, .routersummary h4, .routersummary a {
+     font-size: 9pt !important;
+}
+
+div.routersummary table, table[id^="sb_"] {
      width: 100% !important;
+     margin: -6px 0 -7px !important;
+}
+
+table[id^="sb_"] td {
+     padding: 4px 2px !important;
+}
+
+table#sb_localtunnels {
+     margin-top: -6px !important;
+}
+
+table#sb_localtunnels td {
+     padding: 4px 2px !important;
+}
+
+#sb_localtunnels td:last-child {
+     padding-right: 4px !important;
+}
+
+table[id^="sb_"] tr:nth-child(even) td {
+     background: #eef;
+     background: rgba(240, 240, 255, 0.5);
+}
+
+table[id^="sb_"] tr:nth-child(odd) td {
+     background: #ddf;
+     background: rgba(220, 220, 255, 0.5);
+}
+
+table[id^="sb_"] tr:hover td {
+     background: #ffe !important;
+     transition: ease background 0.3s;
+}
+
+#sb_services {
+     text-align: center;
+}
+
+#sb_localtunnels td:nth-child(2) {
+     width: auto !important;
+}
+
+#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+     margin-bottom: -7px !important;
+}
+
+#sb_internals, #sb_services, #sb_advanced {
+     margin-top: -6px !important;
+}
+
+
+#sb_internals a, #sb_services a, #sb_advanced a {
+     max-width: 600px;
+}
+
+.routersummary button[type="submit"], .routersummary button[type="cancel"] {
+     margin: 5px 5px 3px !important;
+     padding: 8px 5px !important;
+     min-width: 120px !important;
 }
 
 h1 {
-     margin: 0 1px 0 0;
-     min-width: 0;
+     margin: 9px 0 -1px;
+     min-width: 510px;
 }
 
 div.news {
-     margin: -1px 1px 0 0;
-     min-width: 0;
+     margin: 0 0 -1px;
+     min-width: 500px;
 }
 
 div.main {
-     margin: 0 1px 0 0;
-     min-width: 0;
+     margin: 1px 0 0;
+     min-width: 500px;
+}
+
+.sorry {
+     margin: -1px 0 0 !important;
+}
+
+.confignav {
+     padding: 3px 5px !important;
+     line-height: 180%;
+}
+
+@media screen and (min-width: 1500px) {
+h1 {
+     margin: 9px 0 -1px !important;
+}
+
+div.news {
+     margin: -1px 0 0 !important;
+}
+
+div.main {
+     margin: -1px 0 !important;
+}
+
+.sorry {
+     margin: -1px 0 0 !important;
+}
 }
diff --git a/installer/resources/themes/console/dark/console.css b/installer/resources/themes/console/dark/console.css
index 78d41b92f29c8f182b9d056e89a6441a0c1c5fdb..91afe21ea81ed06d4d12db431bcb8da9291de707 100644
--- a/installer/resources/themes/console/dark/console.css
+++ b/installer/resources/themes/console/dark/console.css
@@ -7,15 +7,25 @@ body {
      margin: 5px 0 0 0;
      padding: 0;
      text-align: center;
-     background: #010 url('images/camotile.png') center bottom;
+     background: #010 url(images/camotile.png) top left fixed;
      color: #EE9;
-     font: 8.5pt/130% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+     font: 8.5pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
 }
 
-.hide {
+.hide, .hideme {
      display: none;
 }
 
+::selection {
+     background: #030 !important;
+     color: white;
+}
+
+::-moz-selection {
+     background: #030 !important;
+     color: white;
+}
+
 div.clearer {
      clear: left;
      height: 0;
@@ -27,29 +37,73 @@ img {
      border: none;
 }
 
+a img:hover, a:focus img  {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+img[src="/flags.jsp?c=a1"], img[src="/flags.jsp?c=a2"] { /* more visibility for anonymous flags */
+     border: 1px solid #141;
+     width: 13px !important;
+     height: 9px !important;
+     padding-right: 0;
+     margin-left: 1px;
+     margin-right: 1px;
+}
+
+#profiles img[src="/flags.jsp?c=a1"], #profiles img[src="/flags.jsp?c=a1"] {
+     height: 10px !important;
+     margin-right: 1px;
+}
+
 pre {
      width: 98%;
-     overflow-x: scroll;
+     overflow-x: auto;
      text-align: left;
-     font: 8.5pt "Lucida Console", "Droid Sans Mono", "DejaVu Sans Mono", Courier, mono;
+     font: 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      color: #EE9;
 }
 
-div.logo {
+/* proxy error messages */
+
+div.logo { /* proxy error "fake" sidebar */
      float: left;
      padding: 10px;
      text-align: center;
      color: #EE9;
-     margin: 0 20px 0 20px;
+     margin: -1px 20px 0;
      border: 1px solid #494;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     background: #000; /*url("images/camotile2.png");*/
+     background: #000 url(images/camotile2.png);
      width: 185px;
-     -moz-box-shadow: inset 0 0 1px 0 #009;
-     -khtml-box-shadow: inset 0 0 1px 0 #009;
-     box-shadow: inset 0 0 1px 0 #009;
+     font-size: 10pt;
+     box-shadow: inset 0 0 3px 3px #000;
+}
+
+.logo > * {
+     text-align: center;
+}
+
+.logo a:link {
+     display: inline-block;
+     width: 100%;
+     padding: 3px 0;
+}
+
+.logo a img {
+     opacity: 0.6;
+     filter: sepia(100%) invert(100%) hue-rotate(260deg) drop-shadow(0 0 1px #494);
+     margin: 0;
+     padding: 0;
+     text-align: center;
+}
+
+.logo a:hover img {
+     opacity: 1;
+     filter: sepia(100%) invert(100%) hue-rotate(260deg) drop-shadow(0 0 2px #f60);
+}
+
+.logo a:active img {
+     opacity: 1;
+     filter: sepia(100%) invert(100%) hue-rotate(260deg) drop-shadow(0 0 2px #f90);
 }
 
 div.logo hr {
@@ -57,41 +111,49 @@ div.logo hr {
      background: #494;
      height: 1px;
      border: 0 solid #494;
-     margin: 10px 0 5px;
+     margin: 10px -10px;
 }
 
-div.toolbar {
-     margin: 0;
-     padding: 10px;
-     font-weight: bold;
+.logo, .warning {
+     filter: drop-shadow(0 0 5px #000);
+}
+
+div.warning {
+     margin: 20px 20px 20px 248px;
+     padding: 10px 25px 20px 75px;
      background: #000;
-     border: 1px solid #000;
-     display: none;
+     border: 1px solid #494;
+     color: #ee9;
+     text-align: justify;
+     background: #000 url(/themes/console/images/itoopie_sm.png) 10px center no-repeat;
+     background: url(/themes/console/images/itoopie_sm.png) 10px center no-repeat, url(images/camotile2.png);
+     box-shadow: inset 0 0 0 1px #700;
+     box-shadow: inset 0 0 0 1px #700, inset 0 0 3px 3px #000;
+     box-shadow: inset 0 0 0 1px #700, inset 0 0 3px 3px #000, 0 0 0 2px #000;;
+     word-wrap: break-word;
+     font-size: 10pt;
+     min-width: 300px;
+     border: 5px solid #010;
+     border-image: repeating-linear-gradient(135deg, #010 0px, #010 20px, #440 20px, #440 40px, #010 40px) 5 repeat repeat;
+     border-image-width: 5px;
+     border-image-outset: 1px;
 }
 
-div.toolbar a:link {
-     border: 1px outset #ddddc0;
-     padding: 0 5px 1px 5px;
-     background: #bbf;
-     text-decoration: none;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     color: #000;
+.warning p, .warning a {
+     font-size: 10pt
 }
 
-div.toolbar a:visited {
-     background: #ddf;
+.warning a {
+     line-height: 150%;
 }
 
-div.toolbar a:hover, button:hover {
-     border: 1px solid #f60;
-     background: #030;
-     color: #f60;
+.warning p {
 }
 
-a:active {
-     color: #900;
+.warning h3 {
+     font-size: 10pt;
+     padding: 7px 10px;
+     text-align: left;
 }
 
 div.routersummaryouter {
@@ -100,74 +162,123 @@ div.routersummaryouter {
      margin: 0 0 10px 5px;
      padding: 0;
      border: 0;
-     clear: left;/* fixes a bug in Opera */
+     clear: left; /* fixes a bug in Opera */
      text-align: center;
      display: block;
-     position: absolute;/* so no interference with /home app icons */
+     position: absolute; /* so no interference with /home app icons */
 }
 
 div.routersummary {
-     width: 173px;
+     width: 174px;
      padding: 8px 10px 8px;
      text-align: center;
      border: 1px solid #494;
-     background: #000 url(images/camotile2.png);
-     color: #EE9;
+     background: #000 url(images/camotile2.png) left top;
+     color: #ee9;
      font-size: 8pt;
-     clear: left;/* fixes a bug in Opera */
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
+     clear: left; /* fixes a bug in Opera */
+     border-radius: 2px;
      float: left;
-     -moz-box-shadow: 0 1px 5px #000;
-     -khtml-box-shadow: 0 1px 5px #000;
      box-shadow: 0 1px 5px #000;
      margin-bottom: 7px !important;
 }
 
-div.routersummary input[type=text] {
+div.routersummary img[src$="i2plogo.png"] {
+     opacity: 0.9;
+     transition: ease filter 0.3s 0s, ease opacity 0.3s 0s;
+     margin-top: 1px;
+     margin-left: -1px;
+     width: 176px;
+     height: auto;
+}
+
+div.routersummary img[src$="i2plogo.png"]:hover {
+     opacity: 1;
+     transition: ease filter 0.3s 0s, ease opacity 0.3s 0s;
+     filter: saturate(200%) drop-shadow(0 0 2px #f60);
+}
+
+.routersummary a[href="/"], .routersummary a[href="/console"] {
+     outline: none !important;
+}
+
+.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img {
+     filter: drop-shadow(0 0 2px #f60) saturate(200%);
+}
+
+div.routersummary input[type="text"] {
      text-align: right !important;
-     -moz-box-shadow: inset 1px 1px 1px 0 #000;
-     -khtml-box-shadow: inset 1px 1px 1px 0 #000;
      box-shadow: inset 1px 1px 1px 0 #000;
 }
 
 div.routersummary hr {
      color: #494;
      background: #494;
-     height: 2px;
-     border-bottom: 1px solid #494;
-     margin: 8px -10px 7px -10px;
-     -moz-box-shadow: inset 0 1px 1px 1px #000;
-     -khtml-box-shadow: inset 0 1px 1px 1px #000;
-     box-shadow: inset 0 1px 1px 1px #000;
+     height: 1px;
+     margin: 9px -10px 7px -10px;
 }
 
 div.routersummary h3 {
-     border: 0;
+     border: none;
      font-size: 9.5pt;
-     letter-spacing: 0.04em;
+     letter-spacing: 0.08em;
      margin: -7px -10px -8px -10px;
-     padding: 3px 0 4px 0 !important;
+     padding: 4px 0 !important;
      text-transform: uppercase;
-     -moz-border-radius: 0;
-     -khtml-border-radius: 0;
      border-radius: 0;
-     background: #000 url('images/header.png') center center ;
+     mix-blend-mode: exclusion;
+}
+
+.routersummary h3::after {
+     content: "";
+     display: inline-block;
+     min-height: 15px;
+     vertical-align: middle;
+}
+
+.routersummary h3 a {
+     vertical-align: middle;
+}
+
+.routersummary h3:hover {
+     background: #010 !important;
+     box-shadow: inset 0 0 2px 2px #000;
+}
+
+.routersummary h3:hover a {
+     color: #f60;
+}
+
+.routersummary h3:active {
+     box-shadow: inset 4px 4px 2px #000;
 }
 
 div.routersummary h4 {
      border: 0;
      border-bottom: 0 !important;
      font-size: 8pt;
-     letter-spacing: 0.02em;
-     margin: -7px -9px -10px -9px !important;
-     padding: 6px 3px 8px 3px;
+     margin: -6px -9px -8px !important;
+     padding: 6px 1px;
      background: #000;
-     text-transform: capitalize;
+     background: linear-gradient(to right, #001900, #001000 5%, #000 25%, #000 50%, #000 75%, #001000 95%, #001900);
      text-decoration: none !important;
      color: #2b2;
-     line-height: 100%;
+     line-height: 120%;
+     box-shadow: inset 0 0 0 1px #121;
+     box-shadow: inset 0 0 0 1px #121, inset 0 0 5px 2px #000;
+}
+
+.routersummary h4::after {
+     content: "";
+     display: inline-block;
+     min-height: 16px;
+     vertical-align: middle;
+}
+
+.routersummary h3 a, .routersummary h4 a {
+     white-space: normal !important;
+     display: inline-block;
+     width: calc(100% - 5px);
 }
 
 div.routersummary ul {
@@ -177,15 +288,102 @@ div.routersummary ul {
 div.routersummary table {
      border: 0;
      text-align: center !important;
-     margin: -5px -7px 5px -8px !important;
-     width: 188px !important;
+     margin: -5px -7px -6px -8px !important;
+     width: 190px !important;
      overflow: hidden;
      font-size: 8pt;
-/*     padding: 0 -10px; */
      background-image: none !important;
      background-color: transparent !important;
 }
 
+#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+     margin-bottom: -4px !important;
+}
+
+#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+   content: "";
+   display: inline-block;
+   min-height: 14px;
+}
+
+#sb_localtunnels {
+     margin: -4px -7px -7px -8px !important;
+}
+
+#sb_localtunnels td:first-child {
+     width: 16px;
+     text-align: left !important;
+     padding: 1px 0;
+}
+
+#sb_localtunnels td::after {
+     content: "";
+     display: inline-block;
+     min-height: 10px;
+     vertical-align: middle;
+     border-sizing: border-box;
+}
+
+#sb_localtunnels a {
+     display: inline-block;
+}
+
+#sb_localtunnels td:last-child {
+     text-align: right;
+     padding-right: 0;
+}
+
+#sb_warning { /* check connection/firewall */
+     padding: 4px 4px 4px 26px;
+     background: #000;
+     background: url(images/warning24x24.png) 4px center no-repeat, linear-gradient(to right, #001900, #001000 5%, #000 25%, #000 50%, #000 75%, #001000 95%, #001900);
+     background-size: 22px 22px, 100% 100%;
+     text-align: center;
+     line-height: 120%;
+}
+
+#sb_internals td, #sb_services td, #sb_advanced td { /* color ellipsis */
+     color: #595 !important;
+}
+
+#sb_internals a, #sb_services a, #sb_advanced a {
+     padding: 1px 2px;
+     display: inline-block;
+     vertical-align: middle;
+}
+
+#sb_version {
+     margin-top: 6px !important;
+     margin-bottom: 5px !important;
+}
+
+#sb_uptime {
+     margin-bottom: -5px !important;
+}
+
+#sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
+     word-break: break-all;
+     max-width: 182px;
+     overflow: hidden;
+     white-space: nowrap;
+     text-overflow: ellipsis;
+     line-height: 140%;
+}
+
+.sb_notice {
+     background: #010;
+     border: 1px solid #262;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #000;
+     margin: -2px -5px -4px;
+     padding: 5px 3px;
+}
+
+p:empty + .sb_notice {
+     margin-top: 9px;
+}
+
 div.routersummary tr {
      background-image: none !important;
      background-color: transparent !important;
@@ -193,7 +391,7 @@ div.routersummary tr {
 }
 
 div.routersummary form {
-     margin: -4px 0 -6px;
+     margin: -4px -9px -6px;
 }
 
 div.routersummary form:first-child {
@@ -211,24 +409,110 @@ div.refresh {
 }
 
 div.routersummary a:link, div.routersummary a:visited {
-     text-shadow: 1px 1px 1px rgba(0, 16, 0, 0.8);
-     text-shadow: 0 0 2px #101 !important;
-     padding: 0 1px;
+     word-spacing: 0.05em;
 }
 
 div.routersummary a:hover {
-     text-shadow: 0 0 1px rgba(255, 96, 0, 0.7);
      color: #f60;
 }
 
+/* "experimental" custom sidebar links for apps */
+/*
+#sb_services {
+     width: 192px !important;
+     margin: 0 !important;
+     margin: -7px -10px -9px !important;
+     border-collapse: collapse;
+     background: url(images/camotile.png) repeat fixed left top;
+}
+
+#sb_services tr {
+     padding: 0;
+}
+
+#sb_services td {
+     padding: 0;
+}
+
+#sb_services a, #sb_services a:hover, #sb_services a:active {
+     border-bottom: 1px solid #151 !important;
+     outline: none !important;
+     display: inline-block;
+     width: calc(100% - 32px) !important;
+}
+
+#sb_services a:hover {
+     background: #020;
+}
+
+#sb_services a:last-child {
+     border-bottom: 1px solid transparent !important;
+}
+
+#sb_services a[href*="mail"], #sb_services a[href*="snark"], #sb_services a[href*="7658"], #sb_services a[href*="bote"] {
+     padding: 5px 5px 5px 26px !important;
+     border: 1px outset transparent;
+     margin: 0 !important;
+     float: left;
+     text-align: left;
+     text-decoration: none;
+     text-transform: uppercase;
+     letter-spacing: 0.1em;
+     white-space: nowrap;
+     text-overflow: ellipsis;
+     overflow: hidden;
+     clear: both;
+}
+
+#sb_services a[href*="mail"] {
+     background: #000 url(images/mail.png) 5px center no-repeat;
+}
+#sb_services a[href*="mail"]:hover {
+     background: #020 url(images/mail.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="bote"] {
+     background: #000 url(images/webmail.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="bote"]:hover {
+     background: #020 url(images/webmail.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="snark"] {
+     background: #000 url(images/magnet.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="snark"]:hover {
+     background: #020 url(images/magnet.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="7658"] {
+     background: #000 url(images/webserver.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="7658"]:hover {
+     background: #020 url(images/webserver.png) 5px center no-repeat;
+}
+*/
+/* end custom sidebar links */
+
 div.routersummary td {
      padding: 0 2px 0 2px;
      background-image: none !important;
      border: 0 !important;
      word-spacing: -0.1em;
+     max-width: 180px;
+     text-overflow: ellipsis; /* force ellipsis rather than truncate rare, overlong text strings eg. Swedish sidepanel */
+}
+
+div.routersummary td:first-child {
+     max-width: 90px;
+     overflow: hidden;
+     text-transform: capitalize;
 }
 
-div routersummary hr:last-child {
+div.routersummary hr:last-child {
      margin-top: 5px;
      margin-bottom: -5px !important;
 }
@@ -240,8 +524,8 @@ div.newsheadings {
 }
 
 div.newsheadings li {
-     list-style: none outside url('images/newsbullet_mini.png');
-     margin: 0 -4px 2px 8px;
+     list-style: none outside url(images/newsbullet_mini.png);
+     margin: 0 -6px 2px 4px;
      line-height: 110%;
      text-transform: capitalize;
 }
@@ -250,7 +534,6 @@ div.newsheadings li b {
      font-weight: normal !important;
 }
 
-
 div.newsheadings button {
      margin: 4px 0 2px;
 }
@@ -267,6 +550,7 @@ div.tunnels table {
 
 div.tunnels td {
      padding: 1px 0 1px 0;
+     text-transform: capitalize;
 }
 
 div.tunnels td:first-child {
@@ -280,51 +564,26 @@ div.tunnels td:last-child {
      padding-right: 1px;
 }
 
-div.tunnels tr {
-/*     border: 1px solid #494 !important;*/
-}
-
-div.warning {
-     margin: 20px 20px 20px 245px;
-     padding: 5px 25px 20px 75px;
-     background: #000;
-     border: 1px solid #494;
-     text-align: left;
-     color: #EE9;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     text-align: justify;
-     background-image:url("../images/itoopie_sm.png");
-     background-position:10px center;
-     background-repeat:no-repeat;
-     -moz-box-shadow: inset 0 0 0 1px #f00;
-     -khtml-box-shadow: inset 0 0 0 1px #f00;
-     box-shadow: inset 0 0 0 1px #f00;
-     word-wrap: break-word;
-}
-
 /* console error messages */
 
 div.sorry {
-     margin: -1px 5px 10px 205px;
+     margin: -1px 5px 10px 206px;
      padding: 20px 20px 20px 75px;
      background: #020;
      border: 1px solid #494;
-     -moz-border-radius: 0 0 4px 4px;
-     -khtml-border-radius: 0 0 4px 4px;
      border-radius: 0 0 4px 4px;
      text-align: justify;
-     background-image:url("images/errortriangle.png");
+     background-image:url(/themes/console/images/info/errortriangle.png);
      background-position:15px center;
      background-repeat:no-repeat;
-     -moz-box-shadow: inset 0 0 0 1px #d00;
+     box-shadow: inset 0 0 0 1px #d00;
      word-wrap: break-word;
-     font-weight: bold;
+     min-width: 555px;
      color: #EE9;
+     font-size: 10pt;
 }
 
-div.sorry hr {
+.sorry hr {
      color: #EE9;
      background: #EE9;
      height: 1px;
@@ -332,51 +591,102 @@ div.sorry hr {
      margin: 10px 0;
 }
 
-div.main {
-     margin: -1px 5px 5px 205px;
-     padding: 0 15px 15px 15px;
+/* main section */
+
+.main {
+     margin: -1px 5px 5px 206px;
+     padding: 0 15px 5px 15px;
      text-align: left;
      color: #EE9;
      width: auto;
-/*  overflow-x: scroll; */
      border: 1px solid #494;
-     -moz-border-radius: 0 0 4px 4px;
-     -khtml-border-radius: 0 0 4px 4px;
-     border-radius: 0 0 4px 4px;
-     background: #000 url(images/scarface.jpg) right bottom no-repeat !important;
+     border-radius: 0 0 2px 2px;
+     background:  #000 url("images/camotile2.png") !important;
      min-width: 620px;
-     -moz-box-shadow: 0 1px 5px #000;
+     box-shadow: 0 1px 5px #000;
+     font-size: 9pt;
+}
+
+.main, .routersummary {
+     background:  #000 url("images/camotile2.png") !important;
+     background:  linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.45)), url("images/camotile2.png") #000 !important;
+     box-shadow: inset 0 0 0 1px #000, 0 1px 5px #000;
+}
+
+.main#dns {
+     padding: 0 0 3px;
+     min-width: 650px !important;
+     background: #000;
+}
+
+.main#webmail, .main#torrents {
+     padding: 0;
+     margin-top: -1px;
+     background: #000 !important;
+}
+
+.main#torrents {
+     padding-bottom: 2px;
+}
+
+.main#tunnelmgr {
+     background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)), url(images/camotile2.png) top left;
+     background-size: 3px 3px, 175px 175px;
+}
+
+div.main#news {
+     background: #000 url(images/news.png) no-repeat scroll bottom right !important;
+}
+
+/* end main */
+
+#news h3 {
+     padding: 4px 8px 5px 10px;
+     letter-spacing: 0.08em !important;
+     word-spacing: normal !important;
+}
+
+#news h3 font {
+     letter-spacing: 0.2em !important;
+     text-transform: none;
+}
+
+div.news h3, #newspage h3 {
+     text-align: left !important;
+     font-size: 10pt !important;
+     letter-spacing: 0.03em;
+     color: #ee9;
 }
 
 div.main textarea {
      background: #000;
      color: #EE9;
-     font: 8pt "Lucida Console", "Droid Sans Mono", "DejaVu Sans Mono", Courier, mono;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     resize: none;
 }
 
 div.news {
-     margin: -1px 5px 0 205px;
-     padding: 4px 30px 4px 30px;
+     margin: -1px 5px 0 206px;
+     padding: 6px 20px 5px;
      border: 1px solid #494;
-     background: #000;
-     background: #000 url("images/news.png")no-repeat scroll bottom right;
-     color: #7b7;
-/*     border-radius: 4px 4px 0 0;
-     -moz-border-radius: 4px 4px 0 0;
-     -khtml-border-radius: 4px 4px 0 0;*/
-     font-size: 7.5pt;
+     background: #000 url(images/news.png) no-repeat scroll bottom right;
+     background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url("images/news.png") no-repeat scroll right bottom,  url("images/camotile2.png") #000 !important;
+     background-blend-mode: lighten;
+     color: #ee9;
+     font-size: 8pt;
      text-align: right;
-     -moz-box-shadow: 0 1px 5px #000;
-     -khtml-box-shadow: 0 1px 5px #000;
      box-shadow: 0 1px 5px #000;
-     min-width: 580px;
-/*     height: 164px;
-     overflow-y: auto;*/
+     min-width: 610px !important;
+}
+
+/* MS Edge 14+ fix (no support for blend-mode) */
+_:-ms-lang(x), div.news {
+     background: #000 url(images/news.png) no-repeat scroll bottom right;
 }
 
 div.news li {
      text-align: justify;
-     list-style: url('images/info_dark.png');
+     list-style: url(images/info_dark.png);
      list-style: none;
      margin: 0;
      padding: 5px 5px 5px 0;
@@ -390,12 +700,6 @@ div.news li {
      text-transform: capitalize;
 }
 
-div.news h3 {
-     text-align: left !important;
-     font-size: 9.5pt;
-     letter-spacing: 0.03em;
-}
-
 div.news h4 {
      border-bottom: 1px;
      border-bottom-style: dotted;
@@ -407,102 +711,130 @@ div.news h4 {
      text-transform: capitalize;
 }
 
-div.news h4:first-child {
-     background: url('../images/itoopbullet.png');
-     background-repeat: no-repeat;
-     background-position: right;
-}
-
-div.news p {
-     margin-top: -5px;
-     font-size: 8.5pt;
+div.news p, div.newscontent p {
+     font-size: 9pt;
      color: #EE9;
-     margin-bottom: 0;
+     margin: 0 !important;
 }
 
-div.news p:nth-child(n+1) {
-     margin-top: 5px;
+div.news p:nth-child(n+2), div.newscontent p:nth-child(n+2) {
+     margin-top: 8px !important;
 }
 
 div.news hr {
      margin: 8px 0 3px 0;
 }
 
-div.confignav {
-     background: url('images/header.png') repeat-x scroll center center #000;
-     padding:5px 5px 6px !important;
-     margin: -1px 0 15px;
-     -moz-border-radius: 0 0 4px 4px;
-     -khtml-border-radius: 0 0 4px 4px;
-     border-radius: 0 0 4px 4px;
-     border: 1px solid #494;
-     font-size: 8.5pt !important;
-     font-weight: bold !important;
-     line-height: 160% !important;
-
+#newsStatus {
+     float: left;
 }
 
-div.configure {
-/*     padding: 5px 15px 0 15px;
-     margin: 10px 0;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #494; */
-     background: none;/* url(images/camotile2.png);*/
+#newsDisplay {
+     white-space: nowrap;
+     margin-left: 10px;
 }
 
-.sidebarconf button {
-     margin: 2px;
-     padding: 1px;
-     min-width: 0;
-     background: none;
+.newsAuthor {
+     float: right;
+     background: url(/themes/console/images/info/author_dark.png) left 2px center no-repeat;
+     background-size: 14px 14px;
+     font-size: 8pt !important;
+     padding: 1px 0 0 18px;
+     display: inline-block;
+     opacity: 0.9;
+     text-transform: none;
 }
 
-.sidebarconf th:nth-child(1) {
-     text-align: center;     
+.newsDate {
+     opacity: 0.9;
+     font-style: italic;
+     margin-right: 3px;
 }
 
-.sidebarconf th:nth-child(2) {
-     text-align: left;     
+#newspage {
+     margin: 18px 5px; /* positional parity with homepage news */
 }
 
-.sidebarconf td:first-child {
-     width: 60px;
-     text-align: right;
-     padding-right: 50px;
+div.widescroll { /* only scroll content, not entire page eg /peers */
+     overflow: auto;
 }
 
-.sidebarconf td:nth-child(2) {
-     font-weight: bold;     
+.widescroll table {
+     white-space: nowrap;
 }
 
-.sidebarconf td:nth-child(3), .sidebarconf td:nth-child(4) {
-     width: 70px;
-     padding: 0;  
-}
+/* top navigation */
 
-.sidebarconf td:nth-child(3) {
-     text-align: right;
-     padding-left: 50px;
+.confignav {
+     background: url(images/header.png) repeat-x scroll center center #000;
+     background: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
+     padding: 7px 5px !important;
+     margin: -1px -16px 15px;
+     border: 1px solid #494;
+     font-weight: bold !important;
+     line-height: 130% !important;
+     text-align: center;
+     box-shadow: inset 0 0 0 1px #000, inset 0 0 3px 1px #030;
 }
 
-.sidebarconf td:nth-child(4) {
-     text-align: left;
-     padding-right: 50px;
+.tab, .tab2 {
+     box-sizing: border-box;
+     display: inline-block;
+     border: 1px solid #494;
+     margin: 0 -2px -1px -2px !important;
+     padding: 1px 0;
+     background: #fff;
+     min-width: 60px !important;
+}
+
+.tab2 {
+     background: #030;
+     box-shadow: inset 0 0 0 1px #000;
+     color: #ee9;
+     padding: 5px 12px !important;
+}
+
+.tab a {
+     display: inline-block;
+     padding: 4px 14px !important;
+}
+
+.tab {
+     background: linear-gradient(to bottom, #001900, #002900 50%, #000 51%, #000) !important;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.tab:hover {
+     background: #000 !important;
+     box-shadow: inset 0 0 0 1px #914600;
+}
+
+.tab:hover a {
+     color: #f60;
+}
+
+.tab:active {
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px 1px #5f2400;
+     background: #f60 !important;
 }
 
+.tab:active a {
+     color: #ee9 !important;
+}
+
+/* end topnav */
+
 div.messages {
-     padding: 10px;
+     padding: 20px 10px 20px 50px;
      margin: 10px 0 15px 0;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
      border: 1px solid #494;
-     background: #000;  /*url('images/infotile.png') center left no-repeat;*/
+     background: #000;
+     background: url(images/infohelp.png) no-repeat 12px center, url(images/scarface.jpg) right bottom no-repeat #000;
+     background-size: 28px 28px, auto 90%;
      font-weight: bold;
-     font-size: 9pt;
-     color: #4f4;
+     font-size: 9.5pt;
+     color: #2b2 !important;
+     box-shadow: inset 0 0 1px 0 #990 !important;
 }
 
 div.messages span.error {
@@ -516,63 +848,200 @@ div.messages span.notice {
 div.messages li {
      text-align: justify !important;
      font-weight: bold;
-     list-style: url(images/warning_dark.png) !important;
-     margin: 0 5px 0 50px !important;
+     list-style: none !important;
+     margin: 0 5px 0 0 !important;
      padding: 0 10px 0 0 !important;
      border: 0 !important;
 }
 
-div.graphspanel {
-     padding: 0;
-     margin: 15px 0 -15px 0;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-/*     border: 1px solid #494;*/
-     background: none;/* url(images/camotile.png);*/
-     text-align: center;
+#messages, .error, .notice {
+     color: #ee9;
 }
 
 div.widepanel h3 {
      text-align: left !important;
+     padding: 6px 10px;
+     text-transform: uppercase;
+     font-size: 10.5pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-radius: 0;
+     border: 1px solid #494;
+}
+
+#graphs .messages {
+     margin-top: 15px;
+}
+
+.main#events .messages {
+     margin-top: 26px;
+     margin-bottom: -13px;
+     box-shadow: inset 0 0 0 1px #700 !important;
+}
+
+div.graphspanel {
+     padding: 0;
+     margin: 15px 0 -15px 0;
+     background: none;
+     text-align: center;
+     overflow: hidden;
+     width: 100%;
 }
 
 div.graphspanel form {
      text-align: left;
      padding: 0 15px 0 15px;
+     margin-bottom: 25px;
 }
 
-div.graphspanel hr {
-     margin: 10px -15px 10px -15px;
-}
-
-div.graphspanel img {
+div.graphspanel a img {
      border: 1px solid #494;
      padding: 3px;
      margin: 5px;
      text-align: center !important;
-     background: #000;
-     opacity: 0.8;
+     opacity: 0.9;
+     transition: ease all 0.3s 0s;
 }
 
-div.graphspanel img:hover {
-     border: 1px solid #000;
+div.graphspanel a img:hover {
+     border: 1px solid #f60;
      padding: 3px;
      margin: 5px;
      text-align: center !important;
-     background: #000;
-     -moz-box-shadow: inset 0 0 1px 1px #f60;
-     -khtml-box-shadow: inset 0 0 1px 1px #f60;
-     box-shadow: inset 0 0 1px 1px #f60;
      opacity: 1;
+     transition: ease all 0.3s 0s;
+     cursor: url(/themes/console/images/cursor_zoom.png), pointer;
+}
+
+div.graphspanel img {
+     border: 1px solid #333;
+     background: #000;
+     padding: 2px;
+     vertical-align: top;
+     max-width: 95%;
+     max-width: calc(100% - 18px);
+}
+
+div.graphspanel p {
+     text-align: center;
+     text-transform: capitalize;
+     margin-top: 10px;
+     border-top: 1px solid #494;
+     padding: 10px 10px 15px;
+}
+
+p#graphopts {
+     margin: 30px 0 5px !important;
+}
+
+p#graphopts + p {
+     display: none;
+}
+
+h3#graphinfo {
+     margin-top: 0;
+     border-radius: 0 !important;
+}
+
+div.graphspanel p:last-child {
+     display: none;
+}
+
+form[action="graphs"] {
+     border: 1px solid #494;
+     padding: 10px 10px 0 !important;
+     background: #000;
+     margin-top: -11px;
+     margin-bottom: 10px;
+}
+
+.formaction#graphing {
+     margin: -4px -5px 5px !important;
+     border-left: none;
+     border-right: none;
+}
+
+/*
+.main#graphs hr {
+     margin: 10px -10px 8px !important;
+}
+*/
+
+h3#graphinfo {
+     text-transform: capitalize;
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
+h3#graphdisplay a {
+     text-transform: capitalize;
+     letter-spacing: normal;
+     float: right;
+     font-size: 9pt;
+}
+
+/* new graphs optionbox */
+
+#graphs form {
+     padding: 0 !important;
+}
+
+#graphs form hr {
+     margin: 0 -1px 8px !important;
+}
+
+#graphs form table {
+     border: none;
+     margin: 0;
+}
+
+.formaction#graphing {
+     margin: -4px 3px 5px !important;
+     padding-top: 1px;
+}
+
+#graphs tr:first-child td {
+     border-top: none;
+}
+
+#graphs td:first-child {
+     text-align: right;
+     width: 85px;
+     white-space: nowrap;
+     padding: 13px 3px 13px 5px;
+}
+
+#graphs td:nth-child(2) {
+     width: 260px;
+     white-space: nowrap;
+}
+
+#graphs td.infohelp {
+     border: 1px solid #131;
+     border-right: none;
+     border-left: none;
+     background-size: 20px 20px !important;
+     padding: 5px 5px 5px 40px !important;
+     background-color: #000800 !important;
+     text-align: left;
+}
+
+#graphs form input, #graphs form select {
+     margin: 3px 5px 3px 0;
 }
 
+#graphs input[type="text"] {
+     min-width: 60px;
+}
+
+/* end new graphs optionbox */
+
 table {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #494;
      padding: 1px;
-     font-size: 8pt;
+     font-size: 9pt;
      background: #030;
      margin: 1px 0;
 }
@@ -588,11 +1057,12 @@ table hr {
 }
 
 th {
-     padding: 6px 2px;
+     padding: 7px 2px;
      color: #EE9;
      text-align: center;
      font-size: 9pt;
-     background: #000 url('images/header.png') center center repeat-x ;
+     background: #000 url(images/header.png) center center repeat-x;
+     background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
      border-top: 1px solid #494;
      border-bottom: 1px solid #494 !important;
      line-height: 110%;
@@ -603,7 +1073,7 @@ tr {
 }
 
 tr:nth-child(even) {
-     background: #010;
+     background: #001000;
      vertical-align: middle;
 }
 
@@ -612,30 +1082,124 @@ tr:nth-child(odd) {
      vertical-align: middle;
 }
 
-/*
-tr:last-child {
-     background: #004 url('images/lightbluetile.png') !important;
-     font-weight: bold;
-     border: 1px solid #494 !important;
-}
-*/
-
 td {
      padding: 4px 6px;
-     color: #EE9;
+     color: #ee9;
      vertical-align: middle;
-     border-top: 1px inset #494;
-     border-bottom: 1px outset #494;
+     border-top: 1px inset #131;
 }
 
 td img {
      padding: 0 1px 0 2px;
 }
 
+#udpconnections td:nth-child(2) img, #ntcpconnections td:nth-child(2) img {
+     padding: 0;
+}
+
+/* peers - sort icons */
+
+#udpconnections th {
+     vertical-align: top;
+     padding-top: 3px;
+}
+
+.sortup, .sortdown, .sortupactive, .sortdownactive {
+     padding: 1px 0;
+     border: 1px solid #171;
+     border-radius: 1px;
+     opacity: 0.7;
+     margin: 5px 1px 0 !important;
+     vertical-align: middle;
+     text-align: center;
+     display: inline-block;
+     width: 16px;
+     height: 12px;
+     background-size: 10px auto, 100% 100% !important;
+}
+
+.sortup, .sortdown {
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
+     margin: 0;
+     padding: 0;
+     opacity: 0;
+     width: 16px;
+     height: 14px;
+     vertical-align: middle;
+     text-align: center;
+}
+
+.sortup:hover, .sortdown:hover {
+     opacity: 0.9;
+     transition: ease all 0.3s;
+}
+
+.sortupactive, .sortdownactive {
+     opacity: 1;
+     box-shadow: inset 1px 1px 1px #000;
+}
+
+.sortup {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #040, #000);
+}
+
+.sortup:hover {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #000, #040);
+     border: 1px solid #f60;
+}
+
+.sortup a:focus, .sortdown a:focus {
+     background: rgba(255,255,0,0.2);
+     border-radius: 1px;
+     margin-top: -1px;
+     height: 14px;
+     width: 16px;
+     display: inline-block;
+}
+
+.sortupactive {
+     background: url(images/sort_up.png) center center no-repeat, #050;
+}
+
+.sortdown {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #040, #000);
+}
+
+.sortdown:hover {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #000, #040);
+     border: 1px solid #f60;
+}
+
+.sortdownactive {
+     background: url(images/sort_down.png) center center no-repeat, #050;
+     border: 1px solid #050;
+}
+
+/* end peer sort */
+
 tt {
-     font: bold 8pt "Lucida Console", "Droid Sans Mono", "DejaVu Sans Mono", Courier, mono;
+     font: bold 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      color: #FF0;
-     padding: 0 5px 2px 0;
+}
+
+table tt {
+     color: #770;
+     font-size: 8pt;
+}
+
+a:link tt, a:visited tt {
+     color: #494;
+}
+
+a:hover tt {
+     color: #f60;
+}
+
+a:active tt {
+     color: #f90;
 }
 
 div.main li {
@@ -643,16 +1207,13 @@ div.main li {
      list-style: square;
      margin: 2px 0 2px 30px;
      padding: 2px 20px 2px 0;
-/*     line-height: 150%;*/
      word-wrap: break-word;
 }
 
-
 div.main li b {
-     color: #b70 !important;
-     letter-spacing: 0.07em;
-     font-size: 8.5pt;
-     text-shadow: 0 1px 1px #700;
+     color: #bb0 !important;
+     letter-spacing: 0.08em;
+     font-size: 9pt;
 }
 
 .tidylist {
@@ -660,40 +1221,37 @@ div.main li b {
      line-height: 150%;
 }
 
-.tidylist:first-child {
-/*     padding-top: 5px;*/
-}
-
 .tidylist:last-child {
      padding-bottom: 10px;
 }
 
 .tidylist code {
      text-align: left;
-     font: 8.5pt "Lucida Console", "Droid Sans Mono", "DejaVu Sans Mono", Courier, mono;
+     font: 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      color: #dd0;
-     padding: 1px 2px;
+     padding: 1px 3px;
      background: #030;
      margin: 0 2px;
+     border-radius: 3px;
 }
 
 ol {
      display: inline;
-     margin: 1px 0 0 0;
      padding: 1px 0 0 20px;
 }
 
+ol li:first-child {
+     margin-top: 10px !important;
+}
 ul {
-/*     display: inline; */
      margin: 0;
      padding: 0;
 }
 
 code {
      text-align: left;
-     font: 8.5pt "Lucida Console", "Droid Sans Mono", "DejaVu Sans Mono", Courier, mono;
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      color: #dd0;
-     padding: 1px 2px;
 }
 
 a:link, h2 a:link {
@@ -710,11 +1268,16 @@ a:visited {
      word-wrap: break-word;
 }
 
-a:hover {
-     color: #f60;
-     text-decoration: underline;
+a:hover, a:focus {
+     color: #f60 !important;
+     text-decoration: none;
      font-weight: bold;
      word-wrap: break-word;
+     outline: none;
+}
+
+a:active {
+     color: #f90 !important;
 }
 
 .links {
@@ -725,15 +1288,14 @@ a:hover {
 }
 
 .links li {
-     list-style-image: url("images/link.png") !important;
+     list-style-image: url(images/link.png) !important;
 }
 
 .links b {
-     color: #b70 !important;
-     letter-spacing: 0.07em;
+     color: #bb0 !important;
+     letter-spacing: 0.08em;
      font-size: 8.5pt;
      line-height: 165%;
-     text-shadow: 0 1px 1px #700;
 }
 
 p {
@@ -745,11 +1307,21 @@ p img:first-child {
      display: none !important;
 }
 
+p:empty { /* kills empty paragraphs that are likely erroneous eg. see top of /profiles?f=1, /profiles */
+     display: none;
+     border: 1px dotted #f00; /* display in order to bug hunt */
+}
+
+#config_logging p {
+     text-align: left;
+     margin: 3px 0 5px !important;
+}
+
 h1 {
      text-align: left;
      color: #EE9;
      padding: 13px 15px;
-     margin: 0 5px 0 205px !important;
+     margin: 0 5px 0 206px !important;
      font-size: 17pt;
      font-weight: bold;
      font-style: normal;
@@ -757,15 +1329,11 @@ h1 {
      letter-spacing: 0.15em;
      text-shadow: 0 0 2px #010;
      white-space: normal;
-     background: #000 url('images/header.png') center center;
+     background: #000 url(images/header.png) center center;
      border: 1px solid #494;
-     border-radius: 4px 4px 0 0;
-     -moz-border-radius: 4px 4px 0 0;
-     -khtml-border-radius: 4px 4px 0 0;
+     border-radius: 2px 2px 0 0;
      line-height: 120%;
      min-width: 620px;
-     -moz-box-shadow: 0 1px 5px #000;
-     -khtml-box-shadow: 0 1px 5px #000;
      box-shadow: 0 1px 5px #000;
 }
 
@@ -781,18 +1349,16 @@ x:-o-prefocus, span.newtab {
      margin-top: -25px;
 }
 
-h2 {
+h2, h2.welcome {
      font-size: 12pt;
-     color: #EE9;
+     color: #ee9;
      text-shadow: 0 0 2px #010;
-     letter-spacing: 0.05em;
-     background: #000 url(images/camotile2.png);
-     background: #000 url('images/header.png') center center ;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background: #000 url(images/header.png) center center ;
      padding: 10px;
      border: 1px solid #494;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
+     border-radius: 2px;
      vertical-align: middle;
      margin: 15px 0 12px 0 !important;
      text-transform: uppercase;
@@ -805,19 +1371,15 @@ h2 a:visited {
 
 h2 a:hover {
      color: #f60;
-     text-shadow: 0 0 1px rgba(255, 64, 0, 0.7);
 }
 
-h3 {
+h3, h3.welcome {
      border: 1px solid #494;
      border-left: 5px solid #494;
-     padding: 6px;
+     padding: 6px 10px;
      margin: 12px 0 10px 0;
-     border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-     -khtml-border-radius: 0 4px 4px 0;
-     background: #000 url(images/camotile.png);
-     background: #000 url('images/header.png') center center ;
+     border-radius: 0 2px 2px 0;
+     background: #000 url(images/header.png) center center ;
      text-transform: uppercase;
      text-shadow: 0 0 2px #010;
      letter-spacing: 0.08em;
@@ -832,71 +1394,100 @@ h4 {
      font-size: 11pt;
 }
 
+h1, h2, h3:not([id*="help"]), h4.app, h4.app2, div.routersummary h3 {
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+}
+
+h2, h3, h4 {
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+h1, h4.app, h4.app2 {
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%), url("images/camotile2.png") #000 !important;
+     background-blend-mode: exclusion;
+     box-shadow: inset 0 0 0 1px #000;
+     text-shadow: 0 1px 1px #000;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+     outline: none;
+     border: none;
+}
+
 button, button:visited {
-     font: bold 9pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+     font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      border: 1px outset #191;
-     padding: 1px 3px;
+     padding: 4px 2px !important;
      text-decoration: none;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
+     border-radius: 2px;
      font-size: 8pt;
      font-weight: bold;
      margin: 2px 3px;
      text-align: center;
      vertical-align: middle;
-     min-width: 70px;
-     -moz-box-shadow: inset 0 1px 1px 0 #494;
-     -khtml-box-shadow: inset 0 1px 1px 0 #191;
-     box-shadow: inset 0 1px 1px 0 #191;
+     min-width: 75px;
      background: #000;
      color: #494;
+     filter: drop-shadow(0 0 1px #000);
 }
 
-button:hover {
+button:hover, button:focus {
      border: 1px solid #f60;
-     -moz-box-shadow: inset 0 1px 1px 0 #EE9;
-     -khtml-box-shadow: inset 0 1px 1px 0 #EE9;
-     box-shadow: inset 0 1px 1px 0 #EE9;
+     box-shadow: inset 0 1px 1px 0 #ee9;
      background: #000;
      color: #f60;
+     cursor: pointer;
 }
 
 button:active {
-     border: 1px inset #f60;
+     border: 1px solid #f60;
      background: #f60;
-     color: #EE9;
-     -moz-box-shadow: inset 0 0 0 0 #f60;
-     -khtml-box-shadow: inset 0 0 0 0 #f60;
-     box-shadow: inset 0 0 0 0 #f60;
+     color: #ee9;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.routersummary button.reload, .routersummary button.stop {
+     min-width: 86px;
+     text-transform: capitalize;
 }
 
 .underline {
-     border-bottom: 1px solid #eeeeff;
+     border-bottom: 1px solid #ee9;
      padding: 5px 0 5px 0;
      margin: 0 0 10px 0;
 }
 
 .langbox {
-     margin: 4px 4px 2px 5px;
+     margin: 4px 3px 2px 5px;
      padding: 0;
-     color: #EE9;
+     color: #ee9;
      font-size: 7pt;
-     width: 300px;
+     width: 400px;
      text-align: right;
      float: right;
      vertical-align: middle;
+     line-height: 16px;
 }
 
 .langbox img {
-     opacity: 0.5;
-     -moz-box-shadow: 0 0 1px #000;
-     padding: 1px !important;
+     opacity: 0.7;
+     padding: 0 !important;
+     margin: 0 1px -2px !important;
+     transition: ease opacity 0.3s;
+     border: 1px solid #000;
 }
 
-.langbox img:hover {
+.langbox img:hover, .langbox a:focus img {
      opacity: 1;
-     -moz-box-shadow: 0 0 1px #f60;
+     transform: scale(1.1);
+}
+
+.langbox a:active img {
+     transform: scale(1);
+}
+
+img[src*="bound"], img[src*="bound"]:hover {
+     filter: sepia(100%) hue-rotate(70deg) !important;
 }
 
 hr {
@@ -912,118 +1503,245 @@ hr:last-child {
      margin-bottom: 20px;
 }
 
+.joblog hr {
+     margin: 10px 0;
+}
+
+.wideload > a[href^="tunnels"] ~ hr, .wideload > a[href^="/susidns/"] ~ hr { /* tighten up /netdb (leasesets) hr */
+     margin: 10px 0;
+}
+
 .sidebarlogo {
      text-align: center;
 }
 
 input {
-     border: 1px outset #5f5;
-     -moz-box-shadow: inset 0 1px 1px 0 #373;
-     -khtml-box-shadow: inset 0 1px 1px 0 #373;
-     box-shadow: inset 0 1px 1px 0 #373;
+     border: 1px outset #191;
      background: #000;
      color: #494;
      margin: 5px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     padding: 1px 2px;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     padding: 4px 2px;
      text-decoration: none;
      min-width: 110px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
+     border-radius: 2px;
 }
 
-input:hover {
+input:hover, input:focus {
      background: #000;
-     color: #f60;
-     border: 1px solid #f60;
-     -moz-box-shadow: inset 0 1px 1px 0 #9e9;
-     -khtml-box-shadow: inset 0 1px 1px 0 #9e9;
-     box-shadow: inset 0 1px 1px 0 #9e9;
+     color: #f60 !important;
+     border: 1px solid #f60 !important;
+     cursor: pointer;
 }
 
-input:active {
-     background: #000;
-     color: #f30;
-     border: 1px solid #f30;
+input[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="reset"]:focus {
+     box-shadow: inset 0 1px 1px 0 #ee9 !important;
+}
+
+input[type="submit"]:active, input[type="reset"]:active, button:active {
+     box-shadow: inset 0 0 0 1px #000 !important;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important;
 }
 
 input:active {
-     border: 1px inset #f60;
-     background: #f60;
-     color: #EE9;
+     border: 1px solid #f60 !important;
+     background: #f60 !important;
+     color: #ee9 !important;
 }
 
-input[type=text], input[type=password] {
+input[type="text"], input[type="password"] {
      background: #000;
-     color: #EE9;
+     background: linear-gradient(to bottom, #000 0%, #010 100%);
+     color: #ee9;
      margin: 5px 10px;
-     padding: 4px 2px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+     padding: 4px 3px;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      border: 1px solid #494 !important;
      text-decoration: none;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     -moz-box-shadow: inset 1px 1px 1px 0 #000;
-     -khtml-box-shadow: inset 1px 1px 1px 0 #000;
-     box-shadow: inset 1px 1px 1px 0 #000;
+     border-radius: 2px;
+     box-shadow: inset 0 0 3px 3px #000;
+     cursor: text;
 }
 
-input[type=text]:active, input[type=text]:hover {
-     background: #000;
+input:invalid, input[type="file"]:invalid {
+     border: 1px dotted #f00 !important;
 }
 
-input[type=image] {
+input[type="text"], input[type="password"], textarea {
+     color: #bb7 !important;
+}
+
+input[type="image"] {
      min-width: 0;
 }
 
+input[type="checkbox"], .optbox {
+     min-width: 16px !important;
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%); /* colorize radios and checkboxes */
+     vertical-align: sub;
+     background: none;
+}
+
+input[type="checkbox"]:hover, .optbox:hover, input[type="checkbox"]:focus, .optbox:focus {
+     outline: none;
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) drop-shadow(0 0 3px #f60);
+}
+
+label {
+     cursor: pointer;
+}
+
+.main#config_clients label[for="0"] {
+     cursor: default;
+}
+
+input[type="file"]  {
+     box-shadow: none;
+     border: none !important;
+     background: #000;
+     color: #ee9;
+     padding: 0 !important;
+     cursor: pointer;
+     margin: 5px 8px;
+     font-weight: normal;
+}
+
+input[type="file"]:hover, input[type="file"]:active {
+     color: #f60;
+}
+
+input[name="refreshInterval"] {
+     margin-right: 3px;
+     width: 40px;
+     text-align: right;
+}
+
+input:disabled {
+     cursor: default;
+}
+
+input[type="text"]:disabled, input[type="text"]:disabled:active, input[readonly="readonly"] {
+     color: #161 !important;
+     background: #000 !important;
+}
+
+input[class="check"] { /* nudge "check for updates" button into alignment on /configupdate */
+     margin-left: 10px !important;
+}
+
+input[name="ntcphost"], input[name="udpHost1"] {
+     width: 260px;
+}
+
 fieldset {
-overflow: hidden;
-position: relative;
+     overflow: hidden;
+     position: relative;
 }
 
 select {
-     background: #000;
-     color: #EE9;
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     background: #000 url(images/dropdown.png) right center no-repeat !important;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important;
+     color: #494;
      margin: 5px 10px;
-     border: 1px solid #494;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
+     border: 1px outset #191;
+     border-radius: 2px;
      min-width: 110px;
-     font: 9pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     padding: 2px;
+     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-weight: bold;
+     padding: 4px 16px 4px 4px !important;
+     cursor: pointer;
+     overflow: hidden;
+     text-overflow: ellipsis;
+}
+
+select option {
+     font-size: 9.5pt !important;
+     box-shadow: inset 0 0 20px 20px #000;
+     color: #fff !important;
+     background: #000 !important;
+}
+
+select option:hover, select option:checked {
+     box-shadow: inset 0 0 20px 20px #f60;
+     background: #000 !important;
+}
+
+select:focus, select:hover {
+     color: #f60;
+     border: 1px solid #f60;
+}
+
+select:hover {
+     box-shadow: inset 0 1px 1px 0 #ee9;
+}
+
+select:hover, select:focus, select:active {
+     background: #000 url(images/dropdown_hover.png) right center no-repeat !important;
+}
+
+select::-ms-expand {
+     display: none;
 }
 
 textarea {
      background: #000;
-     color: #EE9;
+     background: linear-gradient(to bottom, #000 0%, #010 100%) !important;
+     box-shadow: inset 0 0 3px 3px #000;
+     color: #ee9;
      padding: 5px;
      margin: 10px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     font: 8.5pt "Lucida Console", "Droid Sans Mono", "DejaVu Sans Mono", Courier, mono;
+     border-radius: 2px;
+     font: 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      min-height: 100px;
      min-width: 97%;
+     width: calc(100% - 15px);
      text-align: left;
      border: 1px solid #494;
 }
 
-form {}
+textarea[cols="70"], textarea[name="levels"] {
+     width: calc(100% - 20px);
+}
 
-.proxyfooter {
-     margin: 0 20px 10px 240px;
-     padding: 20px 25px 20px 75px;
-     color: #f00;
-     font-size: 7pt;
-     text-align: right !important;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border: 1px solid #000;
-     display: none;
+input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+     color: #ee9 !important;
+     background: #000 !important;
+     filter: drop-shadow(0 0 1px #880);
+     transition: filter ease 0.3s 0s;
+     font-weight: bold;
+     outline: none;
+}
+
+input[readonly]:focus {
+     filter: none !important;
+     color: #161 !important;
+     font-weight: normal;
+}
+
+textarea#advancedsettings:focus {
+     box-shadow: inset 0 0 0 1px #880;
+     filter: none;
+}
+
+textarea[readonly]:focus {
+     box-shadow: inset 0 0 3px 3px #000;
+     font-weight: normal;
+}
+
+input[type="submit"], input[type="reset"], select, button { /* webkit/blink fix for oversaturated colors */
+     border: 1px solid #8b8;
+     border-bottom: 1px solid #171;
+     border-right: 1px solid #171;
+     background: linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%);
+     filter: drop-shadow(0 0 1px #131);
+}
+
+input[type="submit"], input[type="reset"], button {
+     padding: 5px 8px !important;
+     outline: none;
 }
 
 .statusnotes {
@@ -1032,55 +1750,60 @@ form {}
      color: #EE9;
      text-align: center;
      border: 1px solid #494 !important;
-/*     border-top: 0 !important;*/
-     margin: -3px 0 5px 0;
+     margin: -2px 0 5px 0;
      padding: 7px;
-     background: #010;
-     -moz-box-shadow: inset 0 0 0 1px #090;
-     -khtml-box-shadow: inset 0 0 0 1px #090;
-     box-shadow: inset 0 0 0 1px #090;
-/*     background: #000 url('images/header.png') repeat-x center center !important;*/
+     background: #000;
+     background: linear-gradient(to bottom, #001400, #001000 50%, #000 100%);
 }
 
-div.joblog {
-/*     margin: 	15px 0 15px 0;
-     padding: 5px 20px 10px 20px !important;
-     border: 1px solid #494;
-     background-color: #000;
-     background: #000; url("images/camotile.png");*/
-/*     color: #dfd;*/
+.joblog {
      border-radius: 4px 4px 0 0;
-     -moz-border-radius: 4px 4px 0 0;
-     -khtml-border-radius: 4px 4px 0 0;
      text-align: justify !important;
-     overflow-x: auto; /* Opera fix */
+     margin-top: 15px !important;
  }
 
-div.joblog h3 {
-     margin-top: 10px;
+.joblog h3 {
+     margin-top: 10px !important;
 }
 
-div.main li {
+.joblog br {
+     margin-bottom: 5px;
+}
+
+
+.joblog ol {
+     padding: 5px 20px 5px 0;
+     -moz-column-count: 2;
+     -moz-column-width: 400px;
+     -moz-column-gap: 50px;
+     -webkit-column-count: 2;
+     -webkit-column-width: 400px;
+     -webkit-column-gap: 50px;
+     column-count: 2;
+     column-width: 400px;
+     column-gap: 50px;
+}
+
+.joblog ol li {
+     break-inside: avoid;
+     page-break-inside: avoid;
+     -webkit-break-inside: avoid;
+     display: inline-block;
+     border-bottom: 1px dotted #030;
+     min-width: 360px;
+     width: 90%;
+     width: calc(100% - 45px);
+     padding-bottom: 5px !important;
      text-align: left;
-     list-style: square;
-     margin: 2px 0 2px 30px;
-     padding: 2px 20px 2px 0;
-/*     line-height: 150%;*/
-     word-wrap: break-word;
 }
 
-div.joblog li {
-     word-wrap: break-word !important;
-     text-align: justify !important;
-     line-height: 120% !important;
-     margin: 2px 0 2px 30px;
-     padding: 2px 20px 2px 0;
+.joblog ol li:last-child {
+     border: none;
+     text-align: left;
 }
 
-div.joblog ul {
-     word-wrap: break-word !important;
-     text-align: justify;
-     margin: 0;
+.joblog ol:empty {
+     display: none !important;
 }
 
 div.joblog li:first-child {
@@ -1088,7 +1811,42 @@ div.joblog li:first-child {
 }
 
 div.joblog li:last-child {
-     margin-bottom: -10px;
+     padding-bottom: 10px;
+}
+
+div.joblog ul li li li {
+     margin-bottom: 10px !important;
+}
+
+div.joblog ul li li:last-child {
+     margin-bottom: -30px;
+}
+
+h3#finishedjobs + ol li, h3#scheduledjobs + ol li, h3#activejobs + ol li, h3#readyjobs + ol li {
+    list-style: none !important;
+}
+
+h3#activejobs + ol li:before, h3#scheduledjobs + ol li:before, h3#readyjobs + ol li:before, h3#finishedjobs + ol li:before {
+     content: '\2023\00A0\00A0';
+     margin-left: -20px;
+     font-size: 15pt;
+     font-weight: bold;
+     line-height: 50%;
+     vertical-align: sub;
+     color: #393;
+}
+
+h3#finishedjobs + ol li:before {
+     color: #3D3;
+     content: '\2714\00A0';
+}
+
+h3#readyjobs + ol li:before {
+     color: #dd3;
+}
+
+h3#scheduledjobs + ol li:before {
+     color: #773;
 }
 
 div.joblog form:first-child {
@@ -1097,278 +1855,4079 @@ div.joblog form:first-child {
 
 div.joblog table {
      margin-top: 15px;
+     margin-left: 0 !important; /* removes hard-coded indentation */
+     margin-bottom: 15px;
+}
+
+div.joblog table td:first-child {
+     font-weight: bold;
 }
 
 div.joblog p {
      line-height: 140%;
 }
 
-.smallhead {
-     font-size: 7pt
+div.joblog th:first-child {
+     text-align: left;
+     padding-left: 6px;
 }
 
-.mediumtags {
-     font-size: 8.5pt;
-}
+/* /jobs */
 
-.optbox {
-     min-width: 16px !important;
-     max-width: 16px !important;
-     width: 16px !important;
-     min-height: 16px;
-     max-height: 16px;
-     height: 16px;
-     opacity: 1.0;
-     border: 0;
-     margin: 5px 5px 5px 10px;
-     padding: 2px;
-     overflow: hidden;
-     position: relative;
+.main#jobs h2 {
+     border-radius: 0;
+     margin-bottom: -15px !important;
 }
 
-.optbox:hover {
-     min-width: 16px !important;
-     max-width: 16px !important;
-     width: 16px !important;
-     min-height: 16px;
-     max-height: 16px;
-     height: 16px;
-     opacity: 1.0;
-     border: 0;
-     margin: 5px 5px 5px 10px;
-     padding: 2px;
+.main#jobs h3 + ol + h3 {
+     margin-top: 10px !important;
 }
 
-.cells {
-     border: 1px inset #494;
-     border-left: 1px outset #494;
+#jobrunners ~ ol {
+     display: block;
+     margin-bottom: 5px !important;
+     margin-top: -11px !important;
+     border: 1px solid #494;
+     width: 97%;
+     width: calc(100% - 22px);
+     background: #000800;
 }
 
-.tablefooter tr, .tablefooter td {
-     background: #000 url('images/header.png') repeat-x center center !important;
-     border-top: 1px solid #494;
-     border-bottom: 1px solid #494 !important;
-     font-size: 7pt;
-     line-height: 110%;
-     padding: 5px 5px 10px;
+#jobrunners ~ ol > li:last-child {
+     margin-bottom: 5px;
 }
 
-.formaction {
-     text-align: right;
-     margin-bottom: -5px;
+h3[id*="jobs"] {
+     clear: both;
+     margin-top: 25px !important;
 }
 
-div.footnote {
-     text-align: right;
-     color: #494;
-     font-size: 7pt;
-     margin-bottom: -8px !important;
+table#schedjobs {
+     width: 100% !important;
+     margin: -6px 0 0 !important;
 }
 
-div.footnote hr{
-     margin: 10px 0 5px 0 !important;
-     color: #494;
-     background: #494;
-     height: 1px;
-     border: 0 solid #494;
+#jobstats {
+     margin-bottom: 10px;
 }
 
-.topness {
-     font-size: 7.5pt;
+#jobstats th, #jobstats td {
      text-align: right;
-     margin-top: -5px;
-     margin-bottom: -5px;
-     margin-right: 5px;
+     padding-right: 8px !important;
 }
 
-/* begin home page */
+#jobstats tr:last-child {
+     font-weight: bold;
+}
 
-/*
-#appsummary {
-     clear: none;
-     float: none;
-     left: 10px;
-     margin: 0;
-     position: absolute;
-     top: 10px;
+#schedjobs th:first-child, #schedjobs td:first-child, #jobstats th:first-child, #jobstats td:first-child  {
+     text-align: left;
+     padding-left: 10px;
+     font-weight: bold;
 }
 
-#homemain {
-     left: 217px;
-     margin: 0 10px 10px 0;
-     position: absolute;
-     top: 10px;
+table#jobstats + hr {
+     display: none;
 }
 
-#homenews {
-     margin: 0 10px 5px 0;
+h3#totaljobstats {
+     margin-bottom: -2px;
+     margin-top: 10px !important;
 }
 
-h2.app {
-     border-radius: 8px;
-     margin: 1px 10px 15px 0 !important;
+/* end /jobs */
+
+/* /stats */
+
+form#statnav {
+     border: 1px solid #494 !important;
+     padding: 10px 10px 10px 15px;
 }
-*/
 
-h4.app, h4.app2 {
-    background: url('images/header.png') center center repeat-x;
-    border: 1px solid #449944;
-    font-size: 10pt;
-    font-variant: small-caps;
-    letter-spacing: 2px;
-    margin: 12px 0 -9px 0;
-    padding: 7px 8px 7px;
-    text-transform: uppercase;
-    border-radius: 4px;
-    text-align: left;
+h3.stats {
+     border: 1px solid #494;
+     border-radius: 0;
 }
 
-h4.app2 {
-     clear: left;
-     margin-top: 5px !important;
+div.joblog li {
+     word-wrap: break-word !important;
+     text-align: justify !important;
+     line-height: 120% !important;
+     margin: 2px 0 2px 30px;
+     padding: 2px 20px 2px 0;
 }
 
-div.ag2 {
-     margin: 0;
-     padding: 0;
+div.joblog ul {
+     word-wrap: break-word !important;
+     text-align: justify;
+     margin: 5px 0 -10px;
 }
 
-div.app {
-     float: left;
-     padding: 2px 0 0 !important;
-/*     width: 137px; */
-     min-width: 70px;
+ul.statlist {
+     margin: -11px 0 -31px !important;
      border: 1px solid #494;
+     padding: 10px 0 0;
      background: #000;
-     background-image: -moz-linear-gradient(center top , #000B00, #000);
-     border-radius: 3px;
-     -moz-border-radius: 3px;
-     -khtml-border-radius: 3px;
-     margin: 3px;
-     height: 53px;
-     text-align: center !important;
-     padding-top: 3px;
-     opacity: 0.9;
-     box-shadow: 0 1px 5px #000000;
+     color: #bb7;
 }
 
-div.app:hover {
-    opacity: 1;
-    border: 1px solid #f60;
-    background: #000;
-    box-shadow: none;
+ul.statlist:last-of-type {
+     margin-bottom: -10px !important;
 }
 
-div.app:last-child {
-     margin-bottom: 12px;
+ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover {
+     color: #bb3 !important;
+     text-decoration: none;
+     letter-spacing: normal;
 }
 
-div.appgroup {
-     margin: 0;
-     padding: 16px 3px;
-     width: auto;
+ul.statlist li::before {
+     content: "\2B26\00A0";
+     font-size: 14pt;
+     line-height: 50%;
+     vertical-align: baseline;
+     color: #bb3;
 }
 
-div.search {
-     margin: 10px 10px 0 0;
-     padding: 8px 8px 0 8px;
-     width: auto;
+ul.statlist li {
+     line-height: 160% !important;
+     list-style: none;
+     margin-left: 10px;
 }
 
-table.search {
-     background: none;
-     padding: 8px;
-     width: auto;
-     margin-left:auto;
-     margin-right:auto;
+ul.statlist li li {
+     margin-left: 16px;
+     margin-right: -20px;
+     line-height: 140% !important;
+     list-style: none;
 }
 
-.appimg {
-     height: 35px;
+ul.statlist li li::before {
+     content: "\279F\00A0";
+     vertical-align: baseline;
+     color: #994
 }
 
-img.app {
-     height: 32px;
-     width: 32px;
-     padding: 2px 0 0;
-     margin-bottom: 2px;
+ul.statlist li li:last-child {
+     padding-bottom: 5px;
 }
 
-img.app2p {
-     height: 40px;
-     padding: 5px 6px 0 6px;
-     margin-bottom: 3px;
+ul.statlist li li:last-child::after {
+     content: "";
+     display: block;
+     border-bottom: 1px dotted #030;
+     margin-top: 6px;
+     margin-bottom: -12px;
 }
 
-table.app {
-     background: none;
-     border: 0;
-     margin: auto;
-     width: auto;
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ul.statlist li li:last-child::after {
+     margin-bottom: -6px;
+}
 }
 
-tr.app {
-     background: none;
-     border: 0;
-     margin: 0;
+li.noevents {
+     margin-bottom: 5px !important;
 }
 
-td.app {
-     background: none;
-     border: 0;
-     margin: 0;
-     padding: 3px 0 0;
+li.noevents::after {
+     margin-top: 6px !important;
+     margin-bottom: 0 !important;
+     margin-right: 20px;
 }
 
-div.applabel {
-     font-size: 7.5pt;
-     margin: 0;
+ul.statlist li b {
+     color: #994 !important;
+}
+
+ul.statlist li li:last-child::before {
+     content: "\27A1\00A0";
+     color: #994
+}
+
+.statlist a[href^="graph"]::before {
+     content: "\27A1\00A0";
+     content: "\21B3\00A0";
+     color: #994;
+     font-size: 14pt;
+}
+
+.statlist a[href$="true"]::before {
+     display: none;
+}
+
+.main#stats form {
+     background: #000;
+     border: 1px solid #494;
+     padding: 10px;
+     margin: -13px 0 -11px;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ul.statlist {
+     margin: -11px 0 -25px !important;
+}
+}
+
+ul.statlist li li:last-child {
+     margin-bottom: -20px !important;
+}
+
+li.noevents {
+     padding: 0 0 20px !important;
+}
+}
+
+.main#stats h3 a:hover {
+     color: #ee9 !important;
+}
+
+/* end stats */
+
+/* /eventlogs */
+
+table#eventlog {
+     margin-top: -21px;
+     margin-bottom: 10px;
+}
+
+table#eventlog td {
+     padding: 3px 10px;
+}
+
+form[action="events"] {
+     background: #000;
+}
+
+th.smallhead {
+     border: 1px inset #131;
+}
+
+.smallhead {
+     font-size: 8pt
+}
+
+.smallhead a:hover {
+     text-decoration: none;
+}
+
+.smallhead a img:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+.mediumtags {
+     font-size: 9pt;
+}
+
+.optbox {
+     min-width: 16px !important;
+     max-width: 16px !important;
+     width: 16px !important;
+     min-height: 16px;
+     max-height: 16px;
+     height: 16px;
+     opacity: 1.0;
+     border: 0;
+     margin: 2px 4px;
      padding: 2px;
+     overflow: hidden;
+     position: relative;
+}
+
+.cells {
+     border: 1px inset #131;
+     /*border-left: 1px outset #141;*/
      text-align: center;
-     vertical-align: bottom;
-     line-height: 95%;
-     text-transform: lowercase;
-     border: none;
-/*     width: 131px; */
-     min-width: 72px;
-     background: #010;
-     border-radius: 0 0 2px 2px;
+}
+
+.tablefooter tr, .tablefooter td {
+     background: #000 url(images/header.png) repeat-x center center !important;
+     background: linear-gradient(to bottom, #001400, #001000 50%, #000 100%) !important;
+     border-top: 1px solid #494 !important;
+     border-bottom: 1px solid #494 !important;
+     line-height: 110%;
+     padding: 6px 10px;
+}
+
+.formaction {
+     text-align: right;
+     margin-bottom: -5px;
+}
+
+h3[id$="con"] { /* peers h3 + tables */
+     margin-bottom: -2px;
+     border-radius: 0;
+     padding: 6px 10px;
+     font-size: 10pt;
+     word-spacing: 0.1em;
+     letter-spacing: 0.08em;
+     background: #000;
+     background: linear-gradient(to right, #000 0%, #001000 70%, #001300 90%);
+     border: 1px solid #494;
+}
+
+h3[id="udpcon"] {
+     width: auto;
+}
+
+table#udpconnections table {
+     overflow-x: auto !important;
+}
+
+table#udpconnections th {
+      padding: 5px 2px;
+}
+
+table#udpconnections table i {
+     font-weight: bold;
+     line-height: 150%;
+     letter-spacing: 0.1em;
+}
+
+#udpconnections tr a img {
+      margin-top: 3px !important;
+}
+
+#udpconnections tr:hover, #ntcpconnections tr:hover, #jobstats tr:hover, #schedjobs tr:hover, #netdboverview table tr:hover, #portfaq tr:hover {
+     background: #020;
+}
+
+#udpconnections tr td, #ntcpconnections tr td {
+     color: #bb7;
+}
+
+#udpconnections td:first-child {
+     width: 50px;
+     padding: 2px 4px;
+     white-space: nowrap;
+}
+
+#udpconnections tr:hover td, #ntcpconnections tr:hover td {
+     color: #ee9;
+}
+
+#udpconnections tr.tablefooter td, #ntcpconnections tr.tablefooter td {
+     color: #ee9;
+     text-align: center;
+}
+
+#udpconnections tr.tablefooter td:first-child, #ntcpconnections tr.tablefooter td:first-child {
+     padding-left: 6px;
+     text-align: left;
+}
+
+#udpconnections tr.tablefooter:hover td {
+     border-top: 1px solid #494;
+}
+
+#udpconnections tr.tablefooter td:first-child {
+     padding-left: 9px;
+}
+
+#udpconnections td[class="cells"]:first-child, #ntcpconnections td[class="cells"]:first-child {
+     width: 50px;
+     white-space: nowrap;
+     text-align: right;
+}
+
+#udpconnections td > *, #ntcpconnections td > *,
+#profiles td > *, #floodfills td > * {
+     vertical-align: middle !important;
+}
+
+#ntcpconnections td[class="cells"]:last-child {
+     font-weight: bold !important;
+     width: 100px;
+}
+
+table#ntcpconnections {
+     overflow-x: scroll !important;
+}
+
+.backlogged {
+     font-size: 14pt;
+     line-height: 0;
+}
+
+pre#transports {
+     border: 1px solid #494;
+     padding: 15px 0 5px 15px;
+     margin: 0 20px 0 0;
+     background: #000;
+     width: calc(100% - 17px);
+}
+
+a[name="chelp"]:hover, a[name="help"]:hover, a[name="chelp"]:active, a[name="help"]:active { /* hide /help anchorpoints */
+     color: #ee9 !important;
+     text-decoration: none;
+     text-shadow: none;
+}
+
+#oldhome td.optionsave {
+     background: none;
+}
+
+#oldhome input[type="checkbox"] {
+     vertical-align: sub;
+     min-width: 16px;
+     min-height: 16px;
+}
+
+.homelinkedit td:first-child {
+     width: 115px;
+}
+
+.homelinkedit th:nth-child(3), .homelinkedit th:last-child {/* /confighome */
+     text-align: left !important;
+     text-transform: none !important;
+     padding-left: 5px;
+}
+
+.homelinkedit input[type="text"] {
+     margin-left: 0;
+}
+
+.homelinkedit tr:nth-last-child(1) td:first-child {
+     text-align: right;
+}
+
+#config_homepage input.delete {
+     float: left;
+}
+
+.formaction#homesites {
+     margin-bottom: -2px !important;
+}
+
+.formaction#homeapps, .formaction#homesites, .formaction#tunnelconfigsave, .formaction#homesearch, .formaction#sidebardefaults {
+     border: 1px solid #494;
+     padding: 5px;
+     background: #000;
+     margin-top: -2px;
+}
+
+.formaction#themeui {
+     border: 1px solid #494;
+     padding: 5px;
+     margin: 5px -8px -1px;
+}
+
+.formaction#homesearch {
+     margin-bottom: -2px !important;
+}
+
+tr#addnew, tr#addnew:hover {
      border-top: 1px solid #494;
+     background: #000800;
 }
 
-div.applabel:hover {
+/* /configui lang selection boxes + theme selection */
+
+div.themechoice {
      background: #000;
-     border-top: 1px solid #f60;
+     background: linear-gradient(to bottom, #010 0%, #000 100%);
+     width: 110px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     border: 1px solid #262;
+     float: left;
+     text-align: center;
+     padding: 0 4px;
+     margin: 4px;
+     border-radius: 2px;
 }
 
-div.applabel a, div.applabel a:hover {
-     text-decoration: none !important;
-     outline: none;
+/* fixes weird height variation */
+/*
+@-moz-document url-prefix() {
+div.themechoice {
+     min-height: 75px;
+}
 }
+*/
 
+.themechoice:hover {
+     border: 1px solid #f60;
+     background: #000;
+}
 
-/* end home page */
+.themechoice object {
+     opacity: 0.6;
+}
 
-iframe.iframed {
-     margin: 10px 0 0;
+.themechoice .optbox:checked + object {
+     filter: none;
+     opacity: 1;
 }
 
-/* Fixes for when app is not started and console error loads inside iframe */
+.themechoice:hover object {
+     filter: drop-shadow(0 0 1px #f60);
+     transition: ease filter 0.3s 0s;
+}
 
-body.iframed {
-     background: transparent url('images/transparent.gif') !important;
+.themechoice:hover .themelabel {
+     border-top: 1px solid #f60 !important;
+     background: #000;
 }
 
-.iframed div.routersummaryouter {
-     display: none !important;
+.themechoice:active .themelabel {
+     background: #f60 !important;
+     color: #ee9 !important;
+     box-shadow: inset 0 0 0 1px #000 !important;
 }
 
-.iframed h1 {
-     margin: 0 5px 0 5px !important;
+.themechoice .optbox:hover + object ~ .themelabel {
+     color: #f60;
 }
 
-.iframed div.sorry {
-     margin: -1px 5px 10px 5px !important;
+.themechoice .optbox:checked + object ~ .themelabel {
+     background: #030 !important;
+     color: #ee9;
+     font-weight: bold;
+     box-shadow: none !important
 }
 
-/* end iframed console fixes */
+.themechoice .optbox:focus + object ~ .themelabel {
+     color: #f60 !important;
+     box-shadow: inset 0 0 10px 3px #000 !important;
+}
+
+.themechoice .optbox:active + object ~ .themelabel {
+     color: #ee9 !important;
+     box-shadow: inset 0 0 0 1px #000 !important;
+}
+
+.themechoice .optbox {
+     min-width: 114px !important;
+     min-height: 80px !important;
+     outline: 1px !important; /* placement guide */
+     opacity: 0; /* hide the radio icon so we can use thumbnail img instead */
+     margin-left: -33px;
+     z-index: 999;
+     position: absolute;
+}
+
+.themechoice object {
+     padding: 3px 0;
+}
+
+.themechoice img {
+     padding: 3px 0;
+}
+
+@-moz-document url-prefix() { /* fixes weird height variation */
+.themechoice img {
+     padding-bottom: 0 !important;
+}
+}
+
+#themeoptions {
+     clear: both;
+     border-top: 1px solid #494;
+     margin: 0 -7px 5px;
+     position: relative;
+     top: 8px;
+     padding: 5px 10px 8px 5px;
+}
+
+#themeoptions br {
+     display: none;
+}
+
+#themeoptions label {
+     white-space: nowrap;
+     margin: 4px 10px 4px 0 !important;
+     display: inline-block;
+}
+
+p#helptranslate {
+     position: relative;
+     top: 8px;
+     margin: 0 -7px;
+     padding: 15px 10px 15px 50px !important;
+     text-align: left !important;
+     border-top: 1px solid #494;
+     border-bottom: 1px solid #494;
+     background: url(/themes/console/images/info/notice.png) left 14px center no-repeat, #000;
+     background-size: 28px 28px;
+}
+
+#themeoptions input {
+     margin-left: 5px;
+}
+
+#themeoptions input[type="checkbox"] {
+     min-height: 16px;
+}
+
+div.themelabel {
+     border-top: 1px solid #262 !important;
+     margin-left: -4px;
+     margin-right: -4px;
+     padding: 4px 2px 5px;
+     background: #001000;
+     background: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000);
+     color: #bb7;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+}
+
+h3#themeheading, h3#langheading, h3#passwordheading {
+     border-radius: 0;
+     border: 1px solid #494;
+     padding: 6px 10px;
+     font-size: 10.5pt;
+     word-spacing: 0.1em;
+     letter-spacing: 0.08em;
+     margin-bottom: 0;
+     background: #000;
+     background: linear-gradient(to right, #000 0%, #001000 70%, #001300 90%);
+}
+
+div#themesettings {
+     clear: both;
+     border: 1px solid #494;
+     padding: 8px 7px 0;
+     margin: -1px 0;
+     background: #000;
+}
+
+#themesettings hr {
+     display: none;
+}
+
+td#themeselect {
+     clear: both;
+     border: 1px solid #494;
+     padding: 8px 7px 0;
+     margin: -1px 0;
+}
+
+.langselect { /* containing box for lang selection */
+     background: #000;
+     background: linear-gradient(to bottom, #010 0%, #000 80%);
+     width: 110px;
+     float: left;
+     margin: 4px;
+     text-align: center;
+     border: 1px solid #262;
+     padding: 8px 4px 0;
+     border-radius: 2px;
+}
+
+.langselect:hover {
+     border: 1px solid #f60;
+     background: #000;
+}
+
+/* can we use the flags as the radio icon? */
+
+.langselect img {
+     border: 1px solid #002000;
+     margin-bottom: 2px !important;
+     margin-top: -2px !important;
+}
+
+.langselect .optbox {
+     opacity: 0;
+     outline: 1px dotted !important;
+     min-height: 60px;
+     min-width: 111px !important;
+     margin: -5px 0 -30px -2px;
+     vertical-align: text-bottom;
+     text-align: center;
+     z-index: 999;
+}
+
+.langselect img {
+     border: 1px solid #002000;
+     margin-bottom: 0;
+     margin-left: -65px;
+     margin-top: 7px !important;
+     position: absolute;
+}
+
+.langselect img[src="/flags.jsp?c=a1"] {
+     width: 16px !important;
+     height: 11px !important;
+}
+
+.langselect input:hover + img {
+     box-shadow: 0 0 2px 1px #f60;
+     transition: ease box-shadow 0.3s 0s;
+}
+
+.langselect input:hover + img + div.ui_lang {
+     color: #f60;
+     border-top: 1px solid #f60;
+     background: #000;
+}
+
+.langselect input:focus + img + div.ui_lang {
+     color: #f60 !important;
+     box-shadow: inset 0 0 10px 3px #000 !important;
+}
+
+.langselect input:active + img + div.ui_lang {
+     color: #ee9 !important;
+     box-shadow: inset 0 0 0 1px #000 !important;
+}
+
+.langselect:hover .ui_lang {
+     border-top: 1px solid #f60;
+     background: #000;
+     color: #f60;
+}
+
+.langselect:active .ui_lang {
+     background: #f60 !important;
+     color: #ee9 !important;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] {
+     width: 19px !important;
+     height: 13px !important;
+     border: 1px solid #f60;
+     box-shadow: 0 0 1px #f30;
+     margin-top: 6px !important;
+     margin-left: -67px;
+}
+
+.langselect input[name="lang"]:checked + img + div.ui_lang {
+     background: #030 !important;
+     color: #ee9;
+     font-weight: bold;
+}
+
+/* end flag as radio icons */
+
+div.ui_lang { /* lang text label */
+     text-align: center;
+     background: #001000;
+     background: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000);
+     padding: 3px 2px 4px;
+     overflow: hidden;;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     margin: 10px -4px 0 !important;
+     border-top: 1px solid #262;
+     border-radius: 0 0 2px 2px;
+     text-transform: capitalize;
+     color: #bb7;
+}
+
+p#helptranslate {
+     clear: both;
+     padding: 6px 10px 10px;
+     text-align: right;
+}
+
+h3#langheading {
+     margin-bottom: 0;
+}
+
+div#langsettings {
+     border: 1px solid #494;
+     padding: 8px 7px 12px;
+     margin-top: -1px;
+     margin-bottom: -12px;
+     background: #000;
+}
+
+#langsettings hr {
+     display: none;
+}
+
+.formaction#langui {
+     margin: 7px -8px -15px;
+     padding: 5px;
+     border: 1px solid #494;
+     background: #000;
+}
+
+/* console password layout */
+
+h3#passwordheading {
+     margin-top: 25px;
+     margin-bottom: -2px;
+}
+
+table#consolepass th:nth-child(2) {
+     text-align: left;
+}
+
+table#consolepass td:first-child {
+     width: 100px;
+     white-space:nowrap;
+}
+
+table#consolepass th {
+     padding: 5px;
+}
+
+table#consolepass td {
+     padding: 2px 3px;
+}
+
+table#consolepass td {
+     border-bottom: 1px solid #494;
+     padding: 5px 10px;
+}
+
+table#consolepass input {
+     margin: 5px;
+}
+
+table#consolepass td#pw_adduser {
+     padding: 5px 10px;
+     background: #000;
+}
+
+td#pw_adduser input {
+     margin: 5px 20px 5px 5px !important;
+}
+
+table#consolepass input[name="name"] {
+     margin-right: 20px;
+}
+
+table#consolepass input[type="password"] {
+     width: 200px;
+}
+
+.formaction#consolepass {
+     margin-bottom: -2px !important;
+     margin-top: -2px;
+     border: 1px solid #494;
+     padding: 5px;
+     background: #000;
+}
+
+#consolepass input[name="name"], #externali2cp input[name="user"] {
+     background: #000 url(/themes/console/images/buttons/user.png) 5px center no-repeat;
+     background: url(/themes/console/images/buttons/user.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%);
+     padding: 4px 5px 4px 26px !important;
+     background-size: 16px 16px, 100% 100% !important;
+}
+
+#consolepass input[name="name"]:focus, #externali2cp input[name="user"]:focus {
+     background: #000 url(/themes/console/images/buttons/user.png) 5px center no-repeat !important;
+}
+
+#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"] {
+     background: #000 url(/themes/console/images/buttons/password.png) 3px center no-repeat;
+     background: url(/themes/console/images/buttons/password.png) 3px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%);
+     padding: 4px 5px 4px 22px !important;
+     background-size: 16px 16px, 100% 100% !important;
+}
+#consolepass input[name="nofilter_pw"]:focus, #externali2cp input[name="nofilter_pw"]:focus {
+     background: #000 url(/themes/console/images/buttons/password.png) 3px center no-repeat !important;
+}
+
+/* end /configui mods */
+
+form[action="/createreseed"] > h3 {
+     border-radius: 0;
+     border: 1px solid #494;
+     padding: 10px;
+     font-size: 10.5pt;
+     word-spacing: 0.1em;
+     letter-spacing: 0.08em;
+     background: linear-gradient(to right, #000 0%, #001000 70%, #001300 90%);
+     margin-bottom: -13px;
+}
+
+table#configclient {
+     margin-top: -11px !important;
+}
+
+/* configfamily */
+
+table#newfamily, #leavefamily {
+     margin-bottom: 10px !important;
+}
+
+#exportfamily tr:nth-child(2) td:first-child {
+     background: #000 url(/themes/console/images/info/export_key.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#leavefamily {
+     margin-top: 14px !important;
+}
+
+#leavefamily tr:last-child td:first-child {
+     background: #000 url(/themes/console/images/info/leave_family.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+/* configreseed */
+
+table#reseedconfig input[type="text"], table#reseedconfig input[type="password"] {
+     width: 170px;
+}
+
+#reseedconfig input, #reseedconfig textarea {
+     margin-left: 0;
+}
+
+#reseednow {
+     margin-top: -16px !important;
+}
+
+.formaction#resetreseed {
+     margin: -4px -5px 0 0;
+}
+
+table#reseedconfig textarea, #i2pupdates textarea {
+     width: 100%;
+     resize: none;
+}
+
+#reseedconfig tr:nth-child(2) br {
+     display: none;
+}
+
+#reseedconfig tr:nth-child(2) label {
+     white-space: nowrap;
+     margin-right: 10px;
+}
+
+#reseedconfig td:first-child {
+     line-height: 120%;
+}
+
+.formaction#shutdown, .formaction#restart, .formaction#systray, .formaction#runonstart, .formaction#dumpthreads, .formaction#browserstart {
+     border: 1px solid #494;
+     padding: 5px;
+     background: #000;
+     margin-top: -11px;
+     margin-bottom: 8px;
+}
+
+ul#banlist {
+     margin-top: -2px;
+}
+
+/* /confignet */
+
+h3#iptransport {
+     margin-bottom: 11px;
+}
+
+p#defaultswork {
+     margin-bottom: 11px !important;
+}
+
+p#upnpconfig, p#ipchange, p#ipv6config, p#tcpconfig, p#confignotes, p#defaultswork {
+     padding: 10px;
+     border: 1px solid #494;
+     margin-bottom: -13px;
+     margin-top: -12px;
+}
+
+p#defaultswork {
+     padding: 15px 10px 15px 45px !important;
+}
+
+p#confignotes {
+     margin-bottom: -21px;
+     padding: 15px 15px 15px 50px;
+     background: url(images/infohelp.png) 12px center no-repeat;
+}
+
+p#ipconfig, p#ipv4config, p#udpconfig, p#externaltcp {
+     border: 1px solid #494;
+     border-bottom: none;
+     padding: 10px;
+     background: #001000;
+}
+
+table#bandwidthconfig {
+     margin-bottom: 1px;
+}
+
+table#bandwidthconfig td:first-child {
+     width: 200px;
+     white-space: nowrap;
+}
+
+table#bandwidthconfig {
+     padding: 5px 10px !important;
+}
+
+table#bandwidthconfig input, table#bandwidthconfig select {
+     margin-right: 3px;
+}
+
+/* confignet tidyup */
+
+#netconfig .optbox {
+     margin: 10px 6px 2px !important;
+     display: inline-block !important;
+     vertical-align: sub !important;
+}
+
+#netconfig .optbox:first-child {
+     margin-top: 6px !important;
+     margin-bottom: 6px !important;
+}
+
+#netconfig .optbox:last-child, #netconfig .optbox[value="only"], #netconfig .optbox[name="disableUDP"], #netconfig .optbox[value="disabled"] {
+     margin-bottom: 6px !important;
+}
+
+#netconfig input[type="text"] + br + .optbox, #netconfig .optbox[name="ntcpAutoPort"] {
+     margin-top: 3px !important;
+}
+
+#netconfig input[name*="ost"] {
+     width: 250px !important;
+}
+
+/* end confignet tidyup */
+/* end /confignet */
+
+/* /events */
+
+div.eventspanel {
+     margin-top: -10px;
+}
+
+form[action="events"] {
+     border: 1px solid #494;
+     margin-top: -11px;
+     padding: 10px 20px 10px;
+     margin-bottom: 20px;
+}
+
+form[action="events"] > br {
+     display: none;
+}
+
+form[action="events"] > .formaction {
+     margin-bottom: -11px !important;
+     margin-right: -21px;
+     margin-left: -21px;
+}
+
+.eventspanel th {
+     text-align: left;
+     padding-left: 10px;
+     font-size: 10pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+.eventspanel table {
+     font-size: 9pt;
+}
+
+.eventspanel table tr:hover {
+     background: #002000;
+}
+
+.eventspanel table td {
+     padding: 5px 10px;
+}
+
+table#addkeyring td:first-child {
+     width: 170px;
+     white-space: nowrap;
+     font-weight: bold;
+     padding-right: 0;
+}
+
+table#addkeyring tr:last-child {
+     border-top: 1px solid #494;
+     background: #000;
+}
+
+table#addkeyring tr:last-child td {
+     padding-right: 6px;
+}
+
+#addkeyring textarea, #addkeyring input[type="text"] {
+     width: 95%;
+     width: calc(100% - 15px);
+}
+
+p#keyringhelp, p#webappconfig, p#availableplugins, p#pluginconfigtext, p#clientdefaultshelp, p#bwshare, p#editclients, p#upnpstatus, p#gatherstats {
+     background: #000 url(images/infohelp.png) 12px center no-repeat;
+     border: 1px solid #494;
+     padding: 15px 15px 15px 50px;
+}
+
+p#gatherstats {
+     margin-bottom: 28px !important;
+}
+
+#webappconfig th:first-child {
+     text-align: right;
+}
+
+p#availableplugins {
+     margin: 12px 0 -1px;
+}
+
+p#webappconfig + p, p#pluginconfigtext {
+     margin-bottom: -1px;
+}
+
+#pluginconfig th:first-child, #pluginconfig td:first-child {
+     text-align: right;
+     width: 100px;
+     white-space: nowrap;
+     padding-right: 50px;
+}
+
+#pluginconfig td:last-child table {
+     padding: 5px;
+     margin: 5px 15px 5px 5px !important;
+     width: 99%;
+     width: calc(100% - 8px);
+}
+
+#pluginconfig table {
+     border: 1px solid #151;
+     filter: drop-shadow(0 0 3px #000);
+}
+
+#pluginconfig table td:first-child {
+     width: 70px !important;
+     white-space: nowrap;
+     padding-right: 5px;
+}
+
+/* /advanced */
+
+input[name="ff"] + br {
+     display: none;
+}
+
+input[name="ff"] + br + input[name="ff"] + br {
+     display: none;
+}
+
+.wideload > form > input[type="hidden"] + table  + p + hr + .formaction {
+     border-left: none;
+     border-right: none;
+}
+
+input[type="hidden"] + p {
+     border: 1px solid #494;
+     padding: 10px;
+     margin-bottom: -21px;
+     background: #000;
+}
+
+form[action="configclients"]:first-child > input[type="hidden"] + p {
+     border: 1px solid #494;
+     padding: 10px;
+     margin-top: -1px !important;
+     margin-bottom: -21px;
+     background: #000;
+}
+
+input[type="hidden"] + p + p {
+     border: 1px solid #494;
+     padding: 10px;
+     margin-top: 20px;
+     margin-bottom: -21px;
+     background: #001000;
+}
+
+h3#exploratorytunnels {
+     margin-top: 15px;
+}
+
+h3.tabletitle + .statusnotes, table.tunneldisplay {
+     margin-top: -1px;
+}
+
+.tunnels_client th:first-child, .tunnels_client td:first-child {
+     width: 4%;
+}
+
+.tunnels_client th:nth-child(2), .tunnels_client th:nth-child(3),
+.tunnels_client td:nth-child(2), .tunnels_client td:nth-child(3) {
+     width: 7%;
+     white-space: nowrap;
+}
+
+.statusnotes + .statusnotes {
+     margin-top: -6px;
+}
+
+.statusnotes:last-child {
+     margin-bottom: 10px;
+}
+
+form > table {
+     font-size: 9pt;
+}
+/* configtunnels */
+
+table#tunnelconfig td:first-child {
+     font-weight: bold;
+}
+
+.formaction#tunnelconfigsave {
+     margin-top: -32px !important;
+}
+
+/* end /configtunnels */
+
+/* /configupdate */
+
+table#i2pupdates {
+     margin-top: 11px;
+     margin-bottom: 10px;
+}
+
+table#i2pupdates td:first-child {
+     width: 15%;
+     white-space: nowrap;
+     padding-left: 10px;
+     line-height: 120%;
+}
+
+table#i2pupdates td {
+     padding: 2px 3px;
+}
+
+#i2pupdates .optbox {
+     margin-left: 10px;
+}
+
+table#i2pupdates input[name*="URL"], table#i2pupdates textarea {
+     width: 98%;
+     width: calc(100% - 17px);
+}
+
+table#i2pupdates tr:last-child td {
+     padding-right: 6px;
+     background: #000 !important;
+}
+
+/* /configlogging */
+
+input[name="logfilename"], input[name="logformat"], input[name="logdateformat"], input[name="logfilesize"], select[name="defaultloglevel"], select[name="newloglevel"] {
+     width: 125px;
+}
+
+table#loggingoptions td {
+     padding: 6px;
+}
+
+table#loggingoptions td:first-child {
+     padding-right: 3px;
+}
+
+#loggingoptions td:nth-child(2) {
+     width: 170px;
+}
+
+#loggingoptions tr:nth-last-child(2) {
+     white-space: nowrap;
+}
+
+#loggingoptions input[type="text"], #loggingoptions select, #loggingoptions textarea {
+     min-width: 170px !important;
+     margin: 3px;
+}
+
+#loggingoptions textarea {
+     width: 99%;
+     width: calc(100% - 8px);
+     margin-bottom: 8px;
+     resize: none;
+}
+
+#loggingoptions select[name="newlogclass"] {
+     width: calc(100% - 185px);
+}
+
+/* configsidebar */
+
+
+#config_summarybar .configtable td:not(.optionsave) {
+     padding-left: 45px;
+     background: url(/themes/console/images/info/interval.png) 12px center no-repeat #000;
+     background-size: 28px 28px;
+}
+
+table#sidebarconf {
+     margin-top: -1px;
+}
+
+#sidebarconf tr:hover, .homelinkedit tr:hover {
+     background: #002000;
+}
+
+#sidebarconf + .formaction {
+     margin-bottom: -3px !important;
+}
+
+#sidebarconf button {
+     margin: 5px 3px !important;
+     padding: 5px 4px !important;
+     min-width: 0;
+     display: inline-block !important;
+}
+
+#sidebarconf button img {
+     width: 12px;
+     height: auto;
+}
+
+#sidebarconf th:nth-child(1) {
+     text-align: center;
+}
+
+#sidebarconf th:nth-child(2) {
+     text-align: left;
+}
+
+#sidebarconf td:first-child {
+     width: 60px;
+}
+
+#sidebarconf td:nth-child(3), #sidebarconf td:nth-child(4) {
+     width: 75px;
+     padding: 0;
+     white-space: nowrap;
+}
+
+#sidebarconf td:nth-child(3) {
+     padding-left: 0;
+}
+
+#sidebarconf td:nth-child(4) {
+     text-align: left;
+     padding-right: 0;
+}
+
+#sidebarconf tr:last-child {
+     background: #000;
+     border-top: 1px solid #494;
+}
+
+#sidebarconf tr:last-child td:last-child {
+     padding: 0;
+     text-align: left;
+}
+
+#sidebarconf select {
+     margin-left: 0;
+     width: 100%;
+}
+
+#sidebarconf th:nth-child(1), .homelinkedit th:first-child, #consolepass th:first-child {
+     text-align: center;
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
+     text-indent: -99999px;
+}
+
+/* end configsidebar */
+
+/* /configservice */
+
+h3#shutdownrouter, h3#restartrouter, h3#servicedebug, h3#browseronstart, h3#rononstartup, h3#systray {
+     margin-bottom: -6px;
+}
+
+h3#shutdownrouter + p, h3#restartrouter + p, h3#servicedebug + p, h3#browseronstart + p, h3#runonstartup + p, h3#systray + p { /* info paragraphs */
+     border-bottom: none;
+     margin: 5px 0 -20px !important;
+}
+
+h3#servicedebug + p + p {
+     padding: 10px;
+     border: 1px solid #494;
+     border-bottom: none;
+     margin-bottom: -21px;
+     background: #001000;
+     margin-top: 20px;
+}
+
+h3#servicedebug a, h3#graphinfo a {
+     float: right;
+     font-size: 9pt;
+     text-transform: none;
+     letter-spacing: normal;
+}
+
+.main#tunnels h3 {
+     padding-right: 5px;
+}
+
+.main#tunnels h3 a {
+     float: right;
+}
+
+.main#tunnels h3 a:not(old), #criticallogs + h3.tabletitle a:not(old) {
+     font-size: 0;
+}
+
+.main#tunnels h3 a[href^="/configtunnels#"]::after, #criticallogs + h3.tabletitle a::after {
+     content: url(/themes/console/images/buttons/configure.png);
+     float: right;
+     padding: 0;
+
+}
+
+.main#tunnels h3 a[href^="/configtunnels#"]:hover, h3.tabletitle a:hover::after,
+.main#tunnels h3 a[href^="/configtunnels#"]:focus, h3.tabletitle a:focus::after {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+/* configclients */
+
+table#clientconfig th:first-child {
+     text-align: right;
+     padding-right: 5px;
+}
+
+table#clientconfig th:last-child {
+     text-align: left;
+     padding-left: 5px;
+}
+
+.formaction#clientsconfig, .formaction#webappconfigactions, .formaction#pluginconfigactions {
+     border: 1px solid #494;
+     padding: 5px;
+     background: #000;
+     margin-bottom: -1px;
+}
+
+.formaction#webappconfigactions, .formaction#pluginconfigactions {
+     margin-top: -2px;
+}
+
+#webappconfig th:last-child {
+     text-align: left;
+}
+
+table#externali2cp {
+     margin-bottom: 4px !important;
+}
+
+.infohelp#clientconf {
+     margin-bottom: -2px;
+}
+
+/* end /configclients */
+
+/* /help */
+
+.main#help h3 {
+    padding: 7px 10px;
+    font-size: 11pt;
+}
+
+#volunteer, #legal, #sidebarhelp, #volunteer, #reachabilityhelp, #configurationhelp, #advancedsettings, #faq {
+     border: 1px solid #494;
+     padding: 0 20px;
+     margin: 10px 0 15px;
+     background: #000;
+}
+
+#volunteer {
+     background: #000 url(images/scarface.jpg) right bottom no-repeat;
+     background-size: auto 75%;
+}
+
+#advancedsettings {
+     padding: 0 15px 10px;
+}
+
+.main#help h2 {
+     font-size: 12pt;
+}
+
+#legal h2, #sidebarhelp h2, #volunteer h2, #reachabilityhelp h2, #configurationhelp h2, #advancedsettings h2, #faq h2 {
+     padding: 10px;
+     text-transform: uppercase;
+     font-size: 11pt;
+     text-align: left;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-radius: 0;
+     margin: -1px -21px 10px !important;
+     background: linear-gradient(to right, #000 0%, #001000 70%, #001300 90%);
+}
+
+#advancedsettings h2 {
+          margin: -1px -16px 15px !important;
+}
+
+table#configinfo {
+     border: none !important;
+     margin: 0 auto 0;
+     width: 99%;
+     width: calc(100% - 20px);
+}
+
+#configinfo th {
+     text-align: left;
+     padding: 5px 0;
+     color: #dd0;
+     letter-spacing: 0.05em;
+     background: #000 !important;
+     border: none;
+     border-bottom: 1px solid #131 !important;
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+
+#configinfo td {
+     padding: 5px 15px;
+     line-height: 140%;
+     background: #000;
+     text-align: justify;
+}
+
+.main#help h2 a:hover {
+     color: #ee9 !important;
+}
+
+#sidebarhelp h3, #faq h3 {
+     padding: 10px;
+     text-transform: uppercase;
+     font-size: 10.5pt;
+     text-align: left;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-radius: 0;
+     margin: 0 -21px 10px !important;
+     background: linear-gradient(to right, #000 0%, #001000 70%, #001300 90%);
+     border: 1px solid #494;
+}
+
+#changelog h2 {
+     padding: 10px;
+     text-transform: uppercase;
+     font-size: 11pt;
+     text-align: left;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-radius: 0;
+     margin: 0 0 -11px !important;
+}
+
+#changelog pre {
+     padding: 10px 10px 10px 20px;
+     max-height: 600px;
+     overflow-y: scroll;
+     width: calc(100% - 32px);
+     border-left: 1px solid #494;
+     border-right: 1px solid #494;
+     margin-top: 11px;
+     background: #000;
+}
+
+p#fullhistory {
+     text-align: right;
+     margin-top: -12px;
+     margin-bottom: 11px;
+     border: 1px solid #494;
+     padding: 6px 10px;
+     background: #000;
+     position: relative;
+     z-index: 999;
+}
+
+ul#upnphelp li:last-child, #legal ul li:last-child {
+     padding-bottom: 0;
+}
+
+.main#help td.infohelp, .main#help td.infowarn {
+     background-size: 24px 24px !important;
+     padding-left: 46px !important;
+}
+
+.main#help #configinfo .infowarn {
+     border: none;
+     border-bottom: 1px solid #000;
+     box-shadow: none;
+     background-size: 20px 20px !important;
+     padding: 7px 10px 7px 36px !important;
+}
+
+/* mini faq */
+
+#faq h3 {
+     padding-left: 35px !important;
+     background: url(/themes/console/images/info/question.png) 10px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+     background-size: 18px 18px, 100% 100% !important;
+     text-transform: none;
+     font-size: 10.5pt !important;
+     letter-spacing: 0;
+     word-spacing: 0;
+}
+
+#faq p.infohelp {
+     margin: -1px -11px 9px;
+}
+
+#portfaq {
+     margin: 9px -10px 10px;
+     width: auto;
+}
+
+#portfaq td, #portfaq th {
+     padding-top: 10px !important;
+     padding-bottom: 10px !important;
+}
+
+#portfaq th:first-child, #portfaq td:first-child {
+     font-weight: bold;
+     text-align: right;
+}
+
+#portfaq .infohelp {
+     padding-top: 15px !important;
+     padding-bottom: 15px !important;
+}
+
+#portfaq th {
+     text-align: left;
+     padding: 8px 5px !important;
+}
+
+#portfaq th[colspan="3"] {
+     text-align: left;
+     font-size: 10.5pt !important;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     padding: 8px 10px !important;
+}
+
+#portfaq td[colspan="3"] {
+     font-weight: normal;
+}
+
+#portfaq td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#portfaq td:first-child {
+     padding-left: 10px;
+}
+
+#portfaq td:last-child, #portfaq td[colspan="3"] {
+     text-align: justify;
+     padding-right: 10px;
+}
+
+#faq ul {
+     margin-bottom: 15px;
+}
+
+#faq code {
+     user-select: all;
+     -moz-user-select: all;
+     -webkit-user-select: all;
+}
+
+#faq li code {
+     margin-left: 10px;
+}
+
+/* end mini faq */
+/* end help */
+
+/* netdb (main section) */
+
+table#netdboverview {
+     margin-bottom: 10px;
+}
+
+#netdboverview td {
+     padding: 0;
+}
+
+#netdbversions, #netdbtransports, #netdbcountrylist {
+     border: 1px solid #131 !important;
+     margin-bottom: 0;
+}
+
+#netdbcountrylist img {
+     margin-right: 5px;
+     text-align: right;
+}
+
+#netdbtransports {
+     border-left: 1px solid transparent !important;
+     border-right: 1px solid transparent !important;
+}
+
+#netdbtransports th, #netdbtransports td {
+     padding-left: 10px !important;
+     padding-right: 10px !important;
+}
+
+#netdbversions th, #netdbtransports th, #netdbcountrylist th {
+     border-top: 1px solid transparent !important;
+     padding: 3px 5px;
+     line-height: 150%;
+}
+
+#netdbversions td, #netdbtransports td, #netdbcountrylist td {
+     padding: 5px;
+}
+
+table[cellspacing="30"] > tbody > tr > th[colspan="3"] { /* netdb header */
+     padding: 10px;
+     text-transform: uppercase;
+     font-size: 11pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+table[cellspacing="30"] > tbody > tr > td {
+     padding: 8px;
+}
+
+table[cellspacing="30"] > tbody > tr > td > table > tbody > tr > th:first-child {
+     text-align: left;
+     padding: 5px;
+}
+
+table[cellspacing="30"] > tbody > tr > td:first-child > table > tbody > tr > th:first-child {
+     text-align: center;
+}
+
+/* /netdb - Sybil */
+
+th > img[src^="/imagegen"] { /* scale down header images */
+     height: 24px;
+     width: 24px;
+     margin: -1px;
+     border-left: 1px solid #494;
+}
+
+/* Advanced lookup */
+
+#netdblookup {
+     margin-bottom: -4px;
+}
+
+#netdblookup th {
+     text-align: left;
+     font-size: 11pt;
+     letter-spacing: 0.08em;
+     padding: 10px;
+     text-transform: uppercase;
+}
+
+#netdblookup td:first-child {
+     text-align: right;
+     width: 100px;
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+#netdblookup td:nth-child(2) {
+     width: 100px;
+     padding-left: 0;
+}
+
+.subheading {
+     text-align: left !important;
+     background: #000;
+     padding: 10px;
+     border: 1px solid #494;
+}
+
+.subheading b {
+     font-size: 10pt !important;
+}
+
+#netdblookup .optbox {
+     margin: 10px ;
+}
+
+#netdblookup .optionsave {
+     padding: 10px !important;
+}
+
+#netdb .tabletitle {
+     margin-bottom: -2px !important;
+}
+
+.sybil_distance th {
+     text-align: left;
+     padding: 5px;
+}
+
+.sybil_distance th:last-child, .sybil_distance td:last-child {
+     text-align: right;
+}
+
+.sybil_distance tr:nth-child(n+2):hover {
+     background: #000;
+}
+
+.sybil_distance:last-child {
+     margin-bottom: 8px;
+}
+
+/* end netdb */
+
+/* logs */
+
+#logs pre, #logs li {
+     font-weight: bold;
+}
+
+#criticallogs ul { /* tidy router logs ul */
+     border: 1px solid #494;
+     margin: -6px -11px !important;
+}
+
+#criticallogs ul:empty {
+     display: none;
+}
+
+table#enviro, table#criticallogs, table#routerlogs, table#eventlogs, table#wrapperlogs {
+     margin-top: -11px;
+}
+
+table#bugreports {
+     margin-top: 15px;
+}
+
+table#bugreports td {
+     background: url(images/infohelp.png) 12px center no-repeat !important;
+     padding: 15px 10px 15px 50px;
+}
+
+table#enviro td {
+     font-weight: normal !important;
+     padding: 5px 10px;
+}
+
+table#enviro td:first-child {
+     width: 100px;
+     text-align: right;
+     padding-right: 0;
+     white-space: nowrap;
+}
+
+table#criticallogs td , table#routerlogs td, table#eventlogs td, table#wrapperlogs td {
+     font-weight: normal !important;
+     padding: 5px 10px;
+     border-top: 1px solid #494;
+}
+
+table#criticallogs tr:first-child {
+     display: none;
+}
+
+table[id$="logs"] tr:nth-child(odd){
+     background: #010;
+}
+
+table[id$="logs"] tr:nth-child(even){
+     background: #000;
+}
+
+table[id$="logs"] ul {
+     margin: -5px 12px -5px -18px !important;
+}
+
+table#wrapperlogs {
+     width: 100%;
+     table-layout: fixed;
+     margin-bottom: 10px;
+}
+
+#wrapperlogs tr:last-child td {
+     padding: 0 !important;
+}
+
+#wrapperlogs pre {
+     margin-bottom: 0 !important;
+     white-space: pre-wrap;
+     width: 99%;
+     width: calc(100% - 5px);
+     resize: none;
+     max-height: 600px;
+     padding: 0 0 0 5px !important;
+}
+
+.logtable ul li {
+     list-style: none !important;
+     margin-left: 15px;
+}
+
+#logs li {
+     list-style: none;
+     font: bold 8pt "Droid Sans Mono",  "Lucida Console", "DejaVu Sans Mono", monospace;
+     line-height: 130%;
+     text-align: left;
+     display: inline-block;
+     width: 100%;
+     word-break: break-all;
+}
+
+#criticallogs li {
+     width: auto;
+     width: calc(100% - 15px);
+     margin: 2px -10px 0 7px;
+}
+
+#logs li::after {
+     content: "";
+     display: block;
+     border-top: 1px dotted #030;
+     width: 100%;
+     margin: 5px 0 -3px;
+}
+
+#logs li:last-child::after {
+     border: none;
+     margin: 0;
+}
+
+#logs font[color^="#"]::before {
+     content: "";
+     display: inline-block;
+     width: 6px;
+     height: 6px;
+     margin-left: 0;
+     margin-right: 5px;
+     border-radius: 50%;
+     vertical-align: calc(1px);
+}
+
+font[color="#cc0000"] {
+     color: #c33 !important;
+}
+
+#logs li font[color="#cc0000"]::before {
+     background: #c33;
+}
+
+font[color="#006600"] {
+     color: #ee7 !important;
+}
+
+#logs li font[color="#006600"]::before {
+     background: #ee7;
+}
+
+font[color="#ff3300"] {
+     color: #990 !important;
+}
+
+#logs li font[color="#ff3300"]::before {
+     background: #990;
+}
+
+font[color="#ff00cc"] {
+     color: #880 !important;
+}
+
+#logs li font[color="#ff00cc"]::before {
+     background: #880;
+}
+
+font[color="#000099"] {
+     color: #660 !important;
+}
+
+#logs li font[color="#000099"]::before {
+     background: #660;
+}
+
+/* end logs */
+
+/* /profiles */
+
+#profilelist tr:hover, table#floodfills tr:hover {
+     background: #030;
+}
+
+#profilelist tr:hover td, table#floodfills tr:hover td {
+     color: #ee9;
+}
+
+#profilelist th, #profilelist td {
+     text-align: right;
+     padding-left: 5px;
+}
+
+#profilelist td {
+     color: #bb7;
+}
+
+#profilelist td:nth-child(2), #profilelist th:nth-child(2) {
+     text-align: left;
+}
+
+#profilelist td:first-child, #profilelist th:first-child {
+     width: 40px;
+}
+
+#profilelist td:first-child {
+     text-align: right !important;
+     padding-left: 3px !important;
+}
+
+#profilelist td:first-child, #profilelist th:first-child, #profilelist td:nth-last-child(2), #profilelist th:nth-last-child(2) {
+     white-space: nowrap;
+     text-align: center;
+}
+
+#profilelist th:last-child {
+     padding-right: 10px;
+}
+
+#profilelist td:last-child {
+     text-align: right;
+     width: 60px;
+     white-space: nowrap;
+}
+
+#profilelist td[colspan="8"] { /* profile class separator */
+     background: #040;
+     padding: 1px;
+     border: 1px inset #000;
+}
+
+a[href^="configpeer?peer"] {
+     font-size: 0;
+     filter: drop-shadow(0 0 1px #777);
+}
+
+a[href^="configpeer?peer"]::after {
+     content: url(/themes/console/images/buttons/edit.png);
+     vertical-align: bottom;
+     margin-left: 4px;
+}
+
+a[href^="configpeer?peer"]:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+table#profile_defs, table#thresholds {
+     margin-top: -1px;
+     margin-bottom: 10px;
+}
+
+table#profile_defs td, table#thresholds td {
+     padding: 5px;
+}
+
+#profile_defs td:first-child {
+     width: 5% !important;
+     white-space: nowrap;
+     text-align: right;
+}
+
+#profile_defs td:last-child {
+     white-space: normal;
+     line-height: 120%;
+}
+
+#thresholds th, #thresholds td {
+     text-align: center;
+}
+
+#capabilities_key td {
+     padding: 0 !important;
+}
+
+#capabilities_key table {
+     margin: 0 !important;
+     border: none;
+     border-top: 1px solid #373;
+     border-bottom: 1px solid #373;
+}
+
+#capabilities_key table td {
+     padding: 3px 5px !important;
+}
+
+#capabilities_key table td:nth-child(even) {
+     width: 16px;
+}
+
+#profile_defs b {
+     text-transform: capitalize;
+}
+
+#capabilities_key b {
+     text-transform: none !important;
+}
+
+table#profile_defs + hr {
+     display: none;
+}
+
+table#floodfills {
+     margin-bottom: 10px;
+}
+
+table#floodfills + hr {
+     display: none;
+}
+
+table#floodfills th {
+     text-align: center;
+     max-width: 55px;
+     white-space: normal;
+     padding: 3px 6px;
+}
+
+table#floodfills td  {
+     color: #bb7;
+     padding: 3px 4px !important;
+     vertical-align: middle;
+     text-align: right !important;
+     white-space: nowrap;
+}
+
+table#floodfills th:first-child, table#floodfills td:first-child  {
+     width: 52px;
+     white-space: nowrap;
+     padding: 3px 3px 3px 0 !important;
+}
+
+.wideload h2 {
+     border-radius: 0;
+}
+
+table#viewprofile {
+     margin-top: -14px;
+     margin-bottom: 10px;
+}
+
+table#viewprofile td {
+     padding: 10px 15px 0;
+}
+
+#viewprofile pre {
+     margin-bottom: 0;
+     white-space: pre-wrap;
+}
+
+h3#bannedpeers {
+     margin-top: 15px;
+}
+
+ul#banlist {
+     border: 1px solid #494;
+     background: #000;
+     padding: 10px 10px 10px 0;
+     margin: -1px 0 13px;
+     -moz-column-count: auto;
+     -moz-column-width: 300px;
+     -moz-column-gap: 10px;
+     -moz-column-rule: 1px dotted #494;
+     -webkit-column-count: auto;
+     -webkit-column-width: 300px;
+     -webkit-column-gap: 10px;
+     -webkit-column-rule: 1px dotted #494;
+     column-count: auto;
+     column-width: 300px;
+     column-gap: 10px;
+     column-rule: 1px dotted #494;
+}
+
+#banlist li {
+     list-style: none !important;
+     border-bottom: 1px dotted #494;
+     margin: 0 10px 3px;
+     padding-top: 3px;
+     min-width: 250px;
+     width: 88%;
+     padding-bottom: 5px;
+     break-inside: avoid;
+     page-break-inside: avoid;
+     -webkit-break-inside: avoid;
+     display: inline-block;
+}
+
+#banlist li:first-child, .joblog ol li:first-child {
+     margin-top: 0 !important;
+}
+
+ul#banlist li:last-child {
+     margin-bottom: 0;
+}
+
+ul#banlist + hr {
+     display: none;
+}
+
+#banlist img {
+     margin-bottom: -1px;
+}
+
+#banlist a[href^="configpeer?"] {
+     float: right;
+     margin-right: -20px;
+     margin-top: -8px;
+}
+
+/* /configpeers banlist */
+
+#bannedips {
+     margin-bottom: 10px;
+}
+
+#bannedips table {
+     margin-bottom: -1px !important;
+}
+
+#bannedips td {
+     vertical-align: top;
+     padding: 0;
+     width: 50%;
+}
+
+#bannedips table td {
+     text-align: center;
+     padding: 4px 2px;
+}
+
+#bannedips table tr:last-child {
+     border-bottom: 1px solid #494;
+}
+
+#permabanned, #banneduntilrestart {
+     margin-top: -1px !important;
+     border: none;
+}
+
+#permabanned td:first-child {
+     border-left: 1px solid #494;
+     text-align: right;
+     padding-right: 10px;
+     width: 49%;
+}
+
+#permabanned td:nth-child(2) {
+     width: 2%;
+}
+
+#permabanned td:last-child {
+     text-align: left;
+     padding-left: 10px;
+     width: 49%;
+}
+
+#banneduntilrestart td {
+     border-right: 1px solid #494;
+     text-align: center !important;
+}
+
+#ipv4, #ipv6, #permabanned tr:nth-child(2) {
+     background: #000 url(images/header.png) center center repeat-x;
+     background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
+     border-top: 1px solid #494;
+     border-bottom: 1px solid #494;
+}
+
+/* end /configpeers banlist */
+
+div.footnote {
+     text-align: right;
+     color: #494;
+     font-size: 7pt;
+     margin-bottom: 5px !important;
+}
+
+div.footnote hr {
+     margin: 10px 0 5px 0 !important;
+     color: #494;
+     background: #494;
+     height: 1px;
+     border: 0 solid #494;
+}
+
+.topness {
+     font-size: 7.5pt;
+     text-align: right;
+     margin-top: -10px !important;
+     margin-bottom: -5px;
+     margin-right: 5px;
+}
+
+#proof textarea {
+     line-height: 160%;
+     font-size: 9pt;
+}
+
+#proof textarea:focus {
+     outline: none;
+}
+
+/* begin home page */
+
+#homepanel {
+     margin: 0 -8px;
+}
+
+h4.app, h4.app2 {
+    background: url(images/header.png) center center repeat-x;
+    border: 1px solid #449944;
+    font-size: 10.5pt;
+    font-variant: small-caps;
+    margin: 11px -8px -9px;
+    padding: 7px 8px 7px;
+    text-transform: uppercase;
+    text-align: left;
+    letter-spacing: 0.08em;
+    word-spacing: 0.1em;
+    border-radius: 0;
+}
+
+h4.app2 {
+     clear: left;
+}
+
+div.ag2 {
+     margin: 0 0 10px;
+     padding: 0;
+}
+
+div.app {
+     float: left;
+     padding: 2px 0 0 !important;
+     min-width: 70px;
+     border: 1px solid #494;
+     background: #000;
+     background: linear-gradient(to bottom, #010 0%, #000 100%);
+     border-radius: 2px;
+     margin: 2px 3px 5px;
+     text-align: center !important;
+     padding-top: 4px;
+     opacity: 0.9;
+     box-shadow: 0 1px 3px #000;
+}
+
+.app a:link, .app a:visited {
+     color: #494;
+     padding: 2px;
+     display: inline-block;
+}
+
+div.app:hover {
+    opacity: 1;
+    border: 1px solid #f60;
+    background: #000;
+    box-shadow: none;
+    color: #f60 !important;
+}
+
+div.app:active .applabel {
+     background: #f60 !important;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+div.app:active .applabel a {
+     color: #ee9 !important;
+}
+
+div.app a:link, div.app a:hover, div.app a:active {
+     text-decoration: none;
+     outline: none;
+}
+
+div.app:hover a:link, div.app:hover a:visited {
+    color: #f60;
+}
+
+div.app:last-child {
+     margin-bottom: 10px;
+}
+
+div.appgroup {
+     margin: 0 0 10px;
+     padding: 16px 0;
+     width: auto;
+}
+
+div.search {
+     margin: 0;
+     padding: 8px 8px 0 8px;
+     width: auto;
+}
+
+form[action="/search.jsp"] {
+     margin: 0;
+}
+
+table.search {
+     background: none;
+     width: 80%;
+     margin-left: auto;
+     margin-right: auto;
+     margin-top: -9px;
+}
+
+.search tr {
+     background: #000 url(images/header.png) center center repeat-x;
+     background: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
+}
+
+.search td {
+     padding: 4px;
+     text-align: center;
+}
+
+.search td:nth-child(2) {
+     width: 50px;
+     padding: 4px 0 4px 20px;
+}
+
+.search td:last-child {
+     text-align: left !important;
+     width: 50px;
+     padding-right: 10px;
+}
+
+input.search {
+     background: #000 url(/themes/console/images/buttons/search.png) 4px center no-repeat;
+     background: url(/themes/console/images/buttons/search.png) 4px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%);
+     padding: 4px 3px 4px 24px;
+     vertical-align: middle;
+     width: 100%;
+     box-shadow: inset 0 0 3px 3px #000;
+}
+
+input.search:focus {
+     background: #000 url(/themes/console/images/buttons/search.png) 4px center no-repeat !important;
+}
+
+.search select {
+     width: 90%;
+}
+
+button.search {
+     white-space: nowrap;
+}
+
+.appimg {
+     height: 35px;
+     padding: 5px 0 8px;
+}
+
+.app img {
+     height: 32px;
+     width: auto;
+     max-height: 32px;
+     max-width: 32px;
+     padding: 10px 52px 38px;
+     margin: -8px 0 1px;
+/*     filter: sepia(100%) hue-rotate(70deg); enable for green-tinted app icons */
+}
+
+div.app:hover.app img, a:focus .app img {
+     filter: drop-shadow(0 0 1px #f60) saturate(200%);
+     opacity: 1;
+     transition: filter ease 0.3s 0s;
+}
+
+.app table {
+     background: none;
+     border: 0;
+     margin: auto;
+     width: auto;
+}
+
+.app tr {
+     background: none;
+     border: 0;
+     margin: 0;
+}
+
+.app td {
+     background: none;
+     border: 0;
+     margin: 0;
+     padding: 3px 0 0;
+}
+
+.applabel {
+     font-size: 8pt;
+     margin: 2px 0 0;
+     padding: 4px 2px 6px;
+     text-align: center;
+     vertical-align: bottom;
+     line-height: 95%;
+     text-transform: lowercase;
+     border: none;
+     width: 120px;
+     min-width: 72px;
+     background: #001000;
+     background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000);
+     border-radius: 0 0 2px 2px;
+     border-top: 1px solid #494;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis; /* ellipsize overlong app labels */
+     color: #494;
+}
+
+.applabel:hover {
+     background: #000;
+     border-top: 1px solid #f60;
+     color: #f60;
+}
+
+.applabel a {
+     max-width: 116px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     padding: 3px 2px !important;
+     display: inline-block;
+}
+
+.applabel a, .applabel a:hover {
+     text-decoration: none !important;
+     outline: none;
+}
+
+div.app:hover .applabel {
+     border-top: 1px solid #f60 !important;
+     background: #000;
+     color: #f60;
+}
+
+/* end home page */
+
+iframe.iframed {
+     margin: 15px 0 0;
+}
+
+#susimailframe, #i2psnarkframe {
+     margin: 0;
+}
+
+#susidnsframe {
+     margin: 0 0 -3px;
+}
+
+#i2psnarkframe {
+     margin-bottom: -2px !important;
+     background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)), url(images/camotile2.png);
+     background-size: 3px 3px, 175px 175px;
+}
+
+#i2ptunnelframe {
+     margin: 0 0 -5px;
+}
+
+/* Fixes for when app is not started and console error loads inside iframe */
+
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+}
+
+.iframed div.routersummaryouter {
+     display: none !important;
+}
+
+.iframed h1 {
+     margin: 0 5px 0 5px !important;
+}
+
+.iframed div.sorry {
+     margin: -1px 5px 10px 5px !important;
+}
+
+/* end iframed console fixes */
+
+/* global overrides */
+
+h3[id*="job"] {
+     border: 1px solid #494;
+     padding: 6px;
+     margin: 12px 0 10px 0;
+     border-radius: 0;
+     text-transform: uppercase;
+     text-shadow: 0 0 2px #010;
+     letter-spacing: 0.08em;
+}
+
+/* netdb */
+
+span#distance {
+     color: #dd0 !important;
+}
+
+table.netdbentry th {
+     font-weight: normal;
+     text-align: left;
+     padding: 5px 6px;
+}
+
+table.netdbentry th:last-child {
+     text-align: right;
+     padding: 5px;
+     white-space: nowrap;
+     width: 50px;
+}
+
+table.netdbentry th:first-child  {
+     white-space: nowrap;
+}
+
+table.netdbentry td:first-child  {
+     width: 80px;
+}
+
+table.netdbentry td:nth-child(2) {
+     word-wrap: break-word;
+}
+
+.netdbentry img {
+     margin: 1px 0 0 0;
+}
+
+.netdbentry tr:last-child code {
+     color: #bb7;
+}
+
+table.netdbentry, table.leaseset {
+     width: 100% !important;
+     margin-bottom: 10px;
+}
+
+table.netdbentry td, table.leaseset td, table#leasesetdebug td, .sybil_routerinfo td {
+     color: #bb7 !important;
+}
+
+table.netdbentry td b, table.leaseset td b, table#leasesetdebug td b, .sybil_routerinfo td b {
+     color: #ee9 !important;
+}
+
+a.viewfullentry:not(old) {
+     font-size: 0;
+}
+
+a.viewfullentry::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     vertical-align: text-top;
+}
+
+a.viewfullentry:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+table#leasesetdebug th a:not(old), table#leasesetsummary th a:not(old) {
+     font-size: 0;
+}
+
+table#leasesetdebug th a::after, table#leasesetsummary th a::after {
+     content: url(/themes/console/images/buttons/floodfill.png);
+     vertical-align: text-top;
+     padding-right: 0;
+}
+
+table#leasesetdebug th a:hover, table#leasesetsummary th a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+.main#debug {
+     line-height: 140%;
+     padding-bottom: 0;
+}
+
+.main#debug table {
+     margin-top: -13px;
+}
+
+.main#debug th, .main#debug td {
+     text-align: left;
+     padding: 5px 10px;
+}
+
+.main#debug th:last-child {
+     text-align: right;
+}
+
+.main#debug td:last-child {
+     vertical-align: top;
+     text-align: right;
+}
+
+.main#debug li:last-child {
+     padding-bottom: 2px;
+}
+
+.main#debug h2 {
+     border-radius: 0;
+     padding: 5px 10px;
+     font-size: 11pt;
+}
+
+.main#debug h3 {
+     border-radius: 0;
+     padding: 3px 10px;
+     font-size: 10pt;
+}
+
+.main#debug h2 + hr {
+     display: none;
+}
+
+div.debugcontainer {
+     border: 1px solid #f00;
+}
+
+.main#certs {
+     padding-top: 3px;
+}
+
+.main#certs h3 {
+     margin-bottom: -16px !important;
+}
+
+.main#certs h4 {
+     padding: 5px;
+     margin: 15px 0 0;
+     border: 1px solid #494;
+     letter-spacing: 0.05em;
+     font-size: 10pt;
+     background: linear-gradient(to right, #000 0%, #020 100%);
+}
+
+.main#certs h3 + p {
+     margin-top: 15px;
+}
+
+.main#certs p {
+     margin-top: -1px;
+     padding: 10px;
+     border: 1px solid #494;
+     background: #000;
+}
+
+.main#certs p + p:empty + h4 {
+     margin-top: -13px !important;
+}
+
+.main#certs textarea {
+     margin: -1px 0 11px 0;
+     width: 100%;
+}
+
+.main#jardump {
+     overflow: auto !important;
+     padding: 0;
+/*     display: inline-table;*/
+     min-width: 650px !important;
+}
+
+.main#jardump table {
+     margin: -1px 0 0;
+     border: 0;
+     border-collapse: collapse;
+     font-size: 8pt;
+     color: #bb7;
+}
+
+.main#jardump th {
+     padding: 9px 5px;
+}
+
+.main#jardump th:nth-child(1), .main#jardump th:nth-child(3), .main#jardump th:nth-child(6), .main#jardump th:nth-child(7) {
+     text-align: left;
+}
+
+.main#jardump tr:hover, .main#jardump tr:hover td {
+     background: #020;
+     color: #ee9;
+}
+
+.main#jardump td {
+     vertical-align: top;
+     padding: 2px 5px;
+     color: #bb7;
+}
+
+.main#jardump td:first-child {
+     color: #eea;
+}
+
+.main#jardump th:nth-child(4), .main#jardump th:nth-child(5) {
+     white-space: nowrap !important;
+}
+
+.main#jardump tt {
+     letter-spacing: -0.03em;
+}
+
+.main#jardump font[color="red"] {
+     color: #d00;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) { /* fixes column wrapping on webkit */
+.main#jardump td {
+     word-break: break-word !important;
+     word-break: break-all !important;
+     max-width: 230px;
+}
+}
+
+.main#proof {
+     padding: 0;
+}
+
+.main#proof textarea, .main#proof textarea:focus {
+     padding: 5px 20px;
+     margin: 0;
+     width: 100%;
+     border: none;
+     background: none !important;
+     box-shadow: none;
+     color: #ee9 !important;
+     filter: none;
+}
+
+table#leasesetdebug, table#leasesetsummary {
+     margin-bottom: 10px;
+}
+
+table.leaseset th {
+     font-weight: normal;
+     padding: 5px;
+     text-align: left;
+}
+
+table.leaseset th:last-child, table.leaseset td:nth-child(2) {
+     text-align: right;
+     padding-right: 5px;
+}
+
+.leaseset tr:nth-child(2) td:last-child a:not(old) {
+     font-size: 0;
+}
+
+.leaseset tr:nth-child(2) td:last-child a::after {
+     content: url(/themes/console/images/buttons/add_address.png);
+}
+
+.leaseset tr:nth-child(2) td:last-child a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+table#leasesetdebug th, table#leasesetsummary th {
+     font-weight: bold;
+     text-transform: uppercase;
+     font-size: 10pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     padding: 5px 5px 5px 10px;
+}
+
+table#leasesetdebug th a, table#leasesetsummary a {
+     font-size: 9pt;
+     text-transform: capitalize;
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
+#leasesetsummary td:first-child {
+     width: 100px;
+     white-space: nowrap;
+     padding-left: 10px;
+}
+
+table#leasesetdebug th:first-child, table#leasesetsummary th:first-child {
+     text-align:left;
+     white-space: nowrap;
+}
+
+table#leasesetdebug th:last-child, table#leasesetsummary th:last-child {
+     text-align:right;
+     white-space: nowrap;
+}
+
+table#leasesetdebug td:nth-child(odd) {
+     width: 200px;
+     white-space: nowrap;
+     text-align: right;
+     border-right: 1px inset #131;
+}
+
+table#leasesetdebug td:nth-child(even) {
+     text-align: left;
+     white-space: nowrap;
+}
+
+table#leasesetdebug td:nth-child(2) {
+     width: 10px;
+}
+
+div#noleasesets {
+     background: #000 url(images/infohelp.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     border: 1px solid #494;
+     margin-bottom: 10px;
+     text-align: left;
+}
+
+div#sybilnav, div#sybils_summary {
+     border: 1px solid #494;
+     padding: 10px;
+     margin-bottom: 10px;
+     line-height: 160%;
+     background: #000;
+}
+
+div#sybilnav {
+     -moz-columns: 4 200px;
+     -webkit-columns: 4 200px;
+     columns: 4 200px;
+     padding: 10px;
+}
+
+#sybilnav li {
+     break-inside: avoid;
+     page-break-before: right;
+     -webkit-column-break-inside: avoid;
+}
+
+#sybilnav ul li {
+     list-style: none;
+     padding-left: 0;
+     margin-left: 0;
+     margin-bottom: 5px;
+     min-width: 110px;
+     white-space: nowrap;
+     border: 1px solid #151;
+     border-radius: 2px;
+     background: linear-gradient(to right, #000 0%, #010 80%);
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+#sybilnav ul li:hover {
+     border: 1px solid #f60;
+}
+
+#sybilnav a {
+     display: inline-block;
+     width: 100%;
+}
+
+#sybilnav ul li:hover a {
+     color: #f60;
+}
+
+#sybilnav ul li a {
+     padding-right: 30%;
+     box-sizing: border-box;
+}
+
+#sybilnav ul li::before {
+     content: url(/themes/console/images/buttons/show.png);
+     mix-blend-mode: luminosity;
+     margin-right: 5px;
+     font-size: 16pt;
+     line-height: 50%;
+     vertical-align: middle;
+     padding-left: 5px;
+}
+
+#sybilnav ul li:first-child {
+     margin-top: 0;
+}
+
+#sybilnav ul li:last-child {
+     margin-bottom: -10px;
+     padding-bottom: 2px;
+}
+
+table.sybil_routerinfo {
+     margin-bottom: 10px;
+}
+
+.sybil_routerinfo th {
+     padding: 1px 1px 1px 6px !important;
+}
+
+.sybil_routerinfo th:first-child {
+     text-align: left;
+     white-space: nowrap;
+}
+
+table.sybil_routerinfo:first-of-type th {
+     padding: 8px 6px !important;
+}
+
+.sybil_routerinfo th:nth-last-child(2) {
+     text-align: right !important;
+     padding-right: 0 !important;
+}
+
+.sybil_routerinfo th:last-child {
+     width: 20px;
+}
+
+.sybil_routerinfo td:first-child {
+     width: 50px;
+     white-space: nowrap;
+}
+
+.sybil_routerinfo code {
+     margin-left: 5px;
+     font-size: 9pt;
+}
+
+p.sybil_info, p.family, p.threatpoints, p.hashdist, p#sybil_totals, p.notfound {
+     border: 1px solid #494;
+     padding: 5px 5px 5px 30px;
+     margin: 3px 0;
+     color: #cc0;
+     font-weight: bold;
+     background: url(images/eye.png) 8px center no-repeat;
+     background: url(images/eye.png) 8px center no-repeat, linear-gradient(to right, #000 0%, #001000 80%, #002000 100%);
+     background-blend-mode: luminosity;
+     box-shadow: inset 0 0 0 1px #300;
+}
+
+p.family + p.family, p.sybil_info + p.sybil_info {
+     margin-top: -4px;
+}
+
+p#sybilinfo {
+     line-height: 140%;
+}
+
+p.sybil_info + a[name] + table.sybil_routerinfo, p.hashdist + a[name] + table.sybil_routerinfo  {
+     margin-top: 10px !important;
+}
+
+.threatpoints + ul {
+     border: 1px solid #494;
+     padding: 5px 5px 0;
+     margin: -4px 0 10px;
+}
+.threatpoints + ul li:last-child {
+     margin-bottom: 5px;
+}
+
+h3#known {
+     margin-bottom: 0 !important;
+}
+
+h3#pairs {
+     margin-bottom: 11px !important;
+}
+
+/* end netdb */
+
+/* /confignet, /configadvanced */
+
+h3#iptransport a, th#upnpconfig a, h3#bwlimiter a, #config_stats h3 a, #config_logging h3 a, h3#graphdisplay a, #logs h3 a, h3#advancedconfig a, .h3navlinks {
+     float: right;
+     font-size: 9pt;
+     text-transform: none;
+     letter-spacing: normal;
+}
+
+.h3navlinks a {
+     text-transform: capitalize;
+     letter-spacing: normal;
+     margin-left: 5px;
+}
+
+.h3navlinks a:hover {
+     color: #f60;
+}
+
+h3#iptransport a:not(old), h3#advancedconfig a:not(old) {
+     font-size: 0;
+}
+
+h3#iptransport a::after, h3#advancedconfig a::after {
+     content: url(images/help.png);
+     padding: 0;
+     margin: 0;
+     vertical-align: text-top;
+     cursor: help;
+}
+
+h3#iptransport a:hover, h3#advancedconfig a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+table.configtable {
+     margin-top: -1px;
+     margin-bottom: -2px !important;
+}
+
+table.configtable tr:last-child {
+     border-top: 1px solid #494;
+}
+
+table#netconfig th, table#externali2cp th, table#plugininstall th, .configtable th, th.th_title {
+    text-align: left;
+    padding: 5px 10px !important;
+    text-transform: uppercase;
+    font-size: 10pt;
+    letter-spacing: 0.08em;
+    word-spacing: 0.1em;
+}
+
+table.configtable td {
+     padding: 6px 10px;
+     background: #000;
+     line-height: 180%;
+}
+
+#netconfig img[src*="itoo"] {
+     display: none;
+}
+
+.configtable td.tabletextarea {
+     padding: 0 !important;
+}
+
+textarea#advancedsettings {
+     margin: 0 !important;
+     padding-top: 3px;
+     width: 100%;
+     resize: none;
+     overflow-x: hidden;
+     white-space: pre-wrap;
+     border: 0 none transparent;
+     border-radius: 0;
+}
+
+.configtable td.infohelp, p.infohelp, td.infohelp, p.infowarn, td.infowarn, p#debugmode, p#sybilinfo {
+     background: #000 url(images/infohelp.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px !important;
+     text-align: justify;
+     line-height: 130% !important;
+     border-bottom: 1px solid #494;
+     border-top: 1px solid #494;
+     white-space: normal !important;
+     font-weight: normal !important;
+     background-size: 28px 28px !important;
+}
+
+table.logtable, table#enviro {
+     margin-top: -1px !important;
+}
+
+p.infohelp, p#debugmode, p#sybilinfo {
+     border: 1px solid #494;
+}
+
+p.infowarn, td.infowarn {
+     background: #000 url(images/infowarn.png) 12px center no-repeat !important;
+     border: 1px solid #494;
+     box-shadow: inset 0 0 0 1px #300;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+.infowarn#clientconf {
+     margin: 0 0 -2px;
+}
+
+td.optionsave {
+     text-align: right;
+     border-top: 1px solid #494;
+     padding: 5px !important;
+     white-space: nowrap;
+     width: 50px;
+     background: #000;
+}
+
+#floodfillconfig form, #plugininstall form, #updateplugins form, .configtable form {
+     margin-bottom: 0;
+}
+
+h3.tabletitle, h3#i2pclientconfig, h3#advancedclientconfig, h3#webappconfig, h3#pconfig, h3#pluginfromurl, h3#pluginfromfile, h3#updateplugins, h3#pluginmanage, h3#bannedpeers, h3.ptitle, h3#transports, h3#upnpstatus, h3.sybils, #certs h3 {
+     margin-bottom: 0 !important;
+     border-radius: 0;
+     border: 1px solid #494;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     padding: 7px 10px;
+}
+
+h3#pluginmanage {
+     margin-bottom: -13px !important;
+}
+
+h3.sybils {
+     margin-bottom: 10px !important;
+}
+
+h3.tabletitle a {
+     text-transform: lowercase;
+     letter-spacing: normal;
+}
+
+h3.sybils + div, h3.sybils + a[name] + table {
+     margin-top: -1px;
+}
+
+h3#transports {
+     margin-bottom: -1px !important;
+}
+
+h3#upnpstatus {
+     margin-bottom: 7px !important;
+}
+
+h3.ptitle {
+     margin-bottom: -6px !important;
+}
+
+p#webappconfigtext {
+     margin: 1px 0 -2px 0;
+}
+
+table#pluginconfig, table#i2pupdates, table.homelinkedit, table#peerdefs {
+     margin-top: -1px;
+}
+
+#peerdefs img {
+     padding-left: 0;
+     margin-left: 0;
+}
+
+#peerdefs img[width="12"] {
+     margin-right: 3px;
+     margin-left: 2px;
+}
+
+h3#i2pclientconfig, h3#pconfig, h3#pluginfromurl, h3#pluginfromfile, h3#webappconfig {
+     margin-bottom: -14px !important;
+}
+
+table#advconf {
+     margin-bottom: 9px !important;
+}
+
+p#javaclienthelp {
+     border: 1px solid #494;
+     background: url(images/infohelp.png) 12px center no-repeat !important;
+     padding: 10px 10px 10px 50px !important;
+}
+
+div#clientsconfig {
+     margin-top: -2px;
+}
+
+table#externali2cp th {
+     text-align: left;
+}
+
+#tunnelconfig th {
+     padding: 6px 10px;
+}
+
+#tunnelconfig th img {
+     margin-bottom: -2px;
+}
+
+th.th_title {
+     padding: 10px;
+     text-align: left;
+     background: linear-gradient(to bottom, #1a261a 0%,#223022 7%,#212f21 9%,#172317 21%,#091109 49%,#050d05 50%,#020602 51%,#010301 53%,#000000 56%,#000000 100%) !important;
+}
+
+input#hideme {
+     display: none;
+}
+
+#plugininstall input[type="text"] {
+     width: 50%;
+     min-width: 400px;
+}
+
+#plugininstall input.cancel {
+     display: none;
+}
+
+#pluginupdater {
+     border: 1px solid #494;
+     padding: 15px 5px 15px 50px;
+     margin-top: -11px;
+     margin-bottom: 10px !important;
+     background: url(/themes/console/images/info/update.png) 12px center no-repeat, #000;
+     background-size: 28px 28px;
+}
+
+#pluginupdater form {
+     margin-bottom: 0;
+}
+
+.formaction#tunnelconfigsave, .formaction#homeapps, .formaction#browserstart {
+     margin-bottom: -2px !important;
+}
+
+h4.embeddedtitle#updateplugins {
+     padding: 5px 10px;
+     background: #000 url(images/header.png) center center repeat-x;
+     background-image: linear-gradient(to bottom, #001000, #001900 50%, #000 51%, #000) !important;
+     border: 1px solid #494;
+     text-align: left;
+     text-transform: uppercase;
+     font-size: 10pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     margin-top: -13px;
+}
+
+#manualreseed input[type="text"] {
+     width: 50%;
+     width: calc(100% - 300px);
+}
+
+table#loggingoptions, table#addkeyring {
+     margin-bottom: -3px !important;
+     margin-top: -1px;
+}
+
+table#permabanned {
+     margin-top: -1px;
+     margin-bottom: 9px;
+}
+
+#permabanned th, #banneduntilrestart th {
+     padding: 5px 10px !important;
+}
+
+.main#config_stats h3 a, .main#config_logging h3 a {
+     float: right;
+     letter-spacing: normal;
+     font-size: 9pt;
+     text-transform: none;
+}
+
+table#configstats {
+     margin-bottom: -2px;
+}
+
+#configstats th, #configstats tr.tablefooter td {
+     padding: 8px 10px !important;
+     text-align: left;
+}
+
+#configstats th a {
+     float: right;
+     font-size: 9pt;
+}
+
+#configstats th b {
+     text-transform: uppercase;
+     font-size: 10pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+#configstats td {
+     padding: 6px 5px;
+}
+
+#configstats td:first-child {
+     width: 20px;
+     white-space: nowrap;
+}
+
+#configstats td:first-child:empty + td > label { /* remove pointer from inert labels */
+     cursor: default;
+}
+
+#configstats td:last-child {
+     border-right: 1px solid #494;
+}
+
+#configstats tr {
+     border-top: 1px inset #131;
+}
+
+/*
+#configstats .tablefooter b:not(old) {
+     font-size: 0;
+}
+
+#configstats .tablefooter b::after {
+     content: url(images/chart.png);
+     vertical-align: bottom;
+     filter: sepia(100%) hue-rotate(70deg) !important;
+}
+*/
+
+#configstats .tablefooter:last-child td {
+     background: #000 !important;
+     text-align: right;
+}
+
+#configstats td {
+    color: #bb7;
+    border: none;
+}
+
+#configstats td b {
+    color: #ee9;
+}
+
+#configstats input.optbox {
+     margin: 0;
+     padding: 0;
+}
+
+#configstats tr.tablefooter td {
+     padding: 5px 10px;
+}
+
+p#enablefullstats {
+     margin-top: 5px;
+     padding: 5px 10px;
+     border: 1px solid #494;
+}
+
+#peerdefs td:first-child {
+     width: 40px;
+     white-space: nowrap;
+     border: 1px inset #131;
+     text-align: right;
+}
+
+/* infohelp/warn overrides and misc ornamentation */
+
+table#bugreports td.infohelp {
+     background: url(/themes/console/images/info/bugreport.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+p#debugmode {
+     padding: 15px 15px 15px 50px;
+     background: url(/themes/console/images/info/debug.png) 12px center no-repeat !important;
+     background-size: 28px 28px !important;
+}
+
+p#sybilinfo {
+     padding: 15px 15px 15px 50px;
+     background: url(/themes/console/images/info/experimental.png) 12px center no-repeat !important;
+     background-size: 28px 28px !important;
+}
+
+#bandwidthconfig tr:first-child .infohelp {
+     background: url(/themes/console/images/info/bandwidth.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#addkeyring td.infohelp {
+     background: #000 url(/themes/console/images/info/keys.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#joinfamily tr:nth-child(3) td:first-child {
+     background: #000 url(/themes/console/images/info/key.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#newfamily tr:last-child td:first-child {
+     background: #000 url(/themes/console/images/info/label.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#oldhome td:first-child {
+     background: url(/themes/console/images/info/home.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#oldhome input[type="checkbox"], #enablefullstats input[type="checkbox"] {
+     vertical-align: middle;
+}
+
+#floodfillconfig tr:first-child .infohelp {
+     background: #000 url(/themes/console/images/info/floodfill_32x32.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+p#clientconf.infohelp, p#webappconfigtext.infohelp {
+     background: #000 url(/themes/console/images/info/java_edit.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+p#pluginconfigtext {
+     background: #000 url(/themes/console/images/info/plugin_edit.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#plugininstall .infohelp {
+     background: #000 url(/themes/console/images/info/plugin_link.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#manualreseed tr:nth-last-child(2) td.infohelp {
+     background: #000 url(/themes/console/images/info/box.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#config_peers tr:nth-child(3) td.infohelp {
+     background: #000 url(/themes/console/images/info/blocked.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+h3#shutdownrouter + p.infohelp {
+     background: #000 url(/themes/console/images/info/power.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+h3#restartrouter + p.infohelp, #config_family .infohelp.needrestart {
+     background: #000 url(/themes/console/images/info/reboot.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+h3#systray + p.infohelp {
+     background: #000 url(/themes/console/images/info/systray.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+h3#servicedebug + p.infohelp {
+     background: #000 url(/themes/console/images/info/debug.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+h3#browseronstart + p.infohelp {
+     background: #000 url(/themes/console/images/info/launch_browser.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+.main#config_reseed p.infohelp {
+     background: #000 url(/themes/console/images/info/connect.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+p#enablefullstats, p#gatherstats {
+     background: #000 url(/themes/console/images/info/statistics.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#config_family .infohelp {
+      background: #000 url(/themes/console/images/info/family.png) 12px center no-repeat !important;
+      padding: 15px 15px 15px 50px;
+      background-size: 28px 28px !important;
+}
+
+#consolepass tr:first-child td {
+     background: #000 url(/themes/console/images/info/user_add.png) 12px center no-repeat;
+     background-size: 28px 28px;
+     padding: 15px 15px 15px 50px;
+}
+
+form[action="events"] {
+     padding: 10px 10px 10px 50px;
+     background: #000 url(/themes/console/images/info/logs.png) 12px center no-repeat;
+     background-size: 28px 28px;
+}
+
+#plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2) {
+     background: #000 url(/themes/console/images/info/url.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2) {
+     background: #000 url(/themes/console/images/info/from_file.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+/* responsive layout */
+
+/* responsive /profiles & /peers */
+
+@media screen and (max-width: 1060px) {
+
+table#floodfills, #profiles ul#banlist, table#profile_defs {
+     margin-bottom: 5px;
+}
+
+table#floodfills td {
+     font-size: 8pt;
+     border-right: 0 outset transparent !important;
+}
+
+#floodfills tr:hover td:nth-child(n+2){
+     transform: scale(1.1);
+     text-align: center !important;
+}
+}
+
+@media screen and (max-width: 1240px) {
+#udpconnections td, #ntcpconnections td {
+     padding: 3px 2px;
+}
+
+#udpconnections tr.tablefooter td, #ntcpconnections tr.tablefooter td {
+     border: 1px inset #131 !important;
+     border-top: 1px solid #494 !important;
+}
+
+.main#profiles, .main#peers {
+     padding: 5px 5px 0;
+}
+
+#profiles .confignav {
+     margin: -6px -6px 5px;
+}
+
+p#upnpstatus, .main#peers .infohelp {
+     margin: 0;
+}
+
+.main#peers h3, #profiles h3, .main#peers .infohelp {
+     margin-top: 5px !important;
+}
+
+p#profiles_overview {
+     margin: 5px 0;
+}
+
+#profiles #thresholds + h3 {
+     margin-top: -5px !important;
+}
+}
+
+/* end profiles/peers */
+
+/* responsive layout */
+
+@media screen and (max-width: 900px) {
+#ntcpconnections th:last-child:not(old) {
+     font-size: 0;
+}
+
+#ntcpconnections th:last-child::before {
+     content: url(/themes/console/images/info/backlogged.png) !important;
+}
+
+#ntcpconnections td:last-child {
+     width: 24px !important;
+     white-space: nowrap;
+}
+
+th {
+     font-size: 8pt;
+}
+
+.tunneldisplay .cells {
+     padding: 4px 2px !important;
+}
+
+.langbox {
+     line-height: 15px;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.tab, .tab2 {
+     padding: 1px 0;
+     min-width: 50px !important;
+}
+
+.tab2 {
+     padding: 3px 12px;
+}
+
+.tab a {
+     padding: 2px 14px;
+}
+
+#plugininstall input[type="text"] {
+     min-width: 200px !important;
+}
+
+table#i2pupdates td:first-child {
+     white-space: normal;
+     width: 30%;
+}
+
+td.optionsave {
+     white-space: normal;
+}
+
+.main#tunnels {
+     padding: 0 5px;
+     min-width: 640px;
+}
+
+.main#tunnels h3 {
+     margin-top: 6px;
+}
+
+.statusnotes:last-child {
+     margin-bottom: 6px;;
+}
+
+#portfaq td:nth-child(2) {
+     white-space: normal;
+}
+
+#faq h3 {
+     font-size: 10pt !important;
+}
+}
+
+@media screen and (max-width: 1220px) {
+#udpconnections tr:nth-last-child(n+3):hover td:nth-child(n+2)  {
+     transform: scale(1.05);
+     text-align: center !important;
+}
+
+.main#peers .widescroll td.cells {
+     font-size: 8pt !important;
+}
+
+.main#help h3, #faq h3 {
+     font-size: 10pt !important;
+}
+}
+
+@media screen and (max-width: 1500px) {
+#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,
+#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {
+   min-height: 12px;
+}
+
+#banlist + h3 {
+     margin-bottom: -2px !important;
+}
+
+.tunnels_client th:first-child:not(old) {
+     font-size: 0;
+}
+
+.tunnels_client th:first-child::after {
+     content: "\21E9\21E7";
+     font-size: 12pt;
+     line-height: 0;
+     vertical-align: middle;
+     letter-spacing: -0.25em;
+}
+
+img.app, img.app2p {
+     padding: 14px 44px 40px;
+}
+
+.applabel {
+     margin-top: 8px;
+}
+
+.main#help h3, #faq h3 {
+     font-size: 10.5pt !important;
+}
+}
+
+@media screen and (min-width: 1500px) {
+body, .main, .main td, .news p, #news p, textarea, .main textarea, code, tt, #changelog pre,
+ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover, .confignav {
+     font-size: 10pt !important;
+}
+
+.main button, .main input, select, textarea, div.news {
+     font-size: 10pt !important;
+}
+
+.main, .news, h1 {
+     margin-left: 232px !important;
+}
+
+pre, #logs li, .smallhead {
+     font-size: 9pt !important;
+}
+
+.routersummary {
+     width: 200px !important;
+}
+
+.routersummary table[id^="sb_"] {
+     width: 216px !important;
+}
+
+.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a,
+#floodfill th, .applabel a, #jardump td, .statusnotes {
+     font-size: 9pt !important;
+}
+
+.routersummary button {
+     font-size: 10pt !important;
+}
+
+div.app {
+     min-width: 138px;
+}
+
+img.app, img.app2p {
+     padding: 10px 58px 38px;
+}
+
+.applabel {
+     width: 150px !important;
+}
+
+.applabel a {
+     max-width: 148px;
+     font-size: 10pt !important;
+}
+
+th, #configinfo th, code, tt {
+     font-size: 10pt;
+}
+
+table#floodfills th:first-child, table#floodfills td:first-child {
+     width: 58px;
+     padding-right: 3px !important;
+}
+
+h3, .routersummary h3 a, th.th_title, #leasesetdebug th, #leasesetsummary th, .netdbentry th {
+     font-size: 11pt !important;
+}
+
+select {
+     padding: 3px 16px 3px 2px;
+}
+
+h3#pluginmanage {
+     margin-bottom: -15px !important;
+}
+
+h4#updateplugins {
+     margin-top: -15px !important;
+}
+
+.sorry {
+     margin-left: 232px !important;
+}
+
+div.joblog h3 {
+     margin-top: 7px !important;
+     padding-top: 7px !important;
+}
+
+#certs.main p + p:empty + h4 {
+     margin-top: -15px !important;
+}
+
+.routersummary button.reload, .routersummary button.stop {
+    min-width: 101px;
+}
+
+.subheading b {
+     font-size: 10.5pt !important;
+}
+
+p#fullhistory {
+     text-align: right;
+     margin-top: -13px;
+}
+
+div.routersummary img[src$="i2plogo.png"] {
+     margin-left: -5px;
+     transform: none;
+     width: 210px;
+     margin-top: -3px;
+}
+
+.routersummary h3::after {
+     min-height: 19px;
+}
+
+#banlist + h3.tabletitle {
+     margin-bottom: -2px !important;
+}
+
+table#permabanned {
+     margin-top: -3px;
+}
+
+#udpconnections td[class="cells"]:first-child, #ntcpconnections td[class="cells"]:first-child {
+     width: 55px;
+     padding-right: 8px;
+}
+
+.main#jobs h2 {
+     margin-bottom: 10px !important;
+}
+
+div.footnote, div.topness {
+     font-size: 9pt !important;
+}
+
+.main[id^="config_"] th, h4#updateplugins {
+    font-size: 10.5pt !important;
+}
+
+.langbox {
+     margin: 5px 4px 2px 5px;
+}
+
+.langbox img {
+     margin-bottom: -1px;
+}
+
+#help .confignav {
+     padding: 0 !important;
+     position: sticky;
+     top: -1px;
+     z-index: 999;
+}
+
+#help .tab {
+     margin-top: -1px !important;;
+}
+
+.newsAuthor {
+     font-size: 9pt !important;
+     background-size: 15px 15px !important;
+     padding-left: 19px !important;
+}
+
+table#reseedconfig input[type="text"], table#reseedconfig input[type="password"] {
+     width: 250px;
+}
+}
+
+@media screen and (min-width: 1840px) {
+div[id^="config_"] .confignav {
+     display: flex;
+     flex-direction: row;
+     flex-wrap: wrap;
+     align-content: space-evenly;
+     justify-content: center;
+     padding: 4px 4px 5px 3px !important;
+}
+
+div[id^="config_"] .tab, div[id^="config_"] .tab2 {
+     flex: auto;
+     flex-basis: content;
+     flex-grow: 0.06;
+     margin: 0 -1px -1px 0 !important;
+     white-space: nowrap;
+     min-width: 70px !important;
+}
+
+div[id^="config_"] .tab2 {
+     padding: 5px 6px;
+}
+
+div[id^="config_"] .tab a {
+     padding: 4px 6px;
+}
+
+div[id^="config_"] .confignav {
+     padding: 0 !important;
+}
+
+div[id^="config_"] .tab, div[id^="config_"] .tab2 {
+     margin-top: -1px !important;
+}
+
+div[id^="config_"] .tab:first-child {
+     margin-left: -1px !important;
+}
+}
+
+/* proxy errors */
+
+@media screen and (max-width: 800px) {
+.warning {
+     margin-left: 20px !important;
+     margin-top: 130px !important;
+     background: url(images/camotile2.png) !important;
+     padding: 5px 15px 15px !important;
+}
+
+.logo {
+     position: absolute;
+     top: 20px;
+     width: calc(100% - 62px) !important;
+     z-index: 999;
+     min-width: 330px;
+}
+
+.logo a {
+     width: auto !important;
+     padding: 2px 5px !important;
+}
+.logo a img {
+     padding: 0 !important;
+     margin-top: -2px;
+     margin-bottom: -4px;
+}
+}
+
+@media screen and (min-height: 700px) {
+.proxyfooter {
+     position: absolute;
+     bottom: 0;
+     right: 0;
+     padding: 0 20px 0 0;
+     text-align: right;
+     background: #030;
+     width: 100%;
+     opacity: 0.7;
+     border-top: 1px solid #000;
+}
+
+.proxyfooter p {
+     text-align: right;
+     line-height: 130% !important;
+     margin: 5px 0;
+}
+
+.warning {
+     margin-bottom: 30px;
+}
+}
+
+@media screen and (max-height: 700px) {
+.proxyfooter {
+     display: none;
+}
+}
+/* end proxy errors */
+/* end responsive layout */
+
+/* Edge/IE tweaks */
+
+_:-ms-lang(x), .tunnels_client th:first-child::after {
+     letter-spacing: -0.05em;
+     font-weight: normal;
+}
+
+/* end Edge/IE tweaks */
diff --git a/installer/resources/themes/console/dark/console_ar.css b/installer/resources/themes/console/dark/console_ar.css
index 4afffe012c0251b61bf44c4aa455b36f3515b7a4..675e73bec4c3a95e1d6acabc9ab0aacd27a12bed 100644
--- a/installer/resources/themes/console/dark/console_ar.css
+++ b/installer/resources/themes/console/dark/console_ar.css
@@ -26,6 +26,15 @@ div.news {
      direction: ltr;
 }
 
+.news h3, #newspage h3 {
+     direction: ltr;
+}
+
+.news hr + i {
+     float: left;
+     direction: rtl;
+}
+
 div.main {
      margin: -1px 205px 5px 5px;
      background: url("images/scarface.jpg") no-repeat scroll left bottom #000000 !important;
@@ -40,8 +49,21 @@ h1,h2,h3,h4 {
      text-align: right;
 }
 
-div.routersummary h3 {
+h4.app, h4.app2 {
+     text-align: right;
+}
+
+button.search {
+     margin-right: 30px;
+}
+
+div.routersummary h3, div.routersummary h4, .routersummary a, .routersummary b {
      text-align: center;
+     font-weight: normal;
+}
+
+div.routersummary h3, div.routersummary h4 {
+     font-size: 10pt;
 }
 
 div.routersummary td {
@@ -57,6 +79,14 @@ div.routersummary td:first-child {
      text-align: right;
 }
 
+#sb_services td, #sb_internals td, #sb_advanced td {
+     text-align: center;
+}
+
+#sb_localtunnels td:last-child {
+     text-align: left;
+}
+
 div.tunnels {
      padding: -3px 0 !important;
 }
@@ -97,3 +127,259 @@ span.newtab {
      float: left;
      letter-spacing: 0;
 }
+
+.tab2::before, .tab2::after {
+     display: none;
+}
+
+/* lang selection */
+
+.langselect img {
+     margin-right: -61px;
+}
+
+.langselect .optbox:checked + img {
+     margin-right: -63px;
+}
+
+/* theme selection */
+
+.themechoice, .langselect {
+     float: right !important;
+} 
+
+.themechoice {
+     padding: 5px;
+}
+
+.themechoice .optbox {
+     opacity: 0; /* hide the radio icon so we can use thumbnail img instead */
+     outline: 1px dotted #f00;
+     position: absolute;
+     padding: 2px;
+     margin-right: -27px;
+     min-height: 78px !important;
+}
+
+.themechoice .optbox + img {
+     border: 1px solid transparent;
+}
+
+.themechoice .optbox + img, .themechoice .optbox:checked + img {
+     margin: 5px;
+     padding: 0 !important;
+}
+
+h3#iptransport a, th#upnpconfig a, h3#bwlimiter a, #config_stats h3 a, #config_logging h3 a, h3#graphdisplay a, #logs h3 a, h3#advancedconfig a {
+     float: left;
+}
+
+#sybilnav ul li a {
+     padding-right: 0;
+}
+
+.sybil_routerinfo th:first-child {
+     text-align: right;
+}
+
+.sybil_routerinfo th:nth-last-child(2) {
+     padding-left: 0;
+     text-align: left !important;
+}
+
+.sybil_routerinfo th {
+     padding: 1px 3px 1px 1px !important;
+}
+
+table#leasesetdebug th:first-child, table#leasesetsummary th:first-child {
+     text-align: right;
+}
+
+table#leasesetdebug th:last-child, table#leasesetsummary th:last-child {
+     text-align: left;
+}
+
+table#leasesetdebug th, table#leasesetsummary th {
+      padding: 5px;
+}
+
+table.leaseset th {
+     text-align: right;
+}
+
+table.leaseset th:first-child b {
+     float: right;
+}
+
+table.leaseset th:last-child, table.leaseset td:nth-child(2) {
+     text-align: left;
+}
+
+#netdboverview th, table.netdbentry th, table#leasesetdebug td:nth-child(2n) {
+     text-align: right;
+}
+
+.main#debug {
+     direction: ltr;
+}
+
+#jardump.main th:nth-child(1), #jardump.main th:nth-child(3), #jardump.main th:nth-child(6), #jardump.main th:nth-child(7) {
+     text-align: right;
+}
+
+#schedjobs td {
+     text-align: center;
+}
+
+table.netdbentry th:last-child, table#leasesetdebug td:nth-child(2n+1) {
+     text-align: left;
+}
+
+#tunnels.main h3 a {
+     float: left;
+}
+
+table#enviro td {
+     padding: 5px 10px 5px 5px !important;
+}
+
+table#enviro td:first-child {
+     text-align: left;
+}
+
+#wrapperlogs pre, table[id$="logs"] ul, .logtable ul li {
+     direction: ltr;
+     text-align: left;
+}
+
+#criticallogs ul {
+     border: none;
+}
+
+#eventlog th {
+     text-align: right;
+     padding-right: 10px;
+}
+
+.homelinkedit th:nth-child(3), .homelinkedit th:last-child {
+     text-align: right !important;
+}
+
+table#netconfig th, table#externali2cp th, table#plugininstall th, .configtable th, th.th_title {
+     text-align: right !important;
+}
+
+#sidebarconf th:nth-child(1), #sidebarconf th:nth-child(2) {
+     text-align: right;
+}
+
+#sidebarconf td:nth-child(4) {
+     padding-right: 0;
+}
+
+#sidebarconf td:nth-child(3) {
+     text-align: left !important;
+     padding-left: 0;
+}
+
+.configtable td.infohelp, p.infohelp, td.infohelp, p#debugmode, p#sybilinfo, p.infowarn, td.infowarn, p#keyringhelp, h3#shutdownrouter + p, h3#restartrouter + p, h3#servicedebug + p, h3#browseronstart + p, h3#runonstartup + p, h3#systray + p {
+     background: #000 url(images/infohelp.png) right 8px center no-repeat !important;
+     padding: 15px 45px 15px 15px !important;
+}
+
+p.infowarn, td.infowarn {
+     background: #000 url(images/infowarn.png) right 8px center no-repeat !important;
+}
+
+.main#config_update .messages {
+     background: #000 url(images/infohelp.png) no-repeat right 10px center !important;
+     text-align: right;
+     padding: 15px 55px 15px 15px;
+}
+
+.main#config_update .messages a {
+     float: left;
+     margin: 0 5px
+}
+
+.messages {
+     background-position: right 12px center, left bottom !important;
+     padding: 20px 40px 20px 10px !important;
+}
+
+td.optionsave {
+     text-align: left;
+}
+
+#tunnelconfig th {
+     text-align: right;
+}
+
+#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"], #consolepass input[name="nofilter_pw"]:focus, #externali2cp input[name="nofilter_pw"]:focus,
+#consolepass input[name="name"], #externali2cp input[name="user"], #consolepass input[name="name"]:focus, #externali2cp input[name="user"]:focus {
+     background-position: right 3px center, center center !important;
+     padding: 4px 20px 4px 4px !important;
+     margin: 5px 3px 5px 15px !important;
+}
+
+@-moz-document url-prefix() {
+select, select:hover, select:focus {
+     background-position: left center !important;
+     padding: 3px 2px 3px 16px;
+}
+}
+
+#consolepass tr:first-child td, p#clientconf.infohelp, p#webappconfigtext.infohelp, #floodfillconfig .infohelp, 
+#bandwidthconfig tr:first-child .infohelp, h3#shutdownrouter + p.infohelp, h3#restartrouter + p.infohelp, h3#systray + p.infohelp, 
+h3#servicedebug + p.infohelp, h3#browseronstart + p.infohelp, table#addkeyring td:first-child, #config_peers tr:nth-child(3) td.infohelp, 
+#config_reseed.main p.infohelp, #plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2), 
+#manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2), #manualreseed tr:nth-last-child(2) td.infohelp, 
+p#enablefullstats, p#gatherstats, #oldhome td:first-child, p#pluginconfigtext, #plugininstall .infohelp, #config_family .infohelp, 
+#joinfamily tr:nth-child(3) td:first-child, #newfamily tr:last-child td:first-child, #config_summarybar .configtable td:not(.optionsave),
+table#bugreports td.infohelp {
+     background-position: right 12px center !important;
+     padding: 15px 50px 15px 15px !important;
+}
+
+div[lang="ar"] ul {
+     margin-right: 20px !important;
+}
+
+div[lang="ar"] ul li {
+     list-style-image: url("images/link.png") !important;
+     list-style-position: outside;
+     margin: 10px 15px 0 0 !important;
+     padding-left: 0 !important;
+     margin-top: 15px !important;]
+}
+
+div[lang="ar"] ul ul {
+     margin-right: -10px;
+}
+
+div[lang="ar"] ul, div[lang="ar"] p {
+     margin: 10px;
+}
+
+@media screen and (min-width: 1500px) {
+.main, .news, h1 {
+     margin-right: 232px !important;
+     margin-left: 0 !important;
+}
+
+div.routersummaryouter {
+     margin-right: 27px !important;
+}
+
+.routersummary h4 {
+     font-size: 11pt !important;
+}
+
+.routersummary td, .routersummary a {
+     font-size: 10pt !important;
+}
+
+div[lang="ar"], div[lang="ar"] code, div[lang="ar"] b {
+     font-size: 11pt !important;
+}
+}
\ No newline at end of file
diff --git a/installer/resources/themes/console/dark/console_big.css b/installer/resources/themes/console/dark/console_big.css
index 547fdd6ef4adbdc938d9f0eb3d6a2f8a05f3e72d..756894b57b2dd5b9d63ee3c136ec5788734c56b0 100644
--- a/installer/resources/themes/console/dark/console_big.css
+++ b/installer/resources/themes/console/dark/console_big.css
@@ -2,30 +2,65 @@
 /* Comment: Larger text (and other tweaks) for Chinese & other doublebyte charactersets */
 /* Author: dr|z3d */
 
+h1, h2, h3, h4 {
+     text-shadow: none !important;
+     font-weight: normal !important;
+}
+
+h1 {
+     font-size: 20pt;
+     padding: 11px 15px;
+}
+
+h3 {
+     font-size: 14pt !important;
+}
+
 body {
-     font: 9pt/130% Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     font-family: "Droid Sans", "Noto Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     font-size: 12pt;
+     line-height: 130%;
 }
 
 div.news {
-     font-size: 9.5pt;
+     font-size: 10pt;
      font-style: normal !important;
 }
 
-div.routersummary table {
-    font-size: 8.5pt;
+div.main, div.news, h1 {
+     margin-left: 232px !important;
+}
+
+div.routersummary {
+     width: 200px;
+}
+
+div.routersummary table, table#sb_localtunnels {
+    font-size: 10pt;
+    width: 215px !important;
+}
+
+div.routersummary table td {
+     padding: 2px 1px;
 }
 
 div.routersummary h3, div.routersummary h4, div.routersummary p, div.routersummary h3 a, div.routersummary a {
-     text-shadow: 0 0 0 0 !important;
+     text-shadow: none !important;
 }
 
-div.routersummary h4 {
-     font-size: 10pt;
+div.routersummary h3 a {
+     font-size: 14pt !important;
+     text-transform: uppercase !important;
+     letter-spacing: 0.15em !important;
+}
+
+div.routersummary h4, .routersummary h4 a {
+     font-size: 11pt !important;
      font-weight: normal;
 }
 
 div.routersummary b {
-     font-size: 9pt;
+     font-size: 10pt;
      font-weight: normal;
 }
 
@@ -34,38 +69,186 @@ div.routersummary a {
      font-weight: normal;
 }
 
+#sb_warning {
+     padding-top: 10px;
+     padding-bottom: 10px;
+}
+
+div.messages, div.error, .error ul li {
+     font-size: 11pt;
+     font-weight: normal !important;
+}
+
 b, a, a:link, a:hover, a:visited {
      font-weight: normal;
+     font-size: 11pt !important;
 }
 
 h2 {
-     font-size: 15pt;
+     font-size: 16pt;
      text-shadow: none;
      font-weight: normal;
 }
 
-p {
-     font-size: 9.5pt;
+h3 {
+     font-size: 15pt;
+}
+
+h4, h4.app, h4.app2 {
+     font-size: 14pt;
+}
+
+p, div.main {
+     font-size: 11pt;
 }
 
 button, button:visited {
-    font: normal 10pt Verdana,"Bitstream Vera Sans",Tahoma,Helvetica,sans-serif !important;
+    font: normal 10pt "Droid Sans", "Noto Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif !important;
+}
+
+button.reload, button.stop {
+     padding: 2px !important;
+     font-size: 12pt !important;
+     min-width: 100px;
+}
+
+.main li, ul.statlist li b, ul.statlist a[name] {
+     line-height: 160%;
+     font-size: 11pt !important;
 }
 
 code, pre, tt {
-     font-size: 10pt;
+     font-size: 11pt;
      font-weight: normal;
 }
 
+#changelog pre {
+     font-size: 10pt !important;
+}
+
 .smallhead, th {
      font-size: 8.5pt;
      font-weight: normal;
 }
 
 table {
-     font: 8.5pt/130% Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     font: 10pt/130% "Droid Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
 }
 
-div.applabel {
-     font-size: 8.5pt;
+.applabel {
+     font-size: 10pt;
+     width: 134px !important;
+     margin-top: 10px;
+}
+
+div.app {
+     width: 138px;
+}
+
+img.app, img.app2p {
+     margin-top: -6px !important;
+}
+
+.confignav {
+     font-size: 13pt;
+}
+
+input[type="submit"], input[type="reset"], .cancel, .accept {
+     padding: 5px 8px !important;
+     font-size: 12pt !important;
+     min-width: 80px;
+     font-weight: normal;
+}
+
+.langselect, .themechoice {
+     font-size: 11pt !important;
+}
+
+.langselect .optbox {
+     min-height: 68px;
+}
+
+.langselect img {
+     margin-top: 12px !important;
+}
+
+.langselect input[name="lang"]:checked + img, .langselect input[name="lang"]:checked + #config_ui img[src="/flags.jsp?c=a1"] {
+     margin-top: 10px !important;
+}
+
+table#leasesetdebug th a:not(old), table#leasesetsummary th a:not(old), #tunnels.main h3 a:not(old), #logs h3 a:not(old),
+a[href^="configpeer?peer"], h3#iptransport a:not(old), h3#iptransport a:not(old) {
+     font-size: 0 !important;
+}
+
+h3#webappconfig, h3#i2pclientconfig {
+    margin-bottom: -15px !important;
+}
+
+td.optionsave {
+     border-top: 1px solid #494;
+}
+
+.newsentry + hr {
+     margin-bottom: 5px !important;
+}
+
+#newsDisplay, #newsDisplay a, #newsStatus, td.infohelp, td.infowarn, p.infohelp, p.infowarn {
+     font-size: 11pt !important;
+}
+
+@media screen and (min-width: 0) {
+p, .main {
+     font-size: 11pt !important;
+}
+
+.tab, .tab2, .confignav a {
+     font-size: 11pt !important;
+     margin-right: -2px !important;
+}
+
+.news p, .news a {
+     font-size: 10pt !important;
+}
+
+p#fullhistory {
+     margin-top: -13px !important;
+}
+
+div.routersummary img[src$="i2plogo.png"] {
+    margin-left: -5px;
+    margin-top: -3px;
+    width: 211px;
+}
+
+.routersummary table[id^="sb_"] {
+     width: 215px !important;
+}
+
+.routersummary button {
+     font-size: 11pt !important;
+     padding: 5px 8px !important;
+}
+}
+
+@media screen and (max-width: 1500px) {
+.tab, .tab2 {
+     font-size: 10.5pt !important;
+     margin-right: -3px !important;
+}
+
+h3#webappconfig, h3#i2pclientconfig {
+    margin-bottom: -16px !important;
+}
+
+.langbox {
+     margin-top: 6px !important;
+     line-height: 17px;
+}
+}
+
+@media screen and (min-width: 1500px) {
+img.app, img.app2p {
+     margin-top: -4px !important;
 }
+}
\ No newline at end of file
diff --git a/installer/resources/themes/console/dark/default.css b/installer/resources/themes/console/dark/default.css
deleted file mode 100644
index 5473cb5f4474720d3b4636bdc63628509fb8091f..0000000000000000000000000000000000000000
--- a/installer/resources/themes/console/dark/default.css
+++ /dev/null
@@ -1,365 +0,0 @@
-/* I2P Console theme: "Camo" by dr|z3d. Aka "dark". As in ops. */
-
-body {
-     margin: 0px;
-     padding: 0px;
-     text-align: center;
-     font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     background: #010 url('images/camotile.png') center bottom;
-     color: #000000;
-     font-size: 8.5pt;
-    /* we've avoided Tantek Hacks so far,
-    ** but we can't avoid using the non-w3c method of 
-    ** box rendering. (and therefore one of mozilla's
-    ** proprietry -moz properties (which hopefully they'll
-    ** drop soon).
-    */
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-body.iframed {
-     background: transparent url('images/transparent.gif') !important;
-     padding-top: 5px;
-}
-
-div {
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-label {
-     margin: 0;
-     padding: 5px 4px 4px 4px;
-     float: left;
-     width: 120px;
-/*    height:  24px; */
-     font-weight: normal;
-     text-align: right;
-     font-size: 8pt;
-     font-style: italic;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-h4 {
-     font-size: 14px;
-     font-weight: bold !important;
-     text-align: left;
-     border: 1px solid #494;
-     margin: 5px 0 15px 0;
-     padding: 5px 10px;
-     background: #000 url('images/header.png') center center repeat-x ;
-     text-transform: uppercase;
-     text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
-     letter-spacing: 0.08em;
-     -moz-box-shadow: inset 0px 0px 4px 0px #090;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-}
-
-a {
-     text-decoration: none;
-}
-
-form {
-     margin: 0px;
-}
-
-textarea, input, select, button, a {
-     font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-     font-size: 8.5pt;
-     float: left;
-     background: #020;
-     border-radius: 4px;
-     color: #EEEE99;
-}
-
-button {
-     float: none;
-}
-
-textarea {
-     border: 1px solid #494;
-     background: #000;
-     margin-left: 4px;
-     width: 458px;
-}
-
-br {
-     clear: left;
-}
-
-div.statusNotRunning {
-     float: left;
-     width: 78px;
-     height: 24px;
-     overflow: hidden;
-     color: #dd0000;
-     padding-top: 24px;
-     margin-top: 6px;
-     background: url('images/console_status_stopped.png') 0 0 no-repeat;
-}
-
-div.statusRunning {
-     float: left;
-     width: 78px;
-     height: 24px;
-     overflow: hidden;
-     color: #00dd00;
-     padding-top: 24px;
-     margin-top: 6px;
-     background: url('images/console_status_running.png') 0 0 no-repeat;
-}
-
-div.statusStarting {
-     float: left;
-     width: 78px;
-     height: 24px;
-     overflow: hidden;
-     color: #339933;
-     padding-top: 24px;
-     margin-top: 6px;
-     background: url('images/console_status_starting.png') 0 0 no-repeat;
-}
-
-hr {
-     display: none;
-}
-
-.separator, .subdivider {
-     clear: both;
-     height: 1px;
-     margin: 3px 0px 3px 0px;
-     border-bottom: 1px solid #494;
-}
-
-.subdivider {
-     border-bottom: 1px solid #494;
-     padding: 5px 0px 0px 0px;
-}
-
-.freetext {
-     width: 150px;
-     height : 22px; 
-     border: 1px solid #494;
-     padding: 2px;
-     margin: 4px 0 2px 4px;
-     background-color: #000;
-     font-size: 8.5pt;
-}
-
-.control {
-     margin: 6px 0 0 2px !important;
-     padding: 2px 0;
-     overflow: hidden;
-     min-width: 60px;
-     max-height: 24px;
-     font-size: 8pt;
-     font-weight: bold;
-     background-color: #000;
-     color: #494 !important;
-     border: 1px outset #ddddc0;
-     text-align: center;
-     white-space: nowrap;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     margin-top: 8px;
-     background: url(images/tabletitlelight.png) repeat: x;
-     vertical-align: middle;
-     text-decoration: none;
-     border: 1px outset #5f5;
-     -moz-box-shadow: inset 0px 1px 1px 0px #373;
-     -khtml-box-shadow: inset 0px 1px 1px 0px #373;
-     box-shadow: inset 0px 1px 1px 0px #373;
-}
-
-.control:link {
-     color: #494 !important;
-     text-decoration: none;
-     background: #000 !important;
-}
-
-.control:hover {
-     border: 1px solid #f60;
-     background-color: #000;
-     color: #f60 !important;
-     text-decoration: none;
-     -moz-box-shadow: inset 0px 1px 1px 0px #fff;
-     -khtml-box-shadow: inset 0px 1px 1px 0px #fff;
-     box-shadow: inset 0px 1px 1px 0px #fff;
-}
-
-.control:active {
-     border: 1px inset;
-     background-color: #f60 !important;
-     color: #EE9 !important;
-     text-decoration: none;
-}
-
-.control:visited {
-     color: #494 !important;
-     text-decoration: none;
-}
-
-.panel {
-     width: 800px;
-     margin: 16px auto 16px auto;
-     overflow: hidden;
-     text-align: left;
-     font-size: 8.5pt;
-     color: #EEEE99;
-     background-color: #020;
-     background: #000 url(images/camotile2.png);
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #494;
-     padding: 10px 20px;
-}
-
-.iframed .panel {
-     margin: 16px auto -8px auto !important;
-}
-
-.iframed .panel.iframed {
-     margin: 0 auto -8px auto !important;
-}
-
-.panel td:first-child {
-     font-weight: bold;	
-}
-
-.panel td {
-	  padding: 6px 0 8px;
-}
-
-.panel td:last-child {
-     border-bottom: 1px dotted #494;	
-}
-
-.panel .footer {
-     float: right;
-     padding: 4px;
-}
-
-.toolbox {
-     float: right;
-}
-
-.rowItem {
-     width: 750px;
-     float: left;
-     margin: 0px;
-}
-
-.comment {
-     font-style: italic;
-}
-
-.text {
-/*     height: 24px;*/
-     width: 150px;
-     padding: 4px 0 0 2px;
-     float: left;
-     margin: 0;
-     font-size: 8pt !important;
-     font-weight: bold;
-}
-
-.accessKey {
-     text-decoration: underline;
-}
-
-#globalOperationsPanel {
-     background-color: #000;
-     border: 1px solid #494;
-     -moz-box-shadow: inset 0px 0px 0px 1px #932;
-     padding: 5px 20px 11px 10px !important;
-/*     background: #000 url(images/scarface.jpg) right center no-repeat !important;*/
-}
-
-#globalOperationsPanel .control {
-     width: 120px;
-     color: #494 !important;
-}
-
-#globalOperationsPanel .control:hover {
-     color: #F60 !important;
-}
-
-#globalOperationsPanel .control:active {
-     color: #EE9 !important;
-}
-
-.header {
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 0;
-}
-
-a:link{
-     color: #494;
-     text-decoration: none;
-     background: none;
-}
-
-a:visited{
-     color: #7b7;
-     text-decoration: none;
-     background: none;
-}
-
-a:hover{
-     color: #ff6600;
-     text-decoration: underline;
-     background: none;
-}
-
-a:active{
-     color: #900;
-     text-decoration: underline;
-     background: none;
-}
-
-input {
-     background-color: #020;
-     color: #EEEE99;
-     margin: 0 2px 0 2px;
-     font-family: "Lucida Sans Unicode", Verdana, Tahoma, Helvetica, sans-serif;
-     border: 1px solid #494;
-/*
-     padding: 0px 2px 1px 2px;
-*/
-     text-decoration: none;
-}
-
-input hover {
-     background-color: #f00;
-     color: #EEEE99;
-     margin: 0 2px 0 2px;
-     font-family: "Lucida Sans Unicode", Verdana, Tahoma, Helvetica, sans-serif;
-     font-weight: bold;
-     border: 1px solid #494;
-     padding: 2px;
-     text-decoration: none;
-}
-
-select {
-     background-color: #020;
-     color: #EEEE99;
-     margin: 6px 2px 0 2px;
-     font-family: "Lucida Sans Unicode", Verdana, Tahoma, Helvetica, sans-serif;
-     border: 1px solid #494;
-     padding: 2px 2px 2px 4px;
-     max-height: 24px;
-     background: #000;
-     border-radius: 4px;
-}
-
-form {}
diff --git a/installer/resources/themes/console/dark/i2ptunnel.css b/installer/resources/themes/console/dark/i2ptunnel.css
index b8bcd984052a8cc68caf2f56fd1a8b1116efddee..0f02c93881caabd2510a9ff6b1ae08437089ce6b 100644
--- a/installer/resources/themes/console/dark/i2ptunnel.css
+++ b/installer/resources/themes/console/dark/i2ptunnel.css
@@ -1,153 +1,1105 @@
-/* I2P Console theme: "Camo" by dr|z3d. Aka "dark". As in ops. */
-/* I2P Tunnel Edit Page */
+/* I2P TunnelManager theme: "Camo". Aka "dark". As in ops. */
+/* Author: dr|z3d */
 
-#tunnelEditPage input {
-     width: 458px;
+body {
+     margin: 0;
+     padding: 0;
+     text-align: center;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     background: #010 url(images/camotile.png) center bottom;
+     color: #ee9;
+     font-size: 9pt;
 }
 
-#tunnelEditPage select {
-     width: 308px;
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+     padding: 0;
+     overflow: hidden;
 }
 
-#tunnelEditPage option [ selected ] {
-     color: green;
+::selection {
+     background: #030 !important;
+     color: white;
 }
 
-#tunnelEditPage #targetField, #tunnelEditPage #accessField, #tunnelEditPage #optionsField {
-     height: 48px;
-     width: 150px;
+::-moz-selection {
+     background: #030 !important;
+     color: white;
 }
 
-#tunnelEditPage #tunnelOptionsField {
-     height: 96px;
-     width: 150px;
+* {
+     outline: none;
 }
 
-#tunnelEditPage #targetField label, #tunnelEditPage #accessField label, #tunnelEditPage #tunnelOptionsField label, #tunnelEditPage #optionsField label{
-     height: 48px;
-     width: 150px;
+div {
+     -moz-box-sizing: border-box;
+     box-sizing: border-box;
 }
 
-#tunnelEditPage #reachField, #tunnelEditPage #hostField, #tunnelEditPage #depthField, #tunnelEditPage #countField, #tunnelEditPage #optionsHostField {
-     width: 304px;
-     margin-right: 4px;
+a {
+     text-decoration: none;
+     font-weight: bold;
 }
 
-#tunnelEditPage #portField, #tunnelEditPage #optionsPortField, #tunnelEditPage #backupField, #tunnelEditPage #varianceField {
-     width: 140px;
+a:link {
+     color: #494;
+     outline: none;
 }
 
-#tunnelEditPage #reachField label, #tunnelEditPage #hostField label, #tunnelEditPage #portField label, #tunnelEditPage #optionsHostField label, #tunnelEditPage #optionsPortField label, #tunnelEditPage #depthField label, #tunnelEditPage #countField label, #tunnelEditPage #backupField label, #tunnelEditPage #varianceField label {
-     text-align: left;
+a:visited {
+     color: #7b7;
+}
+
+a:hover, a:focus {
+     color: #f60;
+}
+
+a:active {
+     color: #f90;
+}
+
+.accesskey {
+     display: none !important;
+     text-decoration: underline;
+}
+
+form {
+     margin: 0;
+}
+
+br {
+     clear: left;
+}
+
+div.statusNotRunning {
+     height: 16px;
+     overflow: hidden;
+     color: #d00;
+     background: url(images/console_status_stopped.png) center center no-repeat;
+}
+
+div.statusRunning {
+     height: 16px;
+     overflow: hidden;
+     color: #0b0;
+     background: url(images/console_status_running.png) center center no-repeat;
+}
+
+div.statusStarting {
+     height: 16px;
+     overflow: hidden;
+     color: #393;
+     background: url(images/console_status_starting.png) center center no-repeat;
+}
+
+div[class^="status"] {
+     font-size: 0 !important;
+     background-position: center center;
+     text-align: center;
+     margin: 0;
+     padding: 0;
+     width: 100%;
+     background-size: auto 16px;
 }
 
-#tunnelEditPage #otherField label {
+hr {
+     display: none;
+}
+
+#clientHost {
      width: 300px;
 }
 
-#tunnelEditPage #reachableByOther, #tunnelEditPage #tunnelDepth, #tunnelEditPage #tunnelQuantity, #tunnelEditPage #targetHost, #tunnelEditPage #clientHost {
-     width: 306px;
+#clientPort {
+     width: 100px;
 }
 
-#tunnelEditPage #port {
-     width: 80px;
+.panel {
+     margin: 8px auto;
+     padding: 5px 3px 5px 1px !important;
+     width: calc(100% - 14px);
+     min-width: 540px;
+     max-width: 1400px;
+     overflow: hidden;
+     text-align: left;
+     color: #ee9;
+     background: none;
 }
 
-#tunnelEditPage #targetPort, #tunnelEditPage #clientPort, #tunnelEditPage #tunnelBackupQuantity, #tunnelEditPage #tunnelVariance {
-     width: 150px;
+.panel:first-child {
+     margin-top: 0;
 }
 
-#tunnelEditPage #shared, #tunnelEditPage #connectDelay, #tunnelEditPage #startOnLoad {
-     width: 16px;
+.panel:last-child {
+     margin-bottom: 5px;
 }
 
-#tunnelEditPage label {
-     width: 150px;
+.panel#clients {
+     margin-top: -23px !important;
+}
+
+.iframed .panel#clients {
+     margin-top: -20px !important;
+}
+
+.iframed .panel.iframed {
+     margin: 0 auto -8px auto !important;
+}
+
+.iframed .panel {
+     margin: 16px auto -8px auto !important;
+     width: 100%;
+}
+
+#globalTunnelControl {
+     margin: -13px auto -13px;
+}
+
+.iframed #globalTunnelControl {
+     margin: 6px auto -26px !important;
+}
+
+#serverTunnels {
+     margin: -1px 0 10px;
+}
+
+h2, h3 {
+     padding: 8px 10px;
+     border: 1px solid #494;
+     background: linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     margin: 5px 0 -1px;
+     color: #ee9;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+/* title images */
+
+h2, h3 {
+     padding-left: 32px;
+}
+
+#messages h2 {
+     background: url(/themes/console/images/info/logs.png) left 6px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#globalTunnelControl h2 {
+     background: url(/themes/console/images/info/control.png) left 6px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#servers h2 {
+     background: url(/themes/console/images/info/server.png) left 6px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#clients h2 {
+     background: url(/themes/console/images/info/client.png) left 6px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3 {
+     background: url(/themes/console/images/info/configure.png) left 6px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#wizardPanel h2 {
+     background: url(/themes/console/images/info/wizard.png) left 6px center no-repeat, linear-gradient(to bottom, #1a261a 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+/* end title images */
+
+.iframed h2 {
+     margin: 10px 0 -1px;
+}
+
+h3 {
+     border-radius: 0;
+     margin-top: 10px;
+}
+
+.iframed #globalTunnelControl h2 {
+     margin-top: 2px;
+}
+
+.panel table {
+     width: 100%;
+     border-collapse: collapse;
+     border: 1px solid #494;
+     margin: 0;
+}
+
+th {
+     background: #000;
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%);
+     padding: 6px 5px;
+     border-top: 1px solid #494;
+     border-bottom: 1px solid #494;
+     font-size: 9pt;
+     color: #ee9;
+     text-align: left;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+td {
+     border-top: 1px solid #494;
+     vertical-align: middle;
+     padding: 5px;
+     font-size: 9pt;
+}
+
+td > input {
+     margin-left: 0;
+}
+
+td > b {
+     margin-right: 5px;
+     display: inline-block;
+     min-width: 30px;
+}
+
+td.infohelp {
+     background: url(images/infohelp.png) 10px center no-repeat;
+     background-size: 20px 20px;
+     padding: 10px 10px 10px 38px !important;
+}
+
+.tunnelConfig td {
+     width: 50%;
+}
+
+.tunnelConfig th:first-child, .tunnelConfig td:first-child {
+     border-left: 1px solid #494;
+}
+
+.tunnelConfig th:last-child, .tunnelConfig td:last-child {
+     border-right: 1px solid #494;
+}
+
+#clientTunnels tr, #serverTunnels tr, .tunnelConfig tr {
+     background: rgba(0,4,0,0.4);
+}
+
+.tunnelProperties {
+     background: #000 !important;
+     overflow: hidden;
+     text-align: left;
+     border: 1px solid #494;
+     border-bottom: 1px inset #010 !important;
+}
+
+#serverTunnels {
+     margin: -1px 0 10px;
+}
+
+.tunnelProperties:hover {
+     background: #020 !important;
+}
+
+.newTunnel {
+     text-align: right;
+     border-top: 1px solid #494 !important;
+     padding: 5px !important;
+     background: #fff;
+}
+
+.newTunnel select, .newTunnel input, .newTunnel .control {
+     margin: 2px !important;
+}
+
+.newtunnel form {
+     width: 100%;
+     text-align: right;
+}
+
+.tunnelName {
+     width: 25%;
+     min-width: 150px;
+}
+
+.tunnelName a {
+     background: url(/themes/console/images/buttons/configure.png) left center no-repeat;
+     padding: 3px 3px 3px 20px !important;
+}
+
+.tunnelName a:hover {
+     filter: drop-shadow(0 0 1px #730);
+}
+
+.tunnelName a {
      font-weight: bold;
+}
+
+.tunnelType {
+     width: 25%;
+}
+
+.tunnelPreview {
+     text-align: left;
+}
+
+.tunnelPreview, .tunnelPort {
+     width: 15%;
+     text-align: center;
+}
+
+.tunnelLocation, .tunnelInterface {
+     width: 20%;
+}
+
+.tunnelLocation font[color="red"] {
+     margin-left: 3px;
+}
+
+.tunnelStatus {
+     text-align: center;
+     width: 10%;
+     min-width: 48px;
+}
+
+.tunnelControl {
+     width: 5%;
      text-align: right;
-     float: left;
+     white-space: nowrap;
 }
-/* I2P Tunnel List Page
-*/
 
-#tunnelListPage .rowItem {
-     width: 150px;
+th.tunnelControl {
+     text-align: center;
 }
 
-#tunnelListPage select {
-     width: 150px;
+textarea {
+     border: 1px solid #494;
+     background: #000;
+     margin-left: 4px;
+     margin-right: 4px;
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     resize: none;
+     box-sizing: border-box;
+     border-radius: 2px;
+}
+
+textarea:focus {
+     color: #ee9;
+     background: #000 !important;
+     filter: drop-shadow(0 0 1px #880);
+     transition: ease filter 0.3s 0s;
+     box-shadow: inset 0 0 1px #880;
+     font-weight: bold;
+     outline: none;
 }
 
-#tunnelListPage textarea {
+textarea[readonly]:focus {
+     font-weight: normal;
+}
+
+textarea#statusMessages, textarea#statusMessages:active, textarea#statusMessages:focus {
+     background: #000;
+     background: linear-gradient(to bottom, #000 0%, #010 100%) !important;
+     box-shadow: inset 0 0 3px 3px #000 !important;
+     margin: 0;
+     border: 0;
+     box-shadow: none;
+     height: 80px;
      width: 100%;
-     height: 100px;
+     border-radius: 0;
+     padding: 2px 4px;
+     color: #69f;
+     font-family: "Droid Sans Mono", "Noto Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+
+_:-ms-lang(x), textarea#statusMessages, textarea#statusMessages:active, textarea#statusMessages:focus {
+     box-shadow: none !important;
+}
+
+.freetext {
+     width: 150px;
+     border: 1px solid #494;
      padding: 4px;
-     margin: 0 0 3px 0;
-     background-color: #040;
-/*     background: #000 url("images/helitile.png")no-repeat scroll right top;*/
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     background: #fff;
+     color: #333;
+     border-radius: 2px;
+     box-shadow: inset 2px 2px 1px #ccc;
+}
+
+.freetext:focus {
+     box-shadow: 0 0 1px #f60;
+     color: #111;
+     font-weight: bold;
+     outline: none;
+}
+
+.freetext[readonly], .freetext[readonly]:focus {
+     background: #000 !important;
+     box-shadow: inset 2px 2px 1px #000;
+     color: #885;
+     cursor: default;
+     border: 1px solid #494 !important;
+     opacity: 0.8;
+     font-weight: normal;
+}
+
+input[type="hidden"], input.default {
+     display: none;
+}
+
+input, select, button, a {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     -moz-box-sizing: border-box;
+     box-sizing: border-box;
+     font-size: 9pt;
+     border-radius: 2px;
+     color: #ee9;
+     resize: none;
+     cursor: pointer;
+}
+
+input {
+     background-color: #020;
      color: #ee9;
-     font-family: "Lucida Console", "Andale Mono", "Courier New", Courier, mono;
-     border: 1px inset #002;
+     margin: 0 2px 0 2px;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     border: 1px solid #494;
+     text-decoration: none;
+}
+
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, button::-moz-focus-inner {
+     border: none;
+     outline: none;
+}
+
+input[type="file"] {
+     background: none;
+     border: none;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     vertical-align: middle;
+     min-width: 16px;
+     min-height: 16px;
+     margin: 0;
+     background: none;
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%); /* colorize radios and checkboxes */
+}
+
+input[type="checkbox"]:hover, input[type="radio"]:hover,
+input[type="checkbox"]:focus, input[type="radio"]:focus  {
+     outline: none;
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) drop-shadow(0 0 3px #f60);
+}
+
+label {
+     cursor: pointer;
+}
+
+input[type="password"] {
+     cursor: text;
 }
 
-#tunnelListPage .footer .control {
-     margin-left: 2px;
+input[type="text"], input[type="password"], textarea, textarea[readonly="readonly"]:focus  {
+     background: #000;
+     background: linear-gradient(to bottom, #000 0%, #010 100%);
+     box-shadow: inset 0 0 3px 3px #000;
+     filter: none;
+     color: #bb7;
+}
+
+textarea[readonly="readonly"]:focus {
+     box-shadow: inset 0 0 0 1px #880;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+     color: #ee9;
+     background: #000;
+     filter: drop-shadow(0 0 1px #880);
+     transition: ease filter 0.3s 0s;
+}
+
+input[readonly="readonly"]:focus {
+     filter: none;
+     background: linear-gradient(to bottom, #000 0%, #010 100%) !important;
+}
+
+a.control, input.control {
+     white-space: nowrap;
+     vertical-align: middle;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+.control {
+     margin: 2px 0 0 2px !important;
+     overflow: hidden;
+     min-width: 78px;
+     font-size: 8pt;
+     font-weight: bold;
+     background: #000;
+     background: linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important;
+     color: #494 !important;
+     border: 1px solid #8b8;
+     border-bottom: 1px solid #171;
+     border-right: 1px solid #171;
+     text-align: center;
+     white-space: nowrap;
+     border-radius: 2px;
+     vertical-align: middle;
+     text-decoration: none;
+     padding: 5px 8px !important;
+     -moz-box-sizing: border-box;
+     box-sizing: border-box;
+     display: inline-block;
+}
+
+.control:link {
      color: #494 !important;
      background: #000 !important;
+     background: linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important;
+}
+
+.control:hover {
+     border: 1px solid #f60;
+     background: #000;
+     color: #f60 !important;
+     text-decoration: none;
+     box-shadow: inset 0 1px 1px 0 #eff;
+}
+
+.control:visited {
+     color: #494 !important;
+     text-decoration: none;
+}
+
+.control, .control:link, .control:visited {
+     overflow: hidden;
+     margin: 2px !important;
+     text-align: center;
+     white-space: nowrap;
+     text-decoration: none;
+     font-style: normal;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #000;
+     box-sizing: border-box;
+     min-width: 70px !important;
+}
+
+.control:hover, .control:focus {
+     text-decoration: none;
+     color: #f60 !important;
+     border: 1px solid #f60 !important;
+     box-shadow: inset 0 1px 1px 0 #eff;
+}
+
+.control:active {
+     background: #f60 !important;
+     color: #ee9 !important;
+     text-decoration: none;
+     box-shadow: inset 0 0 0 1px #000 !important;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important;
+}
+
+a.control {
+     display: inline-block;
+}
+
+select {
+     color: #494;
+     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-weight: bold;
+     padding: 4px 16px 4px 4px !important;
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     background: #000 url(images/dropdown.png) right center no-repeat !important;
+     border-radius: 2px;
+     cursor: pointer;
+     filter: drop-shadow(0 0 1px #000);
+     border: 1px solid #8b8;
+     border-bottom: 1px solid #171;
+     border-right: 1px solid #171;
+     min-width: 120px;
+}
+
+select option { /* dropdown menu reverts to normal font-weight */
+     font-weight: normal;
+     font-size: 9.5pt;
+}
+
+select option:hover, select option:checked {
+     box-shadow: inset 0 0 20px 20px #f60;
+}
+
+select:focus, select:hover {
+     color: #f60;
+     border: 1px solid #f60;
+}
+
+select:hover {
+     box-shadow: inset 0 1px 1px 0 #ee9;
 }
 
-#tunnelListPage .footer .control:hover {
-     color: #F60 !important;
+select:hover, select:focus, select:active {
+     background: #000 url(images/dropdown_hover.png) right center no-repeat !important;
 }
 
-#tunnelListPage .footer .control:active {
-     color: #EE9 !important;
-     background: #F60 !important;
+select::-ms-expand {
+     display: none;
 }
-     
-#tunnelListPage .footer label {
+
+input, select, button {
+     font-size: 9pt;
+     vertical-align: middle;
+}
+
+button, input[type="submit"], input[type="reset"], a.control, select {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-weight: bold;
+     filter: drop-shadow(0 0 1px #131);
+}
+
+.buttons, .newTunnel {
+     text-align: right !important;
+     padding: 7px 5px !important;
+     background: #000;
+     background: linear-gradient(to bottom, #010, #000);
+     border-top: 1px solid #494 !important;
+}
+
+.tunnelDescriptionLabel, .tunnelDestinationLabel {
      text-align: right;
-     height: 24px;
-     width: 360px;
-     float: left;
-     margin-top: 6px;
-     margin-right: 5px;
+     min-width: 150px;
+     display: inline-block;
+     margin-right: 3px;
+     white-space: nowrap;
+}
+
+input {
+     float: none;
+     vertical-align: middle;
 }
 
-/* Use Leary and Langridge content replacement methods (LIR)
-** to embed accessibility information into the document.
-** Should allow the lists to be rendered nicely by
-** screen readers. (and lynx!)
-*/
+#hostField, #leasesetKey, #userAgents {
+     width: 90% !important;
+     margin: 0 !important;
+     text-align: left !important;
+}
 
-#tunnelListPage label {
-     height: 0;
-     width: 0;
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity {
+     white-space: nowrap;
      overflow: hidden;
+     text-overflow: ellipsis;
+     -o-text-overflow: ellipsis;
 }
 
-#tunnelListPage .nameHeaderField label, #tunnelListPage .portHeaderField label, #tunnelListPage .typeHeaderField label, #tunnelListPage .interfaceHeaderField label, #tunnelListPage .targetHeaderField label, #tunnelListPage .previewHeaderField label, #tunnelListPage .statusHeaderField label {
-     text-align: left;
-     width: 150px;
-     height: 28px;
-     float: left;
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity,
+#localDestination, #customOptions, #leasesetKey, #name, #description, textarea[name="accessList"] {
+     width: 100% !important;
+     margin: 0 !important;
+     text-align: left !important;
 }
 
-#tunnelListPage .targetField, #tunnelListPage .targetField .text, #tunnelListPage .targetHeaderField, #tunnelListPage .targetHeaderField label {
-     width: 300px;
+#oldName, #targetDestination, select#profile, select#connectionProfile {
+     min-width: 280px;
+     width: 30%;
+}
+
+select#profile, select#connectionProfile {
+     margin: 5px !important;
+}
+
+select#connectionProfile {
+     width: calc(100% - 10px);
+}
+
+td[colspan="2"] > select#profile {
+     width: calc(50% - 15px);
+}
+
+#customOptions, #userAgents {
+     width: calc(100% - 10px) !important;
+     width: 100% !important;
 }
 
-#tunnelListPage .descriptionField, #tunnelListPage .destinationField {
-     width: 750px;
+#localDestination, textarea[name="accessList"], #hostField {
+     width: calc(100% - 5px) !important;
+     width: 100% !important;
+     margin: 3px 0 !important;
 }
 
-#tunnelListPage .descriptionField .text, #tunnelListPage .destinationField input {
-     width: 590px;
+textarea[name="accessList"] {
+     margin: 0 !important;
+     height: 80px !important;
 }
 
-#tunnelListPage .descriptionField label, #tunnelListPage .destinationField label {
+#localDestination {
+     height: 34px !important;
+     margin: 0 !important;
+}
+
+#leasesetKey {
+     height: 24px !important;
+     padding: 3px;
+}
+
+.multiOption {
+     display: inline-block;
+     margin: 5px 10px 5px 0;
+}
+
+.multiOption input {
+     vertical-align: sub;
+}
+
+.multiOption#isServer {
+     background: url(/themes/console/images/server.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+.multiOption#isClient {
+     background: url(/themes/console/images/client.png) left center no-repeat;
+     padding-left: 21px;
+}
+
+td#throttle {
+     padding: 0;
+}
+
+#throttler {
+     border: none !important;
+}
+
+#throttler th {
+     padding-left: 20px;
+}
+
+#throttler td {
+     width: 20%;
+}
+
+#throttler td:first-child {
      text-align: right;
-     width: 150px;
-     height: 24px;
-     float: left;
+     width: 20%;
+     white-space: nowrap;
+}
+
+#throttler th:first-child, #throttler td:first-child {
+     border-left: none !important;
+}
+
+#throttler th:last-child, #throttler td:last-child {
+     border-right: none !important;
+}
+
+
+#throttler tr:first-child th {
+     border-top: none;
+}
+
+td.blankColumn {
+     width: 20% !important;
+}
+
+#throttler tr:nth-child(odd) {
+     background: rgba(0,16,0,0.7);
+}
+
+#throttler tr:nth-child(even) {
+     background: rgba(0,8,0,0.7);
+}
+
+#throttler input[type="text"] {
+     width: 80px;
+}
+
+table {
+     background: #000 url(images/camotile2.png);
+}
+
+#tunnelMessages {
+     padding: 0;
+}
+
+.required:not(old) {
+     display: none;
+}
+
+input::-moz-placeholder {
+     color: #f00;
+     font-weight: bold;
+     opacity: 1;
+}
+
+::-webkit-input-placeholder {
+     color: #f00;
+     font-weight: bold;
+     opacity: 1;
+}
+
+input:focus::-moz-placeholder {
+     opacity: 0;
+}
+
+:focus::-webkit-input-placeholder {
+     opacity: 0;
+}
+
+input.tunnelName, input.tunnelDescription, #userAgents {
+     width: 80%;
+     min-width: 280px;
+     text-overflow: ellipsis;
+}
+
+#websiteName, #privKeyFile, #targetHost, .host {
+     width: 30%;
+     min-width: 250px;
+}
+
+.port, .quantity, .period {
+     width: 80px;
+}
+
+.port[readonly] {
+     width: 120px;
+}
+
+.username, .password {
+     width: 200px;
+}
+
+.username {
+     background: url(/themes/console/images/buttons/user.png) 3px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%) !important;
+     padding-left: 22px;
+}
+
+.password {
+     background: url(/themes/console/images/buttons/password.png) 3px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%) !important;
+     padding-left: 22px;
+}
+
+.username:focus {
+     background: #000 url(/themes/console/images/buttons/user.png) 3px center no-repeat !important;
+}
+
+.password:focus {
+     background: #000 url(/themes/console/images/buttons/password.png) 3px center no-repeat !important;
+}
+
+.proxyList {
+     width: 40%;
+     min-width: 280px;
+}
+
+#notReady {
+     border: 1px solid #900;
+     padding: 30px;
+     background: #020;
+     margin: 30px auto;
+     width: 400px;
+     text-align: center;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #000;
+     font-size: 11pt;
+     font-weight: bold;
+}
+
+/* wizard specifics */
+
+#wizardPanel {
+    font-size: 10pt;
+}
+
+#wizardTable {
+     padding: 0;
+}
+
+#wizardTunnelTypes td:first-child, #wizardSummary td:first-child {
+     font-weight: bold;
+     width: 10%;
+     min-width: 150px;
+     text-align: right;
+     white-space: nowrap;
+}
+
+#wizardTunnelTypes td:last-child {
+     text-align: justify;
+     padding: 10px 15px 10px 10px;
+}
+
+#wizardTunnelTypes select {
+     margin-left: 0 !important;
+}
+
+#wizardTunnelTypes, #wizardSummary {
+     border: none;
+     margin-top: -1px;
+}
+
+#wizardTunnelTypes tr:nth-child(even), #wizardSummary tr:nth-child(even) {
+     background: #010;
+}
+
+#wizardTunnelTypes tr:nth-child(odd), #wizardSummary tr:nth-child(odd) {
+     background: #000800;
+}
+
+#wizardTunnelTypes tr:last-child {
+     background: #000;
+}
+
+#wizardPanel #name, #wizardPanel #description {
+     width: 300px !important;
+}
+
+#wizardPanel p {
+     padding: 5px;
+     margin: 0;
+     text-align: justify;
+}
+
+#wizardPanel input::-moz-placeholder {
+     color: #bb7;
+     font-weight: normal;
+}
+
+#wizardPanel ::-webkit-input-placeholder {
+     color: #bb7;
+     font-weight: normal;
+}
+
+#wizardPanel .options {
+     padding: 10px;
+}
+
+#wizardPanel .tag {
+     width: 10%;
+     min-width: 150px;
+     white-space: nowrap;
+     display: inline-block;
+     font-weight: bold;
+     text-align: right;
+     margin-right: 3px;
+}
+
+#wizardPanel select {
+     min-width: 160px;
+     margin: 5px 0 !important;
+}
+
+#wizardPanel .infohelp p { /* wizard complete - advanced options info */
+     margin: 0;
+     padding: 0;
+}
+
+/* more space */
+
+.tunnelConfig td, td {
+     border-top: 1px inset #1c3f1b;
+     padding: 5px;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     margin: 5px 3px 5px 5px;
+}
+
+.freetext, .tunnelConfig textarea, #customOptions, #userAgents, #hostField  {
+     margin: 5px !important;
+     cursor: text;
+}
+
+.multiOption {
+     margin: 5px 10px 5px 0;
+}
+
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity, #leasesetKey {
+     margin: 5px !important;
+     width: calc(100% - 10px) !important;
+}
+
+.tunnelConfig select, select#profile select#connectionProfile {
+     margin: 5px !important;
+}
+
+textarea[name="accessList"], #hostField, #localDestination, .authentication {
+     width: calc(100% - 10px) !important;
+     margin: 5px !important;
+}
+
+#customOptions, #userAgents, #leasesetKey {
+     width: calc(100% - 10px) !important;
+}
+
+.tunnelConfig td > b {
+     min-width: 30px;
+     display: inline-block;
+     margin-left: 5px;
+}
+
+.tunnelDestination {
+     padding-bottom: 1px !important;
+     border-bottom: 1px solid transparent !important;
+}
+
+_:-ms-lang(x), .tunnelDestination {
+     border-bottom: none !important;
+}
+
+_:-ms-lang(x), .tunnelDescription {
+     border-top: none !important;
+}
+
+_:-ms-lang(x), .tunnelProperties {
+     border-bottom: 1px solid #010 !important;
+}
+
+#clientTunnels .tunnelDescription {
+     padding-top: 1px !important;
+}
+
+.tunnelDestination b, .tunnelDescription b {
+     color: #bb7;
+}
+
+td.tunnelDestination, td.tunnelDescription {
+     background: linear-gradient(to right, #000 50%, #010);
+}
+
+/* end more space */
+
+/* responsive layout */
+
+@media screen and (max-width: 800px) {
+.statusNotRunning, .statusRunning, .statusStarting {
+     background-size: auto 14px;
+}
+
+#leasesetKey {
+     height: 38px !important;
+}
+
+.port, .quantity, .period {
+     width: 60px;
+}
+
+#clientHost, .host {
+     width: 200px;
+     min-width: 210px;
+}
+}
+
+@media screen and (max-width: 1400px) {
+h2,h3 {
+     font-size: 10.5pt;
+}
+}
+
+@media screen and (min-width: 1400px) {
+
+body, td, a, button, input, .control, select, textarea#statusMessages, .freetext, textarea {
+     font-size: 10pt;
+}
 }
diff --git a/installer/resources/themes/console/dark/images/chart.png b/installer/resources/themes/console/dark/images/chart.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e8273a659bc7c4b571f8c4b9bf7f94094021329
Binary files /dev/null and b/installer/resources/themes/console/dark/images/chart.png differ
diff --git a/installer/resources/themes/console/dark/images/dropdown.png b/installer/resources/themes/console/dark/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..077ee79136817191247bc8e4fe4223a99b63dfc9
Binary files /dev/null and b/installer/resources/themes/console/dark/images/dropdown.png differ
diff --git a/installer/resources/themes/console/dark/images/dropdown_active.png b/installer/resources/themes/console/dark/images/dropdown_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f115f98851233839bd411337191ef76f510b9bb
Binary files /dev/null and b/installer/resources/themes/console/dark/images/dropdown_active.png differ
diff --git a/installer/resources/themes/console/dark/images/dropdown_hover.png b/installer/resources/themes/console/dark/images/dropdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ffcca9c9b867994cf27dcac5df46d0928fef47c5
Binary files /dev/null and b/installer/resources/themes/console/dark/images/dropdown_hover.png differ
diff --git a/installer/resources/themes/console/dark/images/eye.png b/installer/resources/themes/console/dark/images/eye.png
new file mode 100644
index 0000000000000000000000000000000000000000..403aaa4126f68d7eeed54fa620142905e600387e
Binary files /dev/null and b/installer/resources/themes/console/dark/images/eye.png differ
diff --git a/installer/resources/themes/console/dark/images/help.png b/installer/resources/themes/console/dark/images/help.png
new file mode 100644
index 0000000000000000000000000000000000000000..be52814717ef790cd13d33c7ec1fc9c5d14b0eb2
Binary files /dev/null and b/installer/resources/themes/console/dark/images/help.png differ
diff --git a/installer/resources/themes/console/dark/images/help_dark.png b/installer/resources/themes/console/dark/images/help_dark.png
deleted file mode 100644
index d61716906115c5bfb79ca231448cd70d3df999b9..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/dark/images/help_dark.png and /dev/null differ
diff --git a/installer/resources/themes/console/dark/images/i2plogo.png b/installer/resources/themes/console/dark/images/i2plogo.png
index 872e4a10afde5871759f8412fa1304562b3fd391..ecc328065b6b416a696659cdf819f870996f6e4e 100644
Binary files a/installer/resources/themes/console/dark/images/i2plogo.png and b/installer/resources/themes/console/dark/images/i2plogo.png differ
diff --git a/installer/resources/themes/console/dark/images/info_dark.png b/installer/resources/themes/console/dark/images/info_dark.png
deleted file mode 100644
index 678d2e6ba962a63ff0925e9b818dd8a1f7d290f8..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/dark/images/info_dark.png and /dev/null differ
diff --git a/installer/resources/themes/console/dark/images/infohelp.png b/installer/resources/themes/console/dark/images/infohelp.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ea7114b32b8ea3ab155a10f9b63b08e3b413a38
Binary files /dev/null and b/installer/resources/themes/console/dark/images/infohelp.png differ
diff --git a/installer/resources/themes/console/dark/images/infowarn.png b/installer/resources/themes/console/dark/images/infowarn.png
new file mode 100644
index 0000000000000000000000000000000000000000..e7ddbffa40a26ea014f56cb66df97d793035192c
Binary files /dev/null and b/installer/resources/themes/console/dark/images/infowarn.png differ
diff --git a/installer/resources/themes/console/dark/images/link_dark.png b/installer/resources/themes/console/dark/images/link_dark.png
deleted file mode 100644
index e33c92544f0daf08363c3a6156beb43d1f22d4b4..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/dark/images/link_dark.png and /dev/null differ
diff --git a/installer/resources/themes/console/dark/images/magnet.png b/installer/resources/themes/console/dark/images/magnet.png
new file mode 100644
index 0000000000000000000000000000000000000000..43fcc27e6c1e8ef80fe7741cb3206dd5566226f5
Binary files /dev/null and b/installer/resources/themes/console/dark/images/magnet.png differ
diff --git a/installer/resources/themes/console/dark/images/mail.png b/installer/resources/themes/console/dark/images/mail.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e2c3f281824fab6f1adbd62df0c330021f86af5
Binary files /dev/null and b/installer/resources/themes/console/dark/images/mail.png differ
diff --git a/installer/resources/themes/console/dark/images/news.jpg b/installer/resources/themes/console/dark/images/news.jpg
deleted file mode 100644
index be3d8fb6adbd3a16589cac540370015a559bac80..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/dark/images/news.jpg and /dev/null differ
diff --git a/installer/resources/themes/console/dark/images/scarface.png b/installer/resources/themes/console/dark/images/scarface.png
deleted file mode 100644
index d9e2b2e609a9f37b4c4ecbd8d9001d76b1449e17..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/dark/images/scarface.png and /dev/null differ
diff --git a/installer/resources/themes/console/dark/images/sort_down.png b/installer/resources/themes/console/dark/images/sort_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..74250ec7a431e6b1c44a136a45b672146fc27684
Binary files /dev/null and b/installer/resources/themes/console/dark/images/sort_down.png differ
diff --git a/installer/resources/themes/console/dark/images/sort_up.png b/installer/resources/themes/console/dark/images/sort_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..60cf6c95add71764f8e196675773876d756177d3
Binary files /dev/null and b/installer/resources/themes/console/dark/images/sort_up.png differ
diff --git a/installer/resources/themes/console/dark/images/thumbnail.png b/installer/resources/themes/console/dark/images/thumbnail.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea6d57809258e0000c45e83a9eb19dead22ced59
Binary files /dev/null and b/installer/resources/themes/console/dark/images/thumbnail.png differ
diff --git a/installer/resources/themes/console/dark/images/tile.png b/installer/resources/themes/console/dark/images/tile.png
deleted file mode 100644
index c8f98b265782ca33085aac87ee93d1679e5812ad..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/dark/images/tile.png and /dev/null differ
diff --git a/installer/resources/themes/console/dark/images/warning24x24.png b/installer/resources/themes/console/dark/images/warning24x24.png
new file mode 100644
index 0000000000000000000000000000000000000000..52c2a7cfc9af3e189085f6f076e205833aa309c9
Binary files /dev/null and b/installer/resources/themes/console/dark/images/warning24x24.png differ
diff --git a/installer/resources/themes/console/dark/images/webmail.png b/installer/resources/themes/console/dark/images/webmail.png
new file mode 100644
index 0000000000000000000000000000000000000000..335b5e4ebdba9377ec8f81cb0dcf12a400e06df3
Binary files /dev/null and b/installer/resources/themes/console/dark/images/webmail.png differ
diff --git a/installer/resources/themes/console/dark/images/webserver.png b/installer/resources/themes/console/dark/images/webserver.png
new file mode 100644
index 0000000000000000000000000000000000000000..5330c5502e2ea8ff48f5c392675419aec2586d80
Binary files /dev/null and b/installer/resources/themes/console/dark/images/webserver.png differ
diff --git a/installer/resources/themes/console/dark/mobile.css b/installer/resources/themes/console/dark/mobile.css
index 2f211ab2bc9922d72500821337c0b39a9970f185..da7435d2c641e1f952cf339b3b38bd86d2ccae48 100644
--- a/installer/resources/themes/console/dark/mobile.css
+++ b/installer/resources/themes/console/dark/mobile.css
@@ -1,30 +1,156 @@
+/* Console Theme "Dark" - Mobile Override */
+
+body {
+     padding: 0 5px;
+     margin: 5px 0 !important;
+}
+
+div#xhr {
+     width: 617px;
+     margin: 0 auto;
+}
+
 div.routersummaryouter {
-     float: none;
-     margin: 0 5px 10px;
      position: relative;
+     float: none;
      width: auto;
+     margin: 0 0 5px;
 }
 
 div.routersummary {
      float: none;
-     width: auto;
+     width: 600px;
+     margin: 0 auto;
+}
+
+div[style="height: 36px;"] {
+     height: auto !important;
+}
+
+div.routersummary img[src$="i2plogo.png"] {
+     width: 357px;
+     margin-top: 6px;
+}
+
+@media screen and (min-width: 1500px) {
+div.routersummary {
+     width: 600px !important;
+}
+
+.routersummary table[id^="sb_"] {
+     width: 600px !important;
+}
+}
+
+div[style^='height'] + a {
+     display: inline-block;
+     padding-top: 8px !important;
+}
+
+.routersummary td,
+.routersummary a,
+.routersummary h4,
+.routersummary h4 a,
+.routersummary button {
+     font-size: 10pt !important;
+}
+
+.routersummary h3 a {
+     font-size: 11pt !important;
+     padding: 3px 1px;
+}
+
+div.routersummary table,
+.routersummary table[id^='sb_'] {
+     min-width: 100% !important;
+     min-width: calc(100% - 1px) !important;
+     margin-bottom: -7px !important;
+}
+
+#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+     margin-bottom: -8px !important;
 }
 
-div.routersummary table {
-     width: 100% !important;
+#sb_localtunnels {
+     margin-top: -5px !important;
+}
+
+.routersummary tr:nth-child(odd) td {
+     padding: 3px;
+     background: #020;
+     background: rgba(0,34,0,.5);
+}
+
+.routersummary tr:nth-child(even) td {
+     padding: 3px;
+     background: #000;
+     background: rgba(0,0,0,.3);
+}
+
+.routersummary tr td {
+     border-top: 1px inset #000 !important;
+     border-bottom: 1px inset #000 !important;
+}
+
+.routersummary tr:hover td {
+     border-top: 1px solid #030 !important;
+     border-bottom: 1px solid #030 !important;
+}
+
+.routersummary tr:hover td {
+     background: #020;
+}
+
+.routersummary h3,
+.routersummary h4,
+.routersummary hr {
+     margin-right: 7px !important;
+     margin-left: -11px !important;
+}
+
+div.routersummary h4 {
+     margin: -6px 7px -8px -10px !important;
+}
+
+div.routersummary form {
+     margin: -2px 5px -4px -11px !important;
+}
+
+.routersummary button[type="submit"], .routersummary button[type="cancel"] {
+     margin: 5px 10px !important;
+     padding: 8px 5px !important;
+     min-width: 120px !important;
 }
 
 h1 {
-     margin: 0 5px !important;
-     min-width: 0;
+     min-width: 590px;
+     margin: 0 !important;
+}
+
+div.news {
+     min-width: 590px;
+     margin: -1px 0 0;
 }
 
+div.main {
+     min-width: 590px;
+     margin: -1px 0 5px;
+}
+
+.sorry {
+     margin: -1px 0 0 !important;
+}
+
+@media screen and (min-width: 1500px) {
 div.news {
-     margin: -1px 5px 0;
-     min-width: 0;
+     margin: -1px 0 0 !important;
 }
 
 div.main {
-     margin: -1px 5px 5px;
-     min-width: 0;
+     margin: -1px 0 5px !important;
+}
+
+.sorry {
+     margin: -1px 0 0 !important;
 }
+}
\ No newline at end of file
diff --git a/installer/resources/themes/console/images/accept.png b/installer/resources/themes/console/images/accept.png
deleted file mode 100644
index 89c8129a490b329f3165f32fa0781701aab417ea..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/accept.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/arrow_down.png b/installer/resources/themes/console/images/arrow_down.png
deleted file mode 100644
index 2c4e279377bf348f9cf53894e76bb673ccf067bd..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/arrow_down.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/arrow_left.png b/installer/resources/themes/console/images/arrow_left.png
deleted file mode 100644
index 5dc696781e6135d37b5bf2e98e46fd94f020c48d..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/arrow_left.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/arrow_refresh.png b/installer/resources/themes/console/images/arrow_refresh.png
deleted file mode 100644
index 0de26566d4102eec080253c2d08985ec58b14838..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/arrow_refresh.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/arrow_right.png b/installer/resources/themes/console/images/arrow_right.png
deleted file mode 100644
index b1a1819238c6de8f9e50988f4151261fa6ba64ea..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/arrow_right.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/arrow_turn_left.png b/installer/resources/themes/console/images/arrow_turn_left.png
deleted file mode 100644
index a3d6c9e39e0a888d436f42623c3220323cdb6437..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/arrow_turn_left.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/arrow_up.png b/installer/resources/themes/console/images/arrow_up.png
deleted file mode 100644
index 1ebb193243780b8eb1919a51ef27c2a0d36ccec2..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/arrow_up.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/buttons/Xstart.png b/installer/resources/themes/console/images/buttons/Xstart.png
new file mode 100644
index 0000000000000000000000000000000000000000..195a9d707b853c9fc591a518bdd0cbb6e450d115
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/Xstart.png differ
diff --git a/installer/resources/themes/console/images/buttons/Xstop.png b/installer/resources/themes/console/images/buttons/Xstop.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdaeb855ae006cf6d123d3ee5a7df3ac1d6b8263
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/Xstop.png differ
diff --git a/installer/resources/themes/console/images/buttons/add.png b/installer/resources/themes/console/images/buttons/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..f64b0119977b809536bc29d6e9d6eb4ded98cd93
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/add.png differ
diff --git a/installer/resources/themes/console/images/buttons/add_address.png b/installer/resources/themes/console/images/buttons/add_address.png
new file mode 100644
index 0000000000000000000000000000000000000000..35facf6b3473c9c276475bf38661706ece213ef6
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/add_address.png differ
diff --git a/installer/resources/themes/console/images/buttons/ban.png b/installer/resources/themes/console/images/buttons/ban.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a368df09f18b1bfced6e4d179b9c0053f0b2748
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/ban.png differ
diff --git a/installer/resources/themes/console/images/buttons/clean.png b/installer/resources/themes/console/images/buttons/clean.png
new file mode 100644
index 0000000000000000000000000000000000000000..96d8cf84d2eaeb82c2a4ccf4a34b5b5c803f96c2
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/clean.png differ
diff --git a/installer/resources/themes/console/images/buttons/clean_hover.png b/installer/resources/themes/console/images/buttons/clean_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..e28a5bea9b3b753c94d0b4f3dfb5d17d84580aa0
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/clean_hover.png differ
diff --git a/installer/resources/themes/console/images/buttons/configure.png b/installer/resources/themes/console/images/buttons/configure.png
new file mode 100644
index 0000000000000000000000000000000000000000..8151463917ec88ca0962a5bfefb9f11c9122bff8
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/configure.png differ
diff --git a/installer/resources/themes/console/images/buttons/configure_hover.png b/installer/resources/themes/console/images/buttons/configure_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..59a0602126f37d948006661ece2d396dfe98a9af
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/configure_hover.png differ
diff --git a/installer/resources/themes/console/images/buttons/create-file.png b/installer/resources/themes/console/images/buttons/create-file.png
new file mode 100644
index 0000000000000000000000000000000000000000..f866cf65f0a61ac08b6cf180e6f7170244b1eac6
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/create-file.png differ
diff --git a/installer/resources/themes/console/images/buttons/create-file_.png b/installer/resources/themes/console/images/buttons/create-file_.png
new file mode 100644
index 0000000000000000000000000000000000000000..a9ad768c2a4fd92c26f3b5b0890e042879fa5462
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/create-file_.png differ
diff --git a/installer/resources/themes/console/images/buttons/create.png b/installer/resources/themes/console/images/buttons/create.png
new file mode 100644
index 0000000000000000000000000000000000000000..731cb56ae32cc22e97ba64a56b7ab2df16a0b850
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/create.png differ
diff --git a/installer/resources/themes/console/images/buttons/delete.png b/installer/resources/themes/console/images/buttons/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0d4b0201b9fc3f6f6da0c9b888822eafaac8414
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/delete.png differ
diff --git a/installer/resources/themes/console/images/buttons/delete_hover.png b/installer/resources/themes/console/images/buttons/delete_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fc6c589673a8b757823977d67ca9c719452001c
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/delete_hover.png differ
diff --git a/installer/resources/themes/console/images/buttons/download.png b/installer/resources/themes/console/images/buttons/download.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e06cda0974991703e0e8b1ef65ce67d47ebba70
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/download.png differ
diff --git a/installer/resources/themes/console/images/buttons/dump-threads.png b/installer/resources/themes/console/images/buttons/dump-threads.png
new file mode 100644
index 0000000000000000000000000000000000000000..24cb04ec597e57a0aedd49f7cfa81c5042144ea0
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/dump-threads.png differ
diff --git a/installer/resources/themes/console/images/buttons/edit.png b/installer/resources/themes/console/images/buttons/edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..e6f2ca02bb9aa67e8cc5c214fc3803667060e97d
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/edit.png differ
diff --git a/installer/resources/themes/console/images/buttons/edit2.png b/installer/resources/themes/console/images/buttons/edit2.png
new file mode 100644
index 0000000000000000000000000000000000000000..16c440c86787658b3df8c005b0d27df9c8a6a6fe
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/edit2.png differ
diff --git a/installer/resources/themes/console/images/buttons/filter.png b/installer/resources/themes/console/images/buttons/filter.png
new file mode 100644
index 0000000000000000000000000000000000000000..35f1d2596041194e48eb476b141bbd22ff247594
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/filter.png differ
diff --git a/installer/resources/themes/console/images/buttons/floodfill.png b/installer/resources/themes/console/images/buttons/floodfill.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f23f0ee2d36b1d515de0f9933675b94fb336e5a
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/floodfill.png differ
diff --git a/installer/resources/themes/console/images/buttons/from-file.png b/installer/resources/themes/console/images/buttons/from-file.png
new file mode 100644
index 0000000000000000000000000000000000000000..d031ca5eeb490845b60c47ff795078e50bf6ab10
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/from-file.png differ
diff --git a/installer/resources/themes/console/images/buttons/fullview.png b/installer/resources/themes/console/images/buttons/fullview.png
new file mode 100644
index 0000000000000000000000000000000000000000..d199572eea6098963790d538fa9ce1bf48e1cd58
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/fullview.png differ
diff --git a/installer/resources/themes/console/images/buttons/go.png b/installer/resources/themes/console/images/buttons/go.png
new file mode 100644
index 0000000000000000000000000000000000000000..1799620988456b4fd515e7550988bd337404d5fc
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/go.png differ
diff --git a/installer/resources/themes/console/images/buttons/helper.png b/installer/resources/themes/console/images/buttons/helper.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c0174e4a57df391c343fbbd5090871e35c6b398
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/helper.png differ
diff --git a/installer/resources/themes/console/images/buttons/hide.png b/installer/resources/themes/console/images/buttons/hide.png
new file mode 100644
index 0000000000000000000000000000000000000000..e3f213c6672513ef17c74eb3c3df978e90ef5a32
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/hide.png differ
diff --git a/installer/resources/themes/console/images/buttons/link.png b/installer/resources/themes/console/images/buttons/link.png
new file mode 100644
index 0000000000000000000000000000000000000000..546d07a12134ac9ee94203f7f60837d46fe125ed
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/link.png differ
diff --git a/installer/resources/themes/console/images/buttons/no.png b/installer/resources/themes/console/images/buttons/no.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6921565df89bbffb6188df01e7cabd763e20e67
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/no.png differ
diff --git a/installer/resources/themes/console/images/buttons/password.png b/installer/resources/themes/console/images/buttons/password.png
new file mode 100644
index 0000000000000000000000000000000000000000..af990d2cb8b599e507be610d248c16ac6b9293da
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/password.png differ
diff --git a/installer/resources/themes/console/images/buttons/restart.png b/installer/resources/themes/console/images/buttons/restart.png
new file mode 100644
index 0000000000000000000000000000000000000000..06f1ee390a69aede315c33ab6ba8c085bcdd003e
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/restart.png differ
diff --git a/installer/resources/themes/console/images/buttons/restart_hover.png b/installer/resources/themes/console/images/buttons/restart_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c5605506772be9ca53f69e424c4a37a98375c02
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/restart_hover.png differ
diff --git a/installer/resources/themes/console/images/buttons/restore.png b/installer/resources/themes/console/images/buttons/restore.png
new file mode 100644
index 0000000000000000000000000000000000000000..e55a304d632a7f4a67f49b35a8eb5c5c5b63d4ef
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/restore.png differ
diff --git a/installer/resources/themes/console/images/buttons/restore_hover.png b/installer/resources/themes/console/images/buttons/restore_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..68a754a5c1559d0775fa68288c6680f38e04b067
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/restore_hover.png differ
diff --git a/installer/resources/themes/console/images/buttons/search.png b/installer/resources/themes/console/images/buttons/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b289ed04b228b3a4767b9921fcf8df6b978360e
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/search.png differ
diff --git a/installer/resources/themes/console/images/buttons/search_hover.png b/installer/resources/themes/console/images/buttons/search_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee0b3596892101efc1699f67fbac3ba0c95e83b9
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/search_hover.png differ
diff --git a/installer/resources/themes/console/images/buttons/show.png b/installer/resources/themes/console/images/buttons/show.png
new file mode 100644
index 0000000000000000000000000000000000000000..403aaa4126f68d7eeed54fa620142905e600387e
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/show.png differ
diff --git a/installer/resources/themes/console/images/buttons/shutdown.png b/installer/resources/themes/console/images/buttons/shutdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..c697b305cb5a162a1e5efdff1a43d9e9ca29ffe8
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/shutdown.png differ
diff --git a/installer/resources/themes/console/images/buttons/shutdown_hover.png b/installer/resources/themes/console/images/buttons/shutdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..3905ce6c1820415855ba74b4cc72849c138969b3
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/shutdown_hover.png differ
diff --git a/installer/resources/themes/console/images/buttons/unban.png b/installer/resources/themes/console/images/buttons/unban.png
new file mode 100644
index 0000000000000000000000000000000000000000..45b52416ba84390efc1e48ad83d37dd406daffee
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/unban.png differ
diff --git a/installer/resources/themes/console/images/buttons/update.png b/installer/resources/themes/console/images/buttons/update.png
new file mode 100644
index 0000000000000000000000000000000000000000..c932759e7fa7f4ac473db118c8808544daf06cf2
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/update.png differ
diff --git a/installer/resources/themes/console/images/buttons/update_hover.png b/installer/resources/themes/console/images/buttons/update_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..94adf70a972b431d5258b0f95825207745949b85
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/update_hover.png differ
diff --git a/installer/resources/themes/console/images/buttons/user.png b/installer/resources/themes/console/images/buttons/user.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e8cb7da882855458ae5a900542b3092d6220400
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/user.png differ
diff --git a/installer/resources/themes/console/images/buttons/users.png b/installer/resources/themes/console/images/buttons/users.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c32daba001660cf9a7196963f6dcea1ca197493
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/users.png differ
diff --git a/installer/resources/themes/console/images/buttons/yes.png b/installer/resources/themes/console/images/buttons/yes.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7d7a96be3f2282a62e3c0733bac89c7f6de7b4a
Binary files /dev/null and b/installer/resources/themes/console/images/buttons/yes.png differ
diff --git a/installer/resources/themes/console/images/cancel.png b/installer/resources/themes/console/images/cancel.png
deleted file mode 100644
index c149c2bc017d5ce5a8ae9330dd7dbd012482e0f4..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/cancel.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/colomboicon.png b/installer/resources/themes/console/images/colomboicon.png
deleted file mode 100644
index b64020f173b262bf02971c2ad62e4041acffefa0..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/colomboicon.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/cursor_zoom.png b/installer/resources/themes/console/images/cursor_zoom.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c4277f783da90e7d34f95fe288896c3aebad203
Binary files /dev/null and b/installer/resources/themes/console/images/cursor_zoom.png differ
diff --git a/installer/resources/themes/console/images/delete.png b/installer/resources/themes/console/images/delete.png
deleted file mode 100644
index 08f249365afd29594b51210c6e21ba253897505d..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/delete.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/info/author.png b/installer/resources/themes/console/images/info/author.png
new file mode 100644
index 0000000000000000000000000000000000000000..fce8a9ea096f42cc2cb29793a6f2c5145cd3d3cd
Binary files /dev/null and b/installer/resources/themes/console/images/info/author.png differ
diff --git a/installer/resources/themes/console/images/info/author_dark.png b/installer/resources/themes/console/images/info/author_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..76a816fa64d4f1622f515c7068e8038279b3d093
Binary files /dev/null and b/installer/resources/themes/console/images/info/author_dark.png differ
diff --git a/installer/resources/themes/console/images/info/backlogged.png b/installer/resources/themes/console/images/info/backlogged.png
new file mode 100644
index 0000000000000000000000000000000000000000..5e8d97df56122ac26defa177ce5c234e5eefe83e
Binary files /dev/null and b/installer/resources/themes/console/images/info/backlogged.png differ
diff --git a/installer/resources/themes/console/images/info/bandwidth.png b/installer/resources/themes/console/images/info/bandwidth.png
new file mode 100644
index 0000000000000000000000000000000000000000..9216261b20c36d38bc40a03064425cc6ccdb09b3
Binary files /dev/null and b/installer/resources/themes/console/images/info/bandwidth.png differ
diff --git a/installer/resources/themes/console/images/info/blocked.png b/installer/resources/themes/console/images/info/blocked.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2eee435361b69026de902c74a78e84a05be291a
Binary files /dev/null and b/installer/resources/themes/console/images/info/blocked.png differ
diff --git a/installer/resources/themes/console/images/info/blocked_.png b/installer/resources/themes/console/images/info/blocked_.png
new file mode 100644
index 0000000000000000000000000000000000000000..838112b604626bff77c7c53a742341beda012a58
Binary files /dev/null and b/installer/resources/themes/console/images/info/blocked_.png differ
diff --git a/installer/resources/themes/console/images/info/box.png b/installer/resources/themes/console/images/info/box.png
new file mode 100644
index 0000000000000000000000000000000000000000..669b150a12716ea27bb871fdebf40caef2f56a8b
Binary files /dev/null and b/installer/resources/themes/console/images/info/box.png differ
diff --git a/installer/resources/themes/console/images/info/bugreport.png b/installer/resources/themes/console/images/info/bugreport.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8f268677e8acad17dcef1e52f6bbb38bc426323
Binary files /dev/null and b/installer/resources/themes/console/images/info/bugreport.png differ
diff --git a/installer/resources/themes/console/images/info/client.png b/installer/resources/themes/console/images/info/client.png
new file mode 100644
index 0000000000000000000000000000000000000000..3df5c7e27ab5f94a7d3b9342b73b7a9373b093c1
Binary files /dev/null and b/installer/resources/themes/console/images/info/client.png differ
diff --git a/installer/resources/themes/console/images/info/configure.png b/installer/resources/themes/console/images/info/configure.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4db1af4dd439faddd79c16056c390945ce7b56f
Binary files /dev/null and b/installer/resources/themes/console/images/info/configure.png differ
diff --git a/installer/resources/themes/console/images/info/connect.png b/installer/resources/themes/console/images/info/connect.png
new file mode 100644
index 0000000000000000000000000000000000000000..203b5e24e74f7c1fac622dfdd4be80c8307914a9
Binary files /dev/null and b/installer/resources/themes/console/images/info/connect.png differ
diff --git a/installer/resources/themes/console/images/info/console.png b/installer/resources/themes/console/images/info/console.png
new file mode 100644
index 0000000000000000000000000000000000000000..305109c4ac61e27f3bcb91504e7f50dc1888645b
Binary files /dev/null and b/installer/resources/themes/console/images/info/console.png differ
diff --git a/installer/resources/themes/console/images/info/control.png b/installer/resources/themes/console/images/info/control.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7a4f6d2256b889faebaba28d106af72b63d5366
Binary files /dev/null and b/installer/resources/themes/console/images/info/control.png differ
diff --git a/installer/resources/themes/console/images/info/debug.png b/installer/resources/themes/console/images/info/debug.png
new file mode 100644
index 0000000000000000000000000000000000000000..e803eb1efbecff7503457d1a82e2d618ecd31188
Binary files /dev/null and b/installer/resources/themes/console/images/info/debug.png differ
diff --git a/installer/resources/themes/console/dark/images/errortriangle.png b/installer/resources/themes/console/images/info/errortriangle.png
similarity index 100%
rename from installer/resources/themes/console/dark/images/errortriangle.png
rename to installer/resources/themes/console/images/info/errortriangle.png
diff --git a/installer/resources/themes/console/images/info/experimental.png b/installer/resources/themes/console/images/info/experimental.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e3d2bad4f69a92268e3faae694d0a8f59083bd9
Binary files /dev/null and b/installer/resources/themes/console/images/info/experimental.png differ
diff --git a/installer/resources/themes/console/images/info/export_key.png b/installer/resources/themes/console/images/info/export_key.png
new file mode 100644
index 0000000000000000000000000000000000000000..800ecaf19d539f14beaad2af9f7de02574c4642d
Binary files /dev/null and b/installer/resources/themes/console/images/info/export_key.png differ
diff --git a/installer/resources/themes/console/images/info/family.png b/installer/resources/themes/console/images/info/family.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ebec84b0daa0b7553c0fc6f382a51e5c546d09d
Binary files /dev/null and b/installer/resources/themes/console/images/info/family.png differ
diff --git a/installer/resources/themes/console/images/info/floodfill_32x32.png b/installer/resources/themes/console/images/info/floodfill_32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..39875930d763243a8367f117b24eca8f0047563e
Binary files /dev/null and b/installer/resources/themes/console/images/info/floodfill_32x32.png differ
diff --git a/installer/resources/themes/console/images/info/from_file.png b/installer/resources/themes/console/images/info/from_file.png
new file mode 100644
index 0000000000000000000000000000000000000000..cebd1dc663e5a653812839afe22be3248cff5c02
Binary files /dev/null and b/installer/resources/themes/console/images/info/from_file.png differ
diff --git a/installer/resources/themes/console/images/info/globe.png b/installer/resources/themes/console/images/info/globe.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2ebc9c984d530a6daa101bceeac3b8c11817ca2
Binary files /dev/null and b/installer/resources/themes/console/images/info/globe.png differ
diff --git a/installer/resources/themes/console/images/info/home.png b/installer/resources/themes/console/images/info/home.png
new file mode 100644
index 0000000000000000000000000000000000000000..51e3c50339298d6dc88d4191d04acdb52d2793c1
Binary files /dev/null and b/installer/resources/themes/console/images/info/home.png differ
diff --git a/installer/resources/themes/console/images/info/infohelp.png b/installer/resources/themes/console/images/info/infohelp.png
new file mode 100644
index 0000000000000000000000000000000000000000..22f09355d3d12d8a6e2e30c403ee51d0e9618f6a
Binary files /dev/null and b/installer/resources/themes/console/images/info/infohelp.png differ
diff --git a/installer/resources/themes/console/images/info/infowarn.png b/installer/resources/themes/console/images/info/infowarn.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5ddc8527690e1e86bd47de685d785fed11f966d
Binary files /dev/null and b/installer/resources/themes/console/images/info/infowarn.png differ
diff --git a/installer/resources/themes/console/images/info/interval.png b/installer/resources/themes/console/images/info/interval.png
new file mode 100644
index 0000000000000000000000000000000000000000..556445d22c3e96c315a48cfba880e2ea24e025e5
Binary files /dev/null and b/installer/resources/themes/console/images/info/interval.png differ
diff --git a/installer/resources/themes/console/images/info/java_edit.png b/installer/resources/themes/console/images/info/java_edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..d6cb9ee2afef8cfb3886d605222e918a96812669
Binary files /dev/null and b/installer/resources/themes/console/images/info/java_edit.png differ
diff --git a/installer/resources/themes/console/images/info/key.png b/installer/resources/themes/console/images/info/key.png
new file mode 100644
index 0000000000000000000000000000000000000000..3cf460e1126ce5c67b2fc0d4166eb4bc6f409e20
Binary files /dev/null and b/installer/resources/themes/console/images/info/key.png differ
diff --git a/installer/resources/themes/console/images/info/keys.png b/installer/resources/themes/console/images/info/keys.png
new file mode 100644
index 0000000000000000000000000000000000000000..23cda1a3ff5eb4cd599906b910ee89a476d14ad7
Binary files /dev/null and b/installer/resources/themes/console/images/info/keys.png differ
diff --git a/installer/resources/themes/console/images/info/label.png b/installer/resources/themes/console/images/info/label.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a2c8e85a9dbf782b5583bc397cbf9cf307202e2
Binary files /dev/null and b/installer/resources/themes/console/images/info/label.png differ
diff --git a/installer/resources/themes/console/images/info/launch_browser.png b/installer/resources/themes/console/images/info/launch_browser.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b800f1b2281266f64f3a5b5be97b5018f2ad114
Binary files /dev/null and b/installer/resources/themes/console/images/info/launch_browser.png differ
diff --git a/installer/resources/themes/console/images/info/leave_family.png b/installer/resources/themes/console/images/info/leave_family.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc79590fa7e4be9b9efb58a3edd37ead804592b9
Binary files /dev/null and b/installer/resources/themes/console/images/info/leave_family.png differ
diff --git a/installer/resources/themes/console/images/info/logs.png b/installer/resources/themes/console/images/info/logs.png
new file mode 100644
index 0000000000000000000000000000000000000000..260f8975d2fa437ecc6f8ad0991169a28bb9b798
Binary files /dev/null and b/installer/resources/themes/console/images/info/logs.png differ
diff --git a/installer/resources/themes/console/images/info/newspaper.png b/installer/resources/themes/console/images/info/newspaper.png
new file mode 100644
index 0000000000000000000000000000000000000000..06a2902feccd4dafd1761a1c78e1efc24fc6817b
Binary files /dev/null and b/installer/resources/themes/console/images/info/newspaper.png differ
diff --git a/installer/resources/themes/console/images/info/notice.png b/installer/resources/themes/console/images/info/notice.png
new file mode 100644
index 0000000000000000000000000000000000000000..b10c1d6c72625e695689c845e58df8706b83fb87
Binary files /dev/null and b/installer/resources/themes/console/images/info/notice.png differ
diff --git a/installer/resources/themes/console/images/info/plugin_edit.png b/installer/resources/themes/console/images/info/plugin_edit.png
new file mode 100644
index 0000000000000000000000000000000000000000..d22923ba71fa055308021a9f0624c38c88d285ae
Binary files /dev/null and b/installer/resources/themes/console/images/info/plugin_edit.png differ
diff --git a/installer/resources/themes/console/images/info/plugin_link.png b/installer/resources/themes/console/images/info/plugin_link.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d6a00e16048e64d88020dcd6b81646ae749bd65
Binary files /dev/null and b/installer/resources/themes/console/images/info/plugin_link.png differ
diff --git a/installer/resources/themes/console/images/info/power.png b/installer/resources/themes/console/images/info/power.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce2730b39ce5a5c1bf5059c9de4a7faacc8a3f37
Binary files /dev/null and b/installer/resources/themes/console/images/info/power.png differ
diff --git a/installer/resources/themes/console/images/info/question.png b/installer/resources/themes/console/images/info/question.png
new file mode 100644
index 0000000000000000000000000000000000000000..3478cce63eec4e1f5ebc10778717311db2b30ba9
Binary files /dev/null and b/installer/resources/themes/console/images/info/question.png differ
diff --git a/installer/resources/themes/console/images/info/reboot.png b/installer/resources/themes/console/images/info/reboot.png
new file mode 100644
index 0000000000000000000000000000000000000000..c8d0e60f40bbba0e3979dda0e0484c4023febadc
Binary files /dev/null and b/installer/resources/themes/console/images/info/reboot.png differ
diff --git a/installer/resources/themes/console/images/info/server.png b/installer/resources/themes/console/images/info/server.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b1fb2d7e9ecac5e4b75a3abb191edc38bd9b096
Binary files /dev/null and b/installer/resources/themes/console/images/info/server.png differ
diff --git a/installer/resources/themes/console/images/info/statistics.png b/installer/resources/themes/console/images/info/statistics.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a840e616517af67b070524748d47e42ccf001dc
Binary files /dev/null and b/installer/resources/themes/console/images/info/statistics.png differ
diff --git a/installer/resources/themes/console/images/info/systray.png b/installer/resources/themes/console/images/info/systray.png
new file mode 100644
index 0000000000000000000000000000000000000000..d348c8b46ce9baebc94318fa84c433815c0a0d5d
Binary files /dev/null and b/installer/resources/themes/console/images/info/systray.png differ
diff --git a/installer/resources/themes/console/images/info/ui.png b/installer/resources/themes/console/images/info/ui.png
new file mode 100644
index 0000000000000000000000000000000000000000..14bed7fe700b2cd225c643555a4f856ae43a6b2e
Binary files /dev/null and b/installer/resources/themes/console/images/info/ui.png differ
diff --git a/installer/resources/themes/console/images/info/update.png b/installer/resources/themes/console/images/info/update.png
new file mode 100644
index 0000000000000000000000000000000000000000..12d26e27fcb71897393e0268ba9cf0a9277389b1
Binary files /dev/null and b/installer/resources/themes/console/images/info/update.png differ
diff --git a/installer/resources/themes/console/images/info/url.png b/installer/resources/themes/console/images/info/url.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0c35b59a32a35922e235ce13cfaea86fb337aa3
Binary files /dev/null and b/installer/resources/themes/console/images/info/url.png differ
diff --git a/installer/resources/themes/console/images/info/user_add.png b/installer/resources/themes/console/images/info/user_add.png
new file mode 100644
index 0000000000000000000000000000000000000000..dbfa800dde058a3904007a03e08ff3ee293c2bad
Binary files /dev/null and b/installer/resources/themes/console/images/info/user_add.png differ
diff --git a/installer/resources/themes/console/images/info/wizard.png b/installer/resources/themes/console/images/info/wizard.png
new file mode 100644
index 0000000000000000000000000000000000000000..5cbaa209e6d201662f693fa466ba48c497304a65
Binary files /dev/null and b/installer/resources/themes/console/images/info/wizard.png differ
diff --git a/installer/resources/themes/console/images/jisko_console_icon.png b/installer/resources/themes/console/images/jisko_console_icon.png
deleted file mode 100644
index d61fddb2d3afb14987f6775d579916f1a0e3f39e..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/jisko_console_icon.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/lenta_main_logo.png b/installer/resources/themes/console/images/lenta_main_logo.png
index c43be5f4ae9f3ab2d7aa9590d6ca475ae7bf648d..0cc5638ad89035686585f96eaf0ed3bb18e81d81 100644
Binary files a/installer/resources/themes/console/images/lenta_main_logo.png and b/installer/resources/themes/console/images/lenta_main_logo.png differ
diff --git a/installer/resources/themes/console/images/link.png b/installer/resources/themes/console/images/link.png
deleted file mode 100644
index e0eba7969888b86b7f9b554434dc9750c1218c9e..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/link.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/link_dark.png b/installer/resources/themes/console/images/link_dark.png
deleted file mode 100644
index e33c92544f0daf08363c3a6156beb43d1f22d4b4..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/link_dark.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/magnifier.png b/installer/resources/themes/console/images/magnifier.png
deleted file mode 100644
index cf3d97f75e9cde9c143980d89272fe61fc2d64ee..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/magnifier.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/salt_console.png b/installer/resources/themes/console/images/salt_console.png
deleted file mode 100644
index 1332eb1e2054107d7b30a23a9feec43e8bb0fd09..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/salt_console.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/stop.png b/installer/resources/themes/console/images/stop.png
deleted file mode 100644
index 0cfd585963d255190b8855a7689e8da1c4d7cf6b..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/stop.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/television_delete.png b/installer/resources/themes/console/images/television_delete.png
deleted file mode 100644
index b855fb437275de9e3c97e87a80d9eb6c513bf65c..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/television_delete.png and /dev/null differ
diff --git a/installer/resources/themes/console/images/tick.png b/installer/resources/themes/console/images/tick.png
deleted file mode 100644
index a9925a06ab02db30c1e7ead9c701c15bc63145cb..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/images/tick.png and /dev/null differ
diff --git a/installer/resources/themes/console/dark/images/transparent.gif b/installer/resources/themes/console/images/transparent.gif
similarity index 100%
rename from installer/resources/themes/console/dark/images/transparent.gif
rename to installer/resources/themes/console/images/transparent.gif
diff --git a/installer/resources/themes/console/light/console.css b/installer/resources/themes/console/light/console.css
index 79a9945fa38a81594b4c67a15b1a63ddd1ecc6c7..00dddbc711b1e5e51771ea81cf9d9bd7699616b2 100644
--- a/installer/resources/themes/console/light/console.css
+++ b/installer/resources/themes/console/light/console.css
@@ -2,15 +2,34 @@
 /* Description: Light blue highlights. */
 /* Author: dr|z3d */
 
+html {
+     margin: 0 !important;
+}
+
 body {
-     margin: 10px 0px -10px 10px;
+     margin: 6px;
      text-align: center;
-     color: #000;
-     font: 10pt/130% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     background: #9696ff url('images/snowcamo.png');
+     color: #333;
+     font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+     background: #a4a4cb url(images/tile2.png) fixed;
+     background-size: 32px 32px;
 }
 
-.hide {
+/* preload button mouseovers */
+body {
+     background: url(images/tile2.png) fixed,
+     url(/themes/console/images/buttons/clean_hover.png) no-repeat,
+     url(/themes/console/images/buttons/configure_hover.png) no-repeat,
+     url(/themes/console/images/buttons/delete_hover.png) no-repeat,
+     url(/themes/console/images/buttons/restart_hover.png) no-repeat,
+     url(/themes/console/images/buttons/restore_hover.png) no-repeat,
+     url(/themes/console/images/buttons/search_hover.png) no-repeat,
+     url(/themes/console/images/buttons/shutdown_hover.png) no-repeat,
+     url(/themes/console/images/buttons/update_hover.png) no-repeat, #a4a4cb;
+     background-size: 32px 32px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
+}
+
+.hide, .hideme {
      display: none;
 }
 
@@ -20,73 +39,61 @@ div.clearer {
      line-height: 0;
 }
 
+::selection {
+     background: #27377f !important;
+     color: white;
+     text-shadow: none;
+}
+
+::-moz-selection {
+     background: #27377f !important;
+     color: white;
+     text-shadow: none;
+}
+
+* {
+     outline: none;
+}
+
 img {
      border: none;
 }
 
-pre {
-     width: 98%;
-     overflow: auto;
-     text-align: left;
-     font: 8pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     color: #333;
-     margin: 10px;
+img[src$="bound.png"] {
+     filter: hue-rotate(-40deg);
 }
 
-div.logo {
-     float: left;
-     padding: 10px;
-     text-align: center;
-     color: #fff;
-     margin: 0 10px;
-     border: 1px solid #447;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     background: #ffe;
-     width: 185px;
-     -moz-box-shadow: inset 0px 0px 1px 1px #bbf;
+a img[src$="bound.png"] {
+     filter: hue-rotate(-40deg) drop-shadow(0 0 1px #ccc);
 }
 
-div.toolbar {
-     margin: 0;
-     padding: 10px;
-     font-weight: bold;
-     background: #ffe;
-     border: 1px solid #447;
-     display: none !important;
+a:hover img[src$="bound.png"] {
+     filter: hue-rotate(-40deg) drop-shadow(0 0 1px #f60);
 }
 
-div.toolbar a:link {
-     border: 1px outset #ddddc0;
-     padding: 0px 5px 1px 5px;
-     line-height: 250%;
-     background: #bbf;
-     text-decoration: none;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     display: none !important;
+a img {
+     filter: drop-shadow(0 0 1px #ccc);
 }
 
-div.toolbar a:visited {
-     background: #ffe;
+a:hover img {
+     filter: drop-shadow(0 0 1px #f60);
 }
 
-div.toolbar a:hover {
-     border: 1px solid #eeffef;
-     background: #003;
-     color: #f60;
+pre {
+     width: 98%;
+     overflow: auto;
+     text-align: left;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #333;
+     margin: 10px;
 }
 
-a:active {
-     color: #900;
-}
+/* sidebar */
 
-div.routersummaryouter {
+.routersummaryouter {
      float: left;
      width: 200px;
-     margin: 0 0 10px 0px;
+     margin: 0 0 10px 0;
      padding: 0;
      border: 0;
      clear: left;/* fixes a bug in Opera */
@@ -95,129 +102,403 @@ div.routersummaryouter {
      position: absolute;/* so no interference with /home app icons */
 }
 
-div.routersummary {
-     width: 180px;
-     padding: 8px 8px 10px 8px;
+.routersummary {
+     width: 182px;
+     padding: 8px 8px 10px;
+     margin-bottom: 8px;
      text-align: center !important;
      border: 1px solid #447;
-     color: #000;
+     color: #333;
      font-size: 8pt;
      clear: left;/* fixes a bug in Opera */
-     -moz-border-radius: 8px;
-     -khtml-border-radius: 8px;
-     border-radius: 8px;
-     background: #f0f0f0;
-     -moz-box-shadow: inset 0px 0px 1px 1px #bbf;
-     -khtml-box-shadow: inset 0px 0px 1px 1px #bbf;
-     box-shadow: inset 0px 0px 1px 1px #bbf;
+     border-radius: 2px;
+     background: #fff;
+     box-shadow: inset 0 0 0 1px #bbf;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+.routersummary div[style="height: 36px;"] {
+     margin: 0;
+     padding: 0;
+     text-align: center;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.routersummary div[style="height: 36px;"] {
+     height: 34px !important;
+}
+}
+
+.routersummary img[src$="i2plogo.png"] {
+     opacity: 0.9;
+     transition: ease filter 0.3s 0s, ease opacity 0.3s 0s;
+     margin-top: 0;
+     margin-left: 0 !important;
+     width: 179px;
+     height: auto;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+.routersummary img[src$="i2plogo.png"]:hover {
+     opacity: 1;
+     transition: ease filter 0.3s 0s, ease opacity 0.3s 0s;
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+div.routersummary a:active img[src$="i2plogo.png"] {
+     filter: drop-shadow(0 0 2px #f30);
+}
+
+.routersummary a[href="/"], .routersummary a[href="/console"] {
+     outline: none !important;
+}
+
+.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img {
+     filter: drop-shadow(0 0 1px #f60);
 }
 
-div.routersummary input[type=text] {
+.routersummary form {
+     margin: 0;
+     padding: 0 0 3px;
+}
+
+.routersummary form button.download {
+     display: inline-block;
+     vertical-align: middle;
+     margin: -3px 0;
+     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 22px !important;
+}
+
+.routersummary input[type=text] {
      text-align: right !important;
 }
 
-div.routersummary hr {
+.routersummary hr {
      color: #99f;
      background: #99f;
      height: 1px;
      border-bottom: 1px solid #99f;
      margin: 8px -7px 8px -7px;
-     -moz-box-shadow: inset 0px 1px 1px 1px #fff;
-    -khtml-box-shadow: inset 0px 1px 0px #fff;
-     box-shadow: inset 0px 1px 1px 1px #fff;
-}
-
-div.routersummary hr.b {
-     color: #f0f0f0;
-     background: #f0f0f0;
-     border-bottom: 1px solid #f0f0f0;
+     box-shadow: inset 0 1px 1px 1px #fff;
 }
 
-div routersummary hr:last-child {
+.routersummary hr.b {
+     color: #fff;
+     background: transparent;
+     border-bottom: 1px solid transparent;
+     height: 0 !important;
+     margin-bottom: 5px;
 }
 
-div.routersummary h3 {
-     border: 0;
+.routersummary h3 {
      font-size: 9.5pt;
      letter-spacing: 0.04em;
-     margin: -4px -3px;
+     margin: -9px -7px -2px;
      padding: 2px 0;
-     background: #ffe;
      text-transform: uppercase;
-     background: #ffe url('images/header.png') center center repeat-x;
-     border: 1px solid #99f !important;
-     -moz-border-radius: 3px;
-     -khtml-border-radius: 3px;
-     border-radius: 3px;
-     -moz-box-shadow: 0px 1px 5px #bbf;
-     -khtml-box-shadow: outset 0px 0px 2px 1px #bbf;
+     background: #ffe url(images/header.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     border: 1px solid #99f;
+     border-left: none;
+     border-right: none;
+     border-radius: 0;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: none;
+}
+
+.routersummary h3 a:hover {
+     color: #f60;
 }
 
-div.routersummary h3 a {
+.routersummary h3:hover {
+     background: linear-gradient(to bottom, #fff 50%, #ffe8bf 50%, #efd9b3 100%) !important;
+}
+
+.routersummary h3:hover a {
+     color: #f60 !important;
+     text-shadow: 0 0 1px #fff;
+}
+
+.routersummary h3:active {
+     box-shadow: inset 2px 2px 2px #777;
+}
+
+.routersummary h3 a, .routersummary h3 a:visited {
+     text-transform: uppercase;
      text-decoration: none;
+     display: inline-block;
+     width: 100%;
+     width: calc(100% - 4px);
+     padding: 2px 0;
+     color: #2c4e8f;
+}
+
+h3#helpfaq {
+     margin-bottom: -9px;
 }
 
-div.routersummary h3:hover {
-     background: #ffa url('images/header.png') center center repeat-x !important;
-     text-shadow: 0 0 0;
-     -moz-box-shadow: inset 0px 0px 2px 1px #ffa;
-     -khtml-box-shadow: inset 0px 0px 2px 1px #ffa;
-     box-shadow: inset 0px 0px 2px 1px #ffa;
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+h3#helpfaq {
+     margin-bottom: -10px;
 }
+}	
 
 div.routersummary h4 {
-     border: 0px solid #fff;
-     border-bottom: 0 !important;
+     border: none;
+     border-radius: 0;
      font-size: 8.5pt;
-     letter-spacing: 0.02em;
-     margin: -6px -6px -7px !important;
-     padding: 6px 3px 6px 27px;
-     background: #e0e0f5 url('../images/itoopie_xsm.png') no-repeat 1px center;
-     min-height: 16px;
+     letter-spacing: normal;
+     text-transform: none;
+     margin: -7px;
+     padding: 6px 2px !important;
+     background: #eef;
+     background: linear-gradient(to right, #ddf 0%, #eef 10%, #fff 50%, #eef 90%, #ddf 100%);
      text-decoration: none !important;
-     color: #359;
+     color: #4f617f;
+     box-shadow: inset 0 0 0 1px #eef;
      line-height: 105%;
-     -moz-box-shadow: inset 0px 0px 1px 30px #bdf;
-     -khtml-box-shadow: 0px 0px 1px 1px #bdf;
-     box-shadow: 0px 0px 1px 1px #bdf;
 }
 
-div.routersummary ul {
+.routersummary h4::after {
+     content: "";
+     display: inline-block;
+     box-sizing: border-box;
+     min-height: 12px;
+     padding-top: 8px;
+     padding-bottom: 8px;
+     vertical-align: middle;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.routersummary h4 {
+     margin-bottom: -8px !important;
+}
+}
+
+.routersummary h4 a {
+     display: inline-block;
+     vertical-align: middle;
+}
+
+h4.sb_info {
+     margin-top: -11px !important;
+}
+
+h4.sb_info + hr + form {
+     padding-top: 2px !important;
+     margin-bottom: -1px;
+}
+
+.routersummary ul {
      text-align: left !important;
 }
 
-div.routersummary table {
+.routersummary table {
      border: 0;
      text-align: center !important;
-     margin: -6px -5px 5px -5px;
-     width: 190px !important;
+     margin: -8px -5px -5px -5px;
+     width: 192px !important;
      overflow: hidden;
      font-size: 8pt;
      background-image: none !important;
      background-color: transparent !important;
 }
 
+#sb_version {
+     margin-top: 5px !important;
+     margin-bottom: 8px !important;
+}
+
+#sb_localtunnels td {
+     vertical-align: middle;
+}
+
+#sb_localtunnels td:first-child {
+     text-align: left !important;
+     width: 16px;
+     padding: 1px 2px;
+     border-radius: 2px 0 0 2px;
+}
+
+#sb_localtunnels td:first-child img {
+     margin: 0 0 2px !important;
+}
+
+#sb_localtunnels td img {
+     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+}
+
+#sb_localtunnels td:last-child {
+     text-align: right !important;
+     width: 16px;
+     padding: 2px 0 2px 2px;
+     border-radius: 0 2px 2px 0;
+}
+
+#sb_localtunnels a {
+     display: inline-block;
+     width: 100%;
+}
+
+#sb_localtunnels tr:hover td {
+     background: #fffff0 !important;
+}
+
+#sb_internals a, #sb_advanced a {
+     padding: 2px;
+     display: inline-block;
+     vertical-align: middle !important;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+}
+
+#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+     margin-bottom: -4px !important;
+     margin-top: -10px !important;
+}
+
+#sb_general, #sb_shortgeneral {
+     margin-top: -7px !important; 
+}
+
+#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+   content: "";
+   display: inline-block;
+   min-height: 13px;
+}
+
+#sb_peers td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, #sb_bandwidth td:first-child, #sb_general td:first-child, #sb_shortgeneral td:first-child {
+     text-transform: capitalize;
+}
+
+#sb_warning {
+     border-bottom: 1px solid #99f;
+}
+
+#sb_warning + hr {
+     margin-top: 6px;
+}
+
+.sb_notice {
+     background: #eef;
+     border: 1px solid #89f;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #bbb, inset 0 0 0 1px #fff;
+     margin: -5px;
+     padding: 5px 3px;
+     line-height: 140%;
+}
+
+p:empty + .sb_notice {
+     margin-top: 9px;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.sb_notice {
+     margin-bottom: -7px;
+}
+}
+
+/* experimental sidebar navigation for webapps */
+
+#sb_services a:link, #sb_services a:visited {
+     display: inline-block;
+     width: 100%;
+     padding: 4px 2px 4px 20px;
+     text-align: left;
+     border-bottom: 1px dotted #ddf;
+     background: url(images/application.png) left center no-repeat;
+     background-size: 14px 14px;
+}
+
+#sb_services a:link:first-child {
+     padding-top: 2px;
+}
+
+#sb_services a:link:last-child {
+     border-bottom: none;
+     padding-bottom: 2px;
+}
+
+#sb_services a[href="/susimail/susimail"] {
+     background: url(images/inbox.png) left center no-repeat;
+}
+
+#sb_services a[href="/susimail/susimail"]:hover {
+     background: url(images/inbox.png) left center no-repeat #ffe;
+     border-radius: 2px;
+}
+
+#sb_services a[href="/i2psnark/"] {
+     background: url(images/magnet.png) left center no-repeat;
+}
+
+#sb_services a[href="/i2psnark/"]:hover {
+     background: url(images/magnet.png) left center no-repeat #ffe;
+     border-radius: 2px;
+}
+
+#sb_services a[href="http://127.0.0.1:7658/"] {
+     background: url(images/server.png) left center no-repeat;
+}
+
+#sb_services a[href="http://127.0.0.1:7658/"]:hover {
+     background: url(images/server.png) left center no-repeat #ffe;
+     border-radius: 2px;
+}
+
+#sb_services a[href="/orchid/"] {
+     background: url(images/flower.png) left center no-repeat;
+}
+
+#sb_services a[href="/orchid/"]:hover {
+     background: url(images/flower.png) left center no-repeat #ffe;
+     border-radius: 2px;
+}
+
+#sb_services a[href*="bote"] {
+     background: url(images/mail_black.png) left center no-repeat;
+}
+
+#sb_services a[href*="bote"]:hover {
+     background: url(images/mail_black.png) left center no-repeat #ffe;
+     border-radius: 2px;
+}
+
+/* end webapp navigation */
+
 div.routersummary tr {
      background-image: none !important;
      background-color: transparent !important;
      border: 0 !important;
 }
 
-div.routersummary td:first-child {
-     max-width: 90px;
-     overflow: hidden;
-}
-
 div.routersummary a:hover {
      color: #f60;
 }
 
 div.routersummary td {
-     padding: 1px 3px;
+     padding: 0 2px;
      background-image: none !important;
      border: 0 !important;
 }
 
+div.routersummary img:first-child  {
+     margin-bottom: -2px !important;
+     opacity: 0.7;
+}
+
+div.routersummary img:hover:first-child {
+     margin-bottom: -2px !important;
+     opacity: 1;
+}
+
+/* end sidebar */
+
 div.tunnels td:first-child {
      width: 16px;
      text-align: left;
@@ -233,23 +514,13 @@ div.tunnels img, div.tunnels img:hover {
      opacity: 1 !important;
 }
 
-div.routersummary img:first-child  {
-     margin-bottom: -2px !important;
-     opacity: 0.7;
-}
-
-div.routersummary img:hover:first-child {
-     margin-bottom: -2px !important;
-     opacity: 1;
-}
-
 div.newsheadings {
      text-align: right;
-     margin: 0 0 0 10px;
+     margin: -5px 0 -3px 8px;
 }
 
 div.newsheadings li {
-     list-style: none outside url('images/newsbullet_mini.png');
+     list-style: none outside url(images/newsbullet_mini.png);
      margin: 4px -4px 2px 10px;
      line-height: 120%;
 }
@@ -285,48 +556,146 @@ div.routersummary p {
 div.refresh {
      margin-top: 10px !important;
      margin-bottom: 10px !important;
-     padding: 2px 0 0px 0 !important;
+     padding: 2px 0 0 0 !important;
 }
 
 /* proxy error messages */
 
+div.logo {
+     float: left;
+     padding: 10px;
+     text-align: center;
+     color: #222;
+     margin: 0 10px;
+     border: 1px solid #447;
+     border-radius: 2px;
+     background: #fff;
+     width: 185px;
+     box-shadow: inset 0 0 0 1px #bbf;
+}
+
+.logo hr {
+     margin: 8px -10px;
+     background: #7789bf;
+     height: 1px
+}
+
+.logo a {
+     display: inline-block !important;
+     width: 100%;
+}
+
 div.warning {
      margin: 20px 20px 30px 240px;
-     padding: 5px 25px 20px 75px;
+     padding: 10px 25px 20px 75px;
      background: #fff;
      border: 1px solid #447;
-     text-align: left;
-     color: inherit;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
+     color: #333;
+     border-radius: 2px;
      text-align: justify;
-     background-image:url("../images/itoopie_sm.png");
-     background-position:10px center;
-     background-repeat:no-repeat;
-     -moz-box-shadow: inset 0px 0px 1px 0px #d00;
+     background-image: url(/themes/console/images/itoopie_sm.png);
+     background-position: 10px center;
+     background-repeat: no-repeat;
+     box-shadow: inset 0 0 1px 0 #d00;
      word-wrap: break-word;
      min-width: 400px;
 }
 
-/* console error messages */
+.warning:not(old) {
+     background:  url("/themes/console/images/itoopie_sm.png") no-repeat scroll 10px center, linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3)), url(images/noise.png) #fff;
+     background-size: 54px auto, 100% 100%, 50px 50px;
+}
 
-div.sorry {
-     margin: 5px 10px 10px 207px;
-     padding: 20px 20px 20px 75px;
-     background: #ffe;
-     border: 1px solid #447;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     text-align: justify;
-     background-image: url("images/errortriangle.png");
-     background-position: 15px center;
-     background-repeat: no-repeat;
-     -moz-box-shadow: inset 0px 0px 0px 1px #d00;
-     word-wrap: break-word;
-     font-weight: bold;
-     color: #531;
+.warning h3 {
+     text-align: left;
+}
+
+.proxyfooter {
+     margin: 0 20px 10px 240px;
+     padding: 20px 25px 20px 75px;
+     color: #f00;
+     font-size: 7pt;
+     text-align: right !important;
+     border-radius: 2px;
+     border: 1px solid #447;
+     display: none;
+}
+
+@media screen and (max-width: 800px) {
+.warning {
+     margin-top: 115px !important;
+     margin: 115px 5px 0 0 !important;
+     background: #fff !important;
+     background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3)), url(images/noise.png) #fff !important;
+     background-size: 100% 100%, 50px 50px !important;
+     padding-left: 25px !important;
+}
+
+.warning h3 {
+     font-size: 10pt !important;
+}
+
+.logo {
+     position: absolute;
+     top: 0;
+     width: calc(100% - 39px) !important;
+     min-width: 430px;
+     margin: 10px 0 0 !important;
+}
+
+.logo a:link:not(img) {
+     display: inline-block;
+     width: auto;
+     margin: 0 5px;
+}
+}
+
+@media screen and (min-height: 700px) {
+.proxyfooter {
+     position: absolute;
+     bottom: 0;
+     right: 0;
+     padding: 0 20px 0 0;
+     text-align: right;
+     background: #030;
+     width: 100%;
+     opacity: 0.7;
+     border-top: 1px solid #000;
+}
+
+.proxyfooter p {
+     text-align: right;
+     line-height: 130% !important;
+     margin: 5px 0;
+}
+
+.warning {
+     margin-bottom: 30px;
+}
+}
+
+@media screen and (max-height: 700px) {
+.proxyfooter {
+     display: none;
+}
+}
+
+/* end proxy error messages */
+
+/* console error messages */
+
+div.sorry {
+     margin: -11px 0 10px 207px;
+     padding: 20px 25px 20px 70px;
+     border: 1px solid #447;
+     border-radius: 0 0 2px 2px;
+     text-align: justify;
+     background: #fffff9 url(/themes/console/images/info/errortriangle.png) 20px center no-repeat;
+     box-shadow: inset 0 0 1px #f00;
+     word-wrap: break-word;
+     font-weight: bold;
+     color: #531;
+     min-width: 455px;
 }
 
 div.sorry hr {
@@ -334,1148 +703,4862 @@ div.sorry hr {
      background: #531;
      height: 1px;
      border: 1px solid #531;
-     margin: 10px 0 15px 0;
+     margin: 10px 0 !important;
+}
+
+div.main {
+     margin: -12px 0 8px 207px;
+     padding: 0 15px 10px 15px;
+     text-align: left;
+     color: #222;
+     width: auto;
+     min-width: 546px;
+     border: 1px solid #447;
+     border-radius: 0 0 2px 2px;
+     box-shadow: inset 0 0 0 1px #bbf;
+     background: #fff;
+     background: linear-gradient(to right, #fff, #f7f8ff, #fff);
+     background-size: 100% 100%;
+     filter: drop-shadow(0 1px 1px #999);
+}
+
+div.main[id^="config_"] {
+     padding-bottom: 5px !important;
+}
+
+div.main li:first-child {
+     margin-top: 10px;
+}
+
+.main#debug {
+     background: #fff;
+}
+
+.main#debug li:first-child {
+     margin-top: 0 !important;
+}
+
+.main#debug table:first-of-type td:first-child {
+     font-weight: bold;
+}
+
+.main#debug table:first-of-type td:last-child {
+     text-align: left;
+}
+
+.main#debug td:first-child, .main#debug th:first-child {
+     padding-left: 10px;
+}
+.main#debug td:last-child {
+     text-align: right;
+     vertical-align: top;
+}
+
+.main#debug ul li {
+     list-style: none;
+     margin-left: 0;
+     padding: 0;
+}
+
+.main#debug h2 {
+     border-radius: 0;
+     padding: 8px 10px;
+}
+
+.main#debug h3 {
+     border-radius: 0;
+}
+
+.main#debug table {
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+.main#debug h2 + table {
+     margin-top: -16px;
+}
+
+.main#debug hr {
+     display: none;
+}
+
+div.main hr, hr {
+     color: #113;
+     background: #113;
+     height: 1px;
+     border: 0 solid #113;
+     margin: 10px 0;
+}
+
+hr:last-child {
+     margin-top: 20px !important;
+}
+
+div.main textarea {
+     background: #fff;
+     color: #001;
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     margin: 5px 0;
+     resize: none;
+}
+
+td.tabletextarea {
+     padding: 0 !important;
+     background: #fff;
+}
+
+textarea[id="advancedsettings"] {
+     width: 99% !important;
+     width: calc(100% - 3px) !important;
+     border: none !important;
+     margin: 0 !important;
+     padding: 3px 5px !important;
+     white-space: pre-wrap;
+     box-shadow: none;
+     filter: none !important;
+     font-size: 9pt;
+}
+
+textarea[name="reseedURL"] {
+     margin-bottom: 20px !important;
+}
+
+#resetreseed {
+     border: 0 !important;
+     background: none !important;
+     padding: 5px 0;
+}
+
+#config_reseed input[type="text"], #config_reseed input[type="password"] {
+     min-width: 300px;
+}
+
+/* news */
+
+div.news {
+     margin: -12px 0 5px 207px;
+     padding: 5px 15px 12px;
+     border: 1px solid #447;
+     color: #224;
+     border-radius: 0 0 2px 2px;
+     text-align: right !important;
+     font-size: 8pt;
+     line-height: 140%;
+     box-shadow: inset 0 0 0 1px #bbf;
+     background: #fff url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom;
+     background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, linear-gradient(to right, #fff, #f7f8ff, #fff);
+     min-width: 546px;
+     filter: drop-shadow(0 1px 1px #999);
+}
+
+.news hr {
+     background: #339;
+     opacity: 0.6;
+     display: none;
+}
+
+.newsentry {
+     box-shadow: 0 0 1px #ccc;
+}
+
+.news#news .newsentry:first-child {
+     margin-top: -2px;
+}
+
+.newsentry font[size="-2"], .newsentry font[size="-1"] {
+     letter-spacing: 0.1em;
+}
+
+.newscontent {
+     background-color: rgba(220,220,255,0.6);
+     background: linear-gradient(to bottom, #eef, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important;
+     border: 1px solid #7778bf;
+     border-radius: 0 0 2px 2px;
+     margin: 0 0 14px;
+     padding: 10px 15px;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+div.newscontent p {
+     font-size: 9pt;
+     text-align: justify !important;
+     line-height: 140%;
+     margin: 0;
+     padding: 0;
+     text-shadow: 0 0 1px #fff;
+}
+
+.newscontent p:nth-child(n+2) {
+     margin-top: 8px;
+}
+
+.newscontent hr {
+     color: #225;
+     background: #225;
+     height: 1px;
+     border: 0 dotted #225;
+     margin: 10px 0 5px;
+}
+
+.newsentry + hr + i {
+     margin-right: 8px;
+}
+
+#newsStatus, #newsDisplay {
+     display: inline-block;
+}
+
+.newsentry + hr + #newsStatus, .newsentry + hr + #newsStatus + #newsDisplay {
+     margin-top: -6px !important;
+}
+
+#newsStatus {
+     float: left;
+     text-align: justify;
+     margin-bottom: 6px !important;
+}
+
+#newsDisplay {
+     white-space: nowrap;
+     margin-left: 10px;
+     color: #337;
+}
+
+.newsAuthor {
+     padding: 0 0 0 15px !important;
+     float: right;
+     background: url(/themes/console/images/info/author.png) left 2px center no-repeat;
+     background-size: 10px 10px;
+     font-size: 8pt !important;
+     display: inline-block;
+     opacity: 0.8;
+     letter-spacing: 0.1em !important;
+     text-transform: none;
+}
+
+.newsDate {
+     opacity: 0.8;
+     margin-right: 1px;
+}
+
+.main#news {
+     padding: 3px 15px 5px;
+     background: #fff url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom;
+     background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, linear-gradient(to right, #fff, #f7f8ff, #fff);
+}
+
+div.news h3, #news h3 {
+     background: url(images/news.png) 8px center no-repeat #fff !important;
+     background: url(images/news.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8)) 15% !important;
+     text-align: left;
+     padding: 5px 10px 5px 30px;
+     border: 1px solid #7778bf;
+     border-radius: 2px 2px 0 0;
+     font-size: 10pt !important;
+     letter-spacing: 0.08em;
+     word-spacing: 0.05em;
+     text-transform: uppercase !important;
+     margin-bottom: -1px;
+     filter: none;
+}
+
+div.newscontent h4 {
+     border-bottom: 0;
+     padding: 0;
+     margin: 14px 15px 7px 15px;
+     font-size: 10pt;
+     text-align: left;
+}
+
+div.newscontent h5 {
+     border-bottom: 0;
+     padding: 0;
+     margin: 12px 15px 6px 15px;
+     font-size: 9.5pt;
+     text-align: left;
+}
+
+div.newscontent h6 {
+     border-bottom: 0;
+     padding: 0;
+     margin: 12px 15px 6px 15px;
+     font-size: 9pt;
+     text-align: left;
+}
+
+#news {
+     background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.3)), url(/themes/snark/ubergine/images/hat.png) bottom right no-repeat, url(images/noise.png) #fff !important;
+     background-size: 100% 100%, 140px auto, 50px 50px !important;
+}
+
+/* end news */
+
+.main#torrents {
+     padding: 0 10px;
+     min-width: 576px;
+}
+
+div.main, .routersummary, .logo {
+     background: #fff url(images/noise.png) 0 0 / 50px 50px !important;
+     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)) 0 0 / 100% 100%, #fff url("images/noise.png") 0 0 / 50px 50px !important;
+}
+
+/* top navigation bar */
+
+.confignav {
+     padding: 12px 10px 0 !important;
+     margin: 2px -14px 12px !important;
+     font-size: 9pt !important;
+     line-height: 160% !important;
+     min-width: 400px;
+     vertical-align: middle;
+     text-align: center;
+     border-bottom: 1px solid #447;
+     box-shadow: 0 1px 1px rgba(221, 221, 255, 0.5);
+     background: #fff;
+}
+
+.tab, .tab2 {
+     min-width: 50px;
+     padding: 3px 6px;
+}
+
+.tab {
+     padding: 3px 6px;
+     margin: -5px -1px -1px -3px !important;
+     background: #eef;
+     background: linear-gradient(to bottom, #fff, #eef);
+     box-shadow: inset 0 0 0 1px #fff;
+     border: 1px solid #447;
+     display: inline-block;
+     vertical-align: bottom;
+     text-align: center;
+     font-weight: normal !important;
+     text-decoration: none;
+     z-index: 999 !important;
+     position: relative;
+}
+
+.tab2 {
+     color: #31334f;
+     padding-bottom: 4px;
+     margin: -11px -1px -1px -3px;
+     background: #fff;
+     border: 1px solid #447;
+     border-top-color: #558;
+     border-top-width: 3px;
+     display: inline-block;
+     vertical-align: bottom;
+     text-align: center;
+     font-weight: bold;
+     border-radius: 2px 2px 0 0;
+     filter: drop-shadow(0 0 1px #ccc);
+     position: relative;
+     z-index: 999 !important;
+}
+
+_:-ms-lang(x), .tab {
+     margin-left: -4px !important;
+     margin-right: -2px !important;
+}
+
+.tab:hover, .tab:hover a {
+     background: #558;
+     background: linear-gradient(to bottom, #eef, #fff);
+     color: #f60;
+}
+
+.tab:hover {
+     border-top: 3px solid #77a;
+     border-radius: 2px 2px 0 0 !important;
+     margin-top: -9px !important;
+}
+
+.tab:active {
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+.tab:active, .tab:active a {
+     background: #f60 !important;
+     color: #fff !important;
+     border-top-width: 1px;
+}
+
+.tab:first-child {
+     border-radius: 2px 0 0 0;
+}
+
+.tab:last-child {
+     border-radius: 0 2px 0 0;
+     padding-right: 6px;
+}
+
+.tab a {
+     font-weight: normal !important;
+     text-decoration: none !important;
+     display: inline-block;
+     width: 100%;
+     padding-top: 0;
+     padding-bottom: 0;
+}
+
+.tab:last-child:hover {
+     margin-top: -7px !important;
+     margin-bottom: -1px !important;
+}
+
+.tab:last-child:active {
+     margin-top: -5px !important;
+     margin-bottom: -1px !important;
+}
+
+/* end topnav */
+
+.th_title a, .th_title a:hover {
+     color: #31334f !important;
+}
+
+div.configure {
+     min-width: 400px;
+     margin-bottom: 0;
+}
+
+div.configure h3, div.graphspanel h3 {
+     border: 1px solid #7778bf;
+     border-left: 5px solid #7778bf;
+     padding: 5px;
+     margin: 15px 0 15px 0;
+     border-radius: 0 2px 2px 0;
+     background: #ffe;
+     text-align: left;
+}
+
+div.graphspanel h3 {
+     text-transform: capitalize;
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
+h3#advancedconfig a, h3#bwlimiter a, h3.tabletitle a, h3.ptitle a, th a.script, th#upnpconfig a, h3#graphinfo a, h3#graphdisplay a, .h3navlinks {
+     float: right;
+     font-size: 9pt;
+     letter-spacing: normal;
+     text-transform: capitalize;
+}
+
+.h3navlinks a {
+     text-transform: capitalize;
+     letter-spacing: normal;
+     margin-left: 2px;
+}
+
+.h3navlinks a:hover {
+     color: #f60;
+}
+
+h3 a.script, th a.script {
+     text-transform: lowercase;
+}
+
+h3#iptransport a:not(old), h3#advancedconfig a:not(old) {
+     font-size: 0;
+     height: 20px;
+}
+
+h3#iptransport a::after, h3#advancedconfig a::after {
+     content: url(images/help.png);
+     padding: 0;
+     margin: 0;
+     vertical-align: text-top;
+     cursor: help;
+     filter: hue-rotate(-20deg) saturate(200%) drop-shadow(0 0 1px #999);
+}
+
+h3#iptransport a:hover, h3#advancedconfig a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+h3#transports {
+     border: 1px solid #7789bf;
+}
+
+pre#transports {
+     display: inline-block;
+     border: 1px solid #7789bf;
+     background: #fff;
+     padding: 10px 0 0 10px;
+     width: calc(100% - 12px);
+     margin: -16px 0 0;
+}
+
+/* confignet tidyup */
+
+#netconfig .optbox {
+     margin: 10px 6px 2px !important;
+     display: inline-block !important;
+     vertical-align: sub !important;
+}
+
+#netconfig .optbox:first-child {
+     margin-top: 6px !important;
+     margin-bottom: 6px !important;
+}
+
+#netconfig .optbox:last-child, #netconfig .optbox[value="only"], #netconfig .optbox[name="disableUDP"], #netconfig .optbox[value="disabled"] {
+     margin-bottom: 6px !important;
+}
+
+#netconfig input[type="text"] + br + .optbox, #netconfig .optbox[name="ntcpAutoPort"] {
+     margin-top: 3px !important;
+}
+
+#netconfig input[name*="ost"] {
+     width: 250px !important;
+}
+
+b.suboption {
+     display: inline-block;
+     margin: 5px 0;
+}
+
+/* end confignet tidyup */
+
+.main#tunnels h3 a:not(old), #criticallogs + h3.tabletitle a:not(old) {
+     font-size: 0;
+}
+
+.main#tunnels h3 a[href^="/configtunnels#"]::after, #criticallogs + h3.tabletitle a::after {
+     content: url(/themes/console/images/buttons/configure.png);
+     float: right;
+     padding: 0;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+.main#tunnels h3 a[href^="/configtunnels#"]:hover, #criticallogs + h3.tabletitle a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+h3#passwordheading {
+     margin-bottom: -2px;
+     border: 1px solid #7778bf;
+     border-radius: 0;
+     filter: none;
+}
+
+h3#langheading, h3#themeheading, h3#pluginmanage, h3#pconfig, h3#webappconfig, h3#advancedclientconfig, h3#i2pclientconfig, #config_stats h3 {
+     border: 1px solid #7778bf;
+     border-radius: 0;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: none;
+}
+
+h3#advancedclientconfig, p#webappconfigtext, p#pluginconfigtext, p#clientconf.infowarn, p#profiles_overview {
+     margin-bottom: -2px;
+}
+
+h3#pconfig, h3#webappconfig, h3#i2pclientconfig, h3#pluginmanage, p#clientconf.infohelp, #config_stats h3 {
+     margin-bottom: -13px;
+}
+
+p#enablefullstats {
+     border: 1px solid #7778bf;
+     padding: 10px;
+     margin-bottom: 13px;
+}
+
+#configstats th {
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+#configstats td {
+     padding: 4px 3px;
+}
+
+#configstats td::before {
+     content: "";
+     display: inline-block;
+     min-height: 20px;
+     vertical-align: middle;
+}
+
+#configstats td:first-child {
+     width: 48px;
+     white-space: nowrap;
+}
+
+#configstats td:first-child:empty + td > label { /* remove pointer from inert labels */
+     cursor: default;
+}
+
+#configstats td:last-child {
+     border-right: 1px solid #7778bf;
+}
+
+#sidebarconf button {
+     margin: 2px 0 2px 3px !important;
+     padding: 2px;
+     min-width: 0;
+     background-size: 100% 100% !important;
+}
+
+#sidebarconf select {
+     width: 100%;
+}
+
+#sidebarconf th:nth-child(1), #sidebarconf th:last-child {
+     text-align: center;
+}
+
+#sidebarconf th:nth-child(2) {
+     text-align: left;
+}
+
+#sidebarconf td:first-child {
+     width: 60px;
+     text-align: center;
+}
+
+#sidebarconf td:nth-child(3), #sidebarconf td:nth-child(4) {
+     width: 50px;
+     padding: 0;
+     white-space: nowrap;
+}
+
+#sidebarconf td:nth-child(3) button, #sidebarconf td:nth-child(4) button {
+     margin: 0;
+}
+
+#sidebarconf td:nth-child(3) {
+     text-align: right;
+}
+
+#sidebarconf td:nth-child(4) {
+     text-align: left;
+     padding-right: 5px;
+}
+
+#sidebarconf tr:last-child td {
+     padding: 5px !important;
+}
+
+#sidebarconf tr:last-child td:last-child {
+     text-align: left;
+}
+
+p#tunnelconfig {
+     margin-bottom: -14px;
+}
+
+div.graphspanel {
+     text-align: center !important;
+     margin: 15px 0 -15px;
+}
+
+div.graphspanel img {
+     border: 1px solid #7778bf;
+     padding: 2px;
+     margin: 6px;
+     text-align: center !important;
+     vertical-align: top !important;
+     background: #001;
+     box-shadow: inset 0 0 1px 1px #99f;
+     max-width: 98%;
+}
+
+div.graphspanel a img:hover {
+     box-shadow: inset 0 0 2px 1px #f60;
+}
+
+div.graphspanel form {
+     text-align: left;
+}
+
+#graphs hr {
+     display: none;
+}
+
+#graphopts {
+     text-align: center;
+     margin-top: 20px;
+     margin-bottom: 15px;
+     text-transform: capitalize;
+}
+
+#graphopts + p {
+     text-align: right;
+     display: none;
+}
+
+.formaction#graphing {
+     margin: 8px -11px -11px;
+}
+
+h3#graphdisplay {
+     border-radius: 0;
+     border-width: 1px;
+     box-shadow: none;
+     filter: none;
+}
+
+.main#graphs form {
+     border: 1px solid #7778bf;
+     padding: 10px;
+     margin: -16px 0 5px;
+}
+
+/* new graphs optionbox */
+
+#graphs form {
+     padding: 0 !important;
+}
+
+#graphs form hr {
+     margin: 0 -1px 8px !important;
+}
+
+#graphs form table {
+     border: none;
+     margin: 0;
+}
+
+.formaction#graphing {
+     margin: -1px 0 !important;
+     padding: 5px 3px;
+     border-left: none;
+     border-right: none;
+}
+
+#graphs tr:first-child td {
+     border-top: none;
+}
+
+#graphs td:first-child {
+     text-align: right;
+     width: 10%;
+     white-space: nowrap;
+     padding: 13px 3px 13px 5px;
+}
+
+#graphs td:nth-child(2) {
+     width: 10%;
+     white-space: nowrap;
+}
+
+#graphs td.infohelp {
+     border: none !important;
+     background: url("/themes/console/images/info/infohelp.png") no-repeat scroll 12px center;
+     background-size: 20px 20px !important;
+     padding: 5px 5px 5px 40px !important;
+     text-align: left;
+}
+
+#graphs form input, #graphs form select {
+     margin: 3px 5px 3px 0;
+     vertical-align: middle;
+}
+
+#graphs input[type="text"] {
+     min-width: 60px;
+}
+
+/* end new graphs optionbox */
+
+div.messages {
+     padding: 15px;
+     margin: 15px 0;
+     border-radius: 2px;
+     border: 1px solid #7778bf;
+     background: #eef;
+     background: url(/themes/snark/ubergine/images/hat.png) bottom right no-repeat, linear-gradient(to right, #fff, #eef);
+     background-size: auto 100%, 100% 100%;
+     font-weight: bold;
+     box-shadow: inset 0 0 0 1px #fff;
+     line-height: 130%;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+.main#config_update .messages {
+     background: url(/themes/console/images/info/newspaper.png) 12px center no-repeat, url(/themes/snark/ubergine/images/hat.png) bottom right no-repeat, linear-gradient(to right, #fff, #eef);
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px, auto 100%, 100% 100% !important;
+}
+
+.main#graphs .messages { /* "graphing not supported" error */
+     margin-bottom: 20px;
+}
+
+.main#events .messages {
+     margin-bottom: 0;
+}
+
+div.error {
+     color: #900;
+}
+
+div.notice {
+     font-style: italic;
+     margin: 0;
+     padding: 0;
+}
+
+.messages ul {
+     padding: 0;
+     margin: 0;
+}
+
+div.messages li, .messages li:first-child, .error li:first-child, .error li {
+     text-align: justify !important;
+     font-weight: bold;
+     list-style: none;
+     background: url(images/warning.png) left center no-repeat;
+     margin: 0 10px 0 0 !important;
+     padding: 0 0 0 24px !important;
+     border: 0 !important;
+     line-height: 135%;
+}
+
+.notice li {
+     background: url(images/confirmed.png) left center no-repeat !important;
+     list-style: none !important;
+}
+
+.error li {
+     background: url(images/warn.png) left center no-repeat !important;
+}
+
+table {
+     border-collapse: collapse;
+     width: 100%;
+     border: 1px solid #7778bf;
+     margin: 1px 0 5px 0;
+     font-size: 9pt;
+     background: #fff;
+}
+
+#configinfo th {
+     color: #050;
+}
+
+#configinfo td {
+     text-align: justify;
+     padding: 10px;
+}
+
+td.optionsave {
+     text-align: right;
+     padding: 5px !important;
+     background: #fff;
+     border-top: 1px solid #7778bf !important;
+}
+
+td.optionsave, .formaction, form[action="configpeer"] tr:last-child td, table#addkeyring tr:last-child td {
+     background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important;
+}
+
+#pluginupdater {
+     padding: 15px 5px 15px 50px;
+     background: url(/themes/console/images/info/update.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important;
+     background-size: 28px 28px, 100% 100% !important;
+}
+
+.configtable td {
+     padding: 5px;
+}
+
+.configtable tr:last-child td {
+     border-top: 1px solid #7778bf !important;
+}
+
+td.infohelp, #help tr:hover td.infohelp {
+     background: #fff url(/themes/console/images/info/infohelp.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     border-bottom: 1px solid #7778bf !important;
+     border-top: 1px solid #7778bf !important;
+     text-align: justify;
+}
+
+td.infowarn, #help tr:hover td.infowarn {
+     background: #fff url(/themes/console/images/info/infowarn.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px !important;
+     border-bottom: 1px solid #7778bf !important;
+     border-top: 1px solid #7778bf !important;
+     text-align: justify;
+}
+
+/* logs */
+
+#criticallogs tr:first-child {
+     display: none; /* hide empty placeholder for log location */
+}
+
+.main#logs ul li {
+     padding-left: 0;
+     margin-left: 18px;
+}
+
+.main#logs li:first-child {
+     margin-top: 0 !important;
+}
+
+.main#logs li:last-child {
+     margin-bottom: 0 !important;
+}
+
+table#wrapperlogs, table#routerlogs {
+     width: 100%;
+     table-layout: fixed;
+     margin-bottom: 10px;
+}
+
+table#wrapperlogs {
+     margin-bottom: 5px;
+}
+
+#logs table[id$="logs"] tr:first-child td, .subheading {
+     background: linear-gradient(45deg, #fff, #eef) !important;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+#routerlogs ul {
+     word-wrap: break-word;
+}
+
+#wrapperlogs pre {
+     margin: 0;
+     padding: 3px 0 0 5px;
+     white-space: pre-wrap !important;
+     word-wrap: break-word !important;
+     width: calc(100% - 5px);
+     max-height: 600px;
+     overflow: auto;
+}
+
+#logs ul {
+     margin-left: 0;
+     margin-right: -28px;
+     display: inline-block;
+     word-break: break-all;
+}
+
+#logs li {
+     list-style: none;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     line-height: 130%;
+     text-align: left;
+     display: inline-block;
+     width: calc(100% - 48px);
+}
+
+#logs li::after {
+     content: "";
+     display: block;
+     border-top: 1px dotted #ddf;
+     width: 100%;
+     margin: 5px 0 0;
+}
+
+#logs li:last-child::after {
+     border: none;
+     margin: 0;
+}
+
+#logs font[color^="#"]::before {
+     content: "";
+     display: inline-block;
+     width: 6px;
+     height: 6px;
+     background: #fff;
+     border-radius: 50%;
+     margin-right: 5px;
+     margin-left: -17px;
+     vertical-align: calc(1px);
+}
+
+#logs li font[color="#cc0000"]::before {
+     background: #cc0000;
+}
+
+#logs li font[color="#006600"]::before {
+     background: #006600;
+}
+
+#logs li font[color="#ff3300"]::before {
+     background: #ff3300;
+}
+
+#logs li font[color="#ff00cc"]::before {
+     background: #ff00cc;
+}
+
+#logs li font[color="#000099"]::before {
+     background: #000099;
+}
+
+table#bugreports {
+     margin-top: 15px;
+     padding: 10px;
+     font-size: 9pt !important;
+}
+
+table#enviro, table[id$="logs"] {
+     font-size: 9pt !important;
+     padding: 10px;
+}
+
+table#enviro td {
+     padding-top: 5px;
+     padding-bottom: 5px;
+}
+
+table#enviro td:first-child {
+     width: 100px;
+     text-align: right;
+     padding-right: 0;
+     white-space: nowrap;
+     padding-left: 10px
+}
+
+table[id$="logs"] td {
+     padding: 5px;
+}
+
+table[id$="logs"] td:empty {
+     display: none;
+}
+
+table[id$="logs"] tr:first-child {
+     border-bottom: 1px solid #7778bf;
+}
+
+table[id$="logs"] ul li:last-child {
+     margin-bottom: 10px !important;
+}
+
+#wrapperlogs tr:last-child td {
+     padding: 0;
+}
+
+/* end logs */
+
+table hr {
+     padding: 0 0;
+     color: #99f;
+     background: #99f;
+     border: 0 solid #99f;
+     margin: 0 0;
+     height: 1px;
+     display: none;
+}
+
+th {
+     padding: 6px 5px;
+     color: #31334f;
+     background: #eef url(images/header.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, rgba(238, 238, 255, 0.2) 50%, #eef 100%) !important;
+     text-align: left;
+     font-size: 9pt;
+     line-height: 110%;
+     border-bottom: 1px solid #7778bf !important;
+     border-top: 1px solid #7778bf !important;
+}
+
+.main[id^="config_"] th {
+     font-size: 10pt;
+}
+
+tr {
+     vertical-align: middle !important;
+}
+
+tr:nth-child(even), pre#transports {
+     background: #efefff;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff;
+}
+
+tr:nth-child(odd) {
+     background: #f7f8ff;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff;
+}
+
+tr th {
+     background: #eef url(images/header.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, rgba(238, 238, 255, 0.2) 50%, #eef 100%) #fff !important;
+}
+
+td {
+     padding: 3px 5px;
+     color: #333;
+     vertical-align: middle;
+     border-top: 1px inset #ddf;
+     border-bottom: 1px inset #ddf;
+}
+
+#tunnelconfig tr:last-child, #webappconfig tr:last-child {
+     background: #efefff;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
+}
+
+#clientconfig td:first-child label {
+     display: inline-block;
+     vertical-align: middle;
+}
+
+#clientconfig td:first-child::after {
+     content: "";
+     display: inline-block !important;
+     min-height: 36px !important;
+     vertical-align: middle;
+}
+
+#clientconfig tr:last-child {
+     background: #f7f8ff;
+}
+
+#netconfig tr {
+     background: #fff;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
+}
+
+.main[id^="config_"] select, .main[id^="config_"] textarea, .main[id^="config_"] .optbox {
+     margin-left: 3px !important;
+}
+
+#bandwidthconfig td:first-child {
+     width: 200px;
+     white-space: nowrap;
+     padding-right: 10px;
+}
+
+#bandwidthconfig td:last-child {
+     white-space: normal;
+}
+
+/* begin home page */
+
+#homepanel {
+     margin-bottom: 0;
+}
+
+h4.app, h4.app2 {
+     margin: 0 auto 3px;
+     padding: 7px 10px 6px 32px;
+     border: 1px solid #7778bf;
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background: #eef;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%);
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+     display: inline-block;
+     width: calc(100% - 44px);
+     border-radius: 2px;
+     color: #31334f;
+}
+
+h4.app {
+     background: url(/themes/console/images/eepsite.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8) 25%) !important;
+     background-size: 16px 16px, 100% 100%, 100% 100% !important;
+     margin-top: 15px;
+}
+
+h4.app2 {
+     clear: left;
+     margin-top: 10px !important;
+     background: url(images/globe.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8) 25%) !important;
+     background-size: 16px 16px, 100% 100%, 100% 100% !important;
+}
+
+div.ag2 {
+     margin: 0;
+}
+
+div.search + div.ag2 {
+     margin: -15px 0 0;
+}
+
+div.app {
+     float: left;
+     padding: 0;
+     min-width: 140px;
+     text-align: center !important;
+     border: 1px solid #7778bf;
+     border-radius: 2px;
+     margin: 3px;
+     background: #eef;
+     background: linear-gradient(to bottom, #fff, #eef);
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+}
+
+div.app:hover {
+     border: 1px solid #f60;
+     background: #fff;
+     box-shadow: none;
+     cursor: pointer;
+}
+
+div.app:hover a:link, div.app:hover a:visited {
+    color: #f60;
+}
+
+div.app:hover img.app, .app:hover img {
+     filter: drop-shadow(0 0 2px #f60);
+     transition: ease filter 0.3s 0s;
+     opacity: 1;
+}
+
+div.app:hover .applabel {
+     border-color: #f60;
+     background: #fff !important;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%) !important;
+}
+
+div.app:active .applabel {
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+div.app:active .applabel, div.app:active .applabel a  {
+     background: #f60 !important;
+     color: #fff !important;
+}
+
+.appimg {
+     min-height: 52px;
+}
+
+div.appgroup {
+     margin: 5px 0;
+     padding: 0;
+     width: auto;
+}
+
+div.search {
+     margin: 10px 10px 0 0;
+     padding: 8px 8px 0 8px;
+     width: auto;
+}
+
+table.search {
+     border-collapse: separate;
+     border-spacing: 0;
+     border-radius: 0 0 2px 2px;
+     border: 1px solid #7778bf;
+     background: none;
+     background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important;
+     padding: 8px;
+     width: 70%;
+     margin-left:auto;
+     margin-right:auto;
+     margin-top: -19px;
+     box-shadow: 0 1px 1px 1px rgba(200, 200, 200, 0.3);
+}
+
+.search tr {
+     background: none !important;
+}
+
+table.search td {
+     border: none;
+     padding: 0 5px;
+     white-space: nowrap;
+}
+
+table.search td:first-child {
+     padding-right: 2px;
+     padding-left: 0;
+}
+
+table.search td:nth-child(2) {
+     text-align: center !important;
+     padding-right: 0;
+     padding-left: 6px;
+     width: 60px;
+}
+
+table.search td:nth-child(3) {
+     padding-left: 0;
+     padding-right: 8px;
+}
+
+table.search input[type="text"] {
+     min-width: 40px !important;
+     width: 100%;
+     padding-left: 24px;
+}
+
+table.search select {
+     min-width: 80px;
+     width: 100%;
+     text-overflow: ellipsis;
+}
+
+.app img {
+     width: auto;
+     height: 32px;
+     max-height: 32px;
+     max-width: 32px;
+     padding: 6px;
+     padding: 10px 60px;
+     filter: drop-shadow(0 0 1px #ccc);
+     opacity: 0.9;
+}
+
+.app table {
+     background: none;
+     border: 0;
+     margin: auto;
+     width: auto;
+}
+
+.app tr {
+     background: none;
+     border: 0;
+     margin: 0;
+}
+
+.app td {
+     background: none;
+     border: 0;
+     padding: 0;
+}
+
+.applabel {
+     background: url(images/header.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     font-size: 8pt;
+     margin: 0;
+     padding: 4px 6px;
+     border-top: 1px solid #7778bf;
+     box-shadow: inset 0 0 0 1px #fff;
+     text-align: center;
+     width: 146px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+}
+
+.applabel a {
+     display: inline-block;
+     width: 100%;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+}
+
+/* end home page */
+
+tt, code {
+     font: bold 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
+     color: #050;
+}
+
+tt::-moz-selection {
+     color: #fff;
+     background: #030 !important;
+}
+
+div.main li {
+     text-align: left;
+     list-style: square;
+     margin: 2px 20px 0 40px;
+     padding: 1px 10px 1px 10px;
+     line-height: 150%;
+     word-wrap: break-word;
+}
+
+div.main li b, .statlist b a:hover {
+     color: #335 !important;
+     font-size: 9.5pt;
+     line-height: 170%;
+}
+
+.tidylist {
+     text-align: justify !important;
+}
+
+.tidylist li:first-child {
+     margin-top: -10px !important;
+}
+
+.tidylist:last-child {
+     padding-bottom: 5px;
+}
+
+.tidylist code {
+     text-align: left;
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #910;
+     font-weight: bold;
+}
+
+ol {
+
+     margin: 0 0 10px;
+     padding: 0;
+}
+
+ul {
+     display: inline;
+     margin: 0;
+     padding: 0;
+}
+
+code {
+     text-align: left;
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #030;
+}
+
+th code {
+     font-weight: bold;
+     margin-left: 3px;
+}
+
+a, h1, h2, h3, h4, th, input[type="submit"], input[type="reset"], button, select {
+     text-shadow: 0 1px 1px #fff;
+}
+
+a:hover, a:focus, a:active, .app:hover a, .app:focus a, .app:active a, 
+input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active,
+input[type="reset"]:hover, input[type="reset"]:focus, input[type="reset"]:active,
+button:hover, button:focus, button:active, select:hover, select:focus, select:active, .graphspanel a {
+     text-shadow: none;
+}
+
+a:link {
+     color: #3b6bbf;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
+     outline: none;
+}
+
+a:visited {
+     color: #2c4e8f;
+     text-decoration: none;
+     font-weight: bold;
+}
+
+a:hover, a:focus {
+     color: #f60;
+     text-decoration: none;
+     font-weight: bold;
+     text-shadow: none;
+}
+
+a:active {
+     color: #f30 !important;
+     font-weight: bold;
+}
+
+.links li {
+     list-style: url(images/link.png) !important;
+     text-align: justify;
+     line-height: 140% !important;
+     margin-right: 10px !important;
+}
+
+.links li:first-child {
+     padding-top: 0 !important;
+}
+
+.links ul {
+     margin-top: -5px !important;
+}
+
+p {
+     text-align: justify;
+     line-height: 130%;
+}
+
+p.infohelp, p#sybilinfo, p#debugmode, p#upnpstatus, p#pluginconfigtext, p#gatherstats {
+     border: 1px solid #7778bf;
+     padding: 15px 15px 15px 50px;
+     background: #fff url(/themes/console/images/info/infohelp.png) 12px center no-repeat;
+     line-height: 130%;
+}
+
+p#upnpstatus, p#keyringhelp, .widescroll + p.infohelp, #profiles ul#banlist, #config_reseed .confignav + p.infohelp 
+p#sybilinfo, p#debugmode, #config_family p.infohelp, p#profiles_overview, p#gatherstats {
+     border-radius: 2px;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+p#profiles_overview {
+     margin-bottom: 13px;
+}
+
+#profiles_overview + .widescroll {
+     margin-bottom: -5px;
+}
+
+.infohelp + hr {
+     display: none;
+}
+
+table#bugreports {
+    border-collapse: separate;
+    border-radius: 2px;
+    filter: drop-shadow(0 0 1px #ccc)
+}
+
+table#bugreports td.infohelp {
+     background: #fff url(/themes/console/images/info/bugreport.png) no-repeat left center !important;
+     padding: 10px 15px 10px 40px;
+     background-size: 28px 28px;
+     border: none !important;
+     text-align: justify;
+}
+
+p#debugmode {
+     padding: 15px 15px 15px 50px;
+     background: #fff url(/themes/console/images/info/debug.png) 12px center no-repeat;
+     background-size: 28px 28px;
+}
+
+p#sybilinfo {
+     padding: 15px 15px 15px 50px;
+     background: #fff url(/themes/console/images/info/experimental.png) 12px center no-repeat;
+     background-size: 28px 28px;
+     border-radius: 2px;
+     filter: drop-shadow(0px 0 1px #ccc);
+}
+
+p.infowarn {
+     border: 1px solid #7778bf;
+     padding: 15px 15px 15px 50px;
+     background: #fff url(/themes/console/images/info/infowarn.png) 10px center no-repeat;
+     line-height: 130%;
+}
+
+#bandwidthconfig tr:first-child .infohelp {
+     background: #fff url(/themes/console/images/info/bandwidth.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#addkeyring td.infohelp {
+     background: #fff url(/themes/console/images/info/keys.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#joinfamily tr:nth-child(3) td:first-child {
+     background: #fff url(/themes/console/images/info/key.png) 12px center no-repeat;
+     background: url(/themes/console/images/info/key.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px, 100% 100%, 100% 100% !important;
+}
+
+#joinfamily tr:nth-child(2) td {
+     background: #fff;
+     padding: 10px 15px;
+}
+
+#newfamily tr:last-child td:first-child {
+     background: #fff url(/themes/console/images/info/label.png) 12px center no-repeat;
+     background: url(/themes/console/images/info/label.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px, 100% 100%, 100% 100% !important;
+}
+
+#exportfamily tr:nth-child(2) td:first-child {
+     background: url(/themes/console/images/info/export_key.png) 12px center no-repeat, #fff !important;
+     padding: 20px 15px 20px 50px;
+     background-size: 28px 28px;
+}
+
+#leavefamily {
+     margin: 14px 0 10px;
+}
+
+#leavefamily tr:last-child td:first-child {
+     background: #fff url(/themes/console/images/info/leave_family.png) 12px center no-repeat;
+     background: url(/themes/console/images/info/leave_family.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#oldhome td:first-child {
+     background: #fff url(/themes/console/images/info/home.png) 12px center no-repeat;
+     background: url(/themes/console/images/info/home.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#oldhome input[type="checkbox"], #enablefullstats input[type="checkbox"] {
+     vertical-align: sub;
+}
+
+#floodfillconfig tr:first-child .infohelp {
+     background: #fff url(/themes/console/images/info/floodfill_32x32.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#floodfillconfig label {
+     margin-right: 5px;
+}
+
+p#clientconf.infohelp, p#webappconfigtext.infohelp {
+     background: #fff url(/themes/console/images/info/java_edit.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+p#pluginconfigtext {
+     background: #fff url(/themes/console/images/info/plugin_edit.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#plugininstall .infohelp {
+     background: #fff url(/themes/console/images/info/plugin_link.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2) {
+     background: #fff url(/themes/console/images/info/url.png) 12px center no-repeat;
+     background: url(/themes/console/images/info/url.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px, 100% 100%, 100% 100% !important;
+}
+
+#plugininstall tr:nth-child(3) td:nth-last-child(1), #manualreseed tr:nth-child(3) td:nth-last-child(1),
+#manualreseed tr:nth-child(5) td:nth-last-child(1) {
+     background: #fff;
+}
+
+.optionsave form {
+     margin: 0;
+     padding: 0;
+}
+
+#manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2) {
+     background: #fff url(/themes/console/images/info/from_file.png) 12px center no-repeat;
+     background: url(/themes/console/images/info/from_file.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px, 100% 100%, 100% 100% !important;
+}
+
+#manualreseed tr:nth-last-child(2) td.infohelp {
+     background: #fff url(/themes/console/images/info/box.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#config_peers tr:nth-child(3) td.infohelp {
+     background: #fff url(/themes/console/images/info/blocked.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#shutdownrouter + p.infohelp {
+     background: #fff url(/themes/console/images/info/power.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#restartrouter + p.infohelp, #config_family .infohelp.needrestart {
+     background: #fff url(/themes/console/images/info/reboot.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#shutdownrouter, h3#systray {
+     margin-bottom: -15px;
+}
+
+h3#systray + p.infohelp {
+     background: #fff url(/themes/console/images/info/systray.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#servicedebug {
+     margin-bottom: -15px;
+}
+
+h3#servicedebug + p.infohelp {
+     background: #fff url(/themes/console/images/info/debug.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+h3#browseronstart + p.infohelp {
+     background: #fff url(/themes/console/images/info/launch_browser.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+.main#config_reseed p.infohelp {
+     background: #fff url(/themes/console/images/info/connect.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+p#enablefullstats, p#gatherstats {
+     background: #fff url(/themes/console/images/info/statistics.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#config_family .infohelp {
+      background: #fff url(/themes/console/images/info/family.png) 12px center no-repeat !important;
+      padding: 15px 15px 15px 50px !important;
+      background-size: 28px 28px !important;
+}
+
+p#gatherstats + form, ul.statlist {
+     border: 1px solid #7778bf;
+     padding: 10px;
+     background: #fff;
+}
+
+.main#stats {
+     padding-bottom: 15px;
+}
+
+.main#stats h3 {
+     border-width: 1px;
+     border-radius: 0;
+     filter: none;
+     margin-bottom: 4px;
+     margin-top: -1px;
+}
+
+ul.statlist {
+     border: 1px solid #7778bf;
+     padding: 0 10px 10px;
+     display: inline-block;
+     width: calc(100% - 22px);
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(241, 241, 255, 0.3) 3px, #fff 5px);
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+.statlist li:not(old) {
+     list-style: none !important;
+}
+
+.statlist li::before, .statlist li a[href^="graph"]::before {
+     content: "";
+     display: inline-block;
+     height: 5px;
+     width: 5px;
+     box-shadow: inset 0 0 0 1px #fff;
+     margin-left: -35px;
+     margin-right: 10px;
+     margin-top: -2px;
+     transform: rotate(45deg);
+     vertical-align: middle;
+}
+
+.statlist li::before {
+     background: #335;
+     border: 1px solid #335;
+}
+
+.statlist li a[href^="graph"]::before {
+     background: #3b6bbf;
+     border: 1px solid #3b6bbf;
+}
+
+.statlist li a[href*="&"]::before  {
+     display: none;
+}
+
+.statlist li a[href^="graph"] {
+     margin-top: 4px;
+     margin-bottom: 2px;
+     display: inline-block;
+     vertical-align: middle;
+}
+
+.statlist > li::after {
+     content: "";
+     display: block;
+     width: 100%;
+     height: 1px;
+     margin-top: -5px;
+     border-top: 1px dotted #ddf;
+}
+
+li.noevents::after {
+     content: "";
+     margin-top: 12px !important;
+     display: block;
+}
+
+.statlist > li:last-child::after {
+     display: none;
+}
+
+li.noevents {
+     margin: 5px 0 5px 15px !important;
+     font-style: italic;
+}
+
+h1 {
+     text-align: left;
+     color: #31334f;
+     padding: 17px 15px 14px;
+     margin: 0 0 10px 207px;
+     font-size: 18pt;
+     line-height: 90%;
+     letter-spacing: 0.12em;
+     text-transform: uppercase;
+     box-shadow: inset 0 0 0 1px #bbf;
+     white-space: normal;
+     background: #fff;
+     background: linear-gradient(to bottom, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.7) 50%),  url(images/noise.png) #fff !important;
+     background-size: 100% 100%, 50px 50px !important;
+     border: 1px solid #447;
+     border-radius: 2px;
+     min-width: 546px;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+span.newtab {
+     text-align: right;
+     font-size: 8pt;
+     float: right;
+     letter-spacing: 0;
+}
+
+.newtab img {
+     margin-top: -3px;
+}
+
+.newtab img:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+h2 {
+     font-size: 13pt;
+     color: #31334f;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background: url(images/header.png) center center repeat-x;
+     background: linear-gradient(to right, #fff, rgba(255,255,255,0) 600px), linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     padding: 10px;
+     border: 1px solid #7778bf;
+     border-radius: 2px;
+     margin: 15px 0 15px 0 !important;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+     word-wrap: break-word;
+     text-transform: uppercase !important;
+}
+
+.welcome h2 { /* fixes occluded langbox rendering bug */
+     filter: none;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+     white-space: nowrap;
+}
+
+.main#home .welcome + #homepanel > .ag2 > h4 { /* fix placement of initial /home "welcome to i2p" h2 */
+     margin-top: -1px;
+}
+
+h2 a, h3 a {
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    word-spacing: 0.1em;
+}
+
+h2 a:hover, h3 a:hover {
+     color: #115;
+}
+
+h3.tabletitle a:hover, h3.ptitle a:hover, h3#graphinfo a:hover, #news h3 a:hover {
+     color: #f60;
+}
+
+h2 img {
+     opacity: 0.9 !important;
+}
+
+h3 {
+     border: 1px solid #7789bf;
+     border-left: 5px solid #7789bf;
+     padding: 6px 5px 5px 7px;
+     margin: 12px 0 15px 0;
+     border-radius: 0 2px 2px 0;
+     background: url(images/header.png) center center repeat-x !important;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     color: #31334f;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+}
+
+h3.tabletitle, h3.ptitle, #config_advanced h3.tabletitle, h3#bannedpeers {
+     border-radius: 0;
+     border: 1px solid #7778bf;
+     margin-bottom: -2px;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+h3.ptitle {
+     margin-bottom: -14px;
+}
+
+h3#bannedpeers {
+     margin-bottom: -1px;
+}
+
+h2, h3 {
+     background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8) 25%) !important;
+}
+
+/* /configpeers */
+
+#banlist li {
+     min-height: 34px;
+}
+
+#bannedips {
+     margin-bottom: 10px;
+}
+
+#bannedips td {
+     vertical-align: top;
+     padding: 0;
+     width: 50%;
+}
+
+#permabanned tr:nth-child(2) td, #ipv4 td, #ipv6 td {
+     border-bottom: 1px solid #7778bf;
+     background: #fff !important;
+     background: linear-gradient(to bottom, #fff 50%, rgba(238, 238, 255, 0.2) 50%, #eef 100%) #fff !important;
+}
+
+#ipv6 td {
+     border-top: 1px solid #7778bf;
+}
+
+#bannedips table {
+     border: none;
+     border-bottom: 1px solid #7778bf;
+     margin: -1px 0 !important;
+}
+
+#bannedips table th {
+     text-align: center;
+}
+
+#bannedips table td {
+     text-align: center;
+     padding: 4px 2px;
+}
+
+#banneduntilrestart, #permabanned {
+    width: 100%;
+}
+
+#permabanned td:first-child {
+     border-left: 1px solid #7778bf;
+     text-align: right;
+     padding-right: 10px;
+     width: 49%;
+}
+
+#permabanned td:nth-child(2) {
+     width: 2%;
+}
+
+#permabanned td:last-child {
+     text-align: left;
+     padding-left: 10px;
+     width: 49%;
+}
+
+#banneduntilrestart td {
+     border-right: 1px solid #7778bf;
+     text-align: right !important;
+}
+
+#banneduntilrestart td:last-child {
+     text-align: center !important;
+}
+
+#bannedips tr:nth-child(even) {
+     background: #eef;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
+}
+
+#bannedips tr:nth-child(odd) {
+     background: #f7f8ff;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px);
+}
+
+/* end /configpeers */
+
+h4 {
+     border: 1px solid #7778bf;
+     padding: 4px 6px;
+     margin: 5px 0 10px 0;
+     font-size: 10pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-radius: 2px;
+     background: #eef;
+     background: linear-gradient(to right, #fff, #eef);
+     color: #31334f;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+#certs p:empty {
+     display: none;
+}
+
+#certs h3 {
+     margin-bottom: -6px;
+     border-width: 1px;
+     border-radius: 0;
+     filter: none;
+}
+
+#certs h4 {
+     border-radius: 0;
+}
+
+#certs h3 + p {
+     border: 1px solid #7778bf;
+     padding: 15px;
+     margin: 5px 0 !important;
+}
+
+#certs h3 + p:empty + h4 {
+     margin-top: 5px !important;
+}
+#certs p + h3, #certs p + h4 {
+     margin-top: 10px;
+}
+
+#certs h4 + p {
+     border: 1px solid #7778bf;
+     padding: 15px;
+     margin: -11px 0;
+}
+
+#certs p {
+     background: #efefff;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+#certs textarea {
+     margin: -1px 0 10px 0;
+     width: 100%;
+}
+
+#certs h4 + textarea {
+     margin: -11px 0 5px !important;
+     border: 1px solid #7778bf;
+     box-shadow: none;
+}
+
+.underline {
+     border-bottom: 1px solid #000022;
+     padding: 5px 0 5px 0;
+     margin: 0 0 10px 0;
+}
+
+.langbox {
+     margin:3px 1px 0 5px;
+     padding: 2px 3px;
+     color: #001;
+     font-size: 7pt;
+     width: 360px;
+     text-align: right;
+     float: right;
+     vertical-align: middle;
+     opacity: 1 !important;
+}
+
+.langbox img {
+     padding: 0 !important;
+     opacity: 0.9;
+     margin: -1px 0 0;
+     border: 1px solid #99f;
+     filter: none;
+     border-radius: 1px;
+}
+
+.langbox img:hover, .langbox a:focus img {
+     border: 1px solid #f60;
+     filter: none !important;
+     box-shadow: 0 0 1px 0 #f60;
+     opacity: 1;
+     transform: scale(1.2);
+     transition: ease box-shadow 0.3s, ease border 0.3s;
+}
+
+.langbox a:active img {
+     transform: scale(1.0);
+}
+
+input[type="submit"], input[type="reset"], button, .optbox, select {
+     cursor: pointer;
+}
+
+button.search {
+     background: url(/themes/console/images/buttons/search.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+button.search:hover {
+     background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.search[type="text"] {
+     background: #fff url(/themes/console/images/buttons/search.png) no-repeat 4px center;
+     padding: 4px 3px 4px 22px;
+     background-size: 16px 16px !important;
+     background-blend-mode: luminosity;
+}
+
+input.search[type="text"]:focus {
+     background-blend-mode: normal;
+}
+
+input, input:visited, button, button:visited {
+     border: 1px solid #999;
+     box-shadow: inset 0 0 0 1px #fff;
+     background: #eee;
+     background: linear-gradient(to bottom, #fff, #ddd);
+     color: #333;
+     margin: 3px;
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+     padding: 4px 5px;
+     text-decoration: none;
+     border-radius: 2px;
+     opacity: 1;
+     background-size: 14px auto, 100% 100% !important;
+     filter: saturate(70%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+}
+
+button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner  {
+     outline: none;
+     border: none;
+}
+
+button:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus {
+     background: linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #f60;
+     filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8));
+     transition: ease border 0.7s;
+}
+
+button:active, input[type="submit"]:active, input[type="reset"]:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #555;
+     background-blend-mode: luminosity;
+}
+
+input.accept, button.accept {
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.accept:hover, button.accept:hover,
+input.accept:focus, button.accept:focus {
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.accept[value^="Unban"], button.accept[value^="Unban"] {
+     background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.accept[value^="Unban"]:hover, button.accept[value^="Unban"]:hover,
+input.accept[value^="Unban"]:focus, button.accept[value^="Unban"]:focus {
+     background: url(/themes/console/images/buttons/unban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.accept[value^="Create"], button.accept[value^="Create"] {
+     background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.accept[value^="Create"]:hover, button.accept[value^="Create"]:hover,
+input.accept[value^="Create"]:focus, button.accept[value^="Create"]:focus {
+     background: url(/themes/console/images/buttons/create.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.accept[value^="Filter"], button.accept[value^="Filter"] {
+     background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.accept[value^="Filter"]:hover, button.accept[value^="Filter"]:hover,
+input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus {
+     background: url(/themes/console/images/buttons/filter.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.add, button.add {
+     background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.add:hover, button.add:hover,
+input.add:focus, button.add:focus {
+     background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.add[value^="Adjust"], button.add[value^="Adjust"] {
+     background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.add[value^="Adjust"]:hover, button.add[value^="Adjust"]:hover,
+input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus {
+     background: url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.cancel, button.cancel {
+     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.cancel:hover, button.cancel:hover,
+input.cancel:focus, button.cancel:focus {
+     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.accept[value^="Show"], button.accept[value^="Show"],
+input.check[value^="View"], button.check[value^="View"] {
+     background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.accept[value^="Show"]:hover, button.accept[value^="Show"]:hover,
+input.check[value^="View"]:hover, button.check[value^="View"]:hover,
+input.accept[value^="Show"]:focus, button.accept[value^="Show"]:focus,
+input.check[value^="View"]:focus, button.check[value^="View"]:focus {
+     background: url(/themes/console/images/buttons/show.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.cancel[value^="Hide"], button.cancel[value^="Hide"],
+input.delete[value^="Do not view"], button.delete[value^="Do not view"] {
+     background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.cancel[value^="Hide"]:hover, button.cancel[value^="Hide"]:hover,
+input.delete[value^="Do not view"]:hover, button.delete[value^="Do not view"]:hover,
+input.cancel[value^="Hide"]:focus, button.cancel[value^="Hide"]:focus,
+input.delete[value^="Do not view"]:focus, button.delete[value^="Do not view"]:focus {
+     background: url(/themes/console/images/buttons/hide.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.check, button.check {
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.check:hover, button.check:hover,
+input.check:focus, button.check:focus {
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.check[value$="updates"], button.check[value$="updates"] {
+     background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.check[value$="updates"]:hover, button.check[value$="updates"]:hover,
+input.check[value$="updates"]:focus, button.check[value$="updates"]:focus {
+     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.delete, button.delete {
+     background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.delete:hover, button.delete:hover,
+input.delete:focus, button.delete:focus {
+     background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.delete[value^="Ban"], button.delete[value^="Ban"] {
+     background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.delete[value^="Ban"]:hover, button.delete[value^="Ban"]:hover,
+input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus {
+     background: url(/themes/console/images/buttons/ban.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.download, button.download {
+     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.download:hover, button.download:hover,
+input.download:focus, button.download:focus {
+     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.download[value^="Join"], button.download[value^="Join"] {
+     background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.download[value^="Join"]:hover, button.download[value^="Join"]:hover,
+input.download[value^="Join"]:focus, button.download[value^="Join"]:focus {
+     background: url(/themes/console/images/buttons/users.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.download[value$="from File"], button.download[value$="from File"],
+input.download[value$="from file"], button.download[value$="from file"] {
+     background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.download[value$="from File"]:hover, button.download[value$="from File"]:hover,
+input.download[value$="from file"]:hover, button.download[value$="from file"]:hover,
+input.download[value$="from File"]:focus, button.download[value$="from File"]:focus,
+input.download[value$="from file"]:focus, button.download[value$="from file"]:focus {
+     background: url(/themes/console/images/buttons/from-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.download[value^="Dump"], button.download[value^="Dump"] {
+     background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.download[value^="Dump"]:hover, button.download[value^="Dump"]:hover,
+input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus {
+     background: url(/themes/console/images/buttons/dump-threads.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.go, button.go, input[value="GO"] {
+     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.go:hover, button.go:hover, input[value="GO"]:hover,
+input.go:focus, button.go:focus, input[value="GO"]:focus {
+     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.go[value^="Create"], button.go[value^="Create"] {
+     background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.go[value^="Create"]:hover, button.go[value^="Create"]:hover,
+input.go[value^="Create"]:focus, button.go[value^="Create"]:focus {
+     background: url(/themes/console/images/buttons/create-file.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.reload, button.reload {
+     background: url(/themes/console/images/buttons/restore.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.reload:hover, button.reload:hover,
+input.reload:focus, button.reload:focus {
+     background: url(/themes/console/images/buttons/restore_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.reload[value$="restart"], button.reload[value$="restart"] {
+     background: url(/themes/console/images/buttons/restart.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.reload[value$="restart"]:hover, button.reload[value$="restart"]:hover,
+input.reload[value$="restart"]:focus, button.reload[value$="restart"]:focus {
+     background: url(/themes/console/images/buttons/restart_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.reload[value^="Update"], button.reload[value^="Update"] {
+     background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.reload[value^="Update"]:hover, button.reload[value^="Update"]:hover,
+input.reload[value^="Update"]:focus, button.reload[value^="Update"]:focus {
+     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.reload[value="Force GC"], button.reload[value="Force GC"] {
+     background: url(/themes/console/images/buttons/clean.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.reload[value="Force GC"]:hover, button.reload[value="Force GC"]:hover,
+input.reload[value="Force GC"]:focus, button.reload[value="Force GC"]:focus {
+     background: url(/themes/console/images/buttons/clean_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+input.stop, button.stop {
+     background: url(/themes/console/images/buttons/shutdown.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.stop:hover, button.stop:hover,
+input.stop:focus, button.stop:focus {
+     background: url(/themes/console/images/buttons/shutdown_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+
+/* client config buttons aka project "X" */
+
+button.control {
+     font-size: 0 !important;
+     padding: 12px !important;
+     text-indent: -99999px !important;
+     background-size: 16px 16px, 100% 100% !important;
+}
+
+button.accept.control {
+     background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.accept.control:hover, button.accept.control:focus {
+     background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.stop.control {
+     background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.stop.control:hover, button.stop.control:focus {
+     background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.add.control {
+     background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.add.control:hover, button.add.control:focus {
+     background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.delete.control {
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.delete.control:hover, button.delete.control:focus {
+     background: url(/themes/console/images/buttons/delete_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.check.control {
+     background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.check.control:hover, button.check.control:focus {
+     background: url(/themes/console/images/buttons/update_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+button.download.control {
+     background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+button.download.control:hover, button.download.control:focus {
+     background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+}
+
+/* end project "X" */
+
+/* sidebar buttons */
+
+.routersummary button {
+     margin: 0 1px -3px;
+     min-width: 87px;
+}
+
+.routersummary .reload, .routersummary .stop {
+     text-indent: -99999px;
+     background-size: 16px 16px, 100% 100% !important;
+}
+
+.routersummary .reload {
+     background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+}
+
+.routersummary .reload:hover, .routersummary .reload:focus {
+     background: url(/themes/console/images/buttons/restart_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     border: 1px solid #f60;
+}
+
+.routersummary .reload:active, .routersummary .stop:active, .routersummary .download:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #555;
+}
+
+.routersummary .reload[value="Reseed"] {
+     text-indent: 0;
+     text-align: left;
+     min-width: 0;
+     background: url(/themes/console/images/buttons/download.png) center left 4px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+}
+
+.routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus {
+     background: url(/themes/console/images/buttons/download.png) center left 4px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+}
+
+.routersummary .stop {
+     background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.routersummary .stop:hover, .routersummary .stop:focus {
+     background: url(/themes/console/images/buttons/shutdown_hover.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #f60;
+}
+
+.routersummary .download {
+     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 22px !important;
+}
+
+.routersummary .cancel {
+     margin-top: 10px;
+}
+
+/* Show text on context specific buttons (eg deferred shutdown) */
+
+.routersummary .reload[value="restartImmediate"], .routersummary .stop[value="shutdownImmediate"], .routersummary .reload[value="Reseed"] {
+     text-indent: 0;
+     text-align: left;
+     min-width: 0 !important;
+     padding: 5px 7px 5px 22px !important;
+     text-transform: capitalize;
+}
+
+.routersummary .cancel {
+     text-transform: capitalize;
+}
+
+.routersummary .reload[value="restartImmediate"] {
+     background: url(/themes/console/images/buttons/restart.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.routersummary .reload[value="restartImmediate"]:hover, .routersummary .reload[value="restartImmediate"]:focus, .routersummary .reload[value="restartImmediate"]:active {
+     background: url(/themes/console/images/buttons/restart_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.routersummary .stop[value="shutdownImmediate"] {
+     background: url(/themes/console/images/buttons/shutdown.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.routersummary .stop[value="shutdownImmediate"]:hover, .routersummary .stop[value="shutdownImmediate"]:focus, .routersummary .stop[value="shutdownImmediate"]:active {
+     background: url(/themes/console/images/buttons/shutdown_hover.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.routersummary .reload[value="Reseed"] {
+     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #fff, #ddd) !important;
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.routersummary .reload[value="Reseed"]:hover, .routersummary .reload[value="Reseed"]:focus, .routersummary .reload[value="Reseed"]:active {
+     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active {
+     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 22px !important;
+}
+
+/* end sidebar buttons */
+
+input[type="text"], input[type="password"] {
+     background: #fff;
+     box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6);
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+     box-shadow: none;
+     filter: drop-shadow(0 0 1px #89f);
+     color: #000;
+}
+
+.main[id^="config_"] input[name="port"] {
+     min-width: 120px !important;
+     max-width: 120px;
+}
+
+input[type="file"] {
+     border: none;
+     padding: 0;
+     background: none;
+     box-shadow: none;
+}
+
+.optbox, input[type="checkbox"], input[type="radio"] {
+     background: none;
+     margin: 5px;
+     padding: 2px;
+     min-height: 16px;
+     height: 16px;
+     min-width: 16px !important;
+     width: 16px !important;
+     vertical-align: sub !important;
+     opacity: 1.0;
+     border: 0;
+     box-shadow: none;
+     cursor: pointer;
+}
+
+.optbox:hover, input[type="checkbox"]:hover, input[type="radio"]:hover,
+input[type="checkbox"]:focus, input[type="radio"]:focus {
+     outline: none;
+     filter: drop-shadow(0 0 3px #89f);
+     min-height: 16px;
+     height: 16px;
+     min-width: 16px !important;
+     width: 16px !important;
+     opacity: 1.0;
+     border: 0;
+}
+
+input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover,
+input[type="checkbox"][disabled]:focus, input[type="radio"][disabled]:focus {
+     filter: none;
+     box-shadow: none;
+}
+
+label {
+     cursor: pointer;
+}
+
+label:hover {
+     color: #000;
+}
+
+.main#config_clients label[for="0"] {
+     cursor: default;
+}
+
+select {
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     background: url(images/dropdown.png) right center no-repeat #fff;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     padding: 4px 16px 4px 4px !important;
+     color: #333;
+     margin: 5px;
+     border: 1px solid #999;
+     min-width: 120px;
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+     border-radius: 2px;
+     text-align: left !important;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+}
+
+select:focus {
+     box-shadow: 0 0 0 1px #89f;
+     color: #000;
+}
+
+select option {
+     background: #fff;
+}
+
+select, input[type="text"] {
+     min-width: 120px;
+}
+
+select:hover, select:active {
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+}
+
+select:focus {
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+     box-shadow: 0 0 0 1px #89f;
+}
+
+select::-ms-expand {
+     display: none;
+}
+
+input[readonly], input[disabled], input[readonly]:focus, input[disabled]:focus {
+     background: #e9e9e9;
+     box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6);
+     color: #333;
+     filter: none;
+     cursor: default;
+}
+
+textarea {
+     padding: 5px;
+     margin: 5px !important;
+     background: #ffe;
+     color: #333 !important;
+     border-radius: 2px;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     min-height: 100px;
+     min-width: 97%;
+     border: 1px solid #999;
+     box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6);
+}
+
+textarea:focus {
+     color: #001 !important;
+     box-shadow: none;
+     filter: drop-shadow(0 0 1px #89f);
+}
+
+.statusnotes {
+     font-style: normal;
+     font-size: 9pt;
+     text-align: center;
+     border: 1px solid #7778bf !important;
+     border-top: 0 !important;
+     margin: -5px 0 5px 0;
+     padding: 7px;
+     background: #eef;
+     background: linear-gradient(to right, #efefff, #fff, #efefff) #fff;
+     letter-spacing: 0em !important;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+h3 + .statusnotes {
+     margin-top: 2px !important;
+}
+
+div.joblog {
+     border: 0;
+     margin-top: 5px;
+ }
+
+div.joblog i {
+     color: #050;
+     font-weight: bold;
+}
+
+div.joblog ul {
+     word-wrap: break-word !important;
+     text-align: justify;
+     line-height: 100% !important;
+     margin-top: -5px !important;
+}
+
+div.joblog li {
+     word-wrap: break-word !important;
+     line-height: 115% !important;
+     padding: 0;
+     font-size: 9pt !important;
+     page-break-inside: avoid;
+     -webkit-break-inside: avoid;
+     break-inside: avoid;
+}
+
+div.joblog li:last-child {
+     margin-bottom: -5px;
+}
+
+div.joblog li:first-child {
+     margin-top: 10px;
+}
+
+.joblog li li:first-child {
+     margin-top: 0;
+}
+
+div.joblog form:first-child {
+     margin-top: 10px;
+}
+
+div.joblog table {
+     margin-top: 15px;
+}
+
+div.joblog p {
+     line-height: 130%;
+}
+
+div.joblog hr {
+     margin: 15px 0;
+}
+
+div.joblog h3 {
+     margin-bottom: 5px;
+}
+
+.main#jobs ol {
+     -moz-columns: 350px 2;
+     -webkit-columns: 350px 2;
+     columns: 350px 2;
+     border: 1px solid #7778bf;
+     padding: 8px 0;
+     margin-top: 1px;
+     background: #efeffff;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff;
+     box-shadow: inset 0 0 0 1px #fff;
+     break-inside: avoid;
+     page-break-inside: avoid;
+     -webkit-break-inside: avoid;
+}
+
+.main#jobs ol:empty {
+     display: none;
+}
+
+.main#jobs ol li:first-child {
+     margin-top: 0 !important;
+}
+
+.main#jobs ol li {
+     margin-top: 5px;
+     margin-bottom: 5px;
+     border-bottom: 1px dotted #ccf;
+     padding-bottom: 3px;
+}
+
+.main#jobs ol li:last-child {
+     margin-bottom: 0;
+}
+
+h3#finishedjobs + ol li, h3#scheduledjobs + ol li, h3#activejobs + ol li, h3#readyjobs + ol li {
+    list-style: none !important;
+}
+
+h3#activejobs + ol li:before, h3#scheduledjobs + ol li:before, h3#readyjobs + ol li:before, h3#finishedjobs + ol li:before {
+     content: '\2023\00A0\00A0';
+     margin-left: -20px;
+     font-size: 15pt;
+     font-weight: bold;
+     line-height: 50%;
+     vertical-align: sub;
+     color: #393;
+}
+
+h3#finishedjobs + ol li:before {
+     color: #5a5;
+     content: '\2714\00A0';
+}
+
+h3#readyjobs + ol li:before {
+     color: #dd3;
+}
+
+h3#scheduledjobs + ol li:before {
+     color: #970;
+}
+
+#schedjobs {
+     width: 100% !important;
+     margin: 15px 0 0 !important;
+}
+
+.main#jobs h3 {
+     border-width: 1px;
+     border-radius: 0;
+     filter: none;
+     margin-bottom: -2px;
+}
+
+.smallhead {
+     font-size: 8pt
+}
+
+.mediumtags {
+     font-weight: bold;
+}
+
+.cells {
+     border-left: 1px outset #ddf;
+     border-top: 1px inset #ddf !important;
+     border-bottom: 1px inset #ddf !important;
+}
+
+.tablefooter {
+     background: #fff;
+}
+
+.tablefooter tr, .tablefooter td {
+     background: #fff;
+     border-top: 1px solid #7778bf;
+     border-bottom: 1px solid #7778bf !important;
+     padding: 8px 2px;
+     font-size: 9pt;
+     line-height: 110%;
+}
+
+.formaction {
+     text-align: right;
+     border: 1px solid #7778bf;
+     margin-top: -15px;
+     padding: 5px;
+     background: #fff;
+}
+
+#config_homepage .formaction, #config_clients .formaction, #webappconfigactions {
+     margin-top: -6px;
+}
+
+#sidebardefaults {
+     margin-top: -6px;
+}
+
+div.footnote {
+     text-align: right;
+     color: #447;
+     font-size: 7pt;
+     margin-bottom: -5px !important;
+}
+
+div.footnote hr {
+     margin: 24px 0 5px 0 !important;
+     background: #447;
+     background: linear-gradient(to right, #77a, #669, #77a);
+     height: 1px;
+     box-shadow: 0 0 0 1px #eef;
+}
+
+.topness {
+     font-size: 8pt;
+     text-align: right;
+     margin-top: 0;
+     margin-bottom: -18px;
+     margin-right: 5px;
+}
+
+iframe.iframed {
+     margin: 10px 0 0;
+}
+
+.main#webmail {
+     padding: 0 8px;
+}
+
+#susimailframe {
+     margin-top: 3px;
+}
+
+.main#dns {
+     padding: 0;
+     min-width: 576px;
+}
+
+#susidnsframe {
+     margin: 0 0 -2px;
+     height: 100%;
+     width: 100%;
+     overflow: hidden;
+}
+
+.main#tunnelmgr {
+     padding: 0 10px;
+     min-width: 556px;
+}
+
+#i2ptunnelframe {
+     margin: -4px 0 -1px;
+     overflow: hidden;
+}
+
+.main#embedded {
+     padding: 1px 11px 4px;
+}
+
+/* Fixes for when app is not started and console error loads inside iframe */
+
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+}
+
+.iframed div.routersummaryouter {
+     display: none !important;
+}
+
+.iframed h1 {
+     margin: 0 10px 10px 7px !important;
+}
+
+.iframed div.sorry {
+     margin: 5px 10px 10px 7px !important;
+}
+
+/* end iframed console fixes */
+
+/* Theme choice & Language selection in /configui */
+
+#themeui.formaction, #langui.formaction {
+     border: none;
+     border-top: 1px solid #7778bf;
+     background: none;
+     margin: 5px -5px 0;
+}
+
+#consolepass.formaction {
+     margin-top: -6px;
+     margin-bottom: -3px;
+}
+
+#consolepass tr:first-child td {
+     background: #fff url(/themes/console/images/info/user_add.png) 12px center no-repeat;
+     background-size: 28px 28px;
+     padding: 15px 15px 15px 50px;
+}
+
+.themechoice .optbox, .langselect .optbox {
+     vertical-align: text-bottom;
+}
+
+div.themechoice {
+     width: 115px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     border: 1px solid #7778bf;
+     float: left;
+     text-align: center;
+     padding: 0 4px;
+     margin: 4px;
+     border-radius: 2px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, #ddf);
+     transition: filter ease 0.3s 0s;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+.themechoice:hover {
+     border: 1px solid #f60;
+     background: #fff;
+     transition: filter ease 0.3s 0s;
+}
+
+.themechoice:hover > object ~ .themelabel {
+     border-top: 1px solid #f60 !important;
+     background: #fff !important;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%) !important;
+     color: #f60;
+}
+
+.themechoice:active > object ~ .themelabel {
+     background: #f60 !important;
+     color: #fff;
+}
+
+.themechoice:hover > object {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+.main[id^="config_"] .themechoice .optbox {
+     min-height: 82px !important;
+     min-width: 118px !important;
+     opacity: 0; /* hide the radio icon so we can use thumbnail img instead */
+     margin-left: -36px !important;
+     margin-top: 4px;
+     z-index: 999 !important;
+     outline: 1px dotted #f00;
+     position: absolute;
+}
+
+.themechoice .optbox + object {
+     margin-left: -1px;
+     margin-top: 6px;
+     padding: 2px 0 !important;
+     margin-bottom: 31px;
+}
+
+.themechoice img, .themechoice object {
+     margin-bottom: 31px !important;
+}
+
+#themeoptions {
+     clear: both;
+     border-top: 1px solid #ddf;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff;
+     margin: 0 -5px 5px;
+     position: relative;
+     top: 4px;
+     padding: 5px 10px 3px 5px;
+}
+
+#themeoptions br {
+     display: none;
+}
+
+#themeoptions label {
+     white-space: nowrap;
+     margin: 4px 10px 4px 0 !important;
+     display: inline-block;
+}
+
+p#helptranslate {
+     position: relative;
+     top: 4px;
+     padding: 15px 10px 15px 50px !important;
+     text-align: left !important;
+     border-top: 1px solid #7778bf;
+     background: url(/themes/console/images/info/notice.png) left 14px center no-repeat, #fff;
+     background-size: 28px 28px;
+}
+
+#reseedconfig tr:nth-child(2) br {
+     display: none;
+}
+
+#reseedconfig tr:nth-child(2) label {
+     white-space: nowrap;
+     margin-right: 10px;
+}
+
+#themeoptions input {
+     margin-left: 5px;
+     vertical-align: sub;
+}
+
+div.themelabel {
+     border-top: 1px solid #7778bf !important;
+     margin-left: -4px;
+     margin-right: -4px;
+     margin-top: -24px;
+     padding: 3px 2px;
+     background: #eef;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     box-shadow: inset 0 0 0 1px #fff;
+     font-size: 9pt;
+}
+
+.themechoice .optbox:hover + img ~ .themelabel {
+     color: #f60;
+     font-weight: bold;
+}
+
+.themechoice .optbox:checked + object ~ .themelabel {
+     background: #ddf !important;
+     color: #338 !important;
+     font-weight: bold;
+}
+
+.themechoice .optbox:focus + object ~ .themelabel {
+     color: #f60 !important;
+     box-shadow: inset 0 0 0 1px #fff;
+     background: linear-gradient(to right, #eef, #fff, #eef) !important;
+}
+
+.themechoice .optbox:active + object ~ .themelabel {
+     color: #fff !important;
+     box-shadow: inset 0 0 0 1px #fff;
+     background: #f60 !important;
+}
+
+.themechoice .optbox:checked:active + object ~ .themelabel {
+     color: #f60 !important;
+     background: linear-gradient(to right, #eef, #fff, #eef) !important;
+}
+
+div#themesettings {
+     clear: both;
+     padding: 4px 5px 0;
+     margin: -16px 0 0;
+     border: 1px solid #7778bf;
+     background: #fff;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(248, 248, 255, 0.3) 3px, #fff 5px);
+}
+
+div#langsettings {
+     padding: 4px 5px 0;
+     border: 1px solid #7778bf;
+     margin: -16px 0 0;
+     background: #fff;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(248, 248, 255, 0.3) 3px, #fff 5px);
+}
+
+#themesettings hr, #langsettings hr {
+     display: none;
+}
+
+.langselect { /* containing box for lang selection */
+     width: 115px;
+     float: left;
+     margin: 4px;
+     text-align: center;
+     border: 1px solid #7778bf;
+     padding: 4px 4px 0;
+     border-radius: 2px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, #ddf);
+     transition: transform 0.3s ease 0s;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+.langselect:hover {
+     border: 1px solid #f60;
+     background: #fff;
+}
+
+.langselect .optbox, .langselect .optbox:hover, .langselect .optbox:focus {
+     min-width: 118px !important;
+     min-height: 50px !important;
+     width: 118px !important;
+     height: 56px !important;
+     margin-left: -2px;
+     margin-bottom: 6px;
+     margin-top: -2px;
+     opacity: 0;
+     z-index: 999;
+     position: relative;
+     outline: 1px dotted #f00;
+}
+
+.langselect:hover > input + img {
+     transform: scale(1.1);
+     border: 1px solid #f60 !important;
+}
+
+.langselect img[src^="/flags"] {
+     border: 1px solid #89f;
+     margin-bottom: 42px;
+     margin-left: 0;
+     margin-top: -52px;
+     opacity: 1;
+     z-index: 3;
+     position: relative;
+}
+
+.langselect input, .themechoice input {
+     cursor: pointer;
+}
+
+.langselect input[name="lang"]:checked + img {
+     transform: scale(1.1);
+     -webkit-transform: scale(1.1);
+     border: 1px solid #338;
+     border: 1px solid rgba(51, 51, 136, 0.7);
+     box-shadow: 0 0 0 1px #fff;
+}
+
+.langselect:hover > input[name="lang"] + img + .ui_lang {
+     color: #f60;
+     border-top: 1px solid #f60;
+     background: #fff !important;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%) !important;
+}
+
+.langselect:active > input[name="lang"] + img + .ui_lang {
+     background: #f60 !important;
+     color: #fff;
+}
+
+.langselect input[name="lang"]:checked + img + .ui_lang {
+     background: #ddf !important;
+     color: #338;
+     font-weight: bold;
+     margin: -32px -4px 0;
+     z-index: 2;
+}
+
+.langselect input[name="lang"]:focus + img + .ui_lang {
+     color: #f60 !important;
+     box-shadow: inset 0 0 0 1px #fff;
+     background: linear-gradient(to right, #eef, #fff, #eef) !important;
+}
+
+.langselect input[name="lang"]:active + img + .ui_lang {
+     color: #fff !important;
+     box-shadow: inset 0 0 0 1px #fff;
+     background: #f60 !important;
+}
+
+.langselect input[name="lang"]:checked:active + img + .ui_lang {
+     color: #f60 !important;
+     background: linear-gradient(to right, #eef, #fff, #eef) !important;
+}
+
+div.flagradio {
+     margin-top: 2px;
+}
+
+div.langselect + br {
+     display: none !important;
+}
+
+div.langselect br {
+     display: block;
+}
+
+div.ui_lang { /* lang text label */
+     text-align: center;
+     background: #eef url(images/tinytitle.png) center center !important;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     padding: 3px 2px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     margin: -32px -4px 0;
+     border-top: 1px solid #7778bf;
+     border-radius: 0 0 2px 2px;
+     text-transform: capitalize;
+     font-size: 9pt;
+     z-index: 2;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+p#helptranslate {
+     clear: both;
+     padding: 5px 10px 10px;
+     text-align: right;
+     margin: 0 -5px;
+}
+
+/* configui password*/
+
+table#consolepass th:nth-child(2) {
+     text-align: left;
+}
+
+table#consolepass td:first-child {
+     width: 100px;
+     white-space:nowrap;
+}
+
+table#consolepass td {
+     padding: 5px 10px;
+     font-size: 9pt;
+}
+
+table#consolepass input {
+     margin: 5px;
+}
+
+table#consolepass td#pw_adduser {
+     padding: 5px 10px;
+     border-top: 1px solid #7778bf;
+}
+
+td#pw_adduser input {
+     margin: 5px 20px 5px 5px !important;
+}
+
+table#consolepass input[name="name"] {
+     margin-right: 20px;
+}
+
+#consolepass input[name="name"], #externali2cp input[name="user"], #reseedconfig input[name="username"] {
+     background: #fff url(/themes/console/images/buttons/user.png) 5px center no-repeat;
+     padding: 4px 5px 4px 26px !important;
+     background-size: 16px 16px !important;
+}
+
+#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"], #reseedconfig input[type="password"] {
+     background: #fff url(/themes/console/images/buttons/password.png) 5px center no-repeat !important;
+     padding: 4px 5px 4px 26px !important;
+     background-size: 16px 16px !important;
+}
+
+/* end configui */
+
+#config_update form {
+     margin-bottom: 0 !important;
+}
+
+table#addkeyring tr:last-child td {
+     padding: 5px;
+     border-top: 1px solid #7778bf;
+}
+
+#config_summarybar .configtable td:not(.optionsave) {
+     padding-left: 50px;
+     background: url(/themes/console/images/info/interval.png) 12px center no-repeat;
+     background: url(/themes/console/images/info/interval.png) 12px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+     background-size: 28px 28px, 100% 100%, 100% 100% !important;
+}
+
+/* netdb */
+
+.main#netdb, .main#events {
+     background: #fff;
+}
+
+.confignav + .netdbentry {
+     margin-top: 10px;
+}
+
+.confignav + #banlist {
+     margin-bottom: 5px;
+}
+
+.confignav + .tabletitle, .confignav + form > .ptitle, .confignav + form > .tabletitle, .confignav + ul,
+.confignav + .infowarn, .confignav + .infohelp, .confignav + h3, .confignav + table, .confignav + p {
+     margin-top: 15px !important;
+}
+
+table.netdbentry th {
+     font-weight: normal;
+}
+
+table.netdbentry th:last-child {
+     text-align: right;
+     padding: 5px;
+     white-space: nowrap;
+     width: 50px;
+}
+
+table.netdbentry th:first-child, table.netdbentry td:first-child  {
+     white-space: nowrap;
+     padding: 4px 6px !important;
+     text-align: left;
+}
+
+table.netdbentry td:first-child  {
+     width: 80px;
+}
+
+table.netdbentry td:nth-child(2) {
+     word-wrap: break-word;
+}
+
+.netdbentry img {
+     margin: 1px 0 0 0;
+}
+
+a.viewfullentry:not(old) {
+     font-size: 0;
+}
+
+a.viewfullentry::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     vertical-align: text-top;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+a.viewfullentry:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+table#leasesetdebug th a:not(old), table#leasesetsummary th a:not(old) {
+     font-size: 0;
+}
+
+table#leasesetdebug th a::after, table#leasesetsummary th a::after {
+     content: url(/themes/console/images/buttons/floodfill.png);
+     vertical-align: text-top;
+     padding-right: 0;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+table#leasesetdebug th a:hover, table#leasesetsummary th a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+#leasesetsummary {
+     margin-top: 10px;
+}
+
+#netdboverview th, #netdblookup th  {
+     text-transform: uppercase;
+     font-size: 11pt !important;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background:  url(/themes/console/images/info/globe.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8) 25%) !important;
+     background-size: 18px 18px, 100% 100%, 100% 100% !important;
+     padding: 8px 5px 8px 32px;
+}
+
+#netdblookup input[type="checkbox"] {
+     margin-left: 3px;
+}
+
+#netdbversions th, #netdbtransports th, #netdbcountrylist th {
+     font-size: 10pt !important;
+}
+
+#netdboverview th:last-child, #netdboverview td:last-child {
+     text-align: right;
+}
+
+#netdboverview th:first-child, #netdboverview td:first-child {
+     text-align: left;
+}
+
+#netdboverview table {
+     margin: -1px 0;
+     border: none;
+     border-bottom: 1px solid #7778bf;
+}
+
+#netdboverview table th {
+     text-transform: none;
+     letter-spacing: normal;
+     word-spacing: normal;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     background-size: 100% 100%;
+     padding: 8px 5px;
+     font-size: 9pt;
+}
+
+#netdboverview table td {
+     padding: 3px 5px;
+}
+
+#netdboverview td {
+     padding: 0;
+}
+
+#netdboverview a {
+     display: inline-block;
+     width: 100%;
+}
+
+#netdbversions tr {
+     border-right: 1px solid #447;
+}
+
+#netdbcountrylist tr {
+     border-left: 1px solid #447;
+}
+
+#netdbcountrylist img {
+     margin-right: 5px;
+     text-align: right;
+}
+
+#leasesetsummary td:first-child {
+     width: 50px;
+     white-space: nowrap;
+}
+
+table#leasesetdebug, table.leaseset, table#leasesetsummary {
+     font-size: 9pt;
+}
+
+table#leasesetdebug td, table.leaseset td {
+     padding: 5px !important;
+}
+
+.leaseset, .netdbentry {
+     margin-bottom: 10px;
+}
+
+table.leaseset th {
+     font-weight: normal;
+     padding: 5px;
+     text-align: left;
+     font-size: 10pt;
+}
+
+table.leaseset th:last-child, table.leaseset td:nth-child(2) {
+     text-align: right;
+     padding-right: 5px;
+}
+
+table#leasesetdebug, table#leasesetsummary {
+     margin-bottom: 14px !important;
+}
+
+.leaseset:last-child, .netdbentry:last-child {
+     margin-bottom: 5px;
+}
+
+table#leasesetdebug th, table#leasesetsummary th {
+     font-weight: bold;
+     padding: 8px;
+     text-align: left;
+     font-size: 11pt !important;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+table#leasesetdebug th a {
+     font-size: 9pt;
+     text-transform: capitalize;
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
+table#leasesetdebug th:last-child, table#leasesetsummary th:last-child {
+     text-align:right;
+     white-space: nowrap;
+     font-size: 9pt;
+}
+
+table#leasesetdebug td:nth-child(odd) {
+     width: 200px;
+     white-space: nowrap;
+     text-align: right;
+     border-right: 1px inset #cfd1ff;
+}
+
+table#leasesetdebug td:nth-child(even) {
+     text-align: left;
+     white-space: nowrap;
+}
+
+table#leasesetdebug td:nth-child(2) {
+     width: 10px;
+}
+
+.leaseset tr:nth-child(2) td:last-child a:not(old) {
+     font-size: 0;
+}
+
+.leaseset tr:nth-child(2) td:last-child a::after {
+     content: url(/themes/console/images/buttons/add_address.png);
+     filter: drop-shadow(0 0 1px #999);
+}
+
+.leaseset tr:nth-child(2) td:last-child a:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+div#noleasesets {
+     border: 1px solid #7778bf;
+     padding: 20px;
+     font-weight: bold;
+     background: #fff;
+     margin-top: -6px;
+     margin-bottom: 5px;
+     text-align: center;
+}
+
+div#sybilnav {
+     -moz-columns: 4;
+     -webkit-columns: 4;
+     columns: 4;
+     -moz-column-gap: 10px;
+     -webkit-column-gap: 10px;
+     column-gap: 10px;
+     border-radius: 2px;
+}
+
+div#sybilnav, div#sybils_summary {
+     border: 1px solid #7778bf;
+     padding: 10px;
+     margin-bottom: 10px;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff;
+}
+
+h3.sybils  {
+     margin-bottom: 9px;
+}
+
+#sybilnav ul li:first-child {
+     margin-top: 0;
+}
+
+#sybilnav ul li:last-child {
+     margin-bottom: 0;
+}
+
+#sybilnav li {
+     list-style: none;
+     padding: 5px 3px 5px 24px;
+     border: 1px solid #7778bf;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff;
+     margin: 2px 0;
+     background: #eef url(images/eye.png) 5px center no-repeat;
+     background: url(images/eye.png) 5px center no-repeat, linear-gradient(to right, #fff 70%, #eef);
+     line-height: 88%;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+#sybilnav li a {
+     width: 100%;
+     display: inline-block;
+}
+
+table.sybil_routerinfo {
+     margin-bottom: 10px;
+}
+
+.sybil_routerinfo th {
+     padding: 1px 1px 1px 6px !important;
+}
+
+table.sybil_routerinfo:first-of-type th {
+     padding: 6px !important;
+}
+
+.sybil_routerinfo th:first-child {
+     white-space: nowrap;
+     text-align: left;
+}
+
+.sybil_routerinfo th:nth-last-child(2) {
+     text-align: right !important;
+     padding-right: 0 !important;
+}
+
+.sybil_routerinfo th:last-child {
+     width: 20px;
+}
+
+.sybil_routerinfo td:first-child {
+     width: 50px;
+     white-space: nowrap;
+}
+
+p.sybil_info, p.family, p.threatpoints, p.hashdist, p#sybil_totals, p.notfound {
+     border: 1px solid #7778bf;
+     padding: 5px 5px 5px 30px;
+     margin: 3px 0;
+     font-weight: bold;
+     background: url(images/eye.png) 8px center no-repeat, repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff;
+}
+
+p.family + p.family, p.sybil_info + p.sybil_info {
+     margin-top: -4px;
+}
+
+p.family:nth-child(even), p.sybil_info:nth-child(even) {
+     background: #efefff;
+     background: url(images/eye.png) 8px center no-repeat, repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff;
+}
+
+p.family:nth-child(odd), p.sybil_info:nth-child(odd) {
+     background: #f7f8ff;
+     background: url(images/eye.png) 8px center no-repeat, repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff;
+}
+
+p.sybil_info + a[name] + table.sybil_routerinfo, p.hashdist + a[name] + table.sybil_routerinfo, table.sybil_routerinfo + p {
+     margin-top: 10px !important;
+}
+
+.threatpoints + ul {
+     border: 1px solid #7778bf;
+     padding: 0 10px;
+     display: inline-block;
+     width: calc(100% - 22px);
+     margin: -4px 0 8px;
+     background: #eef;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+.threatpoints + ul li {
+     background: none;
+     margin: 0 0 0 20px;
+}
+
+.threatpoints + ul li:last-child {
+     margin-bottom: 10px;
+}
+
+p:empty { /* empty paragraph nuke */
+     display: none;
+}
+
+/* Advanced lookup */
+
+#netdblookup {
+     margin-bottom: -8px;
+}
+
+#netdblookup td:first-child {
+     text-align: right;
+     width: 100px;
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+#netdblookup td:nth-child(2) {
+     width: 100px;
+}
+
+.subheading {
+     text-align: left !important;
+     background: #fff;
+     padding: 10px;
+     border: 1px solid #7778bf;
+}
+
+.subheading b {
+     font-size: 10pt !important;
+}
+
+.sybil_distance th {
+     text-align: left;
+     padding: 5px;
+}
+
+.sybil_distance th:last-child, .sybil_distance td:last-child {
+     text-align: right;
+}
+
+.sybil_distance tr:nth-child(n+2):hover {
+     background: #ffe;
+     font-weight: bold;
+}
+
+/* end netdb */
+
+ul#banlist {
+     background: #fff;
+     border: 1px solid #7778bf;
+     border-radius: 2px;
+     display: block;
+     padding: 5px 1px;
+     -moz-columns: 2;
+     -moz-column-gap: 0;
+     -webkit-columns: 2;
+     -webkit-column-gap: 0;
+     columns: 2;
+     column-gap: 0;
+}
+
+#banlist li {
+     list-style: none;
+     margin: 5px;
+     border: 1px solid #7778bf;
+     border-radius: 2px;
+     padding: 5px 5px 5px 35px;
+     line-height: 120%;
+     background: #eef url(/themes/console/images/buttons/ban.png) 10px center no-repeat;
+     background: url(/themes/console/images/buttons/ban.png) 10px center no-repeat, repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px) #fff;
+     break-inside: avoid;
+     page-break-inside: avoid;
+     -webkit-break-inside: avoid;
+     min-height: 33px;
+     font-size: 9pt;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+#banlist li:first-child {
+     margin-top: 0;
+}
+
+#banlist a[href^="configpeer?peer"]::after {
+     vertical-align: top;
+}
+
+.main#profiles #banlist li {
+     margin-bottom: 0;
+}
+
+#tunnelconfig th[colspan="3"] {
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+#tunnelconfig font[color="red"] {
+     background: url(images/warn.png) left center no-repeat;
+     padding: 4px 5px 4px 20px;
+}
+
+#tunnelconfig td:nth-child(n+2) {
+     text-align: left;
+}
+
+#tunnelconfigsave {
+     margin-top: -22px;
+}
+
+#profiles th:nth-child(n+3) {
+     text-align: right;
+}
+
+#profiles th:nth-child(7) {
+     text-align: center;
+}
+
+#profilelist td:first-child {
+     width: 1%;
+     text-align: right;
+     white-space: nowrap;
+}
+
+#profilelist td:nth-child(2) {
+     text-align: left;
+}
+
+#profilelist td[colspan="8"] {
+     background: #77f;
+     padding: 0;
+}
+
+#thresholds p {
+     margin-left: 5px;
+     line-height: 140%;
+}
+
+#profile_defs b {
+     text-transform: capitalize;
+}
+
+#profile_defs td:first-child {
+     width: 5% !important;
+     white-space: nowrap;
+     text-align: right;
+}
+
+#profile_defs td:last-child {
+     white-space: normal;
+     line-height: 120%;
+}
+
+#profile_defs td:nth-child(2)::first-letter {
+     text-transform: uppercase;
+}
+
+#thresholds th, #thresholds td {
+     text-align: center !important;
+}
+
+#capabilities_key td {
+     padding: 0 !important;
+}
+
+#capabilities_key table {
+     margin: 0 !important;
+     border: none;
+     border-top: 1px solid #ddf;
+     border-bottom: 1px solid #ddf;
+}
+
+#capabilities_key table td {
+     padding: 3px 5px !important;
+}
+
+#capabilities_key table td:nth-child(even) {
+     width: 16px;
+}
+
+#capabilities_key td:nth-child(2)::first-letter {
+     text-transform: none;
+}
+
+#capabilities_key b {
+     text-transform: none !important;
+}
+
+#profilelist tr:hover td, table#floodfills tr:hover td, #ntcpconnections tr:nth-last-child(n+2):hover td, #udpconnections tr:nth-last-child(n+2):hover td,
+#schedjobs tr:hover td, #jobstats tr:nth-last-child(n+2):hover td, #jardump tr:hover td, #sidebarconf tr:nth-last-child(n+2):hover td, #eventlog tr:hover td,
+#netdboverview table tr:hover td, #debug tr:hover td, #clientconfig tr:hover td, #webappconfig tr:hover td, #portfaq tr:hover td {
+     background: #ffd;
+     color: #111;
+}
+
+/* peers - sort icons */
+
+#udpconnections th {
+     vertical-align: top;
+     padding-top: 3px;
+}
+
+.sortup, .sortdown, .sortupactive, .sortdownactive {
+     padding: 1px 0;
+     border: 1px solid #999;
+     border-radius: 2px;
+     margin: 3px 1px 0 !important;
+     vertical-align: middle;
+     text-align: center;
+     display: inline-block;
+     width: 16px;
+     height: 12px;
+     background-size: 10px auto, 100% 100% !important;
+}
+
+.sortup, .sortdown {
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;
+     opacity: 0.75;
+}
+
+.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
+     margin: 0;
+     padding: 0;
+     opacity: 0;
+     width: 16px;
+     height: 14px;
+     vertical-align: middle;
+     text-align: center;
+}
+
+.sortupactive, .sortdownactive {
+     opacity: 1;
+     box-shadow: inset 1px 1px 1px #ccc;
+}
+
+.sortup {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.sortup:hover {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #f60;
+     opacity: 1;
+}
+
+.sortup a:focus, .sortdown a:focus {
+     background: rgba(255,102,0,0.15);
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff;
+     margin-top: -1px;
+     display: inline-block;
+}
+
+.sortupactive {
+     background: url(images/sort_up.png) center center no-repeat, #fff;
+}
+
+.sortdown {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+}
+
+.sortdown:hover {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #f60;
+     opacity: 1;
+}
+
+.sortdownactive {
+     background: url(images/sort_down.png) center center no-repeat, #fff;
+}
+
+/* end peer sort */
+
+table#schedjobs {
+     margin-top: -11px !important;
 }
 
-div.main {
-     margin: 10px 10px 20px 207px;
-     padding: 0 15px 15px 15px;
-     text-align: left;
-     color: #001;
-     width: auto;
-     min-width: 500px;
-     border: 1px solid #447;
-     -moz-border-radius: 8px;
-     -khtml-border-radius: 8px;
-     border-radius: 8px;
-     -moz-box-shadow: inset 0px 0px 1px 1px #bbf;
-     -khtml-box-shadow: inset 0px 0px 1px 1px #bbf;
-     box-shadow: inset 0px 0px 1px 1px #bbf;
-     background: #f0f0f0;
+#schedjobs th:last-child {
+     text-align: center;
 }
 
-div.main hr, hr {
-     color: #113;
-     background: #113;
-     height: 1px;
-     border: 0px solid #113;
-     margin: 10px 0;
+#schedjobs td:first-child {
+     font-weight: bold;
 }
 
-hr:last-child {
-     margin-top: 20px !important;
+#jobstats th:nth-child(n+2) {
+     text-align: right;
 }
 
-div.main textarea {
-     background: #ffe;
-     color: #001;
-     font: 8pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+#jobstats tr:last-child {
+     font-weight: bold;
 }
 
-div.news {
-     margin: 0px 10px 5px 207px;
-     padding: 7px 20px 7px 20px;
-     border: 1px solid #447;
-     color: #224;
-     border-radius: 8px;
-     -moz-border-radius: 8px;
-     -khtml-border-radius: 8px;
-     text-align: right !important;
-     font-size: 7.5pt;
-     line-height: 140%;
-     -moz-box-shadow: inset 0px 0px 1px 1px #bbf;
-     -khtml-box-shadow: inset 0px 0px 1px 1px #bbf;
-     box-shadow: inset 0px 0px 1px 1px #bbf;
-     background: #f0f0f0 url("/themes/snark/ubergine/images/hat.png") no-repeat scroll right bottom;
-     min-width: 490px;
+#jobstats tr:last-child td {
+     padding: 5px;
 }
 
-div.newscontent {
-     background-color: rgba(242, 242, 248, 0.9);
-     border: 1px solid #ccf;
-     border-radius: 10px;
-     box-shadow: inset 0px 0px 4px 4px #e8e8ff;
-     margin: 8px 8px 28px 8px;
-     opacity: 0.95;
-     padding: 24px 18px 10px 14px;
+.main#jardump {
+     overflow-x: auto;
+     min-width: 576px;
 }
 
-div.newscontent p {
+table#jardump {
+     margin: 15px 0 0;
+     font-size: 8pt;
+}
+
+#advconf {
+     margin-bottom: 12px;
+}
+
+#peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn {
      font-size: 9pt;
-     text-align: justify !important;
-     line-height: 120%;
-     margin-top: -2px;
-     padding: 0 15px;
 }
 
-div.newscontent hr {
-     color: #225;
-     background: #225;
-     height: 1px;
-     border: 0px dotted #225;
-     margin: 10px 0 5px;
-     opacity: 0.6;
+#peerdefs td:first-child {
+     text-align: right;
+     width: 50px;
+     white-space: nowrap;
 }
 
-div.newscontent li {
-     text-align: justify;
-     list-style: none;
-     margin: 5px 0 16px 0 !important;
-     vertical-align: bottom;
-     border: 1px solid #113;
-     border-left: 5px solid #113;
-     padding: 5px 5px;
-     border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-     -khtml-border-radius: 0 4px 4px 0;
-     font-size: 10pt;
-     opacity: 1;
-     background: #ffe url('images/header.png') center center repeat-x;
-     -moz-box-shadow: 0 1px 1px 1px rgba(176, 176, 216, 0.4);
-     -moz-box-shadow: 0 1px 1px 1px rgba(176, 176, 216, 0.4);
-     font-weight: bold;
-     text-transform: capitalize;
+.sybil_routerinfo th img {
+     width: 24px;
+     height: 24px;
+     margin: -1px;
+     border-left: 1px solid #7778bf;
 }
 
-div.newscontent li:first-child {
-     margin-top: 10px !important;
+.main#tunnels th, .main#peers th, #ntcpconnections td, #udpconnections td {
+     text-align: center;
 }
 
-div.news h3 {
-     background: none !important;
-     text-align: left;
-     border: none !important;
-     padding-left: 0;
-     padding-top: 0px;
-     border-bottom: 1px dotted #225 !important;
-     -moz-box-shadow: none;
-     -khtml-box-shadow: none;
-     box-shadow: none;
-     font-size: 10pt !important;
-     letter-spacing: 0.05em;
-     text-transform: capitalize !important;
-     text-shadow: 0px 0px 0px #77f;
+h3#ntcpcon, h3#udpcon {
+     border-width: 1px;
+     margin-bottom: -2px;
+     border-radius: 0;
+     filter: none;
+     text-transform: capitalize;
+     letter-spacing: 0;
 }
 
-div.newscontent h4 {
-     border-bottom: 0px;
-     padding: 0;
-     margin: 14px 15px 7px 15px;
-     font-size: 10pt;
-     text-align: left;
+.backlogged {
+     font-size: 14pt;
+     line-height: 0;
 }
 
-div.newscontent h5 {
-     border-bottom: 0px;
-     padding: 0;
-     margin: 12px 15px 6px 15px;
-     font-size: 9.5pt;
-     text-align: left;
+#ntcpconnections td:first-child, #udpconnections td:first-child {
+     width: 1%;
+     white-space: nowrap;
+     text-align: right;
+     padding-left: 3px !important;
 }
 
-div.newscontent h6 {
-     border-bottom: 0px;
-     padding: 0;
-     margin: 12px 15px 6px 15px;
-     font-size: 9pt;
+#ntcpconnections tr:last-child td:first-child, #udpconnections tr:last-child td:first-child {
      text-align: left;
+     padding-left: 10px !important;
 }
 
-div.confignav {
-     padding: 16px 10px !important;
-     margin: 10px 0 0 -10px;
-     font-size: 9.5pt !important;
-     font-weight: bold !important;
-     line-height: 160% !important;
-     opacity: 1;
-     min-width: 400px;
+#profilelist td:last-child {
+     text-align: right;
+     padding-right: 5px;
 }
 
-span.tab {
-     padding: 2px 18px 4px 6px;
-     margin: -5px -7px 0 0;
-     background: #d8d8ff;
-     -moz-border-radius: 6px 32px 2px 0;
-     -khtml-border-radius: 6px 32px 2px 0;
-     border-radius: 6px 32px 2px 0;
-     border: 1px outset #00f;
-     border-width: 2px 1px 1px 2px;
-     border-bottom-style: dashed;
-     min-width: 40px;
-     display: inline-block;
-     word-wrap: break-word;
-     vertical-align: bottom;
+table#floodfills th {
+     text-align: center !important;
+     border-right: 1px solid #7778bf;
 }
 
-span.tab2 {
-     color: #008;
-     padding: 7px 18px 6px 6px;
-     margin: -11px -3px 0 0;
-     background: #e8e8ff;
-     -moz-border-radius: 6px 32px 2px 0;
-     -khtml-border-radius: 6px 32px 2px 0;
-     border-radius: 6px 32px 2px 0;
-     border: outset #00f;
-     border-width: 3px 1px 0 4px;
-     border-bottom-style: none;
-     min-width: 40px;
-     display: inline-block;
-     word-wrap: break-word;
-     vertical-align: bottom;
+#floodfills td:first-child {
+     text-align: right;
+     padding-left: 3px;
+     padding-right: 3px;
 }
 
-div.configure {
-     min-width: 400px;
-     margin-bottom: 0px;
+#floodfills td:first-child img {
+     margin-right: 2px;
 }
 
-div.configure h3, div.graphspanel h3 {
-     border: 1px solid #115;
-     border-left: 5px solid #115;
-     padding: 5px;
-     margin: 15px 0 15px 0;
-     border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-     -khtml-border-radius: 0 4px 4px 0;
-     background: #ffe;
-     text-align: left;
+#i2pupdates input[type="text"]:not([readonly]), #i2pupdates textarea, .main[id^="config_"] textarea, input[name="newsURL"] {
+     width: calc(100% - 5px);
 }
 
-.sidebarconf button {
-     margin: 2px;
-     padding: 1px;
-     min-width: 0;
-     background: none;
+#i2pupdates select {
+     min-width: 220px;
 }
 
-.sidebarconf th:nth-child(1) {
-     text-align: center;     
+#i2pupdates td:first-child {
+     width: 15%;
+     white-space: nowrap;
 }
 
-.sidebarconf th:nth-child(2) {
-     text-align: left;     
+#loggingoptions input[type="text"], #loggingoptions select:not([name="newlogclass"]):not([name="newloglevel"]) {
+     width: calc(100% - 10px);
 }
 
-.sidebarconf td:first-child {
-     width: 60px;
-     text-align: right;
-     padding-right: 50px;
+#loggingoptions td:last-child:not(.optionsave) {
+     text-align: left;
 }
 
-.sidebarconf td {
-     font-weight: bold;
-     font-size: 9pt;  
+#loggingoptions p {
+     text-align: left;
+     margin: 0 5px 2px 5px;
 }
 
-.sidebarconf td:nth-child(3), .sidebarconf td:nth-child(4) {
-     width: 70px;
-     padding: 0;  
+.main#proof textarea, .main#proof textarea:focus {
+     background: none;
+     border: none;
+     box-shadow: none;
+     color: #001 !important;
+     filter: none;
+     outline: none;
+     line-height: 140%;
 }
 
-.sidebarconf td:nth-child(3) {
-     text-align: right;
-     padding-left: 50px;
+.main#jardump {
+     padding: 0;
 }
 
-.sidebarconf td:nth-child(4) {
-     text-align: left;
-     padding-right: 50px;
+.main#jardump table {
+     margin: -1px 0 0;
+     border: none;
 }
 
-div.graphspanel {
-     text-align: center !important;
-     margin: 15px 0px -15px;
+#jardump tt {
+     letter-spacing: -0.03em;
 }
 
-div.graphspanel img {
-     border: 1px solid #447;
-     padding: 2px;
-     margin: 6px;
-     text-align: center !important;
-     background: #001;
-     -moz-box-shadow: inset 0px 0px 1px 1px #99f;
+#jardump a tt {
+     color: #359;
 }
 
-div.graphspanel img:hover {
-     -moz-box-shadow: inset 0px 0px 2px 1px #f60;
+#jardump a:visited tt {
+    color: #218;
 }
 
-div.graphspanel form {
-     text-align: left;
+#jardump a:hover tt {
+     color: #f60;
 }
 
-div.messages {
-     padding: 10px;
-     margin: 10px 0 15px 0;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #447;
-     background: #fff url('images/magic.png');
-     font-weight: bold;
-     -moz-box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     -khtml-box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
+#jardump a:active tt {
+     color: #f90;
 }
 
-div.error {
-     color: #d00000;
+#volunteer, #sidebarhelp, #configurationhelp, #reachabilityhelp, #advancedsettings, #legal, #changelog, #faq {
+     border: 1px solid #7778bf;
+     border-radius: 2px;
+     margin-bottom: 10px;
+     padding: 0 10px 5px;
+     background: #fff;
 }
 
-div.notice {
-     font-style: italic;
+#volunteer {
+     margin-top: 15px;
 }
 
-div.messages li {
-     text-align: justify !important;
-     font-weight: bold;
-     list-style: url(images/warning.png) !important;
-     margin: 0 10px 0 35px !important;
-     padding: 5px 10px !important;
-     border: 0px !important;
+#changelog {
+     margin-bottom: 5px !important;
+     padding: 0 0 0 10px;
 }
 
-table {
-     border-collapse: collapse;
+#changelog pre {
+     margin: -10px 0 0;
+     padding-top: 8px;
      width: 100%;
-     border: 1px solid #447;
-     margin: 1px -15px 5px 0px;
-     font-size: 7pt;
-     background: #b4c8ff url('images/tabletitlelight.png') repeat-x;
-     font: 7pt/130% "Lucida Sans Unicode", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     height: 600px;
+     white-space: pre-wrap;
 }
 
-table hr {
-     padding: 0px 0;
-     color: #99f;
-     background: #99f;
-     border: 0px solid #99f;
-     margin: 0px 0px;
-     height: 1px;
-     display: none;
+.main#help h2 {
+     margin: -1px -11px 10px !important;
+     border-radius: 2px 2px 0 0;
+     text-transform: uppercase;
+     filter: none;
 }
 
-th {
-     padding: 6px 2px;
-     color: #000;
-     background: #ffe url('images/header.png') center center repeat-x;
-     text-align: center;
-     font-size: 9pt;
-     line-height: 110%;
-     border-bottom: 1px solid #447 !important;
-     border-top: 1px solid #447 !important;
+.main#help h3 {
+     margin-bottom: -3px;
 }
 
-tr {
-     vertical-align: middle !important;
+.main#help #changelog h2 {
+    margin-right: -1px !important;
 }
 
-tr:nth-child(even) {
-     background: #f7f7ff url(images/magic.png);
+.main#help div, .logtable tr:nth-child(n+2) td, .main#console {
+     background: linear-gradient(to bottom, #fff, rgba(250,250,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fff !important;
+     margin-bottom: 13px;
+     box-shadow: inset 0 0 0 1px #fff;
 }
 
-tr:nth-child(odd) {
-     background: #fff url(images/magic.png);
+.main#help div.confignav {
+     background: #fff !important;
 }
 
-td {
-     padding: 5px 3px;
-     color: #000;
-     vertical-align: middle;
-     border-top: 1px inset #447;
-     border-bottom: 1px outset #99f;
+.main#console {
+     box-shadow: inset 0 0 0 1px #bbf;
 }
 
-/* begin home page */
+.main#help #volunteer, #wrapperlogs pre {
+     background: linear-gradient(to bottom, #fff, rgba(250,250,255,0.3)), url(/themes/snark/ubergine/images/hat.png) no-repeat right -3px bottom -3px / auto 80%, repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important;
+     box-shadow: inset 0 0 0 1px #fff;
+}
 
-/*
-#appsummary {
-     clear: none;
-     float: none;
-     left: 10px;
-     margin: 0;
-     position: absolute;
-     top: 10px;
+.main#help p {
+     padding-left: 10px;
+     padding-right: 10px;
 }
 
-#homemain {
-     left: 217px;
-     margin: 0 10px 10px 0;
-     position: absolute;
-     top: 10px;
+.main#help p.infohelp {
+     padding-left: 50px;
 }
 
-#homenews {
-     margin: 0 10px 5px 0;
+.main#help td.infohelp, .main#help td.infowarn, .main#help td.infohelp:hover, .main#help td.infowarn:hover {
+     background-size: 24px 24px !important;
+     padding-left: 46px !important;
+     color: #333 !important;
 }
 
-h2.app {
-     border-radius: 8px;
-     margin: 1px 10px 15px 0 !important;
+#sidebarhelp ul {
+    display: inline-block;
+    margin-bottom: 0 !important;
 }
-*/
 
-h4.app, h4.app2 {
-     margin: 0 10px 2px 10px;
-     padding: 10px 0 8px 0;
+#sidebarhelp p + ul {
+     margin-top: -15px !important;
 }
 
-h4.app2 {
-     clear: left;
-     margin-top: 5px !important;
+/* mini faq */
+
+#faq h3 {
+     padding: 5px 10px 6px 35px;
+     background: url(/themes/console/images/info/question.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8) 25%) !important;
+     background-size: 18px 18px, 100% 100%, 100% 100% !important;
+     background-blend-mode: luminosity, normal, normal;
+     text-transform: none;
+     letter-spacing: 0;
+     word-spacing: 0;
+     font-size: 10.5pt;
 }
 
-div.ag2 {
-     margin: 0;
+#faq ul li {
+     margin-top: 0;
 }
 
-div.app {
-     float: left;
-     padding: 2px;
-     height: 84px;
-     width: 112px;
-     text-align: center !important;
+#faq code, #advancedsettings code {
+     user-select: all;
+     -moz-user-select: all;
+     -webkit-user-select: all;
 }
 
-div.appgroup {
-     margin: 0;
-     padding: 16px 8px;
-     width: auto;
+#portfaq {
+     margin-top: 18px;
 }
 
-div.search {
-     margin: 10px 10px 0 0;
-     padding: 8px 8px 0 8px;
-     width: auto;
+#portfaq th:first-child, #portfaq td:first-child {
+     font-weight: bold;
+     text-align: right;
+     padding-top: 6px;
+     padding-bottom: 6px;
+     padding-left: 10px;
 }
 
-table.search {
-     background: none;
-     padding: 8px;
-     width: auto;
-     margin-left:auto;
-     margin-right:auto;
+#portfaq .infohelp {
+     padding-top: 15px !important;
+     padding-bottom: 15px !important;
 }
 
-img.app {
-     height: 32px;
-     width: 32px;
-     padding: 6px;
+#portfaq th[colspan="3"] {
+     text-align: left;
+     font-size: 10.5pt !important;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
 }
 
-img.app2p {
-     height: 40px;
-     padding: 3px 6px 0 6px;
+#portfaq td:nth-child(2) {
+     white-space: nowrap;
 }
 
-table.app {
-     background: none;
-     border: 0;
-     margin: auto;
-     width: auto;
+#portfaq td:last-child, #portfaq td[colspan="3"] {
+     text-align: justify;
+     padding-right: 10px;
 }
 
-tr.app {
-     background: none;
-     border: 0;
-     margin: 0;
+#portfaq td[colspan="3"] {
+     font-weight: normal;
 }
 
-td.app {
-     background: none;
-     border: 0;
-     margin: 0;
+/* end mini faq */
+
+#wrapperlogs pre {
+     background-size: 100% 100%, auto 50%, 100% 100% !important;
 }
 
-div.applabel {
-     background: url('images/header.png') center center repeat-x;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border: 2px #00f;
-     border-radius: 4px;
-     border-width: 1px;
-     font-size: 9pt;
+#fullhistory {
+     text-align: right;
+     margin: 0 0 0 -10px;
+     padding: 5px 8px;
+     border-top: 1px solid #7778bf;
+     background: linear-gradient(to right, #efefff 65%, #fff)
+}
+
+.main#torrents {
+     padding: 0;
+}
+
+#i2psnarkframe {
      margin: 0;
-     padding: 3px 6px 4px 6px;
-     text-align: center;
 }
 
-/* end home page */
+.main#proof {
+     background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)), url(/themes/snark/ubergine/images/hat.png) no-repeat right -3px bottom -3px, url(images/noise.png), #fff !important;
+     background-size: 100% 100%, auto 80%, 50px 50px !important;
+}
 
-tt {
-     font: bold 8pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     color: #008000;
-     padding: 1px 5px;
+.homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child {
+     text-align: center;
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, url(images/header.png) center center repeat-x #eef;
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(238, 238, 255, 0.2) 50%, #eef 100%) #fff !important;
+     font-size: 0 !important;
+     width: 5%;
 }
 
-div.main li {
-     text-align: left;
-     list-style: square;
-     margin: 2px 20px 0px 40px;
-     padding: 1px 10px 1px 10px;
-     line-height: 150%;
-     word-wrap: break-word;
+.homelinkedit tr:last-child td:first-child {
+     text-align: right;
 }
 
-div.main li b {
-     color: #514 !important;
-     color: #003 !important;
-     letter-spacing: 0.01em;
-     font-size: 9.5pt;
-     line-height: 170%;
+.homelinkedit input[type="text"], #sidebarconf select {
+     margin-left: 0;
 }
 
-div.main li:first-child {
-     margin-top: 10px !important;
+.homelinkedit img {
+     width: auto;
+     height: 20px;
 }
-.tidylist {
-     text-align: justify !important;
+
+.main#config_homepage input.delete {
+     float: left;
 }
 
-.tidylist li:first-child {
-     margin-top: -10px !important;
+#webappconfig td:first-child::after {
+     content: "";
+     display: inline-block;
+     min-height: 32px;
+     vertical-align: middle;
 }
 
-.tidylist:last-child {
-     padding-bottom: 5px;
+#clientconfig th:first-child, #webappconfig th:first-child, #pluginconfig th:first-child,
+#clientconfig td:first-child, #webappconfig td:first-child, #pluginconfig td:first-child {
+     text-align: right !important;
 }
 
-.tidylist code {
-     text-align: left;
-     font: 9pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     color: #910;
-     padding: 2px 3px;
-     font-weight: bold;
+#clientconfig th:nth-child(2), #clientconfig th:nth-child(3),
+#webappconfig th:nth-child(2), #webappconfig th:nth-child(3),
+#pluginconfig th:nth-child(2), #pluginconfig th:nth-child(3) {
+     text-align: center !important;
 }
 
-ol {
+#clientconfig td:nth-child(3), #webappconfig td:nth-child(3), #pluginconfig td:nth-child(3) {
+     white-space: nowrap;
+}
 
-     margin: 1px 0 0 5px;
-     padding: 1px 0 0 20px;
+#pluginconfig table {
+     margin: 5px 0 5px 0 !important;
+     width: calc(100% - 5px);
 }
 
-ul {
-     display: inline;
-     margin: 0;
-     padding: 0;
+#pluginconfig td:first-child {
+     width: 80px;
+     white-space: nowrap;
 }
 
-code {
-     text-align: left;
-     font: 9pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     color: #390;
-     font-weight: bold;
+#pluginconfig td:nth-child(2) {
+     border-right: 1px inset rgba(119, 120, 191, 0.1);
 }
 
-a:link {
-     color: #359;
-     text-decoration: none;
-     font-weight: bold;
-     word-wrap: break-word;
+#pluginconfig td:last-child {
+     padding-right: 3px;
 }
 
-a:visited {
-     color: #218;
-     text-decoration: none;
-     font-weight: bold;
+table#plugininstall td:first-child {
+     white-space: nowrap !important;
 }
 
-a:hover {
-     color: #f60;
-     text-decoration: underline;
-     font-weight: bold;
+h4#updateplugins {
+     background: #eef url(images/header.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, rgba(238, 238, 255, 0.2) 50%, #eef 100%) #fff !important;
+     border: 1px solid #7778bf;
+     padding: 5px;
+     font-size: 10pt;
+     margin: -15px 0 14px;
+     text-transform: none;
+     letter-spacing: normal;
+     color: #31334f;
 }
 
-a:active {
-     color: #f93;
-     text-decoration: underline;
-     font-weight: bold;
+.formaction#pluginupdater, table#permabanned, table#i2pupdates {
+     margin-bottom: 10px;
 }
 
-.links li {
-     list-style: url(images/link.png) !important;
-     text-align: justify;
-     line-height: 120% !important;
+.formaction#pluginupdater form {
+     padding: 0;
+     margin: 0;
 }
 
-.links li:first-child {
-     padding-top: 0 !important;
+#pluginconfigactions {
+     margin-top: -6px;
 }
 
-.links ul {
-     margin-top: -5px !important;
+h3#displayevents {
+     border-width: 1px;
+     filter: none;
+     border-radius: 0;
+     margin-top: 0;
 }
 
-p {
-     text-align: justify;
-     line-height: 160%;
+form[action="events"] {
+     border: 1px solid #7778bf;
+     padding: 10px 10px 10px 50px;
+     margin: -16px 0 -2px 0;
+     background: url(/themes/console/images/info/logs.png) 12px center no-repeat;
+     background-size: 28px 28px;
 }
 
-h1 {
-     text-align: left;
-     color: #115;
-     padding: 10px 15px;
-     margin: 0 10px 10px 207px;
-     font: normal bold 16pt/120% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     letter-spacing: 0.08em;
-     text-transform: uppercase;
-     -moz-box-shadow: inset 0px 0px 1px 1px #bbf;
-     -khtml-box-shadow: inset 0px 0px 1px 1px #bbf;
-     box-shadow: inset 0px 0px 1px 1px #bbf;
-     white-space: normal;
-     background: #f0f0f0;
-     border: 1px solid #447;
-     border-radius: 8px;
-     -moz-border-radius: 8px;
-     -khtml-border-radius: 8px;
-     min-width: 500px;
+#newfamily {
+     margin-top: -6px;
+     margin-bottom: 10px;
 }
 
-span.newtab {
-     text-align: right;
-     font-size: 8pt;
-     float: right;
-     letter-spacing: 0;
+a[href^="configpeer?peer"] {
+     font-size: 0;
+     filter: drop-shadow(0 0 1px #777);
 }
 
-/* opera targetted hack */
-x:-o-prefocus, span.newtab {
-     margin-top: -25px;
+a[href^="configpeer?peer"]::after {
+     content: url(/themes/console/images/buttons/edit.png);
+     vertical-align: bottom;
 }
 
-h2 {
-     font-size: 13pt;
-     color: #115;
-     letter-spacing: 0.07em;
-     background: url('images/header.png') center center repeat-x;
-     padding: 10px;
-     border: 1px solid #115;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     margin: 15px 0px 15px 0 !important;
-     -moz-box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     -khtml-box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     word-wrap: break-word;
-     opacity: 1;
+a[href^="configpeer?peer"]:hover {
+     filter: drop-shadow(0 0 1px #f60);
 }
 
-h2 a, h3 a {
-    text-transform: capitalize;
-    letter-spacing: 0.03em;
+.widescroll {
+     overflow: auto;
 }
 
-h2 a:hover, h3 a:hover {
-     text-shadow: none;
+#webappconfigactions, #externali2cp  {
+     margin-bottom: 5px !important;
 }
 
-.routersummary h3 a{
-    text-transform: uppercase;
+#pluginupdater {
+     margin-bottom: 10px !important;
 }
 
-h2 a:hover {
-     text-shadow: 0px 0px 1px rgba(255, 255, 72, 0.9);
-     border-bottom: 1px #ff6600;
-     padding-bottom: 5px;
+/* responsive layout */
+
+@media screen and (max-width: 900px) {
+.homelinkedit input[name="nofilter_url"] {
+     width: 240px !important;
 }
 
-h2 img {
-     opacity: 0.9 !important;
+#newfamily tr:last-child td:first-child, #joinfamily tr:last-child td:first-child, #leavefamily tr:last-child td:first-child {
+     background-size: 22px 22px, 100% 100% !important;
+     background-position: center left 6px !important;
+     padding-left: 34px !important;
 }
 
-h3 {
-     border: 1px solid #115;
-     border-left: 5px solid #115;
-     padding: 5px 5px 5px 8px;
-     margin: 12px 0 15px 0;
-     border-radius: 0 4px 4px 0;
-     -moz-border-radius: 0 4px 4px 0;
-     -khtml-border-radius: 0 4px 4px 0;
-     background: url('images/header.png') center center repeat-x !important;
-     font-size: 11pt;
-     color: #115;
-     -moz-box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     -khtml-box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     opacity: 1;
-     letter-spacing: 0.07em;
+#joinfamily input[type="file"] {
+     width: 220px;
 }
 
-h4 {
-     border-bottom: 1px;
-     border-bottom-style: solid;
-     border-bottom-color: #447;
-     padding: 0 0 10px 0;
-     margin: 5px 0 10px 0;
-     font-size: 11pt;
+h3#ntcpcon, h3#udpcon {
+     font-size: 10pt;
+     letter-spacing: 0;
 }
 
-button, button:visited {
-     font: bold 9pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     border: 1px outset #66a;
-     padding: 1px 3px;
-     background: #ffe;
-     text-decoration: none;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     font-size: 8pt;
-     font-weight: bold;
-     margin: 2px;
-     text-align: center;
-     min-width: 60px;
-     -moz-box-shadow: inset 0px 0px 2px 1px #fff;
-     -khtml-box-shadow: inset 0px 2px 8px 0px #fff;
-     box-shadow: inset 0px 2px 8px 0px #fff;
-     color: #316;
+#ntcpconnections th:last-child:not(old) {
+     font-size: 0;
 }
 
-button.accept {
-     background: #ffe url('../images/accept.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#ntcpconnections th:last-child::before {
+     content: url(/themes/console/images/info/backlogged.png) !important;
 }
 
-button.add {
-     background: #ffe url('../images/add.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main#config_family input.download {
+     max-width: 230px;
+     overflow: hidden;
+     text-overflow: ellipsis;
 }
 
-button.cancel {
-     background: #ffe url('../images/cancel.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+input[name="family"] {
+     min-width: 120px;
+     width: 120px;
 }
 
-button.check {
-     background: #ffe url('../images/tick.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+input[name="speed"], input[name="capacity"] {
+     min-width: 60px;
+     width: 60px;
 }
 
-button.delete {
-     background: #ffe url('../images/delete.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+select[name="newlogclass"] {
+     width: 200px;
+     text-overflow: ellipsis;
 }
 
-button.download {
-     background: #ffe url('../images/arrow_down.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+input[name="pluginFile"], #manualreseed input[name="url"] {
+     min-width: 220px;
+     width: 220px;
 }
 
-button.go {
-     background: #ffe url('../images/arrow_right.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main#profiles, .main#peers, .main#tunnels {
+     overflow: auto;
+}
 }
 
-button.reload {
-     background: #ffe url('../images/arrow_refresh.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+@media screen and (max-width: 1000px) {
+#consolepass input[name="name"], #consolepass input[name="nofilter_pw"],
+#externali2cp input[name="user"],  #externali2cp input[name="nofilter_pw"],
+#newfamily input[type="text"] {
+     max-width: 140px !important;
 }
 
-button.search {
-     background: #ffe url('../images/magnifier.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#config_reseed input[type="text"], #config_reseed input[type="password"] {
+     max-width: 200px;
 }
 
-button.stop {
-     background: #ffe url('../images/stop.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+input[name="pluginURL"] {
+     max-width: 260px !important;
 }
 
-button:hover {
-     border: 1px solid #f60;
-     background-color: #f60 !important;
-     color: #fff;
-     -moz-box-shadow: inset 0px 0px 0px 1px #fff;
-     -khtml-box-shadow: inset 0px 0px 0px 1px #fff;
-     box-shadow: inset 0px 0px 0px 1px #fff;
+#i2pupdates td:first-child, #clientconfig td:nth-child(3), #webappconfig td:nth-child(3), #pluginconfig td:nth-child(3) {
+     white-space: normal;
 }
 
-button:active {
-     border: 1px solid #f60;
-     background: #202 !important;
-     color: #f60;
-     -moz-box-shadow: inset 0px 0px 0px 1px #f60;
-     box-shadow: inset 0px 0px 0px 1px #f60;
-     -khtml-box-shadow: inset 0px 0px 0px 1px #f60;
+#i2pupdates td:first-child {
+     width: 25%;
+     line-height: 120%;
 }
 
-.underline {
-     border-bottom: 1px solid #000022;
-     padding: 5px 0px 5px 0px;
-     margin: 0px 0px 10px 0px;
+.main#config_clients th, #bannedips th {
+     font-size: 9pt !important;
+     padding-left: 2px !important;
+     padding-right: 2px !important;
 }
 
-.langbox {
-     margin: 3px 10px 4px 5px;
-     padding: 2px 5px;
-     color: #001;
-     font-size: 7pt;
-     width: 350px;
-     text-align: right;
-     float: right;
-     vertical-align: middle;
-     opacity: 1 !important;
+.main#config_clients td:last-child {
+     word-break: break-all;
 }
 
-.langbox img {
-     opacity: 0.8 !important;
+.main#tunnels {
+     padding: 0 5px;
+     min-width: 566px;
 }
 
-.langbox img:hover {
-     opacity: 1 !important;
+.main#tunnels h3 {
+     margin-top: 5px;
 }
 
-input, input:visited {
-     border: 1px outset #999;
-     background: #ffe;
-     color: #316;
-     margin: 5px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     padding: 1px 3px;
-     text-decoration: none;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     -moz-box-shadow: inset 0px 2px 8px 0px #fff;
-     color: #813;
-     opacity: 1;
+#netdbversions th, #netdbtransports th, #netdbcountrylist th, table.leaseset th {
+     font-size: 9pt !important;
 }
 
-input.accept {
-     background: #ffe url('../images/accept.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.welcome h2 {
+     font-size: 11pt;
+     padding-left: 8px;
 }
 
-input.add {
-     background: #ffe url('../images/add.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main#proof {
+     padding: 0;
+     min-width: 576px;
 }
 
-input.cancel {
-     background: #ffe url('../images/cancel.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main#proof textarea {
+     margin: -5px 10px !important;
+     word-break: break-all;
+     white-space: pre-wrap;
 }
 
-input.check {
-     background: #ffe url('../images/tick.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.cells {
+     padding: 3px 2px !important;
+}
 }
 
-input.delete {
-     background: #ffe url('../images/delete.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+@media screen and (max-width: 1200px) {
+#portfaq td:nth-child(2) {
+     white-space: normal;
 }
 
-input.download {
-     background: #ffe url('../images/arrow_down.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main#help h3, #faq h3, table#leasesetdebug th, table#leasesetsummary th {
+     font-size: 10pt !important;
+}
 }
 
-input.go {
-     background: #ffe url('../images/arrow_right.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+@media screen and (max-width: 1500px) {
+
+#sb_general td:first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,
+#sb_peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {
+   min-height: 12px;
 }
 
-input.reload {
-     background: #ffe url('../images/arrow_refresh.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#sb_internals a, #sb_advanced a {
+     max-width: 188px;
 }
 
-input.search[type="text"] {
-     background: #ffe url('../images/magnifier.png') no-repeat 2px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+.tunnels_client th:first-child:not(old) {
+     font-size: 0;
 }
 
-input.stop {
-     background: #ffe url('../images/stop.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.tunnels_client th:first-child::after {
+     content: "\21F5";
+     content: "\21E9\21E7";
+     font-size: 12pt;
+     line-height: 0;
+     vertical-align: middle;
+     letter-spacing: -0.25em;
 }
 
-input:hover {
-     background-color: #f60;
-     color: #fff;
-     border: 1px solid #f60;
-     opacity: 1.0;
-     -moz-box-shadow: inset 0px 0px 0px 1px #fff;
+.main#help h3, #faq h3 {
+     font-size: 10.5pt !important;
+}
+}
 
+@media screen and (min-width: 1500px) {
+body, .main, .main td, .news p, #news p, .tab, .tab2, .main li b, div.joblog li, .themelabel, .ui_lang, .applabel a, #changelog pre, .routersummary button.download,
+#peerdefs, #profile_defs, #thresholds, #configinfo, .infohelp, .infowarn, button, input, select, textarea, #configinfo th, tt, code, th, .statusnotes {
+     font-size: 10pt !important;
 }
 
-input:active {
-     background: #002;
-     color: #f60;
-     border: 1px solid #f60;
-     opacity: 1.0;
-     -moz-box-shadow: inset 0px 0px 0px 1px #f60;
-     -khtml-box-shadow: inset 0px 0px 0px 1px #f60;
-     box-shadow: inset 0px 0px 0px 1px #f60;
+.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, div.newss, pre, #jardump tt, #jardump td, div.news, #logs li {
+     font-size: 9pt !important;
 }
 
-input[type=text], input[type=password] {
-     background: #ffe;
-     color: #001;
-     margin: 5px 10px 5px 10px;
-     padding: 4px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     border: 1px solid #447;
-     text-decoration: none;
+.main[id^="config_"] th, h4#updateplugins {
+     font-size: 10.5pt !important;
 }
 
-submit {
-     background: #f00;
-     color: #ffe;
-     margin: 10px 2px 10px 0;
-     padding: 2px;
-     font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     font-weight: bold;
-     border: 1px solid #447;
-     text-decoration: none;
+.homelinkedit th:first-child, #sidebarconf th:first-child, #consolepass th:first-child {
+     font-size: 0 !important;
 }
 
-input checkbox {
-     border: 0 !important;
+.main, .news, h1 {
+     margin-left: 232px !important;
 }
 
-select {
-     background: #ffe;
-     color: #003;
-     margin: 5px 10px 5px 10px;
-     padding: 4px;
-     border: 1px solid #447;
-     min-width: 80px;
-     font: 9pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     text-align: left !important;
+.routersummary {
+     width: 207px !important;
 }
 
-select:active {
-     -moz-box-shadow: inset 0px 0px 0px 1px #f60;
-     -khtml-box-shadow: inset 0px 0px 0px 1px #f60;
-     box-shadow: inset 0px 0px 0px 1px #f60;
+.routersummary div[style="height: 36px;"] {
+     height: 40px !important;
+     margin-top: 4px;
 }
 
-textarea {
-     padding: 5px;
-     margin: 5px 15px 5px 10px;
-     background: #ffe;
-     color: #003;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     font: 8pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     min-height: 100px;
-     min-width: 97%;
-     border: 1px solid #447;
+.routersummary table[id^="sb_"] {
+     width: 216px !important;
 }
 
-textarea:active {
-     -moz-box-shadow: inset 0px 0px 0px 1px #f60;
-     -khtml-box-shadow: inset 0px 0px 0px 1px #f60;
-     box-shadow: inset 0px 0px 0px 1px #f60;
+.routersummary h3::after {
+     content: "";
+     display: inline-block;
+     min-height: 18px;
+     vertical-align: middle
+     box-sizing: border-box;
 }
 
-.proxyfooter {
-     margin: 0 20px 10px 240px;
-     padding: 20px 25px 20px 75px;
-     color: #f00;
-     font-size: 7pt;
-     text-align: right !important;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border: 1px solid #447;
-     display: none;
+div.app {
+     width: 160px;
 }
 
-.statusnotes {
-     font-style: normal;
-     font-size: 8pt;
-     color: #225 !important;
-     text-align: center;
-     border: 1px solid #447 !important;
-     border-top: 0 !important;
-     margin: -5px 0 5px 0;
-     padding: 7px;
-     background: url("images/header.png") repeat scroll center center #eef;
-     letter-spacing: 0em !important;
+.applabel {
+     width: 148px !important;
 }
 
-div.joblog {
-     overflow: auto;
-     border: 0;
-     margin-top: 5px;
- }
+.footnote {
+     font-size: 8pt !important;
+}
 
-div.joblog i {
-     color: #050;
-     font-weight: bold;
+h3#pconfig, h3#webappconfig, h3#i2pclientconfig, h3#pluginmanage, p#clientconf.infohelp, #config_stats h3 {
+     margin-bottom: -15px;
 }
 
-div.joblog ul {
-     word-wrap: break-word !important;
-     text-align: justify;
-     line-height: 100% !important;
-     margin-top: -5px !important;
+.sorry {
+     margin-left: 232px !important;
 }
 
-div.joblog li {
-     word-wrap: break-word !important;
-     line-height: 115% !important;
-     padding: 0;
-     font-size: 9pt !important;
+.routersummary .reload, .routersummary .stop {
+     min-width: 96px;
+     margin: 0 3px -5px;
 }
 
-div.joblog li:last-child {
-     margin-bottom: -5px;
+.subheading b {
+     font-size: 10.5pt !important;
 }
 
-div.joblog li:first-child {
-     margin-top: 10px !important;
+h3#restartrouter, p#tunnelconfig {
+     margin-bottom: -15px !important;
 }
 
-div.joblog form:first-child {
-     margin-top: 10px;
+h1 {
+     padding: 21px 15px 17px;
+     font-size: 19pt;
 }
 
-div.joblog table {
-     margin-top: 15px;
+.routersummary h3 a  {
+     font-size: 11pt !important;
 }
 
-div.joblog p {
-     line-height: 130%;
+div.routersummary img[src$="i2plogo.png"] {
+     margin-left: 0 !important;
+     transform: none !important;
+     width: 205px !important;
+     margin-top: -2px !important;
 }
 
-div.joblog hr {
-     margin: 15px 0;
+#sb_internals a, #sb_advanced a {
+     max-width: 210px;
 }
 
-div.joblog h3 {
-     margin-bottom: 5px;
+#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+     margin-bottom: -4px !important;
+     margin-top: -10px !important;
 }
 
-.smallhead {
-     font-size: 7pt
+#sb_general, #sb_shortgeneral {
+     margin-top: -7px !important; 
 }
 
-.mediumtags {
-     font-size: 8pt;
-     font-style: italic;
-     font-weight: bold;
+#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+   min-height: 14px;
 }
 
-.optbox {
-     min-width: 16px !important;
-     max-width: 16px !important;
-     width: 16px !important;
-     min-height: 16px;
-     max-height: 16px;
-     height: 16px;
-     opacity: 1.0;
-     border: 0;
-     margin: 5px 5px 5px 10px;
-     padding: 2px;
+#banlist li {
+     font-size: 10pt;
+     min-height: 38px !important;
 }
 
-.optbox:hover {
-     min-width: 16px !important;
-     max-width: 16px !important;
-     width: 16px !important;
-     min-height: 16px;
-     max-height: 16px;
-     height: 16px;
-     opacity: 1.0;
-     border: 0;
-     margin: 5px 5px 5px 10px;
-     padding: 2px;
+.confignav {
+     padding-top: 12px !important;
 }
 
-.cells {
-     border-left: 1px outset #bbf;
-     border-top: 1px inset #99f !important;
-     border-bottom: 1px inset #99f !important;
+.langbox img {
+     margin: -1px 0 1px 1px;
 }
 
-.tablefooter {
-     background: #b4c8ff url('images/tabletitlelight.png') repeat-x;
+.th_title a  {
+     font-size: 11pt !important;
 }
 
-.tablefooter tr, .tablefooter td {
-     background: #ffe url('images/header.png') center center repeat-x;
-     border-top: 1px solid #447;
-     border-bottom: 1px solid #447 !important;
-     padding: 8px 2px !important;
-     font-size: 7pt;
-     line-height: 110%;
+#logs font[color^="#"]::before {
+     margin-right: 6px;
+     margin-left: -15px;
+     width: 7px;
+     height: 7px;
 }
 
-.formaction {
-     text-align: right;
+.statlist li a[href^="graph"]::before, .statlist li::before {
+     height: 6px;
+     width: 6px;
 }
 
-div.footnote {
-     text-align: right;
-     color: #447;
-     font-size: 7pt;
-     margin-bottom: -5px !important;
+button.control {
+     padding: 14px !important;
 }
 
-div.footnote hr{
-     margin: 20px 0 5px 0 !important;
-     color: #447;
-     background: #447;
-     height: 1px;
-     border: 0px solid #447;
+#configstats td::before {
+     min-height: 24px;
 }
 
-.topness {
-     font-size: 7.5pt;
-     text-align: right;
-     margin-top: 0px;
-     margin-bottom: -18px;
-     margin-right: 5px;
+.newsAuthor {
+     font-size: 9pt;
+     background-size: 11px 11px;
+     padding: 0 0 0 14px;
+     background-position: left center !important;
 }
 
-iframe.iframed {
-     margin: 10px 0 0;
+_:-ms-lang(x), #browseronstart {
+     margin-bottom: -15px !important;
 }
 
-/* Fixes for when app is not started and console error loads inside iframe */
+_:-ms-lang(x), .tab, .tab2 {
+     padding: 3px 6px 6px !important;
+}
+}
 
-body.iframed {
-     background: transparent url('../dark/images/transparent.gif') !important;
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1500px) {
+.routersummary div[style="height: 36px;"] {
+     height: 38px !important;
+}
 }
 
-.iframed div.routersummaryouter {
-     display: none !important;
+@media screen and (min-width: 1600px) {
+.tab, .tab2 {
+     padding-left: 8px;
+     padding-right: 8px;
+}
 }
 
-.iframed h1 {
-     margin: 0 10px 10px 7px !important;
+/* Edge/IE tweaks */
+_:-ms-lang(x), *, *:hover, *:focus, input, input:hover, input:focus, a:hover, a:focus, h1, h2, h3, h4 {
+     filter: none !important;
+     text-shadow: none !important;
 }
 
-.iframed div.sorry {
-     margin: 5px 10px 10px 7px !important;
+_:-ms-lang(x), .tunnels_client th:first-child::after {
+     letter-spacing: -0.05em;
+     font-weight: normal;
 }
 
-/* end iframed console fixes */
+/* end Edge/IE tweaks */
+
diff --git a/installer/resources/themes/console/light/console_ar.css b/installer/resources/themes/console/light/console_ar.css
index 8a605d082eb2738a9949e9a2aff0fe21ed1d5c7d..f369d15f7ce2e1154805a34a2b3b5211e3ffd37c 100644
--- a/installer/resources/themes/console/light/console_ar.css
+++ b/installer/resources/themes/console/light/console_ar.css
@@ -10,8 +10,14 @@ pre {
      text-align: right;
 }
 
+#help pre, #logs li, #proof textarea {
+     text-align: left;
+     direction: ltr;
+}
+
 table {
      direction: rtl;
+     margin-right: -16px;
 }
 
 td {
@@ -20,24 +26,120 @@ td {
 
 h1,h2,h3,h4 {
      direction: rtl;
-     text-align: right;
+     text-align: right !important;
+}
+
+h2, h3 {
+     background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important;
+}
+
+.routersummary h4 {
+     text-align: center;
 }
 
 h1 {
-     margin: 10px 210px 0px 10px;
-     padding: 7px 0px 30px 20px;
+     margin: 0 205px -15px 0;
+     padding: 20px 20px 20px 10px;
+}
+
+h2 {
+     font-size: 16pt;
+}
+
+h3 {
+     font-size: 14pt;
 }
 
 form {
     text-align: right;
+    margin: 0 16px 0 -16px;
+}
+
+#stats form {
+     margin: 0;
+}
+
+table.search td:nth-child(2) {
+     padding: 0 10px 0 0;
+}
+
+table.search td:nth-child(3) {
+     padding: 0 2px 0 8px;
+}
+
+input.search[type="text"] {
+     background-position: right 4px center;
+     padding: 5px 24px 5px 5px;
+}
+
+button.search, input[type="submit"], input[type="reset"],
+button.search:hover, input[type="submit"]:hover, input[type="reset"]:hover,
+button.search:focus, input[type="submit"]:focus, input[type="reset"]:focus,
+button.search:active, input[type="submit"]:active, input[type="reset"]:active {
+    background-position: right 6px center !important;
+    padding: 5px 22px 5px 7px !important;
+}
+
+select, select:hover, select:focus, select:active {
+     padding: 4px 4px 4px 16px;
+     background-position: left center !important;
+     text-align: right !important;
+}
+
+#loggingoptions input[type="text"], #i2pupdates input[type="text"], #addkeyring input[type="text"],
+#reseedconfig input[type="text"], #manualreseed input[type="text"], #plugininstall input[type="text"], .homelinkedit input[type="text"] {
+     direction: ltr;
+     text-align: right;
+}
+
+.homelinkedit td:nth-child(4) {
+     direction: ltr !important;
+}
+
+input[name="refreshInterval"] {
+     text-align: left;
+}
+
+#loggingoptions td:last-child:not(.optionsave) {
+      text-align: right;
+}
+
+#statsForm, #joinfamily, #newfamily, table#permabanned {
+     margin-left: 0;
+     margin-right: 0;
+}
+
+form[action="configpeer"] {
+     margin-left: -16px;
+     margin-right: 16px;
+}
+
+form[action="configpeer"] > h3.tabletitle {
+     margin-left: 16px;
+     margin-right: -16px;
+}
+
+#config_summarybar table.configtable {
+     margin-right: 0;
 }
 
 div.routersummary form {
     text-align: center;
 }
 
-div.routersummary h3 {
-     text-align: center;
+div.wideload {
+     margin-left: -16px;
+     margin-right: 16px;
+}
+
+.routersummary h3, .routersummary h4 {
+     text-align: center !important;
+}
+
+#sb_services a {
+     text-align: right !important;
+     padding-right: 20px !important;
+     background-position: right center !important;
 }
 
 div.routersummary td:last-child {
@@ -53,14 +155,20 @@ div.tunnels td:first-child {
      text-align: right;
 }
 
-/* proxy error messages */
+div.messages li, .messages li:first-child, .error li:first-child, .error li {
+     padding: 0 24px 0 0 !important;
+}
+
+.error li {
+     background-position: right center !important;
+}
 
 div.warning {
      text-align: right;
 }
 
 div.main {
-     margin: 10px 210px 0px 10px;
+     margin: 10px 205px 0 0;
      padding: 7px 20px 30px 20px;
 }
 
@@ -68,9 +176,17 @@ div.main li {
      text-align: right;
 }
 
+.main#home {
+     padding-bottom: 10px;
+}
+
 div.news {
-     margin: 10px 210px 0px 10px;
-     padding: 7px 0px 30px 20px;
+     margin: 10px 205px -12px 0;
+     padding: 7px 20px 10px 20px;
+     direction: ltr;
+}
+
+.news h3, #newspage h3 {
      direction: ltr;
 }
 
@@ -81,10 +197,64 @@ div.graphspanel form {
 .langbox {
      float: left;
      text-align: left;
+     padding-left: 0;
+     margin-left: 4px;
+}
+
+.confignav {
+     margin-left: -19px !important;
+     margin-right: -19px !important;
+     direction: ltr;
 }
 
 .formaction {
      text-align: left;
+     margin: 0 -16px 0 16px;
+}
+
+.formaction#consolepass, .formaction#tunnelconfigsave, .formaction#homeapps, .formaction#homesites, #sidebardefaults, #loggingoptions,
+#reseedconfig, #addkeyring, #netconfig, #advconf, #bandwidthconfig, #externali2cp, #pluginupdater, #newfamily, #webappconfigactions, #configstats {
+     margin-bottom: 15px !important;
+}
+
+#webappconfig th:first-child, #webappconfig td:first-child {
+     text-align: right;
+}
+
+#webappconfig th:nth-child(2), #webappconfig td:nth-child(2),
+#webappconfig th:nth-child(3), #webappconfig td:nth-child(3) {
+     text-align: center;
+}
+
+#webappconfigactions {
+     margin-left: 32px;
+     margin-right: -32px;
+}
+
+div[lang="ar"] p, div[lang="ar"] ul {
+     padding: 0 20px;
+     font-size: 11pt;
+}
+
+div[lang="ar"] li.tidylist {
+     list-style: none;
+     margin-bottom: 15px; 
+}
+
+ul.links li:first-child {
+     margin-top: 15px !important;
+}
+
+.main#help ul.links li:first-child {
+     margin-top: -10px !important;
+}
+
+.main#help ul.links li {
+     margin-right: 70px !important;
+}
+
+.main#help .tidylist {
+    margin: 5px 50px 5px 20px;
 }
 
 .tidylist code {
@@ -95,6 +265,14 @@ code {
      text-align: right;
 }
 
+th {
+     text-align:right;
+}
+
+th a.script {
+     float: left;
+}
+
 div.joblog li, div.newsheadings li {
     text-align: left;
     direction: ltr;
@@ -105,4 +283,488 @@ span.newtab {
      font-size: 8pt;
      float: left;
      letter-spacing: 0;
+     margin-left: 10px;
+}
+
+#tunnelconfig + hr {
+     background: #fff ;
+}
+
+#plugininstall {
+     margin: 0 0 0 -16px;
+}
+
+#updateplugins {
+     margin: 0;
+}
+
+#pluginconfig th:first-child, #pluginconfig td:first-child {
+     min-width: 100px;
+     white-space: normal;
+     text-align: left !important;
+     padding-right: 5px;
+}
+
+#pluginconfig th:nth-child(2), #pluginconfig th:nth-child(3),
+#pluginconfig td:nth-child(2), #pluginconfig td:nth-child(3) {
+     text-align: center;
+}
+
+#pluginconfig table th:nth-child(2), #pluginconfig table td:nth-child(2) {
+     text-align: right;
+}
+
+.main#config_plugins {
+     overflow: hidden;
+}
+
+td.optionsave {
+     text-align: left;
+}
+
+p.infohelp, p.infowarn, td.infohelp, td.infowarn,
+table#bugreports td.infohelp, p#debugmode, p#sybilinfo,
+#bandwidthconfig tr:first-child .infohelp,
+#addkeyring td.infohelp, #joinfamily tr:nth-child(3) td:first-child,
+#newfamily tr:last-child td:first-child,
+#oldhome td:first-child, #floodfillconfig .infohelp,
+p#clientconf.infohelp, p#webappconfig.infohelp,
+p#pluginconfig, #plugininstall .infohelp,
+#manualreseed tr:nth-last-child(2) td.infohelp,
+#config_peers tr:nth-child(3) td.infohelp,
+h3#shutdownrouter + p.infohelp, h3#restartrouter + p.infohelp,
+h3#systray + p.infohelp, h3#servicedebug + p.infohelp,
+h3#browseronstart + p.infohelp, .main#config_reseed p.infohelp,
+p#enablefullstats, p#gatherstats, #config_family .infohelp,
+#consolepass tr:first-child td, form[action="events"],
+#plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2),
+#manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2),
+#config_summarybar .configtable td:not(.optionsave) {
+     background-position: right 12px center !important;
+     padding: 15px 50px 15px 10px !important;
+}
+
+#themesettings, #langsettings {
+     margin-left: 16px !important;
+     margin-right: -16px !important;
+}
+
+div.themechoice, div.langselect {
+     float: right;
+}
+
+.h3navlinks {
+     float: left;
+}
+
+.homelinkedit tr:last-child td:first-child, p#helptranslate {
+     text-align: left;
+}
+
+#sidebarconf tr:last-child td:last-child {
+     text-align: right;
+}
+
+table#manualreseed, #config_keyring .configtable { 
+     margin-right: 0 !important;
+}
+
+#config_keyring form h3, #config_update form h3, form h3 {
+     margin-right: -16px;
+     margin-left: 16px;
+}
+
+#clientconfig, #webappconfig {
+     margin-right: -32px;
+}
+
+#clientconfig th:first-child {
+     text-align: left;
+}
+
+#clientconfig td:nth-child(2), #clientconfig td:nth-child(3) {
+     text-align: center;
+}
+
+table#plugininstall {
+     margin-right: 0 !important;
+}
+
+table#pluginconfig {
+     margin-right: -32px !important;
+}
+
+#tunnelconfig td:nth-child(n+2) {
+     text-align: right;
+}
+
+.formaction#clientsconfig, .formaction#pluginconfig {
+     margin-left: 32px;
+     margin-right: -32px;
+     margin-bottom: 15px;
+}
+
+.infohelp#webappconfig, h3#webappconfig, #pluginconfig, h3#pconfig {
+     margin-right: 0; 
+}
+
+#configstats td:first-child {
+     text-align: center !important;
+}
+
+#configstats td:nth-child(2) {
+     padding-right: 10px;
+}
+
+#configstats tr:last-child td {
+     text-align: left !important;
+}
+
+textarea[name="levels"] {
+     text-align: left;
+}
+
+textarea#advancedsettings, #i2pupdates textarea, #addkeyring textarea, #reseedconfig textarea {
+     direction: ltr;
+}
+
+.homelinkedit th:first-child, .homelinkedit td:first-child {
+     text-align: center;
+}
+
+.homelinkedit th:nth-child(2), .homelinkedit td:nth-child(2) {
+     text-align: left;
+     width: 24px;
+}
+
+#bannedips, #banlist {
+     margin-left: 0 !important;
+     margin-right: 0 !important;
+}
+
+#bannedips, #bannedips table {
+     direction: ltr !important;
+}
+
+.mediumtags {
+     text-align: left;
+}
+
+h3#advancedconfig a, h3#bwlimiter a, h3.tabletitle a, h3.ptitle a, th a.script, th#upnpconfig a, h3#graphinfo a, h3#graphdisplay a {
+     float: left;
+}
+
+.main#config_advanced .wideload {
+     margin-left: 0 !important;
+     margin-right: 0 !important;
+}
+
+#config_service p.infohelp {
+     margin-right: -16px;
+     margin-left: 16px;
+}
+
+#browserstart {
+     margin-bottom: 15px;
+}
+
+#config_update.main .messages {
+     text-align: right;
+     padding-right: 50px;
+}
+
+table#addkeyring tr:last-child td {
+     text-align: left;
+}
+
+#banlist li {
+     padding: 5px 35px 5px 5px;
+     background-position: right 10px center;
+}
+
+.tab, .tab2 {
+     font-size: 10pt;
+     margin-top: -5px;
+}
+
+table.search {
+     margin-top: -26px;
+     margin-bottom: 15px;
+}
+
+h4.app {
+     background: url(/themes/console/images/eepsite.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
+     background-size: 16px 16px, 100% 100%, 100% 100% !important;
+     margin-top: 15px;
+}
+
+h4.app2 {
+     clear: left;
+     margin-top: 10px !important;
+     background: url(images/globe.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
+     background-size: 16px 16px, 100% 100%, 100% 100% !important;
+}
+
+h4.app, h4.app2, #news h3, .news h3 {
+     background-position: right 10px center, right center, right center !important;
+     padding: 6px 32px 6px 10px;
+     direction: ltr !important;
+}
+
+div.news h3, #news h3 {
+     background: url(images/news.png) right 8px center no-repeat, linear-gradient(to left, #fff, #eef) !important;
+     background: url(images/news.png) right 8px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) right center !important;
+     padding: 5px 30px 5px 10px;
+}
+
+#newsStatus {
+     float: none;
+}
+
+#newsDisplay {
+     float: left;
+     margin-left: 0 !important;
+}
+
+#newsStatus, #newsDisplay {
+     margin-bottom: -2px !important;
+}
+
+#netdboverview, #netdboverview td, #netdboverview table {
+     direction: ltr;
+}
+
+#netdboverview table td {
+     border: 1px solid #7778bf !important;
+}
+
+#sb_internals td, #sb_advanced td {
+     text-align: center;
+}
+
+table#leasesetdebug th:last-child, table#leasesetsummary th:last-child,
+table.leaseset th:last-child, table.leaseset td:nth-child(2) {
+     text-align: left;
+}
+
+table#leasesetdebug th, table#leasesetsummary th, table.leaseset th {
+     text-align: right;
+}
+
+.leaseset th:first-child code, .leaseset th:first-child b {
+     float: right !important;
+}
+
+.leaseset th:first-child code {
+     direction: ltr;
+     padding-right: 5px;
+}
+
+table#leasesetdebug td:nth-child(2n+1) {
+     text-align: left;
+}
+
+table#leasesetdebug td:nth-child(2n) {
+     text-align: right;
+}
+
+table#leasesetdebug, table#leasesetsummary, table.leaseset, table.sybil_routerinfo, #netdboverview, .netdbentry {
+     margin-right: 0;
+}
+
+p.family, p.sybil_info {
+     direction: ltr;
+}
+
+.sybil_routerinfo th {
+    padding: 1px 6px 1px 1px !important;
+}
+
+.sybil_routerinfo th:nth-last-child(2), .sybil_routerinfo th:last-child, #netdblookup td:first-child:not(.subheading) {
+    text-align: left !important;
+}
+
+td.subheading {
+     text-align: right !important;
+}
+
+.sybil_routerinfo th:first-child {
+     text-align: right !important;
+}
+
+.sybil_routerinfo td:first-child {
+     text-align: left;
+}
+
+table.leaseset:last-child, table.netdbentry:last-child, #profile_defs {
+     margin-bottom: -10px;
+}
+
+table#leasesetdebug td:first-child, table#leasesetsummary td:first-child {
+     text-align: left;
+}
+
+#netdboverview th, #netdblookup th {
+     background-position: right 8px center !important;
+     padding: 8px 32px 8px 5px !important;
+     text-align: right !important;
+}
+
+#netdbversions th:first-child, #netdbtransports th:first-child, #netdbcountrylist th:first-child {
+     text-align: left !important;
+}
+
+#netdbversions th:last-child, #netdbtransports th:last-child, #netdbcountrylist th:last-child {
+     text-align: right !important;
+     padding-right: 5px !important;
+}
+
+table.netdbentry th:first-child {
+     text-align: right;
+}
+
+table.netdbentry th:last-child {
+     text-align: left;
+}
+
+table.netdbentry td:nth-child(2) {
+     direction: ltr;
+}
+
+#sybilnav li {
+     background: url(images/eye.png) right 5px center no-repeat, linear-gradient(to right, #eef 30%, #fff);
+     padding: 3px 24px 3px 3px;
+}
+
+.threatpoints + ul li {
+     margin-right: 20px;
+}
+
+p#profiles_overview, #profiles .widescroll + h3, #thresholds + h3, ul#banlist {
+     margin-right: -16px !important;
+}
+
+p#profiles_overview, #profiles .widescroll + h3, #thresholds + h3, ul#banlist {
+     margin-left: 16px;
+}
+
+#profiles_overview + .widescroll {
+     margin: 0 -16px 0 16px !important;
+}
+
+#profiles .confignav + .widescroll {
+     overflow: visible;
+}
+
+#profilelist {
+     margin: 0 !important;
+}
+
+#profilelist th:last-child, #profilelist td:last-child {
+     text-align: left;
+}
+
+#profiledefs td:last-child {
+     text-align: right !important;
+}
+
+#profilelist td:nth-child(2) {
+     text-align: right;
+}
+
+#thresholds p {
+     padding-right: 10px;
+}
+
+.wideload .confignav {
+     margin-left: -3px !important;
+     margin-right: -35px !important;
+}
+
+#floodfills, .statusnotes:last-child {
+     margin-bottom: -10px !important;
+}
+
+.main#profiles ul#banlist {
+     margin-bottom: -10px !important;
+}
+
+#peers table, #tunnels table, #logs table, #debug table {
+     margin-right: 0 !important;
+}
+
+#logs table td:first-child {
+     text-align: left;
+     padding-right: 15px;
+}
+
+.logtable tr:first-child td {
+     direction: ltr;
+} 
+
+#wrapperlogs pre {
+     text-align: left;
+     direction: ltr;
+}
+
+#pluginconfigactions {
+     margin: -6px -32px -6px 32px !important;
+}
+
+#pluginupdater.formaction {
+     margin: -16px 0;
+}
+
+pre#transports {
+     padding: 10px 10px 0 0;
+}
+
+#changelog {
+     margin-bottom: -9px !important;
+}
+
+#advancedsettings #configinfo {
+     margin: 0 0 5px !important;
+}
+
+#portfaq {
+     width: auto;
+     margin: 16px 0 5px;
+}
+
+#help h3 {
+     border-width: 1px 5px 1px 1px !important;
+}
+
+#faq h3 {
+     background: url(/themes/console/images/info/question.png) no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 240, 0.4)) repeat scroll 0 0%, rgba(0, 0, 0, 0) linear-gradient(to left, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important;
+     background-position: right 6px center, right center, right center !important;
+     padding-right: 30px;
+     background-size: 18px 18px, 100% 100%, 100% 100% !important;
+}
+
+#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"], #consolepass input[name="nofilter_pw"]:focus, #externali2cp input[name="nofilter_pw"]:focus,
+#consolepass input[name="name"], #externali2cp input[name="user"], #consolepass input[name="name"]:focus, #externali2cp input[name="user"]:focus {
+     background-position: right 3px center, center center !important;
+     padding: 4px 20px 4px 4px !important;
+     margin: 5px 3px 5px 15px !important;
+}
+
+#consolepass tr:first-child td, p#clientconf.infohelp, p#webappconfigtext.infohelp, #floodfillconfig .infohelp, 
+#bandwidthconfig tr:first-child .infohelp, h3#shutdownrouter + p.infohelp, h3#restartrouter + p.infohelp, h3#systray + p.infohelp, 
+h3#servicedebug + p.infohelp, h3#browseronstart + p.infohelp, table#addkeyring td:first-child, #config_peers tr:nth-child(3) td.infohelp, 
+#config_reseed.main p.infohelp, #plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2), 
+#manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2), #manualreseed tr:nth-last-child(2) td.infohelp, 
+p#enablefullstats, p#gatherstats, #oldhome td:first-child, p#pluginconfigtext, #plugininstall .infohelp, #config_family .infohelp, 
+#joinfamily tr:nth-child(3) td:first-child, #newfamily tr:last-child td:first-child, #config_summarybar .configtable td:not(.optionsave),
+table#bugreports td.infohelp {
+     background-position: right 12px center !important;
+     padding: 15px 50px 15px 15px !important;
+}
+
+@media screen and (min-width: 1500px) {
+.main, .news, h1 {
+     margin-right: 232px !important;
+     margin-left: 0 !important;
 }
+}
\ No newline at end of file
diff --git a/installer/resources/themes/console/light/console_big.css b/installer/resources/themes/console/light/console_big.css
index 44c46c83d50b1d7fbf6e9f6aa1672bb556c9814e..fa877c50b4f9999ef7584950abf2be0700f11461 100644
--- a/installer/resources/themes/console/light/console_big.css
+++ b/installer/resources/themes/console/light/console_big.css
@@ -2,23 +2,63 @@
 /* Comment: Larger text & other optimizations for Chinese & other doublebyte charactersets */
 /* Author: dr|z3d */
 
+
+h1, h2, h3, h4 {
+     font-weight: normal !important;
+     text-shadow: none;
+     word-spacing: 0.1em;
+}
+
+h3 {
+     font-size: 12pt;
+}
+
+b, a, input, button, input[type="submit"], input[type="reset"], i, th, thead, tfoot, .mediumtags {
+     font-weight: normal !important;
+     font-style: normal !important;
+}
+
+b {
+     color: #111;
+}
+
+button, input[type="submit"], input[type="reset"] {
+    font-size: 10.5pt !important;
+    font-family: "Droid Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+    padding: 5px 5px 5px 20px !important;
+}
+
+button.control {
+     padding: 12px 11px !important;
+}
+
+input.cancel {
+     padding: 5px 5px 6px 20px !important;
+}
+
+#sidebarconf button {
+     padding: 3px !important;
+}
+
 div.routersummary table {
     font-size: 8.5pt;
 }
 
 div.routersummary a {
-    font-size: 10pt;
+    font-size: 10pt !important;
 }
 
 div.routersummary h3, div.routersummary h4, div.routersummary p, div.routersummary h3 a, div.routersummary a {
-     text-shadow: 0 0 0 0 !important;
+     text-shadow: none !important;
 }
 
+div.routersummary h3 a {
+     font-size: 11pt !important;
+}
 
 div.routersummary h4, div.routersummary h4 a {
-     font-size: 11pt !important;
-     letter-spacing: 0.1em;
-     -moz-box-shadow: inset 0px 0px 1px 15px #dfd;
+     font-size: 10.5pt !important;
+/*     letter-spacing: 0.1em;*/
 }
 div.routersummary b {
      font-size: 9.5pt;
@@ -27,36 +67,21 @@ div.routersummary b {
 
 div.routersummary a {
      word-spacing: 0.1em !important;
-     letter-spacing: 0.05em !important;
-     font-size: 10.5pt;
-     line-height: 150%;
-}
-
-h1, h2,h3,h4 {
-     font-weight: normal !important;
-     text-shadow: 0 0 0;
-     word-spacing: 0.1em;
-}
-
-b, a, input, button, submit, i, th, thead, tfoot{
-     font-weight: normal !important;
-     font-style: normal !important;
-}
-
-button, button:visited {
-    font-size: 10.5pt;
-    font-family: Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     font-size: 10pt;
+     line-height: 130%;
 }
 
+/*
 b {
      color: #152 !important;
 }
+*/
 
 div.news {
      font-size: 9pt;
 }
 
-input, input:visited {
+input, input:visited, button {
      font-size: 10pt !Important;
 }
 
@@ -65,11 +90,16 @@ input, input:visited {
 }
 
 table {
-     font: 8.5pt/130% Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
+     font: 10pt/130% "Droid Sans", Verdana, "Bitstream Vera Sans", Tahoma, Helvetica, sans-serif;
 }
 
-td {
-     font-size: 9pt;
+th {
+     font-size: 10pt;
+}
+
+td, .mediumtags {
+     font-size: 10pt !important;
+     font-weight: normal !important;
 }
 
 .statusnotes {
@@ -88,6 +118,33 @@ div.tunnels a {
      word-spacing: 0 !important;
 }
 
-code, tt {
+code, tt, div {
      font-size: 10pt !important;
 }
+
+.messages, .messages li, .infohelp, .infowarn  {
+     font-weight: normal !important;
+     font-size: 11pt !important;
+}
+
+.tab, .tab2 {
+     font-size: 11pt;
+     font-weight: normal;
+}
+
+.tab2 {
+     color: #222;
+}
+
+#config_service p.infohelp, #config_clients p.infohelp, #config_clients p.infowarn, #config_clients p#pluginconfig, #config_tunnels p.infohelp,
+p#enablefullstats {
+     margin-top: 12px;
+}
+
+#config_family p.infohelp {
+     margin-bottom: 12px;
+}
+
+#jardump td, #jardump td tt {
+     font-size: 8.5pt !important;
+}
diff --git a/installer/resources/themes/console/light/default.css b/installer/resources/themes/console/light/default.css
deleted file mode 100644
index d7934b1d5ea2ce58b46bfb1a441a434a52c1b09e..0000000000000000000000000000000000000000
--- a/installer/resources/themes/console/light/default.css
+++ /dev/null
@@ -1,432 +0,0 @@
-/* I2P Tunnel Manager Theme: Light */
-/* Description: Light blue highlights. */
-/* Author: dr|z3d */
-
-body {
-     margin: 0px;
-     padding: 0px;
-     text-align: center;
-     font-family: "Lucida Sans Unicode", Verdana, Helvetica, sans-serif;
-     color: #001;
-     font-size: 10pt;
-/* we've avoided Tantek Hacks so far,
-    ** but we can't avoid using the non-w3c method of
-    ** box rendering. (and therefore one of mozilla's
-    ** proprietry -moz properties (which hopefully they'll
-    ** drop soon).
- */
-     -moz-box-sizing: border-box;
-     -webkit-box-sizing: border-box;
-    background: #99f url(images/snowcamo.png);
-}
-
-body.iframed {
-     background: transparent url('../dark/images/transparent.gif') !important;
-     padding-top: 5px;
-}
-
-div {
-     -moz-box-sizing: border-box;
-     -webkit-box-sizing: border-box;
-}
-
-label {
-     margin: 0px 4px;
-     padding: 1px 10px 2px 0px;
-     float: left;
-     width: 120px;
-     height: 24px;
-     font-weight: normal;
-     text-align: right;
-     font-size: 8pt;
-     font-style: italic;
-     -moz-box-sizing: border-box;
-     -webkit-box-sizing: border-box;
-     line-height: 120%;
-     color: #101;
-}
-
-h4 {
-     font-size: 11pt;
-     font-weight: bold !important;
-     color: #115;
-     text-align: left;
-     border: 1px solid #115;
-     margin: 5px 0 15px 0;
-     padding: 5px 10px;
-     background: url(images/header.png) repeat-x center center;
-     letter-spacing: 0.07em;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     -khtml-box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-     box-shadow: 0 2px 1px 1px rgba(176, 176, 216, 0.4);
-}
-
-a {
-     text-decoration: none;
-}
-
-form {
-     margin: 0px;
-}
-
-textarea, input, select, button, a {
-     -moz-box-sizing: border-box;
-     -webkit-box-sizing: border-box;
-     font-size: 8.5pt;
-     float: left;
-     vertical-align: middle;
-}
-
-button {
-     float: none;
-     text-decoration: none;
-}
-
-textarea {
-     color: #003;
-     background: #fff;
-     border: 1px solid #447;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-}
-
-textarea:active {
-     -moz-box-shadow: inset 0px 0px 0px 1px #f60;
-     -khtml-box-shadow: inset 0px 0px 0px 1px #f60;
-     box-shadow: inset 0px 0px 0px 1px #f60;
-}
-
-br {
-     clear: left;
-}
-
-div.statusNotRunning {
-     float: left;
-     width: 68px;
-     height: 24px;
-     overflow: hidden;
-     color: #d00;
-     background: url('images/console_status_stopped.png') 0 0 no-repeat;
-     padding-top: 24px;
-     margin-top: 4px;
-}
-
-div.statusRunning {
-   float: left;
-     width: 68px;
-     height: 24px;
-     overflow: hidden;
-     color: #0b0;
-     background: url('images/console_status_running.png') 0 0 no-repeat;
-     padding-top: 24px;
-     margin-top: 4px;
-}
-
-div.statusStarting {
-     float: left;
-     width: 68px;
-     height: 24px;
-     overflow: hidden;
-     color: #339933;
-     background: url('images/console_status_starting.png') 0 0 no-repeat;
-     padding-top: 24px;
-     margin-top: 4px;
-}
-
-hr {
-     display: none;
-}
-
-.separator, .subdivider {
-     clear: both;
-     height: 1px;
-     margin: 10px 0px 10px 0px;
-     border-bottom: 1px dotted #447;
-/*
-     display: none;
-*/
-}
-
-.subdivider {
-     border-bottom: 1px dotted #447;
-     padding: 5px 0;
-}
-
-.freetext {
-     width: 150px;
-     height: 24px;
-     border: 1px solid #447;
-     padding: 2px 3px;
-     margin: 4px 0 2px 0px;
-     font: 9pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     font-weight: bold;
-     background: #fff;
-     color: #003;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-/*
-     -moz-box-shadow: inset 0px -1px 1px 0px #fff;
-*/
-}
-
-.freetext:active {
-     -moz-box-shadow: inset 0px 0px 0px 1px #f60;
-     -khtml-box-shadow: inset 0px 0px 0px 1px #f60;
-     box-shadow: inset 0px 0px 0px 1px #f60;
-}
-
-.control, control:link, control:visited {
-     margin: 4px 0 0 4px !important;
-     padding: 2px;
-     overflow: hidden;
-     min-width: 60px;
-     font-weight: bold;
-     background: #ffe;
-     color: #001;
-     border: 1px outset #66a;
-     text-align: center;
-     white-space: nowrap;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     margin-top: 8px;
-     text-decoration: none;
-}
-
-/*
-.control:active {
-     border: 1px inset;
-     background-color: #003;
-     color: #f60;
-     text-decoration: none;
-}
-*/
-
-.control:hover, control:visited:hover {
-     background-color: #f60;
-     color: #fff !important;
-     text-decoration: none;
-     border: 1px solid #f60 !important;
-     background: #f60 !important;
-     color: #fff;
-     -moz-box-shadow: inset 0px 0px 0px 1px #fff !important;
-     -khtml-box-shadow: inset 0px 0px 0px 1px #fff !important;
-     box-shadow: inset 0px 0px 0px 1px #fff !important;
-}
-
-.control:link, control:visited {
-     margin: 4px 0 0 4px !important;
-     padding: 2px;
-     overflow: hidden;
-     min-width: 60px;
-     font-weight: bold;
-     color: #001;
-     border: 1px outset #66a;
-     text-align: center;
-     white-space: nowrap;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     margin-top: 8px;
-     background: #ffe url(images/header.png) center center repeat-x;
-     text-decoration: none;
-}
-
-.panel {
-     width: 800px;
-     margin: 16px auto 16px auto;
-     overflow: hidden;
-     text-align: left !important;
-     font-size: 7pt;
-     background-color: #fff;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #002;
-     padding: 10px 20px;
-     -moz-box-shadow: inset 0px 0px 1px 1px #bbf;
-     -khtml-box-shadow: inset 0px 0px 1px 1px #bbf;
-     box-shadow: inset 0px 0px 1px 1px #bbf;
-    background: none repeat scroll 0 0 #EEEEFF;
-    background: #fff url(images/magic.png);
-    border: 1px solid #444477;
-    color: #000011;
-}
-
-.iframed .panel {
-     margin: 16px auto -8px auto !important;
-}
-
-.iframed .panel.iframed {
-     margin: 0 auto -8px auto !important;
-}
-
-.panel .footer {
-     float: right;
-     padding: 4px;
-}
-
-.toolbox {
-     float: right;
-}
-
-.rowItem {
-     width: 750px;
-     float: left;
-     margin: 2px 0;
-}
-
-.comment {
-     font-weight: bold;
-     display: block;
-     padding: 2px 10px 0 20px;
-     text-align: left;
-}
-
-.text {
-     height: 24px;
-     width: 150px;
-     padding: 0 0 0 2px;
-     float: left;
-     margin: 0;
-     font-size: 8.5pt !important;
-     font-weight: bold;
-}
-
-.accessKey {
-     text-decoration: underline;
-}
-
-#globalOperationsPanel {
-     background-color: #fff;
-     border: 1px solid #003;
-     padding: 5px 20px 11px 10px;
-     -moz-box-shadow: inset 0px 0px 0px 1px #f00;
-     -moz-box-shadow: inset 0px 0px 1px 0px #f60;
-     background: #fff url(images/magic.png);
-     border: 1px solid #444477;
-     color: #613;
-}
-
-#globalOperationsPanel .control {
-     min-width: 120px;
-     font-family: "Lucida Sans Unicode", Verdana, Tahoma, Helvetica, sans-serif;
-     font-weight: bold;
-}
-
-#globalOperationsPanel .control:link {
-     min-width: 120px;
-}
-
-
-globalOperationsPanel .control:link {
-     min-width: 120px;
-     margin: 4px 0 0 4px !important;
-     padding: 2px;
-     overflow: hidden;
-     font-weight: bold;
-     background-color: #bbbbff;
-     color: black;
-     border: 1px outset #ddddc0;
-     text-align: center;
-     white-space: nowrap;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     margin-top: 8px;
-     background: #ffe url(images/header.png) 0 0 repeat-x !important;
-}
-
-
-globalOperationsPanel .control:visited {
-     min-width: 120px;
-     margin: 4px 0 0 4px !important;
-     padding: 2px;
-     overflow: hidden;
-     font-weight: bold;
-     background-color: #ffe;
-     color: black;
-     border: 1px outset #ddddc0;
-     text-align: center;
-     white-space: nowrap;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     margin-top: 8px;
-     background: url(images/header.png) 0 0 repeat-x !important;
-}
-
-globalOperationsPanel .control:hover {
-     min-width: 120px;
-     margin: 4px 0 0 4px !important;
-     padding: 2px;
-     overflow: hidden;
-     font-weight: bold;
-     background-color: #003;
-     color: #f60;
-     border: 1px outset #fff;
-     text-align: center;
-     white-space: nowrap;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     margin-top: 8px;
-     background: url(images/header_on.png) 0 0 repeat-x !important;
-}
-.header {
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-}
-
-select {
-     background-color: #fff;
-     color: #003;
-     margin: 4px;
-     font-family: "Lucida Sans Unicode", Verdana, Tahoma, Helvetica, sans-serif;
-     font-weight: bold;
-     border: 1px solid #447;
-     padding: 3px 3px 3px 0;
-     min-width: 270px;
-     font-size: 8pt;
-     max-height: 24px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-}
-
-select:active {
-     -moz-box-shadow: inset 0px 0px 0px 1px #f60;
-     -khtml-box-shadow: inset 0px 0px 0px 1px #f60;
-     box-shadow: inset 0px 0px 0px 1px #f60;
-}
-
-a:link {
-     color: #359;
-     text-decoration: none;
-     font-weight: bold;
-     word-wrap: break-word;
-}
-
-a:visited {
-     color: #218;
-     text-decoration: none;
-     font-weight: bold;
-}
-
-a:hover {
-     color: #f60;
-     text-decoration: underline;
-     font-weight: bold;
-}
-
-a:active {
-     color: #f93;
-     text-decoration: underline;
-     font-weight: bold;
-}
diff --git a/installer/resources/themes/console/light/i2ptunnel.css b/installer/resources/themes/console/light/i2ptunnel.css
index 7b742e0883253f8c1db590eeb95491c946f107dc..7d48bb0ad68be679bdf3e1b1e257f9fa259568bc 100644
--- a/installer/resources/themes/console/light/i2ptunnel.css
+++ b/installer/resources/themes/console/light/i2ptunnel.css
@@ -1,159 +1,1005 @@
-/* I2P Tunnel Edit Page
-*/
+/* I2P Tunnel Manager Theme: Light */
+/* Description: Light blue highlights. */
+/* Author: dr|z3d */
 
-#tunnelEditPage input {
-     width: 560px;
+body {
+     margin: 0;
+     padding: 0;
+     text-align: center;
+     font-family: "Droid Sans", "Noto Sans", "Ubuntu", "Segoe UI", Verdana, Helvetica, sans-serif;
+     color: #333;
+     font-size: 9pt;
+     background: #a4a4cb url(images/tile2.png) fixed;
+     background-size: 32px 32px;
 }
 
-#tunnelEditPage select {
-     width: 300px;
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+     padding-top: 5px;
 }
 
-#tunnelEditPage option [ selected ] {
-     color: green;
+::selection {
+     background: #27377f !important;
+     color: white;
+     text-shadow: none;
 }
 
-#tunnelEditPage #targetField, #tunnelEditPage #accessField, #tunnelEditPage #optionsField {
-     height: 48px;
-     width: 150px;
+::-moz-selection {
+     background: #27377f !important;
+     color: white;
+     text-shadow: none;
 }
 
-#tunnelEditPage #tunnelOptionsField {
-     height: 96px;
-     width: 150px;
+div {
+     -moz-box-sizing: border-box;
+     -webkit-box-sizing: border-box;
+     box-sizing: border-box;
+}
+
+a {
+     text-decoration: none;
+}
+
+form {
+     margin: 0;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     margin: 5px 3px 5px 5px;
+     background: none;
+     vertical-align: sub;
+     min-width: 16px;
+     min-height: 16px;
+}
+
+input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="radio"]:hover, input[type="radio"]:focus {
+     box-shadow: 0 0 1px #89f;
+     filter: drop-shadow(0 0 2px #89f);
+     outline: none;
+}
+
+label {
+     cursor: pointer;
+}
+
+label:hover {
+     color: #000;
+}
+
+textarea, input, select, button {
+     font-size: 9pt;
+     vertical-align: middle;
+}
+
+button {
+     float: none;
+     text-decoration: none;
+}
+
+button, input[type="submit"], input[type="reset"], a.control {
+     font-family: "Droid Sans", "Noto Sans", "Ubuntu", "Segoe UI", Verdana, Helvetica, sans-serif;
+     font-size: 9pt;
+}
+
+textarea {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #333;
+     background: #fff;
+     border: 1px solid #999;
+     border-radius: 2px;
+     resize: none;
+     box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6);
 }
 
-#tunnelEditPage #targetField label, #tunnelEditPage #accessField label, #tunnelEditPage #tunnelOptionsField label, #tunnelEditPage #optionsField label{
-     height: 48px;
+textarea:focus {
+     box-shadow: inset 0 0 0 1px #89f;
+     color: #111;
+     font-weight: bold;
+}
+
+textarea[readonly]:focus {
+     font-weight: normal;
+}
+
+textarea#statusMessages {
+     width: 99%;
+     width: calc(100% - 8px);
+     border-radius: 0;
+     padding: 2px 4px;
+     color: #070;
+     border: none;
+     box-shadow: none;
+     font-family: "Droid Sans Mono", "Noto Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+
+br {
+     clear: left;
+}
+
+.statusNotRunning {
+     color: #d00;
+     background: url(images/console_status_stopped.png) 0 0 no-repeat;
+}
+
+.statusRunning {
+     color: #0b0;
+     background: url(images/console_status_running.png) 0 0 no-repeat;
+}
+
+.statusStarting {
+     color: #ff3;
+     background: url(images/console_status_starting.png) 0 0 no-repeat;
+}
+
+.statusNotRunning, .statusRunning, .statusStarting {
+     margin: 0;
+     padding: 0;
+     width: 100%;
+     height: 24px;
+     background-position: center center;
+     background-size: auto 16px;
+     font-size: 0 !important;
+     text-align: center;
+     overflow: hidden;
+     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+}
+
+hr {
+     display: none;
+}
+
+.freetext, textarea {
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+
+.freetext {
      width: 150px;
+     border: 1px solid #999;
+     padding: 4px;
+     background: #fff;
+     color: #333;
+     border-radius: 2px;
+     box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6);
+}
+
+.freetext:focus {
+     box-shadow: 0 0 1px #89f;
+     color: #111;
+     font-weight: bold;
+}
+
+.freetext[readonly], .freetext[readonly]:focus {
+     background: #e9e9e9;
+     box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6);
+     color: #333;
+     font-weight: normal;
+}
+
+#clientHost {
+     width: 300px;
+}
+
+#clientPort {
+     width: 100px;
+}
+
+.control, input[type="radio"], input[type="checkbox"], select {
+     cursor: pointer;
+}
+
+.control::-moz-focus-inner {
+     outline: none;
+     border: none;
+}
+
+.control, .control:link, .control:visited {
+     text-align: center;
+     white-space: nowrap;
+     text-decoration: none;
+     font-style: normal;
+     font-weight: normal;
+     color: #333;
+     border: 1px solid #999;
+     border-radius: 2px;
+     background: #eee;
+     background: linear-gradient(to bottom, #fff, #ddd);
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+     box-sizing: border-box;
+     margin: 2px 4px !important;
+     min-width: 70px !important;
+     padding: 4px 8px;
+}
+
+button.control, input.control {
+     padding: 5px 8px !important;
+}
+
+.control:hover, .control:focus {
+     text-decoration: none;
+     color: #111;
+     border: 1px solid #f60 !important;
+     background: #ddd;
+     background: linear-gradient(to bottom, #ddd, #fff);
+     box-shadow: inset 0 0 0 1px #fff !important;
+     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8));
+     transition: ease border 0.7s;
+}
+
+.control:active {
+     box-shadow: inset 2px 2px 1px #999 !important;
+     color: #333;
+}
+
+a.control {
+     display: inline-block;
+     padding: 5px 8px !important;
+}
+
+.iframed .panel.iframed {
+     margin: 0 auto -8px auto !important;
+}
+
+.panel {
+     width: calc(100% - 14px);
+     max-width: 1400px;
+     margin: 8px auto;
+     min-width: 580px;
+     overflow: hidden;
+     text-align: left !important;
+     border-radius: 2px;
+     padding: 0 10px 10px;
+     box-shadow: inset 0 0 1px #999;
+     background: #fff;
+     background: linear-gradient(to right, #fff 0%, rgba(247, 248, 255, 0.5), #fff), linear-gradient(to bottom, #efefff, #fff, #efefff);
+     border: 1px solid #447;
+     filter: drop-shadow(0 0 1px #777);
+}
+
+.iframed .panel {
+     border: none;
+     background: none;
+     box-shadow: none;
+     padding: 0;
+     margin: 16px auto -8px auto !important;
+     width: 100%;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+.iframed .panel#clients {
+     margin-top: 8px !important;
+}
+
+select {
+     margin: 4px !important;
+     padding: 4px 16px 4px 4px !important;
+     min-width: 140px;
+     background: #fff;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff, #ddd);
+     color: #333;
+     font-family: "Droid Sans", "Noto Sans", "Ubuntu", "Segoe UI", Verdana, Helvetica, sans-serif;
+     font-size: 9pt;
+     border: 1px solid #999;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+}
+
+select:hover {
+     color: #111;
+}
+
+select:hover, select:active, select:focus {
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd, #fff) !important;
+}
+
+select:focus {
+     box-shadow: 0 0 1px #89f;
 }
 
-#tunnelEditPage #reachField, #tunnelEditPage #hostField, #tunnelEditPage #depthField, #tunnelEditPage #countField, #tunnelEditPage #optionsHostField {
-     width: 304px;
-     margin-right: 4px;
+select::-ms-expand {
+     display: none;
 }
 
-#tunnelEditPage #accessListField {
-     width: 434px;
-     margin-right: 4px;
+a:link {
+     color: #3b6bbf;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
+     outline: none;
+}
+
+a:visited {
+     color: #2c4e8f;
+     text-decoration: none;
+}
+
+a:hover, a:focus {
+     color: #f60;
+     text-decoration: none;
+}
+
+a:active {
+     color: #f30;
+}
+
+input[type="hidden"], input.default {
+     display: none;
+}
+
+h2, h3 {
+     padding: 6px 10px;
+     border: 1px solid #7778bf;
+     border-radius: 2px 2px 0 0;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%) !important;
+     background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8) 15%) #fff !important;
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     margin: 10px 0 -1px;
+     color: #31334f;
+     box-shadow: inset 0 0 0 1px #fff;
+     position: relative;
+}
+
+/* title images */
+
+h2, h3 {
+     padding-left: 30px;
+}
+
+#messages h2 {
+     background: url(/themes/console/images/info/logs.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#globalTunnelControl h2 {
+     background: url(/themes/console/images/info/control.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#servers h2 {
+     background: url(/themes/console/images/info/server.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#clients h2 {
+     background: url(/themes/console/images/info/client.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3 {
+     background: url(/themes/console/images/info/configure.png) left 5px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#wizardPanel h2 {
+     background: url(/themes/console/images/info/wizard.png) left 6px center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 15%, rgba(231, 231, 255, 0.8) 35%) #fff !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+/* end title images */
+
+.iframed #globalTunnelControl h2 {
+     margin-top: 2px;
 }
 
-#tunnelEditPage #portField, #tunnelEditPage #optionsPortField, #tunnelEditPage #backupField, #tunnelEditPage #varianceField {
-     width: 140px;
+.iframed #globalTunnelControl {
+     margin-bottom: -16px !important;
 }
 
-#tunnelEditPage #reachField label, #tunnelEditPage #hostField label, #tunnelEditPage #portField label, #tunnelEditPage #optionsHostField label, #tunnelEditPage #optionsPortField label, #tunnelEditPage #depthField label, #tunnelEditPage #countField label, #tunnelEditPage #backupField label, #tunnelEditPage #varianceField label {
+.panel table {
+     width: 100%;
+     border-collapse: collapse;
+     border: 1px solid #7778bf;
+     margin: 0;
+}
+
+th {
+     background: #eef url(images/header.png) center center repeat-x;
+     background: linear-gradient(to bottom, #fff 50%, rgba(238, 238, 255, 0.2) 50%, #eef 100%) !important;
+     color: #333;
+     padding: 5px;
      text-align: left;
+     border-top: 1px solid #7778bf;
+     border-bottom: 1px solid #7778bf;
+     font-size: 10pt;
+     color: #31334f;
 }
 
-#tunnelEditPage #otherField label {
-     width: 300px;
+th::first-letter {
+     text-transform: uppercase;
 }
 
-#tunnelEditPage #reachableByOther, #tunnelEditPage #tunnelDepth, #tunnelEditPage #tunnelQuantity, #tunnelEditPage #targetHost, #tunnelEditPage #clientHost {
-     width: 300px;
+th:first-child {
+     padding-left: 10px;
+}
+
+h2, h3, th, a, button.control, select {
+     text-shadow: 0 1px 1px #fff;
+}
+
+a:hover, a:focus, a:active, button:hover, button:focus, button:active, select:hover, select:focus, select:active {
+     text-shadow: none;
+}
+
+.tunnelConfig tr, #wizardPanel tr {
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
+}
+
+#wizardPanel tr:first-child {
+     background: #fff;
+}
+
+td {
+     border-top: 1px inset #cfd1ff;
+     vertical-align: middle;
+     padding: 5px;
+}
+
+#serverTunnels td, #clientTunnels td {
+     border-top: 1px inset #efefff;
 }
 
-#tunnelEditPage #port, #tunnelEditPage #targetPort, #tunnelEditPage #clientPort, #tunnelEditPage #tunnelBackupQuantity, #tunnelEditPage #tunnelVariance {
+td.infohelp {
+     background: url(/themes/console/images/info/infohelp.png) 8px center no-repeat;
+     background-size: 20px 20px;
+     padding: 10px 10px 10px 34px !important;
+     border: 1px solid #7778bf;
+}
+
+.tunnelConfig th:first-child, .tunnelConfig td:first-child {
+     border-left: 1px solid #7778bf;
+}
+
+.tunnelConfig th:last-child, .tunnelConfig td:last-child {
+     border-right: 1px solid #7778bf;
+}
+
+.tunnelConfig td {
+     width: 50%;
+}
+
+.tunnelConfig td > b {
+     margin-left: 5px;
+     min-width: 30px;
+     display: inline-block;
+}
+
+.tunnelProperties {
+     background: #fff !important;
+}
+
+.tunnelProperties td {
+     border-top: 1px inset #cfd1ff !important;
+}
+
+.tunnelProperties:hover {
+     background: #ffd !important;
+     color: #111;
+}
+
+.newTunnel {
      text-align: right;
-     width: 80px;
+     border-top: 2px solid #7778bf !important;
+     padding: 7px !important;
+     background: #fff;
 }
 
-#tunnelEditPage #shared, #tunnelEditPage #connectDelay, #tunnelEditPage #startOnLoad {
-     width: 16px;
+.newTunnel select, .newTunnel input, .newTunnel .control {
+     margin: 2px !important;
 }
 
-#tunnelEditPage label {
-     width: 150px;
-     font-weight: bold;
+.newtunnel form {
+     width: 100%;
      text-align: right;
-     float: left;
 }
-/* I2P Tunnel List Page
-*/
 
-#tunnelListPage .rowItem {
-     width: 150px;
+.tunnelName {
+     width: 25%;
+     min-width: 150px;
 }
 
-#tunnelListPage select {
-     min-width: 120px;
+.tunnelName a {
+     background: url(/themes/console/images/buttons/configure.png) left center no-repeat;
+     padding: 3px 3px 3px 20px !important;
 }
 
-#tunnelListPage textarea {
-     width: 100%;
-     height: 100px;
-     padding: 4px;
-     margin: 2px 0 12px 0;
-     background-color: #005;
-     color: #292;
-     font-family: "Lucida Console", "DejaVu Sans Mono", "Andale Mono", "Courier New", Courier, mono;
-     border: 1px solid #225;
-     font-size: 8pt !important;
+.tunnelName a:hover {
+     background: url(/themes/console/images/buttons/configure_hover.png) left center no-repeat;
+}
+
+.tunnelName a {
      font-weight: bold;
-     text-align: justify !important;
-     background: #efe url(images/magic.png);
-     -moz-box-shadow: 0 0 0px 1px #7f7;
-     -khtml-box-shadow: 0 0 0px 1px #7f7;
-     box-shadow: 0 0 0px 1px #7f7;
-     opacity: 0.9;
-     white-space: pre;
 }
 
-#tunnelListPage .footer .control {
+.tunnelType {
+     width: 25%;
+}
+
+.tunnelPreview, .tunnelPort {
+     width: 15%;
+     text-align: center;
+}
+
+.tunnelLocation, .tunnelInterface {
+     width: 20%;
+}
+
+.tunnelLocation font[color="red"] {
      margin-left: 2px;
-     font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+}
+
+.tunnelStatus {
+     text-align: center;
+     width: 10%;
+     min-width: 48px;
+}
+
+.tunnelControl {
+     width: 5%;
+     text-align: right;
+     white-space: nowrap;
+}
+
+th.tunnelControl {
+     text-align: center;
+}
+
+.buttons, .newTunnel {
+     text-align: right;
+     padding: 7px 5px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, #eef);
+     background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) !important;
+     border-top: 1px solid #7778bf !important;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+.buttons > * {
+     vertical-align: middle;
+}
+
+.tunnelDescriptionLabel, .tunnelDestinationLabel {
+     text-align: right;
+     min-width: 150px;
+     display: inline-block;
+     margin-right: 3px;
+     white-space: nowrap;
+}
+
+input {
+     float: none;
+     vertical-align: middle;
+}
+
+.tickbox {
+     vertical-align: middle;
+}
+
+#hostField, #leasesetKey, #userAgents {
+     width: 90% !important;
+     margin: 0 !important;
+     text-align: left !important;
+}
+
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity,
+#localDestination, #customOptions, #leasesetKey, #name, #description, textarea[name="accessList"] {
+     width: 100% !important;
+     margin: 0 !important;
+     text-align: left !important;
+}
+
+#oldName, #targetDestination, select#profile, select#connectionProfile {
+     min-width: 310px;
+     width: 30%;
+}
+
+select#connectionProfile {
+     width: calc(100% - 10px);
+}
+
+td[colspan="2"] > select#profile {
+     width: calc(50% - 15px) !important;
+}
+
+#customOptions, #userAgents {
+     width: calc(100% - 10px) !important;
+}
+
+#localDestination, textarea[name="accessList"], #hostField {
+     width: calc(100% - 5px) !important;
+     margin: 3px 0 !important;
+}
+
+#localDestination {
+     height: 32px !important;
+}
+
+#leasesetKey {
+     height: 28px !important;
+     vertical-align: middle;
+     padding: 4px;
+     box-sizing: border-box;
+}
+
+.multiOption {
+     margin: 5px 10px 5px 5px;
+     display: inline-block;
+     vertical-align: middle;
+}
+
+.multiOption#isServer {
+     background: url(/themes/console/images/server.png) left center no-repeat;
+     padding-left: 16px;
+}
+
+.multiOption#isClient {
+     background: url(/themes/console/images/client.png) left center no-repeat;
+     padding-left: 16px;
+}
+
+td#throttle {
+     padding: 0;
+}
+
+#throttler {
+     border: none;
+}
+
+#throttler th:first-child, #throttler td:first-child {
+     border-left: none;
+}
+
+#throttler th:last-child, #throttler td:last-child {
+     border-right: none;
+}
+
+#throttler th {
+     padding-left: 20px;
+}
+
+#throttler td {
+     width: 20%;
+}
+
+#throttler td:first-child {
+     text-align: right;
+     width: 20%;
+     white-space: nowrap;
+}
+
+#throttler tr:first-child th {
+     border-top: none;
+}
+
+td.blankColumn {
+     width: 20% !important;
+}
+
+#throttler tr:nth-child(odd), #wizardTunnelTypes tr:nth-child(odd), #wizardSummary tr:nth-child(odd) {
+     background: #f7f8ff;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(211, 211, 255, 0.3) 3px, #fff 5px);
+}
+
+#throttler tr:nth-child(even), #wizardTunnelTypes tr:nth-child(even), #wizardSummary tr:nth-child(even) {
+     background: #eef;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(230, 230, 255, 0.3) 3px, #fff 5px);
+}
+
+#throttler input[type="text"] {
+     width: 80px;
+}
+
+table {
+     background: #fff;
+}
+
+table#statusMessages textarea, table#statusMessages textarea:active {
+     margin: 0;
+     border: 0;
+     box-shadow: none;
+     height: 80px;
+     font-size: 9pt;
+}
+
+#tunnelMessages {
+     padding: 0;
+}
+
+.required:not(old) {
+     display: none;
+}
+
+input::-moz-placeholder {
+     color: #f00;
+     opacity: 1;
+}
+
+input:focus::-moz-placeholder {
+     opacity: 0;
+}
+
+::-webkit-input-placeholder {
+     color: #f00;
+     opacity: 1;
+}
+
+:focus::-webkit-input-placeholder {
+     opacity: 0;
+}
+
+input.tunnelName, input.tunnelDescription, #userAgents {
+     width: 80%;
+     min-width: 280px;
+     text-overflow: ellipsis;
+}
+
+#websiteName, #privKeyFile, #targetHost, .host {
+     width: 30%;
+     min-width: 250px;
+}
+
+.port, .quantity, .period {
+     width: 80px;
+}
+
+.username, .password {
+     width: 200px;
+}
+
+.username {
+     background: url(/themes/console/images/buttons/user.png) 3px center no-repeat #fff;
+     padding-left: 22px;
+}
+
+.password {
+     background: url(/themes/console/images/buttons/password.png) 3px center no-repeat #fff;
+     padding-left: 22px;
+}
+
+.proxyList {
+     width: 40%;
+     min-width: 280px;
+}
+
+#notReady {
+     border: 1px solid #900;
+     padding: 30px;
+     background: #ffd;
+     margin: 30px auto;
+     width: 400px;
+     text-align: center;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px #333);
+     font-size: 11pt;
      font-weight: bold;
-     color: #001 !important;
 }
 
-#tunnelListPage .footer .control:hover {
-     color: white !important;
+/* wizard specifics */
+
+#wizardTable {
+     padding: 0;
+}
+
+#wizardPanel td:not(#wizardTable), #wizardTunnelTypes td {
+     padding: 10px;
+}
+
+#wizardPanel .freetext {
+     margin-left: 0 !important;
 }
 
-#tunnelListPage .footer label {
+#wizardTunnelTypes td:first-child, #wizardSummary td:first-child {
+     font-weight: bold;
+     width: 10%;
+     min-width: 150px;
      text-align: right;
-     height: 24px;
-     width: 360px;
-     float: left;
-     margin-top: 6px;
-     margin-right: 5px;
-}
-/* Use Leary and Langridge content replacement methods (LIR)
-** to embed accessibility information into the document.
-** Should allow the lists to be rendered nicely by
-** screen readers. (and lynx!)
-*/
-
-#tunnelListPage label {
-     height: 0;
-     width: 0;
-     overflow: hidden;
+     white-space: nowrap;
 }
 
-#tunnelListPage .nameHeaderField label, #tunnelListPage .portHeaderField label, #tunnelListPage .typeHeaderField label, #tunnelListPage .interfaceHeaderField label, #tunnelListPage .targetHeaderField label, #tunnelListPage .previewHeaderField label, #tunnelListPage .statusHeaderField label {
-     text-align: left;
-     width: 150px;
-     height: 28px;
-     float: left;
-     padding-top: 4px;
+#wizardTunnelTypes td:last-child {
+     text-align: justify;
+     padding: 10px 20px 10px 10px !important;
 }
 
-#tunnelListPage .targetField, #tunnelListPage .targetField .text, #tunnelListPage .targetHeaderField, #tunnelListPage .targetHeaderField label {
-     width: 300px;
+#wizardTunnelTypes select {
+     margin-left: 0 !important;
 }
 
-#tunnelListPage .descriptionField, #tunnelListPage .destinationField {
-     width: 800px;
+#wizardTunnelTypes, #wizardSummary {
+     border: none;
+     margin-top: -1px;
 }
 
-#tunnelListPage .descriptionField .text, #tunnelListPage .destinationField .text {
-     width: 580px;
+#wizardTunnelTypes tr:last-child {
+     background: #fff;
 }
 
-#tunnelListPage .descriptionField label, #tunnelListPage .destinationField label {
+#wizardPanel #name, #wizardPanel #description {
+     width: 300px !important;
+}
+
+#wizardPanel p {
+     padding: 5px 10px;
+     margin: 0;
+     text-align: justify;
+}
+
+#wizardPanel input::-moz-placeholder {
+     color: #999;
+     font-weight: normal;
+}
+
+#wizardPanel ::-webkit-input-placeholder {
+     color: #999;
+     font-weight: normal;
+}
+
+#wizardPanel .options {
+     padding: 10px;
+}
+
+#wizardPanel .tag {
+     width: 10%;
+     min-width: 150px;
+     white-space: nowrap;
+     display: inline-block;
+     font-weight: bold;
      text-align: right;
-     width: 150px;
-     height: 28px;
-     float: left;
+     margin-right: 10px;
+}
+
+#wizardPanel select {
+     min-width: 160px;
+     margin-left: 0 !important;
+}
+
+#wizardPanel .infohelp p { /* wizard complete - advanced options info */
+     margin: 0;
+     padding: 0;
+}
+
+/* more space */
+
+.freetext, .tunnelConfig textarea, #customOptions, #userAgents, #hostField  {
+     margin: 5px !important;
+}
+
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity, #leasesetKey {
+     margin: 5px !important;
+     width: calc(100% - 10px) !important;
+}
+
+.tunnelConfig select, select#profile, select#connectionProfile {
+     margin: 5px !important;
+}
+
+textarea[name="accessList"], #hostField, #localDestination, .authentication {
+     width: calc(100% - 15px) !important;
+     margin: 5px !important;
+}
+
+.authentication {
+     height: 30px !important;
+}
+
+#customOptions, #userAgents, #leasesetKey {
+     width: calc(100% - 20px) !important;
+}
+
+.tunnelDestination {
+     padding-bottom: 1px !important;
+     border-bottom: 1px solid transparent !important;
+}
+
+#clientTunnels .tunnelDescription {
+     padding-top: 1px !important;
+}
+
+.tunnelDestination b, .tunnelDescription b {
+     color: #444;
+}
+
+td.tunnelDestination, td.tunnelDescription {
+     background: linear-gradient(to right, #fff 50%, #eef);
 }
+
+#oldDestFile {
+    margin-left: 5px;
+}
+
+#tunnelRegistration td b {
+     margin-left: 5px;
+}
+/* end more space */
+
+/* responsive layout */
+
+@media screen and (max-width: 800px) {
+.tunnelProperties td {
+     border-right: 1px dotted #cfd1ff;
+}
+
+.tunnelProperties td:last-child {
+     border-right: 1px solid #7778bf;
+}
+
+th {
+     font-size: 9pt;
+}
+
+.statusNotRunning, .statusRunning, .statusStarting {
+     background-size: auto 14px;
+}
+
+#leasesetKey {
+     height: 38px !important;
+}
+
+.port, .quantity, .period {
+     width: 60px;
+}
+
+#clientHost, .host {
+     width: 200px;
+     min-width: 210px;
+}
+
+.multiOption {
+     margin-right: 3px;
+}
+
+.control, .control:link, .control:visited {
+     min-width: 60px !important;
+}
+}
+
+@media screen and (max-width: 1500px) {
+h2, h3 {
+     font-size: 10.5pt !important;
+}
+}
+
+@media screen and (min-width: 1500px) {
+body, select, .control, input, textarea, .freetext {
+     font-size: 10pt !important;
+}
+
+th {
+     font-size: 10.5pt;
+}
+
+.statusNotRunning, .statusRunning, .statusStarting {
+     background-size: auto 18px;
+}
+
+#localDestination {
+     height: 34px !important;
+}
+}
+
+/* end responsive layout */
+
+/* Edge/IE tweaks */
+
+_:-ms-lang(x), * {
+     text-shadow: none !important;
+}
+
+_:-ms-lang(x), td, #serverTunnels td, #clientTunnels td {
+     border-top: 1px solid #efefff;
+}
+
+_:-ms-lang(x), td.tunnelDestination, td.tunnelDescription {
+     border-bottom-color: transparent;
+}
+
+/* end Edge/IE tweaks */
diff --git a/installer/resources/themes/console/light/images/application-icon.png b/installer/resources/themes/console/light/images/application-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..974a09bde70959bd3d81c8c4521a685411aad45c
Binary files /dev/null and b/installer/resources/themes/console/light/images/application-icon.png differ
diff --git a/installer/resources/themes/console/light/images/application.png b/installer/resources/themes/console/light/images/application.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7f93ec1e9f1b383fe4c6a3a8159b527683e1f0c
Binary files /dev/null and b/installer/resources/themes/console/light/images/application.png differ
diff --git a/installer/resources/themes/console/light/images/confirmed.png b/installer/resources/themes/console/light/images/confirmed.png
new file mode 100644
index 0000000000000000000000000000000000000000..46c0a29e88069142464d43c35d6059004b49eb33
Binary files /dev/null and b/installer/resources/themes/console/light/images/confirmed.png differ
diff --git a/installer/resources/themes/console/light/images/dropdown.png b/installer/resources/themes/console/light/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..317d64e08161d30d86c3b2e2b44dfb0c062b7889
Binary files /dev/null and b/installer/resources/themes/console/light/images/dropdown.png differ
diff --git a/installer/resources/themes/console/light/images/dropdown_hover.png b/installer/resources/themes/console/light/images/dropdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec983e14ae70dcf0f3a7f64ec47f533d55a8e7f5
Binary files /dev/null and b/installer/resources/themes/console/light/images/dropdown_hover.png differ
diff --git a/installer/resources/themes/console/light/images/errortriangle.png b/installer/resources/themes/console/light/images/errortriangle.png
deleted file mode 100644
index f1730ccbf6280167680a8ac21b942faa282a7f21..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/light/images/errortriangle.png and /dev/null differ
diff --git a/installer/resources/themes/console/light/images/eye.png b/installer/resources/themes/console/light/images/eye.png
new file mode 100644
index 0000000000000000000000000000000000000000..c4d182adbf4ed1140b7c715517e07802758ddeb5
Binary files /dev/null and b/installer/resources/themes/console/light/images/eye.png differ
diff --git a/installer/resources/themes/console/light/images/flower.png b/installer/resources/themes/console/light/images/flower.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e0d080604d72514c65212034588b7a25ab62aa6
Binary files /dev/null and b/installer/resources/themes/console/light/images/flower.png differ
diff --git a/installer/resources/themes/console/light/images/globe.png b/installer/resources/themes/console/light/images/globe.png
new file mode 100644
index 0000000000000000000000000000000000000000..2cef329e0dcdef4754ade9c6e89874602504fcd7
Binary files /dev/null and b/installer/resources/themes/console/light/images/globe.png differ
diff --git a/installer/resources/themes/console/light/images/header_on.png b/installer/resources/themes/console/light/images/header_on.png
deleted file mode 100644
index 8137db9ae1fa1107abbb18cc8492843b7489af33..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/light/images/header_on.png and /dev/null differ
diff --git a/installer/resources/themes/console/light/images/i2plogo.png b/installer/resources/themes/console/light/images/i2plogo.png
index bd64fbcc2fbfdca9aa05eebecdb5d0cfbe04c878..7dbcab1157db6c24b5bbabd05ff576d57a0b4087 100644
Binary files a/installer/resources/themes/console/light/images/i2plogo.png and b/installer/resources/themes/console/light/images/i2plogo.png differ
diff --git a/installer/resources/themes/console/light/images/inbox.png b/installer/resources/themes/console/light/images/inbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..04723d5c1e067ef5a58123d7092aa4039b5fb1f1
Binary files /dev/null and b/installer/resources/themes/console/light/images/inbox.png differ
diff --git a/installer/resources/themes/console/light/images/info.png b/installer/resources/themes/console/light/images/info.png
deleted file mode 100644
index 13f25a9aefc55baaa710c82cf6158c38f890e8e4..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/light/images/info.png and /dev/null differ
diff --git a/installer/resources/themes/console/light/images/itile.png b/installer/resources/themes/console/light/images/itile.png
deleted file mode 100644
index 2031a4e1e2a9b0673b6e29e246ae5f5e2919f234..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/light/images/itile.png and /dev/null differ
diff --git a/installer/resources/themes/console/light/images/magic.png b/installer/resources/themes/console/light/images/magic.png
deleted file mode 100644
index 5568aaac261e0a82f59cc17e8f66aa84614a60ab..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/light/images/magic.png and /dev/null differ
diff --git a/installer/resources/themes/console/light/images/magnet.png b/installer/resources/themes/console/light/images/magnet.png
new file mode 100644
index 0000000000000000000000000000000000000000..08e6ffc9fd6d404b94bc3e61461a11af6abf8591
Binary files /dev/null and b/installer/resources/themes/console/light/images/magnet.png differ
diff --git a/installer/resources/themes/console/light/images/mail_black.png b/installer/resources/themes/console/light/images/mail_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..790f7503f613f502f24fca98f7cbe4e0b230941d
Binary files /dev/null and b/installer/resources/themes/console/light/images/mail_black.png differ
diff --git a/installer/resources/themes/console/light/images/move_bottom.png b/installer/resources/themes/console/light/images/move_bottom.png
index bc0ecd8d7ac712a134ad848f9a4b7e849f71e3c3..d4e6c53da8509e06e7d5a4132c4b6c7adba6960d 100644
Binary files a/installer/resources/themes/console/light/images/move_bottom.png and b/installer/resources/themes/console/light/images/move_bottom.png differ
diff --git a/installer/resources/themes/console/light/images/move_down.png b/installer/resources/themes/console/light/images/move_down.png
index 4c9d311de0a5e96a4a92de63e508b5507ec43a32..b24aa15ceb7b313f17702a2afd6998fb80bfb2fa 100644
Binary files a/installer/resources/themes/console/light/images/move_down.png and b/installer/resources/themes/console/light/images/move_down.png differ
diff --git a/installer/resources/themes/console/light/images/move_top.png b/installer/resources/themes/console/light/images/move_top.png
index 6a05a35ea8be9814f640f996d56e1046d4291c3f..82c1c30aae1d73b22e8190d4638bc7172f67a4a4 100644
Binary files a/installer/resources/themes/console/light/images/move_top.png and b/installer/resources/themes/console/light/images/move_top.png differ
diff --git a/installer/resources/themes/console/light/images/move_up.png b/installer/resources/themes/console/light/images/move_up.png
index 47f79c10888302794696c28e111cd79b16b9930d..006625e0bec57154abe421867929783b02d2111c 100644
Binary files a/installer/resources/themes/console/light/images/move_up.png and b/installer/resources/themes/console/light/images/move_up.png differ
diff --git a/installer/resources/themes/console/light/images/news.png b/installer/resources/themes/console/light/images/news.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0ac1838f9b0b46013a864de623fc3042f1406a1
Binary files /dev/null and b/installer/resources/themes/console/light/images/news.png differ
diff --git a/installer/resources/themes/console/light/images/noise.png b/installer/resources/themes/console/light/images/noise.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f9e5c0b2a6709ed205d9838b2fda8d22faaaf33
Binary files /dev/null and b/installer/resources/themes/console/light/images/noise.png differ
diff --git a/installer/resources/themes/console/light/images/server.png b/installer/resources/themes/console/light/images/server.png
new file mode 100644
index 0000000000000000000000000000000000000000..05cd768e88195e2d24f22f19f6b40155f3aa6317
Binary files /dev/null and b/installer/resources/themes/console/light/images/server.png differ
diff --git a/installer/resources/themes/console/light/images/snowcamo.png b/installer/resources/themes/console/light/images/snowcamo.png
deleted file mode 100644
index a536c222542846f4df3949f666f745c9c3aad927..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/light/images/snowcamo.png and /dev/null differ
diff --git a/installer/resources/themes/console/light/images/sort_down.png b/installer/resources/themes/console/light/images/sort_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..42879e6ed7ea928745136174539f2fa5b9814869
Binary files /dev/null and b/installer/resources/themes/console/light/images/sort_down.png differ
diff --git a/installer/resources/themes/console/light/images/sort_up.png b/installer/resources/themes/console/light/images/sort_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..65a374f68f25068da0f59bb1920748ff00fa3007
Binary files /dev/null and b/installer/resources/themes/console/light/images/sort_up.png differ
diff --git a/installer/resources/themes/console/light/images/tabletitlelight.png b/installer/resources/themes/console/light/images/tabletitlelight.png
deleted file mode 100644
index 9c9092e7372739d8bd1deeabd0c125a81dc29c6e..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/light/images/tabletitlelight.png and /dev/null differ
diff --git a/installer/resources/themes/console/light/images/thumbnail.png b/installer/resources/themes/console/light/images/thumbnail.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc396a4b13ce96aeff33f24d140091ea85245505
Binary files /dev/null and b/installer/resources/themes/console/light/images/thumbnail.png differ
diff --git a/installer/resources/themes/console/light/images/tile2.png b/installer/resources/themes/console/light/images/tile2.png
new file mode 100644
index 0000000000000000000000000000000000000000..5da7a46c54f5db60ec0e800dcfcb353698579bb7
Binary files /dev/null and b/installer/resources/themes/console/light/images/tile2.png differ
diff --git a/installer/resources/themes/console/light/images/warn.png b/installer/resources/themes/console/light/images/warn.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a5878068ea1539ae2fc6ffb7e453d9192aec804
Binary files /dev/null and b/installer/resources/themes/console/light/images/warn.png differ
diff --git a/installer/resources/themes/console/light/mobile.css b/installer/resources/themes/console/light/mobile.css
index 2a62818806f496b589ccfb79b846de9ff523e4ad..92834aedbf96758bcfa2642d3997a55fd9ebbc70 100644
--- a/installer/resources/themes/console/light/mobile.css
+++ b/installer/resources/themes/console/light/mobile.css
@@ -1,6 +1,8 @@
+/* Console Theme "Light" - Mobile Override */
+
 div.routersummaryouter {
      float: none;
-     margin: 0 10px 10px 0;
+     margin: 0 !important;
      position: relative;
      width: auto;
 }
@@ -8,23 +10,109 @@ div.routersummaryouter {
 div.routersummary {
      float: none;
      width: auto;
+     max-width: 600px;
+     margin: 0 auto -6px;
+}
+
+@media screen and (min-width: 1500px) {
+div.routersummary {
+     width: 600px !important;
+}
+
+.routersummary table[id^="sb_"] {
+     width: 600px !important;
+}
+}
+
+#xhr {
+     margin-top: 9px !important;
+}
+
+.routersummary hr:first-child {
+     margin-bottom: 11px;
 }
 
-div.routersummary table {
+.routersummary td, .routersummary h4, .routersummary a {
+     font-size: 9pt !important;
+}
+
+div.routersummary table, table[id^="sb_"] {
      width: 100% !important;
+     margin: -7px 0 -4px !important;
+}
+
+table[id^="sb_"] td {
+     padding: 3px 2px;
+}
+
+table[id^="sb_"] tr:nth-child(even) td {
+     background: #eef;
+     background: rgba(238, 238, 255, 0.4);
+}
+
+table[id^="sb_"] tr:nth-child(odd) td {
+     background: #ddf;
+     background: rgba(221, 221, 255, 0.4);
+}
+
+#sb_services {
+     text-align: center;
+}
+
+#sb_services a {
+     display: inline-block;
+     width: 24% !important;
+     min-width: 100px;
+     box-sizing: border-box;
+     white-space: nowrap;
+     border: none !important;
+}
+
+.routersummary button[type="submit"], .routersummary button[type="cancel"] {
+     margin: 5px 5px 3px !important;
+     padding: 8px 5px !important;
+     min-width: 120px !important;
 }
 
 h1 {
-     margin: 0 10px 10px 0;
+     margin: 14px 0 -1px;
      min-width: 0;
 }
 
 div.news {
-     margin: 0 10px 5px 0;
+     margin: 0 0 -11px;
      min-width: 0;
 }
 
 div.main {
-     margin: 10px 10px 20px 0;
+     margin: 10px 0 0;
      min-width: 0;
 }
+
+.sorry {
+     margin-left: 0 !important;
+}
+
+@media screen and (min-width: 1500px) {
+
+h1 {
+    margin: 14px 0 -1px !important;
+}
+
+div.news {
+     margin: 0 0 -11px !important;
+}
+
+div.main {
+     margin: 10px 0 0 !important;
+     min-width: 0;
+}
+
+.sorry {
+     margin-left: 0 !important;
+}
+}
+
+.confignav {
+     padding-bottom: 10px !important;
+}
diff --git a/installer/resources/themes/console/midnight/console.css b/installer/resources/themes/console/midnight/console.css
index 383697365ef23322a21df685b658590790c58ac6..b62e1d99dd28d3d9f253ba566853dfebd6fb9823 100644
--- a/installer/resources/themes/console/midnight/console.css
+++ b/installer/resources/themes/console/midnight/console.css
@@ -1,1432 +1,6311 @@
 /* I2P Theme: Midnight */
-/* Description: Minimalist Midnight Blue, based on Classic theme. */
+/* Description: Dark blue with chrome highlights */
+/* Thanks to Florian Kuhlmann for the hatface images. [http://www.flickr.com/photos/floriankuhlmann/] */
+/* Additional thanks to NASA for the planet earth image */
 /* Author: dr|z3d */
 
-
 body {
-     margin: 2px 0 0 5px;
+     margin: 5px 0 0 0;
      padding: 0;
-     text-align: left;
-     background: #000;
-     color: #eef;
-     font: 8pt/137% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+     text-align: center;
+     background: #001;
+     background: linear-gradient(to bottom, #001, #000);
+     background-size: auto 2px;
+     color: #c9ceff;
+     font: 8.5pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
 }
 
-.hide {
+/* preload button mouseovers */
+body {
+     background: linear-gradient(to bottom, #001, #000),
+     url(/themes/console/images/buttons/clean_hover.png) no-repeat,
+     url(/themes/console/images/buttons/configure_hover.png) no-repeat,
+     url(/themes/console/images/buttons/delete_hover.png) no-repeat,
+     url(/themes/console/images/buttons/restart_hover.png) no-repeat,
+     url(/themes/console/images/buttons/restore_hover.png) no-repeat,
+     url(/themes/console/images/buttons/search_hover.png) no-repeat,
+     url(/themes/console/images/buttons/shutdown_hover.png) no-repeat,
+     url(/themes/console/images/buttons/update_hover.png) no-repeat, #000;
+     background-size: auto 2px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
+}
+
+.hide, .hideme {
      display: none;
 }
 
+small {
+     font-size: 9pt;
+}
+
 div.clearer {
      clear: left;
      height: 0;
      line-height: 0;
+     margin-bottom: -16px;
 }
 
-img {
-     border: none;
+::selection {
+     background: #22296f !important;
+     color: white;
 }
 
-pre {
-     overflow: auto;
-     font-size: 8pt !important;
-     width: 95%;
-     padding-top: 10px;
+::-moz-selection {
+     background: #22296f !important;
+     color: white;
 }
 
-/* http proxy error sidepanel */
+/* standard buttons and inputs */
 
-div.logo {
-     float: left;
-     position-relative: top 15px ;
-     width: 200px;
-     margin: 0 0 0 20px;
-     padding: 10px 5px;
-     text-align: center;
-     border: 1px solid #99f;
-     background-color: #00000A;
-     -moz-box-shadow: inset 0 0 0 2px #00000A;
-     -khtml-box-shadow: inset 0 0 0 2px #00000A;
-     border-radius: 3px;
+button, input[type="submit"], input[type="reset"], select {
+     filter: drop-shadow(0 0 1px #115);
+     box-shadow: inset 0 0 0 1px #000020;
 }
 
-div.logo hr {
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border: 0 solid #99f;
-     margin: 8px -5px;
+button, button:visited, input[type="submit"], input[type="reset"] {
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     border: 1px solid #3e3f8f;
+     border-bottom-color: #14144f;
+     border-right-color: #14144f;
+     border-radius: 2px;
+     padding: 5px 4px;
+     text-decoration: none;
+     margin: 2px 3px;
+     text-align: center;
+     vertical-align: middle;
+     min-width: 75px;
+     background: #000;
+     background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%);
+     color: #4e47bf;
 }
 
-div.logo a:link, div.logo a:visited {
-     text-shadow: 0 0 1px rgba(0, 0, 32, 0.3);
+button:hover, button:focus, input[type="submit"]:focus, input[type="reset"]:focus {
+     border: 1px solid #652787;
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
+     background: #000;
+     color: #652787;
+     cursor: pointer;
 }
 
-div.logo a:active {
-     text-shadow: 0 0 1px rgba(255, 96, 0, 0.5);
-     color: #f60;
+button:active, input[type="submit"]:active, input[type="reset"]:active {
+     border: 1px solid #652787;
+     background: #652787;
+     color: #c9ceff;
+     box-shadow: inset 0 0 0 1px #000;
 }
 
-div.logo a:hover {
-     text-shadow: 0 0 1px rgba(128, 0, 0, 0.5);
-     color: #f90;
+:focus, :active, :checked {
+     outline: none !important;
 }
 
-/* http proxy error warning */
+input {
+     border: 1px solid #3e3f8f;
+     border-bottom-color: #14144f;
+     border-right-color: #14144f;
+     background: #000;
+     color: #443da0;
+     margin: 5px;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     padding: 3px 2px;
+     text-decoration: none;
+     min-width: 110px;
+     border-radius: 2px;
+}
 
-div.warning {
-     margin: 25px 25px 15px 260px;
-     padding: 0 20px 20px 75px;
-     background: #001;
-     border: 1px solid #99f;
-     text-align: left;
-     color: inherit;
-     background-image:url("../images/itoopie_sm.png");
-     background-position: 12px center;
-     background-repeat:no-repeat;
-     -moz-box-shadow: inset 0 0 0 1px #f60;
-     -khtml-box-shadow: inset 0 0 0 1px #f60;
-     border-radius: 3px 3px 0 0;
+input:hover, input:focus {
+     background: #000;
+     color: #652787;
+     border: 1px solid #652787;
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
+     cursor: pointer;
 }
 
-div.warning a:link {
-     color: #f60;
-     text-shadow: 0 0 1px rgba(255, 96, 0, 0.3);
+input:active {
+     background: #000;
+     color: #c9ceff;
+     border: 1px solid #652787;
+     box-shadow: inset 0 0 0 1px #000;
 }
 
-div.warning a:visited {
-     color: #f90;
+input[type=text], input[type=password] {
+     background: #000;
+     color: #c9ceff;
+     margin: 5px 10px;
+     padding: 4px 2px;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     border: 1px solid #443da0 !important;
+     text-decoration: none;
+     border-radius: 2px;
+     box-shadow: inset 1px 1px 1px 0 #000;
+     cursor: text;
 }
 
-div.warning a:hover {
-     color: #f90;
-  text-shadow: 0 0 1px rgba(255, 128, 0, 0.5);
+textarea {
+     color: #c9ceff;
+     padding: 5px;
+     margin: 10px;
+     border-radius: 2px;
+     font: 8.5pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     min-height: 100px;
+     min-width: 97%;
+     width: calc(100% - 15px);
+     text-align: left;
 }
 
-div.warning a:active {
-     color: #900;
+textarea[cols="70"], textarea[name="levels"] {
+     width: calc(100% - 20px);
 }
 
-div.warning hr {
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border: 0 solid #99f;
-     margin: 10px 0;
+button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner  {
+     outline: none;
+     border: none;
 }
 
-div.warning h3 {
-     border: 0;
-     border-bottom: 1px solid #99f;
-     padding-bottom: 10px;
-     padding-left: 0;
-     text-transform: capitalize;
-     font-size: 11pt;
-     background: none !important;
-     border-radius: 0 !important;
+input[type=text], input[type=password], textarea {
+     color: #7670c2 !important;
+     background: linear-gradient(to bottom, #000, #000019);
+     box-shadow: inset 0 0 3px 3px #000;
+     border: 1px solid #3e3f8f;
+     padding: 4px;
 }
 
-.warning p {
-     padding: 0;     
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
+     color: #c9ceff !important;
+     background: #000;
+     border: 1px solid #443da0;
+     box-shadow: 0 0 0 1px rgba(101, 39, 135, 0.5);
+     filter: drop-shadow(0 0 1px #99f);
+     transition: filter ease 0.3s 0s;
 }
 
-.warning b {
-     font-size: 8.5pt;
+input[type=image] {
+     min-width: 0;
 }
 
-.proxyfooter {
-     border: 1px solid #99f;
-     margin: -16px 25px 20px 260px;
-     border-radius: 0 0 3px 3px;
-     background: #002;  
+input[type="checkbox"] {
+     min-width: 16px !important;
 }
 
-.proxyfooter p {
-     font-size: 7pt;
-     text-align: right;
-     padding: 0 5px;
-     margin: 3px 3px 5px 3px;
-     line-height: 110%;
+input[type="checkbox"], .optbox {
+     min-width: 16px !important;
+     vertical-align: sub;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */
+     background: none;
 }
 
-.proxyfooter i {
-     font-style: normal !important;     
+input[type="checkbox"]:hover, .optbox:hover, input[type="checkbox"]:focus, .optbox:focus {
+     box-shadow: 0 0 2px 1px #99f;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) drop-shadow(0 0 3px #99f);
 }
-/* console error messages */
 
-div.sorry {
-     padding: 20px 20px 20px 70px;
-     background: #003;
-     margin: 0 5px 0 200px;
-     border: 1px solid #99f;
-     border-top: 0;
-     text-align: justify;
-     -moz-box-shadow: inset 0 0 0 1px #d00;
-     word-wrap: break-word;
-     font-weight: bold;
-     color: #eef;
-     background-image: url("../images/errortriangle.png");
-     background-position: 15px center;
-     background-repeat: no-repeat;
-     border-radius: 0 0 3px 3px;
+input[type="checkbox"][disabled]:hover, input[type="checkbox"][disabled]:focus,
+input[type="radio"][disabled]:hover, input[type="radio"][disabled]:focus {
+     box-shadow: none;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%);
 }
 
-div.sorry hr {
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border: 0;
-     margin: 10px 0;
+label {
+     cursor: pointer;
 }
 
-div.toolbar {
-     margin: 0em 0em 2em 0em;
-     font-weight: bold;
-     display: none !important;
+.main#config_clients label[for="0"] {
+     cursor: default;
 }
 
-div.routersummaryouter {
-     float: left;
-     width: 200px;
-     margin: 0 0 5px 0;
+input[type="file"]  {
+     box-shadow: none;
+     border: none;
+     background: none;
+     color: #c9ceff;
      padding: 0;
-     border: 0;
-     clear: left; /* fixes a bug in Opera */
-     position: absolute;/* so no interference with /home app icons */
+     cursor: pointer;
+     margin: 5px 10px;
+     font-weight: normal;
 }
 
-div.routersummary {
-     background: #00000A;
-     width: 190px;
-     color: inherit;
-     margin: 0;
-     padding: 6px 1px 8px 1px;
-     text-align: center !important;
-     border: 1px solid #99f;
-     font-size: 8pt;
-     word-wrap: break-word;
-     font: 9pt/125%;
-     -moz-box-shadow: inset 0 0 0 1px #00000A;
-     border-radius: 3px;
+input[type="file"]:hover, input[type="file"]:active {
+     color: #652787;
 }
 
-div.routersummary input[type=text] {
-     text-align: right !important;
+input[name="refreshInterval"] {
+     margin-right: 3px;
+     margin-left: 0;
+     width: 40px;
+     text-align: right;
 }
 
-div.routersummary hr {
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border-bottom: 0 solid #99f;
-     margin: 8px -1px 7px -1px;
+input:disabled {
+     cursor: default;
 }
 
-div.routersummary hr:last-child {
-     display: none;
+input[type="text"]:disabled, input[readonly], input[readonly]:focus {
+     color: #443da0 !important;
+     box-shadow: none;
+     filter: none;
 }
 
-div.routersummary h3 {
-     border: 0 solid #f00;
-     font-size: 8.5pt;
-     letter-spacing: 0.01em;
-     margin: -6px 0 -6px 0;
-     padding: 3px 0 2px;
-     background: #002;
-     text-transform: uppercase;
-     background: #002 url("images/titles.png") repeat-x !important;
-     background-position: center center !important;
+input[class="check"] { /* nudge "check for updates" button into alignment on /configupdate */
+     margin-left: 10px !important;
 }
 
-div.routersummary h3 a, div.routersummary h4 a {
-     text-decoration: none;
-     line-height: 105%;
+select {
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     background: #000 url(images/dropdown.png) right center no-repeat !important;
+     color: #4e47bf;
+     margin: 5px 10px;
+     border: 1px solid #3e3f8f;
+     border-bottom-color: #14144f;
+     border-right-color: #14144f;
+     border-radius: 2px;
+     min-width: 110px;
+     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-weight: bold;
+     padding: 4px 16px 4px 4px !important;
+     cursor: pointer;
+     overflow: hidden;
+     text-overflow: ellipsis;
 }
 
-div.routersummary h4 {
-     border: 0 solid #f00;
-     border-bottom: 0 !important;
-     font-size: 7.5pt;
-     letter-spacing: 0.05em;
-     margin: -6px 0 -6px 0 !important;
-     padding: 5px 2px;
-     background: #000;
-     text-transform: capitalize;
-     text-decoration: none !important;
-     color: #2b2;
-     line-height: 100% !important;
+select:focus, select:hover {
+     color: #652787;
+     border: 1px solid #652787;
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
 }
 
-div.routersummary ul {
-     text-align: left !important;
+select option {
+     font-weight: normal;
+     font-size: 9.5pt !important;
+     box-shadow: inset 0 0 20px 20px #000;
 }
 
-div.routersummary table {
-     border: 0;
-     text-align: center !important;
-     margin: -5px 0 5px 2px;
-     width: 186px !important;
-     overflow: hidden;
-     padding: 0 -12px;
-     background-image: none !important;
-     background-color: transparent !important;
+select option:hover, select option:focus, select option:checked {
+     box-shadow: inset 0 0 20px 20px #652787;
 }
 
-div.routersummary a {
-     line-height: 105%;
+img[src="dropdown.png"] {
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%);
 }
 
-div.routersummary img:first-child {
-     opacity: 0.8;
+select:hover, select:active {
+     background: #000 url(images/dropdown_hover.png) right center no-repeat !important;
 }
 
-div.routersummary img:hover:first-child {
-     opacity: 1;
+select:focus {
+     background: #000 url(images/dropdown_hover.png) right center no-repeat !important;
 }
 
-div.routersummary table img {
-     opacity: 1 !important;
+select::-ms-expand {
+     display: none;
 }
 
-div.routersummary tr {
-     background-image: none !important;
-     background-color: transparent !important;
-     border: 0 !important;
+/* buttons (experimental) */
+
+input[type="submit"], input[type="reset"], button {
+     background-size: 14px 14px, 100% 100%;
+     filter: drop-shadow(0 0 1px #115);
+     box-shadow: inset 0 0 0 1px #000020;
+     min-width: 0 !important;
 }
 
-div.routersummary td:first-child {
-     max-width: 90px;
-     overflow: hidden;
+input[type="submit"]:hover, input[type="reset"]:hover, button:hover {
+     background-blend-mode: normal;
+     box-shadow: inset 0 1px 1px #bbf;
 }
 
-.routersummary form {
-     margin: 0;
+input[type="submit"]:active, input[type="reset"]:active, button:active {
+     background-blend-mode: luminosity !important;
+     box-shadow: inset 0 0 0 1px #000 !important;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important;
 }
-     
-     
-     
-div.newsheadings {
-     text-align: right;
-     margin: 0 7px 0 -20px;
-     line-height: 110%;
+
+input.accept, button.accept {
+     background: url(/themes/console/images/buttons/yes.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.newsheadings li {
-     list-style: none outside url('images/newsbullet_mini.png');
-     margin: 0 -4px 2px 8px;
-     line-height: 115%;
-     font-weight: normal !important;
+input.accept:hover, button.accept:hover,
+input.accept:focus, button.accept:focus {
+     background: #000 url(/themes/console/images/buttons/yes.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.tunnels table{
-     margin: -2px 0 -4px 2px !important;
-     text-align: center !important;
-     width: 186px;
+input.accept:active, button.accept:active {
+     background: #652787 url(/themes/console/images/buttons/yes.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-.tunnels tr {
-     padding: 4px 0 !important;
+input.accept[value^="Unban"], button.accept[value^="Unban"] {
+     background: url(/themes/console/images/buttons/unban.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-.tunnels td:first-child {
-     width: 16px;
-     padding-right: 2px;
+input.accept[value^="Unban"]:hover, button.accept[value^="Unban"]:hover,
+input.accept[value^="Unban"]:focus, button.accept[value^="Unban"]:focus {
+     background: #000 url(/themes/console/images/buttons/unban.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-.tunnels td:last-child {
-     width: 16px;
-     text-align: right;
-     margin-right: -2px;
-     padding-right: 0;
+input.accept[value^="Unban"]:active, button.accept[value^="Unban"]:active {
+     background: #652787 url(/themes/console/images/buttons/unban.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.refresh {
-     margin-top: 10px !important;
-     margin-bottom: 10px !important;
-     padding: 2px 0 !important;
+input.accept[value^="Create"], button.accept[value^="Create"] {
+     background: url(/themes/console/images/buttons/create.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.routersummary p {
-     padding: 0;
+input.accept[value^="Create"]:hover, button.accept[value^="Create"]:hover,
+input.accept[value^="Create"]:focus, button.accept[value^="Create"]:focus {
+     background: #000 url(/themes/console/images/buttons/create.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.routersummary a {
+input.accept[value^="Create"]:active, button.accept[value^="Create"]:active {
+     background: #652787 url(/themes/console/images/buttons/create.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.routersummary a:link, div.routersummary a:visited {
-     text-shadow: 0 0 1px rgba(0, 0, 32, 0.3);
+input.accept[value^="Filter"], button.accept[value^="Filter"] {
+     background: url(/themes/console/images/buttons/filter.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.routersummary a:hover {
-     text-shadow: 0 0 1px rgba(255, 96, 0, 0.7);
-     color: #f60;
+input.accept[value^="Filter"]:hover, button.accept[value^="Filter"]:hover,
+input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus {
+     background: #000 url(/themes/console/images/buttons/filter.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.routersummary td {
-     padding: 0 1px;
-     background-image: none !important;
-     border: 0 !important;
+input.accept[value^="Filter"]:focus, button.accept[value^="Filter"]:focus {
+     background: #652787 url(/themes/console/images/buttons/filter.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.main {
-     margin: 0 5px 5px 200px;
-     padding: 5px 15px 10px 15px;
-     background: #00000A;
-     border: 1px solid #99f;
-     border-top: 0;
-     text-align: left;
-     color: #eef;
-     min-width: 590px;
-     background: #000 url(images/scarface.jpg) right bottom no-repeat !important;
-     border-radius: 0 0 3px 3px;
+input.add, button.add {
+     background: url(/themes/console/images/buttons/add.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.main ul {
-     margin: 5px 0;
+input.add:hover, button.add:hover,
+input.add:focus, button.add:focus {
+     background: #000 url(/themes/console/images/buttons/add.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.main li {
-     padding: 0 0 5px 0;
-     list-style: square;
-     word-wrap: break-word;
-     margin-right: 20px;
+input.add:active, button.add:active {
+     background: #652787 url(/themes/console/images/buttons/add.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.main li:first-child {
-     padding-top: 15px;
+input.add[value^="Adjust"], button.add[value^="Adjust"] {
+     background: url(/themes/console/images/buttons/edit2.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.main hr:last-child {
-     margin: 15px 0 10px 0;
+input.add[value^="Adjust"]:hover, button.add[value^="Adjust"]:hover,
+input.add[value^="Adjust"]:focus, button.add[value^="Adjust"]:focus {
+     background: #000 url(/themes/console/images/buttons/edit2.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.main textarea {
-     width: 98% !important;
-     margin: 2px 0 2px 5px;
-     min-height: 96px;
-     background: #001;
-     color: #eef;
+input.add[value^="Adjust"]:active, button.add[value^="Adjust"]:active {
+     background: #652787 url(/themes/console/images/buttons/edit2.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.main h2 {
-     margin-bottom: 5px;
-     padding-bottom: 10px !important;
+input.cancel, button.cancel {
+     background: url(/themes/console/images/buttons/no.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-/*
-div.main h2:last-child {
-     margin: 20px 0 0 !important;     
-} 
-*/
+input.cancel:hover, button.cancel:hover,
+input.cancel:focus, button.cancel:focus {
+     background: #000 url(/themes/console/images/buttons/no.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
+}
 
-table h2 {
-     padding-bottom: 15px;
+input.cancel:active, button.cancel:active {
+     background: #652787 url(/themes/console/images/buttons/no.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.welcome {
-     margin-top: 5px;
+input.accept[value^="Show"], button.accept[value^="Show"],
+input.check[value^="View"], button.check[value^="View"] {
+     background: url(/themes/console/images/buttons/show.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.main h2:first-child, div.main h3:first-child {
-/*     margin: 5px 10px -10px; */
+input.accept[value^="Show"]:hover, button.accept[value^="Show"]:hover,
+input.check[value^="View"]:hover, button.check[value^="View"]:hover,
+input.accept[value^="Show"]:focus, button.accept[value^="Show"]:focus,
+input.check[value^="View"]:focus, button.check[value^="View"]:focus {
+     background: #000 url(/themes/console/images/buttons/show.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.wideload h2 {
-     margin-bottom: 10px !important;
+input.accept[value^="Show"]:active, button.accept[value^="Show"]:active,
+input.check[value^="View"]:active, button.check[value^="View"]:active {
+     background: #652787 url(/themes/console/images/buttons/show.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.wideload h3:first-child {
-     margin-top: 0 !important;
+input.cancel[value^="Hide"], button.cancel[value^="Hide"],
+input.delete[value^="Do not view"], button.delete[value^="Do not view"] {
+     background: url(/themes/console/images/buttons/hide.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.wideload h3 {
-     margin-top: 15px !important;
-     margin-bottom: 10px !important;
+input.cancel[value^="Hide"]:hover, button.cancel[value^="Hide"]:hover,
+input.delete[value^="Do not view"]:hover, button.delete[value^="Do not view"]:hover,
+input.cancel[value^="Hide"]:focus, button.cancel[value^="Hide"]:focus,
+input.delete[value^="Do not view"]:focus, button.delete[value^="Do not view"]:focus {
+     background: #000 url(/themes/console/images/buttons/hide.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.wideload p {
-     margin-top: 5px;
+input.cancel[value^="Hide"]:active, button.cancel[value^="Hide"]:active,
+input.delete[value^="Do not view"]:active, button.delete[value^="Do not view"]:active {
+     background: #652787 url(/themes/console/images/buttons/hide.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.wideload table {
-     margin-top: 5px !important;     
+input.check, button.check {
+     background: url(/themes/console/images/buttons/yes.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.news {
-     margin: -1px 5px 0 200px;
-     background: #001;
-     border: 1px solid #99f;
-     text-align: right;
-     color: #99f;
-     min-width: 600px;
-     padding: 3px 8px 3px;
-     -moz-box-shadow: inset 0 0 4px 2px #00000A;
-     font-size: 8pt;
-     background: #001 url("images/planet.png")no-repeat scroll bottom right;
+input.check:hover, button.check:hover,
+input.check:focus, button.check:focus {
+     background: #000 url(/themes/console/images/buttons/yes.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-/* convert the list entry to our title */
+input.check:active, button.check:active {
+     background: #652787 url(/themes/console/images/buttons/yes.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
+}
 
-div.news li {
-     text-align: justify;
-     list-style: none;
-     margin: 15px 15px -10px -20px;
-     padding: 0 0 15px 0;
-     border-bottom: 1px dotted #99f;
-     border-top: 0 solid #99f;
-     padding: 3px 5px 5px 0;
-     font-size: 10pt;
-     color: #eef;
-     text-transform: capitalize;
-     font-weight: bold;
+input.check[value$="updates"], button.check[value$="updates"] {
+     background: url(/themes/console/images/buttons/update.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.news h3 {
-     background: none !important;
-     text-align: left;
-     border: none !important;
-     padding-left: 0;
-     padding-top: 0;
-     border-bottom: 1px dotted !important;
-     -moz-box-shadow: none;
-     -hktml-box-shadow: none;
-     box-shadow: none;
-     font-size: 10pt !important;
-     letter-spacing: 0.05em;
-     text-transform: uppercase !important;
-     margin: 15px 10px -5px;
-     padding: 5px 0 5px;
+input.check[value$="updates"]:hover, button.check[value$="updates"]:hover,
+input.check[value$="updates"]:focus, button.check[value$="updates"]:focus {
+     background: #000 url(/themes/console/images/buttons/update_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.news p {
-     color: #eef;
-     font-size: 8pt;
-     margin-bottom: -10px;
-     margin-top: 10px;
+input.check[value$="updates"]:active, button.check[value$="updates"]:active {
+     background: #652787 url(/themes/console/images/buttons/update_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.news p:last-child {
-     margin-bottom: 10px;
+input.delete, button.delete {
+     background: url(/themes/console/images/buttons/delete.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.news a:link {
-     color: #aaf;
-     text-shadow: 0 0 1px rgba(128, 128, 48, 0.3);
+input.delete:hover, button.delete:hover,
+input.delete:focus, button.delete:focus {
+     background: #000 url(/themes/console/images/buttons/delete_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.news a:visited {
-     color: #99f !important;
-     text-shadow: 0 0 1px rgba(128, 128, 48, 0.3);
+input.delete:active, button.delete:active {
+     background: #652787 url(/themes/console/images/buttons/delete_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.news hr {
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border: 0 solid #99f;
-     margin: 10px 0 2px 0;
+input.delete[value^="Ban"], button.delete[value^="Ban"] {
+     background: url(/themes/console/images/buttons/ban.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.confignav {
-     padding: 14px 0 15px;
-     background: #000018;
-     margin: -6px -16px 5px -16px;
-     border: 1px solid #99f;
-     -moz-box-shadow: inset 0 0 4px 2px #00000A;
+input.delete[value^="Ban"]:hover, button.delete[value^="Ban"]:hover,
+input.delete[value^="Ban"]:focus, button.delete[value^="Ban"]:focus {
+     background: #000 url(/themes/console/images/buttons/ban.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.configure {
-     margin: 15px -20px;
-     padding: 0 20px 0 20px;
+input.delete[value^="Ban"]:active, button.delete[value^="Ban"]:active {
+     background: #652787 url(/themes/console/images/buttons/ban.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.configure hr {
-     margin: 15px 0;
+input.download, button.download {
+     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.configure table {
-     font-size: 8pt;
-     font-weight: bold;
-     border: 1px solid #99f;
+input.download:hover, button.download:hover,
+input.download:focus, button.download:focus {
+     background: #000 url(/themes/console/images/buttons/download.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.configure tr, div.configure td {
-     padding: 5px;
+input.download:active, button.download:active {
+     background: #652787 url(/themes/console/images/buttons/download.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.configure tr {
-     -moz-box-shadow: inset 0 0 1px 0 #000;
+input.download[value^="Join"], button.download[value^="Join"] {
+     background: url(/themes/console/images/buttons/users.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.configure li:first-child, div.main li:first-child {
-     margin-top: 0;
-     padding-top: 0;
+input.download[value^="Join"]:hover, button.download[value^="Join"]:hover,
+input.download[value^="Join"]:focus, button.download[value^="Join"]:focus {
+     background: #000 url(/themes/console/images/buttons/users.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.configure li:last-child {
-     margin-bottom: -5px;
+input.download[value^="Join"]:active, button.download[value^="Join"]:active {
+     background: #652787 url(/themes/console/images/buttons/users.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.configure h2:first-child {
-     margin-top: 15px;
+input.download[value$="from File"], button.download[value$="from File"],
+input.download[value$="from file"], button.download[value$="from file"] {
+     background: url(/themes/console/images/buttons/from-file.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-.configure form {
-     margin: 20px 15px;     
+input.download[value$="from file"]:hover, button.download[value$="from file"]:hover,
+input.download[value$="from file"]:focus, button.download[value$="from file"]:focus {
+     background: #000 url(/themes/console/images/buttons/from-file.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
-.sidebarconf button {
-     margin: 2px;
-     padding: 1px;
-     min-width: 0;
-     background: none;
+
+input.download[value$="from file"]:active, button.download[value$="from file"]:active {
+     background: #652787 url(/themes/console/images/buttons/from-file.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-.sidebarconf th:nth-child(1) {
-     text-align: center;     
+input.download[value^="Dump"], button.download[value^="Dump"] {
+     background: url(/themes/console/images/buttons/dump-threads.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-.sidebarconf th:nth-child(2) {
-     text-align: left;     
+input.download[value^="Dump"]:hover, button.download[value^="Dump"]:hover,
+input.download[value^="Dump"]:focus, button.download[value^="Dump"]:focus {
+     background: #000 url(/themes/console/images/buttons/dump-threads.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-.sidebarconf td:first-child {
-     width: 60px;
-     text-align: right;
-     padding-right: 50px;
+input.download[value^="Dump"]:active, button.download[value^="Dump"]:active {
+     background: #652787 url(/themes/console/images/buttons/dump-threads.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-.sidebarconf td {
-     font-weight: bold;
-     font-size: 9pt;  
+input.go, button.go, input[value="GO"] {
+     background: url(/themes/console/images/buttons/go.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-.sidebarconf td:nth-child(3), .sidebarconf td:nth-child(4) {
-     width: 70px;
-     padding: 0;  
+input.go:hover, button.go:hover, input[value="GO"]:hover,
+input.go:focus, button.go:focus, input[value="GO"]:focus {
+     background: #000 url(/themes/console/images/buttons/go.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-.sidebarconf td:nth-child(3) {
-     text-align: right;
-     padding-left: 50px;
+input.go:active, button.go:active, input[value="GO"]:active {
+     background: #652787 url(/themes/console/images/buttons/go.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-.sidebarconf td:nth-child(4) {
-     text-align: left;
-     padding-right: 50px;
+input.go[value^="Create"], button.go[value^="Create"] {
+     background: url(/themes/console/images/buttons/create-file.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-.topshimten {
-     margin-top: 15px;
-     margin-bottom: 15px;
+input.go[value^="Create"]:hover, button.go[value^="Create"]:hover,
+input.go[value^="Create"]:focus, button.go[value^="Create"]:focus {
+     background: #000 url(/themes/console/images/buttons/create-file.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.messages {
-     padding: 10px;
-     background: #000;
-     border: 1px solid #99f;
-     border-right: 0;
-     margin: -6px -15px 10px -16px;
-     text-align: center;
-     font-size: 9pt;
-     font-weight: bold;
-     color: #474;
-     -moz-box-shadow: inset 0 0 4px 2px #00000A;
-     background: url("../images/info_rhombus.png") no-repeat scroll 18px center #000;
+input.go[value^="Create"]:active, button.go[value^="Create"]:active {
+     background: #652787 url(/themes/console/images/buttons/create-file.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.messages li, div.messages ul {
-     padding: 10px 0 0 5px;
-     margin: -10px 0 0 0;
-     list-style: none;
+input.reload, button.reload {
+     background: url(/themes/console/images/buttons/restore.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-div.main li b{
-     color: #bb7 !important;
-     letter-spacing: 0.07em;
-     font-size: 9pt;
+input.reload:hover, button.reload:hover,
+input.reload:focus, button.reload:focus {
+     background: #000 url(/themes/console/images/buttons/restore_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.error {
-     color: #d00;
-     background: url("../images/errortriangle.png") no-repeat scroll 5px center #000;
-     padding: 10px 10px 10px 45px;
-     text-align: left;
+input.reload:active, button.reload:active {
+     background: #652787 url(/themes/console/images/buttons/restore_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-div.notice {
-     font-style: italic;
+input.reload[value$="restart"], button.reload[value$="restart"] {
+     background: url(/themes/console/images/buttons/restart.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
+
 }
 
-h1,h2,h3 {
-     border-radius: 3px;     
+input.reload[value$="restart"]:hover, button.reload[value$="restart"]:hover,
+input.reload[value$="restart"]:focus, button.reload[value$="restart"]:focus {
+     background: #000 url(/themes/console/images/buttons/restart_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-h1 {
-     font-size: 18pt;
-     text-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
-     text-align: left;
-     border: 1px solid #99f;
-     padding: 13px;
-     margin: 5px 5px 0 200px;
-     line-height: 93%;
-     text-transform: uppercase;
-     letter-spacing: 0.3em;
-     background: #000008;
-     min-width: 600px;
-     line-height: 100%;
-     color: #fff;
-     border-radius: 3px 3px 0 0;
+input.reload[value^="Update"], button.reload[value^="Update"] {
+     background: url(/themes/console/images/buttons/update.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
+
 }
 
-span.newtab {
-     text-align: right;
-     font-size: 8pt;
-     float: right;
-     letter-spacing: 0;
+input.reload[value^="Update"]:hover, button.reload[value^="Update"]:hover,
+input.reload[value^="Update"]:focus, button.reload[value^="Update"]:focus {
+     background: #000 url(/themes/console/images/buttons/update_hover.png) 6px center no-repeat !important;
 }
 
-/* opera targetted hack */
-x:-o-prefocus, span.newtab {
-     margin-top: -25px;
+input.reload[value^="Update"]:active, button.reload[value^="Update"]:active {
+     background: #652787 url(/themes/console/images/buttons/update_hover.png) 6px center no-repeat !important;
 }
 
-h2 {
-     font-size: 12pt;
-     padding: 10px 10px 10px 10px;
-     border: 1px solid #77f;
-     border-top: 1px solid #99f;
-     border-left: 1px solid #99f;
-     background: #000008;
-     text-transform: uppercase;
-     letter-spacing: 0.07em;
-     
+input.reload[value="Force GC"], button.reload[value="Force GC"] {
+     background: url(/themes/console/images/buttons/clean.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-h3 {
-     font-size: 10pt;
-     padding: 7px 10px;
-     border: 1px solid #99f;
-     border-right: 1px solid #77f;
-     border-bottom: 1px solid #77f;
-     letter-spacing: 0.05em;
-     font-weight: bold !important;
-     text-transform: uppercase;
+input.reload[value="Force GC"]:hover, button.reload[value="Force GC"]:hover,
+input.reload[value="Force GC"]:focus, button.reload[value="Force GC"]:focus {
+     background: #000 url(/themes/console/images/buttons/clean_hover.png) 6px center no-repeat !important;
 }
 
-h3 a {
-     font-weight: bold !important;
+input.reload[value="Force GC"]:active, button.reload[value="Force GC"]:active {
+     background: #652787 url(/themes/console/images/buttons/clean_hover.png) 6px center no-repeat !important;
 }
 
-h2, h3, .confignav {
-     background: #002 url("images/tinytitles.png") center center repeat-x !important;
-     margin-bottom: 10px;
+input.stop, button.stop {
+     background: url(/themes/console/images/buttons/shutdown.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-thead, tfoot, th {
-     background: #002 url("images/titles.png") repeat-x center center !important;
+input.stop:hover, button.stop:hover,
+input.stop:focus, button.stop:focus {
+     background: #000 url(/themes/console/images/buttons/shutdown_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-table {
-     border-collapse: collapse;
-     border: 1px solid #99f;
-     margin: 15px 0 5px 0;
-     cell-padding: 1px;
-     font-size: 8pt;
-     background: #000;
-     width: 100%;
+input.stop:active, button.stop:active {
+     background: #652787 url(/themes/console/images/buttons/shutdown.png) 6px center no-repeat !important;
 }
 
-table hr {
-     padding: 0 0;
-     color: #000;
-     background: #000;
-     border: 0 solid #99f;
-     margin: 0 -5px;
-     height: 1px;
+button.search {
+     background: url(/themes/console/images/buttons/search.png) 6px center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px 14px, 100% 100% !important;
+     padding: 5px 7px 5px 23px !important;
 }
 
-table tt {
-     font-size: 8pt;
+button.search:hover, button.search:focus {
+     background: #000 url(/themes/console/images/buttons/search_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-th {
-     background-color: #000;
-     padding: 8px 2px;
-     text-align: center;
-     border-bottom: 1px solid #99f;
-     font-size: 8pt !important;
+button.search:active {
+     background: #652787 url(/themes/console/images/buttons/search_hover.png) 6px center no-repeat !important;
+     background-size: 14px 14px !important;
 }
 
-/* begin home page */
+/* client/plugin/webapps buttons aka project "X" */
 
-/*
-#appsummary {
-     clear: none;
-     float: none;
-     left: 10px;
-     margin: 0;
-     position: absolute;
-     top: 10px;
+button.control {
+     padding: 12px !important;
+     font-size: 0 !important;
+     text-indent: -99999px !important;
+     background-size: 16px 16px, 100% 100% !important;
 }
 
-#homemain {
-     left: 217px;
-     margin: 0 10px 10px 0;
-     position: absolute;
-     text-align: center;
-     top: 10px;
+button.accept.control {
+     background: url(/themes/console/images/buttons/Xstart.png) center center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
 }
 
-#homenews {
-     margin: 0 10px 5px 0;
+button.accept.control:hover, button.accept.control:focus {
+     background: #000 url(/themes/console/images/buttons/Xstart.png) center center no-repeat !important;
 }
 
-h2.app {
-     border-radius: 8px;
-     margin: 1px 10px 15px 0 !important;
+button.accept.control:active {
+     background: #652787 url(/themes/console/images/buttons/Xstart.png) center center no-repeat !important;
 }
-*/
 
-h4.app, h4.app2 {
-     font-size: 11pt;
-     padding: 5px;
-     border: 1px solid #99f;
-     border-right: 1px solid #99f;
-     border-bottom: 1px solid #99f;
+button.stop.control {
+     background: url(/themes/console/images/buttons/Xstop.png) center center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+}
+
+button.stop.control:hover, button.stop.control:focus {
+     background: #000 url(/themes/console/images/buttons/Xstop.png) center center no-repeat !important;
+}
+
+button.stop.control:active {
+     background: #652787 url(/themes/console/images/buttons/Xstop.png) center center no-repeat !important;
+}
+
+button.add.control {
+     background: url(/themes/console/images/buttons/edit2.png) center center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+}
+
+button.add.control:hover, button.add.control:focus {
+     background: #000 url(/themes/console/images/buttons/edit2.png) center center no-repeat !important;
+}
+
+button.add.control:active {
+     background: #652787 url(/themes/console/images/buttons/edit2.png) center center no-repeat !important;
+}
+
+button.delete.control {
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+}
+
+button.delete.control:hover, button.delete.control:focus {
+     background: #000 url(/themes/console/images/buttons/delete_hover.png) center center no-repeat !important;
+}
+
+button.delete.control:active {
+     background: #652787 url(/themes/console/images/buttons/delete_hover.png) center center no-repeat !important;
+}
+
+button.check.control {
+     background: url(/themes/console/images/buttons/update.png) center center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+}
+
+button.check.control:hover, button.check.control:focus {
+     background: #000 url(/themes/console/images/buttons/update_hover.png) center center no-repeat !important;
+}
+
+button.check.control:active {
+     background: #652787 url(/themes/console/images/buttons/update_hover.png) center center no-repeat !important;
+}
+
+button.download.control {
+     background: url(/themes/console/images/buttons/download.png) center center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+}
+
+button.download.control:hover, button.download.control:focus {
+     background: #000 url(/themes/console/images/buttons/download.png) center center no-repeat !important;
+}
+
+button.download.control:active {
+     background: #652787 url(/themes/console/images/buttons/download.png) center center no-repeat !important;
+}
+
+button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner  {
+     outline: none;
+     border: none;
+}
+
+/* end project "X" */
+
+/* sidebar buttons */
+
+.routersummary button {
+     margin: 2px;
+     min-width: 87px !important;
+     background-blend-mode: normal;
+}
+
+.routersummary .reload, .routersummary .stop {
+     text-indent: -99999px;
+     background-size: 16px 16px, 100% 100% !important;
+     background-position: center center !important;
+     padding: 5px !important;
+}
+
+.routersummary .reload, .routersummary .reload[value$="restart"] {
+     background: url(/themes/console/images/buttons/restart.png) center center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+}
+
+.routersummary .reload:hover, .routersummary .reload:focus, .routersummary .reload[value$="restart"]:hover, .routersummary .reload[value$="restart"]:focus {
+     background: #000 url(/themes/console/images/buttons/restart_hover.png) center center no-repeat !important;
+}
+
+.routersummary .reload:active, .routersummary .reload[value$="restart"]:active {
+     background: #652787 url(/themes/console/images/buttons/restart_hover.png) center center no-repeat !important;
+}
+
+.routersummary .stop {
+     background: url(/themes/console/images/buttons/shutdown.png) center center no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+}
+
+.routersummary .stop:hover, .routersummary .stop:focus {
+     background: url(/themes/console/images/buttons/shutdown_hover.png) center center no-repeat;
+     background-position: center center !important;
+     background-size: 16px 16px, 100% 100% !important;
+}
+
+/* Show text on context specific buttons (eg deferred shutdown) */
+
+.routersummary .reload[value="restartImmediate"], .routersummary .stop[value="shutdownImmediate"], .routersummary .reload[value="Reseed"] {
+     text-indent: 0;
+     text-align: left;
+     min-width: 0 !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+.routersummary .reload[value="restartImmediate"] {
+     background: url(/themes/console/images/buttons/restart.png) center left 6px no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px auto !important;
+}
+
+.routersummary .reload[value="restartImmediate"]:hover {
+     background: #000 url(/themes/console/images/buttons/restart.png) center left 6px no-repeat !important;
+     background-size: 14px auto !important;
+}
+
+.routersummary .reload[value="restartImmediate"]:focus, .routersummary .reload[value="restartImmediate"]:active {
+     background: url(/themes/console/images/buttons/restart_hover.png) center left 6px no-repeat;
+     background-size: 14px auto !important;
+}
+
+.routersummary .stop[value="shutdownImmediate"] {
+     background: url(/themes/console/images/buttons/shutdown.png) center left 6px no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px auto !important;
+}
+
+.routersummary .stop[value="shutdownImmediate"]:hover {
+     background: #000 url(/themes/console/images/buttons/shutdown_hover.png) center left 6px no-repeat !important;
+     background-size: 14px auto !important;
+}
+
+.routersummary .stop[value="shutdownImmediate"]:focus, .routersummary .stop[value="shutdownImmediate"]:active {
+     background: url(/themes/console/images/buttons/shutdown_hover.png) center left 6px no-repeat;
+     background-size: 14px auto !important;
+}
+
+.routersummary .reload[value="Reseed"] {
+     background: url(/themes/console/images/buttons/download.png) center left 6px no-repeat, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     background-size: 14px auto !important;
+}
+
+.routersummary .reload[value="Reseed"]:hover {
+     background: #000 url(/themes/console/images/buttons/download.png) center left 6px no-repeat !important;
+     background-size: 14px auto !important;
+}
+
+.routersummary .reload[value="Reseed"]:focus, .routersummary .reload[value="Reseed"]:active {
+     background: #652787 url(/themes/console/images/buttons/download.png) center left 6px no-repeat !important;
+     background-size: 14px auto !important;
+}
+
+.routersummary .download, .routersummary .download:hover, .routersummary .download:focus {
+     background: url(/themes/console/images/buttons/download.png) 6px center no-repeat;
+     background-size: 14px 14px, 100% 100%;
+     min-width: 0 !important;
+}
+
+.routersummary .download, .routersummary .download:hover, .routersummary .download:focus, .routersummary .download:active {
+     background-size: 14x 14px !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+.routersummary .download:active {
+     background: #652787 url(/themes/console/images/buttons/download.png) 6px center no-repeat;
+}
+
+/* end sidebar buttons */
+/* end buttons & inputs */
+
+img {
+     border: none;
+}
+
+pre {
+     width: 98%;
+     overflow-x: auto;
+     text-align: left;
+     font: 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     color: #c9ceff;
+}
+
+/* proxy error messages */
+
+div.logo { /* proxy error "fake" sidebar */
+     float: left;
+     padding: 10px;
+     text-align: center;
+     color: #c9ceff;
+     margin: -2px 20px 0 20px;
+     border: 1px solid #443da0;
+     background: #000;
+     width: 185px;
+     box-shadow: inset 0 0 0 1px #44175f;
+     font-size: 9pt;
+}
+
+.logo a img {
+     opacity: 0.6;
+     filter: invert(100%) sepia(100%) hue-rotate(175deg);
+}
+
+.logo a img:hover {
+     opacity: 1;
+     filter: invert(100%) sepia(100%) hue-rotate(175deg) drop-shadow(0 0 3px #652787);
+}
+
+div.logo hr {
+     color: #443da0;
+     background: #443da0;
+     height: 1px;
+     border: 0 solid #443da0;
+     margin: 9px -10px;
+}
+
+.logo a:link {
+     display: block;
+     padding: 2px;
+}
+
+.warning { /* proxy error messages */
+     margin: 20px 20px 20px 245px;
+     padding: 14px 25px 20px 75px;
+     background: #000;
+     border: 1px solid #443da0;
+     text-align: left;
+     color: #c9ceff;
+     text-align: justify;
+     background:url(/themes/console/images/itoopie_sm.png) 10px center no-repeat;
+     box-shadow: inset 0 0 0 1px #44175f;
+     word-wrap: break-word;
+     font-size: 9pt;
+     min-width: 300px;
+     box-shadow: inset 0 0 0 1px #44175f, inset 0 0 3px 3px #000, 0 0 0 2px #443da0;;
+     border: 5px solid #443da0;
+     border-image: repeating-linear-gradient(135deg, #003 0px, #003 20px, #550 20px, #550 40px, #003 40px) 5 repeat repeat;
+     border-image-width: 5px;
+     border-image-outset: 1px;
+}
+
+.warning p, .warning a {
+     font-size: 10pt
+}
+
+.warning a {
+     line-height: 150%;
+}
+
+.warning h3 {
+     text-align: left;
+     padding: 5px 10px;
+}
+
+.proxyfooter {
+     margin: 0 20px 10px 240px;
+     padding: 20px 25px 20px 75px;
+     color: #652787;
+     font-size: 7pt;
+     text-align: right !important;
+     border-radius: 2px;
+     border: 1px solid #000;
+     display: none;
+}
+
+/* responsive proxy errors */
+
+@media screen and (max-width: 800px) {
+.warning {
+     margin-left: 20px !important;
+     background: #000 !important;
+     padding-left: 25px !important;
+}
+
+.logo {
+     display: none;
+}
+}
+/* end proxy error messages */
+
+.routersummaryouter {
+     float: left;
+     width: 200px;
+     margin: 0 0 10px 5px;
+     padding: 0;
+     border: 0;
+     clear: left;/* fixes a bug in Opera */
+     text-align: center;
+     display: block;
+     position: absolute;/* so no interference with /home app icons */
+}
+
+.routersummary {
+     width: 173px;
+     padding: 8px 10px 8px;
+     text-align: center;
+     border: 1px solid #443da0;
+     background: #000;
+     color: #c9ceff;
+     font-size: 8pt;
+     clear: left;/* fixes a bug in Opera */
+     border-radius: 2px;
+     float: left;
+     box-shadow: 0 1px 5px #000;
+     margin-bottom: 7px !important;
+}
+
+.routersummary img[src*="i2plogo"] {
+     opacity: 0.7;
+     transition: ease-out opacity 0.3s 0s, ease filter 0.3s 0s;
+     margin-top: 1px;
+     margin-left: -3px;
+     width: 176px;
+     height: auto;
+     filter: sepia(100%) hue-rotate(180deg) drop-shadow(0 0 1px #652787);
+}
+
+.routersummary img[src*="i2plogo"]:hover {
+     opacity: 1;
+     transition: ease-in opacity 0.3s 0s, ease filter 0.3s 0s;
+     filter: drop-shadow(0 0 2px #652787) saturate(100%);
+}
+
+.routersummary img[src*="i2plogo"]:active {
+     filter: drop-shadow(0 0 5px #450519) saturate(140%) !important;
+     transition: ease-out opacity 0s 0s, ease filter 0s 0s;
+}
+
+.routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img {
+     opacity: 1;
+     transition: ease-in opacity 0.5s 0s, ease filter 0.5s 0s;
+     filter: drop-shadow(0 0 3px #652787) saturate(200%);
+}
+
+.routersummary input[type=text] {
+     text-align: right !important;
+     box-shadow: inset 1px 1px 1px 0 #000;
+}
+
+.routersummary hr {
+     color: #443da0;
+     background: #443da0;
+     height: 2px;
+     border-bottom: 1px solid #443da0;
+     margin: 8px -10px 7px -10px;
+     box-shadow: inset 0 1px 1px 1px #000;
+}
+
+.routersummary h3 {
+     border: 0;
+     font-size: 9.5pt;
      letter-spacing: 0.04em;
-     font-weight: bold !important;
+     margin: -7px -10px -8px -10px;
+     padding: 4px 0 !important;
      text-transform: uppercase;
-     margin: 5px 10px 5px;
-     color: #fff;
-     background: #022;
-     background: url("images/tinytitles.png") repeat-x scroll center center #000022 !important;
-     border-radius: 3px;
+     border-radius: 0;
+     background: #000 url(images/header.png) center center;
+}
+
+.routersummary h3:hover {
+     background: linear-gradient(to bottom, #001020 50%, #000 50%) !important;
+}
+
+.routersummary h3:hover a {
+    color: #652787 !important;
+}
+
+.routersummary h3:active {
+     box-shadow: inset 3px 3px 3px #000;
+}
+
+.routersummary h3 a, .routersummary h3 a:visited {
+     display: inline-block;
+     width: calc(100% - 6px);
+     padding: 1px 0 !important;
+     margin: 0;
+     color: #7670c2;
+}
+
+.routersummary h4 {
+     border: none;
+     font-size: 8pt;
+     letter-spacing: 0.02em;
+     margin: -6px -9px -8px -9px !important;
+     padding: 6px 3px;
+     background: #000;
+     background: linear-gradient(to right, #001 0%, #010005 5%, #010010 15%, #010025 50%, #010010 85%, #010005 95%, #001 100%);
+     text-decoration: none !important;
+     color: #2a1fbe;
+     line-height: 120%;
+     text-shadow: 0 0 1px #000;
+     box-shadow: inset 0 0 0 1px #005;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.routersummary h4 {
+     box-shadow: none;
+}
+}
+
+.routersummary ul {
+     text-align: left !important;
+}
+
+.routersummary table {
+     border: 0;
+     text-align: center !important;
+     margin: -4px -7px -5px -8px !important;
+     width: 189px !important;
+     overflow: hidden;
+     font-size: 8pt;
+     background-image: none !important;
+     background-color: transparent !important;
+}
+
+#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+     margin-top: -6px !important;
+     margin-bottom: -5px !important;
+}
+
+#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+     content: "";
+     display: inline-block;
+     vertical-align: bottom;
+     min-height: 16px !important;
+}
+
+#sb_localtunnels {
+     width: 189px !important;
+     border-collapse: separate;
+     border-spacing: 0;
+     margin-top: -5px !important;
+}
+
+#sb_localtunnels a {
+     display: inline-block;
+     width: 100%;
+}
+
+#sb_localtunnels img {
+     margin: 0;
+     padding: 0;
+}
+
+#sb_localtunnels td:first-child {
+     width: 16px;
+     text-align: left;
+     padding: 2px 0 2px 1px;
+}
+
+#sb_localtunnels td:last-child {
+     text-align: right;
+     padding-right: 0;
+}
+
+#sb_localtunnels tr:hover td {
+     background: #652787;
+}
+
+#sb_localtunnels tr:hover td:first-child {
+     border-radius: 2px 0 0 2px;
+}
+
+#sb_localtunnels tr:hover td:last-child {
+     border-radius: 0 2px 2px 0;
+}
+
+#sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
+     word-break: break-all;
+     max-width: 182px;
+     overflow: hidden;
+     white-space: nowrap;
+     text-overflow: ellipsis;
+     line-height: 140%;
+     vertical-align: middle;
+     display: inline-block;
+     padding: 1px 3px;
+}
+
+#sb_services a:hover, #sb_internals a:hover, #sb_advanced a:hover, #sb_localtunnels tr:hover, #sb_localtunnels tr:hover a, .news a:hover, #console a:hover ,
+tt a:hover {
+     background: #652787;
+     color: #fff; !important;
+     border-radius: 2px;
+}
+
+#sb_services a:active, #sb_internals a:active, #sb_advanced a:active, #sb_localtunnels tr:active,
+.news a:active, #console a:active, tt a:active {
+     background: #39144F;
+     color: #c9ceff !important;
+}
+
+#sb_localtunnels tr:active a {
+     color: #c9ceff !important;
+}
+
+.sb_notice {
+     background: #001;
+     border: 1px solid #241f69;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #000;
+     margin: 5px -4px -3px;
+     padding: 5px 3px;
+}
+
+p:empty + .sb_notice {
+     margin-top: 10px;
+}
+
+/* sidebar stacked tables fix */
+
+#sb_localid + #sb_version {
+     margin-top: 6px !important;
+     margin-bottom: 5px !important;
+}
+
+.routersummary tr {
+     background-image: none !important;
+     background-color: transparent !important;
+     border: 0 !important;
+}
+
+.routersummary form {
+     margin: -4px -9px -6px;
+}
+
+.routersummary form:first-child {
+     margin: 6px 0 -5px 0 !important;
+}
+
+.routersummary p {
+     padding: 0;
+}
+
+.refresh {
+     margin-top: -10px !important;
+     margin-bottom: -4px !important;
+     padding: 2px 0 0 0 !important;
+}
+
+.routersummary a:link, .routersummary a:visited {
+     padding: 0 2px;
+}
+
+div.routersummary a:hover {
+     color: #652787;
+}
+
+/* "experimental" custom sidebar links for apps
+
+#sb_services {
+     width: 192px !important;
+     margin: 0 !important;
+     margin: -7px -10px -9px !important;
+     border-collapse: collapse;
+
+}
+
+#sb_services td {
+     padding: 0;
+}
+
+#sb_services a, #sb_services a:hover, #sb_services a:active {
+     border-bottom: 1px solid #443da0 !important;
+     outline: none !important;
+}
+
+#sb_services a:hover {
+     background: #002;
+}
+
+#sb_services a:last-child {
+     border-bottom: 1px solid transparent !important;
+}
+
+#sb_services a[href*="mail"], #sb_services a[href*="snark"], #sb_services a[href*="7658"], #sb_services a[href*="bote"] {
+     width: calc(100% - 31px) !important;
+     padding: 5px 5px 5px 26px !important;
+     border: 1px outset transparent;
+     margin: 0 !important;
+     float: left;
+     text-align: left;
+     background: #000;
+     text-decoration: none;
+     text-transform: uppercase;
+     letter-spacing: 0.1em;
+     white-space: nowrap;
+     text-overflow: ellipsis;
+     overflow: hidden;
+     clear: both;
+}
+
+#sb_services a[href*="mail"] {
+     background: #000 url(images/mail.png) 5px center no-repeat;
+}
+#sb_services a[href*="mail"]:hover {
+     background: #002 url(images/mail.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="bote"] {
+     background: #000 url(images/webmail.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="bote"]:hover {
+     background: #002 url(images/webmail.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="snark"] {
+     background: #000 url(images/magnet.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="snark"]:hover {
+     background: #002 url(images/magnet.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="7658"] {
+     background: #000 url(images/webserver.png) 5px center no-repeat;
+}
+
+#sb_services a[href*="7658"]:hover {
+     background: #002 url(images/webserver.png) 5px center no-repeat;
+}
+
+/* end custom sidebar links */
+
+.routersummary td {
+     padding: 0 2px 0 2px;
+     background-image: none !important;
+     border: 0 !important;
+     word-spacing: -0.1em;
+     max-width: 180px;
+     text-overflow: ellipsis; /* force ellipsis rather than truncate rare, overlong text strings eg. Swedish sidepanel */
+}
+
+.routersummary td:first-child {
+     max-width: 90px;
+     overflow: hidden;
+     text-transform: capitalize;
+}
+
+.routersummary hr:last-child {
+     margin-top: 5px;
+     margin-bottom: -5px !important;
+}
+
+.newsheadings {
+     text-align: center;
+     margin: -3px 0 -5px 10px;
+     word-spacing: 0;
+}
+
+div.newsheadings li {
+     list-style: none outside url(images/newsbullet_mini.png);
+     margin: 0 -6px 2px 4px;
+     line-height: 110%;
+     text-transform: capitalize;
+}
+
+div.tunnels {
+     padding-top: 3px !important;
+     margin-left: -4px;
+     text-align: center;
+}
+
+.tunnels table {
+     margin: -5px 0 -5px -3px !important;
+}
+
+.tunnels td {
+     padding: 1px 0 1px 0;
+     text-transform: capitalize;
+}
+
+.tunnels td:first-child {
+     width: 16px;
+     text-align: left;
+     padding-right: 2px;
+}
+
+.tunnels td:last-child {
+     text-align: right;
+     padding-right: 1px;
+}
+
+/* console error messages */
+
+.sorry {
+     margin: -1px 5px 10px 205px;
+     padding: 20px 20px 20px 75px;
+     background: #020022;
+     border: 1px solid #443da0;
+     border-radius: 0 0 2px 2px;
+     text-align: justify;
+     background-image:url(/themes/console/images/info/errortriangle.png);
+     background-position:15px center;
+     background-repeat:no-repeat;
+     box-shadow: inset 0 0 0 1px #320951;
+     word-wrap: break-word;
+     min-width: 555px;
+     color: #c9ceff;
+     font-size: 10pt;
+}
+
+div.sorry hr {
+     color: #c9ceff;
+     background: #c9ceff;
+     height: 1px;
+     border: 1px solid #c9ceff;
+     margin: 10px 0;
+}
+
+/* end error msgs */
+
+.main {
+     margin: -1px 5px 5px 205px;
+     padding: 0 10px 1px 10px;
+     text-align: left;
+     color: #c9ceff;
+     width: auto;
+     border: 1px solid #443da0;
+     border-radius: 0 0 2px 2px;
+     background: #000 url(images/scarface.jpg) right bottom no-repeat !important;
+     background-size: auto 200px !important;
+     min-width: 620px;
+     box-shadow: 0 1px 5px #000, inset 0 0 0 1px #000;
+     font-size: 9pt;
+}
+
+.main#news {
+     background: #000 url(images/earth.jpg) no-repeat scroll bottom right !important;
+     background-size: auto 200px !important;
+     padding-bottom: 0;
+}
+
+.news {
+     margin: -1px 5px 0 205px;
+     padding: 6px 20px 5px;
+     border: 1px solid #443da0;
+     background: #000 url(images/earth.jpg) no-repeat scroll bottom right;
+     background-size: auto 200px;
+     color: #7670c2;
+     font-size: 8pt;
+     text-align: right;
+     box-shadow: 0 1px 5px #000;
+     min-width: 600px;
+}
+
+/*
+.newsentry font[size="-2"] {
+     letter-spacing: 0.15em;
+     font-style: italic;
+     text-transform: capitalize;
+}
+*/
+
+.main#news .newscontent {
+     border: 1px solid #443da0;
+     margin: -11px 0 10px;
+     padding: 0 10px 5px;
+     border-radius: 0 0 2px 2px;
+     background: rgba(0,0,0,0.6);
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.main#news .newsentry h3 {
+     border: 1px solid #443da0;
+     border-radius: 2px 2px 0 0;
+}
+
+.main#news .newsentry {
+     margin-bottom: 14px !important;
+}
+
+.main#news .newsentry:first-child {
+     margin-top: -3px !important;
+}
+
+.main#news .newsentry:last-child {
+     margin-bottom: -3px !important;
+}
+
+.news .newsentry {
+     margin-top: -3px !important;
+}
+
+.news .newsentry:first-child {
+     margin-top: -7px !important;
+}
+
+.news h4 {
+     border-bottom: 1px;
+     border-bottom-style: dotted;
+     border-bottom-color: #443da0;
+     padding: 0 0 0 0;
+     margin: 5px 0 10px 0;
+     font-size: 10pt;
+     opacity: 1;
+     text-transform: capitalize;
+}
+
+.news p, .newscontent p {
+     margin-top: -5px;
+     font-size: 9pt;
+     color: #c9ceff;
+     margin-bottom: 0;
+}
+
+.news p:nth-child(n+1), .newscontent p:nth-child(n+1) {
+     margin-top: 5px;
+}
+
+.news hr {
+     margin: 8px -20px 5px;
+}
+
+#newspage {
+     margin: 18px 5px; /* positional parity with homepage news */
+}
+
+#newsStatus {
+     float: left;
+     color: #c9ceff;
+}
+
+#newsDisplay {
+     white-space: nowrap;
+     margin-left: 10px;
+}
+
+#news #newsDisplay {
+     margin-right: -5px;
+}
+
+#news #newsDisplay a {
+     padding: 2px 3px;
+}
+
+.newsAuthor {
+     float: right;
+     background: url(/themes/console/images/info/author_dark.png) left 2px top no-repeat;
+     background-size: 14px 14px;
+     font-size: 8pt !important;
+     padding: 0 0 0 18px;
+     display: inline-block;
+     opacity: 0.7;
+     text-transform: none;
+}
+
+.newsDate {
+     opacity: 0.7;
+     font-style: italic;
+     margin-right: 2px;
+}
+
+.messages i {
+     text-align: left;
+     float: none;
+     display: inline-block;
+}
+
+.messages #newsDisplay {
+     display: inline-block;
+     white-space: normal;
+     margin-left: 45px;
+}
+
+.main#jobs .joblog {
+     margin-top: 10px !important;
+}
+
+.main#jobs ol {
+     padding: 10px 10px 5px 10px;
+     -moz-columns: 2;
+     -webkit-columns: 2;
+     columns: 2;
+     text-align: left;
+}
+
+.main#jobs ol:empty {
+     display: none;
+}
+
+.main#jobs ol li:first-child {
+     margin-top: 0 !important;
+}
+
+.main#jobs ol li {
+     break-inside: avoid;
+     page-break-inside: avoid;
+     -webkit-break-inside: avoid;
+     display: inline-block;
+     text-align: left !important;
+     min-width: 400px;
+}
+
+.main#config_update input, .main#config_update button, .main#config_update select, .main#config_update textarea {
+     margin-left: 0 !important;
+}
+
+.main#config_update .messages {
+     background: url(/themes/console/images/info/infohelp.png) no-repeat 15px center, url(images/earth.jpg) bottom right no-repeat !important;
+     background-size: auto, 80px !important;
+}
+
+.main#events .messages {
+     margin-top: 21px;
+     margin-bottom: -16px;
+     box-shadow: inset 0 0 0 1px #300 !important;
+}
+
+.wideload {
+     margin: 0;
+}
+
+.widescroll { /* only scroll content, not entire page eg /peers */
+     overflow: auto;
+}
+
+.widescroll table {
+     white-space: nowrap;
+}
+
+/* top navigation */
+
+div.confignav {
+     background: #010010 url(images/titles.png) center center repeat-x !important;
+     background: linear-gradient(to bottom, #121225 50%, #000011 50%, #00000d 50%);
+     padding: 7px 5px 8px !important;
+     margin: -1px -11px 15px;
+     border: 1px solid #443da0;
+     font-weight: bold !important;
+     line-height: 130% !important;
+     text-align: center;
+     box-shadow: inset 0 0 0 1px #000, inset 0 0 3px 1px #030;
+}
+
+.tab, .tab2 {
+     box-sizing: border-box;
+     display: inline-block;
+     border: 1px solid #443da0;
+     margin: 0 -2px -1px -2px !important;
+     padding: 1px 0 2px;
+     min-width: 60px !important;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.tab a, .tab a:visited {
+     display: inline-block;
+     padding: 4px 16px 5px;
+     color: #7670c2
+}
+
+.tab {
+     background: #010010 url(images/titles.png) center center repeat-x;
+     background: linear-gradient(to bottom, #1a1b2f 50%, #000011 50%, #00000d 50%) !important;
+}
+
+.tab:hover {
+     background: #000 !important;
+     box-shadow: inset 0 0 0 1px #404;
+}
+
+.tab:active {
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px 1px #2d103f;
+     background: #652787 !important;
+}
+
+.tab:active a {
+     color: #c9ceff !important;
+}
+
+.tab2 {
+     background: #040033;
+     color: #c9ceff;
+     padding: 5px 14px 7px;
+}
+
+/* end topnav */
+
+#bwlimiter a, #advancedconfig a, .tabletitle a, #upnpconfig a, #servicedebug a, .ptitle a, #configstats th a, h3#graphinfo a, .h3navlinks {
+     float: right;
+     letter-spacing: normal;
+     text-transform: capitalize !important;
+     font-size: 9pt;
+}
+
+.h3navlinks a {
+     text-transform: capitalize;
+     letter-spacing: normal;
+     margin-left: 5px;
+}
+
+.main#tunnels h3:first-child {
+     margin-top: 10px;
+}
+
+.main#tunnels h3 a:not(old), #criticallogs + h3.tabletitle a:not(old) {
+     font-size: 0;
+}
+
+.main#tunnels h3 a[href^="/configtunnels#"]::after, #criticallogs + h3.tabletitle a::after {
+     content: url(/themes/console/images/buttons/configure.png);
+     float: right;
+     padding: 0;
+}
+
+#criticallogs tr:first-child {
+     display: none;
+}
+
+#criticallogs li::first-line, #routerlogs li::first-line {
+     display: inline-block;
+     border: 1px solid #f00;
+}
+
+#criticallogs li:last-child, #routerlogs li:last-child {
+     padding-bottom: 8px !important;
+}
+
+img[src$="inbound.png"], img[src$="outbound.png"] {
+     filter: hue-rotate(-47deg);
+}
+
+h3#iptransport a:not(old), h3#advancedconfig a:not(old) {
+     font-size: 0;
+     height: 20px;
+}
+
+h3#iptransport a::after, h3#advancedconfig a::after {
+     content: url(images/help.png);
+     padding: 0;
+     margin: 0;
+     vertical-align: text-top;
+     cursor: help;
+     filter: drop-shadow(0 0 1px #555);
+}
+
+div.messages {
+     padding: 20px 10px;
+     margin: -4px 0 10px;
+     border: 1px solid #443da0;
+     background: #000;
+     background: url(/themes/console/images/info/infohelp.png) no-repeat 15px center, #000;
+     font-weight: bold;
+     font-size: 9.5pt;
+     color: #c9ceff !important;
+     box-shadow: none !important;
+}
+
+div.messages i {
+     padding-left: 45px;
+     color: #c9ceff;
+}
+
+div.messages span.error {
+     color: #D6FFFD;
+}
+
+div.messages span.notice {
+     font-style: italic;
+}
+
+div.messages li {
+     text-align: justify !important;
+     font-weight: bold;
+     list-style: none !important;
+     margin: 0 5px 0 50px !important;
+     padding: 0 10px 0 0 !important;
+     border: 0 !important;
+}
+
+div.widepanel h3 {
+     text-align: left !important;
+     padding: 6px 10px;
+     text-transform: uppercase;
+     font-size: 10.5pt;
+     text-align: left;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-radius: 0;
+     border: 1px solid #443da0;
+}
+
+div.graphspanel {
+     padding: 0;
+     margin: 15px 0 -15px 0;
+     background: none;
+     text-align: center;
+     overflow: auto;
+     width: 100%;
+}
+
+div.graphspanel form {
+     text-align: left;
+     padding: 0 15px 0 15px;
+     margin-bottom: 25px;
+}
+
+div.graphspanel a img {
+     border: 1px solid #443da0;
+     padding: 3px;
+     margin: 5px;
+     text-align: center !important;
+     background: #000;
+     opacity: 0.9;
+     transition: all 0.3s ease 0s;
+}
+
+div.graphspanel a img:hover {
+     border: 1px solid #652787;
+     padding: 3px;
+     margin: 5px;
+     text-align: center !important;
+     background: #000;
+     opacity: 1;
+     transition: all 0.3s ease 0s;
+     cursor: url(/themes/console/images/cursor_zoom.png), auto;
+}
+
+div.graphspanel img {
+     border: 1px solid #2f2e38;
+     padding: 2px;
+     max-width: 97%;
+     max-width: calc(100% - 20px);
+     vertical-align: top;
+/*     filter: sepia(100%) invert(100%);*/
+}
+
+div.graphspanel p {
+     text-align: center;
+     text-transform: capitalize;
+     margin-top: 10px;
+     border-top: 1px solid #443da0;
+     padding: 10px 10px 15px;
+}
+
+p#graphopts {
+     margin-top: 30px !important;
+}
+
+h3#graphinfo {
+     margin-top: 0;
+     border-radius: 0 !important;
+     text-transform: capitalize;
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
+div.graphspanel p:last-child {
+     display: none;
+}
+
+form[action="graphs"] {
+     border: 1px solid #443da0;
+     padding: 10px 10px 0 !important;
+     background: #000;
+     margin-top: -11px;
+     margin-bottom: 10px;
+}
+
+h3#graphdisplay a {
+     text-transform: capitalize;
+     letter-spacing: normal;
+     font-size: 9pt;
+     float: right;
+}
+
+/* new graphs optionbox */
+
+#graphs form {
+     padding: 0 !important;
+}
+
+#graphs form hr {
+     margin: 0 -1px 8px !important;
+}
+
+#graphs form table {
+     border: none;
+     margin: 0;
+}
+
+.formaction#graphing {
+     margin: -2px 0 0 !important;
+     padding-top: 1px;
+     border-left: none;
+     border-right: none;
+}
+
+#graphs tr:first-child td {
+     border-top: none;
+}
+
+#graphs td:first-child {
+     text-align: right;
+     width: 85px;
+     white-space: nowrap;
+     padding: 13px 3px 13px 5px;
+}
+
+#graphs td:nth-child(2) {
+     width: 260px;
+     white-space: nowrap;
+}
+
+#graphs td.infohelp {
+     border: 1px inset #120f35;
+     border-right: none;
+     border-left: none;
+     background-size: 20px 20px !important;
+     padding: 5px 5px 5px 40px !important;
+     background-color: #010008 !important;
+     text-align: left;
+}
+
+#graphs form input, #graphs form select {
+     margin: 3px 5px 3px 0;
+     vertical-align: middle;
+}
+
+#graphs input[type="text"] {
+     min-width: 60px;
+}
+
+/* end new graphs optionbox */
+
+table {
+     border-collapse: collapse;
+     width: 100%;
+     border: 1px solid #443da0;
+     padding: 1px;
+     font-size: 9pt;
+     background: #040033;
+     margin: 1px 0;
+}
+
+table hr {
+     padding: 0 0;
+     color: #443da0;
+     background: #443da0;
+     border: 0 solid #443da0;
+     margin: 0 0;
+     height: 1px;
+     display: none;
+}
+
+th {
+     padding: 6px 2px;
+     color: #c9ceff;
+     text-align: center;
+     font-size: 9pt;
+     background: #000 url(images/titles.png) center center repeat-x;
+     background: linear-gradient(to bottom, #121225 50%, #000011 50%, #00000d 50%);
+     border-top: 1px solid #443da0;
+     border-bottom: 1px solid #443da0 !important;
+     line-height: 110%;
+}
+
+tr {
+     vertical-align: middle;
+}
+
+tr:nth-child(even) {
+     background: #010010;
+     vertical-align: middle;
+}
+
+tr:nth-child(odd) {
+     background: #010008;
+     vertical-align: middle;
+}
+
+td {
+     padding: 4px 6px;
+     color: #c9ceff;
+     vertical-align: middle;
+     border-top: 1px inset #120f35;
+}
+
+td img {
+     padding: 0 1px 0 2px;
+}
+
+td img[src$="c=a1"], td img[src$="c=a2"] {
+     filter: drop-shadow(0 0 1px #337);
+}
+
+tt {
+     font: bold 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     color: #393;
+}
+
+table tt {
+     color: #393;
+}
+
+a:link tt, a:visited tt {
+     color: #4e47bf;
+}
+
+a:hover tt {
+     color: #652787;
+}
+
+a:active tt {
+     color: #9FE9F9;
+}
+
+div.main li {
+     text-align: left;
+     list-style: square;
+     margin: 2px 0 2px 30px;
+     padding: 2px 20px 2px 0;
+     word-wrap: break-word;
+}
+
+.tidylist {
+     text-align: justify !important;
+     line-height: 150%;
+}
+
+.tidylist:last-child {
+     padding-bottom: 10px;
+}
+
+.tidylist code {
+     text-align: left;
+     font: bold 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     color: #fff;
+     padding: 2px 3px;
+     background: #040033;
+     margin: 0 2px;
+     border-radius: 2px;
+}
+
+ol {
+     display: inline;
+     padding: 1px 0 0 20px;
+}
+
+ol li:first-child {
+     margin-top: 10px !important;
+}
+ul {
+     margin: 0;
+     padding: 0;
+}
+
+code {
+     text-align: left;
+     font: 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     color: #393;
+}
+
+a:link, h2 a:link {
+     color: #7972d1;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
+     outline: none;
+}
+
+a:visited {
+     color: #4e47bf;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
+}
+
+a:hover, a:focus {
+     color: #652787;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
+}
+
+a:active {
+     color: #4f0519 !important;
+}
+
+.links {
+     text-align: justify;
+     margin-top: 10px;
+     margin-bottom: -10px;
+}
+
+.links li {
+     list-style-image: url(images/link.png) !important;
+}
+
+.links b {
+     color: #ebdbff !important;
+     color: #8f7959 !important;
+     letter-spacing: 0.08em;
+     line-height: 165%;
+}
+
+p {
+     text-align: justify;
+     line-height: 160%;
+}
+
+p img:first-child {
+     display: none !important;
+}
+
+p:empty { /* kills empty paragraphs that are likely erroneous eg. see top of /profiles?f=1, /profiles */
+     display: none;
+     border: 1px dotted #652787; /* display in order to bug hunt */
+}
+
+#config_logging p {
+     text-align: left;
+     margin: 3px 0 0 !important;
+}
+
+h1 {
+     text-align: left;
+     color: #c9ceff;
+     padding: 13px 15px;
+     margin: 0 5px 0 205px !important;
+     font-size: 17pt;
+     font-weight: bold;
+     font-style: normal;
+     text-transform: uppercase;
+     letter-spacing: 0.15em;
+     text-shadow: 0 0 2px #010011;
+     white-space: normal;
+     background: #000 url(images/header.png) center center;
+     border: 1px solid #443da0;
+     border-radius: 2px 2px 0 0;
+     line-height: 120%;
+     min-width: 610px;
+     box-shadow: 0 1px 5px #000;
+}
+
+span.newtab {
+     text-align: right;
+     font-size: 8pt;
+     float: right;
+     letter-spacing: 0;
+}
+
+.newtab:hover {
+     filter: drop-shadow(0 0 3px #652787) !important;
+}
+
+h2, h2.welcome {
+     font-size: 12pt;
+     color: #c9ceff;
+     text-shadow: 0 0 2px #010011;
+     letter-spacing: 0.05em;
+     background: #000 url(images/header.png) center center ;
+     padding: 10px;
+     border: 1px solid #443da0;
+     border-radius: 2px;
+     vertical-align: middle;
+     margin: 15px 0 12px 0 !important;
+     text-transform: uppercase;
+     word-wrap: break-word;
+}
+
+h2 a:visited {
+     color: #190f9b;
+}
+
+h2 a:hover {
+     color: #652787;
+}
+
+h2 a[name]:hover, h2 a[name]:active {
+     color: #c9ceff !important;
+}
+
+h3, h3.welcome, div.news h3 {
+     border: 1px solid #443da0;
+     border-left: 5px solid #443da0;
+     padding: 7px 10px;
+     margin: 10px 0 10px 0;
+     border-radius: 0 2px 2px 0;
+     background: #000 url(images/header.png) center center ;
+     text-transform: uppercase;
+     text-shadow: 0 0 2px #010011;
+     letter-spacing: 0.08em;
+}
+
+div.news h3 {
+     padding: 6px 10px 6px 0;
+}
+
+h4 {
+     border-bottom: 1px;
+     border-bottom-style: solid;
+     border-bottom-color: #443da0;
+     padding: 0 0 10px 0;
+     margin: 5px 0 10px 0;
+     font-size: 11pt;
+}
+
+h1, h2, h3:not([id*="help"]), h4.app, h4.app2, div.routersummary h3, .confignav {
+     background: linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+}
+
+h2, h3, h4, .confignav {
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+
+.news h3, #newspage h3 {
+     padding-left: 30px !important;
+     text-align: left !important;
+     font-size: 9.5pt !important;
+     letter-spacing: 0.08em;
+     color: #c9ceff;
+     padding: 6px 10px 6px 30px;
+     background: url(/themes/console/images/info/newspaper.png) left 8px center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     background-size: 16px 16px, 100% 100% !important;
+}
+
+.news h3 {
+     padding-left: 23px !important;
+     background: url(/themes/console/images/info/newspaper.png) left 1px center no-repeat !important;
+     background-size: 16px 16px !important;
+     border: none !important;
+     border-bottom: 1px solid #443da0 !important;
+}
+
+.underline {
+     border-bottom: 1px solid #efeeff;
+     padding: 5px 0 5px 0;
+     margin: 0 0 10px 0;
+}
+
+.langbox {
+     margin: 5px 4px 2px 5px;
+     padding: 0;
+     color: #c9ceff;
+     font-size: 7pt;
+     width: 360px;
+     text-align: right;
+     float: right;
+     vertical-align: middle;
+}
+
+.langbox img {
+     opacity: 0.7;
+     margin: 0 !important;
+     padding: 0;
+}
+
+.langbox img:hover, .langbox a:focus img {
+     opacity: 1;
+     transform: scale(1.1);
+}
+
+hr {
+     color: #443da0;
+     background: #443da0;
+     height: 1px;
+     border: 0 solid #443da0;
+     margin: 20px 0 10px;
+}
+
+hr:last-child {
+     margin-top: 20px;
+     margin-bottom: 20px;
+}
+
+.joblog hr {
+     margin: 10px 0;
+}
+
+fieldset {
+     overflow: hidden;
+     position: relative;
+}
+
+.statusnotes {
+     font-style: italic;
+     font-size: 9pt;
+     color: #c9ceff;
+     text-align: center;
+     border: 1px solid #443da0 !important;
+     margin: -3px 0 5px 0;
+     padding: 7px;
+     background: #000;
+     background: linear-gradient(to bottom, #010014, #010010 50%, #010010 100%);
+}
+
+div.joblog {
+     border-radius: 2px 2px 0 0;
+     text-align: justify !important;
+     overflow-y: hidden !important;
+     margin-top: 10px !important;
+ }
+
+div.joblog h3 {
+     margin-top: 10px !important;
+}
+
+div.joblog br {
+     margin-bottom: -5px;
+}
+
+div.main li:last-child {
+     padding-bottom: 15px;
+}
+
+div.joblog li {
+     word-wrap: break-word !important;
+     text-align: justify !important;
+     line-height: 120% !important;
+     margin: 2px 0 2px 30px;
+     padding: 2px 20px 2px 0;
+}
+
+div.joblog ul {
+     word-wrap: break-word !important;
+     text-align: justify;
+     margin: 5px 0 -10px;
+}
+
+div.joblog li:first-child {
+     margin-top: 0;
+     padding-top: 0;
+}
+
+div.joblog li:last-child {
+     padding-bottom: 5px;
+}
+
+div.joblog ul li li li {
+     margin-bottom: 10px !important;
+}
+
+div.joblog form:first-child {
+     margin-top: 10px;
+}
+
+div.joblog table {
+     margin-top: 15px;
+     margin-left: 0 !important; /* removes hard-coded indentation */
+     margin-bottom: 15px;
+}
+
+div.joblog table td:first-child {
+     font-weight: bold;
+}
+
+div.joblog p {
+     line-height: 140%;
+}
+
+div.joblog th:first-child {
+     text-align: left;
+     padding-left: 6px;
+}
+
+/* /jobs */
+
+h2#jobrunners {
+     margin-top: 0 !important;
+}
+
+.main#jobs h2 {
+     border-radius: 0;
+}
+
+#jobrunners ~ ol {
+     display: block;
+     margin-bottom: 5px !important;
+     margin-top: -11px !important;
+     border: 1px solid #443da0;
+     width: 97%;
+     width: calc(100% - 22px);
+     background: #010008;
+     padding: 0 20px 0 0;
+}
+
+#jobrunners ~ ol > li:last-child {
+     margin-bottom: 5px;
+}
+
+h3[id*="jobs"] {
+     clear: both;
+     margin-top: 25px !important;
+}
+
+table#schedjobs {
+     width: 100% !important;
+     margin: -6px 0 0 !important;
+}
+
+#jobstats {
+     margin-bottom: 10px;
+}
+
+#jobstats th, #jobstats td {
+     text-align: right;
+     padding-right: 8px !important;
+}
+
+#schedjobs th:first-child, #schedjobs td:first-child, #jobstats th:first-child, #jobstats td:first-child  {
+     text-align: left;
+     padding-left: 10px;
+     font-weight: bold;
+     margin-bottom: 15px;
+}
+
+table#jobstats + hr {
+     display: none;
+}
+
+h3#totaljobstats {
+     margin-bottom: -2px;
+     margin-top: 10px !important;
+}
+
+h3#finishedjobs + ol li, h3#scheduledjobs + ol li, h3#activejobs + ol li, h3#readyjobs + ol li {
+    list-style: none !important;
+}
+
+h3#activejobs + ol li:before, h3#scheduledjobs + ol li:before, h3#readyjobs + ol li:before, h3#finishedjobs + ol li:before {
+     content: '\2023\00A0 ';
+     margin-left: -20px;
+     font-size: 15pt;
+     font-weight: bold;
+     line-height: 50%;
+     vertical-align: sub;
+     color: #393;
+}
+
+h3#finishedjobs + ol li:before {
+     color: #3D3;
+     content: '\2714\00A0';
+}
+
+h3#readyjobs + ol li:before {
+     color: #dd3;
+}
+
+h3#scheduledjobs + ol li:before {
+     color: #773;
+}
+
+/* end /jobs */
+
+/* /eventlogs */
+
+table#eventlog {
+     margin-top: -21px;
+     margin-bottom: 10px;
+}
+
+table#eventlog td {
+     padding: 3px 10px;
+     width: 30%;
+}
+
+table#eventlog td:last-child {
+     width: 40%;
+}
+
+form[action="events"] {
+     background: #000;
+}
+
+.smallhead {
+     font-size: 8pt
+}
+
+.smallhead a:hover {
+     text-decoration: none;
+}
+
+.smallhead a img:hover {
+     filter: drop-shadow(0 0 1px #652787);
+}
+
+.mediumtags {
+     font-size: 9pt;
+}
+
+.optbox {
+     min-width: 16px !important;
+     max-width: 16px !important;
+     width: 16px !important;
+     min-height: 16px;
+     max-height: 16px;
+     height: 16px;
+     opacity: 1.0;
+     border: 0;
+     margin: 2px 4px;
+     padding: 2px;
+     overflow: hidden;
+     position: relative;
+}
+
+.cells {
+     border: 1px inset #120f35;
+     text-align: center;
+}
+
+.tablefooter tr, .tablefooter td {
+     background: #000 url(images/header.png) repeat-x center center !important;
+     background: linear-gradient(to bottom, #010014, #010010 50%, #010010 100%) !important;
+     border-top: 1px solid #443da0;
+     border-bottom: 1px solid #443da0 !important;
+     line-height: 110%;
+     padding: 10px;
+}
+
+.formaction {
+     text-align: right;
+     margin-bottom: -5px;
+     padding: 7px 5px;
+}
+
+h3[id$="con"] { /* peers h3 + tables */
+     background: #652787;
+     margin-bottom: -2px;
+     border-radius: 0;
+     padding: 6px 10px;
+     font-size: 10pt;
+     word-spacing: 0.1em;
+     letter-spacing: 0.08em;
+     background: #000;
+     background: linear-gradient(to right, #000000, #010010 70%, #010013 90%);
+     border: 1px solid #443da0;
+}
+
+h3[id="udpcon"] {
+     width: auto;
+}
+
+table#udpconnections table {
+     overflow-x: auto !important;
+}
+
+table#udpconnections th {
+      padding: 5px 2px;
+}
+
+table#udpconnections table i {
+     font-weight: bold;
+     line-height: 150%;
+     letter-spacing: 0.1em;
+}
+
+table#udpconnections tr a img {
+      margin-top: 3px !important;
+}
+
+table#udpconnections tr:hover, table#ntcpconnections tr:hover, #jobstats tr:hover, #schedjobs tr:hover, #jardump tr:hover, #webappconfig tr:hover td {
+     background: #020022;
+     color: #eff1ff;
+}
+
+table#udpconnections td > *, table#ntcpconnections td > * {
+     vertical-align: middle;
+}
+
+table#udpconnections td:first-child, table#udpconnections td:nth-child(2) {
+     width: 50px;
+     padding: 2px 4px;
+     white-space: nowrap;
+}
+
+table#udpconnections tr:hover td, table#ntcpconnections tr:hover td {
+     color: #c9ceff;
+}
+
+table#udpconnections tr.tablefooter td {
+     color: #c9ceff;
+}
+
+table#udpconnections tr.tablefooter:hover td {
+     border-top: 1px solid #443da0;
+}
+
+table#udpconnections tr.tablefooter td:first-child {
+     padding-left: 9px;
+}
+
+table#udpconnections td[class="cells"]:first-child, table#ntcpconnections td[class="cells"]:first-child {
+     width: 50px;
+     white-space: nowrap;
+     text-align: right;
+}
+
+table#ntcpconnections td[class="cells"]:last-child {
+     font-weight: bold !important;
+     width: 100px;
+}
+
+table#ntcpconnections {
+     overflow-x: scroll !important;
+}
+
+/* peers - sort icons */
+
+#ntcpconnections th, #udpconnections th {
+     background: #000010 !important;
+}
+
+#udpconnections th {
+     vertical-align: top;
+     padding-top: 3px;
+}
+
+.sortup, .sortdown, .sortupactive, .sortdownactive {
+     padding: 1px 0;
+     border: 1px solid #117;
+     border: 1px solid #443da0;
+     border-radius: 1px;
+     margin: 4px 1px 0 !important;
+     vertical-align: middle;
+     text-align: center;
+     display: inline-block;
+     width: 16px;
+     height: 12px;
+     background-size: 10px auto, 100% 100% !important;
+}
+
+.sortup, .sortdown {
+     box-shadow: inset 0 0 0 1px #000;
+     opacity: 0.5;
+}
+
+.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
+     margin: 0;
+     padding: 0;
+     opacity: 0;
+     width: 16px;
+     height: 14px;
+     vertical-align: middle;
+     text-align: center;
+     filter: hue-rotate(60deg);
+}
+
+.sortupactive, .sortdownactive {
+     opacity: 1;
+     box-shadow: inset 2px 2px 1px #000;
+}
+
+.sortup {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #004, #000);
+}
+
+.sortup:hover {
+     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #000, #004);
+     border: 1px solid #652787;
+     opacity: 1;
+}
+
+.sortup a:focus, .sortdown a:focus {
+     background: rgba(237, 207, 255, 0.2);
+     border-radius: 1px;
+     margin-top: -1px;
+     height: 14px;
+     width: 16px;
+     display: inline-block;
+}
+
+.sortupactive {
+     background: url(images/sort_up.png) center center no-repeat, #005;
+}
+
+.sortdown {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #004, #000);
+}
+
+.sortdown:hover {
+     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #000, #004);
+     border: 1px solid #652787;
+     opacity: 1;
+}
+
+.sortdownactive {
+     background: url(images/sort_down.png) center center no-repeat, #005;
+     border: 1px solid #005;
+}
+
+/* end peer sort */
+
+.backlogged {
+     font-size: 14pt;
+     line-height: 0;
+}
+
+pre#transports {
+     border: 1px solid #443da0;
+     padding: 15px 7px 5px 15px;
+     margin: 0;
+     background: #000;
+     width: calc(100% - 24px);
+}
+
+a[name="chelp"]:hover, a[name="help"]:hover, a[name="chelp"]:active, a[name="help"]:active { /* hide /help anchorpoints */
+     color: #c9ceff !important;
+     text-decoration: none;
+     text-shadow: none;
+}
+
+.homelinkedit th:nth-child(3), .homelinkedit th:last-child {/* /confighome */
+     text-align: left !important;
+     text-transform: none !important;
+     padding-left: 5px;
+}
+
+.homelinkedit tr:last-child td:first-child {
+     text-align: right;
+}
+
+.homelinkedit input[type="text"] {
+     margin-left: 0;
+}
+
+#config_homepage .delete {
+     float: left;
+}
+
+.formaction#homesites {
+     margin-bottom: -2px !important;
+}
+
+.formaction#homeapps, .formaction#homesites, .formaction#tunnelconfigsave, .formaction#homesearch {
+     border: 1px solid #443da0;
+     background: #000;
+     margin-top: -2px;
+}
+
+.formaction#homesearch {
+     margin-bottom: -2px !important;
+}
+
+.formaction#themeui {
+     padding: 2px 0 12px !important;
+}
+
+#themesettings hr {
+     margin: 5px -7px;
+}
+
+tr#addnew {
+     border-top: 1px solid #443da0;
+}
+
+/* /configui lang selection boxes + theme selection */
+
+div.themechoice {
+     width: 120px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     border: 1px solid #241f69;
+     float: left;
+     text-align: center;
+     padding: 0 4px;
+     margin: 4px;
+     border-radius: 2px;
+     background: linear-gradient(to bottom, #020020, #000);
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.themechoice:hover {
+     border: 1px solid #652787;
+     background: #000;
+}
+
+.themechoice:hover .themelabel {
+     border-top: 1px solid #652787 !important;
+     background: #000 !important;
+     color: #652787;
+}
+
+.themechoice:active .themelabel, .langselect:active .ui_lang {
+     border-top: 1px solid #652787 !important;
+     background: #652787 !important;
+     color: #c9ceff !important;
+     box-shadow: inset 0 0 0 1px #000 !important;
+}
+
+.themechoice:hover object {
+     filter: drop-shadow(0 0 2px #652787);
+}
+
+.themechoice object, .themechoice img {
+     padding: 3px 3px 4px;
+}
+
+.themechoice object img {
+     padding: 3px 3px 0;
+     margin-bottom: 0;
+}
+
+.themechoice .optbox {
+     min-width: 114px !important;
+     min-height: 80px !important;
+     opacity: 0; /* hide the radio icon so we can use thumbnail img instead */
+     margin-left: -33px;
+     z-index: 999;
+     position: absolute;
+}
+
+.themechoice .optbox + img {
+     padding: 3px 0 !important;
+}
+
+.themechoice .optbox:hover + object ~ div.themelabel {
+     color: #652787;
+}
+
+.themechoice .optbox:checked + object ~ div.themelabel {
+     background: #040033 !important;
+     color: #c9ceff;
+     font-weight: bold;
+}
+
+.themechoice .optbox:focus + object ~ div.themelabel {
+     color: #652787;
+     box-shadow: inset 0 0 10px 3px #000;
+}
+
+#themeoptions {
+     clear: both;
+     border-top: 1px solid #443da0;
+     margin: 0 -7px 5px;
+     position: relative;
+     top: 8px;
+     padding: 5px 10px 8px 5px;
+}
+
+#themeoptions br {
+     display: none;
+}
+
+#themeoptions label {
+     white-space: nowrap;
+     margin: 4px 10px 4px 0 !important;
+     display: inline-block;
+}
+
+p#helptranslate {
+     position: relative;
+     top: 8px;
+     margin: 0 -7px;
+     padding: 15px 10px 15px 50px !important;
+     text-align: left !important;
+     border-top: 1px solid #443da0;
+     border-bottom: 1px solid #443da0;
+     background: url(/themes/console/images/info/notice.png) left 14px center no-repeat, #000;
+     background-size: 28px 28px;
+}
+
+#themeoptions input {
+     margin-left: 5px;
+}
+
+#themeoptions input[type="checkbox"] {
+     min-height: 16px;
+}
+
+.themelabel {
+     border-top: 1px solid #241f69 !important;
+     margin-left: -4px;
+     margin-right: -4px;
+     padding: 4px 2px;
+     background: #010010 url(images/titles.png) center center repeat-x;
+     background: linear-gradient(to bottom, #121225 50%, #000011 50%, #00000d 50%);
+     color: #7670c2;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+h3#themeheading, h3#langheading, h3#passwordheading {
+     border-radius: 0;
+     border: 1px solid #443da0;
+     padding: 6px 10px;
+     font-size: 10.5pt;
+     word-spacing: 0.1em;
+     letter-spacing: 0.08em;
+     margin-bottom: 0;
+     background: #000;
+     background: linear-gradient(to right, #000000, #010010 70%, #010013 90%);
+}
+
+div#themesettings {
+     clear: both;
+     border: 1px solid #443da0;
+     padding: 8px 7px 0;
+     margin: -1px 0;
+}
+
+td#themeselect {
+     clear: both;
+     border: 1px solid #443da0;
+     padding: 8px 7px 0;
+     margin: -1px 0;
+}
+
+#themeselect hr {
+     display: inline !important;
+}
+
+.langselect { /* containing box for lang selection */
+     width: 120px;
+     float: left;
+     margin: 4px;
+     text-align: center;
+     border: 1px solid #241f69;
+     padding: 8px 4px 0;
+     border-radius: 2px;
+     background: linear-gradient(to bottom, #020020, #000);
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.langselect .optbox {
+     opacity: 0;
+     outline: 1px dotted #652787;
+     margin-left: 0;
+}
+
+.langselect .optbox {
+     opacity: 0;
+     outline: 1px dotted !important;
+     min-height: 60px;
+     min-width: 111px !important;
+     margin: -5px 0 -30px -2px;
+     vertical-align: text-bottom;
+     text-align: center;
+     z-index: 999;
+}
+
+.langselect img {
+     border: 1px solid #241f69;
+     margin-bottom: 0;
+     margin-left: -65px;
+     margin-top: 7px !important;
+     position: absolute;
+}
+
+.langselect input[name="lang"]:checked + img {
+     width: 19px;
+     height: 13px;
+     border: 1px solid #652787;
+     margin-top: 6px !important;
+     margin-left: -67px;
+}
+
+.langselect input[name="lang"]:hover + img {
+     box-shadow: 0 0 1px 1px #652787;
+}
+
+.langselect input[name="lang"]:hover + img + div.ui_lang {
+     color: #652787;
+}
+
+.langselect input[name="lang"]:checked + img + div.ui_lang {
+     background: #040033 !important;
+     color: #c9ceff;
+     font-weight: bold;
+}
+
+.langselect input[name="lang"]:focus + img + div.ui_lang {
+     color: #652787 !important;
+     box-shadow: inset 0 0 10px 3px #000 !important;
+}
+
+.langselect input[name="lang"]:active + img + div.ui_lang {
+     color: #c9ceff !important;
+     box-shadow: inset 0 0 0 1px #000 !important;
+}
+
+.langselect:hover, .langselect:active {
+     border: 1px solid #652787;
+     background: #000;
+}
+
+.langselect:hover .ui_lang {
+     border-top: 1px solid #652787;
+     background: #000;
+     color: #652787;
+}
+
+/* end flag as radio icons */
+
+.ui_lang { /* lang text label */
+     text-align: center;
+     background: #010010;
+     padding: 3px 2px 4px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     width: 124px;
+     margin: 10px -4px 0 !important;
+     border-top: 1px solid #241f69;
+     border-radius: 0 0 2px 2px;
+     text-transform: capitalize;
+     background: linear-gradient(to bottom, #121225 50%, #000011 50%, #00000d 50%);
+     color: #7670c2;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+p#helptranslate {
+     clear: both;
+     padding: 6px 10px 10px;
+     text-align: right;
+}
+
+h3#themeheading {
+}
+
+h3#langheading {
+     margin-bottom: 0;
+}
+
+div#langsettings {
+     border: 1px solid #443da0;
+     padding: 8px 7px 12px;
+     margin-top: -1px;
+     margin-bottom: -12px;
+     background: #000;
+}
+
+#langsettings hr {
+     display: none;
+}
+
+.formaction#langui {
+     margin: 7px -8px -15px;
+     border: 1px solid #443da0;
+     background: #000;
+}
+
+/* console password layout */
+
+h3#passwordheading {
+     margin-top: 25px;
+     margin-bottom: -2px;
+}
+
+table#consolepass th:nth-child(2) {
+     text-align: left;
+}
+
+table#consolepass td:first-child {
+     width: 100px;
+     white-space:nowrap;
+}
+
+table#consolepass th {
+     padding: 5px;
+}
+
+table#consolepass td {
+     padding: 2px 3px;
+}
+
+table#consolepass td {
+     border-bottom: 1px solid #443da0;
+     padding: 5px 10px;
+}
+
+table#consolepass input {
+     margin: 5px;
+}
+
+table#consolepass td#pw_adduser {
+     padding: 5px 10px;
+     background: #000;
+}
+
+td#pw_adduser input {
+     margin: 5px 20px 5px 5px !important;
+}
+
+table#consolepass input[name="name"] {
+     margin-right: 20px;
+}
+
+table#consolepass input[type="password"] {
+     width: 200px;
+}
+
+.formaction#consolepass {
+     margin-bottom: -2px !important;
+     margin-top: -2px;
+     border: 1px solid #443da0;
+     background: #000;
+}
+
+#consolepass input[name="name"], #externali2cp input[name="user"] {
+     background: #000 url(/themes/console/images/buttons/user.png) 5px center no-repeat;
+     background: url(/themes/console/images/buttons/user.png) 5px center no-repeat, linear-gradient(to bottom, #000, #000019);
+     padding: 4px 5px 4px 26px !important;
+     background-size: 16px 16px, 100% 100% !important;
+}
+
+#consolepass input[name="name"]:focus, #externali2cp input[name="user"]:focus {
+     background: #000 url(/themes/console/images/buttons/user.png) 5px center no-repeat !important;
+}
+
+#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"] {
+     background: #000 url(/themes/console/images/buttons/password.png) 3px center no-repeat;
+     background: url(/themes/console/images/buttons/password.png) 3px center no-repeat, linear-gradient(to bottom, #000, #000019);
+     padding: 4px 5px 4px 22px !important;
+     background-size: 16px 16px, 100% 100% !important;
+}
+#consolepass input[name="nofilter_pw"]:focus, #externali2cp input[name="nofilter_pw"]:focus {
+     background: #000 url(/themes/console/images/buttons/password.png) 3px center no-repeat !important;
+}
+
+/* end /configui mods */
+
+form[action="/createreseed"] > h3 {
+     border-radius: 0;
+     border: 1px solid #443da0;
+     padding: 10px;
+     font-size: 10.5pt;
+     word-spacing: 0.1em;
+     letter-spacing: 0.08em;
+     background: linear-gradient(to right, #000000, #010010 70%, #010013 90%);
+     margin-bottom: -13px;
+}
+
+table#configclient {
+     margin-top: -11px !important;
+}
+
+/* configfamily */
+
+#newfamily, #exportfamily {
+     margin-bottom: 14px !important;
+}
+
+#exportfamily tr:nth-child(2) td:first-child {
+     background: #000 url(/themes/console/images/info/export_key.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+#leavefamily {
+     margin-bottom: 10px !important;
+}
+
+#leavefamily tr:last-child td:first-child {
+     background: #000 url(/themes/console/images/info/leave_family.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
+}
+
+/* configreseed */
+
+table#reseedconfig input[type="text"], table#reseedconfig input[type="password"] {
+     width: 170px;
+}
+
+#reseednow {
+     margin-top: -16px !important;
+}
+
+.formaction#resetreseed {
+     margin: -4px -5px 0 0;
+}
+
+table#reseedconfig textarea {
+     width: 100%;
+     width: calc(100% - 5px);
+}
+
+#reseedconfig tr:nth-child(2) br {
+     display: none;
+}
+
+#reseedconfig tr:nth-child(2) label {
+     white-space: nowrap;
+     margin-right: 10px;
+}
+
+#reseedconfig td:first-child {
+     line-height: 120%;
+}
+
+/* /configservice */
+
+.formaction#shutdown, .formaction#restart, .formaction#systray, .formaction#runonstart, .formaction#dumpthreads, .formaction#browserstart {
+     border: 1px solid #443da0;
+     background: #000;
+     margin-top: -11px;
+     margin-bottom: 8px;
+}
+
+/* /configpeer */
+
+
+ul#banlist {
+     margin-top: -2px;
+}
+
+ul#banlist tt {
+     color: #c11f5d;
+}
+
+ul#banlist {
+     border: 1px solid #443da0;
+     background: #000;
+     padding: 10px 10px 10px 0;
+     margin: -1px 0 13px;
+     -moz-column-count: auto;
+     -moz-column-width: 300px;
+     -moz-column-gap: 10px;
+     -moz-column-rule: 1px dotted #443da0;
+     -webkit-column-count: auto;
+     -webkit-column-width: 300px;
+     -webkit-column-gap: 10px;
+     -webkit-column-rule: 1px dotted #443da0;
+     column-count: auto;
+     column-width: 300px;
+     column-gap: 10px;
+     column-rule: 1px dotted #443da0;
+}
+
+#profiles ul#banlist {
+     margin-top: -4px !important;
+}
+
+#banlist li {
+     list-style: none !important;
+     border-bottom: 1px dotted #443da0;
+     margin: 0 10px 3px;
+     padding-top: 3px;
+     min-width: 250px;
+     min-height: 46px;
+     width: 88%;
+     padding-bottom: 5px;
+     break-inside: avoid;
+     page-break-inside: avoid;
+     -webkit-break-inside: avoid;
+     display: inline-block;
+}
+
+/* /confignet */
+
+h3#iptransport {
+     margin-bottom: 11px;
+}
+
+p#defaultswork {
+     margin-bottom: 11px !important;
+}
+
+p#upnpconfig, p#ipchange, p#ipv6config, p#tcpconfig, p#confignotes, p#defaultswork {
+     padding: 10px;
+     border: 1px solid #443da0;
+     margin-bottom: -13px;
+     margin-top: -12px;
+}
+
+p#defaultswork {
+     padding: 15px 10px 15px 45px !important;
+}
+
+p#confignotes {
+     margin-bottom: -21px;
+     padding: 15px 10px 15px 45px;
+     background: url(/themes/console/images/info/infohelp.png) 12px center no-repeat !important;
+}
+
+p#ipconfig, p#ipv4config, p#udpconfig, p#externaltcp {
+     border: 1px solid #443da0;
+     border-bottom: none;
+     padding: 10px;
+     background: #010010;
+}
+
+table#bandwidthconfig {
+     margin-bottom: 1px;
+}
+
+table#bandwidthconfig td:first-child {
+     width: 200px;
+     white-space: nowrap;
+}
+
+table#bandwidthconfig {
+     padding: 5px 10px !important;
+}
+
+table#bandwidthconfig input, table#bandwidthconfig select {
+     margin-right: 3px;
+}
+
+/* confignet tidyup */
+
+#netconfig .optbox {
+     margin: 10px 6px 2px !important;
+     display: inline-block !important;
+     vertical-align: sub !important;
+}
+
+#netconfig .optbox:first-child {
+     margin-top: 6px !important;
+     margin-bottom: 6px !important;
+}
+
+#netconfig .optbox:last-child, #netconfig .optbox[value="only"], #netconfig .optbox[name="disableUDP"], #netconfig .optbox[value="disabled"] {
+     margin-bottom: 6px !important;
+}
+
+#netconfig input[type="text"] + br + .optbox, #netconfig .optbox[name="ntcpAutoPort"] {
+     margin-top: 3px !important;
+}
+
+#netconfig input[name*="ost"] {
+     width: 250px !important;
+}
+
+/* end confignet tidyup */
+/* end /confignet */
+
+/* /events */
+
+div.eventspanel {
+     margin-top: -10px;
+}
+
+form[action="events"] {
+     border: 1px solid #443da0;
+     margin-top: -11px;
+     padding: 10px 20px 10px;
+     margin-bottom: 20px;
+}
+
+form[action="events"] > br {
+     display: none;
+}
+
+form[action="events"] > .formaction {
+     margin-bottom: -11px !important;
+     margin-right: -21px;
+     margin-left: -21px;
+}
+
+.eventspanel th {
+     text-align: left;
+     padding-left: 10px;
+     font-size: 10pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+.eventspanel table {
+     font-size: 9pt;
+}
+
+.eventspanel table tr:hover {
+     background: #020020;
+}
+
+.eventspanel table td {
+     padding: 5px 10px;
+}
+
+table#addkeyring td:first-child {
+     width: 15%;
+     white-space: nowrap;
+     font-weight: bold;
+     padding-right: 0;
+}
+
+table#addkeyring tr:last-child {
+     border-top: 1px solid #443da0;
+     background: linear-gradient(to bottom, #010014, #010010 50%, #010010 100%);
+}
+
+table#addkeyring tr:last-child td {
+     padding-right: 6px;
+}
+
+#addkeyring textarea, #addkeyring input[type="text"] {
+     width: 95%;
+     width: calc(100% - 15px);
+}
+
+p#keyringhelp, p#webappconfig, p#availableplugins, p#pluginconfigtext, p#clientdefaultshelp, p#bwshare, p#editclients, p#upnpstatus, p#gatherstats {
+     background: #000 url(/themes/console/images/info/infohelp.png) 12px center no-repeat !important;
+     border: 1px solid #443da0;
+     padding: 15px 15px 15px 45px !important;
+}
+
+#config_reseed p.infohelp, #config_family p.infohelp, p#tunnelconfig {
+     margin-top: 0;
+}
+
+p#keyringhelp, #ffconf, #bwlimiter, #i2pclientconfig, .confignav + h3, #advancedclientconfig, .confignav + .infowarn, #webappconfig,
+#config_logging h3, #iptransport, .confignav + form > h3, #pluginmanage, .confignav + .infohelp, #statsForm > h3.ptitle, .infowarn + .infohelp {
+     margin-top: -4px !important;
+}
+
+p#availableplugins {
+     margin: 12px 0 -1px;
+}
+
+p#upnpstatus {
+     margin-top: 10px;
+}
+
+p#webappconfigtext + p, p#pluginconfigtext {
+     margin-bottom: -1px;
+}
+
+h3#pconfig {
+     margin-top: -4px;
+}
+
+#pluginconfig th:first-child, #pluginconfig td:first-child, #webappconfig th:first-child {
+     text-align: right;
+     white-space: nowrap;
+}
+
+#webappconfig th:last-child {
+     text-align: left;
+     padding-left: 5px;
+}
+
+#webappconfig td:first-child::after {
+     content: "";
+     display: inline-block;
+     min-height: 28px;
+     vertical-align: middle;
+}
+
+#pluginconfig td:nth-child(2) {
+     border-right: 1px inset #120f35 !important;
+}
+
+#pluginconfig td:last-child table {
+     padding: 5px;
+     margin: 5px 15px 5px 5px !important;
+     width: 99%;
+     width: calc(100% - 8px);
+}
+
+/* /advanced */
+
+.wideload > form > input[type="hidden"] + table  + p + hr + .formaction {
+     border-left: none;
+     border-right: none;
+}
+
+input[type="hidden"] + p {
+     border: 1px solid #443da0;
+     padding: 10px;
+     margin-bottom: -21px;
+     background: #000;
+}
+
+input[type="hidden"] + p + p {
+     border: 1px solid #443da0;
+     padding: 10px;
+     margin-top: 20px;
+     margin-bottom: -21px;
+     background: #010010;
+}
+
+/* /stats */
+
+form#statnav {
+     border: 1px solid #443da0 !important;
+     padding: 10px 10px 10px 15px;
+}
+
+h3.stats {
+     border: 1px solid #443da0;
+     border-radius: 0;
+}
+
+ul.statlist {
+     border: 1px solid #443da0;
+     margin-bottom: -21px !important;
+     margin-top: -11px !important;
+     padding: 10px 0 5px;
+     background: #000;
+}
+
+ul.statlist:last-of-type {
+     margin-bottom: -1px !important;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+ul.statlist {
+     margin-bottom: -25px !important;
+}
+
+ul.statlist:last-of-type {
+     margin-bottom: -6px !important;
+}
+}
+
+ul.statlist a[name], ul.statlist b, ul.statlist li b, ul.statlist a[name]:hover {
+     color: #f3e8fc !important;
+     text-decoration: none;
+     letter-spacing: normal;
+}
+
+ul.statlist li::before {
+     content: "\1F6C8\00A0";
+     content: "\2B26\00A0";
+     font-size: 14pt;
+     line-height: 50%;
+     vertical-align: baseline;
+     color: #f3e8fc;
+}
+
+ul.statlist li {
+     line-height: 120% !important;
+     list-style: none;
+     margin-bottom: -3px;
+}
+
+ul.statlist li li {
+     margin-left: 16px;
+     margin-right: -20px;
+     line-height: 120% !important;
+     list-style: none;
+}
+
+ul.statlist li li::before {
+     content: "\279F\00A0";
+     vertical-align: baseline;
+}
+
+ul.statlist li li:last-child::before {
+     content: "\27A1\00A0";
+}
+
+ul.statlist li li:last-child {
+     padding-bottom: 5px !important;
+}
+
+.statlist a[href*="graph"]::before {
+     content: "\27A1\00A0";
+     font-size: 14pt;
+}
+
+.statlist a[href$="&showEvents=true"]::before {
+     display: none;
+}
+
+.main#stats form {
+     border: 1px solid #443da0;
+     padding: 10px;
+     margin: -13px 0 -11px;
+}
+
+.statlist li ul {
+     margin-top: 10px;
+}
+
+li.noevents {
+     margin-top: 0 !important;
+     margin-bottom: 10px !important;
+}
+
+/* end stats */
+
+h3#exploratorytunnels {
+     margin-top: 15px;
+}
+
+h3.tabletitle + .statusnotes, table.tunneldisplay {
+     margin-top: -1px;
+}
+
+.statusnotes + .statusnotes {
+     margin-top: -6px;
+}
+
+.statusnotes:last-child {
+     margin-bottom: 10px;
+}
+
+form > table {
+     font-size: 9pt;
+}
+
+/* configtunnels */
+
+table#tunnelconfig td:first-child {
+     font-weight: bold;
+}
+
+.formaction#tunnelconfigsave {
+     margin-top: -32px !important;
+}
+
+/* end /configtunnels */
+
+/* /configupdate */
+
+table#i2pupdates {
+     margin-top: 11px;
+     margin-bottom: -3px !important;
+}
+
+table#i2pupdates td:first-child {
+     width: 15%;
+     white-space: nowrap;
+     padding-left: 10px;
+}
+
+table#i2pupdates input[name*="URL"], table#i2pupdates textarea {
+     width: 98%;
+     width: calc(100% - 10px);
+     resize: none;
+}
+
+table#i2pupdates tr:last-child td {
+     padding-right: 6px;
+     background: #000 !important;
+}
+
+/* /configlogging */
+
+input[name="logfilename"], input[name="logformat"], input[name="logdateformat"], input[name="logfilesize"], select[name="defaultloglevel"], select[name="newloglevel"] {
+     width: 125px;
+}
+
+#loggingoptions td {
+     padding: 6px;
+}
+
+#loggingoptions td:first-child {
+     padding-right: 3px;
+     line-height: 120%;
+}
+
+#loggingoptions td:nth-child(2) {
+     width: 170px;
+}
+
+#loggingoptions tr:nth-last-child(2) {
+     white-space: nowrap;
+}
+
+#loggingoptions input[type="text"], #loggingoptions select, #loggingoptions textarea {
+     min-width: 170px !important;
+     margin: 3px;
+}
+
+#loggingoptions textarea {
+     width: 99%;
+     width: calc(100% - 8px);
+     resize: none;
+}
+
+#loggingoptions select[name="newlogclass"] {
+     width: calc(100% - 185px);
+}
+
+/* configsidebar */
+
+#config_summarybar .configtable td:not(.optionsave) {
+     padding-left: 50px;
+     background: url(/themes/console/images/info/interval.png) 12px center no-repeat;
+     background-size: 28px 28px;
+}
+
+table#sidebarconf {
+     margin-top: -1px;
+}
+
+#sidebarconf tr:hover {
+     background: #020020;
+}
+
+#sidebarconf + .formaction {
+     margin-bottom: -3px !important;
+}
+
+#sidebarconf button {
+     margin: 2px;
+     padding: 4px 3px;
+     min-width: 0;
+     background: #000;
+     background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%);
+}
+
+#sidebarconf button:active {
+     background: #652787;
+}
+
+#sidebarconf button:hover img {
+     opacity: 1;
+}
+
+#sidebarconf button:active img {
+     mix-blend-mode: luminosity;
+}
+
+#sidebarconf button img {
+     height: 12px;
+     width: auto;
+}
+
+#sidebarconf th:nth-child(1), .homelinkedit th:first-child, #consolepass th:first-child {
+     text-align: center;
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #121225 50%, #000011 50%, #00000d 50%);
+     text-indent: -99999px;
+     width: 5%;
+}
+
+#sidebarconf th:nth-child(2) {
+     text-align: left;
+}
+
+#sidebarconf td:first-child {
+     width: 60px;
+}
+
+#sidebarconf td:nth-child(3), #sidebarconf td:nth-child(4) {
+     width: 60px;
+     padding: 0;
+     white-space:nowrap;
+}
+
+#sidebarconf td:nth-child(3) {
+}
+
+#sidebarconf td:nth-child(4) {
+     text-align: left;
+}
+
+#sidebarconf tr:last-child td {
+     background: #000;
+     border-top: 1px solid #443da0;
+}
+
+#sidebarconf select {
+     margin-left: 0;
+     width: 100% !important;
+}
+
+#sidebarconf tr:last-child td:last-child {
+     text-align: left;
+     padding-left: 0;
+}
+
+.formaction#sidebardefaults {
+     margin-top: -2px !important;
+     margin-bottom: -2px !important;
+}
+
+/* end configsidebar */
+
+/* /configservice */
+
+h3#shutdownrouter, h3#restartrouter, h3#servicedebug, h3#browseronstart, h3#rononstartup, h3#systray {
+     margin-bottom: -6px;
+}
+
+h3#restartrouter, h3#servicedebug, h3#browseronstart, h3#rononstartup, h3#systray {
+      margin-top: 11px !important;
+}
+
+/* info paragraphs */
+
+h3#shutdownrouter + p, h3#restartrouter + p, h3#servicedebug + p, h3#browseronstart + p, h3#runonstartup + p, h3#systray + p {
+     background: #010008 url(/themes/console/images/info/infohelp.png) 12px center no-repeat !important;
+     padding: 10px 15px 10px 50px;
+     border: 1px solid #443da0;
+     border-bottom: none;
+     margin: 5px 0 -20px !important;
+}
+
+h3#servicedebug + p + p {
+     padding: 10px;
+     border: 1px solid #443da0;
+     border-bottom: none;
+     margin-bottom: -21px;
+     background: #010010;
+     margin-top: 20px;
+}
+/* configclients */
+
+table#clientconfig th:first-child {
+     text-align: right;
+     padding-right: 5px;
+}
+
+table#clientconfig th:last-child {
+     text-align: left;
+     padding-left: 5px;
+}
+
+.formaction#clientsconfig, .formaction#webappconfigactions, .formaction#pluginconfigactions, .formaction#sidebardefaults {
+     border: 1px solid #443da0;
+     background: #000;
+     margin-bottom: 4px;
+}
+
+.formaction#webappconfigactions, .formaction#pluginconfigactions, .formaction#clientsconfig {
+     margin-top: -2px;
+     margin-bottom: -2px;
+}
+
+table#externali2cp {
+     margin-bottom: -2px !important;
+}
+
+.infohelp#clientconf {
+     margin-bottom: -13px;
+}
+
+.infowarn#clientconf {
+     margin-bottom: -2px;
+}
+
+/* end /configclients */
+
+/* /help */
+
+.main#help h3 {
+    padding: 7px 10px;
+    font-size: 10pt;
+}
+
+#legal, #sidebarhelp, #volunteer, #reachabilityhelp, #configurationhelp, #faq {
+     border: 1px solid #443da0;
+     padding: 0 20px;
+     margin: 10px 0;
+     background: #000;
+}
+
+div#volunteer {
+     border: 1px solid #443da0;
+     padding: 0 20px;
+     margin: -5px 0 10px !important;
+     background: #000 url(images/scarface.jpg) bottom right no-repeat !important;
+     background-size: auto 60% !important;
+}
+
+#legal h2, #sidebarhelp h2, #volunteer h2, #reachabilityhelp h2, #configurationhelp h2, #faq h2 {
+     padding: 10px;
+     text-transform: uppercase;
+     font-size: 11pt;
+     text-align: left;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-radius: 0;
+     margin: -1px -21px 10px !important;
+     background: linear-gradient(to right, #000000, #010010 70%, #010013 90%);
+}
+
+#legal h2 + p {
+     padding-top: 10px;
+}
+
+#sidebarhelp h3, #faq h3 {
+     padding: 10px;
+     text-transform: uppercase;
+     font-size: 10.5pt;
+     text-align: left;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-radius: 0;
+     margin: 0 -21px 10px !important;
+     background: linear-gradient(to right, #000000, #010010 70%, #010013 90%);
+     border: 1px solid #443da0;
+}
+
+#changelog h2, #advancedsettings h2 {
+     padding: 10px;
+     text-transform: uppercase;
+     font-size: 11pt;
+     text-align: left;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-radius: 0;
+     margin: 0 0 -11px !important;
+}
+
+#changelog pre {
+     margin-top: 11px;
+     padding: 10px 10px 10px 20px;
+     max-height: 600px;
+     overflow-y: scroll;
+     width: calc(100% - 32px);
+     border-left: 1px solid #443da0;
+     border-right: 1px solid #443da0;
+     background: #000;
+}
+
+#advancedsettings h2 {
+     margin-bottom: -13px !important;
+}
+
+#advancedsettings p.infohelp {
+     margin-top: 12px;
+     margin-bottom: -2px !important;
+}
+
+#configinfo th {
+     text-align: left;
+     padding: 8px 10px;
+     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     color: #393;
+     background: #002;
+     background: linear-gradient(to right, #000, #002);
+}
+
+#configinfo td {
+     text-align: justify;
+     padding: 7px 10px;
+}
+
+p#fullhistory {
+     text-align: right;
+     margin: -13px 0 9px;
+     border: 1px solid #443da0;
+     padding: 5px 10px;
+     background: #000;
+     position: relative;
+     z-index: 999;
+}
+
+ul#upnphelp li:last-child, #legal ul li:last-child {
+     padding-bottom: 0;
+}
+
+.main#help td.infohelp, .main#help td.infowarn {
+     background-size: 24px 24px !important;
+     padding-left: 46px !important;
+}
+
+.main#help #configinfo .infowarn {
+     border: none;
+     border-bottom: 1px inset #010008;
+     box-shadow: none;
+     background-size: 20px 20px !important;
+     padding: 7px 10px 7px 40px !important;
+}
+
+/* mini faq */
+
+#faq h3 {
+     padding: 6px 10px 8px 35px !important;
+     background: url(/themes/console/images/info/question.png) 10px center no-repeat, linear-gradient(to bottom, #191729, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000000 56%) !important;
+     background-size: 18px 18px, 100% 100% !important;
+     background-blend-mode: luminosity, normal;
+     text-transform: none;
+     font-size: 10.5pt !important;
+     letter-spacing: 0;
+     word-spacing: 0;
+}
+
+#faq p.infohelp {
+     margin: 10px -10px !important;
+}
+
+#faq ul {
+     margin-bottom: -15px !important;
+}
+
+#faq li code {
+     margin-left: 10px;
+}
+
+#faq code, #help code {
+     user-select: all;
+     -moz-user-select: all;
+     -webkit-user-select: all;
+}
+
+#portfaq {
+     width: auto;
+     margin: 10px -10px;
+}
+
+#portfaq td, #portfaq th {
+     padding-top: 10px !important;
+     padding-bottom: 10px !important;
+}
+
+#portfaq th:first-child, #portfaq td:first-child {
+     font-weight: bold;
+     text-align: right;
+}
+
+#portfaq .infohelp {
+     padding-top: 15px !important;
+     padding-bottom: 15px !important;
+}
+
+#portfaq th {
+     text-align: left;
+     padding: 8px 5px !important;
+}
+
+#portfaq th[colspan="3"] {
+     text-align: left;
+     font-size: 10.5pt !important;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     padding-left: 10px !important;
+}
+
+#portfaq td[colspan="3"] {
+     font-weight: normal;
+}
+
+#portfaq td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#portfaq td:first-child {
+     padding-left: 10px;
+}
+
+#portfaq td:last-child, #portfaq td[colspan="3"] {
+     text-align: justify;
+     padding-right: 10px;
+}
+
+/* end mini faq */
+/* end help */
+
+/* netdb (main section) */
+
+table#netdboverview {
+     margin: -5px 0 10px;
+}
+
+#netdboverview td {
+     padding: 0;
+}
+
+#netdbversions, #netdbtransports, #netdbcountrylist {
+     border: 1px solid #120f35 !important;
+     margin-bottom: 0;
+}
+
+#netdbcountrylist img {
+     margin-right: 5px;
+     text-align: right;
+}
+
+#netdbtransports {
+     border-left: 1px solid transparent !important;
+     border-right: 1px solid transparent !important;
+}
+
+#netdbtransports th, #netdbtransports td {
+     padding-left: 10px !important;
+     padding-right: 10px !important;
+}
+
+#netdbversions th, #netdbtransports th, #netdbcountrylist th {
+     border-top: none;
+     padding: 3px 5px;
+     line-height: 150%;
+}
+
+#netdbversions td, #netdbtransports td, #netdbcountrylist td {
+     padding: 5px;
+}
+
+table[cellspacing="30"] > tbody > tr > th[colspan="3"] { /* netdb header */
+     padding: 10px;
+     text-transform: uppercase;
+     font-size: 11pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+table[cellspacing="30"] > tbody > tr > td {
+     padding: 8px;
+}
+
+table[cellspacing="30"] > tbody > tr > td > table > tbody > tr > th:first-child {
+     text-align: left;
+     padding: 5px;
+}
+
+table[cellspacing="30"] > tbody > tr > td:first-child > table > tbody > tr > th:first-child {
+     text-align: center;
+}
+
+/* /netdb - Sybil */
+
+th > img[src^="/imagegen"] { /* scale down header images */
+     height: 24px;
+     width: 24px;;
+     margin: -1px;
+     border-left: 1px solid #443da0;
+}
+
+/* Advanced lookup */
+
+#netdblookup {
+     margin-bottom: -4px;
+}
+
+#netdblookup th {
+     text-align: left;
+     font-size: 11pt;
+     letter-spacing: 0.08em;
+     padding: 10px;
+     text-transform: uppercase;
+}
+
+#netdblookup td:first-child {
+     text-align: right;
+     width: 100px;
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+#netdblookup td:nth-child(2) {
+     width: 100px;
+     padding-left: 0;
+}
+
+.subheading {
+     text-align: left !important;
+     background: #000;
+     padding: 10px;
+     border: 1px solid #443da0;
+}
+
+.subheading b {
+     font-size: 10pt !important;
+}
+
+#netdblookup .optbox {
+     margin: 10px ;
+}
+
+#netdblookup .optionsave {
+     padding: 10px !important;
+}
+
+#netdb .tabletitle {
+     margin-bottom: -2px !important;
+}
+
+.sybil_distance th {
+     text-align: left;
+     padding: 5px;
+}
+
+.sybil_distance th:last-child, .sybil_distance td:last-child {
+     text-align: right;
+}
+
+.sybil_distance tr:nth-child(n+2):hover {
+     background: #002;
+     font-weight: bold;
+}
+
+.sybil_distance:last-child {
+     margin-bottom: 9px;
+}
+
+/* end netdb */
+
+/* logs */
+
+a[name="criticallogs"] + p + h3 + p + ul { /* tidy router logs ul */
+     border: 1px solid #443da0;
+     margin-bottom: 15px;
+}
+
+table#enviro, table#criticallogs, table#routerlogs, table#eventlogs, table#wrapperlogs {
+     margin-top: -11px;
+}
+
+table#wrapperlogs {
+     width: 100%;
+     overflow-x: scroll;
+     table-layout: fixed;
+}
+
+table#bugreports {
+     margin-top: 10px;
+}
+
+table#bugreports td {
+     background: url(/themes/console/images/info/infohelp.png) 12px center no-repeat !important;
+     padding: 15px 10px 15px 50px;
+}
+
+table#enviro td {
+     font-weight: normal !important;
+     padding: 5px 10px;
+}
+
+table#enviro td:first-child {
+     width: 100px;
+     text-align: right;
+     padding-right: 0;
+}
+
+table#criticallogs td , table#routerlogs td, table#eventlogs td, table#wrapperlogs td {
+     font-weight: normal !important;
+     padding: 5px 10px;
+     border-top: 1px solid #443da0;
+}
+
+table#criticallogs td:empty {
+     display: none;
+}
+
+table[id$="logs"] tr:nth-child(odd){
+     background: #010011;
+}
+
+table[id$="logs"] tr:nth-child(even){
+     background: #000;
+}
+
+table[id$="logs"] ul {
+     margin: -3px 15px -10px -18px !important;
+}
+
+#wrapperlogs {
+     margin-bottom: 10px;
+}
+
+#wrapperlogs tr:last-child td {
+     padding: 0 0 0 5px;
+}
+
+#wrapperlogs pre {
+     margin-bottom: 0 !important;
+     white-space: pre-wrap !important;
+     word-wrap: break-word;
+     width: 100%;
+     height: 600px;
+}
+
+.main#logs li {
+     word-break: break-all;
+     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+}
+
+.logtable ul li:not(old) {
+     list-style: none !important;
+     margin-left: 15px;
+}
+
+/* Override error log colors */
+
+font[color="#006600"] { /* debug */
+     color: #090;
+}
+
+font[color="#ff00cc"] { /* warning */
+     color: #909;
+}
+
+font[color="#ff3300"] { /* error */
+     color: #d00;
+}
+
+font[color="#cc0000"] { /* critical */
+     color: #f00;
+}
+
+font[color="#000099"] { /* info */
+     color: #bb0;
+}
+
+/* end log color overrides */
+
+#logs li {
+     list-style: none;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     line-height: 130%;
+     text-align: left;
+     display: inline-block;
+     width: 100%;
+     margin-right: 5px !important;
+     padding: 2px 0;
+}
+
+#criticallogs li {
+     width: 100%;
+}
+
+#logs li::after {
+     content: "";
+     display: block;
+     border-top: 1px dotted #005;
+     width: 100%;
+     margin: 5px 0 -3px;
+}
+
+#logs li:last-child::after {
+     border: none;
+     margin: 0;
+}
+
+#logs font[color^="#"]::before {
+     content: "";
+     display: inline-block;
+     width: 6px;
+     height: 6px;
+     background: #fff;
+     border-radius: 50%;
+     margin-right: 5px;
+     margin-left: 0;
+     vertical-align: calc(1px);
+}
+
+#logs li font[color="#cc0000"]::before {
+     background: #f00;
+}
+
+#logs li font[color="#006600"]::before {
+     background: #090;
+}
+
+#logs li font[color="#ff3300"]::before {
+     background: #d00;
+}
+
+#logs li font[color="#ff00cc"]::before {
+     background: #909;
+}
+
+#logs li font[color="#000099"]::before {
+     background: #bb0;
+}
+
+/* /profiles */
+
+#profilelist tr:hover, table#floodfills tr:hover {
+     background: #040033;
+}
+
+#profilelist tr:hover td, table#floodfills tr:hover td {
+     color: #c9ceff;
+}
+
+#profilelist th, #profilelist td {
+     text-align: right;
+}
+
+#profilelist td:nth-child(2), #profilelist th:nth-child(2) {
+     text-align: left;
+}
+
+#profilelist td:first-child, #profilelist th:first-child {
+     width: 52px;
+     text-align: right;
+}
+
+#profilelist td:first-child {
+     text-align: right !important;
+     padding-left: 4px;
+}
+
+#profilelist td:first-child, #profilelist th:first-child, #profilelist td:nth-last-child(2), #profilelist th:nth-last-child(2) {
+     white-space: nowrap;
+     text-align: center;
+}
+
+#profilelist th:last-child {
+     text-align: center;
+}
+
+#profilelist td:last-child {
+     text-align: right;
+     width: 60px;
+     white-space: nowrap;
+}
+
+#profilelist td[colspan="8"] { /* profile class separator */
+     background: #050044;
+     padding: 1px;
+     border: 1px inset #000;
+}
+
+a[href^="configpeer?peer"] {
+     font-size: 0;
+     filter: drop-shadow(0 0 1px #777);
+}
+
+a[href^="configpeer?peer"]::after {
+     content: url(/themes/console/images/buttons/edit.png);
+     vertical-align: bottom;
+     margin-left: 4px;
+}
+
+a[href^="configpeer?peer"]:hover {
+     filter: drop-shadow(0 0 1px #99f);
+}
+
+table#profile_defs, table#thresholds {
+     margin-top: -1px;
+     margin-bottom: 10px;
+}
+
+table#profile_defs td, table#thresholds td {
+     padding: 5px;
+}
+
+#profile_defs td:first-child {
+     width: 5% !important;
+     white-space: nowrap;
+     text-align: right;
+}
+
+#profile_defs td:last-child {
+     white-space: normal;
+     line-height: 120%;
+}
+
+#thresholds th, #thresholds td {
+     text-align: center !important;
+}
+
+#capabilities_key td {
+     padding: 0 !important;
+}
+
+#capabilities_key table {
+     margin: 0 !important;
+     border: none;
+     border-top: 1px solid #004;
+     border-bottom: 1px solid #004;
+}
+
+#capabilities_key table td {
+     padding: 3px 5px !important;
+}
+
+#capabilities_key table td:nth-child(even) {
+     width: 16px;
+}
+
+#profile_defs b {
+     text-transform: capitalize;
+}
+
+#capabilities_key b {
+     text-transform: none !important;
+}
+
+table#profile_defs + hr {
+     display: none;
+}
+
+.main#profiles .widescroll {
+     margin-top: -5px !important;
+}
+
+.main#profiles ul#banlist {
+     margin-top: 5px;
+}
+
+#profiles_overview {
+     margin-top: -4px;
+}
+
+table#floodfills {
+     margin: 0 0 10px;
+}
+
+table#floodfills + hr {
+     display: none;
+}
+
+table#floodfills th, table#floodfills td  {
+     text-align: right !important;
+}
+
+table#floodfills th {
+     white-space: normal;
+     text-align: center !important;
+}
+
+table#floodfills td  {
+     padding: 3px !important;
+}
+
+table#floodfills th:first-child, table#floodfills td:first-child  {
+     text-align: center !important;
+     width: 52px;
+     white-space: nowrap;
+     padding: 0 !important;
+}
+
+table#floodfills td:first-child {
+     text-align: right !important;
+     padding-left: 4px !important;
+     padding-right: 5px !important;
+}
+
+#profilelist td:first-child > *, table#floodfills td:first-child > *,
+table#udpconnections td:first-child > *, table#ntcpconnections td:first-child > * {
+     vertical-align: middle;
+}
+
+table#viewprofile {
+     margin-bottom: 8px;
+}
+
+table#viewprofile td {
+     padding: 10px 15px 0;
+}
+
+#viewprofile pre {
+     margin-bottom: 0;
+     white-space: pre-wrap;
+}
+
+ul#banlist {
+     border: 1px solid #443da0;
+     background: #000;
+     padding: 10px 10px 10px 0;
+     margin-bottom: 10px;
+}
+
+ul#banlist li:last-child {
+     margin-bottom: 0;
+}
+
+ul#banlist + hr {
+     display: none;
+}
+
+a[href^="/profiles"] ~ table > tbody > tr > th {
+     text-align: right;
+}
+
+a[href^="/profiles"] ~ table > tbody > tr > th:nth-last-child(2) {
+     text-align: center;
+}
+
+a[href^="/profiles"] ~ table > tbody > tr > th:nth-child(2) {
+     text-align: center;
+}
+
+a[href^="/profiles"] ~ table > tbody > tr > th:first-child {
+     text-align: center;
+}
+
+table#jardump { /* /jars */
+     margin-top: -1px;
+     margin-bottom: 0;
+     font-size: 8pt !important;
+     border: none;
+}
+
+.main#jardump {
+     padding: 0;
+}
+
+.main#jardump tt {
+     letter-spacing: -0.03em;
+}
+
+.main#certs {
+     padding-top: 3px;
+}
+
+.main#certs h3 {
+     margin-bottom: -16px !important;
+     border: 1px solid #443da0;
+     border-radius: 0;
+     padding: 7px 10px;
+}
+
+.main#certs h4 {
+     padding: 5px 10px;
+     margin: 15px 0 0;
+     border: 1px solid #443da0;
+     letter-spacing: 0.05em;
+     font-size: 10pt;
+     background: linear-gradient(to right, #000, #002);
+}
+
+.main#certs h3 + p {
+     margin-top: 15px;
+}
+
+.main#certs p {
+     margin-top: -1px;
+     padding: 10px;
+     border: 1px solid #443da0;
+     background: #000;
+}
+
+.main#certs p + p:empty + h4 {
+     margin-top: -13px !important;
+}
+
+.main#certs textarea {
+     margin: -1px 0 11px 0;
+     width: 100%;
+}
+
+.main#tunnels th {
+     padding: 5px 2px;
+}
+
+.main#proof textarea, .main#proof textarea:focus {
+     margin-top: 12px !important;
+     background: none;
+     border: 0;
+     color: #c9ceff !important;
+     filter: none;
+     resize: none;
+     box-shadow: none;
+     font-size: 9pt;
+     line-height: 180%;
+}
+
+.main#webmail {
+     padding: 0;
+     background: #000 !important;
+}
+
+.main#torrents, .main#tunnelmgr {
+     padding: 0;
+     background: url(images/scarface.jpg) right bottom no-repeat, linear-gradient(to bottom, #000, #001) !important;
+     background-size: auto 120px, 100% 2px !important;
+     background-blend-mode: screen;
+}
+
+.main#tunnelmgr {
+     padding: 0 5px;
+}
+
+#i2ptunnelframe {
+     margin: -5px 0 -10px;
+}
+
+.main#debug th {
+     text-align: left;
+     padding: 5px;
+}
+
+.main#debug li:last-child {
+     padding-bottom: 0;
+}
+
+.main#debug h2, .main#debug h3 {
+     border-radius: 0;
+}
+
+.main#debug h2 {
+     padding: 5px 10px;
+}
+
+.main#debug h2:first-child {
+     margin-top: 10px !important;
+}
+
+.main#debug h3 {
+     padding: 3px 8px;
+     font-size: 10pt;
+}
+
+.main#debug h2 + table {
+     margin-top: -13px;
+}
+
+.main#debug h2 + hr {
+     display: none;
+}
+
+div.footnote {
+     text-align: right;
+     font-size: 7pt;
+     margin-bottom: 5px !important;
+}
+
+div.footnote hr {
+     margin: 10px 0 5px 0 !important;
+     color: #443da0;
+     background: #443da0;
+     height: 1px;
+     border: 0 solid #443da0;
+}
+
+.topness {
+     font-size: 7.5pt;
+     text-align: right;
+     margin-top: -10px !important;
+     margin-bottom: -5px;
+     margin-right: 5px;
+}
+
+/* begin home page */
+
+#homepanel {
+     margin: 0 -8px;
+}
+
+h4.app, h4.app2 {
+     background: linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     border: 1px solid #443da0;
+     font-size: 10.5pt;
+     font-variant: small-caps;
+     letter-spacing: 2px;
+     margin: 11px -8px -9px -8px;
+     padding: 7px 8px 7px;
+     text-transform: uppercase;
+     text-align: left;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+h4.app2 {
+     clear: left;
+     position: relative;
+     top: -4px;
+     margin-bottom: -13px;
+}
+
+div.ag2 {
+     margin: 0 5px 12px;
+     padding: 0;
+}
+
+div.app {
+     float: left;
+     padding: 2px 0 0;
+     min-width: 70px;
+     border: 1px solid #443da0;
+     background: #000;
+     background: linear-gradient(to bottom, #020020, #000);
+     border-radius: 2px;
+     margin: 2px 3px 5px;
+     text-align: center !important;
+     opacity: 0.8;
+     box-shadow: inset 0 0 0 1px #000;
+     transition: border ease 0.3s 0s;
+}
+
+.app a:link, .app a:visited {
+     color: #7670c2;
+     display: inline-block;
+     width: 100%;
+}
+
+div.app:hover {
+     opacity: 1;
+     border: 1px solid #652787;
+     background: #000;
+     box-shadow: none;
+     color: #652787 !important;
+}
+
+div.app:hover img {
+     filter: drop-shadow(0 0 3px #652787) !important;
+     mix-blend-mode: normal;
+}
+
+div.app:active .applabel {
+     background: #652787 !important;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+div.app:active .applabel a {
+     color: #c9ceff !important;
+}
+
+div.app a:link, div.app a:hover, div.app a:active {
+     outline: none;
+}
+
+div.app a:focus img {
+     filter: drop-shadow(0 0 3px #c96fff) !important;
+}
+
+div.app a:focus {
+     color: #652787;
+}
+
+div.app:hover a:link, div.app:hover a:visited {
+     color: #652787;
+}
+
+div.app:last-child {
+     margin-bottom: 12px;
+}
+
+h4.app + .appgroup div.app:last-child {
+     margin-bottom: 13px;
+}
+
+h4.app2 + .appgroup div.app:last-child {
+     margin-bottom: 12px;
+}
+
+div.appgroup {
+     margin: 0;
+     padding: 16px 0;
+     width: auto;
+}
+
+div.search {
+     margin: 10px 10px 0 0;
+     padding: 8px 8px 0 8px;
+     width: auto;
+}
+
+table.search {
+     background: none;
+     width: 80%;
+     margin-left: auto;
+     margin-right: auto;
+     margin-top: -19px;
+}
+
+.search tr {
+     background: #000 url(images/header.png) center center repeat-x;
+     background: linear-gradient(to bottom, #000010 0%, #000019 50%, #000 51%) !important;
+}
+
+.search td {
+     padding: 4px;
+     text-align: center;
+}
+
+.search td:nth-child(2) {
+     width: 50px;
+     padding: 4px 0 4px 20px;
+}
+
+.search td:last-child {
+     text-align: left !important;
+     width: 50px;
+     padding-right: 10px;
+}
+
+input.search, input.search:hover {
+     background: #000 url(/themes/console/images/buttons/search.png) 4px center no-repeat;
+     background: url(/themes/console/images/buttons/search.png) 4px center no-repeat, linear-gradient(to bottom, #000, #000019);
+     padding: 4px 3px 4px 24px;
+     vertical-align: middle;
+     width: 100%;
+}
+
+input.search:focus {
+     background: #000 url(/themes/console/images/buttons/search.png) 4px center no-repeat;
+}
+
+.search select {
+     width: 90%;
+}
+
+.appimg {
+     height: 45px;
+}
+
+.app img {
+     height: 32px;
+     width: auto;
+     max-height: 32px;
+     max-width: 32px;
+     padding: 9px 50px 35px;
+     margin-bottom: 1px;
+     mix-blend-mode: luminosity;
+}
+
+div.app:hover .app img {
+     filter: saturate(200%);
+     mix-blend-mode: normal;
+}
+
+.app table {
+     background: none;
+     border: 0;
+     margin: auto;
+     width: auto;
+}
+
+.app tr {
+     background: none;
+     border: 0;
+     margin: 0;
+}
+
+.app td {
+     background: none;
+     border: 0;
+     margin: 0;
+     padding: 3px 0 0;
+}
+
+.applabel {
+     margin: 2px 0 0;
+     padding: 5px 2px 6px;
+     text-align: center;
+     vertical-align: bottom;
+     line-height: 95%;
+     text-transform: lowercase;
+     border: none;
+     width: 130px;
+     min-width: 72px;
+     background: #001 url(images/titles.png) center center;
+     background: linear-gradient(to bottom, #121225 50%, #000011 50%, #00000d 50%);
+     border-radius: 0 0 2px 2px;
+     border-top: 1px solid #443da0;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     color: #4e47bf;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.applabel:hover {
+     background: #000;
+     border-top: 1px solid #652787;
+     color: #652787;
+}
+
+.applabel a, .applabel a:hover {
+     text-decoration: none !important;
+     outline: none;
+     max-width: 126px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     display: inline-block;
+     padding: 2px 0;
+}
+
+div.app:hover .applabel {
+     border-top: 1px solid #652787 !important;
+     background: #000;
+     color: #652787;
+}
+
+/* end home page */
+
+iframe.iframed {
+     margin: 15px 0 0;
+}
+
+#i2psnarkframe, #susimailframe {
+     margin-top: -1px;
+}
+
+.main#dns {
+     padding: 0;
+     min-width: 650px;
+     background: #000 !important;
+}
+
+#susidnsframe {
+     margin-top: -2px;
+}
+
+/* Fixes for when app is not started and console error loads inside iframe */
+
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+}
+
+.iframed div.routersummaryouter {
+     display: none !important;
+}
+
+.iframed h1 {
+     margin: 0 5px 0 5px !important;
+}
+
+.iframed div.sorry {
+     margin: -1px 5px 10px 5px !important;
+}
+
+/* end iframed console fixes */
+
+/* global overrides */
+
+h3[id*="job"] {
+     border: 1px solid #443da0;
+     padding: 6px;
+     margin: 12px 0 10px 0;
+     border-radius: 0;
+     text-transform: uppercase;
+     text-shadow: 0 0 2px #010011;
+     letter-spacing: 0.08em;
+}
+
+/* netdb */
+
+table.netdbentry, table.leaseset {
+     width: 100% !important;
+     margin-bottom: 10px;
+}
+
+.confignav + .netdbentry {
+     margin-top: -4px !important;
+}
+
+.netdbentry td b, .leaseset td b, table#leasesetdebug td b, .sybil_routerinfo td b {
+     color: #c9ceff !important;
+}
+
+span#distance {
+     color: #d6fffd !important;
+}
+
+.netdbentry th {
+     font-weight: normal;
+     text-align: left;
+     padding: 4px 6px;
+}
+
+.netdbentry th code, .leaseset th code, .sybil_routerinfo th code {
+     font-size: 9pt;
+     font-weight: bold;
+     margin-left: 5px;
+}
+
+.netdbentry th:last-child {
+     text-align: right;
+     padding: 5px;
+     white-space: nowrap;
+     width: 50px;
+}
+
+.netdbentry th:first-child  {
+     white-space: nowrap;
+}
+
+.netdbentry td:first-child  {
+     width: 80px;
+}
+
+.netdbentry td:nth-child(2) {
+     word-break: break-all;
+     hyphens: none;
+}
+
+.netdbentry img {
+     margin: 1px 0 0 0;
+}
+
+.netdbentry tr:last-child code {
+     font-weight: bold;
+}
+
+table#leasesetdebug, table#leasesetsummary {
+     margin-top: -4px;
+     margin-bottom: 10px;
+}
+
+.leaseset th {
+     font-weight: normal;
+     padding: 5px;
+     text-align: left;
+}
+
+.leaseset th:last-child, .leaseset td:nth-child(2) {
+     text-align: right;
+     padding-right: 5px;
+}
+
+table#leasesetdebug th, table#leasesetsummary th {
+     font-weight: bold;
+     text-transform: uppercase;
+     font-size: 10pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     padding: 8px 10px;
+}
+
+table#leasesetdebug th a, table#leasesetsummary a {
+     font-size: 9pt;
+     text-transform: capitalize;
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
+#leasesetsummary td:first-child {
+     width: 100px;
+     white-space: nowrap;
+     padding-left: 10px;
+}
+
+table#leasesetdebug th:first-child, table#leasesetsummary th:first-child {
+     text-align:left;
+     white-space: nowrap;
+}
+
+table#leasesetdebug th:last-child, table#leasesetsummary th:last-child {
+     text-align:right;
+     white-space: nowrap;
+}
+
+table#leasesetdebug td:nth-child(odd) {
+     width: 200px;
+     white-space: nowrap;
+     text-align: right;
+     border-right: 1px inset #120f35;
+}
+
+table#leasesetdebug td:nth-child(even) {
+     text-align: left;
+     white-space: nowrap;
+}
+
+table#leasesetdebug td:nth-child(2) {
+     width: 10px;
+}
+
+table#leasesetdebug th a:not(old), table#leasesetsummary th a:not(old) {
+     font-size: 0;
+}
+
+table#leasesetdebug th a::after, table#leasesetsummary th a::after {
+     content: url(/themes/console/images/buttons/floodfill.png);
+     vertical-align: text-top;
+     padding-right: 0;
+}
+
+.leaseset tr:nth-child(2) td:last-child a:not(old) {
+     font-size: 0;
+}
+
+.leaseset tr:nth-child(2) td:last-child a::after {
+     content: url(/themes/console/images/buttons/add_address.png);
+}
+
+a.viewfullentry:not(old) {
+     font-size: 0;
+}
+
+a.viewfullentry::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     vertical-align: text-top;
+}
+
+div#noleasesets {
+     background: #000 url(/themes/console/images/info/infohelp.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px !important;
+     border: 1px solid #443da0;
+     margin-bottom: 10px;
+     text-align: left;
+}
+
+div#sybilnav, div#sybils_summary {
+     border: 1px solid #443da0;
+     padding: 10px;
+     margin-bottom: 10px;
+}
+
+div#sybilnav {
+     -moz-columns: 4 200px;
+     -webkit-columns: 4 200px;
+     columns: 4 200px;
+     padding: 10px;
+}
+
+#sybilnav li {
+     break-inside: avoid;
+     page-break-before: right;
+     -webkit-column-break-inside: avoid;
+}
+
+#sybilnav ul li {
+     list-style: none;
+     padding-left: 0;
+     margin-left: 0;
+     margin-bottom: 5px;
+     min-width: 110px;
+     white-space: nowrap;
+     border: 1px solid #443da0;
+     border-radius: 2px;
+     background: linear-gradient(to right, #000, #002 80%);
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+#sybilnav ul li:hover {
+     border: 1px solid #652787;
+     background: #652787;
+}
+
+#sybilnav a {
+     display: inline-block;
+     width: 100%;
+}
+
+#sybilnav ul li:hover a {
+     color: #652787;
+     color: #fff;
+}
+
+#sybilnav ul li:active {
+     background: #39144f;
+}
+
+#sybilnav ul li:active a {
+     color: #c9ceff !important;
+}
+
+#sybilnav ul li a {
+     padding-right: 30%;
+     box-sizing: border-box;
+}
+
+#sybilnav ul li::before {
+     content: url(/themes/console/images/buttons/show.png);
+     mix-blend-mode: luminosity;
+     margin-right: 5px;
+     font-size: 16pt;
+     line-height: 50%;
+     vertical-align: middle;
+     padding-left: 5px;
+}
+
+#sybilnav ul li:first-child {
+     margin-top: 0;
+}
+
+#sybilnav ul li:last-child {
+     margin-bottom: -10px;
+     padding-bottom: 2px;
+}
+
+/* end sybilnav */
+
+table.sybil_routerinfo {
+     margin-bottom: 10px;
+}
+
+.sybil_routerinfo th {
+     padding: 1px 1px 1px 6px !important;
+}
+
+.sybil_routerinfo th:first-child {
+     text-align: left;
+}
+
+table.sybil_routerinfo:first-of-type th {
+     padding: 6px !important;
+}
+
+.sybil_routerinfo th:first-child {
+     white-space: nowrap;
+}
+
+.sybil_routerinfo th:nth-last-child(2) {
+     text-align: right !important;
+     padding-right: 0 !important;
+}
+
+.sybil_routerinfo th:last-child {
+     width: 20px;
+}
+
+.sybil_routerinfo td:first-child {
+     width: 50px;
+     white-space: nowrap;
+}
+
+p.sybil_info, p.family, p.threatpoints, p.hashdist, p#sybil_totals, p.notfound {
+     border: 1px solid #443da0;
+     padding: 5px 5px 5px 30px;
+     margin: 3px 0;
+     font-weight: bold;
+     background: url(/themes/console/images/buttons/show.png) 8px center no-repeat, #002;
+     background: url(/themes/console/images/buttons/show.png) 8px center no-repeat, linear-gradient(to right, #000, #001 80%, #002);
+     background-blend-mode: luminosity;
+     box-shadow: inset 0 0 0 1px #080077;
+}
+
+p.sybil_info, p.hashdist, p.family {
+     margin-top: -1px;
+}
+
+p.sybil_info + p.sybil_info, p.family + p.family {
+     margin-top: -4px;
+}
+
+p.sybil_info + a[name] + table.sybil_routerinfo, p.hashdist + a[name] + table.sybil_routerinfo  {
+     margin-top: 10px !important;
+}
+
+.threatpoints + ul {
+     border: 1px solid #443da0;
+     padding: 5px 5px 0;
+     margin: -4px 0 10px;
+     background: #000;
+}
+.threatpoints + ul li:last-child {
+     margin-bottom: -5px;
+}
+
+/* end netdb */
+
+/* /confignet, /configadvanced */
+
+.configtable + .tabletitle {
+     margin-top: 12px;
+}
+
+table.configtable {
+     margin-top: -1px;
+     margin-bottom: -2px !important;
+}
+
+table.configtable tr:last-child {
+     border-top: 1px solid #443da0;
+}
+
+table#netconfig th, table#externali2cp th, table#plugininstall th, .configtable th, th.th_title {
+    text-align: left;
+    padding: 5px 10px !important;
+    text-transform: uppercase;
+    font-size: 10pt;
+    letter-spacing: 0.08em;
+    word-spacing: 0.1em;
+}
+
+table.configtable td {
+     padding: 6px 10px;
+     background: #000;
+     line-height: 180%;
+}
+
+.configtable input, .configtable textarea, .configtable select {
+     margin-left: 5px;
+}
+
+#netconfig img[src*="itoo"] {
+     display: none;
+}
+
+.configtable td.tabletextarea {
+     padding: 0 !important;
+}
+
+textarea#advancedsettings {
+     margin: 0 !important;
+     width: 100%;
+     resize: none;
+     overflow-x: hidden;
+     white-space: pre-wrap;
+     border: 0 none transparent;
+     border-radius: 0;
+}
+
+.configtable td.infohelp, p.infohelp, td.infohelp, p#debugmode, p#sybilinfo, p.infowarn, td.infowarn {
+     background: #000 url(/themes/console/images/info/infohelp.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px !important;
+     text-align: justify;
+     line-height: 130%;
+     border-bottom: 1px solid #443da0;
+     border-top: 1px solid #443da0;
+     white-space: normal !important;
+     font-weight: normal !important;
+}
+
+p.infowarn, td.infowarn, p.infohelp, td.infohelp {
+     line-height: 130% !important;
+     background-size: 28px 28px !important;
+}
+
+p.infowarn, td.infowarn {
+     background: #000 url(/themes/console/images/info/infowarn.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px !important;
+     border: 1px solid #443da0;
+}
+
+table.logtable, table#enviro {
+     margin-top: -1px !important;
+}
+
+p.infohelp, p#debugmode, p#sybilinfo {
+     border: 1px solid #443da0;
+}
+
+p#debugmode, p#sybilinfo {
+     margin-top: -4px;
+}
+
+p#gatherstats {
+     margin-top: 1px;
+}
+
+td.optionsave {
+     text-align: right;
+     border-top: 1px solid #443da0;
+     padding: 7px 5px !important;
+     white-space: nowrap;
+     width: 50px;
+     background: #000;
+}
+
+#floodfillconfig form, #plugininstall form, #updateplugins form, .configtable form {
+     margin-bottom: 0;
+}
+
+h3.h3table, h3.tabletitle, h3#i2pclientconfig, h3#advancedclientconfig, h3#webappconfig, h3#pconfig, h3#pluginfromurl,
+h3#pluginfromfile, h3#updateplugins, h3#pluginmanage, h3#bannedpeers, h3.ptitle, h3#transports, h3#upnpstatus, h3.sybils {
+     margin-bottom: 0 !important;
+     border-radius: 0;
+     border: 1px solid #443da0;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     padding: 7px 10px;
+}
+
+h3#pluginmanage {
+     margin-bottom: -13px !important;
+}
+
+h3.tabletitle a {
+     text-transform: lowercase;
+     letter-spacing: normal;
+}
+
+h3.sybils + div, h3.sybils + a[name] + table {
+     margin-top: -1px;
+}
+
+p.notfound {
+     margin-top: -1px;
+}
+
+h3#transports {
+     margin-bottom: -1px !important;
+}
+
+h3#upnpstatus {
+     margin-bottom: 10px !important;
+}
+
+h3.ptitle {
+     margin-bottom: -6px !important;
+}
+
+h3#webappconfig {
+     margin-bottom: -13px !important;
+}
+
+p#webappconfigtext {
+     margin: 1px 0 -2px 0;
+     background: #000 url(/themes/console/images/info/java_edit.png) 12px center no-repeat !important;
+     background-size: 28px 28px !important;
+}
+
+table#pluginconfig, table#i2pupdates, table.homelinkedit, table#peerdefs {
+     margin-top: -1px;
+}
+
+#i2pupdates select {
+     min-width: 220px;
+}
+
+#i2pupdates .optbox {
+     margin-left: 8px;
+}
+
+h3#i2pclientconfig, h3#pconfig, h3#pluginfromurl, h3#pluginfromfile {
+     margin-bottom: -13px !important;
+}
+
+table#advconf {
+     margin-bottom: 9px !important;
+}
+
+p#javaclienthelp {
+     border: 1px solid #443da0;
+     background: url(/themes/console/images/info/infohelp.png) 12px center no-repeat !important;
+     padding: 10px 10px 10px 50px !important;
+}
+
+div#clientsconfig {
+     margin-top: -2px;
+}
+
+table#externali2cp th {
+     text-align: left;
+}
+
+#tunnelconfig th {
+     padding: 6px 10px;
+}
+
+#tunnelconfig th img {
+     margin-bottom: -2px;
+}
+
+th.th_title {
+     padding: 7px 10px !important;
+     text-align: left;
+     background: linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+input#hideme {
+     display: none;
+}
+
+#plugininstall input[type="text"] {
+     width: 50%;
+     min-width: 400px;
+}
+
+#plugininstall input.cancel {
+     display: none;
+}
+
+#pluginupdater {
+     border: 1px solid #443da0;
+     padding: 15px 5px 15px 50px;
+     margin-top: -11px;
+     margin-bottom: 10px !important;
+     background: url(/themes/console/images/info/update.png) 12px center no-repeat, #000;
+     background-size: 28px 28px;
+}
+
+#pluginupdater form {
+     margin-bottom: 0;
+}
+
+.formaction#tunnelconfigsave, .formaction#homeapps, .formaction#browserstart {
+     margin-bottom: -2px !important;
+}
+
+h4.embeddedtitle#updateplugins {
+     padding: 5px 10px;
+     font-size: 9pt;
+     background: linear-gradient(to bottom, #121225 50%, #000011 50%, #00000d 50%);
+     border: 1px solid #443da0;
+     text-align: left;
+     text-transform: uppercase;
+     font-size: 10pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     margin-top: -13px;
+}
+
+#manualreseed input[type="text"] {
+     width: 50%;
+     width: calc(100% - 300px);
+}
+
+#loggingoptions, table#addkeyring {
+     margin-bottom: -3px !important;
+     margin-top: -1px;
+}
+
+/* /configpeers banlist */
+
+#bannedips {
+     margin-bottom: 8px;
+     margin-top: -1px;
+}
+
+#bannedips table {
+     margin-bottom: -1px !important;
+}
+
+#bannedips td {
+     vertical-align: top;
+     padding: 0;
+     width: 50%;
+}
+
+#bannedips table tr {
+     border-top: 1px solid #000;
+}
+
+#bannedips table td {
+     text-align: center;
+     padding: 4px 2px;
+}
+
+#bannedips table tr:last-child {
+     border-bottom: 1px solid #443da0;
+}
+
+#permabanned th, #banneduntilrestart th {
+     padding: 5px 10px !important;
+}
+
+#permabanned, #banneduntilrestart {
+     margin: -1px 0 !important;
+     border: none;
+}
+
+#permabanned td:first-child {
+     border-left: 1px solid #443da0;
+     text-align: right;
+     padding-right: 10px;
+     width: 49%;
+}
+
+#permabanned td:nth-child(2) {
+     width: 2%;
+}
+
+#permabanned td:last-child {
+     text-align: left;
+     padding-left: 10px;
+     width: 49%;
+}
+
+#banneduntilrestart td {
+     border-right: 1px solid #443da0;
+     text-align: center !important;
+}
+
+#ipv4, #ipv6, #permabanned tr:nth-child(2) {
+     background: #000 url(images/titles.png) center center repeat-x;
+     background: linear-gradient(to bottom, #121225 50%, #000011 50%, #00000d 50%);
+     border-top: 1px solid #443da0 !important;
+     border-bottom: 1px solid #443da0 !important;
+}
+
+/* end /configpeer banlist */
+
+table#configstats {
+     margin-bottom: -2px;
 }
 
-h4.app2 {
-     clear: left;
-     margin-top: 0 !important;
+#configstats th {
+     padding: 8px 10px;
+     text-align: left;
 }
 
-div.ag2 {
-     margin: 5px -15px -10px;
+#configstats th b {
+     text-transform: uppercase;
+     font-size: 10pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
 }
 
-div.app {
-     float: left;
-     padding: 0;
-     min-width: 60px;
-     text-align: center !important;
-     border: 1px solid #55a;
-     border-top: 1px solid #77b;
-     border-left: 1px solid #77b;
-     margin: 3px;
-     border-radius: 3px;
-     background: -moz-linear-gradient(top, #001, #000);
+#configstats td:first-child {
+     width: 40px;
+     white-space: nowrap;
 }
 
-div.app:hover {
-     border: 1px solid #f60;
-     background: #000;
+#configstats td:first-child:empty + td > label { /* remove pointer from inert labels */
+     cursor: default;
 }
 
-div.app:last-child {
-     margin-bottom: 10px;
+#configstats td {
+    color: #b2bcf7;
+    padding: 8px 4px;
 }
 
-div.app a:link, div.app a:link:hover, div.app a:link:visited, div.app a:link:active {
-     font-size: 8pt !important;
-     text-transform: lowercase;
-     text-decoration: none;
+#configstats td:last-child {
+     border-right: 1px solid #443da0;
 }
 
-div.appgroup {
+#configstats td b {
+    color: #c9ceff;
+}
+
+#configstats input.optbox {
      margin: 0;
-     padding: 0 8px;
-     width: auto;
+     padding: 0;
+     vertical-align: middle;
 }
 
-div.search {
-     margin: 10px 10px 0 0;
-     padding: 8px 8px 0 8px;
-     width: auto;
+#configstats tr.tablefooter td {
+     padding: 4px 10px;
+     line-height: 140%;
+     background: #000 !important;
 }
 
-table.search {
-     background: none;
-     margin-left:auto;
-     margin-right:auto;
-     padding: 8px;
-     width: auto;
+p#enablefullstats {
+     margin-top: 5px;
+     padding: 5px 10px;
+     border: 1px solid #443da0;
 }
 
-img.app {
-     height: 32px;
-     width: 32px;
-     padding: 6px 15px 0;
+#enablefullstats .optbox {
+     vertical-align: middle;
 }
 
-img.app2p {
-     height: 32px;
-     padding: 6px;
+#peerdefs td:first-child {
+     width: 40px;
+     white-space: nowrap;
+     border: 1px inset #120f35;
+     text-align: right;
 }
 
-table.app {
-     background: none;
-     border: 0;
-     margin: auto;
-     width: auto;
+/* infohelp/warn overrides and misc ornamentation */
+
+table#bugreports td.infohelp {
+     background: url(/themes/console/images/info/bugreport.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-tr.app {
-     background: none;
-     border: 0;
-     margin: 0;
+p#debugmode {
+     padding: 15px 15px 15px 50px;
+     background: url(/themes/console/images/info/debug.png) 12px center no-repeat !important;
+     background-size: 28px 28px !important;
 }
 
-td.app {
-     background: none;
-     border: 0;
-     margin: 0;
+p#sybilinfo {
+     padding: 15px 15px 15px 50px;
+     margin-bottom: 10px;
+     background: url(/themes/console/images/info/experimental.png) 12px center no-repeat !important;
+     background-size: 28px 28px !important;
 }
 
-.applabel {
-     background: #001;
-     font-size: 8pt;
-     margin: -5px -3px -3px;
-     padding: 2px 5px;
-     text-align: center;
-     min-width: 60px;
-     border-top: 1px solid #000;
-     border-radius: 0 0 2px 2px;
-     background: -moz-linear-gradient(top, #000, #001);
+#bandwidthconfig tr:first-child .infohelp {
+     background: url(/themes/console/images/info/bandwidth.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-.applabel:hover {
-     border-top: 1px solid #000;     
+#addkeyring td.infohelp {
+     background: #000 url(/themes/console/images/info/keys.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-.applabel:hover {
-     background: #000;
+#joinfamily tr:nth-child(3) td:first-child {
+     background: #000 url(/themes/console/images/info/key.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
+
+#newfamily tr:last-child td:first-child {
+     background: #000 url(/themes/console/images/info/label.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-.appimg {}
+#oldhome td:first-child {
+     background: url(/themes/console/images/info/home.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
+}
 
-/* end home page */
+#oldhome input[type="checkbox"], #enablefullstats input[type="checkbox"] {
+     vertical-align: sub;
+}
 
-tt {
-     font-size: 8pt;
+#floodfillconfig tr:first-child .infohelp {
+     background: #000 url(/themes/console/images/info/floodfill_32x32.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-tt, pre {
-     font: 8pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+p#clientconf.infohelp, p#webappconfig.infohelp {
+     background: #000 url(/themes/console/images/info/java_edit.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-td {
-     padding: 4px;
+p#pluginconfigtext {
+     background: #000 url(/themes/console/images/info/plugin_edit.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-tr:nth-child(even) {
-     background-color: #001;
+#plugininstall .infohelp {
+     background: #000 url(/themes/console/images/info/plugin_link.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-tr:nth-child(odd) {
-     background-color: #000009;
+#manualreseed tr:nth-last-child(2) td.infohelp {
+     background: #000 url(/themes/console/images/info/box.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-hr {
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border: 0 solid #99f;
-     margin: 3px 0;
+#config_peers tr:nth-child(3) td.infohelp {
+     background: #000 url(/themes/console/images/info/blocked.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-.statusnotes {
-     font-style: italic;
-     font-size: 8pt;
-     color: #eef;
-     text-align: center;
-     margin: -5px 0 5px 0;
-     background: #000;
-     border: 1px solid #99f;
-     border-top: 0;
-     padding: 3px 0;
+h3#shutdownrouter + p.infohelp {
+     background: #000 url(/themes/console/images/info/power.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-div.joblog {
-     margin: 10px 0;
-     line-height: 140% !important;
+h3#restartrouter + p.infohelp, #config_family .infohelp.needrestart {
+     background: #000 url(/themes/console/images/info/reboot.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-div.joblog li {
-     word-wrap: break-word !important;
-     text-align: left !important;
-     line-height: 130% !important;
-     margin-right: 10px;
+h3#systray + p.infohelp {
+     background: #000 url(/themes/console/images/info/systray.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-div.joblog li i {
-     color: #bbb;
-     text-transform: capitalize;
-     font-style: normal;
-     font-weight: bold;
+h3#servicedebug + p.infohelp {
+     background: #000 url(/themes/console/images/info/debug.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-div.joblog ul {
-     word-wrap: break-word !important;
-     text-align: justify;
+h3#browseronstart + p.infohelp {
+     background: #000 url(/themes/console/images/info/launch_browser.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-div.joblog li:first-child {
-     margin-top: 0;
-     padding: 10px 0;
+.main#config_reseed p.infohelp {
+     background: #000 url(/themes/console/images/info/connect.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-div.joblog li:last-child {
-     margin-bottom: -10px;
+p#enablefullstats, p#gatherstats {
+     background: #000 url(/themes/console/images/info/statistics.png) 12px center no-repeat !important;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px !important;
 }
 
-div.joblog form:first-child {
-     margin-top: 10px;
+#config_family .infohelp {
+      background: #000 url(/themes/console/images/info/family.png) 12px center no-repeat !important;
+      padding: 15px 15px 15px 50px;
+      background-size: 28px 28px !important;
 }
 
-div.joblog table {
-     margin-top: 15px;
+#consolepass tr:first-child td {
+     background: #000 url(/themes/console/images/info/user_add.png) 12px center no-repeat;
+     background-size: 28px 28px;
+     padding: 15px 15px 15px 50px;
 }
 
-div.joblog p {
-     line-height: 130%;
+form[action="events"] {
+     padding: 10px 10px 10px 50px;
+     background: url(/themes/console/images/info/logs.png) 12px center no-repeat;
+     background-size: 28px 28px;
 }
 
-div.joblog h3 {
-     margin: 10px 0 20px 0;
+#plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2) {
+     background: #000 url(/themes/console/images/info/url.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-div.joblog h3:first-child {
-     margin: 5px 0 15px 0;
+#manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2) {
+     background: #000 url(/themes/console/images/info/from_file.png) 12px center no-repeat;
+     padding: 15px 15px 15px 50px;
+     background-size: 28px 28px;
 }
 
-div.joblog hr {
-     margin: 15px 0 15px;
+/* responsive layout */
+
+@media screen and (max-width: 900px) {
+#ntcpconnections th:last-child:not(old) {
+     font-size: 0;
 }
 
-div.joblog ol {
-     margin-bottom: 0;
+#ntcpconnections th:last-child::before {
+     content: url(/themes/console/images/info/backlogged.png) !important;
+}
+
+#ntcpconnections td:last-child {
+     width: 24px !important;
+     white-space: nowrap;
 }
-/*
-button, button:visited {
-     font: bold 9pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     border: 1px outset #66a;
-     padding: 1px 3px;
-     background: #ffe;
-     text-decoration: none;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     font-size: 8pt;
-     font-weight: bold;
-     margin: 2px;
-     text-align: center;
-     min-width: 60px;
-     -moz-box-shadow: inset 0 0 2px 1px #fff;
-     -khtml-box-shadow: inset 0 2px 8px 0 #fff;
-     box-shadow: inset 0 2px 8px 0 #fff;
-     color: #316;
 }
 
-button.accept {
-     background: #ffe url('../images/accept.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+@media screen and (max-width: 1200px) {
+.tab, .tab2 {
+     padding: 1px 0 2px;
+     min-width: 50px !important;
 }
 
-button.add {
-     background: #ffe url('../images/add.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.tab2 {
+     padding: 3px 12px 4px;
 }
 
-button.cancel {
-     background: #ffe url('../images/cancel.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.tab a {
+     padding: 2px 14px;
 }
 
-button.check {
-     background: #ffe url('../images/tick.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#floodfills td {
+     border-right: 1px inset #120f35;
 }
 
-button.delete {
-     background: #ffe url('../images/delete.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#floodfills td:last-child {
+     border-right: 1px solid #443da0;
 }
 
-button.download {
-     background: #ffe url('../images/arrow_down.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#plugininstall input[type="text"] {
+     min-width: 200px !important;
 }
 
-button.go {
-     background: #ffe url('../images/arrow_right.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+td.optionsave, table#i2pupdates td:first-child {
+     white-space: normal !important;
+     width: 30%;
 }
 
-button.reload {
-     background: #ffe url('../images/arrow_refresh.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+table#i2pupdates td:first-child {
+     line-height: 120%;
 }
 
-button.search {
-     background: #ffe url('../images/magnifier.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#portfaq td:nth-child(2) {
+     white-space: normal;
 }
 
-button.stop {
-     background: #ffe url('../images/stop.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main#help h3, #faq h3 {
+     font-size: 10pt !important;
+}
 }
 
-button:hover {
-     border: 1px solid #f60;
-     background-color: #f60 !important;
-     color: #fff;
-     -moz-box-shadow: inset 0 0 0 1px #fff;
-     -khtml-box-shadow: inset 0 0 0 1px #fff;
-     box-shadow: inset 0 0 0 1px #fff;
+@media screen and (max-width: 1500px) {
+#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+   min-height: 14px;
 }
 
-button:active {
-     border: 1px solid #f60;
-     background: #202 !important;
-     color: #f60;
-     -moz-box-shadow: inset 0 0 0 1px #f60;
-     box-shadow: inset 0 0 0 1px #f60;
-     -khtml-box-shadow: inset 0 0 0 1px #f60;
+.tunnels_client th:first-child:not(old) {
+     font-size: 0;
 }
-*/
-input {
-     margin: 3px 5px 3px 0;
+
+.tunnels_client th:first-child::after {
+     content: "\21F5";
+     content: "\21E9\21E7";
+     font-size: 12pt;
+     line-height: 0;
      vertical-align: middle;
+     letter-spacing: -0.25em;
+}
 }
 
-/*
-input.accept {
-     background: #ffe url('../images/accept.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+@media screen and (min-width: 1200px) {
+#floodfills td:last-child {
+     padding-right: 5px !important;
 }
 
-input.add {
-     background: #ffe url('../images/add.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.topness, .footnote, #newsStatus, #newsDisplay {
+     font-size: 9pt !important;
 }
 
-input.cancel {
-     background: #ffe url('../images/cancel.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.news hr {
+     margin-bottom: 5px;
 }
 
-input.check {
-     background: #ffe url('../images/tick.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main#help h3, #faq h3 {
+     font-size: 10.5pt !important;
+}
 }
 
-input.delete {
-     background: #ffe url('../images/delete.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+@media screen and (min-width: 1500px) {
+body, .main, .main td, .news p, #news p, .statusnotes, textarea, th, .applabel a, tt, code, .messages, .messages #newsStatus, .messages #newsDisplay, #changelog pre {
+     font-size: 10pt !important;
 }
 
-input.download {
-     background: #ffe url('../images/arrow_down.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+h1 {
+     font-size: 19pt;
+     padding: 15px;
 }
 
-input.go {
-     background: #ffe url('../images/arrow_right.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main button, .main input, select {
+     font-size: 10pt !important;
 }
 
-input.reload {
-     background: #ffe url('../images/arrow_refresh.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.main, .news, h1 {
+     margin-left: 232px !important;
 }
 
-input.search[type="text"] {
-     background: #001 url('../images/magnifier.png') no-repeat 2px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+.routersummary {
+     width: 200px !important;
 }
 
-input.stop {
-     background: #ffe url('../images/stop.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.routersummary div[style="height: 36px;"] {
+     height: 40px !important;
+     margin-top: 3px;
 }
 
-input:hover {
-     background-color: #f60;
-     color: #fff;
-     border: 1px solid #f60;
-     opacity: 1.0;
-     -moz-box-shadow: inset 0 0 0 1px #fff;
+div.routersummary img[src$="i2plogo.png"] {
+     margin-left: -5px;
+     transform: none;
+     width: 207px;
+     margin-top: -3px;
+}
 
+.routersummary table[id^="sb_"], #sb_localtunnels {
+     width: 216px !important;
 }
 
-input[type=text], input[type=password] {
-     margin: 3px 5px 3px 5px;
-     vertical-align: middle;
+#sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after,
+#sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after {
+   min-height: 18px;
 }
-*/
 
-select {
-     margin: 3px 5px 3px 0;
-     vertical-align: middle;
-     min-width: 90px;
+.routersummary td, .routersummary a, .routersummary button, .routersummary h4, .routersummary h4 a, .smallhead, pre, #newsStatus, #newsDisplay {
+     font-size: 9pt !important;
 }
 
-input {
-     border-radius: 3px;
+.routersummary button.download {
+     font-size: 10pt !important;
 }
 
-input[type=text], input[type=password] {
-     background: #001;
-     color: #eef;
-     border: 1px solid #99f;
+.routersummary h3 a, #netdboverview th {
+     font-size: 11pt !important;
 }
 
-submit {
-     margin: 3px 5px 3px 5px;
-     padding: 2px 0;
-     font: 8pt/140% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+.routersummary button {
+     min-width: 100px !important;
 }
 
-p {
-     padding: 5px 20px 0 20px;
-     text-align: justify;
+div.app {
+     min-width: 138px;
 }
 
-p img:first-child {
-     display: none !important;     
+.app:hover {
+     cursor: pointer;
 }
 
-.formaction {
-     text-align: right;
+.applabel {
+     width: 150px !important;
 }
 
-.langbox {
-     margin: 5px 3px 0;
-     color: #eef;
-     font-size: 7pt;
-     width: auto;
-     text-align: right;
-     float: right;
-     vertical-align: middle;
+.applabel a, .applabel a:hover {
+     max-width: 146px;
+     padding: 3px 0;
 }
 
-.langbox img {
-     padding: 0 2px; /* Ignored by IE8 */
-     opacity: 0.7;
+.appimg {
+     height: 50px;
+     padding-top: 4px;
 }
 
-/* opera targetted hack */
-x:-o-prefocus, .langbox img {
-     margin-bottom: 4px;
+img.app, img.app2p {
+     padding: 14px 61px 44px;
+     margin-top: -5px;
 }
 
-.langbox img:hover {
-     opacity: 1;
+h3#i2pclientconfig, h3#pconfig, h3#pluginfromurl, h3#pluginfromfile, #clientconf.infohelp, h3#pluginmanage, h3#webappconfig {
+     margin-bottom: -15px !important;
 }
 
-.links {
-     padding-bottom: -2px;
-     text-align: justify;
-     margin-top: 5px !important;
-     margin-left: 5px !important;
+h4#updateplugins {
+     margin-top: -15px !important;
 }
 
-.links li {
-     list-style-image: url("images/link.png") !important;
-     padding-right: 15px !important;
+#profilelist td:first-child, #profilelist th:first-child, #floodfills td:first-child, #floodfills th:first-child {
+     width: 56px !important;
 }
 
-.links li:first-child {
-     padding-top: 10px !important;
+.sorry {
+     margin-left: 232px !important;
 }
 
-.links li:last-child {
-     padding-bottom: 10px !important;
-     margin-bottom: 20px;
+.subheading b {
+     font-size: 10.5pt !important;
 }
 
-.links b {
-     line-height: 170%;
-     letter-spacing: 0.12em !important;
+#webappconfig td:first-child::after {
+     min-height: 30px;
 }
 
-a:link {
-     color: #bbf;
-     text-decoration: none;
-     font-weight: bold;
-     word-wrap: break-word;
+
+div.joblog h3 {
+     margin-top: 8px !important;
 }
 
-a:visited {
-     color: #99f;
-     text-decoration: none;
-     font-weight: bold;
+#sb_services a:link, #sb_internals a:link, #sb_advanced a:link {
+     max-width: 207px;
 }
 
-a:hover {
-     color: #f60;
-     text-decoration: underline;
-     font-weight: bold;
+#sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue {
+     margin-top: -4px !important;
+     margin-bottom: -4px !important;
 }
 
-a:active {
-     color: #f93;
-     text-decoration: underline;
-     font-weight: bold;
+.langbox {
+     margin-top: 5px;
 }
 
-pre {
-     font-size: 9pt;
-     margin: 0 20px;
+button.control {
+     padding: 14px !important;
+     font-size: 0 !important;
 }
 
-tt {
-     font-size: 9pt;
-     font-weight: bold;
-     color: darkgreen;
+.main[id^="config_"] th, h4#updateplugins {
+    font-size: 10.5pt !important;
 }
 
-.tablefooter {
-     border: 1px solid #99f;
+#help .confignav {
+     padding: 0 !important;
+     position: sticky;
+     top: 0;
+     z-index: 999;
 }
 
-.tablefooter tr, .tablefooter td {
-     background: #000;
-     font-size: 8pt;
-     font-weight: bold;
-     line-height: 150%;
-     word-wrap: nowrap;
-     padding: 8px 1px;
-     border-top: 2px solid #99f;
+#help .tab {
+     margin-top: -1px !important;
+     margin-bottom: -1px !important;
 }
 
-.tidylist {
-     text-align: justify;
-     padding-right: 20px;
-     margin-right: 10px !important;
+.newsAuthor {
+     font-size: 9pt !important;
+     background-size: 15px 15px !important;
+     padding-left: 19px !important;
 }
 
-div.graphspanel {
-     padding: 10px 0 20px 0;
-     margin: -16px -16px -11px -16px;
-     background: #000012;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #99f;
-     text-align: center !important;
+table#reseedconfig input[type="text"], table#reseedconfig input[type="password"] {
+     width: 250px;
+}
 }
 
-div.graphspanel img {
-     border: 1px solid #99f;
-     padding: 2px;
-     margin: 6px;
-     background: #00000A;
-     opacity: 0.9;
+@media screen and (min-width: 1840px) {
+div[id^="config_"] div.confignav {
+     display: flex;
+     flex-direction: row;
+     flex-wrap: wrap;
+     align-content: space-evenly;
+     justify-content: center;
+     padding: 4px 4px 5px 3px !important;
 }
 
-div.graphspanel img:hover {
-     border: 1px solid #f60;
-     padding: 2px;
-     margin: 6px;
-     text-align: center !important;
-     background: #002;
-     opacity: 1;
+div[id^="config_"] .tab, div[id^="config_"] .tab2 {
+     flex: auto;
+     flex-basis: content;
+     flex-grow: 0.06;
+     margin: 0 -1px -1px 0 !important;
+     white-space: nowrap;
+     min-width: 70px !important;
 }
 
-div.graphspanel hr {
-     margin: 10px 0;
+div[id^="config_"] .tab2 {
+     padding: 5px 6px;
 }
 
-div.graphspanel form:last-child {
-     text-align: left;
-     margin: 0 20px;
+div[id^="config_"] .tab a {
+     padding: 4px 6px;
 }
 
-div.graphspanel h3 {
-     text-align: left;
-     margin: 10px 20px 10px 20px;
+div[id^="config_"] div.confignav {
+     padding: 0 !important;
 }
 
-table code {
-     font-size: 8.5pt;
+div[id^="config_"] .tab, div[id^="config_"] .tab2 {
+     margin-top: -1px !important;
 }
 
-table li:last-child {
-     margin-bottom: 15px;
+div[id^="config_"] .tab:first-child {
+     margin-left: -1px !important;
+}
 }
 
-table ul {
-     font-size: 8.5pt;
+/* responsive proxy errors */
+
+@media screen and (max-width: 800px) {
+.warning {
+     margin-left: 20px !important;
+     margin-top: 130px !important;
+     background: url(images/camotile2.png) !important;
+     padding: 5px 15px 15px !important;
 }
 
+.warning h3, .warning a, .warning p {
+     font-size: 9pt;
+}
 
-code {
-     text-align: left;
-     font: 9pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     color: #0d0;
-/*     padding: 0 2px;*/
+.logo {
+     position: absolute;
+     top: 20px;
+     width: calc(100% - 62px) !important;
+     z-index: 999;
+     min-width: 330px;
+     display: block;
 }
 
-div.footnote {
-     text-align: right;
-     color: #99f;
-     font-size: 7pt;
-     margin-bottom: -5px;
+.logo a {
+     width: auto !important;
+     padding: 2px 5px !important;
+     display: inline-block !important;
 }
 
-div.footnote hr{
-     margin: 15px 0 3px 0 !important;
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border: 0 solid #99f;
+.logo a img {
+     padding: 0 !important;
+     margin-top: -2px;
+     margin-bottom: -4px;
+}
 }
 
-.topness {
-     font-size: 8pt;
+@media screen and (min-height: 700px) {
+.proxyfooter {
+     position: absolute;
+     bottom: 0;
+     right: 0;
+     padding: 0 20px 0 0;
      text-align: right;
-     margin-top: -5px;
-     margin-bottom: -10px;
-     margin-right: 5px;
+     background: #030;
+     width: 100%;
+     opacity: 0.7;
+     border-top: 1px solid #000;
+}
+
+.proxyfooter p {
+     text-align: right;
+     line-height: 130% !important;
+     margin: 5px 0;
 }
 
-/* Fixes for when app is not started and console loads inside iframe */
+.warning {
+     margin-bottom: 30px;
+}
+}
 
-body.iframed {
-     background: transparent url('../dark/images/transparent.gif') !important;
+@media screen and (max-height: 700px) {
+.proxyfooter {
+     display: none;
+}
 }
+/* end proxy errors */
+/* end responsive layout */
 
-.iframed div.routersummaryouter {
-     display: none !important;
+/* IE/Edge tweaks */
+
+_:-ms-lang(x), .tunnels_client th:first-child::after {
+     letter-spacing: -0.05em;
+     font-weight: normal;
 }
 
-/* end iframed console fixes */
+_:-ms-lang(x), table + .statusnotes {
+     margin-top: -2px;
+}
+
+/* end IE/Edge tweaks */
diff --git a/installer/resources/themes/console/midnight/console_ar.css b/installer/resources/themes/console/midnight/console_ar.css
new file mode 100644
index 0000000000000000000000000000000000000000..ee70de9813d9dc205c932c5c4f0f6de0dec3977f
--- /dev/null
+++ b/installer/resources/themes/console/midnight/console_ar.css
@@ -0,0 +1,375 @@
+/* I2P Theme: Camo aka Dark - Arabic override */
+/* Description: Military Grade. */
+/* Comment: Thanks to Florian Kuhlmann for the hatface images. [http://www.flickr.com/photos/floriankuhlmann/] */
+/* Author: dr|z3d */
+
+body {
+     direction: rtl;
+}
+
+div.main li {
+     margin: 5px 20px;
+     text-align: right;
+     line-height: 150%;
+}
+
+table {
+     direction: rtl;
+}
+
+td {
+    text-align: right;
+}
+
+div.news {
+     margin: -1px 205px 0px 5px;
+     direction: ltr;
+}
+
+.news h3, #newspage h3 {
+     direction: ltr;
+}
+
+div.main {
+     margin: -1px 205px 5px 5px;
+     background: url("images/scarface.jpg") no-repeat scroll left bottom #000000 !important;
+}
+
+h1 {
+     margin: 0 205px 0 5px !important;
+}
+
+h1,h2,h3,h4 {
+     direction: rtl;
+     text-align: right;
+}
+
+button.search {
+     margin-right: 30px;
+}
+
+div.routersummary img[src$="i2plogo.png"] {
+     width: 173px;
+     margin: 0 -2px 0 0;
+}
+
+div.routersummary h3, div.routersummary h4, .routersummary a, .routersummary b {
+     text-align: center;
+     font-weight: normal;
+}
+
+div.routersummary h3, div.routersummary h4 {
+     font-size: 10pt;
+}
+
+div.routersummary td {
+     text-align: right;
+}
+
+div.routersummary td:last-child {
+     text-align: left;
+     margin-left: 3px;
+}
+
+div.routersummary td:first-child {
+     text-align: right;
+}
+
+#sb_services td, #sb_internals td, #sb_advanced td {
+     text-align: center;
+}
+
+#sb_localtunnels td:nth-child(2), #sb_localtunnels a {
+     text-align: right !important;
+}
+
+#sb_localtunnels td:last-child {
+     text-align: left;
+}
+
+div.tunnels {
+     padding: -3px 0 !important;
+}
+
+div.tunnels table {
+     margin: 0 -7px 0 5px !important;
+}
+
+.langbox {
+     float: left;
+     text-align: left;
+}
+
+.formaction {
+     text-align: left;
+}
+
+form {
+    text-align: right;
+}
+
+div.routersummary form {
+    text-align: center;
+}
+
+.cells {
+    text-align: center;
+}
+
+div.joblog li, div.newsheadings li {
+    text-align: left;
+    direction: ltr;
+}
+
+span.newtab {
+     text-align: left;
+     font-size: 8pt;
+     float: left;
+     letter-spacing: 0;
+}
+
+.tab2::before, .tab2::after {
+     display: none;
+}
+
+/* lang selection */
+
+.langselect img {
+     margin-right: -61px;
+}
+
+.langselect .optbox:checked + img {
+     margin-right: -63px;
+}
+
+/* theme selection */
+
+.themechoice, .langselect {
+     float: right !important;
+} 
+
+.themechoice {
+     padding: 5px;
+}
+
+.themechoice .optbox {
+     opacity: 0; /* hide the radio icon so we can use thumbnail img instead */
+     outline: 1px dotted #f00;
+     position: absolute;
+     padding: 2px;
+     margin-right: -27px;
+     min-height: 78px !important;
+}
+
+.themechoice .optbox + img {
+     border: 1px solid transparent;
+}
+
+.themechoice .optbox + img, .themechoice .optbox:checked + img {
+     margin: 5px;
+     padding: 0 !important;
+}
+
+h3#iptransport a, th#upnpconfig a, h3#bwlimiter a, #config_stats h3 a, #config_logging h3 a, h3#graphdisplay a, #logs h3 a, h3#advancedconfig a {
+     float: left;
+}
+
+#sybilnav ul li a {
+     padding-right: 0;
+}
+
+.sybil_routerinfo th:first-child {
+     text-align: right;
+}
+
+.sybil_routerinfo th:nth-last-child(2) {
+     padding-left: 0;
+     text-align: left !important;
+}
+
+.sybil_routerinfo th {
+     padding: 1px 3px 1px 1px !important;
+}
+
+table#leasesetdebug th:first-child, table#leasesetsummary th:first-child {
+     text-align: right;
+}
+
+table#leasesetdebug th:last-child, table#leasesetsummary th:last-child {
+     text-align: left;
+}
+
+table#leasesetdebug th, table#leasesetsummary th {
+      padding: 5px;
+}
+
+table.leaseset th {
+     text-align: right;
+}
+
+table.leaseset th:first-child b {
+     float: right;
+}
+
+table.leaseset th:last-child, table.leaseset td:nth-child(2) {
+     text-align: left;
+}
+
+#netdboverview th, table.netdbentry th, table#leasesetdebug td:nth-child(2n) {
+     text-align: right;
+}
+
+.main#debug {
+     direction: ltr;
+}
+
+#jardump.main th:nth-child(1), #jardump.main th:nth-child(3), #jardump.main th:nth-child(6), #jardump.main th:nth-child(7) {
+     text-align: right;
+}
+
+#schedjobs td {
+     text-align: center;
+}
+
+table.netdbentry th:last-child, table#leasesetdebug td:nth-child(2n+1) {
+     text-align: left;
+}
+
+#tunnels.main h3 a {
+     float: left;
+}
+
+table#enviro td:first-child {
+     text-align: left;
+}
+
+#wrapperlogs pre, table[id$="logs"] ul, .logtable ul li {
+     direction: ltr;
+     text-align: left;
+}
+
+#criticallogs ul {
+     border: none;
+}
+
+#eventlog th {
+     text-align: right;
+     padding-right: 10px;
+}
+
+.homelinkedit th:nth-child(3), .homelinkedit th:last-child {
+     text-align: right !important;
+}
+
+table#netconfig th, table#externali2cp th, table#plugininstall th, .configtable th, th.th_title {
+     text-align: right !important;
+}
+
+#sidebarconf th:nth-child(1), #sidebarconf th:nth-child(2) {
+     text-align: right;
+}
+
+#sidebarconf td:nth-child(4) {
+     padding-right: 0;
+}
+
+#sidebarconf td:nth-child(3) {
+     text-align: left !important;
+     padding-left: 0;
+}
+
+.configtable td.infohelp, p.infohelp, td.infohelp, p#debugmode, p#sybilinfo, p.infowarn, td.infowarn, p#keyringhelp, h3#shutdownrouter + p, h3#restartrouter + p, h3#servicedebug + p, h3#browseronstart + p, h3#runonstartup + p, h3#systray + p {
+     background: #000 url(images/infohelp.png) right 8px center no-repeat !important;
+     padding: 15px 45px 15px 15px !important;
+}
+
+p.infowarn, td.infowarn {
+     background: #000 url(images/infowarn.png) right 8px center no-repeat !important;
+}
+
+.main#config_update .messages {
+     background: #000 url(images/infohelp.png) no-repeat right 10px center !important;
+     text-align: right;
+     padding: 15px 55px 15px 15px;
+}
+
+.main#config_update .messages a {
+     float: left;
+     margin: 0 5px
+}
+
+td.optionsave {
+     text-align: left;
+}
+
+#tunnelconfig th {
+     text-align: right;
+}
+
+#consolepass input[name="nofilter_pw"], #externali2cp input[name="nofilter_pw"], #consolepass input[name="nofilter_pw"]:focus, #externali2cp input[name="nofilter_pw"]:focus,
+#consolepass input[name="name"], #externali2cp input[name="user"], #consolepass input[name="name"]:focus, #externali2cp input[name="user"]:focus {
+     background-position: right 3px center, center center !important;
+     padding: 4px 20px 4px 4px !important;
+     margin: 5px 3px 5px 15px !important;
+}
+
+#consolepass tr:first-child td, p#clientconf.infohelp, p#webappconfigtext.infohelp, #floodfillconfig .infohelp, 
+#bandwidthconfig tr:first-child .infohelp, h3#shutdownrouter + p.infohelp, h3#restartrouter + p.infohelp, h3#systray + p.infohelp, 
+h3#servicedebug + p.infohelp, h3#browseronstart + p.infohelp, table#addkeyring td:first-child, #config_peers tr:nth-child(3) td.infohelp, 
+#config_reseed.main p.infohelp, #plugininstall tr:nth-child(3) td:nth-last-child(2), #manualreseed tr:nth-child(3) td:nth-last-child(2), 
+#manualreseed tr:nth-child(5) td:nth-last-child(2), #plugininstall tr:nth-child(5) td:nth-last-child(2), #manualreseed tr:nth-last-child(2) td.infohelp, 
+p#enablefullstats, p#gatherstats, #oldhome td:first-child, p#pluginconfigtext, #plugininstall .infohelp, #config_family .infohelp, 
+#joinfamily tr:nth-child(3) td:first-child, #newfamily tr:last-child td:first-child, #config_summarybar .configtable td:not(.optionsave),
+table#bugreports td.infohelp {
+     background-position: right 12px center !important;
+     padding: 15px 50px 15px 15px !important;
+}
+
+div[lang="ar"] ul li {
+     list-style-image: url("images/link.png") !important;
+     list-style-position: inside;
+     margin-left: 0 !important;
+     padding-left: 0 !important;
+     margin-top: 15px !important;]
+}
+
+div[lang="ar"] ul, div[lang="ar"] p {
+     margin: 10px;
+}
+
+#advancedsettings p.infohelp {
+     margin: 12px 0 -2px;
+}
+
+/* responsive layout */
+
+@media screen and (min-width: 1500px) {
+.main, .news, h1 {
+     margin-right: 232px !important;
+     margin-left: 0 !important;
+}
+
+div.routersummaryouter {
+     margin-right: 27px !important;
+}
+
+
+div.routersummary img[src$="i2plogo.png"] {
+     width: 196px;
+     margin: -2px 0 0;
+}
+
+.routersummary h4 {
+     font-size: 11pt !important;
+}
+
+.routersummary td, .routersummary a {
+     font-size: 10pt !important;
+}
+
+div[lang="ar"], div[lang="ar"] code, div[lang="ar"] b {
+     font-size: 11pt !important;
+}
+}
+
+/* end responsive layout */
\ No newline at end of file
diff --git a/installer/resources/themes/console/midnight/console_big.css b/installer/resources/themes/console/midnight/console_big.css
index 9a1796aeaa1b5c2dc50c7bf21c4c6bff3e9a6b7c..00576a80762a33ad9f99083a63bef11ca7d02d9e 100644
--- a/installer/resources/themes/console/midnight/console_big.css
+++ b/installer/resources/themes/console/midnight/console_big.css
@@ -9,12 +9,12 @@ div.routersummary {
      font: 9.5pt/125%;
 }
 
-div.routersummary h3 {
-     font-size: 12.5pt;
+div.routersummary h3, div.routersummary h3 a {
+     font-size: 12.5pt !important;
 }
 
-div.routersummary h4 {
-     font-size: 11.5pt;
+div.routersummary h4, div.routersummary h4 a {
+     font-size: 11.5pt !important;
      letter-spacing: 0;
 }
 
@@ -25,18 +25,84 @@ div.routersummary table {
 }
 
 div.routersummary table a:link, div.routersummary table a:visited {
-     font-size: 10.5pt;
+     font-size: 11pt !important;
 }
 
-div.tunnels a{
+div.tunnels a {
      font-size: 9pt !important;
 }
 
-div.tunnels table{
+div.tunnels table {
      margin: -2px -0px -4px 2px !important;
      width: 185px;
 }
 
+#newsDisplay, #newsStatus {
+     font-size: 11pt !important;
+}
+
+.langbox {
+     margin-top: 4px !important;
+}
+
+.applabel, .themechoice, .langselect {
+     width: 152px !important;
+}
+
+.ui_lang {
+    width: 156px !important;
+}
+
+.appimg {
+     height: 50px !important;
+}
+
+img.app, img.app2p {
+     padding-top: 12px !important;
+}
+
+.applabel a, .applabel a:hover {
+     padding: 4px 2px;
+}
+
+.applabel a, .applabel a:hover, .ui_lang, .themelabel {
+     font-size: 11pt !important;
+}
+
+.themechoice .optbox {
+     min-width: 156px !important;
+     margin-left: -50px !important;
+}
+
+.langselect .optbox {
+     min-width: 156px !important;
+}
+
+.langselect img {
+     margin-left: -87px !important;
+}
+
+label, select, select option, #configstats th b, .infohelp, .infowarn {
+     font-size: 11pt !important;
+}
+
+.messages li {
+     font-weight: normal !important;
+     font-size: 11pt;
+}
+
+.confignav {
+     font-size: 12pt;
+}
+
+.tab, .tab2 {
+     margin-right: -4px !important;
+}
+
+.themechoice {
+     height: 82px !important;
+}
+
 /* global overrides */
 
 a, b, div.routersummary h3 a, div.routersummary h4 {
@@ -57,6 +123,44 @@ div.joblog li i {
 }
 
 b, div.joblog b {
-    color: #ee8;
     font-size: 110%;
-}
\ No newline at end of file
+}
+
+p, div[id^="config_"] th {
+     font-size: 11pt !important;
+}
+
+input[type="submit"], input[type="reset"] {
+     font-size: 12pt !important;
+     font-weight: normal !important;
+}
+
+/* responsive layout */
+
+@media screen and (min-width: 800px) {
+label, select, select option, #configstats th b, p.infohelp, p.infowarn, td.infohelp, td.infowarn {
+     font-size: 11pt !important;
+     font-weight: normal !important;
+}
+
+input[type="text"], input[type="password"], textarea {
+     font-size: 11pt !important;
+}
+}
+
+@media screen and (min-width: 1200px) {
+.langbox {
+     margin-top: 5px !important;
+     line-height: 16px;
+}
+}
+
+
+@media screen and (min-width: 1500px) {
+.langbox {
+     margin-top: 6px !important;
+     line-height: 16px;
+}
+}
+
+/* end responsive layout */
\ No newline at end of file
diff --git a/installer/resources/themes/console/midnight/default.css b/installer/resources/themes/console/midnight/default.css
deleted file mode 100644
index ed4d729245fa478d143166664d93eb958f5a6f3e..0000000000000000000000000000000000000000
--- a/installer/resources/themes/console/midnight/default.css
+++ /dev/null
@@ -1,254 +0,0 @@
-/* I2P Theme: Midnight - I2P Tunnel Manager */
-/* Description: Minimalist Midnight Blue, based on Classic theme.*/
-/* Author: Dr|Z3d */
-
-body {
-     margin: 0px;
-     padding: 0px;
-     text-align: center;
-     font: 10pt/140% "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     background: #000;
-     color: #eef;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-body.iframed {
-     background: transparent url('../dark/images/transparent.gif') !important;
-     padding: 15px 0 0;
-}
-
-div {
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-h4, label {
-     margin: 0px;
-     padding: 2px;
-     float: left;
-     width: 150px;
-     height: 24px;
-     font-weight: normal;
-     text-align: right;
-     font-size: 8.5pt;
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-}
-
-h4 {
-     font-size: 10.5pt;
-     text-align: left !important;
-     font-weight: bold;
-     margin: -6px 0 5px -10px !important;
-     padding: 5px 10px 5px 10px;
-     background: #001;
-     text-shadow: 0px 0px 1px rgba(32, 32, 192, 0.3);
-     text-transform: uppercase;
-     white-space: nowrap;
-     width: 800px;
-     letter-spacing: 0.09em;
-     background: #001 url("/themes/console/midnight/images/tinytitles.png") repeat-x center center !important;
-}
-
-label {
-     font-style: italic;
-     margin: 0 3px 0 -3px;
-}
-
-a {
-     text-decoration: none;
-}
-
-form {
-     margin: 0px;
-}
-
-textarea, input, select, button, a {
-     -moz-box-sizing: border-box;
-     box-sizing: border-box;
-     font: 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     float: left;
-     margin: 2px 0 5px 0;
-     background: #001;
-     color: #eef;
-     border-radius: 3px;
-}
-
-button {
-     float: none;
-     height: 20px !important;
-}
-
-textarea {
-     border: 1px solid #99f;
-     background: #000;
-     color: #eef;
-}
-
-br {
-     clear: left;
-}
-
-div.statusNotRunning {
-     float: left;
-     width: 82px;
-     height: 24px;
-     color: #d00;
-}
-
-div.statusRunning {
-     float: left;
-     width: 82px;
-     height: 24px;
-     color: #0d0;
-}
-
-div.statusStarting {
-     float: left;
-     width: 82px;
-     height: 24px;
-     color: #393;
-}
-
-hr {
-     display: none;
-}
-
-.separator, .subdivider {
-     clear: both;
-     height: 1px;
-     margin: 5px -8px 5px -8px;
-     border-bottom: 1px solid #99f;
-}
-
-.subdivider {
-     border-bottom: 1px dotted #99f;
-     margin: 0 0 10px 0;
-}
-
-.freetext {
-     width: 150px;
-     height: 22px;
-     border: 1px solid #99f;
-}
-
-.control {
-     margin: 2px;
-     padding: 2px;
-     overflow: hidden;
-     height: 20px;
-     min-width: 60px;
-     font-weight: bold;
-     background: #ddd;
-     color: #001 !important;
-     border: 1px outset #ddddc0;
-     text-align: center;
-     vertical-align: middle;
-     white-space: nowrap;
-     text-decoration: none;
-     border-radius: 3px;
-}
-
-.control:hover {
-     background: #77f;
-     color: #fff !important;
-     text-decoration: none;
-}
-
-.control:active {
-     border: 2px inset;
-}
-
-.panel {
-     width: 790px;
-     margin: 16px auto 16px auto;
-     padding: 5px 10px;
-     overflow: hidden;
-     text-align: left;
-     font-size: 8pt;
-     background: #001;
-     border: 1px solid #99f;
-     -moz-box-shadow: inset 0px 0px 0px 1px #99f;
-     border-radius: 3px;
-}
-
-.iframed .panel {
-     margin: 16px auto -8px auto !important;
-}
-
-.iframed .panel.iframed {
-     margin: 0 auto -8px auto !important;
-}
-
-.panel .footer {
-
-     padding: 4px;
-}
-
-.toolbox {
-     width: 100%;
-}
-
-.rowItem {
-     width: 750px;
-     float: left;
-     margin: 0px;
-}
-
-.comment {
-     font-style: italic;
-     white-space: nowrap;
-}
-
-.text {
-     height: 24px;
-     width: 150px;
-     padding: 2px 0 0 2px;
-     float: left;
-     margin: 0;
-     font-weight: bold;
-}
-
-.accessKey {
-     text-decoration: underline;
-}
-
-#globalOperationsPanel {
-     background: #001;
-     border: 1px solid #99f;
-     -moz-box-shadow: inset 0px 0px 0px 1px #900;
-     padding: 5px 5px 10px 5px;
-     text-align: right;
-}
-
-#globalOperationsPanel .control {
-     min-width: 100px !important;
-     margin-top: 3px;
-     float: right;
-}
-
-a:link {
-     color: #bbf;
-     text-decoration: none;
-     font-weight: bold;
-     word-wrap: break-word;
-}
-
-a:visited {
-     color: #aaf;
-     text-decoration: none;
-     font-weight: bold;
-}
-
-a:hover {
-     color: #f60;
-     text-decoration: underline;
-     font-weight: bold;
-}
-
-a:active {
-     color: #f93;
-     text-decoration: underline;
-     font-weight: bold;
-}
diff --git a/installer/resources/themes/console/midnight/i2ptunnel.css b/installer/resources/themes/console/midnight/i2ptunnel.css
index faa1f1ee7bfb137e0236bca7e541ff18f538dfca..8ea3c6a05c8c7cbd09eb5dd032d583578e6e7f0b 100644
--- a/installer/resources/themes/console/midnight/i2ptunnel.css
+++ b/installer/resources/themes/console/midnight/i2ptunnel.css
@@ -1,179 +1,1050 @@
-/* I2P Tunnel Edit Page
-*/
-
-#tunnelEditPage input {
-    width: 458px;
-}
-
-#tunnelEditPage select {
-    width: 308px;
-}
-
-#tunnelEditPage option[selected] {
-    color: green;
-}
-
-#tunnelEditPage #targetField,
-#tunnelEditPage #accessField,
-#tunnelEditPage #optionsField {
-    height: 48px;
-    width: 150px;
-}
-#tunnelEditPage #tunnelOptionsField {
-    height: 96px;
-    width: 150px;
-}
-
-#tunnelEditPage #targetField label,
-#tunnelEditPage #accessField label,
-#tunnelEditPage #tunnelOptionsField label,
-#tunnelEditPage #optionsField label{
-    height: 48px;
-    width: 150px;
-}
-
-#tunnelEditPage #reachField,
-#tunnelEditPage #hostField,
-#tunnelEditPage #depthField,
-#tunnelEditPage #countField,
-#tunnelEditPage #optionsHostField {
-    width: 304px;
-    margin-right: 4px;
-}
-
-#tunnelEditPage #portField,
-#tunnelEditPage #optionsPortField,
-#tunnelEditPage #backupField,
-#tunnelEditPage #varianceField {
-    width: 140px;
-}
-
-#tunnelEditPage #reachField label,
-#tunnelEditPage #hostField label,
-#tunnelEditPage #portField label,
-#tunnelEditPage #optionsHostField label,
-#tunnelEditPage #optionsPortField label,
-#tunnelEditPage #depthField label,
-#tunnelEditPage #countField label,
-#tunnelEditPage #backupField label,
-#tunnelEditPage #varianceField label {
-    text-align: left;
-
-}
-
-#tunnelEditPage #otherField label {
-    width: 300px;
-}
-
-#tunnelEditPage #reachableByOther,
-#tunnelEditPage #tunnelDepth,
-#tunnelEditPage #tunnelQuantity,
-#tunnelEditPage #targetHost,
-#tunnelEditPage #clientHost {
-    width: 306px;
-}
-
-#tunnelEditPage #port {
-    width: 80px;
-}
-
-#tunnelEditPage #targetPort,
-#tunnelEditPage #clientPort,
-#tunnelEditPage #tunnelBackupQuantity,
-#tunnelEditPage #tunnelVariance {
-    width: 150px;
-}
-
-#tunnelEditPage #shared,
-#tunnelEditPage #connectDelay,
-#tunnelEditPage #startOnLoad {
-    width: 16px;
-}
-
-#tunnelEditPage label {
-    width: 150px;
-    font-weight: bold;
-    text-align: right;
-    float: left;
-}
-
-/* I2P Tunnel List Page
-*/
-
-#tunnelListPage .rowItem {
-    width: 150px;
-}
-
-#tunnelListPage select {
-    width: 150px;
-}
-
-#tunnelListPage textarea {
-    width: 100%;
-    height: 60px;
-    padding: 0 0 0 4px;
-    color: green;
-    margin: 5px 0 10px;
-}
-
-#tunnelListPage .footer .control {
-    margin-left: 2px;
-}
-
-#tunnelListPage .footer label {
-    text-align: right;
-    height: 24px;
-    width: 360px;
-    float: left;
-
-}
-
-/* Use Leary and Langridge content replacement methods (LIR)
-** to embed accessibility information into the document.
-** Should allow the lists to be rendered nicely by
-** screen readers. (and lynx!)
-*/
-
-#tunnelListPage label {
-    height: 0;
-    width: 0;
-    overflow: hidden;
-}
-
-#tunnelListPage .nameHeaderField label,
-#tunnelListPage .portHeaderField label,
-#tunnelListPage .typeHeaderField label,
-#tunnelListPage .interfaceHeaderField label,
-#tunnelListPage .targetHeaderField label,
-#tunnelListPage .previewHeaderField label,
-#tunnelListPage .statusHeaderField label {
-    text-align: left;
-    width: 150px;
-    height: 24px;
-    float: left;
-}
-
-#tunnelListPage .targetField,
-#tunnelListPage .targetField .text,
-#tunnelListPage .targetHeaderField,
-#tunnelListPage .targetHeaderField label {
-    width: 300px;
-}
-
-#tunnelListPage .descriptionField,
-#tunnelListPage .destinationField {
-    width: 750px;
-}
-
-#tunnelListPage .descriptionField .text,
-#tunnelListPage .destinationField .text {
-    width: 450px;
-}
-
-#tunnelListPage .descriptionField label,
-#tunnelListPage .destinationField label {
-    text-align: right;
-    width: 150px;
-    height: 24px;
-    float: left;
-}
+/* I2P TunnelManager theme: "Midnight" */
+/* Author: dr|z3d.  */
+
+body {
+     margin: 0;
+     padding: 0;
+     text-align: center;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+     background: #000;
+     color: #c9ceff;
+     font-size: 9pt;
+}
+
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+     padding: 0;
+     overflow: hidden;
+}
+
+* {
+     outline: none;
+}
+
+:-moz-focusring {
+     outline: none !important;
+}
+
+div {
+     -moz-box-sizing: border-box;
+     box-sizing: border-box;
+}
+
+a {
+     text-decoration: none;
+     font-weight: bold;
+}
+
+a:link {
+     color: #4e47bf;
+     outline: none;
+}
+
+a:visited {
+     color: #7670c2;
+}
+
+a:hover, a:focus {
+     color: #652787;
+}
+
+a:active {
+     color: #4f0519;
+}
+
+.accesskey {
+     display: none !important;
+     text-decoration: underline;
+}
+
+form {
+     margin: 0;
+}
+
+br {
+     clear: left;
+}
+
+div.statusNotRunning {
+     height: 24px;
+     overflow: hidden;
+     color: #d00;
+     background: url('images/console_status_stopped.png') center center no-repeat;
+}
+
+div.statusRunning {
+     height: 24px;
+     overflow: hidden;
+     color: #0b0;
+     background: url('images/console_status_running.png') center center no-repeat;
+}
+
+div.statusStarting {
+     height: 24px;
+     overflow: hidden;
+     color: #393;
+     background: url('images/console_status_starting.png') center center no-repeat;
+}
+
+div[class^="status"] {
+     font-size: 0 !important;
+     background-position: center center;
+     text-align: center;
+     margin: 0;
+     padding: 0;
+     width: 100%;
+     background-size: auto 16px;
+}
+
+hr {
+     display: none;
+}
+
+#clientHost {
+     width: 300px;
+}
+
+#clientPort {
+     width: 100px;
+}
+
+.panel {
+     margin: 8px auto;
+     padding: 5px 3px !important;
+     width: calc(100% - 14px);
+     min-width: 540px;
+     max-width: 1400px;
+     overflow: hidden;
+     text-align: left;
+     color: #c9ceff;
+     background: none;
+}
+
+.panel:first-child {
+     margin-top: 0;
+}
+
+.panel:last-child {
+     margin-bottom: 5px;
+}
+
+.panel#clients {
+     margin-top: -23px !important;
+}
+
+.iframed .panel#clients {
+     margin-top: -20px !important;
+}
+
+.iframed .panel.iframed {
+     margin: 0 auto -8px auto !important;
+}
+
+.iframed .panel {
+     margin: 16px auto -8px auto !important;
+     width: 100%;
+}
+
+#globalTunnelControl {
+     margin: -13px auto;
+}
+
+.iframed #globalTunnelControl {
+     margin: 6px auto -26px !important;
+}
+
+#serverTunnels {
+     margin: -1px 0 10px;
+}
+
+h2, h3 {
+     padding: 7px 10px;
+     border: 1px solid #2d295f;
+     background: linear-gradient(to bottom, #191729 50%, #000 50%) !important;
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     margin: 5px 0 -1px;
+     color: #c9ceff;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+h3 {
+     margin-top: 10px;
+}
+
+.iframed h2 {
+     margin: 10px 0 -1px;
+}
+
+/* title images */
+
+h2, h3 {
+     padding-left: 32px;
+     background-blend-mode: luminosity, normal, normal !important;
+}
+
+.panel:hover h2, .panel:hover h3 {
+     background-blend-mode: normal, normal, normal !important;
+}
+
+#messages h2 {
+     background: url(/themes/console/images/info/logs.png) left 6px center no-repeat, linear-gradient(to bottom, #191729 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#globalTunnelControl h2 {
+     background: url(/themes/console/images/info/control.png) left 6px center no-repeat, linear-gradient(to bottom, #191729 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#servers h2 {
+     background: url(/themes/console/images/info/server.png) left 6px center no-repeat, linear-gradient(to bottom, #191729 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#clients h2 {
+     background: url(/themes/console/images/info/client.png) left 6px center no-repeat, linear-gradient(to bottom, #191729 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#tunnelEditPage h2, #tunnelEditPage h3, #registration h2, #registration h3 {
+     background: url(/themes/console/images/info/configure.png) left 6px center no-repeat, linear-gradient(to bottom, #191729 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+#wizardPanel h2 {
+     background: url(/themes/console/images/info/wizard.png) left 6px center no-repeat, linear-gradient(to bottom, #191729 50%, #000 50%) !important;
+     background-size: 20px auto, 100% 100%, 100% 100% !important;
+}
+
+/* end title images */
+
+.iframed #globalTunnelControl h2 {
+     margin-top: 2px;
+}
+
+.panel table {
+     width: 100%;
+     border-collapse: collapse;
+     border: 1px solid #2d295f;
+     margin: 0;
+}
+
+th {
+     background: #000;
+     background: linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     padding: 6px 5px;
+     border-top: 1px solid #2d295f;
+     border-bottom: 1px solid #2d295f;
+     font-size: 10pt;
+     color: #c9ceff;
+     text-align: left;
+}
+
+td {
+     border-top: 1px solid #2d295f;
+     vertical-align: middle;
+     padding: 5px;
+     font-size: 9pt;
+}
+
+th:last-child, td:last-child {
+     border-right: 1px solid #2d295f;
+}
+
+#throttler th:last-child, #throttler td:last-child, #wizardTunnelTypes td:last-child, table table th:last-child, table table td:last-child {
+     border-right: none;
+}
+
+td > input {
+     margin-left: 0;
+}
+
+td > b {
+     margin-right: 5px;
+     display: inline-block;
+     min-width: 30px;
+}
+
+td.infohelp {
+     background: url(/themes/console/images/info/infohelp.png) 10px center no-repeat;
+     background-size: 20px 20px;
+     padding: 10px 10px 10px 38px !important;
+}
+
+.tunnelConfig td {
+     width: 50%;
+}
+
+#clientTunnels tr, #serverTunnels tr, .tunnelConfig tr {
+     background: rgba(0,0,0,0.4);
+}
+
+.tunnelProperties {
+     background: #000 !important;
+     overflow: hidden;
+     text-align: left;
+     border: 1px solid #2d295f;
+     border-bottom: 1px inset #120f35 !important;
+}
+
+_:-ms-lang(x), .tunnelProperties {
+     border-bottom: 1px solid #120f35 !important;
+}
+
+#serverTunnels {
+     margin: -1px 0 10px;
+}
+
+.tunnelProperties:hover {
+     background: #002 !important;
+}
+
+.newTunnel {
+     text-align: right;
+     border-top: 1px solid #2d295f !important;
+     padding: 5px !important;
+     background: #fff;
+}
+
+.newTunnel select, .newTunnel input, .newTunnel .control {
+     margin: 2px !important;
+}
+
+.newtunnel form {
+     width: 100%;
+     text-align: right;
+}
+
+.tunnelName {
+     width: 25%;
+     min-width: 150px;
+}
+
+.tunnelName a {
+     background: url(/themes/console/images/buttons/configure.png) left center no-repeat;
+     padding: 3px 3px 3px 20px !important;
+}
+
+.tunnelName a {
+     font-weight: bold;
+}
+
+.tunnelType {
+     width: 25%;
+}
+
+.tunnelPreview, .tunnelPort {
+     width: 15%;
+     text-align: center;
+}
+
+.tunnelLocation, .tunnelInterface {
+     width: 20%;
+}
+
+.tunnelLocation font[color="red"] {
+     margin-left: 2px;
+}
+
+.tunnelStatus {
+     text-align: center;
+     width: 10%;
+     min-width: 48px;
+}
+
+.tunnelControl {
+     width: 5%;
+     text-align: right;
+     white-space: nowrap;
+}
+
+th.tunnelControl {
+     text-align: center;
+}
+
+textarea {
+     border: 1px solid #443da0;
+     background: #000;
+     margin-left: 4px;
+     margin-right: 4px;
+     font: bold 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     resize: none;
+     box-sizing: border-box;
+     border-radius: 2px;
+}
+
+textarea:focus {
+     color: #c9ceff;
+     background: #000 !important;
+     box-shadow: 0 0 0 1px rgba(101, 39, 135, 0.5);
+     filter: drop-shadow(0 0 1px #880);
+     transition: ease filter 0.3s 0s;
+}
+
+textarea#statusMessages, textarea#statusMessages:active, textarea#statusMessages:focus  {
+     margin: 0;
+     border: 0;
+     box-shadow: none;
+     height: 80px;
+     font-size: 9pt;
+     width: 100%;
+     border-radius: 0;
+     padding: 2px 4px;
+     color: #69f;
+     background: linear-gradient(to bottom, #000 0%, #000019 100%) !important;
+     font-family: "Droid Sans Mono", "Noto Mono", Consolas, "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+
+.freetext {
+     width: 150px;
+     border: 1px solid #443da0;
+     padding: 4px;
+     font: bold 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     background: #fff;
+     color: #7670c2;
+     border-radius: 2px;
+     box-shadow: inset 2px 2px 1px #ccc;
+     cursor: text;
+}
+
+.freetext:focus {
+     box-shadow: 0 0 1px #99f;
+     color: #111;
+}
+
+.freetext[readonly], .freetext[readonly]:focus {
+     background: #000 !important;
+     box-shadow: inset 2px 2px 1px #000;
+     color: #669;
+     cursor: default;
+     border: 1px solid #443da0 !important;
+     opacity: 0.8;
+}
+
+input[type="hidden"], input.default {
+     display: none;
+}
+
+input, select, button, .control {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+     -moz-box-sizing: border-box;
+     box-sizing: border-box;
+     font-size: 9pt;
+     border-radius: 2px;
+     color: #c9ceff;
+     resize: none;
+     cursor: pointer;
+     filter: drop-shadow(0 0 1px #115);
+}
+
+input {
+     background-color: #002;
+     color: #c9ceff;
+     margin: 0 2px 0 2px;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+     border: 1px solid #443da0;
+     text-decoration: none;
+}
+
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, button::-moz-focus-inner {
+     border: none;
+     outline: none;
+}
+
+input[type="file"] {
+     background: none;
+     border: none;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     vertical-align: sub;
+     min-width: 16px;
+     min-height: 16px;
+     margin: 0;
+     background: none;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */
+}
+
+input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus {
+     box-shadow: 0 0 2px 1px #99f;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) drop-shadow(0 0 2px #c9ceff); /* colorize radios and checkboxes */
+}
+
+label {
+     cursor: pointer;
+}
+
+input[type="password"] {
+     cursor: text;
+}
+
+input[type="text"], input[type="password"], textarea, textarea[readonly="readonly"]:focus  {
+     background: #000;
+     background: linear-gradient(to bottom, #000 0%, #000019 100%);
+     box-shadow: inset 0 0 3px 3px #000;
+     filter: none;
+     color: #7670c2;
+}
+
+input[type="text"]:focus, input[type="password"]:focus {
+     color: #c9ceff;
+     background: #000;
+     box-shadow: 0 0 0 1px rgba(101, 39, 135, 0.5);
+     filter: drop-shadow(0 0 1px #99f);
+     transition: ease filter 0.3s 0s;
+}
+
+input[readonly="readonly"]:focus {
+     box-shadow: none;
+     filter: none;
+     background: linear-gradient(to bottom, #000 0%, #010 100%) !important;
+}
+
+a.control, input.control {
+     white-space: nowrap;
+     vertical-align: middle;
+}
+
+.control, .control:link, .control:visited {
+     overflow: hidden;
+     margin: 2px !important;
+     text-align: center;
+     white-space: nowrap;
+     text-decoration: none;
+     font-style: normal;
+     border: 1px solid #3e3f8f;
+     border-bottom: 1px solid #14144f;
+     border-right: 1px solid #14144f;
+     border-radius: 2px;
+     min-width: 78px;
+     font-size: 8pt;
+     font-weight: bold;
+     box-sizing: border-box;
+     min-width: 70px !important;
+     padding: 5px 8px !important;
+     color: #4e47bf !important;
+     background: #000 !important;
+     background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+}
+
+.control:hover, .control:focus {
+     text-decoration: none;
+     color: #652787 !important;
+     border: 1px solid #652787 !important;
+     box-shadow: inset 0 1px 1px 0 #ddf;
+     background: #000 !important;
+}
+
+.control:active {
+     background: #652787 !important;
+     color: #c9ceff !important;
+     text-decoration: none;
+     box-shadow: inset 0 0 0 1px #000 !important;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important;
+}
+
+a.control {
+     display: inline-block;
+}
+
+button.control {
+     box-sizing: border-box;
+     -moz-box-sizing: border-box;
+}
+
+button, input[type="submit"], input[type="reset"], .control, select {
+     box-shadow: inset 0 0 0 1px #000020;
+}
+
+select {
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     background: #000 url(images/dropdown.png) right center no-repeat !important;
+     color: #4e47bf;
+     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+     font-weight: bold;
+     padding: 4px 16px 4px 4px !important;
+     border-radius: 2px;
+     cursor: pointer;
+     border: 1px solid #3e3f8f;
+     border-bottom: 1px solid #14144f;
+     border-right: 1px solid #14144f;
+     min-width: 120px;
+     text-overflow: ellipsis;
+}
+
+select option { /* dropdown menu reverts to normal font-weight */
+     font-weight: normal;
+     font-size: 9.5pt;
+}
+
+select option:hover, select option:focus, select option:checked {
+     box-shadow: inset 0 0 20px 20px #652787;
+}
+
+select:focus, select:hover {
+     color: #652787;
+     border: 1px solid #652787;
+}
+
+select:hover {
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
+}
+
+select:hover, select:focus, select:active {
+     background: #000 url(images/dropdown_hover.png) right center no-repeat !important;
+}
+
+select::-ms-expand {
+     display: none;
+}
+
+input, select, button {
+     font-size: 9pt;
+     vertical-align: middle;
+}
+
+button, input[type="submit"], input[type="reset"], a.control {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", Verdana, Helvetica, sans-serif;
+     font-weight: bold;
+}
+
+.buttons, .newTunnel {
+     text-align: right !important;
+     padding: 7px 5px !important;
+     background: #000;
+     background: linear-gradient(to bottom, #001, #000);
+     border-top: 1px solid #2d295f !important;
+}
+
+.tunnelDescriptionLabel, .tunnelDestinationLabel {
+     text-align: right;
+     min-width: 150px;
+     display: inline-block;
+     margin-right: 3px;
+     white-space: nowrap;
+}
+
+input {
+     float: none;
+     vertical-align: middle;
+}
+
+#hostField, #leasesetKey, #userAgents {
+     width: 90% !important;
+     margin: 0 !important;
+     text-align: left !important;
+}
+
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity {
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     -o-text-overflow: ellipsis;
+}
+
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity,
+#localDestination, #customOptions, #leasesetKey, #name, #description, textarea[name="accessList"] {
+     width: 100% !important;
+     margin: 0 !important;
+     text-align: left !important;
+}
+
+#oldName, #targetDestination, select#profile, select#connectionProfile {
+     min-width: 280px;
+     width: 30%;
+}
+
+select#profile, select#connectionProfile {
+     width: 70%;
+     width: calc(100% - 10px) !important;
+}
+
+td[colspan="2"] > select#profile {
+     width: calc(50% - 15px) !important;
+}
+
+#customOptions, #userAgents {
+     width: calc(100% - 10px) !important;
+     width: 100% !important;
+}
+
+#localDestination, textarea[name="accessList"], #hostField {
+     width: calc(100% - 5px) !important;
+     width: 100% !important;
+     margin: 3px 0 !important;
+}
+
+textarea[name="accessList"] {
+     margin: 0 !important;
+     height: 80px !important;
+}
+
+#localDestination, .authentication {
+     height: 32px !important;
+     margin: 0 !important;
+}
+
+#localDestination:focus, .authentication:focus {
+     filter: drop-shadow(0 0 1px #c9ceff);
+}
+
+#leasesetKey {
+     height: 24px !important;
+     padding: 3px;
+}
+
+.multiOption {
+     display: inline-block;
+     margin: 5px 10px 5px 0;
+     padding: 0;
+}
+
+.multiOption input {
+     vertical-align: sub;
+}
+
+.multiOption#isServer {
+     background: url(/themes/console/images/server.png) left center no-repeat;
+     padding-left: 20px;
+}
+
+.multiOption#isClient {
+     background: url(/themes/console/images/client.png) left center no-repeat;
+     padding-left: 21px;
+}
+
+td#throttle {
+     padding: 0;
+}
+
+#throttler {
+     border: none;
+}
+
+#throttler th {
+     padding-left: 20px;
+}
+
+#throttler td {
+     width: 20%;
+}
+
+#throttler td:first-child {
+     text-align: right;
+     width: 20%;
+     white-space: nowrap;
+}
+
+#throttler tr:first-child th {
+     border-top: none;
+}
+
+td.blankColumn {
+     width: 20% !important;
+}
+
+#throttler tr:nth-child(odd) {
+     background: #000010;
+}
+
+#throttler tr:nth-child(even) {
+     background: #000017;
+}
+
+#throttler input[type="text"] {
+     width: 80px;
+}
+
+table {
+     background: #000;
+}
+
+#tunnelMessages {
+     padding: 0;
+}
+
+.required:not(old) {
+     display: none;
+}
+
+input::-moz-placeholder {
+     color: #f00;
+     font-weight: bold;
+     opacity: 1;
+}
+
+::-webkit-input-placeholder {
+     color: #f00;
+     font-weight: bold;
+     opacity: 1;
+}
+
+input:focus::-moz-placeholder {
+     opacity: 0;
+}
+
+:focus::-webkit-input-placeholder {
+     opacity: 0;
+}
+
+input.tunnelName, input.tunnelDescription, #userAgents {
+     width: 80%;
+     min-width: 280px;
+     text-overflow: ellipsis;
+}
+
+#websiteName, #privKeyFile, #targetHost, .host {
+     width: 30%;
+     min-width: 250px;
+}
+
+.port, .quantity, .period {
+     width: 80px;
+}
+
+.port[readonly] {
+     width: 120px;
+}
+
+.username, .password {
+     width: 200px;
+}
+
+.username {
+     background: url(/themes/console/images/buttons/user.png) 3px center no-repeat, linear-gradient(to bottom, #001, #000) !important;
+     padding-left: 22px;
+}
+
+.username:focus {
+     background: #000 url(/themes/console/images/buttons/user.png) 3px center no-repeat !important;
+     padding-left: 22px;
+}
+
+.password {
+     background: url(/themes/console/images/buttons/password.png) 3px center no-repeat, linear-gradient(to bottom, #001, #000) !important;
+     padding-left: 22px;
+}
+
+
+.password:focus {
+     background: #000 url(/themes/console/images/buttons/password.png) 3px center no-repeat !important;
+     padding-left: 22px;
+}
+
+.proxyList {
+     width: 40%;
+     min-width: 280px;
+}
+
+#notReady {
+     border: 1px solid #900;
+     padding: 30px;
+     background: #002;
+     margin: 30px auto;
+     width: 400px;
+     text-align: center;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #000;
+     font-size: 11pt;
+     font-weight: bold;
+}
+
+/* wizard specifics */
+
+#wizardPanel {
+    font-size: 10pt;
+}
+
+#wizardTable {
+     padding: 0;
+}
+
+#wizardTunnelTypes td:first-child, #wizardSummary td:first-child {
+     font-weight: bold;
+     width: 10%;
+     min-width: 150px;
+     text-align: right;
+     white-space: nowrap;
+}
+
+#wizardTunnelTypes td:last-child {
+     text-align: justify;
+     padding: 5px 10px 5px 5px;
+}
+
+#wizardTunnelTypes select {
+     margin-left: 0 !important;
+}
+
+#wizardTunnelTypes, #wizardSummary {
+     border: none;
+     margin-top: -1px;
+}
+
+#wizardTunnelTypes tr:nth-child(even), #wizardSummary tr:nth-child(even) {
+     background: #001;
+}
+
+#wizardTunnelTypes tr:nth-child(odd), #wizardSummary tr:nth-child(odd) {
+     background: #000017;
+}
+
+#wizardTunnelTypes tr:last-child {
+     background: #000;
+}
+
+#wizardPanel #name, #wizardPanel #description {
+     width: 300px !important;
+}
+
+#wizardPanel p {
+     padding: 5px 15px;
+     margin: 0;
+     text-align: justify;
+     line-height: 140%;
+}
+
+#wizardPanel input::-moz-placeholder {
+     color: #449;
+     font-weight: normal;
+}
+
+#wizardPanel ::-webkit-input-placeholder {
+     color: #449;
+     font-weight: normal;
+}
+
+#wizardPanel .options {
+     padding: 10px;
+}
+
+#wizardPanel .tag {
+     width: 10%;
+     min-width: 150px;
+     white-space: nowrap;
+     display: inline-block;
+     font-weight: bold;
+     text-align: right;
+     margin-right: 3px;
+}
+
+#wizardPanel select {
+     min-width: 160px;
+     margin-left: 0 !important;
+}
+
+#wizardPanel .infohelp p { /* wizard complete - advanced options info */
+     margin: 0;
+     padding: 0 10px 0 5px;
+}
+
+/* more space */
+
+.tunnelConfig td, td {
+     border-top: 1px inset #17142f;
+     padding: 6px 5px;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     margin: 5px 3px 5px 5px;
+}
+
+.freetext, .tunnelConfig textarea, #customOptions, #userAgents, #hostField  {
+     margin: 5px !important;
+}
+
+#tunnelDepth, #tunnelVariance, #tunnelQuantity, #tunnelBackupQuantity, #leasesetKey {
+     margin: 5px !important;
+     width: calc(100% - 10px) !important;
+}
+
+.tunnelConfig select, select#profile select#connectionProfile, .selectbox {
+     margin: 5px !important;
+}
+
+textarea[name="accessList"], #hostField, #localDestination, .authentication {
+     width: calc(100% - 10px) !important;
+     margin: 5px !important;
+}
+
+#customOptions, #userAgents, #leasesetKey {
+     width: calc(100% - 10px) !important;
+}
+
+.tunnelConfig td > b {
+     min-width: 30px;
+     display: inline-block;
+     margin-left: 5px;
+}
+
+.tunnelDestination {
+     padding-bottom: 1px !important;
+     border-bottom: 1px solid transparent !important;
+}
+
+#clientTunnels .tunnelDescription {
+     padding-top: 1px !important;
+}
+
+.tunnelDestination b, .tunnelDescription b {
+     color: #a8accf;
+}
+
+td.tunnelDestination, td.tunnelDescription {
+     background: linear-gradient(to right, #000 50%, #000020);
+}
+
+/* end more space */
+
+
+/* responsive layout */
+
+@media screen and (max-width: 800px) {
+th {
+     font-size: 9pt;
+}
+
+.statusNotRunning, .statusRunning, .statusStarting {
+     background-size: auto 14px;
+}
+
+#leasesetKey {
+     height: 38px !important;
+}
+
+.port, .quantity, .period {
+     width: 60px;
+}
+
+#clientHost, .host {
+     width: 200px;
+     min-width: 210px;
+}
+}
+
+@media screen and (max-width: 1300px) {
+h2, h3 {
+     font-size: 10.5pt !important;
+}
+}
+
+@media screen and (min-width: 1300px) {
+body, td, .control, select, input, textarea {
+     font-size: 10pt !important;
+}
+
+td {
+     padding: 7px 5px;
+}
+
+#localDestination, .authentication {
+     height: 34px !important;
+}
+}
+
+/* end responsive layout */
\ No newline at end of file
diff --git a/installer/resources/themes/console/midnight/ieshim.css b/installer/resources/themes/console/midnight/ieshim.css
deleted file mode 100644
index 9fe4974348fdc4aee727cf5ef6ac00206befa6e9..0000000000000000000000000000000000000000
--- a/installer/resources/themes/console/midnight/ieshim.css
+++ /dev/null
@@ -1,227 +0,0 @@
-/* I2P Theme: Midnight - IE Override */
-/* Description: Minimalist Midnight Blue, based on Classic theme.*/
-/* Author: Dr|Z3d */
-
-/* Welcome to the wonderful world of kludgey IE fixes */
-/* Note not fully tested with Midnight theme */
-
-.wideload {
-     overflow: auto;
-     width: 100%;
-}
-
-.formaction {
-     text-align: left !important;
-     margin: -10px 0 10px 0;
-}
-
-div.configure {
-     text-align: center;
-}
-
-div.configure p, div.configure table  {
-     text-align: justify;
-}
-
-div.main ul {
-     margin-right: 20px;
-}
-
-div.configure textarea {
-     width: 450px !important;
-}
-
-div.configure input {
-     margin-left: 5px;
-}
-
-div.configure table {
-     width: 550px !important;
-     text-align: center;
-}
-
-h1 {
-     padding: 15px 10px 16px 10px !important;
-     margin: 0 0px 0 17	5px !important;
-     background-color: #000 !important; /* background page color to fix overflow issue */
-     color: #eef;
-}
-
-h2 {
-     padding-top: 0;
-     text-align: left !important;
-}
-
-h3 {
-     margin-top: 10px;
-     text-align: left !important
-}
-
-div.confignav {
-     padding: 15px 0 15px 0;
-     border-left: 0px;
-     margin-left: -15px;
-     border-top: 5px solid #000;
-     margin-bottom: 10px !important;
-}
-
-div.messages {
-     border-left: 0;
-     border-right: 0;
-     margin: -10px -15px 0px -15px;
-}
-
-div.main, div.news {
-     margin: -5px 0px 10px 185px;
-     border: 5px solid #000;
-}
-
-div.main hr, div.news hr {
-     margin: 0;
-}
-
-div.main {
-     border-top: 5px solid #000;
-}
-
-div.news {
-     border-left: 5px solid #000;
-     margin: -5px 0px 0 185px;
-     padding-bottom: 8px;
-}
-
-div.news hr {
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border: 0px;
-     margin: 0 -10px 0 -13px !important;
-}
-
-div.routersummary {
-     color: #001;
-     padding-left: 0px;
-     border-left: 5px solid #000;
-     text-align: center !important;
-     overflow: hidden; /* prevents IE from borking the sidepanel */
-}
-
-div.routersummary submit {
-     padding: 0;
-     margin-bottom: 5px;
-}
-
-div.routersummary input[type=text] {
-     text-align: right !important;
-}
-
-div.routersummary hr {
-     color: #99f;
-     background: #99f;
-     height: 1px;
-     border-bottom: 1px solid #99f;
-     margin: 8px 1px 7px 1px;
-}
-
-div.routersummary h3 {
-     border: 0;
-     text-align: center !important;
-     font-size: 9pt;
-     letter-spacing: 0.05em;
-     margin: -14px 0px -15px 1px;
-     padding: 5px 0px 5px 0px;
-     text-transform: uppercase;
-}
-
-div.routersummary h4 {
-     border: 0;
-     border-bottom: 0 !important;
-     font-size: 8.5pt;
-     letter-spacing: 0.05em;
-     margin: -14px 0px -15px 1px !important;
-     padding: 2px 3px 3px 3px;
-     text-transform: capitalize;
-     text-decoration: none !important;
-     text-align: center !important;
-}
-
-div.routersummary table {
-     border: 0;
-     text-align: center !important;
-     margin: -5px 5px;
-     width: 175px !important;
-     overflow: hidden;
-     font-size: 8pt;
-     padding: 0px -10px;
-     background-image: none !important;
-     background-color: transparent !important;
-     text-align: center !important;
-}
-
-div.routersummary tr {
-     background-image: none !important;
-     background-color: transparent !important;
-     border: 0 !important;
-}
-
-div.routersummary form {
-     margin-top: -25px !important;
-     margin-bottom: -25px !important;
-     text-align: center !important;
-}
-
-div.routersummary p {
-     padding: 0;
-}
-
-div.routersummary td {
-     padding: 2px 4px;
-     background-image: none !important;
-     border: 0 !important;
-}
-
-div.news li {
-     padding-top: 0px	0px !important;
-     margin-bottom: -23px !important;
-}
-
-div.logo {
-}
-
-div.warning {
-     padding: 0px 20px 20px 80px;
-     margin-top: -20px;
-     margin-left: -10px !important;
-}
-
-.langbox {
-     margin: 9px -20px 0px 5px;
-}
-
-td {
-     text-align: left;
-}
-
-th {
-     text-align: left;
-     padding-left: 3px;
-     padding-right: 1px;
-}
-
-div.configure hr{
-     margin: 10px 0 15px 0;
-}
-
-input {
-     padding: 0;
-}
-
-div.graphspanel img {
-     border: 1px solid #99f;
-     margin: 6px 0 !important;
-     background: #001;
-}
-
-div.graphspanel hr {
-     margin: 20px 0;
-}
diff --git a/installer/resources/themes/console/midnight/images/console_status_running.png b/installer/resources/themes/console/midnight/images/console_status_running.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bbc5e37aad0b1118ccc86b31e985c75832ab5e3
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/console_status_running.png differ
diff --git a/installer/resources/themes/console/midnight/images/console_status_starting.png b/installer/resources/themes/console/midnight/images/console_status_starting.png
new file mode 100644
index 0000000000000000000000000000000000000000..fbff2340912a95cc59554a5c36fb8d8dfbdf4fe5
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/console_status_starting.png differ
diff --git a/installer/resources/themes/console/midnight/images/console_status_stopped.png b/installer/resources/themes/console/midnight/images/console_status_stopped.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d43eb4eab436a06e60a33922f27638db4e327e0
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/console_status_stopped.png differ
diff --git a/installer/resources/themes/console/midnight/images/dropdown.png b/installer/resources/themes/console/midnight/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cb83f1d71562c7bce893c1e4b9fc4ebc24b2017
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/dropdown.png differ
diff --git a/installer/resources/themes/console/midnight/images/dropdown_active.png b/installer/resources/themes/console/midnight/images/dropdown_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f115f98851233839bd411337191ef76f510b9bb
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/dropdown_active.png differ
diff --git a/installer/resources/themes/console/midnight/images/dropdown_hover.png b/installer/resources/themes/console/midnight/images/dropdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..999350953b1da342400f992c5fa72a7c23c7258b
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/dropdown_hover.png differ
diff --git a/installer/resources/themes/console/midnight/images/earth.jpg b/installer/resources/themes/console/midnight/images/earth.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..750027d367a19e76dcfd59034b3735c57c453a72
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/earth.jpg differ
diff --git a/installer/resources/themes/console/midnight/images/h2bg.png b/installer/resources/themes/console/midnight/images/h2bg.png
deleted file mode 100644
index 936dada60815acab7288369ec3e63c4506bd877b..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/console/midnight/images/h2bg.png and /dev/null differ
diff --git a/installer/resources/themes/console/midnight/images/help.png b/installer/resources/themes/console/midnight/images/help.png
new file mode 100644
index 0000000000000000000000000000000000000000..be52814717ef790cd13d33c7ec1fc9c5d14b0eb2
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/help.png differ
diff --git a/installer/resources/themes/console/midnight/images/i2plogo.png b/installer/resources/themes/console/midnight/images/i2plogo.png
index 2c1871b4d14004170335c665c191ae23c1f51678..1b9f92f159ae206fb195ce7d4878953f76a05c04 100644
Binary files a/installer/resources/themes/console/midnight/images/i2plogo.png and b/installer/resources/themes/console/midnight/images/i2plogo.png differ
diff --git a/installer/resources/themes/console/midnight/images/planet.png b/installer/resources/themes/console/midnight/images/news.png
similarity index 100%
rename from installer/resources/themes/console/midnight/images/planet.png
rename to installer/resources/themes/console/midnight/images/news.png
diff --git a/installer/resources/themes/console/midnight/images/sort_down.png b/installer/resources/themes/console/midnight/images/sort_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..74250ec7a431e6b1c44a136a45b672146fc27684
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/sort_down.png differ
diff --git a/installer/resources/themes/console/midnight/images/sort_up.png b/installer/resources/themes/console/midnight/images/sort_up.png
new file mode 100644
index 0000000000000000000000000000000000000000..60cf6c95add71764f8e196675773876d756177d3
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/sort_up.png differ
diff --git a/installer/resources/themes/console/midnight/images/thumbnail.png b/installer/resources/themes/console/midnight/images/thumbnail.png
new file mode 100644
index 0000000000000000000000000000000000000000..2156b6331b27b85ceb858513017d2781ef9c6ae9
Binary files /dev/null and b/installer/resources/themes/console/midnight/images/thumbnail.png differ
diff --git a/installer/resources/themes/console/midnight/mobile.css b/installer/resources/themes/console/midnight/mobile.css
index f080c484062d678afd51da8e2c045a10dc78e723..318ac87241f30e13b02be07bb7807db17727ccc6 100644
--- a/installer/resources/themes/console/midnight/mobile.css
+++ b/installer/resources/themes/console/midnight/mobile.css
@@ -1,30 +1,141 @@
+/* Console Theme "Midnight" - Mobile Override */
+
+body {
+     padding: 0 5px;
+     margin: 5px 0 0 !important;
+}
+
+div#xhr {
+     width: 617px;
+     margin: 0 auto;
+}
+
 div.routersummaryouter {
-     float: none;
-     margin: 0 5px 5px 0;
      position: relative;
+     float: none;
      width: auto;
+     margin: 0 0 5px;
 }
 
 div.routersummary {
      float: none;
-     width: auto;
+     width: 600px;
+     margin: 0 auto;
+}
+
+@media screen and (min-width: 1500px) {
+div.routersummary {
+     width: 600px !important;
+}
+
+.routersummary table[id^="sb_"] {
+     width: 600px !important;
+}
+}
+
+div[style^='height'] + a {
+     display: inline-block;
+     padding-top: 8px !important;
+}
+
+.routersummary td,
+.routersummary a,
+.routersummary h4,
+.routersummary h4 a,
+.routersummary button {
+     font-size: 10pt !important;
+}
+
+.routersummary h3 a {
+     font-size: 11pt !important;
+     padding: 3px 1px;
+}
+
+div.routersummary table,
+.routersummary table[id^="sb_"] {
+     min-width: 100% !important;
+     min-width: calc(100% - 1px) !important;
+     margin-bottom: -6px !important;
+}
+
+#sb_localtunnels {
+     margin-top: -5px !important;
+}
+
+.routersummary tr:nth-child(odd) td {
+     padding: 3px;
+     background: #000100;
+}
+
+.routersummary tr:nth-child(even) td {
+     padding: 3px;
+     background: #000018;
+}
+
+.routersummary tr td {
+     border-top: 1px inset #000 !important;
+     border-bottom: 1px inset #000 !important;
+}
+
+.routersummary tr:hover td {
+     border-top: 1px solid #004 !important;
+     border-bottom: 1px solid #004 !important;
+}
+
+.routersummary tr:hover td {
+     background: #002;
+}
+
+.routersummary h3,
+.routersummary h4,
+.routersummary hr {
+     margin-right: 7px !important;
+     margin-left: -10px !important;
+}
+
+div.routersummary h4 {
+     margin: -6px 7px -8px -10px !important;
 }
 
-div.routersummary table {
-     width: 100% !important;
+div.routersummary form {
+     margin: -2px 5px -4px -11px !important;
+}
+
+.routersummary button[type="submit"], .routersummary button[type="cancel"] {
+     margin: 5px 10px !important;
+     padding: 8px 5px !important;
+     min-width: 120px !important;
 }
 
 h1 {
-     margin: 5px 5px 0 0;
-     min-width: 0;
+     min-width: 570px;
+     margin: 0 !important;
+}
+
+div.news {
+     min-width: 580px;
+     margin: -1px 0 0;
+}
+
+div.main {
+     min-width: 580px;
+     margin: -1px 0 !important;
+}
+
+.sorry {
+     margin: -1px 0 0;
 }
 
+@media screen and (min-width: 1500px) {
 div.news {
-     margin: -1px 5px 0 0;
-     min-width: 0;
+     margin: -1px 0 0 !important;
 }
 
 div.main {
-     margin: 0 5px 5px 0;
-     min-width: 0;
+     margin: -1px 0 !important;
+}
+
+.sorry {
+     margin: -1px 0 0 !important;
 }
+}
\ No newline at end of file
diff --git a/installer/resources/themes/imagegen/imagegen.css b/installer/resources/themes/imagegen/imagegen.css
new file mode 100644
index 0000000000000000000000000000000000000000..8bdbc018b8e89be1cf861cd3a860ba630c633f33
--- /dev/null
+++ b/installer/resources/themes/imagegen/imagegen.css
@@ -0,0 +1,267 @@
+/* I2P Imagegen Theme */
+/* Author: dr|z3d */
+
+body {
+     background: #eef url(/themes/console/classic/images/bg0.png);
+     font: 10pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "DejaVu Sans", "Segoe UI", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     margin: 18px 20px 10px;
+     color: #333;
+     min-width: 660px;
+}
+
+* {
+     outline: none;
+}
+
+h1 {
+     font-size: 14pt;
+     border: 1px solid #77789f;
+     border-radius: 2px;
+     background: #fff;
+     padding: 8px 10px;
+}
+
+h2 {
+     font-size: 11pt;
+     border: 1px solid #77789f;
+     border-radius: 2px;
+     background: #fff;
+     padding: 5px 10px;
+}
+
+h1, h2 {
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%);
+     color: #0c153d;
+     margin-bottom: 10px;
+     box-shadow: inset 0 0 0 1px #fff;
+     text-shadow: 1px 1px 1px #fff;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     filter: drop-shadow(0 0 1px #aaa);
+}
+
+p {
+     margin: 5px 20px;
+     text-align: justify;
+     line-height: 130%;
+}
+
+a:link {
+     text-decoration: none;
+     outline: none;
+     color: #33f;
+}
+
+a:visited {
+     color: #227;
+}
+
+a:hover, a:focus {
+     color: #f60;
+}
+
+a:active {
+     color: #f90;
+     text-decoration: underline;
+}
+
+.reference {
+     background: url(/themes/console/classic/images/newtab.png) top 2px right no-repeat;
+     background-size: 12px 10px;
+     padding-right: 14px;
+}
+
+img {
+     border: 1px solid #77789f;
+     margin: 5px;
+     border-radius: 2px;
+     padding: 1px;
+     background: #fff;
+     filter: drop-shadow(0 0 1px #aaa);
+}
+
+table {
+     border-collapse: separate;
+     border-spacing: 10px;
+     margin: 0 auto;
+}
+
+th {
+     background: #fff;
+     border: 1px solid #77789f;
+     border-radius: 2px;
+     text-align: center;
+     filter: drop-shadow(0 0 1px #aaa);
+     font-weight: normal;
+     height: 16px;
+}
+
+th.title {
+     font-size: 11pt;
+     font-weight: bold;
+     white-space: nowrap;
+     padding: 5px;
+     background: linear-gradient(to right, #efefff, #fff 10%, #fff 90%, #efefff);
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+td {
+     text-align: center;
+     padding: 0 5px;
+     vertical-align: top;
+}
+
+hr {
+     height: 1px;
+     background: #7778bf;
+     border: none;
+     margin-top: 10px;
+}
+
+iframe {
+     border: none;
+     margin: 40px 20px 0 60px;
+     overflow: hidden;
+     width: 230px;
+     height: 200px;
+     transform: scale(1.4);
+}
+
+iframe pre {
+     font-size: 20pt !important;;
+}
+
+#qr, #randomart, #identicon {
+     text-align: center;
+     padding: 5px 0;
+}
+
+#nav {
+     text-align: right;
+}
+
+form {
+     margin: 15px auto 0;
+     padding-top: 0;
+     border-top: 1px solid #77789f;
+     min-width: 640px;
+}
+
+form > * {
+     vertical-align: middle;
+}
+
+.formtitle {
+     border: 1px solid #7778bf;
+     text-transform: uppercase;
+     font-size: 11pt;
+     font-weight: bold;
+     letter-spacing: 0.2em;
+     word-spacing: 0.1em;
+     margin: -1px auto 10px;
+     padding: 4px 5px;
+     width: 400px;
+     background: #fff; 
+     background: linear-gradient(to right, #efefff, #fff 10%, #fff 90%, #efefff);
+     box-shadow: inset 0 0 0 1px #fff;
+     border-radius: 0 0 2px 2px;
+     filter: drop-shadow(0 1px 1px #999);
+     text-rendering: optimizeLegibility;
+}
+
+input, button, select {
+     font: 10pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif;
+     margin: 5px 3px;
+}
+
+button, select {
+     filter: drop-shadow(0 0 1px #fff);
+}
+
+button::-moz-focus-inner {
+    border: none;
+    outline:none;
+}
+
+button {
+     border: 1px solid #bbb;
+     padding: 4.5px 8px;
+     border-radius: 2px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, #ddd);
+     box-shadow: inset 0 0 0 1px #fff;
+     color: #333;
+     display: inline-block;
+}
+
+button > * {
+     vertical-align: middle;
+}
+
+button:hover, button:focus {
+     background: linear-gradient(to bottom, #ddd, #fff);
+     border: 1px solid #89f;
+     color: #111;
+     filter: drop-shadow(0 0 1px #89f);
+}
+
+button:active {
+     box-shadow: inset 3px 3px 3px #555;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #555;
+     border: 1px solid #999;
+     color: #333;
+}
+
+input[type="text"] {
+     padding: 3px 5px;
+     border-radius: 2px;
+     border: 1px solid #bbb;
+     background: #fff;
+     box-shadow: inset 1px 1px 2px #ccc;
+     color: #333;
+}
+
+input[type="text"]:focus {
+     box-shadow: none;
+     border: 1px solid #999;
+     color: #111;
+     filter: drop-shadow(0 0 1px #89f);
+}
+
+select {
+     vertical-align: middle;
+     -moz-appearance: none;
+     -webit-appearance: none;
+     background: url(/themes/console/classic/images/dropdown.png) right center no-repeat #fff;
+     background: url(/themes/console/classic/images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     border-radius: 2px;
+     border: 1px solid #bbb;
+     box-shadow: inset 0 0 0 1px #fff;
+     padding: 4px 16px 4px 4px;
+     text-overflow: ellipsis;
+     color: #333;
+}
+
+select option {
+     background: #fff;
+}
+
+select:focus, select:active {
+     color: #111;
+     border: 1px solid #89f;
+     outline: none;
+}
+
+select:hover, select:active {
+     background: url(/themes/console/classic/images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+}
+
+select:focus {
+     background: url(/themes/console/classic/images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     box-shadow: 0 0 0 1px #89f;
+}
+
+select::-ms-expand {
+     display: none;
+}
diff --git a/installer/resources/themes/snark/classic/favicon.ico b/installer/resources/themes/snark/classic/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..28658965c9486d89945244234f91d20162f1649b
Binary files /dev/null and b/installer/resources/themes/snark/classic/favicon.ico differ
diff --git a/installer/resources/themes/console/images/add.png b/installer/resources/themes/snark/classic/images/add.png
similarity index 100%
rename from installer/resources/themes/console/images/add.png
rename to installer/resources/themes/snark/classic/images/add.png
diff --git a/installer/resources/themes/snark/classic/images/bullet.png b/installer/resources/themes/snark/classic/images/bullet.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ae2f0eaedc969261b0b909beda20581630ce82f
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/bullet.png differ
diff --git a/installer/resources/themes/snark/classic/images/button_forum.png b/installer/resources/themes/snark/classic/images/button_forum.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b735f3f1d9ef7e554fc33726ac8674f6f818cd5
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/button_forum.png differ
diff --git a/installer/resources/themes/snark/classic/images/button_forum_active.png b/installer/resources/themes/snark/classic/images/button_forum_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2b4538e8bcc68e343ab59ac1c166ae9a722ea53
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/button_forum_active.png differ
diff --git a/installer/resources/themes/snark/classic/images/button_forum_hover.png b/installer/resources/themes/snark/classic/images/button_forum_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e4523a769e6d9e2220a5d852be61d8fc2ec9064
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/button_forum_hover.png differ
diff --git a/installer/resources/themes/snark/classic/images/button_snark.png b/installer/resources/themes/snark/classic/images/button_snark.png
new file mode 100644
index 0000000000000000000000000000000000000000..93dcf22513b645fae120669a150ddfb39f5da290
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/button_snark.png differ
diff --git a/installer/resources/themes/snark/classic/images/button_snark_active.png b/installer/resources/themes/snark/classic/images/button_snark_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..745f14ef2e64ece9678cc6799449bb0bcb0c2ecb
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/button_snark_active.png differ
diff --git a/installer/resources/themes/snark/classic/images/button_snark_hover.png b/installer/resources/themes/snark/classic/images/button_snark_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..5599fcd2233578367f762ff632c387ea75c9fc5f
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/button_snark_hover.png differ
diff --git a/installer/resources/themes/snark/classic/images/button_tracker.png b/installer/resources/themes/snark/classic/images/button_tracker.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc3e8212a5089e05cf882cb75ea61c93ecd6f350
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/button_tracker.png differ
diff --git a/installer/resources/themes/snark/classic/images/button_tracker_active.png b/installer/resources/themes/snark/classic/images/button_tracker_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..abdbc720cc7f99dfdf800fbce70e7d530668209f
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/button_tracker_active.png differ
diff --git a/installer/resources/themes/snark/classic/images/button_tracker_hover.png b/installer/resources/themes/snark/classic/images/button_tracker_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..bddffabc6b3cad708df24d3455d0d223a8bcb539
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/button_tracker_hover.png differ
diff --git a/installer/resources/themes/snark/classic/images/complete.png b/installer/resources/themes/snark/classic/images/complete.png
new file mode 100644
index 0000000000000000000000000000000000000000..96199806aa92cb7fdb15612c87106565460ef8cb
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/complete.png differ
diff --git a/installer/resources/themes/snark/classic/images/config.png b/installer/resources/themes/snark/classic/images/config.png
new file mode 100644
index 0000000000000000000000000000000000000000..8151463917ec88ca0962a5bfefb9f11c9122bff8
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/config.png differ
diff --git a/installer/resources/themes/snark/classic/images/configuration.png b/installer/resources/themes/snark/classic/images/configuration.png
new file mode 100644
index 0000000000000000000000000000000000000000..54c7239092913036dc0103a5759105fa9a38aa88
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/configuration.png differ
diff --git a/installer/resources/themes/snark/classic/images/create.png b/installer/resources/themes/snark/classic/images/create.png
new file mode 100644
index 0000000000000000000000000000000000000000..44ccbf812879c42cb1f9587d865bcfc337ce6361
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/create.png differ
diff --git a/installer/resources/themes/snark/classic/images/debuginfo.png b/installer/resources/themes/snark/classic/images/debuginfo.png
new file mode 100644
index 0000000000000000000000000000000000000000..42c7cd6ab143aa45bbadec43ca28ff8868ffde20
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/debuginfo.png differ
diff --git a/installer/resources/themes/snark/classic/images/delete.png b/installer/resources/themes/snark/classic/images/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..a37f8c7f1a8d23babac993177015df3d727d86d8
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/delete.png differ
diff --git a/installer/resources/themes/snark/classic/images/details.png b/installer/resources/themes/snark/classic/images/details.png
new file mode 100644
index 0000000000000000000000000000000000000000..845ba38235825ca8ea628157f7eec626dcd25e53
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/details.png differ
diff --git a/installer/resources/themes/snark/classic/images/downloading.png b/installer/resources/themes/snark/classic/images/downloading.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d01bb51372948d4254283e580dd91e1243380f1
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/downloading.png differ
diff --git a/installer/resources/themes/snark/classic/images/dropdown.png b/installer/resources/themes/snark/classic/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..317d64e08161d30d86c3b2e2b44dfb0c062b7889
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/dropdown.png differ
diff --git a/installer/resources/themes/snark/classic/images/dropdown_hover.png b/installer/resources/themes/snark/classic/images/dropdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec983e14ae70dcf0f3a7f64ec47f533d55a8e7f5
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/dropdown_hover.png differ
diff --git a/installer/resources/themes/snark/classic/images/eta.png b/installer/resources/themes/snark/classic/images/eta.png
new file mode 100644
index 0000000000000000000000000000000000000000..854c00ea486f8c04538b8505682bc01bb021df39
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/eta.png differ
diff --git a/installer/resources/themes/snark/classic/images/file.png b/installer/resources/themes/snark/classic/images/file.png
new file mode 100644
index 0000000000000000000000000000000000000000..14fc51f1596172a3fe4ccfb72533cf9ca7cb2a0d
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/file.png differ
diff --git a/installer/resources/themes/snark/classic/images/file_sm.png b/installer/resources/themes/snark/classic/images/file_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..9dffc6219e03ab91171b6e97246012a582e4c7f6
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/file_sm.png differ
diff --git a/installer/resources/themes/snark/classic/images/first.png b/installer/resources/themes/snark/classic/images/first.png
new file mode 100644
index 0000000000000000000000000000000000000000..282621d8ded1cf8920eb0e4eb9e39759d646ddc2
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/first.png differ
diff --git a/installer/resources/themes/snark/classic/images/hat.png b/installer/resources/themes/snark/classic/images/hat.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0ebd52bde38319e4832c3d370b20121ff55a769
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/hat.png differ
diff --git a/installer/resources/themes/snark/classic/images/head_rx.png b/installer/resources/themes/snark/classic/images/head_rx.png
new file mode 100644
index 0000000000000000000000000000000000000000..792bf351dd0989c771a069a023b51712a4c86e44
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/head_rx.png differ
diff --git a/installer/resources/themes/snark/classic/images/head_rxspeed.png b/installer/resources/themes/snark/classic/images/head_rxspeed.png
new file mode 100644
index 0000000000000000000000000000000000000000..a74a2a43dc709777ba2bb0cc4c6ba8ace4524036
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/head_rxspeed.png differ
diff --git a/installer/resources/themes/snark/classic/images/head_tx.png b/installer/resources/themes/snark/classic/images/head_tx.png
new file mode 100644
index 0000000000000000000000000000000000000000..4df10acd6240f7b4d3135e110619804bc9d1231c
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/head_tx.png differ
diff --git a/installer/resources/themes/snark/classic/images/head_txspeed.png b/installer/resources/themes/snark/classic/images/head_txspeed.png
new file mode 100644
index 0000000000000000000000000000000000000000..af70651c1fa43addf644ae029ca32e465418521d
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/head_txspeed.png differ
diff --git a/installer/resources/themes/snark/classic/images/hidepeers.png b/installer/resources/themes/snark/classic/images/hidepeers.png
new file mode 100644
index 0000000000000000000000000000000000000000..00af250abecd607b39cde3ae619fb91ae32cef05
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/hidepeers.png differ
diff --git a/installer/resources/themes/snark/classic/images/infocircle.png b/installer/resources/themes/snark/classic/images/infocircle.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1d0be10a00f0d34f8e9b9075828e32fb496a7cd
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/infocircle.png differ
diff --git a/installer/resources/themes/snark/classic/images/last.png b/installer/resources/themes/snark/classic/images/last.png
new file mode 100644
index 0000000000000000000000000000000000000000..2000825665d0912a8083d3398007160d3691b7bb
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/last.png differ
diff --git a/installer/resources/themes/snark/classic/images/next.png b/installer/resources/themes/snark/classic/images/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f7bfd830951072e617c27f12c85244d3a5a0862
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/next.png differ
diff --git a/installer/resources/themes/snark/classic/images/nopeers.png b/installer/resources/themes/snark/classic/images/nopeers.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fb0e2cfccfc57e557ee70aee09c5aeb83c6d6f0
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/nopeers.png differ
diff --git a/installer/resources/themes/snark/classic/images/peer.png b/installer/resources/themes/snark/classic/images/peer.png
new file mode 100644
index 0000000000000000000000000000000000000000..93a9e773870b3d900f1c690384d8d32256762e74
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/peer.png differ
diff --git a/installer/resources/themes/snark/classic/images/previous.png b/installer/resources/themes/snark/classic/images/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..1532b6cec002cce14fe674f9e8cac53a315f0312
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/previous.png differ
diff --git a/installer/resources/themes/snark/classic/images/priority.png b/installer/resources/themes/snark/classic/images/priority.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd9685253d1d1b8c35954a67ec92ff2114559d76
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/priority.png differ
diff --git a/installer/resources/themes/snark/classic/images/progressbar.gif b/installer/resources/themes/snark/classic/images/progressbar.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e204f6b319698df8029a9e6c79cc1ea79b5e297e
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/progressbar.gif differ
diff --git a/installer/resources/themes/snark/classic/images/remove.png b/installer/resources/themes/snark/classic/images/remove.png
new file mode 100644
index 0000000000000000000000000000000000000000..12f988b18088a079dd43a20131a7bae1c9ed375a
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/remove.png differ
diff --git a/installer/resources/themes/snark/classic/images/seeding.png b/installer/resources/themes/snark/classic/images/seeding.png
new file mode 100644
index 0000000000000000000000000000000000000000..e58e518bc0f011eb50ef1ad727a3091048f6d1bd
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/seeding.png differ
diff --git a/installer/resources/themes/snark/classic/images/showpeers.png b/installer/resources/themes/snark/classic/images/showpeers.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca271234be316fd5d0fe62c2b33aec6986aab6b4
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/showpeers.png differ
diff --git a/installer/resources/themes/snark/classic/images/size.png b/installer/resources/themes/snark/classic/images/size.png
new file mode 100644
index 0000000000000000000000000000000000000000..013cc5bbdca3886f306c33f718e623513dba0c7d
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/size.png differ
diff --git a/installer/resources/themes/snark/classic/images/snark_add.png b/installer/resources/themes/snark/classic/images/snark_add.png
new file mode 100644
index 0000000000000000000000000000000000000000..44f1ee48fe095c90dfc475575559088646a76271
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/snark_add.png differ
diff --git a/installer/resources/themes/snark/classic/images/snark_create.png b/installer/resources/themes/snark/classic/images/snark_create.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e767b9b2210b179316c02a86627570cd3d44bd6
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/snark_create.png differ
diff --git a/installer/resources/themes/snark/classic/images/stalled.png b/installer/resources/themes/snark/classic/images/stalled.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d7b193b51ef414e9f69276722331ee066e3517e
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/stalled.png differ
diff --git a/installer/resources/themes/snark/classic/images/start.png b/installer/resources/themes/snark/classic/images/start.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bf001c4e024a7b9dc4d98e062a0c0f88b772154
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/start.png differ
diff --git a/installer/resources/themes/snark/classic/images/start_all.png b/installer/resources/themes/snark/classic/images/start_all.png
new file mode 100644
index 0000000000000000000000000000000000000000..dadeeebebf1bfae434f485e4cbe7e56b9c4ba818
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/start_all.png differ
diff --git a/installer/resources/themes/snark/classic/images/status.png b/installer/resources/themes/snark/classic/images/status.png
new file mode 100644
index 0000000000000000000000000000000000000000..e748bf7c422ae740619e6bac19cb0656123edf3b
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/status.png differ
diff --git a/installer/resources/themes/snark/classic/images/stop.png b/installer/resources/themes/snark/classic/images/stop.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca007e86fb370a83e5316f0865c5b98713070fff
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/stop.png differ
diff --git a/installer/resources/themes/snark/classic/images/stop_all.png b/installer/resources/themes/snark/classic/images/stop_all.png
new file mode 100644
index 0000000000000000000000000000000000000000..124a31caea0922e15aac81bb0916aad34abe001e
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/stop_all.png differ
diff --git a/installer/resources/themes/snark/classic/images/stop_all_hover.png b/installer/resources/themes/snark/classic/images/stop_all_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..124a31caea0922e15aac81bb0916aad34abe001e
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/stop_all_hover.png differ
diff --git a/installer/resources/themes/snark/classic/images/stopped.png b/installer/resources/themes/snark/classic/images/stopped.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5b41579e3f41fd4cce24968eb302eaa6a76684b
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/stopped.png differ
diff --git a/installer/resources/themes/snark/classic/images/torrent.png b/installer/resources/themes/snark/classic/images/torrent.png
new file mode 100644
index 0000000000000000000000000000000000000000..6d97364f229c8c244b63495c3af08be1efc3cf0c
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/torrent.png differ
diff --git a/installer/resources/themes/snark/classic/images/trackererror.png b/installer/resources/themes/snark/classic/images/trackererror.png
new file mode 100644
index 0000000000000000000000000000000000000000..f41191f6cb5251e0b48097002137a240fe62b4dc
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/trackererror.png differ
diff --git a/installer/resources/themes/snark/classic/images/up.png b/installer/resources/themes/snark/classic/images/up.png
new file mode 100644
index 0000000000000000000000000000000000000000..7271f87d6cf47b8eb817a3de32e4947793bcbeed
Binary files /dev/null and b/installer/resources/themes/snark/classic/images/up.png differ
diff --git a/installer/resources/themes/snark/classic/snark.css b/installer/resources/themes/snark/classic/snark.css
new file mode 100644
index 0000000000000000000000000000000000000000..52b78634cbb1bd763cb81941c39904d3d8e0c507
--- /dev/null
+++ b/installer/resources/themes/snark/classic/snark.css
@@ -0,0 +1,2368 @@
+/* I2PSnark theme "Classic" */
+/* Author: dr|z3d */
+
+body {
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif;
+     color: #0c153d;
+     background: #eef url(/themes/console/classic/images/bg0.png) repeat scroll center bottom;
+}
+
+/* preload top navigation mouseovers */
+body {
+     background: url(/themes/console/classic/images/bg0.png) repeat scroll center bottom,
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat, #eef;
+     background-size: 150px 150px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+}
+
+body.iframed {
+     margin: 1px 0 !important;
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+}
+
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif),
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat !important;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+}
+
+* {
+     outline: none;
+}
+
+.page {
+     font-size: 9pt !important;
+     line-height: 160% !important;
+     min-width: 900px !important;
+     margin: 5px 0 0 0;
+     padding: 10px;
+     text-align: center;
+     opacity: 1;
+     color: #0c153d;
+     border: 1px solid #89f;
+     background: #eef;
+     box-shadow: inset 0 0 0 1px #ddf, 0 0 5px 1px #cfcfff inset;
+}
+
+.iframed .page {
+     margin: 5px 0;
+     padding: 0;
+     border: none;
+     background: none;
+     background: linear-gradient(to right, #fff 0%, #ddf 50%, #fff 100%);
+     box-shadow: none;
+}
+
+/* top nav */
+
+.snarknavbar {
+     font-size: 11.5pt;
+     font-weight: bold;
+     min-width: 906px;
+     margin: 0 0 -6px !important;
+     padding: 9px 0;
+     text-align: center;
+     letter-spacing: 0 !important;
+     text-transform: uppercase !important;
+     color: #000;
+     border: 1px solid #89f;
+     background: #eff2ff !important;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important;
+     box-shadow: 0 0 1px #fff;
+     position: sticky;
+     top: -1px;
+     z-index: 999;
+}
+
+.iframed .snarknavbar {
+     margin-top: -2px !important;
+     position: static;
+}
+
+.snarkRefresh:link, .snarkRefresh:visited {
+     display: inline-block;
+     font-size: 9pt;
+     font-weight: bold;
+     margin: -1px 0 !important;
+     padding: 5px 7px 5px 23px !important;
+     text-decoration: none !important;
+     letter-spacing: .1em;
+     text-transform: uppercase !important;
+     color: #444688;
+     border: 1px solid #ccf;
+     border-right: 1px solid #aaf;
+     border-bottom: 1px solid #aaf;
+     border-radius: 0;
+     background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px rgba(200,200,200,0.3);
+}
+
+.snarkRefresh:link:last-child {
+     margin-left: 3px;
+}
+
+.snarkRefresh:link:first-child {
+     background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+}
+
+.snarkRefresh:link:nth-child(2) {
+     background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+}
+
+.snarkRefresh:hover, .snarkRefresh:focus {
+     color: #f50;
+     border: 1px solid #f50;
+     border-radius: 0;
+     background: #fff !important;
+     background: url(images/button_tracker_hover.png) 7px center no-repeat #eee !important;
+     background: url(images/button_tracker_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+.snarkRefresh:first-child:hover, .snarkRefresh:first-child:focus {
+     background: url(images/button_snark_hover.png) 7px center no-repeat #eee !important;
+     background: url(images/button_snark_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+}
+
+.snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):focus {
+     background: url(images/button_forum_hover.png) 7px center no-repeat #eee !important;
+     background: url(images/button_forum_hover.png) 7px center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+}
+
+.snarkRefresh:active {
+     text-decoration: none !important;
+     color: #fff !important;
+     border: 1px solid #aaa;
+     background: url(images/button_tracker_active.png) 7px center no-repeat #f50 !important;
+     text-shadow: none;
+     box-shadow: inset 0 0 0 1px #fff, inset 4px 4px 3px #824b1b !important;
+}
+
+.snarkRefresh:active:first-child {
+     text-decoration: none !important;
+     color: #fff !important;
+     border: 1px solid #aaa;
+     background: url(images/button_snark_active.png) 7px center no-repeat #f50 !important;
+     text-shadow: none;
+}
+
+.snarkRefresh:active:nth-child(2) {
+     border: 1px solid #aaa;
+     background: url(images/button_forum_active.png) 7px center no-repeat #f50 !important;
+}
+
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus, .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active {
+     background-size: 16px 16px, 100% 100% !important;
+}
+
+/* end top nav */
+
+/* screenlog */
+
+.snarkMessages {
+     overflow: auto;
+     width: auto;
+     height: 53px;
+     margin: 0;
+     padding: 3px 5px;
+     text-align: left;
+     color: #003;
+     border-bottom: 1px solid #89f;
+     background: url(images/hat.png) bottom right no-repeat #ddf;
+     background: url(images/hat.png) bottom right no-repeat, linear-gradient(to bottom, #e3e3ff, #ddf);
+     box-shadow: inset 0 0 0 1px #ddf;
+}
+
+.snarkMessages ul {
+     margin: -2px 0 2px 0;
+     padding: 0 0 0 14px;
+     list-style: none;
+}
+
+.snarkMessages li {
+     margin-left: -15px;
+     font: normal 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+}
+
+.snarkMessages li::before {
+     content: "";
+     display: inline-block;
+     background: url(images/bullet.png) left bottom no-repeat;
+     width: 13px;
+     height: 11px;
+     background-size: 9px 9px;
+}
+
+.snarkMessages a:link,
+.snarkMessages a:visited {
+     color: #55f !important;
+     font-weight: bold;
+}
+
+.snarkMessages a:hover,
+.snarkMessages a:focus {
+     color: #f60 !important;
+}
+
+.snarkMessages img {
+     width: 8px;
+     padding: 2px;
+     background: #fff;
+     opacity: 0.7 !important;
+}
+
+.snarkMessages img:hover,
+.snarkMessages img:focus {
+     opacity: 1 !important;
+}
+
+.snarkMessages img,
+.snarkMessages img:hover {
+     position: sticky;
+     top: -3px;
+     float: right;
+     margin: -3px -5px 4px 4px;
+     opacity: 1;
+     border: 1px solid #89f;
+     border-top: none;
+}
+
+.logshim {
+     margin-top: 1px !important;
+}
+
+/* end screenlog */
+
+.ParentDir {
+     font-size: 8pt;
+     padding: 4px 0;
+     text-align: left !important;
+     border: 1px solid #89f !important;
+     border-right: 0 !important;
+     border-left: 0 !important;
+     background: #fff;
+}
+
+.ParentDir a {
+     font-weight: bold !important;
+     margin-left: -4px;
+}
+
+.ParentDir img {
+     padding-left: 3px;
+}
+
+.priority {
+     font-size: 8pt;
+     width: 160px !important;
+     vertical-align: middle;
+     white-space: nowrap;
+}
+
+#setPriority th {
+     padding: 5px 10px !important;
+     text-align: right !important;
+}
+
+#setPriority input[disabled], #setPriority input[disabled]:hover {
+     display: none;
+     cursor: not-allowed !important;
+     border: 1px solid #999;
+     background: linear-gradient(to bottom, #fff, #ddd);
+}
+
+.snarkTorrents {
+     margin: 0;
+     border: 1px solid #101;
+     background: #fff;
+     background: rgba(255,255,255,0.1);
+}
+
+.snarkTorrents th {
+     text-align: center;
+}
+
+.snarkTorrents th:first-child {
+     width: 30px;
+     padding-right: 0;
+     text-align: center;
+}
+
+.snarkTorrents th:nth-child(2) {
+     text-align: left;
+}
+
+.snarkTorrents th br {
+     display: none;
+}
+
+#totals {
+     margin-left: 3px;
+}
+
+.snarkTorrents tfoot th:nth-child(2) {
+     text-align: center;
+}
+
+.snarkTorrents th:nth-child(4),
+.snarkTorrents th:nth-child(5),
+.snarkTorrents th:nth-child(6),
+.snarkTorrents th:nth-child(7),
+.snarkTorrents th:nth-child(8),
+.snarkTorrents th:nth-child(9),
+.snarkTorrents th:last-child {
+     text-align: center;
+}
+
+.snarkTorrents td:nth-child(6),
+.snarkTorrents td:nth-child(7),
+.snarkTorrents td:nth-child(8) {
+     text-align: center !important;
+}
+
+table.snarkTorrents {
+     margin-top: -1px !important;
+}
+
+.snarkTorrents th {
+     text-align: left;
+}
+
+.snarkTorrents td {
+     line-height: 90%;
+     text-align: left;
+}
+
+.snarkTorrents td:nth-child(1) {
+     width: 24px !important;
+}
+
+.snarkTorrents td:nth-child(3),
+.snarkTorrents td:nth-child(4) {
+     width: 16px !important;
+     padding: 0 !important;
+     text-align: center !important;
+}
+
+pre {
+     font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font-weight: bold !important;
+     width: 100%;
+     height: 8px;
+     padding: 0;
+     text-align: left !important;
+     color: #35f;
+}
+
+table {
+     width: 100%;
+     margin: 0 0 10px 0;
+     padding: 0;
+     border-spacing: 0;
+     border-collapse: collapse;
+     opacity: 1 !important;
+     color: #323;
+     border: 0;
+}
+
+tr {
+     opacity: 1;
+}
+
+thead, tfoot {
+     background: #fff;
+}
+
+thead {
+     border-bottom: 1px solid #101;
+}
+
+tfoot th {
+     padding-bottom: 4px !important;
+}
+
+tfoot tr:nth-child(n+1) {
+     text-align: left;
+}
+
+th {
+     font-size: 9pt;
+     padding: 3px 2px;
+     color: #0c153d;
+     border-top: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+     background: #fff;
+     background-image: linear-gradient(to bottom, #fff, #eef);
+}
+
+th:first-child {
+     padding-left: 2px;
+     text-align: left !important;
+}
+
+tfoot td:first-child {
+     padding-left: 0;
+     text-align: left !important;
+}
+
+th:first-child img {
+     margin: 1px -2px 3px 1px !important;
+}
+
+th:nth-child(2) img {
+     margin: 1px 5px 3px 2px !important;
+}
+
+tfoot th {
+     padding-bottom: 4px !important;
+}
+
+tfoot img,
+tfoot:nth-child(2) img,
+tfoot:nth-child(1) img,
+tfoot:nth-child(3) img,
+tfoot:nth-child(4) img {
+     margin: 0 2px 3px 0 !important;
+     padding-right: 0 !important;
+}
+
+tfoot tr:nth-child(n+1) {
+     text-align: left;
+}
+
+.headerstatus {
+     text-align: left;
+     padding-left: 15px;
+}
+
+.headerpriority {
+     padding-left: 10px;
+     text-align: left;
+}
+
+.priority {
+     font-size: 8pt;
+     min-width: 160px;
+     vertical-align: middle;
+}
+
+/* torrent display */
+
+.snarkTorrents {
+     margin: 0;
+     border: 1px solid #101;
+     background: #fff;
+}
+
+.snarkTorrents th {
+     text-align: center;
+}
+
+.snarkTorrents th:first-child {
+     width: 30px;
+     padding-right: 0;
+     text-align: center;
+}
+
+.snarkTorrents th:nth-child(2) {
+     text-align: left;
+}
+
+.snarkTorrents th br {
+     display: none;
+     /* kill double height button display */
+}
+
+.snarkTorrents th:nth-child(4),
+.snarkTorrents th:nth-child(5),
+.snarkTorrents th:nth-child(6),
+.snarkTorrents th:nth-child(7),
+.snarkTorrents th:nth-child(8),
+.snarkTorrents th:nth-child(9),
+.snarkTorrents th:last-child {
+     text-align: center;
+}
+
+.snarkTorrents tfoot th:nth-child(2) {
+     text-align: center;
+}
+
+.snarkTorrents tfoot th:nth-child(3) {
+     text-align: center;
+}
+
+.snarkTorrents tfoot th:nth-child(n+2) {
+     white-space: nowrap;
+}
+
+.snarkTorrents tfoot th {
+     vertical-align: top;
+     font-weight: normal;
+}
+
+.snarkTorrents tfoot th::first-line {
+     font-weight: bold;
+}
+
+.snarkTorrents tfoot th br {
+     display: inline-block;
+     margin-left: 20px !important;
+}
+
+.snarkTorrents td:nth-child(6),
+.snarkTorrents td:nth-child(7),
+.snarkTorrents td:nth-child(8) {
+     text-align: center !important;
+}
+
+table.snarkTorrents {
+     margin-top: -1px !important;
+     border: none;
+}
+
+.snarkTorrents th {
+     text-align: left;
+}
+
+.snarkTorrents td {
+     line-height: 105%;
+     text-align: left;
+}
+
+.snarkTorrents td:nth-child(1) {
+     width: 24px !important;
+}
+
+.snarkTorrents td:nth-child(3),
+.snarkTorrents td:nth-child(4) {
+     width: 16px !important;
+     padding: 0 !important;
+     text-align: center !important;
+}
+
+.snarkTorrents td:nth-child(3) {
+     text-align: right !important;
+}
+
+.snarkTorrents td[colspan="10"] {
+     padding: 4px 2px !important;
+}
+
+.snarkTorrents img {
+     margin: 0 !important;
+     padding: 0 !important;
+}
+
+tt {
+     font-family: "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+}
+
+.snarkTorrents tt {
+     font-size: 8pt;
+     color: #301;
+     font-weight: bold;
+     color: #fff;
+     background: #aaf;
+     border-radius: 2px;
+     margin: 3px;
+     padding: 2px 3px;
+     letter-spacing: 0.1em;
+     display: inline-block;
+}
+
+.snarkTorrents tfoot th tt {
+     display: inline;
+     margin-left: 3px;
+}
+
+/* end torrent display */
+
+/* torrent info */
+
+.snarkTorrentInfo img {
+     max-height: 16px !important;
+     margin: 1px 0 1px 2px !important;
+}
+
+.snarkTorrentInfo th {
+     padding: 4px !important;
+     text-align: left;
+     border-top: none;
+}
+
+.snarkTorrentInfo th:first-child {
+     background: url(images/file_sm.png) no-repeat 6px 7px, linear-gradient(to bottom, #fff, #eef);
+}
+
+.snarkTorrentInfo th:nth-child(2) {
+     font-size: 9pt;
+     padding: 8px 5px 8px 0 !important;
+}
+
+.snarkTorrentInfo td {
+     text-align: left !important;
+     vertical-align: middle !important;
+}
+
+.snarkTorrentInfo td:first-child {
+     width: 20px !important;
+     padding: 3px 4px 4px!important;
+}
+
+.snarkTorrentInfo input[type="submit"] {
+     min-width: 60px;
+     text-align: center;
+}
+
+.snarkTorrentInfo tr:nth-last-child(2) {
+     border-top: 1px solid #89f !important;
+}
+
+.snarkTorrentInfo tr:last-child {
+     background: none;
+}
+
+.snarkTorrentInfo tr:last-child td {
+     padding: 5px !important;
+     text-align: right !important;
+     border-top: 1px solid #89f !important;
+}
+
+table.SnarkTorrentInfo {
+     margin-bottom: 1px !important;
+     border-bottom: 1px solid #89f;
+     background: #eef;
+}
+
+.snarkTorrentInfo tr:nth-child(even) {
+     color: #0c153d;
+     background: #eff1ff;
+     background: rgba(240,240,255,0.5);
+}
+
+.snarkTorrentInfo tr:nth-child(odd) {
+     color: #0c153d;
+     background: #dde1ff;
+     background: rgba(220,220,255,0.5);
+}
+
+.snarkTorrentInfo tr:last-child td {
+     background: #fff;
+}
+
+.snarkTorrentInfo tr:last-child td:last-child b {
+     text-align: left;
+}
+
+/* end torrent info */
+
+/* torrent directory */
+
+table.SnarkDirInfo {
+     margin-top: 10px !important;
+     margin-bottom: 0;
+     border-bottom: 1px solid #89f;
+}
+
+.snarkDirInfo th img {
+     margin: 0 !important;
+     max-height: 22px !important;
+     padding-top: 3px !important;
+     padding-bottom: 3px !important;
+}
+
+.snarkDirInfo th:nth-child(2) {
+     width: 32px;
+     text-align: right;
+}
+
+.snarkDirInfo th:first-child {
+     padding-left: 5px;
+}
+
+.snarkDirInfo th a img, .snarkDirInfo th img  {
+     max-height: 20px;
+}
+
+.snarkDirInfo th img[alt="Directory"] {
+     margin-right: 5px !important;
+     margin-left: 1px !important;
+}
+
+.snarkDirInfo td {
+     min-width: 0 !important;
+}
+
+.snarkDirInfo td:first-child {
+     padding-left: 4px;
+     padding-right: 2px;
+     text-align: left;
+}
+
+.snarkDirInfo td:first-child img {
+     padding-right: 6px;
+}
+
+.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a {
+     display: inline-block;
+     width: 100%;
+     padding: 2px 0;
+}
+
+.snarkDirInfo .headerpriority {
+     text-align: center !important;
+     vertical-align: middle;
+}
+
+.snarkDirInfo tr:last-child {
+     border-bottom: 1px solid #89f !important;
+}
+
+.headerpriority input[type="submit"] {
+     margin: 5px;
+}
+
+table.SnarkDirInfo img {
+     max-width: 16px;
+     max-height: 16px;
+}
+
+.snarkDirInfo thead img {
+     max-width: none;
+     max-height: none;
+     margin: 0 !important;
+}
+
+.snarkDirInfo .headerpriority {
+     text-align: center !important;
+     vertical-align: middle;
+}
+
+td.subHeaderPriority, td.priority {
+     width: 0;
+     min-width: 36px !important;
+     padding: 0 5px 0 0 !important;
+     text-align: center !important;
+}
+
+td.subHeaderPriority {
+     font-size: 7.5pt;
+     font-weight: bold;
+     padding: 0 1px !important;
+     text-align: center !important;
+     background: #020;
+     background: url("images/snarktopnav.png") repeat-x scroll center center #101;
+     background-image: linear-gradient(to bottom, #030 0%, #020 50%, #000 51%, #000 100%);
+}
+
+.headerpriority br {
+     display: none;
+}
+
+.headerpriority img {
+     padding: 4px !important;
+}
+
+/*
+.headerstatus {
+     min-width: 250px;
+}
+
+td.priority:last-child {
+     min-width: 350px !important;
+}
+*/
+
+tr.priority:last-child {
+     border-bottom: none !important;
+}
+
+th.headerdownloaded {
+     padding-left: 25px !important;
+}
+
+td.snarkFileStatus {
+     text-align: center;
+     white-space:nowrap;
+}
+
+td.snarkFileIcon {
+     width: 16px;
+     padding: 0;
+}
+
+td.snarkFileIcon img {
+     filter: none;
+}
+
+td.snarkFileStatusIcon {
+     width: 24px;
+     padding: 0 4px 0 0;
+     text-align: center;
+}
+
+/* end torrent directory */
+
+td {
+     font-size: 9pt;
+     padding: 1px;
+     opacity: 1;
+     color: #333 !important;
+}
+
+.mainsection td {
+     color: #111;
+}
+
+td:first-child {
+     font-size: 9pt;
+     text-align: right;
+}
+
+.center {
+     text-align: center !important;
+}
+
+.snarkTorrentName {
+     line-height: 90%;
+     padding: 0;
+}
+
+.snarkTorrentName a,
+.snarkDirInfo td.snarkFileName a {
+     font-weight: bold !important;
+}
+
+/* torrent control buttons */
+
+.snarkTorrentAction {
+     margin: 0 !important;
+     padding: 1px 1px 1px 1px !important;
+     text-align: center !important;
+}
+
+.snarkTorrentAction img {
+     opacity: 1;
+}
+
+.snarkTorrentAction img:hover {
+     opacity: 1;
+     box-shadow: 0 0 1px 1px #f90;
+}
+
+.snarkTorrentAction input[type="image"],
+.snarkTorrents th:last-child input[type="image"] {
+     padding: 3px !important;
+     background: #339;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%, #ddf 100%);
+     border-radius: 2px;
+     border: 1px solid #89f !important;
+     margin: 2px 1px;
+     filter: drop-shadow(0 0 1px #bbb);
+     height: 10px;
+}
+
+.snarkTorrentAction input[type="image"]:hover,
+.snarkTorrentAction input[type="image"]:focus,
+.snarkTorrents th:last-child input[type="image"]:hover,
+.snarkTorrents th:last-child input[type="image"]:focus {
+     border: 1px solid #f60;
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+.snarkTorrentAction input[type="image"]:active,
+.snarkTorrents th:last-child input[type="image"]:active {
+     background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%, #99f 100%);
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #333;
+     filter: none !important;
+}
+
+.snarkTorrents th:last-child input[type="image"]:hover,
+.snarkTorrents td:last-child input[type="image"]:hover,
+.snarkTorrents th:last-child input[type="image"]:focus,
+.snarkTorrents td:last-child input[type="image"]:focus { /* borders on hover only for torrent control buttons, otherwise drop-shadow */
+     border: 1px solid #f60 !important;
+}
+
+td.snarkTorrentAction {
+     width: 1%;
+     padding-right: 2px !important;
+     white-space: nowrap;
+}
+
+/* end torrent control buttons */
+
+.snarkTorrentNoneLoaded {
+     font-size: 8.5pt;
+     font-weight: bold;
+     padding: 10px 5px;
+     text-align: center !important;
+     color: #4f2 !important;
+     border-bottom: 1px solid #89f;
+     background: #fff;
+}
+
+.snarkTorrentstatus {
+     line-height: 90%;
+     min-width: 0;
+     padding: 2px 2px 2px 0;
+}
+
+.snarkTorrentStatus {
+     text-align: left !important;
+     white-space: nowrap;
+     padding: 3px;
+}
+
+.snarkTorrentStatus b {
+     margin-right: 2px;
+}
+
+.snarkTorrentStatus a {
+     font-weight: bold !important;
+}
+
+.snarkTorrentstatus:first-child {
+     font-size: 8pt;
+     font-weight: bold;
+     min-width: 48px;
+     padding: 1px !important;
+     padding-left: 0;
+     text-align: left !important;
+     color: #dd9 !important;
+}
+
+.snarkTorrentstatus:first-child img {
+     margin-right: 10px !important;
+     margin-left: 6px;
+}
+
+.snarkTorrentstatus,
+.snarkTorrentRateUp,
+.snarkTorrentRateDown,
+.snarkTorrentDownloaded,
+.snarkTorrentUploaded {
+     font-size: 8pt;
+     line-height: 90%;
+     padding: 0 3px;
+}
+
+.snarkTorrentRateUp,
+.snarkTorrentRateDown,
+.snarkTorrentDownloaded,
+.snarkTorrentUploaded {
+     text-align: center !important;
+}
+
+td.snarkTorrentDownloaded {
+     font-weight: bold;
+     width: 110px;
+     padding: 0 5px;
+}
+
+.snarkTorrents img {
+     padding: 4px 3px !important;
+}
+
+.snarkTorrents th img {
+     padding: 1px !important;
+     max-height: 22px;
+}
+
+.snarkTorrents tfoot th {
+     padding: 6px 4px !important;
+}
+
+.snarkTorrents tr:hover, .snarkDirInfo tr:hover {
+     background: #fff !important;
+     background: linear-gradient(to bottom, #fff 0%, #ffe 100%) !important;
+}
+
+.snarkTorrentEven {
+     background: #eef;
+}
+
+.snarkTorrentEven:nth-child(even) {
+     background: #eef;
+     background: rgba(240,240,255,0.5);
+}
+
+.snarkTorrentEven:nth-child(odd) {
+     background: #ddf;
+     background: rgba(220,220,255,0.5);
+}
+
+.snarkTorrentOdd, .SnarkTorrentEven {
+     border-bottom: 1px inset #bbf !important;
+}
+
+.snarkTorrentOdd {
+     background: #ddf !important;
+}
+
+.snarkTorrentOdd:nth-child(even) {
+     background: #eef !important;
+     background: rgba(240,240,255,0.5) !important;
+}
+
+.snarkTorrentOdd:nth-child(odd) {
+     background: #ddf !important;
+     background: rgba(220,220,255,0.5) !important;
+}
+
+.snarkTorrentOdd td, .snarkTorrentEven td {
+     border-top: none !important;
+}
+
+.SnarkTorrentOdd tr:nth-child(odd) {
+     background: #eef;
+}
+
+.snarkFileName {
+     padding: 4px 0 !important;
+     text-align: left !important;
+     font-weight: bold;
+}
+
+.snarkFileName a {
+     font-weight: bold;
+}
+
+.snarkFileSize {
+     font-weight: normal;
+     padding: 4px 2px;
+     color: #0c153d !important;
+}
+
+.snarkFileStatus {
+     font-size: 9pt;
+     font-style: italic;
+     min-width: 220px;
+     padding: 4px 5px 4px 15px;
+     text-align: center;
+     text-align: left !important;
+}
+
+.snarkTorrentETA {
+     font-style: italic;
+}
+
+/*
+div.percentBarOuter {
+      background: #fff !important;
+      border: 1px solid #9f9;
+      border-bottom: 1px solid #474;
+      border-right: 1px solid #474;
+      border-radius: 0;
+      float: left;
+      box-shadow: none;
+      opacity: 1;
+}
+
+div.percentBarInner {
+      border: none;
+      height: 14px;
+      background: #1c943a;
+      background: linear-gradient(to bottom,  #1c943a 0%, #092f10 50%, #0d2707 50%, #091b05 50%, #091503 100%);
+}
+
+div.percentBarInner.percentBarComplete {
+      background: #eef;
+      background: linear-gradient(to bottom,  #eef 0%, #002200 52%, #000000 52%, #eef 100%);
+}
+
+.percentBarText, .percentBarOuter {
+      text-align: center;
+      height: 14px;
+      top: 0;
+      width: 80px;
+}
+
+.percentBarText{
+      text-align: center;
+      font-weight: bold;
+      line-height: 140%;
+      text-shadow: 0 1px 1px #000;
+}
+
+.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter  {
+      width: 110px !important;
+      word-spacing: -0.2em;
+      font-size: 7.5pt;
+}
+
+*/
+
+.choked, .choked a:hover {
+     color: #900 !important;
+}
+
+.unchoked, .unchoked a:hover {
+     color: #050 !important;
+}
+
+.thumb {
+     transition: ease all 0.3s;
+}
+
+.thumb:hover {
+     max-width: 96px;
+     max-height: 64px;
+     transition: ease all 0.3s;
+     margin: 0 0 0 -4px !important;
+     filter: none !important;
+}
+
+.snarkNewTorrent {
+     font-size: 9pt;
+}
+
+.snarkAddInfo {
+     font-size: 9pt;
+     line-height: 130% !important;
+     margin-left: -5px;
+     font-weight: normal;
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 14px auto;
+     padding-left: 30px;
+}
+
+.snarkConfigTitle:hover, label.toggleview:hover {
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+}
+
+.snarkConfigTitle:active, label.toggleview:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover {
+     font-size: 13pt;
+     font-weight: bold;
+     font-variant: small-caps !important;
+     display: inline-block;
+     min-width: 200px;
+     margin: 0 0 -4px !important;
+     vertical-align: middle;
+     padding: 4px 25px;
+     letter-spacing: .08em;
+     border: 1px solid #89f;
+     border-top: none;
+     background: #fff !important;
+     background: linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 1px 1px #ddd);
+}
+
+.snarkConfigTitle a {
+     display: inline-block;
+     width: 100%;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover {
+     font-size: 14pt;
+}
+}
+
+_:-ms-lang(x), .snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover {
+     font-size: 11pt !important;
+}
+
+.configsectionpanel .snarkConfigTitle {
+     color: #444;
+}
+
+.snarkConfigTitle img, label.toggleview img {
+     margin-right: -2px;
+     margin-top: -2px;
+}
+
+.snarkConfigTitle a, .snarkConfigTitle a:visited, label.toggleview {
+     color: #444688 !important;
+     outline: none;
+}
+
+.snarkConfigTitle a:hover, .snarkConfigTitle a:focus, .toggleview:hover, .toggleview:focus {
+     color: #f60 !important;
+}
+
+.snarkConfigTitle a:active, .toggleview:active {
+     color: #f90 !important;
+}
+
+.configsectionpanel > .snarkConfig {
+     font-size: 10pt;
+     width: 100%;
+     padding-top: 0;
+}
+
+#bwHelp i {
+     padding-left: 5px;
+}
+
+#bwHelp a {
+     font-style: normal;
+     font-weight: bold;
+}
+
+form {
+     margin-bottom: 0;
+}
+
+p {
+     line-height: 150%;
+}
+
+hr {
+     width: 0;
+     height: 1px;
+     margin: 5px 0 7px 0;
+     text-align: center;
+     color: #444;
+     border: 0 solid #444;
+     background: #444;
+}
+
+hr.debug {
+     width: 100%;
+     background: #89f;
+     background: linear-gradient(to right, #89f 40%, #eef);
+}
+
+hr.debug + hr {
+     margin-bottom: -5px;
+}
+
+hr.debug:nth-child(n+7) {
+     margin: -10px 0 3px;
+}
+
+hr.debug:last-child {
+     height: 0;
+     margin-bottom: -5px;
+     margin-top: -15px;
+}
+
+a:link {
+     font-weight: normal;
+     text-decoration: none;
+     word-wrap: break-word;
+     opacity: 1;
+     color: #33a;
+     border-radius: 0;
+}
+
+a:visited {
+     font-weight: normal;
+     text-decoration: none;
+     color: #448;
+}
+
+a:hover, a:focus {
+     font-weight: normal;
+     color: #f60 !important;
+     outline: none;
+}
+
+a:active {
+     font-weight: normal;
+     color: #f93 !important;
+}
+
+input {
+     font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif;
+     margin: 2px 4px 2px 0;
+     padding: 3px 4px !important;
+     cursor: pointer;
+     text-align: left;
+     color: #006;
+     border: 1px solid #89f;
+     border-radius: 2px;
+     background: #fff;
+}
+
+input:disabled {
+     cursor: not-allowed;
+     opacity: .5 !important;
+}
+
+input:disabled[type="submit"]:hover, input.disabled[type="reset"]:hover, input:disabled[type="submit"]:focus, input.disabled[type="reset"]:focus {
+     border: 1px solid #999 !important;
+     background: linear-gradient(to bottom, #fff, #ddd);
+     cursor: not-allowed !important;
+     box-shadow: inset 0 0 0 1px #fff;
+     color: #111;
+}
+
+a.controld {
+     display: none;
+}
+
+input[type=image], thead img {
+     margin: 0 2px;
+     padding: 0 !important;
+     opacity: 1;
+     border: 0 none transparent !important;
+     border-radius: 3px;
+}
+
+input[type="image"], a img {
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus {
+     outline: none !important;
+     filter: drop-shadow(0 0 2px #f60) !important;
+}
+
+input::-moz-focus-inner {
+     border: 0;
+     outline: 0;
+}
+
+input[type="submit"], input[type="reset"], a.control {
+     font-size: 9pt;
+     font-weight: normal;
+     color: #333;
+     min-width: 90px !important;
+     padding: 5px 8px !important;
+     text-align: center;
+     border: 1px solid #999;
+     border-radius: 2px;
+     background: #eee;
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px rgba(221, 221, 221, 0.8));
+     cursor: pointer !important;
+}
+
+input[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="reset"]:focus, a.control:hover, a.control:focus {
+     color: #111;
+     background: #fff;
+     background: linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     border: 1px solid #89f;
+}
+
+input[type="submit"]:focus, input[type="reset"]:focus, a.control:focus {
+     filter: drop-shadow(0 0 2px #89f);
+}
+
+input[type="submit"]:active, input[type="reset"]:active, a.control:active {
+     color: #333;
+     background: #ddd;
+     border: 1px solid #999;
+     box-shadow: inset 0 0 0 1px #fff;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #555;
+}
+
+input[name="savepri"] {
+     margin-right: -2px !important;
+}
+
+input[type="text"], textarea {
+     cursor: text !important;
+}
+
+a.control {
+     vertical-align: middle;
+     text-align: left;
+     padding: 2px 5px 1px 3px !important;
+     display: inline-block;
+     margin: -1px 0 1px 5px;
+     min-width: 0 !important;
+     color: #333 !important;
+}
+
+a.control:hover, a.control:focus {
+     color: #111 !important;
+     border: 1px solid #89f;
+}
+
+a.control img {
+     margin: 0 !important;
+}
+
+.script {
+     display: inline-block;
+     margin: 5px 0 2px;
+}
+
+input.r {
+     text-align: right;
+     border: 1px solid #89f;
+     background: #fff;
+}
+
+input[type="text"]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"]:focus, input[name="nofilter_dataDir"]:focus {
+     background: #fff;
+}
+
+input[type="text"], input[type="password"], input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] {
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif !important;
+     min-width: 160px;
+     margin: 2px 2px 2px 0;
+     padding: 5px !important;
+     cursor: text;
+     vertical-align: middle;
+     color: #333;
+     border: 1px solid #bbb;
+     border-radius: 2px;
+     box-shadow: inset 1px 1px 1px #ddd;
+}
+
+input[type="text"]:focus, input[type="password"]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea[name="i2cpOpts"]:focus {
+     color: #000 !important;
+     box-shadow: inset 0 0 0 1px #89f;
+     box-shadow: inset 0 0 0 1px #89f, 0 0 1px rgba(136, 153, 255, 0.4);
+}
+
+textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] {
+     width: 500px;
+     margin: 3px 0;
+     padding: 5px;
+     resize: none;
+     cursor: text;
+     overflow: hidden;
+}
+
+thead img, thead img:hover {
+     opacity: .8;
+}
+
+input[type=image], th a:link img, th a:visited img {
+     opacity: 1;
+}
+
+input[type=image]:focus, th a:focus, a:focus img {
+     color: #f60;
+     outline: none;
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+img[src$="status.png"] {
+     filter: invert(100%) hue-rotate(180deg);
+}
+
+img[src$="status.png"]:hover, img[src$="status.png"]:focus, img[src$="status.png"]:active {
+     filter: invert(100%) hue-rotate(180deg) drop-shadow(0 0 2px #f60) !important;
+}
+
+img[src$="magnet.png"] {
+     transform: rotate(-90deg);
+}
+
+input[type=text], input.r {
+     min-width: 100px;
+}
+
+input[type=radio] {
+     margin: 0 3px 0 8px;
+     padding: 2px;
+     vertical-align: bottom;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     vertical-align: middle;
+     min-width: 16px;
+     min-height: 16px;
+     background: none;
+}
+
+label {
+     cursor: pointer;
+}
+
+.optbox:hover, .optbox:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus {
+     box-shadow: inset 0 0 1px 2px #89f;
+     filter: drop-shadow(0 0 3px #89f);
+     border: 0;
+     outline: none;
+}
+
+input.default {
+     visibility: hidden;
+     width: 1px;
+     height: 1px;
+}
+
+input[size="85"] {
+     width: 550px;
+     width: calc(100% - 150px);
+}
+
+.addtorrentsection input, .newtorrentsection input {
+     margin-left: 5px !important;
+}
+
+select {
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif;
+     min-width: 100px;
+     margin: 2px 4px 2px 0;
+     padding: 4px 16px 4px 2px;
+     cursor: pointer;
+     vertical-align: middle;
+     text-overflow: ellipsis;
+     color: #333;
+     border: 1px solid #bbb;
+     border-radius: 2px;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+select option {
+     font-size: 9.5pt;
+     font-weight: normal;
+     background: #fff;
+}
+
+select:hover, select:active {
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+}
+
+select:focus {
+     background: url(images/dropdown_hover.png) right center no-repeat, linear-gradient(to bottom, #ddd 0%, #fff 100%) !important;
+     box-shadow: 0 0 0 1px #89f;
+     color: #000;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+select {
+     padding: 6px 4px;
+}
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+select {
+     padding: 4px;
+}
+}
+
+select::-ms-expand {
+     display: none;
+}
+
+textarea {
+     font: 8pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font-weight: bold;
+     padding: 1px 4px 0;
+     color: #006;
+     border: 1px solid #89f;
+     border-radius: 2px;
+     background: #fff;
+}
+
+textarea:focus {
+     color: #22f !important;
+}
+
+textarea[name="i2cpOpts"] {
+     overflow: hidden;
+}
+
+img {
+     line-height: 100%;
+     margin: 0 3px 1px 3px;
+     vertical-align: middle;
+     opacity: 1.0;
+     border: none;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+img:hover {
+     line-height: 100%;
+     opacity: 1;
+     border: none;
+}
+
+#pagenav img {
+     padding: 5px !important;
+     opacity: 0.7;
+     border: 1px solid #349 !important;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%);
+     box-shadow: inset 0 0 1px 1px #fff;
+     filter: drop-shadow(0 0 1px #aaa) !important;
+     width: 8px;
+}
+
+#pagenav img:hover, #pagenav img:focus {
+     opacity: 1;
+     border: 1px solid #f60 !important;
+}
+
+#pagenav a:active img {
+     background: linear-gradient(to bottom, #99f 0%, #99f 50%, #66f 51%);
+     background: linear-gradient(to bottom, #ddf 0%, #ddf 50%, #99f 51%);
+     box-shadow: inset 2px 2px 3px 1px #333;
+}
+
+#pagenav img.disable, #pagenav img.disable:hover {
+     margin: 0 0 0 3px !important;
+     opacity: .3;
+     border: 1px solid #000 !important;
+}
+
+#pagenav {
+     font-weight: bold !important;
+}
+
+div.newtorrentsection td:first-child,
+div.addtorrentsection td:first-child {
+     font-weight: bold;
+     padding-right: 5px;
+     padding-left: 5px;
+     white-space: nowrap;
+}
+
+div.newtorrentsection td:first-child,
+div.addtorrentsection td:first-child {
+     width: 120px;
+}
+
+table#trackerselect {
+     width: 100% !important;
+     width: calc(100% - 150px) !important;
+     margin: 2px 5px 0 5px;
+     border: 1px solid #89f;
+     background: rgba(255,255,255,0.1);
+}
+
+#trackerselect tr:nth-child(even) {
+     border-bottom: 1px inset #ccf;
+     background: #ddf !important;
+     background: rgba(220,220,255,0.5) !important;
+}
+
+#trackerselect tr:nth-child(odd) {
+     border-bottom: 1px inset #ccf;
+     background: #eef;
+     background: rgba(240,240,255,0.5) !important;
+}
+
+#trackerselect tr:last-child {
+     border-bottom: 1px solid #89f;
+}
+
+#trackerselect tr:first-child {
+     font-weight: bold;
+     border-bottom: 1px #89f;
+     background: linear-gradient(to bottom, #eef, #fff);
+}
+
+#trackerselect tr:first-child td {
+     padding: 5px 10px;
+     border-bottom: 1px solid #89f;
+}
+
+#trackerselect td {
+     padding: 3px 10px;
+}
+
+#trackerselect td:first-child {
+     width: 20%;
+     font-weight: normal;
+}
+
+#trackerselect td:nth-child(4) {
+     width: 70%;
+}
+
+#trackerselect input {
+     margin: 3px !important;
+}
+
+div.configsectionpanel td:first-child {
+     font-weight: bold;
+     padding-right: 10px !important;
+     padding-left: 5px !important;
+}
+
+.trackerconfig th {
+     min-width: 50px;
+     padding-top: 6px;
+     padding-bottom: 6px;
+}
+
+.trackerconfig th:first-child {
+     background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #fff, #eef);
+}
+
+.trackerconfig th:last-child, .trackerconfig td:last-child {
+     padding-left: 10px !important;
+}
+
+.trackerconfig tr:nth-child(odd), .snarkConfig tr:nth-child(odd) {
+     background: #ddf;
+     background: rgba(220,220,255,0.5);
+}
+
+.trackerconfig tr:last-child {
+     border: 1px solid #89f;
+     background: #fff;
+}
+
+.knownTracker input[type="radio"] {
+     opacity: 0.6;
+     cursor: not-allowed;
+}
+
+.snarkTorrentNoneLoaded td {
+     color: #0c153d !important;
+     background: #fff;
+}
+
+.snarkNewTorrent td {
+     padding: 2px 3px;
+}
+
+.snarkNewTorrent td:nth-child(2), .snarkNewTorrent td:nth-child(3) {
+     font-weight: bold;
+     padding-right: 5px;
+}
+
+.snarkNewTorrent td[rowspan="0"] {
+     width: 50%;
+}
+
+.snarkConfig tr:last-child {
+     border: 1px solid #89f;
+}
+
+table.trackerconfig td:first-child {
+     width: 24px !important;
+     padding: 5px 2px;
+}
+
+.trackerconfig tr:nth-child(even), .snarkConfig tr:nth-child(even) {
+     background: #eef;
+     background: rgba(240,240,255,0.5);
+}
+
+.trackerconfig input {
+     margin: 3px 0 !important;
+     cursor: default;
+}
+
+.optbox[name="add_tracker_type"] {
+     cursor: pointer;
+     /* active cursor only for clickable radio icons */
+}
+
+.snarkConfig input[type="submit"] {
+     min-width: 100px;
+     margin: 3px 2px 3px 5px !important;
+     text-align: center;
+}
+
+.trackerconfig td, .snarkConfig td {
+     padding: 5px 1px !important;
+}
+
+.trackerconfig {
+     text-align: left !important;
+}
+
+.snarkConfig table tr:first-child {
+     border-top: 1px solid #89f !important;
+}
+
+.trackerconfig th:nth-child(n+4),
+.trackerconfig th:nth-child(n+5),
+.trackerconfig td:nth-child(n+4),
+.trackerconfig td:nth-child(n+5) {
+     text-align: center !important;
+}
+
+.trackerconfig th, .trackerconfig td,
+.trackerconfig th:last-child, .trackerconfig td:last-child {
+     text-align: left !important;
+}
+
+.trackerconfig td:first-child {
+     text-align: right !important;
+}
+
+.configsectionpanel tr:last-child td[colspan="3"] {
+     display: none;
+}
+
+#configs .spacer, .trackerconfig .spacer {
+     display: none;
+}
+
+#configs td:first-child::before {
+     content: "";
+     min-height: 34px;
+     display: inline-block;
+     vertical-align: middle;
+}
+
+.configsectionpanel td[colspan="5"] {
+     border-top: 1px solid #89f;
+}
+
+.snarkConfig tr:nth-last-child(2) {
+     background: none;
+}
+
+.snarkConfig tr:nth-last-child(2) td, .configsectionpanel td[colspan="5"] {
+     padding: 11px 15px 0 !important;
+     text-align: right !important;
+     border-top: 1px solid #89f;
+}
+
+.snarkConfig tr {
+     border: none !important;
+}
+
+.trackerconfig table {
+     border: none !important;
+}
+
+/* section panels */
+
+.mainsection, .newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel {
+     text-align: center;
+     color: #0c153d;
+     border: 1px solid #89f;
+     box-shadow: inset 0 0 2px 0 #ccc, 0 0 1px #bbb;
+     word-wrap: break-word;
+     background: #fff;
+}
+
+.mainsection {
+     margin: 0;
+     padding: 0;
+     border-bottom: none;
+     background: repeating-linear-gradient(to right, #ddf 2px, #eef 2px, #ddf 4px);
+}
+
+.newtorrentsection {
+     margin: 0 0 10px 0;
+     padding: 0 10px;
+     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #fff 0%, #eef 100%);
+     background-size: 68px 68px, 100% 100%;
+}
+
+.addtorrentsection {
+     margin: 10px 0;
+     padding: 0 10px;
+     background: url(images/snark_add.png) no-repeat scroll 99.5% center, linear-gradient(to bottom, #fff 0%, #eef 100%);
+     background-size: 61px 61px, 100% 100%;
+}
+
+.configsection {
+     margin: 0;
+     padding: 0 10px 12px 10px;
+     background: url(images/configuration.png) no-repeat scroll 101% center, linear-gradient(to bottom, #fff 0%, #eef 100%);
+     background-size: 68px 68px, 100% 100%;
+}
+
+.iframed .configsection {
+     filter: none;
+}
+
+.configsectionpanel {
+     margin: 9px 0 0 0;
+     padding: 0;
+     background: linear-gradient(to bottom, #fff 0%, #eef 40px, #fff 100%);
+}
+
+.iframed .configsectionpanel {
+     filter: none;
+}
+
+/* end panels */
+
+.addtorrentsection table, .newtorrentsection table {
+     margin-top: -5px;
+}
+
+.configsection .snarkConfig {
+     margin-top: -1px !important;
+     padding-top: 0 !important;
+}
+
+.newtorrentsection form, .configsection form, .addtorrentsection form {
+     color: #0c153d !important;
+}
+
+div.configsection table {
+     opacity: 1;
+     color: #ffb;
+}
+
+div.configsection a {
+     font-weight: bold;
+}
+
+div.configsection a:hover {
+     text-decoration: none;
+     color: #f60;
+}
+
+code {
+     font: bold 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     padding: 0 2px;
+     color: #050;
+}
+
+.iframed .snarknavbar, .iframed .mainsection, .iframed .addtorrentsection, .iframed .newtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
+     border-right: none !important;
+     border-left: none !important;
+     border-radius: 0;
+}
+
+.routerdown {
+     padding: 10px;
+     color: #0c153d;
+     border-bottom: 1px solid #89f;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+input.trackername {
+     width: 100px;
+}
+
+input.trackerhome {
+     width: 210px;
+}
+
+input.trackerannounce {
+     width: 210px;
+}
+
+/* toggle create/add panel view */
+
+input.toggle_input { /* hide checkbox and use label as faux panel heading */
+     display: none;
+}
+
+label.toggleview:hover {
+     cursor: pointer;
+     color: #f60;
+}
+
+input#toggle_addtorrent:not(checked) + label + hr + table,
+input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: none;
+}
+
+input#toggle_addtorrent:checked + label + hr + table,
+input#toggle_createtorrent:checked + label + hr + table {
+     display: table;
+}
+
+/* display panels by default on webkit based browsers (midori fix) */
+/*
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+input#toggle_addtorrent:not(checked) + label + hr + table,
+input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+input#toggle_addtorrent:checked + label + hr + table,
+input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+}
+*/
+
+/* display by default in iframe to avoid overflow issue */
+.iframed input#toggle_addtorrent:not(checked) + label + hr + table,
+.iframed input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+.iframed input#toggle_addtorrent:checked + label + hr + table,
+.iframed input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+
+label.toggleview, .snarkConfigTitle a:visited {
+     color: #006;
+}
+
+label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img {
+     color: #f90;
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:active img {
+     transform: rotate(90deg);
+     transition: ease transform 0.3s 0s;
+}
+
+.peerinfo td:first-child {
+     background: url(images/peer.png) center center no-repeat;
+}
+
+.peerinfo td:first-child::after {
+     content: "";
+     display: inline-block;
+     box-sizing: border-box;
+     vertical-align: middle !important;
+     min-height: 24px !important;
+}
+
+/* debug */
+
+.debuginfo td:first-child {
+     padding: 3px;
+     background: url(images/debuginfo.png) center center no-repeat;
+     background-size: 14px 14px;
+     background-blend-mode: luminosity;
+}
+
+.debugConnection {
+     color: #030;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     word-spacing: -0.1em;
+     margin-left: 2px;
+     margin-right: 5px;
+     font-weight: bold;
+}
+
+.debugConnStat {
+     margin-right: 4px;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #030;
+     font-weight: bold;
+     white-space: nowrap;
+}
+
+.debugConnStat b {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", Verdana, "Bitstream Vera Sans", "DejaVu Sans", "Lucida Grande", Helvetica, sans-serif;
+     color: #111;
+}
+
+.debugRequests {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #030;
+     font-weight: bold;
+}
+
+.debuginfo td {
+     line-height: 120% !important;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+}
+
+.from, .to {
+     font-family: sans-serif;
+     font-size: 12pt;
+     font-weight: bold;
+     vertical-align: middle;
+     line-height: 50%;
+     text-shadow: 0 0 1px #fff;
+}
+
+/* end debug */
+
+/* Resource Errors */
+
+.resourceError {
+     border: 1px solid #89f;
+     border-bottom: 2px solid #89f;
+     margin-bottom: 0;
+}
+
+.resourceError th {
+     background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #fff, #eef);
+     background-size: 24px auto, 100% 100%;
+     padding: 10px 10px 10px 40px;
+     font-size: 10pt !important;
+     border: none;
+     border-bottom: 2px solid #89f;
+}
+
+.resourceError td {
+     padding: 10px;
+     border: none;
+}
+
+.resourceError tr:nth-child(odd) {
+     background: #ddf;
+}
+
+.resourceError tr:nth-child(even) {
+     background: #eef;
+}
+
+#DoesNotExist {
+     margin-top: 10px;
+     border: none;
+     border-bottom: 1px solid #89f;
+}
+
+#DoesNotExist th {
+     border-top: 1px solid #89f;
+}
+
+/ end resource errors */
+
+#totals {
+     display: inline-block;
+     margin: 2px 0 2px 5px;
+}
+
+/* torrent priorities */
+
+.priorityHigh {
+     background: url(/i2psnark/.resources/icons/clock_red.png) left 28px center no-repeat;
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+}
+
+.priorityNormal {
+     background: url(/i2psnark/.resources/icons/clock.png) left 28px  center no-repeat;
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+}
+
+.prioritySkip {
+     background: url(/i2psnark/.resources/icons/cancel.png) left 28px center no-repeat;
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+}
+
+/* end priorities */
+
+/* configs */
+
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#configs td:first-child {
+     min-width: 180px !important;
+     padding-left: 15px !important;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 14px auto;
+     padding-left: 24px !important;
+     width: 100%;
+}
+
+td#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+     margin-left: 3px;
+     line-height: 100%;
+}
+
+/* end configs */
+
+#torrentInfoStats td {
+     text-align: left !important;
+}
+
+#torrentInfoStats img {
+     margin: 1px 1px 2px 3px !important;
+}
+
+#torrentInfoStats b {
+     margin-left: 2px;
+}
+
+#torrentInfoStats span {
+     white-space: nowrap;
+     display: inline-block;
+     margin-right: 7px;
+}
+
+#filecheck {
+     display: inline-block;
+     margin: 5px 0;
+     background: url(images/progressbar.gif) left center no-repeat;
+     padding-left: 22px;
+}
+
+#filecheck a {
+     margin: 8px;
+}
+
+
+/* end Resource Errors */
+
+/* MS Edge fix */
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+/* responsive layout */
+
+@media screen and (max-width: 950px) {
+
+body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo {
+     font-size: 8pt;
+}
+
+.snarkTorrents a {
+     display: inline-block;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     max-width: 300px;
+}
+
+.snarkTorrents td:nth-child(2) {
+     white-space: nowrap;
+}
+.snarkTorrents td[colspan="10"] {
+     white-space: normal;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+
+.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
+     font-weight: bold;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 14px auto !important;
+}
+}
+
+@media screen and (max-width: 1100px) {
+.toggleview, .snarkConfigTitle {
+     font-size: 11pt !important;
+}
+
+.snarkDirInfo th a img, .snarkDirInfo th img  {
+     max-height: 18px !important;
+}
+
+body {
+     margin: 3px;
+}
+
+.page {
+     padding: 4px;
+}
+
+.logshim {
+     margin-top: -5px !important;
+}
+
+.addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel {
+     margin-top: 4px !important;
+     margin-bottom: 4px !important;
+}
+
+.configsection, .configsectionpanel:last-child {
+     margin-bottom: 0 !important;
+}
+
+table.SnarkDirInfo {
+     margin-top: 4px !important;
+}
+
+.dirInfoComplete {
+     display: none;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.trackerconfig th {
+     padding-top: 5px;
+     padding-bottom: 5px;
+}
+
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:nth-child(n+1):hover, .snarkRefresh:focus, .snarkRefresh:nth-child(n+1):focus .snarkRefresh:active, .snarkRefresh:nth-child(n+1):active {
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.snarkRefresh:link:first-child {
+     padding-left: 22px !important;
+}
+
+#configs td:first-child::before {
+     content: "";
+     min-height: 30px;
+}
+}
+
+@media screen and (max-width: 1400px) {
+.snarkRefresh:link:first-child {
+     padding-left: 23px !important;
+}
+}
+
+@media screen and (min-width: 1100px) {
+body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code, .snarkMessages li {
+     font-size: 9pt !important;
+}
+
+.percentDownloaded {
+     pointer-events: none; /* hide tooltip */
+}
+}
+
+@media screen and (min-width: 1400px) {
+body, th, td, table a, input, input[type="text"], input.r, input[name="nofilter_dataDir"], select, textarea, textarea[name="i2cpOpts"], .snarkAddInfo, code {
+     font-size: 10pt !important;
+}
+
+.snarkRefresh {
+     font-size: 11pt !important;
+}
+
+.snarkRefresh:link {
+     padding-left: 25px !important;
+}
+
+.snarkMessages li, .snarkTorrents tt {
+     font-size: 9pt;
+}
+
+.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
+     padding: 4px !important;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+td.snarkTorrentDownloaded {
+     white-space: nowrap;
+     padding: 0 10px;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     min-width: 240px;
+}
+
+.snarkTorrentStatus b {
+     margin-right: 3px;
+}
+
+#configs td:first-child {
+     min-width: 220px !important;
+}
+}
+/* end responsive layout */
+
diff --git a/installer/resources/themes/snark/dark/favicon.ico b/installer/resources/themes/snark/dark/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..28658965c9486d89945244234f91d20162f1649b
Binary files /dev/null and b/installer/resources/themes/snark/dark/favicon.ico differ
diff --git a/installer/resources/themes/snark/dark/images/add.png b/installer/resources/themes/snark/dark/images/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..49746a115d7299ab69a309f1e61c0d8fc7e8e89e
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/add.png differ
diff --git a/installer/resources/themes/snark/dark/images/bullet.png b/installer/resources/themes/snark/dark/images/bullet.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a716e251c03971af5f4ccc3c3bb83ef40c780cf
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/bullet.png differ
diff --git a/installer/resources/themes/snark/dark/images/button_forum.png b/installer/resources/themes/snark/dark/images/button_forum.png
new file mode 100644
index 0000000000000000000000000000000000000000..0271743df716bf6f0810c1075b832d6d2e0ceb0f
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/button_forum.png differ
diff --git a/installer/resources/themes/snark/dark/images/button_forum_active.png b/installer/resources/themes/snark/dark/images/button_forum_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2b4538e8bcc68e343ab59ac1c166ae9a722ea53
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/button_forum_active.png differ
diff --git a/installer/resources/themes/snark/dark/images/button_forum_hover.png b/installer/resources/themes/snark/dark/images/button_forum_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..8694029bd420d3cfc0105408d1da3af01ea2dfff
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/button_forum_hover.png differ
diff --git a/installer/resources/themes/snark/dark/images/button_snark.png b/installer/resources/themes/snark/dark/images/button_snark.png
new file mode 100644
index 0000000000000000000000000000000000000000..aedda5d18bfeffc86eb1767ef7972a2e45c4fe62
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/button_snark.png differ
diff --git a/installer/resources/themes/snark/dark/images/button_snark_active.png b/installer/resources/themes/snark/dark/images/button_snark_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..745f14ef2e64ece9678cc6799449bb0bcb0c2ecb
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/button_snark_active.png differ
diff --git a/installer/resources/themes/snark/dark/images/button_snark_hover.png b/installer/resources/themes/snark/dark/images/button_snark_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..69f7f2de77044ddf4b46aa2ff117d411ae8750e9
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/button_snark_hover.png differ
diff --git a/installer/resources/themes/snark/dark/images/button_tracker.png b/installer/resources/themes/snark/dark/images/button_tracker.png
new file mode 100644
index 0000000000000000000000000000000000000000..7158cf4f00c57f8838eedbcf5b5a450ee0a9135b
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/button_tracker.png differ
diff --git a/installer/resources/themes/snark/dark/images/button_tracker_active.png b/installer/resources/themes/snark/dark/images/button_tracker_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..abdbc720cc7f99dfdf800fbce70e7d530668209f
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/button_tracker_active.png differ
diff --git a/installer/resources/themes/snark/dark/images/button_tracker_hover.png b/installer/resources/themes/snark/dark/images/button_tracker_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..16077f35513bafeefa2cb49db898d33fd1228692
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/button_tracker_hover.png differ
diff --git a/installer/resources/themes/snark/dark/images/complete.png b/installer/resources/themes/snark/dark/images/complete.png
new file mode 100644
index 0000000000000000000000000000000000000000..96199806aa92cb7fdb15612c87106565460ef8cb
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/complete.png differ
diff --git a/installer/resources/themes/snark/dark/images/config.png b/installer/resources/themes/snark/dark/images/config.png
new file mode 100644
index 0000000000000000000000000000000000000000..8151463917ec88ca0962a5bfefb9f11c9122bff8
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/config.png differ
diff --git a/installer/resources/themes/snark/dark/images/configuration.png b/installer/resources/themes/snark/dark/images/configuration.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5d5a77c772ab123291d78f5fcd84561ff3662dc
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/configuration.png differ
diff --git a/installer/resources/themes/snark/dark/images/create.png b/installer/resources/themes/snark/dark/images/create.png
new file mode 100644
index 0000000000000000000000000000000000000000..1da4964f227819caae0e0dd5123efd19b5867223
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/create.png differ
diff --git a/installer/resources/themes/snark/dark/images/create0.png b/installer/resources/themes/snark/dark/images/create0.png
new file mode 100644
index 0000000000000000000000000000000000000000..44ccbf812879c42cb1f9587d865bcfc337ce6361
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/create0.png differ
diff --git a/installer/resources/themes/snark/dark/images/debuginfo.png b/installer/resources/themes/snark/dark/images/debuginfo.png
new file mode 100644
index 0000000000000000000000000000000000000000..42c7cd6ab143aa45bbadec43ca28ff8868ffde20
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/debuginfo.png differ
diff --git a/installer/resources/themes/snark/dark/images/delete.png b/installer/resources/themes/snark/dark/images/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..40516eebe35dad74a570b27ef065345e4f7072be
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/delete.png differ
diff --git a/installer/resources/themes/snark/dark/images/details.png b/installer/resources/themes/snark/dark/images/details.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2d0f1d7197ba3cc1b9e67f6626b2096eb29aecb
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/details.png differ
diff --git a/installer/resources/themes/snark/dark/images/downloading.png b/installer/resources/themes/snark/dark/images/downloading.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d01bb51372948d4254283e580dd91e1243380f1
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/downloading.png differ
diff --git a/installer/resources/themes/snark/dark/images/dropdown.png b/installer/resources/themes/snark/dark/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..077ee79136817191247bc8e4fe4223a99b63dfc9
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/dropdown.png differ
diff --git a/installer/resources/themes/snark/dark/images/dropdown_active.png b/installer/resources/themes/snark/dark/images/dropdown_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f115f98851233839bd411337191ef76f510b9bb
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/dropdown_active.png differ
diff --git a/installer/resources/themes/snark/dark/images/dropdown_hover.png b/installer/resources/themes/snark/dark/images/dropdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ffcca9c9b867994cf27dcac5df46d0928fef47c5
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/dropdown_hover.png differ
diff --git a/installer/resources/themes/snark/dark/images/eta.png b/installer/resources/themes/snark/dark/images/eta.png
new file mode 100644
index 0000000000000000000000000000000000000000..33e00910046bd8b26de446f8f36ca2bde9cd764b
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/eta.png differ
diff --git a/installer/resources/themes/snark/dark/images/file.png b/installer/resources/themes/snark/dark/images/file.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6ff3e0f398cbeed6a9b7959421ce20aa9d68f96
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/file.png differ
diff --git a/installer/resources/themes/snark/dark/images/file_sm.png b/installer/resources/themes/snark/dark/images/file_sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c1c1888d06470a8bcdb5d85da8a7b8006cbf2a5
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/file_sm.png differ
diff --git a/installer/resources/themes/snark/dark/images/first.png b/installer/resources/themes/snark/dark/images/first.png
new file mode 100644
index 0000000000000000000000000000000000000000..11122f7be56a44ecc449728c545037a831463ede
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/first.png differ
diff --git a/installer/resources/themes/snark/dark/images/hat.png b/installer/resources/themes/snark/dark/images/hat.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d94cff8e9313d34198dbb17f9df43b35a36cb87
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/hat.png differ
diff --git a/installer/resources/themes/snark/dark/images/head_rx.png b/installer/resources/themes/snark/dark/images/head_rx.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd8ad2ede4974487b89da38933bec30df4cbfdc4
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/head_rx.png differ
diff --git a/installer/resources/themes/snark/dark/images/head_rxspeed.png b/installer/resources/themes/snark/dark/images/head_rxspeed.png
new file mode 100644
index 0000000000000000000000000000000000000000..66f596100eac5aa4c1fddfdb3a4d504fc2286dcb
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/head_rxspeed.png differ
diff --git a/installer/resources/themes/snark/dark/images/head_tx.png b/installer/resources/themes/snark/dark/images/head_tx.png
new file mode 100644
index 0000000000000000000000000000000000000000..9344a41ad0d2db793892c1a0dfd0086801da03e7
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/head_tx.png differ
diff --git a/installer/resources/themes/snark/dark/images/head_txspeed.png b/installer/resources/themes/snark/dark/images/head_txspeed.png
new file mode 100644
index 0000000000000000000000000000000000000000..0dc1e4f6cdb3d287e30755c7dee1b2449032626c
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/head_txspeed.png differ
diff --git a/installer/resources/themes/snark/dark/images/hidepeers.png b/installer/resources/themes/snark/dark/images/hidepeers.png
new file mode 100644
index 0000000000000000000000000000000000000000..8fd8d5a6e9054676b48ba5b0078640d14090649e
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/hidepeers.png differ
diff --git a/installer/resources/themes/snark/dark/images/infocircle.png b/installer/resources/themes/snark/dark/images/infocircle.png
new file mode 100644
index 0000000000000000000000000000000000000000..dffe20d9be015824340bf5c9566f23e1bf55e6ae
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/infocircle.png differ
diff --git a/installer/resources/themes/snark/dark/images/last.png b/installer/resources/themes/snark/dark/images/last.png
new file mode 100644
index 0000000000000000000000000000000000000000..36d291aa539cc8bbd0105a07ecb988f725e2d24c
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/last.png differ
diff --git a/installer/resources/themes/snark/dark/images/next.png b/installer/resources/themes/snark/dark/images/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..9bb8b42dd57a1ad1e99a6c4fac96da49e159d3d4
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/next.png differ
diff --git a/installer/resources/themes/snark/dark/images/nopeers.png b/installer/resources/themes/snark/dark/images/nopeers.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fb0e2cfccfc57e557ee70aee09c5aeb83c6d6f0
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/nopeers.png differ
diff --git a/installer/resources/themes/snark/dark/images/peer.png b/installer/resources/themes/snark/dark/images/peer.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f3408dc6c12d5b4c77955824f88dc99b005daf1
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/peer.png differ
diff --git a/installer/resources/themes/snark/dark/images/previous.png b/installer/resources/themes/snark/dark/images/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..b31f561165c16155917e3e34786be921dfafa1f6
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/previous.png differ
diff --git a/installer/resources/themes/snark/dark/images/priority.png b/installer/resources/themes/snark/dark/images/priority.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ee6c6500e18f08d6495d118f7d7b2b2e0dd1458
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/priority.png differ
diff --git a/installer/resources/themes/snark/dark/images/progressbar.gif b/installer/resources/themes/snark/dark/images/progressbar.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e204f6b319698df8029a9e6c79cc1ea79b5e297e
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/progressbar.gif differ
diff --git a/installer/resources/themes/snark/dark/images/remove.png b/installer/resources/themes/snark/dark/images/remove.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5513afa3dfbb28f874269dcd1871bef6cf2438a
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/remove.png differ
diff --git a/installer/resources/themes/snark/dark/images/seeding.png b/installer/resources/themes/snark/dark/images/seeding.png
new file mode 100644
index 0000000000000000000000000000000000000000..e58e518bc0f011eb50ef1ad727a3091048f6d1bd
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/seeding.png differ
diff --git a/installer/resources/themes/snark/dark/images/showpeers.png b/installer/resources/themes/snark/dark/images/showpeers.png
new file mode 100644
index 0000000000000000000000000000000000000000..e20490d58161aee2f7dc3dce4ca8b38e876ae8b2
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/showpeers.png differ
diff --git a/installer/resources/themes/snark/dark/images/size.png b/installer/resources/themes/snark/dark/images/size.png
new file mode 100644
index 0000000000000000000000000000000000000000..c90ba586e77cef77a097e9a3e11e679cbc5fc7bf
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/size.png differ
diff --git a/installer/resources/themes/snark/dark/images/snark_add.png b/installer/resources/themes/snark/dark/images/snark_add.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc17f23ddd091b8f1b516e87cf25a7abe9a925b4
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/snark_add.png differ
diff --git a/installer/resources/themes/snark/dark/images/snark_create.png b/installer/resources/themes/snark/dark/images/snark_create.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e767b9b2210b179316c02a86627570cd3d44bd6
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/snark_create.png differ
diff --git a/installer/resources/themes/snark/dark/images/stalled.png b/installer/resources/themes/snark/dark/images/stalled.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d7b193b51ef414e9f69276722331ee066e3517e
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/stalled.png differ
diff --git a/installer/resources/themes/snark/dark/images/start.png b/installer/resources/themes/snark/dark/images/start.png
new file mode 100644
index 0000000000000000000000000000000000000000..262151e9c9d4aace878b360ab537b0401c3f1a45
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/start.png differ
diff --git a/installer/resources/themes/snark/dark/images/start_all.png b/installer/resources/themes/snark/dark/images/start_all.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e1f96daa8a2ee14d606305700a9d4d55e028333
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/start_all.png differ
diff --git a/installer/resources/themes/snark/dark/images/status.png b/installer/resources/themes/snark/dark/images/status.png
new file mode 100644
index 0000000000000000000000000000000000000000..65577e1489c95a6d580bbef8d1f31591b19a6a71
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/status.png differ
diff --git a/installer/resources/themes/snark/dark/images/stop.png b/installer/resources/themes/snark/dark/images/stop.png
new file mode 100644
index 0000000000000000000000000000000000000000..bddf3d0bf573b5533f3296c3846f70680d64b14a
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/stop.png differ
diff --git a/installer/resources/themes/snark/dark/images/stop_all.png b/installer/resources/themes/snark/dark/images/stop_all.png
new file mode 100644
index 0000000000000000000000000000000000000000..d04d318f0d1c54d4a1014f287a422482aaf7601e
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/stop_all.png differ
diff --git a/installer/resources/themes/snark/dark/images/stopped.png b/installer/resources/themes/snark/dark/images/stopped.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5b41579e3f41fd4cce24968eb302eaa6a76684b
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/stopped.png differ
diff --git a/installer/resources/themes/snark/dark/images/torrent.png b/installer/resources/themes/snark/dark/images/torrent.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d0b709817d969eab44fac1fc95fc3b9bc104ae8
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/torrent.png differ
diff --git a/installer/resources/themes/snark/dark/images/trackererror.png b/installer/resources/themes/snark/dark/images/trackererror.png
new file mode 100644
index 0000000000000000000000000000000000000000..f41191f6cb5251e0b48097002137a240fe62b4dc
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/trackererror.png differ
diff --git a/installer/resources/themes/snark/dark/images/up.png b/installer/resources/themes/snark/dark/images/up.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcd34b51948ee0229706aa7424caf44dcc05cad5
Binary files /dev/null and b/installer/resources/themes/snark/dark/images/up.png differ
diff --git a/installer/resources/themes/snark/dark/snark.css b/installer/resources/themes/snark/dark/snark.css
new file mode 100644
index 0000000000000000000000000000000000000000..f33f687aebb8066b048c08ec7a0a152bb2384bae
--- /dev/null
+++ b/installer/resources/themes/snark/dark/snark.css
@@ -0,0 +1,2458 @@
+/* I2PSnark theme "Camo" aka Dark */
+/* Author: dr|z3d */
+
+body {
+     margin: 9px 8px;
+     color: #ee9;
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     background: #000;
+     background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)), url(/themes/console/dark/images/camotile2.png) top left;
+     background-size: 3px 3px, 175px 175px;
+}
+
+/* preload top navigation mouseovers */
+body {
+     background: linear-gradient(45deg, rgba(0,0,0,0.5), rgba(0,34,0,0.7)),
+     url(/themes/console/dark/images/camotile2.png) top left,
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat !important;
+     background-size: 3px 3px, 175px 175px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+}
+
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+     margin: 1px 0 !important;
+}
+
+/* preload top navigation mouseovers */
+body.iframed {
+     background: url(/themes/console/images/transparent.gif),
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat !important;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+}
+
+.page {
+     color: #310;
+     min-width: 890px !important;
+     margin: 5px 0 0 0;
+     font-size: 9pt !important;
+     line-height: 160% !important;
+     text-align: center;
+     opacity: 1;
+     background: #000;
+     background: repeating-linear-gradient(135deg, #010 0px, #010 10px, #020 10px, #020 20px, #010 20px) !important;
+     box-shadow: inset 0 0 0 1px #000 !important;
+}
+
+.iframed .page {
+     border: none;
+     background: none;
+     padding: 0;
+     margin: 5px 0;
+     box-shadow: none;
+     background: url(/themes/console/dark/images/camotile2.png) repeat scroll left top #000;
+     background: linear-gradient(to right, #000 0%, #020 50%, #000 100%);
+}
+
+::selection {
+     background: #030 !important;
+     color: white;
+}
+
+::-moz-selection {
+     background: #030 !important;
+     color: white;
+}
+
+* {
+     outline: none;
+}
+
+/* topnav */
+
+.snarknavbar {
+     margin: 0 0 -6px !important;
+     padding: 9px 0 8px;
+     background: #010 !important;
+     background-image: linear-gradient(to bottom, #001000 0%, #001900 51%, #000 51%, #000 100%) !important;
+     min-width: 888px;
+     text-align: center;
+     border: 1px solid #494;
+     position: sticky;
+     top: -1px;
+     z-index: 999;
+}
+
+.iframed .snarknavbar {
+     margin-top: -2px !important;
+     position: static;
+}
+
+.snarkRefresh:link, .snarkRefresh:visited {
+     padding: 5px 7px 5px 22px !important;
+     margin: 0 -1px !important;
+     color: #3f3;
+     text-shadow: 0 0 1px #000;
+     background: url(images/button_tracker.png) 7px center no-repeat, url(/themes/console/dark/images/header.png) center center repeat;
+     background: url(images/button_tracker.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%) !important;
+     border-radius: 0;
+     border: 1px solid #494;
+     box-shadow: inset 0 0 0 1px #000;
+     filter: drop-shadow(0 0 1px #000);
+     opacity: 0.7;
+}
+
+.snarkRefresh:link:last-child {
+      margin-left: 3px;
+}
+
+.snarkRefresh:link:first-child {
+     border-radius: 2px 0 0 2px;
+     padding-left: 24px !important;
+     background:  url(images/button_snark.png) 7px center no-repeat, url(/themes/console/dark/images/header.png) center center repeat;
+     background: url(images/button_snark.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%) !important;
+}
+
+.snarkRefresh:link:nth-child(2) {
+     background: url(images/button_forum.png) 7px center no-repeat, url(/themes/console/dark/images/header.png) center center repeat;
+     background: url(images/button_forum.png) 7px center no-repeat, linear-gradient(to bottom, #171 0%, #131 50%, #000 51%, #000 100%) !important;
+}
+
+.snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child {
+     background-image: url(images/button_snark_hover.png), url(../ubergine/images/snarknav_on.png) !important;
+     background-image: url(images/button_snark_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important;
+}
+
+.snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2) {
+     background-image: url(images/button_forum_hover.png), url(../ubergine/images/snarknav_on.png) !important;
+     background-image: url(images/button_forum_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important;
+}
+
+.snarkRefresh:active, .snarkRefresh:active:first-child {
+     background: #f50 url(images/button_snark_active.png) !important;
+     box-shadow: inset 3px 2px 3px #000 !important;
+     color: #fff !important;
+     border: 1px solid #fff;
+     box-shadow: none;
+     text-shadow: none;
+}
+
+.snarkRefresh:active:nth-child(2) {
+     background: #f50 url(images/button_forum_active.png) !important;
+}
+
+.snarkRefresh:hover, .snarkRefresh:focus {
+     color: #f50;
+     background: #000 !important;
+     border-radius: 0;
+     box-shadow: inset 0 0 0 1px #000 !important;
+     border: 1px solid #f60 !important;
+     opacity: 1;
+     background-image: url(images/button_tracker_hover.png), url(../ubergine/images/snarknav_on.png) !important;
+     background-image: url(images/button_tracker_hover.png), linear-gradient(to bottom, #510 0%, #530 50%, #000 51%, #000 100%) !important;
+}
+
+.snarkRefresh:active {
+     background: #f50 url(images/button_tracker_active.png) !important;
+     color: #fff;
+     border: 1px solid #fff;
+     box-shadow: inset 3px 3px 3px #000 !important;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important;
+     text-shadow: none;
+}
+
+.snarkRefresh:link:last-of-type {
+     border-radius: 2px !important;
+}
+
+.snarkRefresh:link[target="_blank"]:last-child {
+     border-radius: 0 2px 2px 0 !important;
+}
+
+.snarkRefresh:last-child {
+     border-radius: 0 2px 2px 0 !important;
+}
+
+.iframed .snarkRefresh:last-child[href="/i2psnark/"] {
+     margin-top: 0 !important;
+}
+
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited,
+.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child,
+.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) {
+     letter-spacing: 0.1em;
+     font-weight: bold;
+     font-size: 9pt;
+     text-decoration: none !important;
+     text-transform: uppercase !important;
+     background-size: 14px auto, 100% 100% !important;
+     background-position: 7px center !important;
+     background-repeat: no-repeat, repeat !important;
+     display: inline-block;
+}
+
+/* end topnav */
+
+/* screenlog */
+
+.snarkMessages {
+     font: normal 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     line-height: 120%;
+     text-align: left;
+     margin: 0;
+     padding: 3px 5px;
+     overflow: auto;
+     resize: none;
+     color: #69f;
+     height: 54px;
+     width: auto;
+     background: #000 url(images/hat.png) no-repeat scroll right bottom;
+     background: url(images/hat.png) no-repeat scroll right bottom, linear-gradient(to bottom, #010, #000);
+     border-bottom: 1px solid #494;
+     background-blend-mode: screen;
+}
+
+/* MS Edge fix */
+_:-ms-lang(x), .snarkMessages {
+     background: url(/themes/snark/ubergine/images/hat.png) no-repeat scroll right bottom, linear-gradient(to bottom, #010, #000);
+     background-size: auto 95%;
+}
+
+.snarkMessages a:link, .snarkMessages a:visited {
+     color: #2b2 !important;
+     font-weight: bold;
+}
+
+.snarkMessages a:hover {
+     color: #f70 !important;
+}
+
+.snarkMessages ul {
+     margin: -1px 0 2px 0;
+     padding: 0 0 0 14px;
+     list-style: none;
+}
+
+.snarkMessages li {
+     margin-left: -15px;
+}
+
+.snarkMessages li::before {
+     content: "";
+     display: inline-block;
+     background: url(images/bullet.png) left bottom no-repeat;
+     width: 14px;
+     height: 11px;
+     background-size: 9px 9px;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+.snarkMessages img {
+     float: right;
+     margin: -4px -5px 4px 4px;
+     opacity: 0.7;
+     border: 1px solid #494;
+     border-right: 0 none;
+     border-top: 0 none;
+     border-radius: 0 0 0 1px;
+     position: sticky;
+     top: -4px;
+     width: 9px;
+     padding: 2px 2px 2px 1px;
+}
+
+.snarkMessages img:hover {
+     opacity: 1;
+     border: 1px solid #494;
+     border-right: 0 none;
+     border-top: 0 none;
+}
+
+/* end screenlog */
+
+tt {
+     font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+}
+
+.logshim {
+     margin-top: -10px !important;
+}
+
+pre {
+     width: 100%;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     padding: 0;
+     text-align: left !important;
+     height: 8px;
+     color: #35f;
+     font-weight: bold !important;
+}
+
+table {
+     margin: 0 0 10px;
+     border: 0;
+     padding: 0;
+     border-spacing: 0;
+     border-collapse: collapse;
+     color: #323;
+     width: 100%;
+     opacity: 1 !important;
+}
+
+tr {
+     opacity: 1;
+}
+
+thead, tfoot {
+     background: #000;
+}
+
+thead {
+     border-bottom: 1px solid #101;
+}
+
+th {
+     padding: 3px 2px;
+     font-size: 8pt;
+     border-top: 1px solid #494;
+     border-bottom: 1px solid #494;
+     color: #ee9;
+     white-space: nowrap;
+     background: #000;
+     background: linear-gradient(to bottom, #010, #000);
+}
+
+thead th {
+     background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 50%, #000 100%) !important;
+}
+
+th:first-child {
+     text-align: left !important;
+     padding-left: 2px;
+}
+
+tfoot td:first-child {
+     text-align: left !important;
+     padding-left: 0;
+}
+
+th:first-child img {
+     margin: 1px -2px 3px 1px !important;
+}
+
+tfoot th {
+     padding-bottom: 4px !important;
+     white-space: normal;
+}
+
+tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img {
+     margin: 0 2px 3px 0 !important;
+     padding-right: 0 !important;
+}
+
+tfoot tr:nth-child(n+1) {
+     text-align: left;
+}
+
+.headerstatus {
+     text-align: center;
+}
+
+.headerpriority {
+     text-align: left;
+     padding-left: 10px;
+}
+
+.ParentDir {
+     background: #000;
+     font-size: 8pt;
+     border: 1px solid #050 !important;
+     border-left: 0 !important;
+     border-right: 0 !important;
+     text-align: left !important;
+     padding: 4px 0;
+}
+.ParentDir a {
+     font-weight: bold !important;
+     margin-left: -4px;
+}
+
+.priority {
+     font-size: 8pt;
+     vertical-align: middle;
+     max-width: 160px;
+     width: 1% !important;
+}
+
+.SnarkTorrents {
+     margin: 0;
+     border: 1px solid #101;
+     background: #000;
+}
+
+.SnarkTorrents th {
+     text-align: center;
+}
+
+.SnarkTorrents th:first-child {
+     text-align: center;
+     width: 30px;
+     padding-right: 0;
+}
+
+.SnarkTorrents th br {
+     display: none; /* kill double height button display */
+}
+
+.snarkTorrents tfoot th:nth-child(2) {
+     text-align: center;
+}
+
+.snarkTorrents tfoot th:nth-child(n+2) {
+     white-space: nowrap;
+}
+
+.snarkTorrents th:nth-child(4), .SnarkTorrents th:nth-child(5), .SnarkTorrents th:nth-child(6), .SnarkTorrents th:nth-child(7), .SnarkTorrents th:nth-child(8), .SnarkTorrents th:nth-child(9), .SnarkTorrents th:last-child {
+     text-align: center;
+}
+
+.snarkTorrents tfoot th {
+     background: #000;
+     font-weight: normal;
+}
+
+.snarkTorrents tfoot th::first-line {
+     font-weight: bold;
+}
+
+.snarkTorrents tfoot th:nth-child(3) {
+     text-align: center;
+}
+
+.snarkTorrents tfoot th {
+     vertical-align: top;
+}
+
+.snarkTorrents tfoot th br {
+     display: inline-block;
+     margin-left: 20px !important;
+}
+
+.SnarkTorrents td:nth-child(6), .SnarkTorrents td:nth-child(7), .SnarkTorrents td:nth-child(8) {
+     text-align: center !important;
+}
+
+table.SnarkTorrents {
+     margin-top: -1px !important;
+}
+
+.snarkTorrents th {
+     text-align: left;
+}
+
+.snarkTorrents td {
+     line-height: 110%;
+     text-align: left;
+     font-size: 8pt !important;
+}
+
+.snarkTorrents td:nth-child(1) {
+     width: 24px !important;
+}
+
+.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
+     width: 16px !important;
+     padding: 0 !important;
+     text-align: center !important;
+}
+
+.snarkTorrents td:nth-child(3) {
+     text-align: right !important;
+}
+
+.snarkTorrents td[colspan="10"]{
+     padding: 2px;
+     color: #cc7 !important;
+}
+
+.snarkTorrents img {
+     margin: 0 !important;
+     padding: 0 !important;
+}
+
+.snarkTorrents tt {
+     color: #000;
+     background: #990;
+     padding: 1px 2px;
+     border-radius: 2px;
+     margin:  1px 3px;
+     font-size: 8pt;
+     font-weight: bold;
+     display: inline-block;
+}
+
+.snarkTorrentInfo img {
+     max-height: 16px !important;
+     margin: 1px 0 1px 2px !important;
+     vertical-align: text-bottom;
+}
+
+.snarkTorrentInfo th {
+     padding: 4px !important;
+     text-align: left;
+     border-top: none;
+}
+
+.snarkTorrentInfo th:first-child {
+     background: url(images/file_sm.png) no-repeat 6px 7px, linear-gradient(to bottom, #010, #000);
+}
+
+.snarkTorrentInfo th:nth-child(2) {
+     padding: 8px 5px 8px 0 !important;
+     font-size: 9pt;
+}
+
+.snarkTorrentInfo td {
+     text-align: left !important;
+     vertical-align: middle !important;
+}
+
+.snarkTorrentInfo td:first-child {
+     width: 20px !important;
+     padding: 3px 4px 4px!important;
+}
+
+.snarkTorrentInfo input[type="submit"] {
+     min-width: 85px;
+}
+
+#torrentInfoControl, #setPriority {
+     border-top: 1px solid #494 !important;
+     background: none !important;
+}
+
+#torrentInfoControl td, #setPriority th {
+     text-align: right !important;
+     padding: 10px 8px !important;
+     background: none !important;
+     box-shadow: inset 0 0 0 1px #030;
+}
+
+table.SnarkTorrentInfo {
+     margin-bottom: 1px !important;
+     background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100;
+     border-bottom: 1px solid #494;
+}
+
+.snarkTorrentInfo tr:nth-child(even) {
+     background: #001000;
+     color: #bb7;
+     vertical-align: middle !important;
+}
+
+.snarkTorrentInfo tr:nth-child(odd) {
+     background: #001a00;
+     color: #bb7;
+}
+
+table.SnarkDirInfo {
+     margin-top: 10px !important;
+     margin-bottom: 0;
+     border-bottom: 1px solid #494;
+}
+
+.snarkDirInfo th img {
+     margin: 0 !important;
+     max-height: 20px !important;
+     padding-top: 3px !important;
+     padding-bottom: 3px !important;
+}
+
+.snarkDirInfo th:nth-child(2) {
+     text-align: center;
+     width: 32px;
+}
+
+.snarkDirInfo td {
+     min-width: 0 !important;
+}
+
+.snarkDirInfo th:first-child {
+     padding-left: 5px;
+}
+
+.snarkDirInfo td:first-child {
+     padding-left: 4px;
+     text-align: left;
+}
+
+.snarkDirInfo td:first-child img {
+     padding-right: 6px;
+}
+
+.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a {
+     display: inline-block;
+     width: 100%;
+     padding: 2px 0;
+}
+
+.snarkTorrents .snarkTorrentName {
+     padding-left: 2px;
+}
+
+.snarkDirInfo tr:last-child {
+     border-bottom: 1px solid #494 !important;
+}
+
+#setPriority, #torrentInfoControl {
+     background: url(/themes/console/dark/images/camotile2.png) repeat scroll center bottom #001100 !important;
+     border-bottom: 1px solid #494 !important;
+}
+
+.SnarkDirInfo img {
+     max-height: 16px;
+     max-width: 16px;
+}
+
+.snarkDirInfo thead img {
+     margin-right: 2px !important;
+     max-width: none;
+     max-height: none;
+     padding: 3px 2px !important;
+}
+
+.snarkDirInfo .headerpriority {
+     text-align: center !important;
+     vertical-align: middle;
+     padding-right: 10px;
+}
+
+td.subHeaderPriority, td.priority {
+     min-width: 36px !important;
+     width: 0;
+     text-align: center !important;
+     padding: 0 5px 0 0 !important;
+}
+
+td.subHeaderPriority {
+     background: #020;
+     font-weight: bold;
+     background: url("images/snarktopnav.png") repeat-x scroll center center #110011;
+     background-image: linear-gradient(to bottom, #030 0%, #020 50%, #000 51%, #000 100%);
+     text-align: center !important;
+     padding: 0 1px !important;
+     font-size: 7.5pt;
+}
+
+.headerpriority br {
+     display: none;
+}
+
+.headerpriority img {
+     padding: 4px !important;
+}
+
+.headerstatus {
+     min-width: 150px;
+     text-align: left;
+     padding-left: 18px;
+}
+
+td.priority:last-child {
+     padding-right: 10px !important;
+     text-align: right !important;
+     white-space: nowrap;
+}
+
+tr.priority:last-child {
+     border-bottom: none !important;
+}
+
+th.headerdownloaded {
+     padding-left: 25px !important;
+}
+
+.parentDir img {
+     padding-left: 3px;
+}
+
+td.snarkFileStatus {
+     text-align: left;
+     white-space: nowrap;
+}
+
+td.snarkFileIcon {
+     width: 16px;
+     padding: 0;
+}
+
+td.snarkFileStatusIcon {
+     width: 24px;
+     padding: 0 4px 0 0;
+     text-align: center;
+}
+
+td {
+     padding: 1px;
+     color: #ee9 !important;
+      opacity: 1;
+     font-size: 9pt;
+}
+
+.mainsection td {
+     color: #111;
+}
+
+td:first-child {
+     text-align: right;
+     font-size: 9pt;
+}
+
+.center {
+     text-align: center !important;
+}
+
+.snarkTorrentName {
+     padding: 0;
+     line-height: 90%;
+}
+
+.snarkTorrentName a, .snarkDirInfo td.snarkFileName a {
+     font-weight: bold !important;
+}
+
+.snarkTorrentAction {
+     padding: 1px 1px 1px 1px !important;
+     margin: 0 !important;
+     text-align: center !important;
+     width: 1% !important;
+     white-space: nowrap;
+}
+
+.snarkTorrentAction img {
+     margin: 0 2px !important;
+     opacity: 1;
+}
+
+.snarkTorrentAction img:hover {
+     box-shadow: 0 0 1px 1px #f90;
+     opacity: 1;
+}
+
+.snarkTorrentNoneLoaded {
+     background: #000;
+     font-size: 8.5pt;
+     font-weight: bold;
+     text-align: center !important;
+     color: #4f2 !important;
+     padding: 10px 5px;
+     border-bottom: 1px solid #494;
+}
+
+.snarkTorrentStatus {
+     padding: 2px 2px 2px 0;
+     line-height: 90%;
+     min-width: 0;
+}
+
+td.snarkTorrentStatus {
+     text-align: center !important;
+     padding: 3px 0;
+}
+
+td.snarkTorrentStatus:nth-child(2) {
+     text-align: left !important;
+}
+
+.snarkTorrentStatus b {
+    margin-right: 2px;
+}
+
+.snarkTorrentStatus:first-child {
+     text-align: left !important;
+     padding-left: 0;
+     min-width: 48px;
+     font-weight: bold;
+     color: #dd9 !important;
+     font-size: 8pt;
+     padding: 1px !important;
+}
+
+.snarkTorrentStatus:first-child img {
+     margin-right: 10px !important;
+     margin-left: 6px;
+}
+
+.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
+     font-size: 8pt;
+     padding: 0 3px;
+     line-height: 90%;
+     word-spacing: -0.05em;
+}
+
+.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
+     text-align: center !important;
+}
+
+.snarkTorrentDownloaded {
+     color: #ee9 !important;
+     white-space: nowrap;
+}
+
+td.snarkTorrentDownloaded {
+     font-weight: bold;
+}
+
+.snarkTorrentUploaded {
+     color: #bb7 !important;
+}
+
+.snarkTorrentRateUp {
+     color: #bb7 !important;
+}
+
+.snarkTorrentRateDown {
+     color: #bb7 !important;
+}
+
+.snarkTorrents img {
+     padding: 4px 3px !important;
+}
+
+.snarkTorrents th img {
+     padding: 1px !important;
+}
+
+.snarkTorrents tfoot th {
+     padding: 6px 4px !important;
+}
+
+.snarkTorrents tr:hover, .snarkDirInfo tr:hover {
+     background: #030 !important;
+     box-shadow: inset 0 0 1px 0 #494;
+}
+
+/* MS Edge fix */
+_:-ms-lang(x), .snarkTorrents tr, .snarkTorrents tr:hover, .snarkDirInfo tr:hover {
+     box-shadow: none !important;
+     border-top: 1px solid #000 !important;
+     border-bottom: 1px solid #000 !important;
+}
+
+.snarkTorrents tr:hover td, .snarkDirInfo tr:hover td {
+     color: #ee9 !important;
+}
+
+.snarkTorrents tr:hover a, .snarkDirInfo tr:hover a {
+     color: #9f9;
+}
+
+.snarkDirInfo tr:hover .snarkFileStatus img {
+     mix-blend-mode: normal;
+}
+
+.snarkTorrents a:hover, td[onclick^="document.location"]:hover a, .snarkDirInfo a:hover {
+     color: #f40 !important;
+}
+
+td[onclick^="document.location"]:hover {
+     cursor: pointer !important;
+}
+
+.snarkTorrentEven {
+     background: #001000;
+}
+
+.snarkTorrentEven:nth-child(even) {
+     background: #001000;
+}
+
+.snarkTorrentEven:nth-child(odd) {
+     background: #000800;
+}
+
+.snarkTorrentOdd, .SnarkTorrentEven {
+     border-bottom: 1px inset #000 !important;
+}
+
+_:-ms-lang(x), .snarkTorrentOdd, .SnarkTorrentEven {
+     border-bottom: 1px solid #000 !important;
+}
+
+.snarkTorrentOdd {
+     background: #000800 !important;
+}
+
+.snarkTorrentOdd:nth-child(even) {
+     background: #001000 !important;
+}
+
+.snarkTorrentOdd:nth-child(odd) {
+     background: #000800 !important;
+}
+
+.snarkTorrentOdd td, .snarkTorrentEven td {
+     border-top: none !important;
+     color: #bb7 !important;
+}
+
+.SnarkTorrentOdd tr:nth-child(odd) {
+     background: #001000;
+}
+
+.snarkFileName {
+     padding: 4px 0 !important;
+     text-align: left !important;
+}
+
+.snarkFileSize {
+     padding: 4px 2px;
+     font-weight: normal;
+     color: #bb7 !important;
+}
+
+.snarkFileStatus {
+     padding: 4px 5px 4px 15px;
+     text-align: center;
+     font-style: italic;
+     font-size: 9pt;
+     text-align: left;
+     min-width: 220px;
+}
+
+.snarkFileStatus img {
+     mix-blend-mode: luminosity;
+}
+
+.snarkFileStatus img[src*="clock"] {
+     mix-blend-mode: normal !important;
+}
+
+.snarkTorrentETA {
+     font-style: italic;
+     color: #dd7 !important;
+     padding-right: 2px;
+}
+
+/*
+div.percentBarOuter {
+     background: #000 !important;
+     border: 1px solid #9f9;
+     border-bottom: 1px solid #474;
+     border-right: 1px solid #474;
+     border-radius: 0;
+     float: left;
+     box-shadow: none;
+     opacity: 1;
+}
+
+div.percentBarInner {
+     border: none;
+     height: 14px;
+     background: #1c943a;
+     background: linear-gradient(to bottom,  #1c943a 0%, #092f10 50%, #0d2707 50%, #091b05 50%, #091503 100%);
+}
+
+div.percentBarInner.percentBarComplete {
+     background: #001100;
+     background: linear-gradient(to bottom,  #001100 0%, #002200 52%, #000000 52%, #001100 100%);
+}
+
+.percentBarText, .percentBarOuter {
+     text-align: center;
+     height: 14px;
+     top: 0;
+     width: 80px;
+}
+
+.percentBarText{
+     text-align: center;
+     font-weight: bold;
+     line-height: 140%;
+     text-shadow: 0 1px 1px #000;
+}
+
+.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter  {
+     width: 110px !important;
+     word-spacing: -0.2em;
+     font-size: 7.5pt;
+}
+*/
+
+.choked {
+     color: #f00000 !important;
+}
+
+.unchoked {
+     color: #00f000 !important;
+}
+
+.thumb {
+     max-width: 16px;
+     transition: ease all 0.3s 0s;
+}
+
+.thumb:hover {
+     max-height: 80px;
+     max-width: 80px;
+     transition: ease all 0.3s 0s;
+     margin: -5px 0 -5px -4px;
+     filter: none !important;
+}
+
+.snarkNewTorrent {
+     font-size: 9pt;
+}
+
+.snarkAddInfo {
+     font-size: 9pt;
+     line-height: 135% !important;
+     font-weight: normal;
+     background: url(images/infocircle.png) left center no-repeat;
+     background-size: 14px auto;
+     padding-left: 20px;
+}
+
+.snarkConfigTitle, label.toggleview {
+     font-size: 11pt;
+     font-weight: bold;
+     padding: 3px 22px 3px 20px;
+     margin: 5px 0 10px 0 !important;
+     letter-spacing: 0.2em;
+     border: 1px solid #494;
+     border-radius: 0;
+     border-top: none;
+     background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important;
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+     font-variant: small-caps !important;
+     filter: drop-shadow(0 2px 1px #000);
+     display: inline-block;
+     margin: 0 0 -3px !important;
+     min-width: 220px;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.snarkConfigTitle, label.toggleview {
+     font-size: 13pt !important;
+}
+}
+
+.snarkConfigTitle {
+     margin-bottom: -2px !important;
+}
+
+.snarkConfigTitle a, label.toggleview {
+     text-shadow: 0 0 1px #000 !important;
+}
+
+.snarkConfigTitle a {
+     display: inline-block;
+     width: 100%;
+}
+
+.snarkConfigTitle:hover, .toggleview:hover {
+     background: #000 !important;
+     background: linear-gradient(to bottom, #001000 50%, #000 50%) !important;
+}
+
+.snarkConfigTitle:hover a {
+     color: #f60 !important;
+}
+
+.snarkConfigTitle:active, .toggleview:active {
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px 1px #000;
+}
+
+.snarkConfigTitle img, .toggleview img {
+     margin-right: -2px;
+     margin-bottom: 2px;
+     vertical-align: middle;
+}
+
+label.toggleview:active, .snarkConfigTitle a:active {
+     color: #f30 !important;
+}
+
+label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:active img {
+     transform: rotate(90deg);
+     transition: ease transform 0.3s 0s;
+}
+
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     margin: -1px -1px -14px !important;
+     display: block;
+     text-align: left;
+     background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important;
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+     border-top: 1px solid #494;
+     padding: 8px;
+     text-transform: uppercase;
+     font-variant: normal;
+     font-size: 10.5pt !important;
+     filter: none;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.iframed .configsectionpanel .snarkConfigTitle {
+     margin: -1px 0 -14px !important;
+     border-left: none !important;
+     border-right: none !important;
+}
+
+.snarkConfig {
+     font-size: 10pt;
+     width: 100%;
+}
+
+.snarkConfig i {
+     padding-left: 5px;
+}
+
+form {
+     margin-bottom: 0;
+}
+
+p {
+     line-height: 150%;
+}
+
+hr {
+     color: #444;
+     background: #444;
+     height: 1px;
+     border: 0 solid #444;
+     width: 0%;
+     margin: 5px 0 7px 0;
+     text-align: center;
+}
+
+hr.debug {
+     width: 100%;
+     background: #131;
+     background: linear-gradient(to right, #131 50%, #000700);
+}
+
+hr.debug + b {
+     color: #ff7;
+     text-transform: uppercase;
+}
+
+hr.debug:nth-child(n+7) {
+     margin-top: -11px;
+     margin-bottom: 2px;
+     opacity: 0.5;
+}
+
+hr.debug:last-child {
+     background: #000;
+     margin-bottom: -5px;
+}
+
+a:link {
+     color: #7c7;
+     text-decoration: none;
+     word-wrap: break-word;
+     border-radius: 0;
+     outline: none;
+}
+
+a:visited {
+     color: #393;
+     text-decoration: none;
+}
+
+a:hover, a:focus {
+     color: #f60 !important;
+}
+
+a:active, .snarkTorrents td a:active {
+     color: #f90 !important;
+}
+
+input {
+     text-align: left;
+     padding: 3px 4px !important;
+     border-radius: 2px;
+     border: 1px solid #494;
+     background: #000;
+     color: #494;
+     margin: 2px 4px 2px 0;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     cursor: pointer;
+}
+
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
+     border: none;
+     outline: none;
+}
+
+input.disabled, a.controld {
+     opacity: 0.5 !important;
+     cursor: not-allowed !important;
+}
+
+#setPriority input.disabled, #setPriority a.controld {
+     display: none;
+}
+
+.addtorrentsection input, .newtorrentsection input {
+     margin-top: 0 !important;
+     margin-bottom: 5px;
+}
+
+input.r {
+     text-align: right;
+     background: #000;
+     border: 1px solid #494;
+}
+
+input[type=submit], input[type=submit]:visited, input.disabled:hover {
+     color: #494;
+     background: #000;
+     border: 1px outset #191;
+     padding: 5px 10px !important;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     min-width: 95px;
+     text-align: center;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus {
+     border: 1px solid #f60;
+     background-color: #000;
+     color: #f60 !important;
+     box-shadow: 0 1px 1px 0 #ee9 inset;
+}
+
+input[type=submit]:active, a.control:active {
+     border: 1px solid #f60;
+     background: #f60;
+     color: #ee9 !important;
+     text-shadow: none !important;
+     box-shadow: inset 3px 3px 3px #000;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000;
+}
+
+input.disabled, input.disabled:hover, input.disabled:focus, input.disabled:active {
+     border: 1px outset #191 !important;
+     box-shadow: none !important;
+     color: #494 !important;
+     background: #000 !important;
+}
+
+
+input[type=image], thead img {
+     padding: 0 !important;
+     border-radius: 3px;
+     border: 0 none transparent !important;
+     margin: 0 2px;
+     opacity: 1;
+}
+
+input[type="image"], a img {
+     filter: drop-shadow(0 0 1px #000);
+}
+
+input[type="image"]:hover, a img:hover, input[type="image"]:focus, a:focus img {
+     filter: saturate(200%) drop-shadow(0 0 1px #f90) !important;
+     outline: none;
+}
+
+.snarkTorrents th:last-child, .snarkTorrents td:last-child {
+     white-space: nowrap;
+}
+
+.snarkTorrents td[colspan="10"] {
+     white-space: normal;
+}
+
+.snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] {
+     border: 1px solid #000 !important;
+     border: 1px solid #151 !important;
+     margin: 0 2px !important;
+     padding: 4px !important;
+     background: #030;
+     background: linear-gradient(to bottom, #030 0%, #030 50%, #010 50%, #010 100%);
+     box-shadow: inset 0 0 0 1px #000;
+     border-radius: 2px;
+     height: 9px;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+.snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrents td:last-child input[type="image"]:hover,
+.snarkTorrents th:last-child input[type="image"]:focus, .snarkTorrents td:last-child input[type="image"]:focus { /* borders on hover only for torrent control buttons, otherwise drop-shadow */
+     border: 1px solid #f60 !important;
+}
+
+.snarkTorrents th:last-child input[type="image"]:active, .snarkTorrents td:last-child input[type="image"]:active {
+     box-shadow: inset 3px 3px 3px #000;
+     background-blend-mode: luminosity;
+     transform: scale(0.9);
+}
+
+input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] {
+     color: #bb7;
+     padding: 4px 5px !important;
+     background: #000;
+     background: linear-gradient(to bottom, #000 0%, #010 100%);
+     box-shadow: inset 0 0 3px 3px #000;
+     outline: none;
+}
+
+input[type=text]:hover, input.r:hover {
+     cursor: text;
+}
+
+input[type=text]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"]:focus, input[name="nofilter_dataDir"]:focus {
+     background: #000;
+     color: #ee9;
+     filter: drop-shadow(0 0 1px #880);
+     transition: ease filter 0.3s 0s;
+}
+
+textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] {
+     cursor: text;
+     margin: 3px 0;
+     height: 24px;
+     padding: 3px;
+     min-width: 500px;
+     width: 70%;
+     resize: none;
+     overflow: hidden;
+}
+
+input[name="nofilter_dataDir"] {
+     height: auto;
+}
+
+.configsectionpanel input[type=text], input.r, textarea[name="i2cpOpts"], input[name="nofilter_dataDir"], #configs select {
+     margin-top: 4px;
+     margin-bottom: 4px;
+}
+
+thead img, thead img:hover {
+     opacity: 0.8;
+     max-height: 20px !important;
+}
+
+input[type=image], th a:link img, th a:visited img {
+     opacity: 1;
+}
+
+input[type=text], input.r {
+     min-width: 100px;
+}
+
+input[type=radio] {
+     padding: 2px;
+     margin: 0 3px 0 8px;
+     vertical-align: bottom;
+     background: none;
+}
+
+input[type="checkbox"], input[type="radio"], input[type="checkbox"]:disabled:hover, input[type="radio"]:disabled:hover {
+     background: none;
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%); /* colorize radios and checkboxes */
+     min-width: 16px;
+     min-height: 16px;
+     outline: none;
+}
+
+input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus {
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) drop-shadow(0 0 3px #f60);
+     box-shadow: inset 0 0 2px 1px #f60;
+}
+
+label {
+     cursor: pointer;
+}
+
+input.default {
+     width: 1px;
+     height: 1px;
+     visibility: hidden;
+}
+
+input[size="85"] {
+     width: 550px;
+     width: calc(100% - 170px);
+}
+
+.addtorrentsection input, .newtorrentsection input {
+     margin-left: 5px !important;
+}
+
+select {
+     background: #000 url(images/dropdown.png) right center no-repeat !important;
+     background: url(images/dropdown.png) right center no-repeat, linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important;
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     color: #494;
+     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-weight: bold;
+     padding: 4px 16px 4px 4px;
+     border-radius: 2px;
+     border: 1px outset #191;
+     margin: 2px 4px 2px 0;
+     min-width: 100px;
+     cursor: pointer;
+     text-overflow: ellipsis;
+     outline: none;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+select {
+     padding: 6px 16px 6px 6px !important;
+}
+}
+
+select option { /* dropdown menu reverts to normal font-weight */
+     font-weight: normal;
+     font-size: 9.5pt;
+}
+
+select option:hover, select option:checked {
+     box-shadow: inset 0 0 20px 20px #f60;
+}
+
+select:hover, select:focus {
+     background: #000 !important;
+     color: #f60 !important;
+     border: 1px solid #f60;
+}
+
+select:hover {
+     box-shadow: inset 0 1px 1px 0 #ee9;
+}
+
+select:hover, select:focus, select:active {
+     background: #000 url(images/dropdown_hover.png) right center no-repeat !important;
+}
+
+select::-ms-expand {
+     display: none;
+}
+
+textarea {
+     background: #000;
+     color: #bb7;
+     font-weight: bold;
+     padding: 1px 4px 0;
+     border-radius: 2px;
+     border: 1px solid #494;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+}
+
+textarea:focus {
+     color: #ee9 !important;
+}
+
+input[type="submit"], input[type="reset"], select, button, a.control, a.controld {
+     border: 1px solid #8b8;
+     border-bottom: 1px solid #171;
+     border-right: 1px solid #171;
+     background: linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%);
+}
+
+.script {
+     display: inline-block;
+     vertical-align: middle;
+     margin-top: -2px;
+}
+
+a.control, a.controld {
+     padding: 3px 8px 2px 4px;
+     border-radius: 2px;
+     text-align: left;
+     margin: 2px 4px 2px 0;
+     font-weight: bold;
+     display: inline-block;
+     color: #494 !important;
+}
+
+a.control img, a.controld img, a.control:hover img, a.control img:hover {
+     width: 14px;
+     height: 14px;
+     margin: 0;
+     padding: 0;
+     vertical-align: middle;
+     filter: none !important;
+}
+
+a.control:hover img {
+     filter: sepia(100%) hue-rotate(10deg) !important;
+}
+
+img {
+     border: none;
+     margin: 0 3px 1px 3px;
+     vertical-align: middle;
+     opacity: 1.0;
+     line-height: 100%;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+img:hover {
+     border: none;
+     opacity: 1;
+     line-height: 100%;
+}
+
+img[src$="magnet.png"] {
+     transform: rotate(-90deg);
+}
+
+#pagenav img.disable, #pagenav img.disable:hover {
+     opacity: 0.3;
+     margin: 0 2px !important;
+}
+
+#pagenav img {
+     height: 10px;
+     border: 1px solid #151 !important;
+     margin: 0 0 0 2px !important;
+     padding: 4px 5px !important;
+     background: #030;
+     background: linear-gradient(to bottom, #030 0%, #030 50%, #010 50%, #010 100%);
+     box-shadow: inset 0 0 0 1px #000;
+     border-radius: 2px;
+}
+
+#pagenav img:active {
+     box-shadow: inset 3px 3px 3px #000;
+}
+
+#pagenav {
+     font-weight: bold !important;
+}
+
+.newtorrentsection td:first-child, .addtorrentsection td:first-child {
+     font-weight: bold;
+     padding-right: 5px;
+     padding-left: 5px;
+}
+
+.newtorrentsection td:first-child, .addtorrentsection td:first-child {
+     width: 120px;
+}
+
+table#trackerselect {
+     border: 1px solid #131;
+     width: 100% !important;
+     width: calc(100% - 170px) !important;
+     margin: 2px 5px 0 5px;
+}
+
+#trackerselect tr:nth-child(even) {
+     background: #000800 !important;
+}
+
+#trackerselect tr:nth-child(odd) {
+     background: #001000;
+     border-bottom: 1px inset #000;
+}
+
+_:-ms-lang(x), #trackerselect tr:nth-child(odd) {
+     border-bottom: 1px solid #000;
+}
+
+_:-ms-lang(x), #trackerselect tr:last-child {
+     border-bottom: 1px solid #131;
+}
+
+#trackerselect tr:first-child {
+     background: linear-gradient(to bottom, #010, #000);
+     border-bottom: 1px solid #131;
+     font-weight: bold;
+}
+
+#trackerselect tr:first-child td {
+     padding: 3px 5px 3px 20px;
+}
+
+#trackerselect td {
+     padding: 5px 5px 5px 20px;
+}
+
+#trackerselect td:first-child {
+     width: 20%;
+     font-weight: normal;
+}
+
+#trackerselect td:nth-child(4) {
+     width: 70%;
+}
+
+#trackerselect input {
+     margin: 3px !important;
+}
+
+#trackerselect a:not(old) {
+     display: inline-block;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+}
+
+.configsectionpanel td:first-child {
+     padding-right: 10px !important;
+     padding-left: 5px !important;
+     font-weight: bold;
+}
+
+.trackerconfig th {
+     min-width: 50px;
+}
+
+.trackerconfig th, .trackerselect th {
+     padding-top: 7px;
+     padding-bottom: 7px;
+}
+
+.trackerconfig th:first-child {
+     background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #010, #000);
+}
+
+.trackerselect tr:first-child td, .addtorrentsection tr:first-child td {
+     white-space: nowrap;
+}
+
+.trackerconfig th:last-child, .trackerconfig td:last-child {
+     padding-left: 10px !important;
+}
+
+.trackerconfig tr:nth-child(odd), .snarkConfig tr:nth-child(odd) {
+     background: #000900;
+}
+
+.trackerconfig tr:last-child {
+     border: 1px solid #494;
+     background: #000;
+     background: linear-gradient(to bottom, #001100, #000000) repeat scroll 0 0 #000000;
+}
+
+.snarkTorrentNoneLoaded td {
+     background: #000;
+     border-left: 1px solid #040;
+     border-right: 1px solid #040;
+     color: #ee9 !important;
+}
+
+.snarkNewTorrent td {
+     padding: 2px 3px;
+}
+
+.snarkNewTorrent td:nth-child(2), .snarkNewTorrent td:nth-child(3) {
+     font-weight: bold;
+     padding-right: 5px;
+}
+
+.snarkNewTorrent td[rowspan="0"]{
+     width: 50%;
+}
+
+.snarkConfig tr:last-child {
+     border: 1px solid #494;
+}
+
+table.trackerconfig td:first-child {
+     padding: 5px 2px;
+     width: 24px !important;
+}
+
+.trackerconfig tr:nth-child(even), .snarkConfig tr:nth-child(even) {
+     background: #010;
+}
+
+.trackerconfig input {
+     margin: 3px 0 !important;
+}
+
+.optbox[name="add_tracker_type"] {
+     cursor: pointer; /* active cursor only for clickable radio icons */
+}
+
+.snarkConfig input[type=submit] {
+     margin: 3px 2px 3px 5px !important;
+     text-align: center;
+     min-width: 100px;
+}
+
+#configs input[type=submit] {
+     margin-right: 0 !important;
+}
+
+.trackerconfig td, .snarkConfig td {
+     padding: 5px 1px !important;
+}
+
+.trackerconfig {
+     text-align: left !important;
+}
+
+.snarkConfig table tr:first-child {
+     border-top: 1px solid #494 !important;
+}
+
+.trackerconfig th:nth-child(n+4), .trackerconfig th:nth-child(n+5), .trackerconfig td:nth-child(n+4), .trackerconfig td:nth-child(n+5) {
+     text-align: center !important;
+}
+
+.trackerconfig th, .trackerconfig td, .trackerconfig th:last-child, .trackerconfig td:last-child {
+     text-align: left !important;
+}
+
+.trackerconfig td:first-child {
+     text-align: right !important;
+}
+
+#configs td:first-child {
+     padding-left: 15px !important;
+     line-height: 80%;
+}
+
+#configs td:first-child, .trackerconfig td:first-child {
+     padding-left: 10px !important;
+}
+
+#configs .spacer, .trackerconfig .spacer {
+     display: none;
+}
+
+.configsectionpanel td[colspan="5"] {
+     border-top: 1px solid #494;
+}
+
+.snarkConfig tr:nth-last-child(2) {
+     background: none;
+}
+
+.snarkConfig tr:nth-last-child(2) td, .configsectionpanel td[colspan="5"] {
+     text-align: right !important;
+     padding: 11px 15px 0 !important;
+     border-top: 1px solid #494;
+}
+
+.snarkConfig tr {
+     border: none !important;
+}
+
+.trackerconfig table {
+     border: none !important;
+}
+
+.section, .mainsection {
+     margin: 0;
+     padding: 0;
+     border: 1px solid #494;
+     border-bottom: none;
+     color: #ee9;
+     box-shadow: inset 0 0 1px 0 #212;
+     word-wrap: break-word;
+     text-align: center;
+     background: #000;
+     opacity: 1 !important;
+}
+
+.newtorrentsection {
+     margin: -1px 0 10px;
+     padding: 0 10px 0 10px;
+     border: 1px solid #494;
+     text-align: center;
+     color: #ee9;
+     box-shadow: inset 0 0 5px 2px #000;
+     word-wrap: break-word;
+     background: #000 url(images/snark_create.png) no-repeat scroll right center;
+     background: url(images/snark_create.png) center right no-repeat, linear-gradient(to bottom, rgba(0,40,0,0.3) 0%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
+     background-size: 80px 80px, 100% 100%, 175px 175px;
+}
+
+.addtorrentsection {
+     margin: -1px 0 0;
+     padding: 0 10px;
+     border: 1px solid #494;
+     text-align: center;
+     color: #ee9;
+     box-shadow: inset 0 0 5px 2px #000;
+     word-wrap: break-word;
+     background: #000 url(images/snark_add.png) no-repeat scroll right center;
+     background: url(images/snark_add.png) 99% center no-repeat, linear-gradient(to bottom, rgba(0,40,0,0.3) 0%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
+     background-size: 61px 61px, 100% 100%, 175px 175px;
+}
+
+.configsection {
+     margin: -11px 0 0;
+     padding: 0 10px 12px 10px;
+     border: 1px solid #494;
+     color: #ee9;
+     box-shadow: inset 0 0 5px 2px #000;
+     word-wrap: break-word;
+     text-align: center;
+     background: #000;
+     font-weight: bold;
+     background: url(images/configuration.png) 102% 30% no-repeat, linear-gradient(to bottom, rgba(0,40,0,0.3) 0%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
+     background-size: 84px 82px, 100% 100%, 175px 175px;
+}
+
+.configsectionpanel {
+     margin: -1px 0 0 0;
+     padding: 0;
+     border: 1px solid #494;
+     color: #ee9;
+     box-shadow: inset 0 0 5px 2px #000;
+     word-wrap: break-word;
+     text-align: center;
+     background: #000 url(images/configuration.png) no-repeat scroll right center;
+     font-weight: bold;
+     background: linear-gradient(to bottom, #000 10%, rgba(0,40,0,0.3) 10%, rgba(0,15,0,0.5) 100%), url(/themes/console/dark/images/camotile2.png) top left repeat;
+}
+
+.mainsection + form > .configsectionpanel:first-child {
+     margin-top: 9px;
+}
+
+.newtorrentsection form, .configsection form, .addtorrentsection form {
+     color: #ee9 !important;
+}
+
+.configsection table {
+     color: #ffb;
+     opacity: 1;
+}
+
+.configsection a {
+     text-shadow: 0 1px 1px #000;
+     font-weight: bold;
+}
+
+.configsection a:hover {
+     color: #f60;
+     text-decoration: none;
+}
+
+code {
+     font-size: 8.5pt;
+     color: #ff6;
+     padding: 0 2px;
+     font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+}
+
+.snarkAddInfo code {
+     -moz-user-select: all;
+     -webkit-user-select: all;
+     user-select: all;
+}
+
+.iframed .snarknavbar, .iframed .mainsection, .iframed .addtorrentsection,
+.iframed .newtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
+      border-left: none !important;
+      border-right: none !important;
+      border-radius: 0;
+}
+
+.routerdown {
+     color: #ee9;
+     border-bottom: 1px solid #494;
+     padding: 10px;
+}
+
+input.trackername {
+     width: 100px;
+}
+
+input.trackerhome {
+     width: 210px;
+}
+
+input.trackerannounce {
+     width: 210px;
+}
+
+/* toggle create/add panel view */
+
+input.toggle_input { /* hide checkbox and use label as faux panel heading */
+     display: none !important;
+}
+
+label.toggleview:hover {
+     color: #f60;
+     cursor: pointer;
+}
+
+input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: none;
+}
+
+input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent:checked + label + hr + table {
+     display: table;
+}
+
+/* enable to display panels by default in webkit */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+}
+*/
+
+/* display by default in iframe to avoid overflow issue */
+
+.iframed input#toggle_addtorrent:not(checked) + label + hr + table, .iframed input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+.iframed input#toggle_addtorrent:checked + label + hr + table, .iframed input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+
+label.toggleview, .snarkConfigTitle a:visited {
+     color: #7c7;
+}
+
+
+.peerinfo td:first-child {
+     background: url(images/peer.png) center center no-repeat;
+     background-size: 14px 14px;
+}
+
+.peerinfo td, .debuginfo td {
+     padding-top: 5px;
+     padding-bottom: 5px;
+}
+
+/* debug */
+
+.debuginfo td:first-child {
+     background: url(images/debuginfo.png) center center no-repeat;
+     background-size: 14px 14px;
+     background-blend-mode: luminosity;
+}
+
+.debuginfo td:nth-child(2) {
+     padding-left: 0;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+     margin-left: 1px;
+}
+
+.debugConnection {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #ee0;
+     line-height: 130%;
+     margin-right: 5px;
+     margin-left: 2px;
+}
+
+.from, .to {
+     font-family: sans-serif;
+     font-size: 12pt;
+     font-weight: bold;
+     vertical-align: middle;
+     line-height: 50%;
+     text-shadow: 0 0 1px #000;
+}
+
+.debugConnStat {
+     margin-right: 3px;
+     white-space: nowrap;
+}
+
+.debugConnStat, .debugRequests {
+     font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     color: #ee0;
+}
+
+.debugConnStat b {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     color: #cc7;
+}
+
+/* end debug */
+
+#totals {
+     display: inline-block;
+     margin-left: 3px;
+     font-weight: bold;
+}
+
+.priorityHigh, .priorityNormal, .prioritySkip {
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+     font-size: 0;
+     overflow: hidden;
+     text-align: left;
+}
+
+.priorityHigh {
+     background: url(/i2psnark/.resources/icons/clock_red.png) left 28px center no-repeat;
+}
+
+.priorityNormal {
+     background: url(/i2psnark/.resources/icons/clock.png) left 28px  center no-repeat;
+}
+
+.prioritySkip {
+     background: url(/i2psnark/.resources/icons/cancel.png) left 26px center no-repeat;
+}
+
+/* configs */
+
+#bwHelp i {
+     display: inline-block;
+     vertical-align: middle;
+}
+
+
+#bwHelp a {
+     font-style: normal;
+     font-weight: bold;
+}
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 14px auto;
+     padding-left: 24px !important;
+     width: 90%;
+     line-height: 100%;
+}
+
+/* end configs */
+
+#torrentInfoStats td {
+     text-align: left !important;
+     padding: 5px 2px !important;
+}
+
+#torrentInfoStats img {
+     margin: 0 3px 0 5px !important;
+}
+
+#torrentInfoStats span {
+     white-space: nowrap;
+     display: inline-block;
+     margin-right: 3px;
+}
+
+.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:focus {
+     opacity: 0.5;
+     cursor: not-allowed;
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important;
+}
+
+.snarkDirInfo tr:first-child th img:first-child {
+     margin-right: 5px;
+}
+
+#filecheck {
+     display: inline-block;
+     margin: 5px 0;
+     background: url(images/progressbar.gif) left center no-repeat;
+     padding-left: 22px;
+}
+
+#filecheck a {
+     margin: 8px;
+}
+
+td#bwHelp a {
+     white-space: nowrap;
+}
+
+#configs td:first-child::after {
+   content: "";
+   display: inline-block;
+   vertical-align: middle;
+}
+
+/* Resource Errors */
+
+.resourceError {
+     margin-bottom: 0;
+     border: none;
+}
+
+.resourceError th {
+     background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #010, #000);
+     background-size: 24px auto, 100% 100%;
+     padding: 10px 10px 10px 40px;
+     font-size: 10pt !important;
+     border: none;
+     border-bottom: 1px solid #494;
+}
+
+.resourceError td {
+     padding: 10px;
+     border: none;
+     font-size: 10pt;
+}
+
+.resourceError tr:nth-child(odd) {
+     background: #010;
+}
+
+.resourceError tr:nth-child(even) {
+     background: #000900;
+}
+
+#DoesNotExist {
+     margin-top: 10px;
+     border: none;
+     border-bottom: 1px solid #494;
+}
+
+#DoesNotExist th {
+     border-top: 1px solid #494;
+}
+
+#NotFound {
+     border-bottom: 1px solid #494;
+}
+
+/* end Resource Errors */
+
+/* MS Edge fix */
+
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+_:-ms-lang(x), input[type="radio"], input[type="checkbox"] {
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important; /* colorize radios and checkboxes */
+}
+
+_:-ms-lang(x), input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="radio"]:hover, input[type="radio"]:focus {
+     box-shadow: none !important;
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) drop-shadow(0 0 3px #f60) !important;
+}
+
+input[type="radio"][disabled]:hover, input[type="radio"][disabled]:focus {
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) !important;
+}
+
+_:-ms-lang(x), .snarkTorrents tr:last-child {
+     border-top: 1px solid #494 !important;
+     border-bottom: 1px solid #494 !important;
+}
+
+/* end Edge fix */
+
+/* custom radios/checkboxes for chrome/blink  */
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
+input[type="checkbox"], input[type="checkbox"]:checked, input[type="checkbox"][disabled], input[type="checkbox"][disabled]:checked {
+     background: linear-gradient(to bottom, #010, #000);
+     width: 19px;
+     height: 19px;
+     border-radius: 2px;
+     -webkit-appearance: inherit;
+     border: 1px solid #494;
+     position: relative;
+     box-sizing: border-box;
+     filter: none !important;
+}
+
+input[type="checkbox"]:checked::before {
+     position: absolute;
+     top: 1px;
+     left: 1px;
+     content: "\2714";
+     border-radius: 1px;
+     font-size: 14pt;
+     color: #69EF68;
+     line-height: 80%;
+     font-family: sans-serif;
+     overflow: hidden;
+     width: 16px;
+     height: 16px;
+}
+
+input[type="radio"], input[type="radio"]:checked, input[type="radio"][disabled], input[type="radio"][disabled]:checked {
+     background: linear-gradient(to bottom, #010, #000);
+     width: 19px;
+     height: 19px;
+     box-shadow: inset 0 0 2px green;
+     border-radius: 50%;
+     -webkit-appearance: none;
+     border: 1px solid #494;
+     position: relative;
+     box-sizing: border-box;
+     filter: none !important;
+}
+
+input[type="radio"]:checked::before {
+     content: "";
+     position: absolute;
+     border-radius: 50%;
+     left: 25%;
+     top: 25%;
+     width: 9px;
+     height: 9px;
+     background: #69EF68;
+}
+
+input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus {
+     background: #000;
+     filter: none !important;
+     box-shadow: 0 0 1px 1px #f60;
+}
+
+input[type="checkbox"][disabled], input[type="radio"][disabled], input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover,
+input[type="checkbox"][disabled]:checked, input[type="radio"][disabled]:checked, input[type="checkbox"][disabled]:checked:hover, input[type="radio"][disabled]:checked:hover,
+.knownTracker input[type="radio"]:hover, .knownTracker input[type="radio"]:checked:hover, .knownTracker input[type="radio"][disabled]:hover, .knownTracker input[type="radio"][disabled]:checked:hover {
+     filter: none !important;
+     box-shadow: none !important;
+     opacity: 0.5;
+}
+
+.priority input[type="radio"] {
+     transform: scale(0.8);
+}
+}
+
+/* end custom radios/checkboxes */
+
+/* responsive layout */
+
+@media screen and (max-width: 950px) {
+.snarkTorrents td:nth-child(2) {
+     white-space: nowrap;
+}
+.snarkTorrents td[colspan="10"] {
+     white-space: normal;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+
+.snarkTorrentStatus, .snarkTorrentStatus a {
+     font-weight: bold !important;
+}
+
+.snarkTorrents td:first-child img {
+     height: 16px;
+     width: auto;
+}
+}
+
+@media screen and (max-width: 1100px) {
+#configs td:first-child {
+     min-width: 200px !important;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
+     font-size: 11pt !important;
+}
+
+.dirInfoComplete {
+     display: none;
+}
+
+#configs td:first-child::after {
+   min-height: 24px;
+}
+
+td#bwHelp a {
+     margin-left: 2px;
+}
+
+.knownTracker a, #trackerselect a {
+     display: inline-block;
+     max-width: 210px;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+}
+
+#trackerselect a {
+     max-width: 300px;
+}
+}
+
+@media screen and (min-width: 1100px) {
+body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[type="submit"], input[type="reset"], select, button, a {
+     font-size: 9pt !important;
+}
+
+.snarkTorrents td {
+     padding-top: 3px !important;
+     padding-bottom: 3px !important;
+}
+
+.snarkTorrentInfo td, .snarkDirInfo td, .snarkTorrents .peerinfo td {
+     padding-top: 6px !important;
+     padding-bottom: 6px !important;
+}
+
+#configs td:first-child {
+     min-width: 220px !important;
+}
+
+.snarkTorrentStatus b {
+    margin-right: 3px;
+}
+}
+
+@media screen and (min-width: 1200px) {
+.snarkConfigtitle, .snarkConfigTitle a, label.toggleview {
+     font-size: 12pt !important;
+}
+
+.percentDownloaded {
+     pointer-events: none; /* hide tooltip */
+}
+
+#configs td:first-child::after {
+   min-height: 26px;
+}
+
+td#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+     margin-left: 4px;
+}
+
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     font-size: 11pt !important;
+}
+}
+
+@media screen and (min-width: 1400px) {
+body, .snarkTorrents td, .snarkAddInfo, th, td,  code, textarea, input, input[type="submit"], input[type="reset"], select, button, a {
+     font-size: 10pt !important;
+}
+
+.snarkRefresh:link {
+     font-size: 11pt !important;
+}
+
+.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
+     font-size: 12pt !important;
+}
+
+.snarkConfigTitle, label.toggleview {
+     min-width: 240px !important;
+     padding-top: 4px;
+}
+
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited,
+.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child,
+.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) {
+     background-size: 16px auto, 100% 100% !important;
+     padding-left: 24px !important;
+}
+
+.snarkRefresh:link:first-child {
+     padding-left: 25px !important;
+}
+
+tt, .snarkTorrents tt, .snarkMessages, .snarkMessages a {
+     font-size: 9pt !important;
+}
+
+textarea[name="i2cpOpts"] {
+     height: 26px;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-weight: bold;
+}
+
+.snarkTorrents th:last-child input[type="image"], .snarkTorrents td:last-child input[type="image"] {
+     height: 11px;
+}
+
+.snarkTorrentDownloaded {
+     white-space: nowrap;
+     padding: 0 8px;
+}
+
+.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
+     width: 18px !important;
+}
+
+.snarkTorrents .snarkTorrentName {
+     padding-left: 5px;
+}
+
+.debugConnection {
+     line-height: 150%;
+}
+
+.page {
+     padding: 10px;
+     border: 1px solid #494;
+     background: #001900;
+     background: linear-gradient(to bottom, #001900, #010);
+     box-shadow: inset 0 0 0 1px #000, inset 0 0 7px 3px #002900;
+}
+
+#configs td:first-child::after {
+   min-height: 28px;
+}
+
+.snarkTorrentStatus b {
+    margin-right: 4px;
+}
+
+.snarkMessages {
+     margin: -11px -11px 0;
+}
+
+.iframed .snarkMessages {
+     margin: 0;
+     position: static;
+}
+
+.addtorrentsection {
+     margin-top: 10px;
+}
+
+.configsection {
+     margin-bottom: -11px;
+}
+
+.addtorrentsection, .newtorrentsection, .configsection {
+     margin-left: -11px;
+     margin-right: -11px;
+}
+
+.iframed .addtorrentsection, .iframed .newtorrentsection, .iframed .configsection {
+     margin-left: 0;
+     margin-right: 0;
+}
+}
+
+/* end responsive layout */
+
diff --git a/installer/resources/themes/snark/light/images/arrow_refresh.png b/installer/resources/themes/snark/light/images/arrow_refresh.png
deleted file mode 100644
index c30c16341460d95ff8b3f6e8baa3e6b6fa1ef90a..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/light/images/arrow_refresh.png and /dev/null differ
diff --git a/installer/resources/themes/snark/light/images/bullet.png b/installer/resources/themes/snark/light/images/bullet.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ef4208142a09ba3de18c0d42c2617a1f4e343a0
Binary files /dev/null and b/installer/resources/themes/snark/light/images/bullet.png differ
diff --git a/installer/resources/themes/snark/light/images/button_forum.png b/installer/resources/themes/snark/light/images/button_forum.png
new file mode 100644
index 0000000000000000000000000000000000000000..232fb5623a91ae63da00e375032ba9d1755a2c94
Binary files /dev/null and b/installer/resources/themes/snark/light/images/button_forum.png differ
diff --git a/installer/resources/themes/snark/light/images/button_forum_active.png b/installer/resources/themes/snark/light/images/button_forum_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2b4538e8bcc68e343ab59ac1c166ae9a722ea53
Binary files /dev/null and b/installer/resources/themes/snark/light/images/button_forum_active.png differ
diff --git a/installer/resources/themes/snark/light/images/button_forum_hover.png b/installer/resources/themes/snark/light/images/button_forum_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f2aa291ac8693f2855134b28c1a7ce4376c6d2d
Binary files /dev/null and b/installer/resources/themes/snark/light/images/button_forum_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/button_snark.png b/installer/resources/themes/snark/light/images/button_snark.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef55a8d2b438a34c28245fb355d01884ee5d5ca3
Binary files /dev/null and b/installer/resources/themes/snark/light/images/button_snark.png differ
diff --git a/installer/resources/themes/snark/light/images/button_snark_active.png b/installer/resources/themes/snark/light/images/button_snark_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..745f14ef2e64ece9678cc6799449bb0bcb0c2ecb
Binary files /dev/null and b/installer/resources/themes/snark/light/images/button_snark_active.png differ
diff --git a/installer/resources/themes/snark/light/images/button_snark_hover.png b/installer/resources/themes/snark/light/images/button_snark_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e486d5b1fc213261428c20ee4a5119e97457b5e
Binary files /dev/null and b/installer/resources/themes/snark/light/images/button_snark_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/button_tracker.png b/installer/resources/themes/snark/light/images/button_tracker.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1ff0a348466dab5c1af03d24102e7d1d27f02f1
Binary files /dev/null and b/installer/resources/themes/snark/light/images/button_tracker.png differ
diff --git a/installer/resources/themes/snark/light/images/button_tracker_active.png b/installer/resources/themes/snark/light/images/button_tracker_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..abdbc720cc7f99dfdf800fbce70e7d530668209f
Binary files /dev/null and b/installer/resources/themes/snark/light/images/button_tracker_active.png differ
diff --git a/installer/resources/themes/snark/light/images/button_tracker_hover.png b/installer/resources/themes/snark/light/images/button_tracker_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5a029c44c2463a74f47bb9a763ef462e50342a1
Binary files /dev/null and b/installer/resources/themes/snark/light/images/button_tracker_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/config.png b/installer/resources/themes/snark/light/images/config.png
index 565a9330e0a156dff5bed2c9fad8c95a44344ba4..8151463917ec88ca0962a5bfefb9f11c9122bff8 100644
Binary files a/installer/resources/themes/snark/light/images/config.png and b/installer/resources/themes/snark/light/images/config.png differ
diff --git a/installer/resources/themes/snark/light/images/control_back_blue.png b/installer/resources/themes/snark/light/images/control_back_blue.png
deleted file mode 100644
index 7b3f9e6fde420cb3f9454c692bc69b1d39efa280..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/light/images/control_back_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/light/images/control_fastforward_blue.png b/installer/resources/themes/snark/light/images/control_fastforward_blue.png
deleted file mode 100644
index 4a2f9d4e4a81857f509d85bbe46936c99709cd6f..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/light/images/control_fastforward_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/light/images/control_play_blue.png b/installer/resources/themes/snark/light/images/control_play_blue.png
deleted file mode 100644
index f8c8ec683edd6a974eacc253332f903d643dbe41..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/light/images/control_play_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/light/images/control_rewind_blue.png b/installer/resources/themes/snark/light/images/control_rewind_blue.png
deleted file mode 100644
index 15d1584bdbb2c26a9fc4c8269aa54615a58a4657..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/light/images/control_rewind_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/light/images/debuginfo.png b/installer/resources/themes/snark/light/images/debuginfo.png
new file mode 100644
index 0000000000000000000000000000000000000000..42c7cd6ab143aa45bbadec43ca28ff8868ffde20
Binary files /dev/null and b/installer/resources/themes/snark/light/images/debuginfo.png differ
diff --git a/installer/resources/themes/snark/light/images/delete.png b/installer/resources/themes/snark/light/images/delete.png
index eb4c2f5ce382cdf3d75060d6202a5806e84a9c09..a37f8c7f1a8d23babac993177015df3d727d86d8 100644
Binary files a/installer/resources/themes/snark/light/images/delete.png and b/installer/resources/themes/snark/light/images/delete.png differ
diff --git a/installer/resources/themes/snark/light/images/delete_hover.png b/installer/resources/themes/snark/light/images/delete_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..51c32d1dcaef473edb7b84b2283230c697ec04ca
Binary files /dev/null and b/installer/resources/themes/snark/light/images/delete_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/dropdown.png b/installer/resources/themes/snark/light/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec983e14ae70dcf0f3a7f64ec47f533d55a8e7f5
Binary files /dev/null and b/installer/resources/themes/snark/light/images/dropdown.png differ
diff --git a/installer/resources/themes/snark/light/images/first.png b/installer/resources/themes/snark/light/images/first.png
new file mode 100644
index 0000000000000000000000000000000000000000..8abef5daff2cc918ae1be3cbbb70198bc0a671db
Binary files /dev/null and b/installer/resources/themes/snark/light/images/first.png differ
diff --git a/installer/resources/themes/snark/light/images/first_hover.png b/installer/resources/themes/snark/light/images/first_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e25ff6e6f6bb07b29410c64ffd3ed73e0d43857
Binary files /dev/null and b/installer/resources/themes/snark/light/images/first_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/infocircle.png b/installer/resources/themes/snark/light/images/infocircle.png
new file mode 100644
index 0000000000000000000000000000000000000000..b1d0be10a00f0d34f8e9b9075828e32fb496a7cd
Binary files /dev/null and b/installer/resources/themes/snark/light/images/infocircle.png differ
diff --git a/installer/resources/themes/snark/light/images/last.png b/installer/resources/themes/snark/light/images/last.png
new file mode 100644
index 0000000000000000000000000000000000000000..e174e55f7620337f1d68946aa7a55a5a663486a6
Binary files /dev/null and b/installer/resources/themes/snark/light/images/last.png differ
diff --git a/installer/resources/themes/snark/light/images/last_hover.png b/installer/resources/themes/snark/light/images/last_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..5aec075956ab1042b4abe85a32108ce5a3d0e2e5
Binary files /dev/null and b/installer/resources/themes/snark/light/images/last_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/next.png b/installer/resources/themes/snark/light/images/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..49da1fa92007b3218a3e5578c6b5f2493d8e4a8c
Binary files /dev/null and b/installer/resources/themes/snark/light/images/next.png differ
diff --git a/installer/resources/themes/snark/light/images/next_hover.png b/installer/resources/themes/snark/light/images/next_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f49430bacc9a830e4762e975e00d05627abbb500
Binary files /dev/null and b/installer/resources/themes/snark/light/images/next_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/peer.png b/installer/resources/themes/snark/light/images/peer.png
new file mode 100644
index 0000000000000000000000000000000000000000..93a9e773870b3d900f1c690384d8d32256762e74
Binary files /dev/null and b/installer/resources/themes/snark/light/images/peer.png differ
diff --git a/installer/resources/themes/snark/light/images/previous.png b/installer/resources/themes/snark/light/images/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b932951e9aad5cea28e8a4d6c7d8925f533736b
Binary files /dev/null and b/installer/resources/themes/snark/light/images/previous.png differ
diff --git a/installer/resources/themes/snark/light/images/previous_hover.png b/installer/resources/themes/snark/light/images/previous_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0cbcad826de6ee2cf17406bc143162faa8398e9
Binary files /dev/null and b/installer/resources/themes/snark/light/images/previous_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/progressbar.gif b/installer/resources/themes/snark/light/images/progressbar.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e204f6b319698df8029a9e6c79cc1ea79b5e297e
Binary files /dev/null and b/installer/resources/themes/snark/light/images/progressbar.gif differ
diff --git a/installer/resources/themes/snark/light/images/remove.png b/installer/resources/themes/snark/light/images/remove.png
index af7fe79c12e97f7c7e9ca4019e56f60a3631c199..12f988b18088a079dd43a20131a7bae1c9ed375a 100644
Binary files a/installer/resources/themes/snark/light/images/remove.png and b/installer/resources/themes/snark/light/images/remove.png differ
diff --git a/installer/resources/themes/snark/light/images/remove_hover.png b/installer/resources/themes/snark/light/images/remove_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..7487cf4d24985dbc13a834a7fc3c6aca75a95ed1
Binary files /dev/null and b/installer/resources/themes/snark/light/images/remove_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/start.png b/installer/resources/themes/snark/light/images/start.png
index 716a6d39a64c6a5b52e7218815a1e24da3c44b18..6bf001c4e024a7b9dc4d98e062a0c0f88b772154 100644
Binary files a/installer/resources/themes/snark/light/images/start.png and b/installer/resources/themes/snark/light/images/start.png differ
diff --git a/installer/resources/themes/snark/light/images/start_all.png b/installer/resources/themes/snark/light/images/start_all.png
index 23220f6c64fef85d0cd63d8401b41810e645e09c..dadeeebebf1bfae434f485e4cbe7e56b9c4ba818 100644
Binary files a/installer/resources/themes/snark/light/images/start_all.png and b/installer/resources/themes/snark/light/images/start_all.png differ
diff --git a/installer/resources/themes/snark/light/images/start_all_hover.png b/installer/resources/themes/snark/light/images/start_all_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..c95bc758117611ffa5317277b7992914ea98abbe
Binary files /dev/null and b/installer/resources/themes/snark/light/images/start_all_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/start_hover.png b/installer/resources/themes/snark/light/images/start_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..615f542fcb1662a6d699b10b62c855501716bfe7
Binary files /dev/null and b/installer/resources/themes/snark/light/images/start_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/stop.png b/installer/resources/themes/snark/light/images/stop.png
index e2af0d9206b3bca95b3837c7bf7591c6c0355679..ca007e86fb370a83e5316f0865c5b98713070fff 100644
Binary files a/installer/resources/themes/snark/light/images/stop.png and b/installer/resources/themes/snark/light/images/stop.png differ
diff --git a/installer/resources/themes/snark/light/images/stop_all.png b/installer/resources/themes/snark/light/images/stop_all.png
index 3708e65e8bbc8f4deea0740bd9310f25b0375d60..124a31caea0922e15aac81bb0916aad34abe001e 100644
Binary files a/installer/resources/themes/snark/light/images/stop_all.png and b/installer/resources/themes/snark/light/images/stop_all.png differ
diff --git a/installer/resources/themes/snark/light/images/stop_all_hover.png b/installer/resources/themes/snark/light/images/stop_all_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..124a31caea0922e15aac81bb0916aad34abe001e
Binary files /dev/null and b/installer/resources/themes/snark/light/images/stop_all_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/stop_hover.png b/installer/resources/themes/snark/light/images/stop_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..8516a21a099041b070a39b12b54e507103e43e09
Binary files /dev/null and b/installer/resources/themes/snark/light/images/stop_hover.png differ
diff --git a/installer/resources/themes/snark/light/images/tile2.png b/installer/resources/themes/snark/light/images/tile2.png
new file mode 100644
index 0000000000000000000000000000000000000000..5da7a46c54f5db60ec0e800dcfcb353698579bb7
Binary files /dev/null and b/installer/resources/themes/snark/light/images/tile2.png differ
diff --git a/installer/resources/themes/snark/light/images/torrent.png b/installer/resources/themes/snark/light/images/torrent.png
index dd836d3295db5d8fa876978a6ccd75acfab09a30..3b3221188abf14c7d53dc89542ccc838701d7602 100644
Binary files a/installer/resources/themes/snark/light/images/torrent.png and b/installer/resources/themes/snark/light/images/torrent.png differ
diff --git a/installer/resources/themes/snark/light/snark.css b/installer/resources/themes/snark/light/snark.css
index a02f899686b02d42ea94ab2c88be6cb28f296544..5098475f80d8b80360ca460267791df40fcf91c5 100644
--- a/installer/resources/themes/snark/light/snark.css
+++ b/installer/resources/themes/snark/light/snark.css
@@ -1,151 +1,308 @@
-/* I2PSnark theme "Light" by dr|z3d, 2012 */
+/* I2PSnark theme "Light" aka Corporat */
 /* Cat That Got The Cream Edition */
+/* Author: dr|z3d */
 /* Thanks to http://www.luxphile.com/2011/01/creative-commons-cat.html for the kitty image */
 
 body {
-     color: #000;
-     font: 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
-     background: #fff;
-     background: #fff;
+     color: #272e3f;
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     background: #a4a4cb url(/themes/console/light/images/tile2.png) center top fixed;
+     background-size: 32px 32px;
+     margin: 5px;
+}
+
+/* preload top navigation mouseovers */
+body {
+     background: url(images/tile2.png) fixed,
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat, #a4a4cb;
 }
 
 body.iframed {
-     background: transparent url('../../console/dark/images/transparent.gif') !important;
+     background: transparent url(/themes/console/images/transparent.gif) !important;
      margin: 6px 0 0 !important;
 }
 
-.snarkTitle {
-     font-size: 12pt;
-     font-weight: bold;
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif),
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat !important;
+}
+
+* {
+     outline: none !important;
+}
+
+a:focus img, input[type="image"]:focus, a.control:focus, input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus, input[type="text"]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus {
+     filter: drop-shadow(0 0 1px #6f072b) !important;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+     outline: none;
+     border: none;
+}
+
+.page {
+     color: #310;
+     min-width: 900px !important;
+     margin: 5px 0 0 0;
+     padding: 0;
+     border-radius: 2px;
+     border: 1px solid #7778bf;
+     font-size: 9pt !important;
+     line-height: 160% !important;
+     text-align: center;
+     opacity: 1;
+     background: #fff;
+     background: linear-gradient(to right, #fff, #dfe0ff, #fff) #eef;
+     background-size: 3px auto;
+}
+
+.iframed .page {
+     box-shadow: none;
+     border-radius: 0;
+     border-left: none;
+     border-right: none;
+}
+
+/* top navigation */
+
+.snarknavbar {
+     margin: 0 auto -6px !important;
+     padding: 8px 10px;
+     border: 1px solid #7778bf;
+     box-shadow: inset 0 0 0 1px #fff;
+     border-radius: 2px 2px 0 0;
+     min-width: 880px;
+     width: auto;
+     width: calc(100% - 22px);
      text-align: center;
+     background: linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%);
+     position: sticky;
+     top: -1px;
+     z-index: 999;
+ }
+
+.iframed .snarknavbar {
+     margin: -6px 0 -6px !important;
+     border-radius: 0;
+     border: none;
+     border-bottom: 1px solid #7778bf;
+     box-shadow: none;
+     position: static;
 }
 
 .snarkRefresh:link,.snarkRefresh:visited {
      text-decoration: none !important;
      text-transform: uppercase !important;
-     padding: 4px 16px 5px !important;
-     margin: -5px -8px -5px 0 !important;
-     letter-spacing: 0em;
+     padding: 4px 10px 4px 24px !important;
+     margin-right: -2px !important;
+     letter-spacing: 0.08em;
      font-weight: bold;
      font-size: 9pt;
      color: #559;
-     background: #fff url('../../console/light/images/header.png') repeat-x scroll center center;
-     -moz-border-radius: 0px;
-     -khtml-border-radius: 3px;
-     border-radius: 0px;
-     border: 1px outset #66f;
+     background: #fff url(images/button_tracker.png) 8px center no-repeat;
+     background: url(images/button_tracker.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%);
+     border-radius: 0;
+     border: 1px solid #7778bf;
+     box-shadow: inset 0 0 0 1px #fff;
+     display: inline-block;
+     outline: none;
+     filter: drop-shadow(0 0 1px #ccc);
 }
 
-.snarkRefresh:hover {
-     text-decoration: none !important;
-     text-transform: uppercase !important;
-     padding: 1px 16px;
-     font-weight: bold;
-     font-size: 9pt;
-     color: #fff;
-     background: #359;
-     -moz-border-radius: 0;
-     -khtml-border-radius: 0;
+.snarkRefresh:hover, .snarkRefresh:focus {
+     color: #f60;
+     background: #eef url(images/button_tracker_hover.png) 8px center no-repeat;
+     background: url(images/button_tracker_hover.png) 8px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%);
      border-radius: 0;
+     box-shadow: inset 0 0 0 1px #fff;
 }
 
 .snarkRefresh:active {
-     text-decoration: none !important;
-     text-transform: uppercase !important;
-     padding: 0 16px;
-     font-weight: bold;
-     font-size: 9pt;
-     color: #fff;
-     background: #00d;
+     background: #f60 url(images/button_tracker_active.png) 8px center no-repeat;
+     color: #fff !important;
+     box-shadow: inset 3px 3px 3px #333;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333;
 }
 
 .snarkRefresh:last-child {
-     -moz-border-radius: 0 3px 3px 0px;
-     -khtml-border-radius: 0 3px 3px 0;
-     border-radius: 0 3px 3px 0;
-     border: 1px outset #66f;
+     border-radius: 0 2px 2px 0;
 }
 
 .snarkRefresh:first-child {
-     -moz-border-radius: 3px 0 0 3px;
-     -khtml-border-radius: 3px 0 0 3px;
-     border-radius: 3px 0 0 3px;
-     border: 1px outset #66f;
+/*     padding: 4px 10px 4px 19px !important;*/
+     border-radius: 2px 0 0 2px;
+     background: #fff url(images/button_snark.png) 10px center no-repeat;
+     background: url(images/button_snark.png) 10px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%);
+}
+
+.snarkRefresh:first-child:hover, .snarkRefresh:first-child:focus {
+     background: #eef url(images/button_snark_hover.png) 10px center no-repeat;
+     background: url(images/button_snark_hover.png) 10px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%);
+     color: #f60;
+}
+
+.snarkRefresh:first-child:active {
+     background: #f60 url(images/button_snark_active.png) 10px center no-repeat;
+}
+
+.snarkRefresh:nth-child(2) {
+     background: #fff url(images/button_forum.png) 8px center no-repeat;
+     background: url(images/button_forum.png) 8px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 51%, #eef 100%);
+}
+
+.snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):focus {
+     background: #eef url(images/button_forum_hover.png) 8px center no-repeat;
+     background: url(images/button_forum_hover.png) 8px center no-repeat, linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%);
+}
+
+.snarkRefresh:nth-child(2):active {
+     background: #f60 url(images/button_forum_active.png) 8px center no-repeat;
+     color: #fff;
 }
 
+.snarkRefresh:last-child[href="/i2psnark/"] {
+     border-radius: 2px;
+}
+
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited,
+.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child,
+.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) {
+     background-size: 14px auto, 100% 100% !important;
+}
+
+/* end top nav */
+
+/* screenlog */
+
 .snarkMessages {
-     font: normal 8pt "Lucida Console","DejaVu Sans Mono",Courier,mono !important;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     font-size: 8pt;
+     font-weight: bold;
      text-align: left;
-     margin: 0 0 10px 0;
+     margin: -2px 0 0;
      padding: 3px 5px 3px 5px;
-     border-spacing: 0px;
+     border-spacing: 0;
      overflow: auto;
-     color: #44f;
-     max-height: 50px;
-     min-height: 50px;
+     color: #339;
+     height: 52px;
      width: auto;
-     background: #fff url('images/kitty.png') no-repeat scroll right center;
-     border-bottom: 1px solid #66f;
-}
-
-.snarkMessages li {
-     list-style: square;
+     min-width: 810px;
+     background: #eef url(images/kitty.png) no-repeat scroll right bottom;
+     background: url(images/kitty.png) no-repeat right center, linear-gradient(to bottom, #fff, #eef);
+     border-top: 1px solid #7778bf;
+     border-bottom: 1px solid #7778bf;
+     box-shadow: inset 0 0 1px #fff;
+     background-size: auto 100%, 100% 100%;
 }
 
 .snarkMessages a:link, .snarkMessages a:visited {
-     color: #69f !important;
+     color: #505 !important;
+     font-size: 8pt;
 }
 
 .snarkMessages a:hover {
-     color: #f90 !important;
+     color: #f60 !important;
 }
 
 .snarkMessages ul {
-     margin: 0;
-     padding: 0 0 0 16px;
+     margin: -2px 0 2px 0;
+     padding: 0 0 0 14px;
+     list-style: none;
 }
 
-.snarkMessages p {
-     font-style: italic;
-     margin: 0;
-     text-align: right;
+.snarkMessages li {
+     margin-left: -15px;
+     line-height: 120%;
+}
+
+.snarkMessages li::before {
+     content: '';
+     display: inline-block;
+     background: url(images/bullet.png) left bottom no-repeat;
+     width: 14px;
+     height: 11px;
+     background-size: 9px 9px;
 }
 
-.snarkMessages img, .snarkMessages img:hover {
+.snarkMessages img {
      float: right;
      margin: -4px -5px 4px 4px;
      opacity: 1;
-     border: 1px solid #66f;
-     border-right: 0 none;
-     border-top: 0 none;
+     position: sticky;
+     top: -4px;
+     width: 8px;
+     mix-blend-mode: luminosity;
+     border: 1px solid #77b;
+     padding: 2px;
+     background: #fff;
+}
+
+.snarkMessages img:hover {
+     border: 1px solid #77b;
+     padding: 2px;
+     filter: drop-shadow(0 0 1px #f60);
+     mix-blend-mode: normal;
 }
 
 .logshim {
-     margin-top: -10px !important;
+     margin-top: 11px !important;
+}
+
+/* end screenlog */
+
+a:link {
+     color: #3b6bbf;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
+     font-size: 9pt;
+}
+
+a:visited {
+     color: #2c4e8f;
+     text-decoration: none;
+}
+
+a:hover, a:focus {
+     color: #f60;
+}
+
+a:active {
+     color: #f30;
 }
 
 pre {
      width: 100%;
-     font: 8pt "Lucida Console","DejaVu Sans Mono",Courier,mono !important;
+     font: 8pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
      padding: 0;
      text-align: left !important;
      height: 8px;
      color: #35f;
-     font-weight: bold !important; 
+     font-weight: bold !important;
 }
 
 table {
-     margin: 0px 0px 10px 0px;
-     border: 0px;
-     padding: 0px;
-     border-spacing: 0px;
+     margin: 0 0 10px 0;
+     border: 0;
+     padding: 0;
+     border-spacing: 0;
      border-collapse: collapse;
      color: #323;
      width: 100%;
      opacity: 1 !important;
 }
 
-tr { 
+tr {
      opacity: 1;
 }
 
@@ -153,21 +310,19 @@ thead, tfoot {
      background: #fff;
 }
 
-thead a, tfoot a {
-} 
-
 thead {
      border-bottom: 1px solid #101;
 }
 
 th {
      padding: 3px 2px;
-     font-size: 8pt;
-     border-top: 1px solid #66f;
-     border-bottom: 1px solid #66f;
-     color: #001;
-      whitespace: nowrap;
-     background: #fff url('../../console/light/images/header.png') repeat-x scroll center center;
+     font-size: 9pt;
+     border-top: 1px solid #7778bf;
+     border-bottom: 1px solid #7778bf;
+     background: #fff url(/themes/console/light/images/header.png) repeat-x scroll center center;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+     background: linear-gradient(to bottom, #fff 50%, rgba(240,240,255,1));
+     color: #31334f;
 }
 
 th:first-child {
@@ -177,15 +332,7 @@ th:first-child {
 
 tfoot td:first-child {
      text-align: left !important;
-     padding-left: 0px;
-}
-
-th:first-child img {
-     margin: 1px -2px 3px 1px !important;
-}
-
-th:nth-child(2) img {
-     margin: 1px 7px 3px 2px !important;
+     padding-left: 0;
 }
 
 tfoot th {
@@ -193,7 +340,7 @@ tfoot th {
 }
 
 tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img {
-     margin: 0px 2px 3px 0px !important;
+     margin: 0 2px 3px 0 !important;
      padding-right: 0 !important;
 }
 
@@ -201,64 +348,162 @@ tfoot tr:nth-child(n+1) {
      text-align: left;
 }
 
+#pagenav {
+     font-size: 8.5pt;
+     color: #272e3f;
+}
+
+#pagenav img {
+     border: 1px solid #89f;
+     border-radius: 2px;
+     padding: 3px !important;
+     opacity: 0.8;
+     filter: drop-shadow(0 0 1px #bbb);
+     width: 12px;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+     margin-right: -4px;
+}
+
+#pagenav img:hover, #pagenav a:focus img {
+     background: linear-gradient(to bottom, #eef 0%, #eef 50%, #bbf 51%, #bbf 100%);
+     opacity: 1;
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+#pagenav a:active img {
+     background: #f60;
+     box-shadow: inset 3px 3px 3px #333;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333;
+}
+
+#pagenav img.disable, #pagenav img.disable:hover, #pagenav a:active img.disable {
+     opacity: 0.2;
+     margin-right: 0;
+     background: none;
+     filter: none;
+}
+
 .headerstatus {
      text-align: left;
-     padding-left: 15px;
 }
 
 .headerpriority {
-     text-align: left;
-     padding-left: 10px;
+     text-align: center;
 }
 
 .ParentDir {
      background: #fff;
      font-size: 8pt;
-     border: 0px inset #101 !important;
-     border-left: 0 !important;
-     border-right: 0 !important;
+     border: none;
      text-align: left !important;
      padding: 4px 0;
 }
 
+.ParentDir a {
+     display: inline-block;
+     width: 100%;
+}
+
 .priority {
-     font-size: 7pt;
-     vertical-align: center;
-     min-width: 160px;
+     vertical-align: middle;
+     width: 200px;
 }
 
-.SnarkTorrents {
-     margin: 0;
-     border: 0px solid #66f;
+.snarkTorrents {
+     margin: -1px 0;
      background: #fff;
 }
 
-.SnarkTorrents td {
-     line-height: 90%;
+.snarkTorrents thead th:nth-child(2) {
+     text-align: left;
+}
+
+.snarkTorrents thead th:nth-child(3), .snarkTorrents thead th:nth-child(7) {
+     text-align: right !important;
+}
+
+.snarkTorrents thead th:nth-child(6) {
+     text-align: center !important;
 }
 
-.SnarkTorrents td:nth-child(1) {
-     width: 24px !important;
+.snarkTorrents td {
+     line-height: 110%;
 }
 
-.SnarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
+.snarkTorrents thead th:nth-child(1), .snarkTorrents td:nth-child(1) {
      width: 20px !important;
 }
 
+.snarkTorrents td:nth-child(1) {
+     text-align: left;
+     padding: 2px;
+}
+
+.snarkTorrents td:nth-child(2) {
+     white-space: nowrap;
+}
+
+.snarkTorrentStatus b {
+     margin-right: 3px;
+}
+
+.snarkTorrents td[colspan="10"] {
+     white-space: normal !important;
+}
+
+.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
+     width: 16px !important;
+     padding: 2px 1px 2px 0;
+}
+
+.SnarkTorrents td:nth-child(4) {
+     text-align: center;
+}
+
+.snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"] {
+     text-align: left !important;
+     padding-left: 0;
+}
+
+.snarkTorrents th[colspan="6"]::first-line {
+     font-weight: bold;
+}
+
+.snarkTorrents th[colspan="6"] {
+     font-weight: normal;
+}
+
+.snarkTorrents tfoot th {
+     padding: 5px 4px !important;
+     background: #fff;
+     vertical-align: top;
+}
+
+/*
+.snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) {
+     font-variant: all-small-caps !important;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.snarkTorrents td:nth-child(n+6), .snarkTorrents tfoot th:nth-child(n+2) {
+     font-variant: normal !important;
+}
+}
+*/
+
 td {
      padding: 2px 4px;
-     color: #001 !important;
-      opacity: 1;
-     font-size: 8pt;
+     color: #272e3f !important;
+     opacity: 1;
+     font-size: 9pt;
 }
 
 .mainsection td {
-     color: #001;
+     color: #272e3f;
 }
 
 td:first-child {
      text-align: right;
-     font-size: 8pt;
 }
 
 .center {
@@ -268,15 +513,20 @@ td:first-child {
 .snarkTorrentName {
      padding: 0;
      line-height: 90%;
-     font-weight: bold !important;
+}
+
+.snarkTorrentName a, .snarkFileName a {
+     display: inline-block;
+     width: 100%;
 }
 
 .snarkTorrentAction {
      text-shadow: 1px 1px #550000;
-     padding: 1px 1px 1px 1px !important;
+     padding: 2px 1px !important;
      margin: 0 !important;
      text-align: center;
-     width: 60px; 
+     width: 1%;
+     white-space: nowrap;
 }
 
 .snarkTorrentAction img {
@@ -285,31 +535,66 @@ td:first-child {
 }
 
 .snarkTorrentAction img:hover {
-     -moz-box-shadow: 0 0 1px 1px #f90;
+     box-shadow: 0 0 1px 1px #f90;
      opacity: 1;
 }
 
+.snarkTorrents th:last-child br { /* kill "start all/stop all" button wrapping in the header */
+     display: none;
+}
+
+.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
+     padding: 3px !important;
+     background: #339;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 51%, #ddf 100%);
+     border-radius: 2px;
+     border: 1px solid #89f;
+     box-shadow: inset 0 0 0 1px #fff;
+     margin: 2px;
+     filter: drop-shadow(0 0 1px #ddd);
+     height: 10px;
+}
+
+.snarkTorrentAction input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus,
+.snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrents th:last-child input[type="image"]:focus {
+     filter: hue-rotate(110deg);
+}
+
+.snarkTorrentAction input[type="image"]:active, .snarkTorrents th:last-child input[type="image"]:active {
+     box-shadow: inset 3px 3px 3px #333;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333;
+     filter: hue-rotate(110deg) !important;
+}
+
 .snarkTorrentEven {
      font-size: 8pt;
-     background: #f5f5f5;
+     background: #eef;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
 }
 
-.snarkTorrentNoneLoaded {
-     background: #fff;
-     font-size: 8.5pt;
+.snarkTorrentNoneLoaded, .snarkTorrentNoneLoaded:hover {
+     background: #fff !important;
+     background: linear-gradient(to right, #eef, #fff, #eef) !important;
+     box-shadow: inset 0 0 1px #fff;
+     border-bottom: 1px solid #7778bf !important;
+     padding: 10px !important;
+     font-size: 9pt;
      font-weight: bold;
      text-align: center !important;
-     color: #bbb !important;
+     color: #272e3f !important;
 }
 
-.snarkTorrentStatus {
-     padding: 2px 2px 2px 0;
-     line-height: 90%;
+.snarkTorrentStatus a:visited {
+     color: #559;
+}
+
+.snarkTorrentStatus a:hover {
+     color: #f60;
 }
 
 .snarkTorrentStatus:first-child {
      text-align: left !important;
-     padding-left: 0px;
+     padding-left: 0;
      min-width: 48px;
      font-weight: bold;
      color: #dd9 !important;
@@ -323,43 +608,64 @@ td:first-child {
 }
 
 .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
-     font-size: 8pt;
      padding: 0 3px;
      line-height: 90%;
 }
 
-.snarkTorrentDownloaded {
-     color: #001 !important;
+.snarkTorrentUploaded, .snarkTorrentRateUp {
+     font-style: italic !important;
+     color: #59698f !important;
 }
 
-.snarkTorrentUploaded {
-     color: #001 !important;
+.snarkTorrentDownloaded, .snarkTorrents tfoot th:nth-last-child(5) {
+     text-align: center;
+     white-space: nowrap;
 }
 
-.snarkTorrentRateUp {
-     color: #001 !important;
+.snarkTorrentOdd {
+     background: #e0e0ff;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px);
+     font-size: 8pt;
 }
 
-.snarkTorrentRateDown {
-     color: #001 !important;
+.snarkTorrentOdd td, .snarkTorrentEven td {
+     border-top: 1px solid #bbf !important;
 }
 
-.snarkTorrentOdd {
-     background: #f0f0f0;
-     font-size: 8pt;
-     border: 0px inset #101 !important;
-     border-left: 0 !important;
-     border-right: 0 !important;
+.snarkTorrents tr:hover, .snarkTorrents tr:hover td, .snarkDirInfo tr:hover, .snarkDirInfo tr:hover td {
+     background: #ffd;
+     border-top: 1px solid #7778bf !important;
+     border-bottom: 1px solid #7778bf !important;
+     box-shadow: none !important;
+     color: #0c111f !important;
 }
 
-.snarkTorrentOdd td, .snarkTorrentEven td {
-     border-top: 1px dotted #66f !important;
+.peerinfo:hover td:first-child {
+     background: url(images/peer.png) center center no-repeat  #ffd !important;
+}
+
+.snarkTorrents tr:hover img {
+     mix-blend-mode: normal;
+}
+
+.snarkTorrentEven + .snarkTorrentEven td:nth-child(2), .snarkTorrentOdd td + .snarkTorrentOdd td:nth-child(2) {
+     padding: 4px 0;
+     text-align: left;
+}
+
+.snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) {
+     background: #e0e0ef;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(201, 201, 255, 0.3) 3px, #fff 5px);
+}
+
+.snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) {
+     background: #d1d1ef;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(220, 220, 255, 0.3) 3px, #fff 5px);
 }
 
 .snarkFileName {
-     padding: 4px 0px !important; 
+     padding: 4px 0 !important;
      text-align: left !important;
-     font-size: 8pt !important;
 }
 
 .snarkFileSize {
@@ -368,29 +674,34 @@ td:first-child {
 }
 
 .snarkFileStatus {
-     padding: 4px 5px 4px 15px;
-     text-align: center;
+     padding: 4px 5px;
      font-style: italic;
-     font-size: 8pt;
      text-align: left;
-     min-width: 230px;
-}
-
-.snarkTorrentETA {
-     font-style: italic;
+     white-space: nowrap;
 }
 
 .choked {
-     color: #f00000 !important;
+     color: #a00 !important;
 }
 
 .unchoked {
-     color: #00f000 !important;
+     color: #070 !important;
+}
+
+.snarkTorrents td:nth-last-child(2) .choked, .snarkTorrents td:nth-last-child(2) .unchoked {
+     font-style: italic;
 }
 
 .thumb {
-     max-height: 64px;
-     max-width: 96px;
+     max-width: 16px;
+     transition: ease all 0.3s 0s;
+}
+
+.thumb:hover {
+     margin: 0;
+     max-height: 80px;
+     max-width: 80px;
+     transition: ease all 0.3s 0s;
 }
 
 .snarkNewTorrent {
@@ -398,34 +709,91 @@ td:first-child {
 }
 
 .snarkAddInfo {
-     font-size: 8.5pt;
-     line-height: 130% !important;
+     font-size: 9pt;
+     display: inline-block;
+     margin-top: 7px;
+     background: url(images/infocircle.png) left center no-repeat;
+     background-size: 16px auto;
+     padding-left: 20px;
+     min-height: 16px;
 }
 
-.snarkConfigTitle {
-     font-size: 10.5pt;
-     font-weight: bold;
-     padding: 1px 15px 4px 12px;
-     margin: 5px 0 10px 0 !important;
-     letter-spacing: 0.02em;
-     border: 1px solid #66f;
-     -moz-border-radius: 0 0 5px 5px;
-     -khtml-border-radius: 0 0 5px 5px;
-     border-radius: 0 0 5px 5px;
-     border-top: 0;
-     text-shadow: 0 1px 0 #aaa;
-     background: #fff url('../../console/light/images/header.png') repeat-x scroll center center;
-     font-variant: small-caps !important;
-     box-shadow: 0 1px 3px #999;
+.snarkConfigTitle:hover, .toggleview:hover {
+     background: linear-gradient(to bottom, #fcfaf7 50%, #ffe8bf 50%, #efd9b3 100%);
 }
 
-div.newtorrentsection .snarkConfigTitle, div.addtorrentsection .snarkConfigTitle, div.configsectionpanel .snarkConfigTitle {
-     padding-top: 0 !important;	
+.snarkConfigTitle a {
+     font-size: 11pt !important;
 }
 
-.snarkConfigTitle img {
-     margin-right: -3px;
-     padding-bottom: 3px;
+.snarkConfigTitle:hover a, .snarkConfigTitle:focus a {
+     color: #f60 !important;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover {
+     font-size: 11pt;
+     font-weight: bold;
+     padding: 3px 15px;
+     margin: 0 0 -3px 0 !important;
+     letter-spacing: 0.15em;
+     border: 1px solid #7778bf;
+     border-top: 0;
+     background: #fff url("../../console/light/images/header.png") repeat-x scroll center center;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+     font-variant: small-caps !important;
+     box-shadow: 0 1px 2px #ddd;
+     display: inline-block;
+     min-width: 220px;
+     color: #559 !important;
+}
+
+.snarkConfigTitle img:hover { /* inert titles */
+     color: #40404f;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.snarkConfigTitle, .snarkConfigTitle a, label.toggleview,
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     font-size: 14pt !important;
+     padding: 3px 15px 4px;
+}
+}
+
+.snarkConfigTitle a:visited {
+     color: #559;
+}
+
+.snarkConfigTitle a:hover, .toggleview:hover {
+     color: #f60 !important;
+     cursor: pointer;
+}
+
+.snarkConfigTitle:active, .toggleview:active {
+     color: #f30 !important;
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #555;
+}
+
+.snarkConfigTitle img, .toggleview img {
+     margin: -2px -3px 0 0;
+     vertical-align: middle;
+}
+
+.snarkConfigTitle:hover img, .toggleview:hover img {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+.snarkConfigTitle:active a img, .toggleview:active img {
+     filter: drop-shadow(0 0 1px #f30) !important;
+     transform: rotate(90deg);
+     transition: ease transform 0.3s 0s;
+}
+
+.snarkConfigTitle {
+     color: #446;
+}
+
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     color: #31334f !important;
 }
 
 .snarkConfig {
@@ -433,244 +801,348 @@ div.newtorrentsection .snarkConfigTitle, div.addtorrentsection .snarkConfigTitle
      width: 100%;
 }
 
-table.snarkTorrentInfo, table.snarkDirInfo {
-     margin: 0 !important;
+.snarkTorrentInfo, .snarkDirInfo {
+     margin: 10px 0 0 0 !important;
+     background: #fff;
 }
 
-.snarkDirInfo thead img {
-     margin: 0 -1px 0 0 !important;
-     padding: 0 3px !important;
+.snarkTorrentInfo td:first-child, .snarkDirInfo td:first-child {
+     width: 16px;
+     padding-left: 2px !important;
+     text-align: left;
+}
+
+.snarkTorrentInfo th {
+     text-align: left;
+     padding: 6px 1px;
+}
+
+.snarkTorrentInfo th:first-child {
+     background: url(images/file.png) center left 5px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+     background-size: 14px auto, 100% 100%;
 }
 
 .snarkTorrentInfo td {
      text-align: left !important;
-     padding: 2px 0 1px 1px !important;
+     padding: 3px 0 3px 1px !important;
+     border-top: 1px solid #bbf;
+     vertical-align: middle;
 }
 
 .snarkTorrentInfo img {
      max-height: 16px;
-     margin: 1px 2px 2px 10px !important;    
 }
 
-.snarkDirInfo td {
-     min-width: 0px !important;
+.snarkTorrentInfo tr:nth-child(odd) {
+     background: #e0e0ff;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px);
 }
 
-.page {
-     color: #310;
-     min-width: 700px !important;
-     margin: 5px 0 0 0;
-     padding: 10px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #66f;
-     font-size: 9pt !important;
-     line-height: 160% !important;
-     -moz-box-shadow: inset 0px 0px 1px 0px #212;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #002;
-     box-shadow: inset 0px 0px 1px 0px #002;
-     text-align: center;
-     opacity: 1;
-     background: #fff;
+.snarkTorrentInfo tr:nth-child(even) {
+     background: #eef;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px);
 }
 
-form {
+.snarkTorrentInfo tr:last-child td {
+     border-bottom: 1px solid #7778bf;
+}
+
+.snarkDirInfo thead img {
+     margin: 0 !important;
+     padding: 0 2px !important;
+}
+
+table#trackerselect {
+     width: 100% !important;
+     border-collapse: separate;
+     border-spacing: 5px;
      margin-bottom: 0;
 }
 
-p {
-     line-height: 150%;
+#trackerselect tr:first-child td:last-child {
+     width: 150px;
+     display: inline-block;
+     padding: 3px 5px;
 }
 
-hr {
-     color: #444;
-     background: #444;
-     height: 1px;
-     border: 0px solid #444;
-     width: 0%;
-     margin: 5px 0 7px 0;
-     text-align: center;
+#trackerselect tr:first-child td:nth-child(n+2) {
+     border: 1px solid #7778bf !important;
+     border-radius: 2px;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%) #fff;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
 }
 
-a:link {	
-     color: #359;
-     text-decoration: none;
-     font-weight: bold;
-     word-wrap: break-word;
+#trackerselect td {
+     padding: 2px;
 }
 
-a:visited {
-     color: #249;
-     text-decoration: none;
+#trackerselect td:first-child {
+     width: 100px !important;
+     white-space: nowrap;
 }
 
-a:hover {
-     color: #559;
+#trackerselect td:nth-child(2), #trackerselect td:nth-child(3) {
 }
 
-a:active {
-     color: #77b;
+#trackerselect td:last-child {
+     overflow: hidden;
+     text-overflow: ellispis;
 }
 
-a.control, a.controld {
-     background: #fff;
-     border: 1px inset #191;
-     border-radius: 4px;
-     color: #359;
-     font-weight: bold;
-     margin: 2px 4px;
-     padding: 3px 4px;	
-     text-shadow: 0px 0px #410;
-     white-space: nowrap;
+form {
+     margin-bottom: 0;
 }
 
-a.controld {
-     color: #459;
-     font-weight: normal;
+p {
+     line-height: 150%;
 }
 
-a.control img, a.controld img {
-     display: none;
+hr {
+     color: #444;
+     background: #444;
+     height: 1px;
+     border: 0 solid #444;
+     width: 0;
+     margin: 5px 0 7px 0;
+     text-align: center;
 }
 
-a.control:hover {
-     background-color: #559;
-     border: 1px outset #559;
-     color: #fff;
-     text-shadow: 0px 1px 5px #410;
+hr.debug {
+     width: 100%;
+     margin: 3px 0;
 }
 
-a.control:active {
-     background: #f60 !important;
-     color: #fff !important;
-     text-shadow: 0 !important;
+hr.debug:nth-child(n+7) {
+     margin-top: -10px;
+     background: #339;
+}
+
+.headerpriority br {
+     display: none;
+}
+
+input[name="savepri"] {
+     float: right;
 }
 
 input {
      font-size: 9pt;
      font-weight: bold;
      text-align: left;
-     padding: 3px 4px !important;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #66f;
-     background: #fff;	 
-     color: #559;
+     padding: 4px !important;
+     border-radius: 2px;
+     border: 1px solid #7778bf;
+     background: #fff;
+     color: #272e3f;
      margin: 2px 4px 2px 0;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     box-shadow: inset 0 0 1px #fff, 0 0 1px #999;
 }
 
 input.r {
      text-align: right;
      background: #fff;
-     border: 1px solid #66f;
+     border: 1px solid #7778bf;
 }
 
-input[type=submit] {
-     text-shadow: 0px 0px #410;
-     color: #359;
+input[type=submit], a.control, input.disabled {
+     color: #227;
      background: #fff;
-     border: 1px outset #191;
-     padding: 2px;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
-     margin-top: 6px;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #ddf 50%, #ddf 100%);
+     border: 1px solid #7778bf;
+     padding: 5px 8px !important;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     margin: 6px 3px 6px 6px !important;
+     border-radius: 2px;
+     min-width: 90px;
+     text-align: center;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;
 }
 
-input[type=submit]:hover {
-     border: 1px outset #559;
-     background-color: #559;
-     color: #fff;
+input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus {
+     color: #f60;
+     border: 1px solid #559;
+     background: #eef;
+     background: linear-gradient(#fff 0%, #fff 50%, #ffe8bf 50%, #efd9b3 100%);
+     box-shadow: inset 0 0 0 1px #fff;
 }
 
-input[type=submit]:active {
+input[type=submit]:active, a.control:active {
      background: #f60 !important;
      color: #fff !important;
-     text-shadow: 0 !important;
+     box-shadow: inset 3px 3px 4px #333;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 4px #333;
+}
+
+a.control, a.controld {
+     border-radius: 2px;
+     font-weight: bold;
+     margin: 6px 3px 6px 3px !important;
+     padding: 4px 8px 4px 5px !important;
+     white-space: nowrap;
+     display: inline-block;
+     min-width: 0 !important;
+}
+
+a.controld {
+     color: #459;
+     font-weight: normal;
+     display: none;
+}
+
+a.control img {
+     filter: none;
 }
 
 input[type=image], thead img {
      padding: 0 !important;
-     -moz-border-radius: 0px;
-     -khtml-border-radius: 0px;
-     border-radius: 0px;
-     border: medium none;
+     border-radius: 0;
+     border: none;
      margin: 0 2px;
      opacity: 1;
+     max-height: 22px;
+     filter: hue-rotate(45deg);
 }
 
-thead img.disable, img.disable:hover {
-     opacity: 0.4;
+thead img {
+     filter: hue-rotate(45deg) drop-shadow(0 0 1px #ddd);
 }
 
-input[type=image]:hover, thead img:hover {
-     opacity: 1;
+.iframed thead img {
+     max-height: 20px;
 }
 
-input[type=text]:active, input[type=text]:hover, input.r:hover {
+thead a:hover img, thead a img:hover {
+     filter: hue-rotate(60deg) drop-shadow(0 0 1px #f60);
+}
+
+.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
+     width: 80%;
+}
+
+thead img.disable, img.disable:hover {
+     opacity: 0.4;
+}
+
+input[type="text"]:focus, input.r:focus, textarea:focus, input[name="nofilter_dataDir"]:focus {
      background: #fff;
      color: #009;
      border: 1px solid #66f;
-     box-shadow: none !important;
+     transition: ease filter 0.3s 0s;
+     box-shadow: none;
 }
 
-input[type=text], input.r {
-     min-width: 90px;
-     box-shadow: 1px 1px 2px 1px #aaa inset;
+input[type="text"], input.r, input[name="nofilter_dataDir"], textarea, select {
+     min-width: 120px;
+     box-shadow: 1px 1px 1px #aaa inset, 0 0 0 1px #fff;
+     background: #efefff;
+     padding: 5px 4px !important;
+}
+
+textarea[name="i2cpOpts"] {
+     overflow: hidden;
+}
+
+input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] {
+     width: 60%;
+     min-width: 500px !important;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
 }
 
-input[type=radio] {
+input[type="radio"] {
      padding: 2px;
      margin: 0 3px 0 8px;
      vertical-align: bottom;
 }
 
-input.default { width: 1px; height: 1px; visibility: hidden; }
+input[type="radio"], input[type="checkbox"], .optbox {
+     border: none !important;
+     width: 16px;
+     height: 16px;
+     box-shadow: none;
+     background: none;
+}
+
+input[type="checkbox"]:hover, input[type="radio"]:hover,
+input[type="checkbox"]:focus, input[type="radio"]:focus {
+     outline: none;
+     filter: drop-shadow(0 0 3px #89f);
+}
+
+input[type="checkbox"][disabled]:hover, input[type="radio"][disabled]:hover,
+input[type="checkbox"][disabled]:focus, input[type="radio"][disabled]:focus {
+     filter: none;
+     box-shadow: none;
+}
 
-input.disabled, input.disabled:hover {
-     background-color: #fff;
-     border: 1px inset #191;
-     color: #459;
+label {
+     cursor: pointer;
+}
+
+input.default {
+     width: 1px;
+     height: 1px;
+     visibility: hidden;
+     display: none;
+}
+
+input.disabled, input.disabled:hover, input.disabled:active, a.controld {
+     background: #fff !important;
+     color: #459 !important;
      font-weight: normal;
-     text-shadow: 0px 0px 0px #410;
+     opacity: 0.6;
+     cursor: not-allowed;
+     display: none;
+     box-shadow: none !important;
 }
 
 select {
-     background: #fff !important;
-     color: #22f;
-     font: 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     background: #efefff url(images/dropdown.png) right center no-repeat !important;
+     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      font-weight: bold;
-     padding: 2px 2px 2px 3px;
-     -moz-border-radius: 4px 0 0 4px;
-     -khtml-border-radius: 4px 0 0 4px;
-     border-radius: 4px 0 0 4px;
-     border: 1px solid #66f;
+     padding: 5px 16px 5px 3px !important;
+     border-radius: 2px;
+     border: 1px solid #7778bf;
      margin: 2px 4px 2px 0;
-     min-width: 90px;
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     color: #272e3f;
 }
 
-select:hover, textarea:hover {
-     background: #fff !important;
+select:focus {
      color: #001 !important;
+     background: #fff url(images/dropdown.png) right center no-repeat !important;
+     box-shadow: none;
 }
 
-textarea:hover {
-     color: #001 !important;
-     box-shadow: none;
+select:active, select option {
+     background: #fff;
+}
+
+select::-ms-expand {
+     display: none;
 }
 
 textarea {
-     background: #fff;
-     color: #22f;
+     color: #272e3f;
      font-weight: bold;
-     padding: 1px 4px 0px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #66f;
+     padding: 2px 4px;
+     border-radius: 2px;
+     border: 1px solid #7778bf;
      font-size: 8pt;
-     box-shadow: 1px 1px 2px 1px #aaa inset;
+}
+
+select:hover, input[type="checkbox"], input[type="radio"], input[type="submit"] {
+     cursor: pointer;
+}
+
+.optbox[disabled], .optbox[disabled]:hover, .optbox[name^="ttype"], .optbox[name^="ttype"]:hover, .optbox[name^="ttype"]:checked  {
+     cursor: default;
+     opacity: 0.6 !important;
+     filter: none !important;
 }
 
 img {
@@ -679,6 +1151,7 @@ img {
      vertical-align: middle;
      opacity: 1.0;
      line-height: 100%;
+     filter: drop-shadow(0 0 1px #999);
 }
 
 img:hover {
@@ -687,173 +1160,153 @@ img:hover {
      line-height: 100%;
 }
 
-.infoz {
-     margin: 0 -1px 0 0 !important;
-     padding: 0 !important;
-     line-height: 100%;
-     float: left;
-}
-
-.infoz img {
-     border: none;
-     opacity: 1 !important;
+img[src$="magnet.png"] {
+     transform: rotate(-90deg);
 }
 
-.infoz img:hover {
-     opacity: 1 !important;
+img[src$="details.png"] {
+     mix-blend-mode: luminosity;
 }
 
-div.newtorrentsection td:first-child, div.addtorrentsection td:first-child, div.configsectionpanel td:first-child {
+.newtorrentsection td:first-child, .addtorrentsection td:first-child, .configsectionpanel td:first-child {
      width: auto !important;
 }
 
-div.configsectionpanel td:first-child {
+.configsectionpanel td:first-child {
      padding-right: 5px;
 }
 
-div.section,div.mainsection div.section,div.mainsection {
+.configsectionpanel .snarkConfigTitle:hover img {
+     filter: drop-shadow(0 0 1px #999);
+}
+
+.section, .mainsection .section, .mainsection {
      margin: 0;
-     padding: 0px;
-     border: 1px solid #66f;
-     border-top: 2px solid #66f;
-     border-bottom: 2px solid #66f;
+     padding: 0;
      color: #001;
      word-wrap: break-word;
      text-align: center;
-     background: #fff;
      opacity: 1 !important;
 }
 
-div.newtorrentsection {
-     margin: 0 0 10px 0;
-     padding: 0 10px 0px 10px;
-     border: 1px solid #66f;
-     text-align: center;
-     color: #001;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #101;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #101;
-     box-shadow: inset 0px 0px 1px 0px #101;
-     word-wrap: break-word;
-     background: #f0f0f0 url('images/snark_create.png') no-repeat scroll right center;
+.page > .mainsection {
+     margin-top: 10px;
 }
 
-div.addtorrentsection {
-     margin: 10px 0;
+.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel {
      padding: 0 10px;
-     border: 1px solid #66f;
-     text-align: center;
+     border: 1px solid #7778bf;
      color: #001;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #101;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #101;
-     box-shadow: inset 0px 0px 1px 0px #101;
-     word-wrap: break-word;
-     background: #f0f0f0 url('images/snark_add.png') no-repeat scroll right center;
+     box-shadow: inset 0 0 0 1px #efefff;
+     background-blend-mode: luminosity;
+     text-align: center;
+}
+
+.newtorrentsection {
+     margin: 0 0 10px 0;
+     background: #fff url(images/snark_create.png) no-repeat right center;
+     background: url(images/snark_create.png) no-repeat right center, linear-gradient(to bottom, #fff, #e0e0ef);
+     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #fff 5px);
+     background-size: 80px 80px, 100%;
 }
 
-div.configsection {
+.addtorrentsection {
+     margin: 10px 0;
+     background: #fff url(images/snark_add.png) no-repeat right center;
+     background: url(images/snark_add.png) no-repeat 99% center, linear-gradient(to bottom, #fff, #e0e0ef);
+     background: url(images/snark_add.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #fff 5px);
+     background-size: 61px 61px, 100%;
+}
+
+.configsection {
      margin: 0;
-     padding: 0 10px 15px 10px;
-     border: 1px solid #66f;
-     color: #001;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #101;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #101;
-     box-shadow: inset 0px 0px 1px 0px #101;
-     word-wrap: break-word;
-     text-align: center;
-     background: #f0f0f0;
-     font-weight: bold;
+     padding-bottom: 13px;
+     background: #fff url(images/configuration.png) 102% center no-repeat;
+     background: url(images/configuration.png) 102% center no-repeat, linear-gradient(to bottom, #fff, #e0e0ef);
+     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #fff 5px);
+     background-size: 84px 82px, 100%;
 }
 
-div.configsection .snarkConfigTitle {
-     padding-top: 0px !important;
+.configsectionpanel {
+     margin: -12px 0 0;
+     background: #fff url(images/configuration.png) no-repeat scroll right center;
+     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #fff, #e0e0ef);
+     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to top, rgba(224, 224, 255, 0.5), #efefff 55px, #fff), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 1) 3px, #efefef 5px);
+     background-size: 84px 82px, 100% 100%, 100% 100%;
 }
 
-div.configsectionpanel {
-     margin: -3px 0 0;
-     padding: 0 10px;
-     border: 1px solid #66f;
-     color: #001;
-     -moz-border-radius: 0 0 4px 4px;
-     -khtml-border-radius: 0 0 4px 4px;
-     border-radius: 0 0 4px 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #101;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #101;
-     box-shadow: inset 0px 0px 1px 0px #101;
-     word-wrap: break-word;
-     text-align: center;
-     background: #f0f0f0 url('images/configuration.png') no-repeat scroll right center;
-     font-weight: bold;
+form:last-child .configsectionpanel {
+     margin-top: 10px;
+}
+
+.configsectionpanel table {
+     border-collapse: separate;
+}
+
+.configsectionpanel tr:nth-last-child(2) td {
+     text-align: right !important;
+     border-top: 1px solid #fff;
+     padding: 8px 0 0 0;
+}
+
+.configsectionpanel tr:last-child {
+     display: none;
+}
+
+.spacer td {
+     border-bottom: 1px solid #7778bf;
+}
+
+.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel {
+     margin-bottom: -1px;
+     border-left: none;
+     border-right: none;
 }
 
 .newtorrentsection form, .configsection form, .addtorrentsection form {
      color: #001 !important;
 }
 
-div.configsection table{
-     color: #ffb;
-     opacity: 1;
+.newtorrentsection table, .addtorrentsection table {
+     margin-top: -5px;
 }
 
-div.configsection a {
-     color: #00a;
+.newtorrentsection td:first-child, .addtorrentsection td:first-child {
+     min-width: 140px;
      font-weight: bold;
 }
 
-div.configsection a:hover {
-     color: #00f;
-     text-decoration: none;
+#trackerselect {
+     margin-top: 0;
 }
 
-code {
-     font-size: 8pt;
-     color: #009;
-     padding: 0 2px;
+#trackerselect tr:first-child {
      font-weight: bold;
-     font-family: "Lucida Console", "DejaVu Sans Mono", Courier, mono;
 }
 
-.snarknavbar {
-     margin: -10px 0 5px 0 !important;
-     padding: 14px 10px 7px;
-/*
-     border: 1px solid #101;
-     -moz-border-radius: 0 0 8px 8px;
-     -khtml-border-radius: 0 0 8px 8px;
-     border-radius: 0 0 8px 8px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #002;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #002;
-     box-shadow: inset 0px 0px 1px 0px #002;
-     background: #fff url('../../console/dark/images/header.png') repeat-x scroll center center !important;
-*/
-     background: none;
-     text-transform: uppercase !important;
-     letter-spacing: 0em !important;
+#trackerselect td:first-child {
+     font-weight: normal;
+}
+
+.configsection a {
+     color: #55a;
      font-weight: bold;
-     font-size: 11.5pt;
-     color: #001;
-     min-width: 600px;
-     width: 70%;
-     text-align: center;
- }
+}
 
-.iframed .snarknavbar {
-     margin: -5px 0 8px !important;
+code, tt {
+     font-size: 8.5pt;
+     color: #0045ff;
+     font-weight: bold;
+     font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
 }
 
-.snarknavbar img {
-     border: 0;
-     margin: 1px -8px -1px -2px;
-     padding: 1px 0 0px !important;
-     vertical-align: top;
+.snarkTorrents tt {
+     background: #99f;
+     color: #fff;
+     border-radius: 2px;
+     padding: 2px 3px;
+     margin: 0 3px;
+     display: inline-block;
 }
 
 .routerdown {
@@ -862,16 +1315,38 @@ code {
 
 .trackerconfig {
      text-align: left !important;
+     width: 100%;
+     border-collapse: separate;
+     border-spacing: 0;
 }
 
-.trackerconfig th:nth-child(n+4), .trackerconfig th:nth-child(n+5), .trackerconfig td:nth-child(n+4), .trackerconfig td:nth-child(n+5) {
-     text-align: center !important;
+.trackerconfig tr:first-child {
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+.trackerconfig th:first-child {
+     border-radius: 2px 0 0 2px;
+     border-left: 1px solid #339;
+     background: url(/themes/snark/ubergine/images/nuke.png) center right 8px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 51%, #eef 100%);
+}
+
+.trackerconfig th:last-child {
+     border-radius: 0 2px 2px 0;
+     border-right: 1px solid #339;
+}
+
+.trackerconfig th:nth-child(n+4), .trackerconfig th:nth-child(n+5), .trackerconfig td:nth-child(n+4), .trackerconfig td:nth-child(n+5) {
+     text-align: center !important;
 }
 
 .trackerconfig th, .trackerconfig td, .trackerconfig th:last-child, .trackerconfig td:last-child {
      text-align: left !important;
 }
 
+.trackerconfig tr:nth-child(2) td {
+     padding-top: 15px !important;
+}
+
 .trackerconfig td:first-child {
      text-align: right !important;
 }
@@ -887,3 +1362,518 @@ input.trackerhome {
 input.trackerannounce {
      width: 230px;
 }
+
+/* toggle create/add panel view */
+
+input.toggle_input { /* hide checkbox and use label as faux panel heading */
+     display: none;
+}
+
+input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: none;
+}
+
+input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent:checked + label + hr + table {
+     display: table;
+}
+
+/* display panels by default on webkit based browsers (midori fix) */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+}
+*/
+
+/* display by default in iframe to avoid overflow issue */
+.iframed input#toggle_addtorrent:not(checked) + label + hr + table, .iframed input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+.iframed input#toggle_addtorrent:checked + label + hr + table, .iframed input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+
+.peerinfo td:first-child {
+     background: url(images/peer.png) center center no-repeat;
+     padding-right: 10px !important;
+}
+
+.peerinfo td, .debuginfo td {
+     padding: 5px 4px !important;
+     word-spacing: 0em !important;
+}
+
+/* debug */
+
+.debuginfo td {
+     font-size: 8pt !important;
+     line-height: 120%;
+}
+
+.debuginfo td:first-child {
+     background: url(images/debuginfo.png) center center no-repeat;
+     background-size: 14px 14px;
+     background-blend-mode: luminosity;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+}
+
+.debugConnection {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     font-weight: bold !important;
+     color: #030;
+     font-weight: bold;
+     margin-right: 5px;
+}
+
+.from, .to {
+     font-family: sans-serif;
+     font-size: 12pt;
+     font-weight: bold;
+     vertical-align: middle;
+     line-height: 50%;
+}
+
+.debugConnStat {
+     color: #030;
+     margin-right: 4px;
+     white-space: nowrap;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     font-weight: bold !important;
+     word-spacing: -0.1em;
+}
+
+.debugConnStat b {
+     color: #272e3f;
+     margin-right: 0;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+}
+
+/* end debug */
+
+/* Resource Errors */
+
+.resourceError {
+     border: 1px solid #89f;
+     border-bottom: 2px solid #89f;
+     margin-bottom: 0;
+}
+
+.resourceError th {
+     background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #fff, #eef);
+     background-size: 24px auto, 100% 100%;
+     padding: 10px 10px 10px 40px;
+     font-size: 10pt !important;
+     border: none;
+     border-bottom: 1px solid #7778bf;
+}
+
+.resourceError td {
+     padding: 10px;
+     border: none;
+}
+
+.resourceError tr:nth-child(odd) {
+     background: #ddf;
+}
+
+.resourceError tr:nth-child(even) {
+     background: #eef;
+}
+
+#DoesNotExist {
+     margin-top: 10px;
+     border: none;
+}
+
+#DoesNotExist th {
+     border-top: 1px solid #7778bf;
+}
+
+#NotFound {
+     border: none;
+     border-top: 1px solid #7778bf;
+}
+
+/* end Resource Errors */
+
+#totals {
+     display: inline-block;
+     margin: 2px 0 2px 5px;
+     font-weight: bold !important;
+}
+
+/* Downloading Priorities */
+
+.snarkDirInfo input[type="radio"], .snarkDirInfo input[type="radio"]:checked {
+     margin: 0;
+     padding: 0;
+     min-height: 16px;
+     min-width: 16px;
+     vertical-align: middle;
+}
+
+.priority {
+     text-align: center;
+     width: 1%;
+     white-space: nowrap;
+}
+
+.priorityHigh, .priorityNormal, .prioritySkip {
+     display: inline-block;
+     width: 40px;
+     color: transparent;
+     vertical-align: middle;
+     margin: 3px 10px 3px 3px;
+     overflow: hidden;
+     font-size: 0;
+     text-align: left;
+}
+
+.priorityHigh {
+     background: url(/i2psnark/.resources/icons/clock_red.png) left 20px center no-repeat;
+}
+
+.priorityNormal {
+     background: url(/i2psnark/.resources/icons/clock.png) left 20px center no-repeat;
+}
+
+.prioritySkip {
+     background: url(/i2psnark/.resources/icons/cancel.png) left 18px center no-repeat;
+}
+
+/* end priorities */
+
+/* configs */
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#configs td:first-child {
+     min-width: 220px !important;
+     font-weight: bold;
+}
+
+#bwHelp {
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 14px auto;
+     padding-left: 28px !important;
+     width: 90%;
+     line-height: 100%;
+}
+
+#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+     font-style: normal;
+     font-weight: bold;
+}
+
+/* end configs */
+
+#filecheck {
+     display: inline-block;
+     margin: 5px 0;
+     background: url(images/progressbar.gif) left center no-repeat;
+     padding-left: 22px;
+}
+
+#filecheck a {
+     margin: 8px;
+}
+
+#torrentInfoControl td, #setPriority th {
+     text-align: right !important;
+     padding: 5px !important;
+     background: linear-gradient(to bottom, #fff, #eef) !important;
+}
+
+#torrentInfoControl input {
+     display: inline;
+}
+
+#setPriority th {
+     border-bottom: 1px solid #eef;
+}
+
+#torrentInfoStats td {
+     text-align: left !important;
+     padding-left: 2px !important;
+}
+
+#torrentInfoStats img {
+     margin: 1px 1px 2px 3px !important;
+}
+
+#torrentInfoStats b {
+     margin-left: 2px;
+}
+
+#torrentInfoStats span {
+     white-space: nowrap;
+     display: inline-block;
+     margin-right: 7px;
+}
+
+/* MS Edge 14+ rendering bug fix */
+_:-ms-lang(x), *, *:hover, *:focus, input, input:hover, input:focus, a:hover, a:focus {
+     filter: none !important;
+}
+
+/*responsive layout */
+
+@media screen and (max-width: 1000px) {
+body, td, .snarkMessages li, .snarkMessages a, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, .snarkAddInfo, .snarkFileStatus {
+     font-size: 8pt !important;
+}
+
+.snarkRefresh:link {
+     font-size: 9pt !important;
+}
+
+.snarkConfigTitle a, .snarkConfigTitle, label.toggleview {
+     font-size: 10pt !important;
+}
+
+.snarkTorrents td:first-child img {
+     max-height: 16px;
+}
+
+.snarkTorrentName, .snarkTorrentName a {
+     font-weight: bold;
+}
+
+.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
+.snarkConfigTitle a, label.toggleview, .configsectionpanel .snarkConfigTitle {
+     font-size: 12pt !important;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.dirInfoComplete {
+     display: none;
+}
+
+a.snarkRefresh:first-child {
+     padding-left: 26px !important;
+}
+}
+
+/* mini-mode: hide status text, upload speed + upload amount in main torrent table at 800px or less */
+
+@media screen and (max-width: 800px) {
+.page {
+      min-width: 600px !important;
+}
+
+.snarknavbar, .snarkMessages {
+      min-width: 580px !important;
+}
+
+.snarkTorrents th:nth-child(2), .snarkTorrents td:nth-child(2), .snarkTorrents th:nth-child(7),
+.snarkTorrents tfoot th:nth-child(3), .snarkTorrents td.snarkTorrentUploaded, .snarkTorrents th:nth-child(9),
+.snarkTorrents tfoot th:nth-child(5), .snarkTorrents td.snarkTorrentRateUp {
+     max-width: 0 !important;
+     overflow: hidden;
+     white-space: nowrap;
+     font-size: 0 !important;
+     padding: 0 !important;
+}
+
+.snarkTorrents th:nth-child(7) img {
+     display: none;
+}
+
+.snarkTorrents td:first-child img, .snarkTorrents td:nth-child(3) img, .snarkTorrents td:nth-child(4) img {
+     max-height: 14px !important;
+     width: auto;
+}
+
+.snarkTorrents thead img {
+     max-height: 18px !important;
+     width: auto;
+}
+
+.snarkTorrents thead th:nth-child(1), .snarkTorrents td:nth-child(1) {
+    width: 18px !important;
+    padding: 0;
+}
+
+.snarkTorrentAction {
+     width: auto !important;
+}
+
+#totals {
+     margin-left: 2px;
+}
+
+.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
+     width: 70%;
+}
+
+input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] {
+     min-width: 300px !important;
+}
+
+.trackerconfig input[type="text"] {
+     min-width: 50px !important;
+     max-width: 140px !important;
+}
+
+.newtorrentsection td:first-child, .addtorrentsection td:first-child {
+     min-width: 80px;
+}
+
+.newtorrentsection a, .trackerconfig a {
+     max-width: 200px;
+     display: inline-block;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+}
+
+#configs td:first-child {
+     min-width: 140px !important;
+}
+
+.trackerconfig a {
+     max-width: 140px !important;
+}
+
+.peerinfo, .debuginfo {
+     display: none;
+}
+}
+
+/* end mini-mode */
+
+@media screen and (min-width: 1200px) {
+.percentDownloaded {
+     pointer-events: none; /* hide tooltip */
+}
+
+#configs tr:nth-last-child(n+4) td {
+      padding-top: 3px;
+      padding-bottom: 3px;
+}
+
+.snarkTorrentName {
+     padding-left: 4px;
+}
+}
+
+@media screen and (min-width: 1400px) {
+body, td, button, input, select, .snarkAddInfo, code, tt, th, a, a:link, textarea {
+     font-size: 10pt !important;
+}
+
+.snarkMessages li, .snarkMessages a {
+     font-size: 9pt !important;
+     line-height: 130%;
+}
+
+a.snarkRefresh {
+     font-size: 11pt !important;
+}
+
+a.snarkRefresh:first-child {
+     padding-left: 28px !important;
+}
+
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus, .snarkRefresh:active, .snarkRefresh:visited,
+.snarkRefresh:link:first-child, .snarkRefresh:hover:first-child, .snarkRefresh:focus:first-child, .snarkRefresh:active:first-child, .snarkRefresh:visited:first-child,
+.snarkRefresh:link:nth-child(2), .snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2), .snarkRefresh:active:nth-child(2), .snarkRefresh:visited:nth-child(2) {
+     background-size: 16px auto, 100% 100% !important;
+}
+
+.configsectionpanel .snarkConfigTitle:hover, .snark {
+     font-size: 12pt !important;
+     padding: 3px 15px !important;
+}
+
+.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
+     font-size: 12pt !important;
+}
+
+input[type="submit"] {
+     min-width: 100px;
+}
+
+.snarkMessages {
+     height: 58px;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     font-size: 12pt !important;
+     padding: 4px 15px !important;
+}
+
+.snarkTorrentStatus b {
+     padding-right: 3px;
+}
+
+.snarkTorrentDownloaded, .snarkTorrertUploaded, .snarkTorrentRateDown, .snarkTorrentStatus, .peerinfo td:nth-child(2), .debuginfo td:nth-child(2) {
+     white-space: nowrap;
+}
+
+.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
+     padding: 4px !important;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     min-width: 240px;
+}
+
+.debuginfo td {
+     font-size: 10pt !important;
+     word-spacing: 0em;
+     padding-top: 4px !important;
+     padding-bottom: 4px !important;
+}
+
+.debugConnection {
+     background: #337;
+     border-radius: 2px;
+     padding: 2px 4px;
+     color: #fff;
+     margin-top: 2px;
+     margin-bottom: 2px;
+     font-size: 9pt !important;
+     display: inline-block;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
+.snarkConfigTitle a, label.toggleview,
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     font-size: 14pt !important;
+     padding: 3px 15px 4px !important;
+}
+}
+
+/* end responsive layout */
+
diff --git a/installer/resources/themes/snark/midnight/favicon.ico b/installer/resources/themes/snark/midnight/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..28658965c9486d89945244234f91d20162f1649b
Binary files /dev/null and b/installer/resources/themes/snark/midnight/favicon.ico differ
diff --git a/installer/resources/themes/snark/midnight/images/add.png b/installer/resources/themes/snark/midnight/images/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..6332fefea4be19eeadf211b0b202b272e8564898
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/add.png differ
diff --git a/installer/resources/themes/snark/midnight/images/bullet.png b/installer/resources/themes/snark/midnight/images/bullet.png
new file mode 100644
index 0000000000000000000000000000000000000000..a14d6b7b7d687387046dae324729726791955779
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/bullet.png differ
diff --git a/installer/resources/themes/snark/midnight/images/button_forum.png b/installer/resources/themes/snark/midnight/images/button_forum.png
new file mode 100644
index 0000000000000000000000000000000000000000..04985d90779bb953d21148123385fdd20a95c8a0
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/button_forum.png differ
diff --git a/installer/resources/themes/snark/midnight/images/button_forum_active.png b/installer/resources/themes/snark/midnight/images/button_forum_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2b4538e8bcc68e343ab59ac1c166ae9a722ea53
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/button_forum_active.png differ
diff --git a/installer/resources/themes/snark/midnight/images/button_forum_hover.png b/installer/resources/themes/snark/midnight/images/button_forum_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..c104dfcead51fc3103b25838aa6f33cab8ba4167
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/button_forum_hover.png differ
diff --git a/installer/resources/themes/snark/midnight/images/button_snark.png b/installer/resources/themes/snark/midnight/images/button_snark.png
new file mode 100644
index 0000000000000000000000000000000000000000..94e5a6046f900f979b52858aa0d497bce10b0191
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/button_snark.png differ
diff --git a/installer/resources/themes/snark/midnight/images/button_snark_active.png b/installer/resources/themes/snark/midnight/images/button_snark_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..745f14ef2e64ece9678cc6799449bb0bcb0c2ecb
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/button_snark_active.png differ
diff --git a/installer/resources/themes/snark/midnight/images/button_snark_hover.png b/installer/resources/themes/snark/midnight/images/button_snark_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe0813b2fe174743209fb42de5446fd56364d33e
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/button_snark_hover.png differ
diff --git a/installer/resources/themes/snark/midnight/images/button_tracker.png b/installer/resources/themes/snark/midnight/images/button_tracker.png
new file mode 100644
index 0000000000000000000000000000000000000000..c826b58afa388f798ea7c3e33c159c51c11ba4be
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/button_tracker.png differ
diff --git a/installer/resources/themes/snark/midnight/images/button_tracker_active.png b/installer/resources/themes/snark/midnight/images/button_tracker_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..abdbc720cc7f99dfdf800fbce70e7d530668209f
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/button_tracker_active.png differ
diff --git a/installer/resources/themes/snark/midnight/images/button_tracker_hover.png b/installer/resources/themes/snark/midnight/images/button_tracker_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..72566acd1f5434c499f39dbdb40e94b533d2a030
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/button_tracker_hover.png differ
diff --git a/installer/resources/themes/snark/midnight/images/complete.png b/installer/resources/themes/snark/midnight/images/complete.png
new file mode 100644
index 0000000000000000000000000000000000000000..96199806aa92cb7fdb15612c87106565460ef8cb
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/complete.png differ
diff --git a/installer/resources/themes/snark/midnight/images/config.png b/installer/resources/themes/snark/midnight/images/config.png
new file mode 100644
index 0000000000000000000000000000000000000000..8151463917ec88ca0962a5bfefb9f11c9122bff8
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/config.png differ
diff --git a/installer/resources/themes/snark/midnight/images/configuration.png b/installer/resources/themes/snark/midnight/images/configuration.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac61805e4b1383b027f0fbfe786c1f1c6e35d11b
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/configuration.png differ
diff --git a/installer/resources/themes/snark/midnight/images/create.png b/installer/resources/themes/snark/midnight/images/create.png
new file mode 100644
index 0000000000000000000000000000000000000000..44ccbf812879c42cb1f9587d865bcfc337ce6361
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/create.png differ
diff --git a/installer/resources/themes/snark/midnight/images/debuginfo.png b/installer/resources/themes/snark/midnight/images/debuginfo.png
new file mode 100644
index 0000000000000000000000000000000000000000..42c7cd6ab143aa45bbadec43ca28ff8868ffde20
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/debuginfo.png differ
diff --git a/installer/resources/themes/snark/midnight/images/delete.png b/installer/resources/themes/snark/midnight/images/delete.png
new file mode 100644
index 0000000000000000000000000000000000000000..a37f8c7f1a8d23babac993177015df3d727d86d8
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/delete.png differ
diff --git a/installer/resources/themes/snark/midnight/images/details.png b/installer/resources/themes/snark/midnight/images/details.png
new file mode 100644
index 0000000000000000000000000000000000000000..225e1fdd95d42b32099442da653959de105e5fbe
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/details.png differ
diff --git a/installer/resources/themes/snark/midnight/images/downloading.png b/installer/resources/themes/snark/midnight/images/downloading.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d01bb51372948d4254283e580dd91e1243380f1
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/downloading.png differ
diff --git a/installer/resources/themes/snark/midnight/images/dropdown.png b/installer/resources/themes/snark/midnight/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cb83f1d71562c7bce893c1e4b9fc4ebc24b2017
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/dropdown.png differ
diff --git a/installer/resources/themes/snark/midnight/images/dropdown_hover.png b/installer/resources/themes/snark/midnight/images/dropdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..999350953b1da342400f992c5fa72a7c23c7258b
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/dropdown_hover.png differ
diff --git a/installer/resources/themes/snark/midnight/images/eta.png b/installer/resources/themes/snark/midnight/images/eta.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd6e02b3c01aecc5368bca6d5f9d9fdbbf9d0513
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/eta.png differ
diff --git a/installer/resources/themes/snark/midnight/images/file.png b/installer/resources/themes/snark/midnight/images/file.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ac7fc6e273a63b0d7d84f4dcc6026515fcdcfe1
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/file.png differ
diff --git a/installer/resources/themes/snark/midnight/images/first.png b/installer/resources/themes/snark/midnight/images/first.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6930a18d555b9c2aa13b9b7e324195e226759de
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/first.png differ
diff --git a/installer/resources/themes/snark/midnight/images/hat.png b/installer/resources/themes/snark/midnight/images/hat.png
new file mode 100644
index 0000000000000000000000000000000000000000..bed0c5b74df36bd8c8b8de53f985dff2ecf378db
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/hat.png differ
diff --git a/installer/resources/themes/snark/midnight/images/head_rx.png b/installer/resources/themes/snark/midnight/images/head_rx.png
new file mode 100644
index 0000000000000000000000000000000000000000..50a95fb4c8684471e8a4902f3cbdd35f38c3196c
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/head_rx.png differ
diff --git a/installer/resources/themes/snark/midnight/images/head_rxspeed.png b/installer/resources/themes/snark/midnight/images/head_rxspeed.png
new file mode 100644
index 0000000000000000000000000000000000000000..b545a6796f6988b7ec2d25487cd7e455b617d066
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/head_rxspeed.png differ
diff --git a/installer/resources/themes/snark/midnight/images/head_tx.png b/installer/resources/themes/snark/midnight/images/head_tx.png
new file mode 100644
index 0000000000000000000000000000000000000000..f7fa43316b14023a73e6bc987e40fd3d017e7808
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/head_tx.png differ
diff --git a/installer/resources/themes/snark/midnight/images/head_txspeed.png b/installer/resources/themes/snark/midnight/images/head_txspeed.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b1fc7b317bbcee3f4ff4fdb7235da966707b601
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/head_txspeed.png differ
diff --git a/installer/resources/themes/snark/midnight/images/hidepeers.png b/installer/resources/themes/snark/midnight/images/hidepeers.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1f1e19bc950c09a663eb2818d00b7e1166e7a46
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/hidepeers.png differ
diff --git a/installer/resources/themes/snark/midnight/images/infocircle.png b/installer/resources/themes/snark/midnight/images/infocircle.png
new file mode 100644
index 0000000000000000000000000000000000000000..193e3253abcbee64683138032f0acf8d73c54452
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/infocircle.png differ
diff --git a/installer/resources/themes/snark/midnight/images/last.png b/installer/resources/themes/snark/midnight/images/last.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c63819768ce58593504715f5ab0aff426eb47d8
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/last.png differ
diff --git a/installer/resources/themes/snark/midnight/images/next.png b/installer/resources/themes/snark/midnight/images/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..195a9d707b853c9fc591a518bdd0cbb6e450d115
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/next.png differ
diff --git a/installer/resources/themes/snark/midnight/images/nopeers.png b/installer/resources/themes/snark/midnight/images/nopeers.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fb0e2cfccfc57e557ee70aee09c5aeb83c6d6f0
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/nopeers.png differ
diff --git a/installer/resources/themes/snark/midnight/images/peer.png b/installer/resources/themes/snark/midnight/images/peer.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f3408dc6c12d5b4c77955824f88dc99b005daf1
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/peer.png differ
diff --git a/installer/resources/themes/snark/midnight/images/previous.png b/installer/resources/themes/snark/midnight/images/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..79558ab1e169a38795bf6fa6c96c51ec63e36c9b
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/previous.png differ
diff --git a/installer/resources/themes/snark/midnight/images/priority.png b/installer/resources/themes/snark/midnight/images/priority.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea5e451d97a43b84b83f5bdbaeee4e8454154d56
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/priority.png differ
diff --git a/installer/resources/themes/snark/midnight/images/progressbar.gif b/installer/resources/themes/snark/midnight/images/progressbar.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e204f6b319698df8029a9e6c79cc1ea79b5e297e
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/progressbar.gif differ
diff --git a/installer/resources/themes/snark/midnight/images/remove.png b/installer/resources/themes/snark/midnight/images/remove.png
new file mode 100644
index 0000000000000000000000000000000000000000..12f988b18088a079dd43a20131a7bae1c9ed375a
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/remove.png differ
diff --git a/installer/resources/themes/snark/midnight/images/seeding.png b/installer/resources/themes/snark/midnight/images/seeding.png
new file mode 100644
index 0000000000000000000000000000000000000000..e58e518bc0f011eb50ef1ad727a3091048f6d1bd
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/seeding.png differ
diff --git a/installer/resources/themes/snark/midnight/images/showpeers.png b/installer/resources/themes/snark/midnight/images/showpeers.png
new file mode 100644
index 0000000000000000000000000000000000000000..12a2111ffb3e422d25ac2ab08e7d00053100e221
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/showpeers.png differ
diff --git a/installer/resources/themes/snark/midnight/images/size.png b/installer/resources/themes/snark/midnight/images/size.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c0ab094704d088ee1bcb2330df1e6f18d2ced70
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/size.png differ
diff --git a/installer/resources/themes/snark/midnight/images/snark_add.png b/installer/resources/themes/snark/midnight/images/snark_add.png
new file mode 100644
index 0000000000000000000000000000000000000000..ddc8cbf3b019c7bd1ce03f3567887a833e428d12
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/snark_add.png differ
diff --git a/installer/resources/themes/snark/midnight/images/snark_create.png b/installer/resources/themes/snark/midnight/images/snark_create.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e767b9b2210b179316c02a86627570cd3d44bd6
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/snark_create.png differ
diff --git a/installer/resources/themes/snark/midnight/images/stalled.png b/installer/resources/themes/snark/midnight/images/stalled.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d7b193b51ef414e9f69276722331ee066e3517e
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/stalled.png differ
diff --git a/installer/resources/themes/snark/midnight/images/start.png b/installer/resources/themes/snark/midnight/images/start.png
new file mode 100644
index 0000000000000000000000000000000000000000..6bf001c4e024a7b9dc4d98e062a0c0f88b772154
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/start.png differ
diff --git a/installer/resources/themes/snark/midnight/images/start_all.png b/installer/resources/themes/snark/midnight/images/start_all.png
new file mode 100644
index 0000000000000000000000000000000000000000..a30d3a03442d31459913dc52ae074a9a9e969b71
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/start_all.png differ
diff --git a/installer/resources/themes/snark/midnight/images/status.png b/installer/resources/themes/snark/midnight/images/status.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b20c919e76921387aa2bb8a65d1c2fbd45b4d08
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/status.png differ
diff --git a/installer/resources/themes/snark/midnight/images/stop.png b/installer/resources/themes/snark/midnight/images/stop.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca007e86fb370a83e5316f0865c5b98713070fff
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/stop.png differ
diff --git a/installer/resources/themes/snark/midnight/images/stop_all.png b/installer/resources/themes/snark/midnight/images/stop_all.png
new file mode 100644
index 0000000000000000000000000000000000000000..5153c4e850ef1c32165d5d4415db46235e483fc2
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/stop_all.png differ
diff --git a/installer/resources/themes/snark/midnight/images/stop_all_hover.png b/installer/resources/themes/snark/midnight/images/stop_all_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..124a31caea0922e15aac81bb0916aad34abe001e
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/stop_all_hover.png differ
diff --git a/installer/resources/themes/snark/midnight/images/stopped.png b/installer/resources/themes/snark/midnight/images/stopped.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5b41579e3f41fd4cce24968eb302eaa6a76684b
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/stopped.png differ
diff --git a/installer/resources/themes/snark/midnight/images/torrent.png b/installer/resources/themes/snark/midnight/images/torrent.png
new file mode 100644
index 0000000000000000000000000000000000000000..12d1c19fa09a6a42c0ab0d4f1c505cfc79b9a7ba
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/torrent.png differ
diff --git a/installer/resources/themes/snark/midnight/images/trackererror.png b/installer/resources/themes/snark/midnight/images/trackererror.png
new file mode 100644
index 0000000000000000000000000000000000000000..f41191f6cb5251e0b48097002137a240fe62b4dc
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/trackererror.png differ
diff --git a/installer/resources/themes/snark/midnight/images/up.png b/installer/resources/themes/snark/midnight/images/up.png
new file mode 100644
index 0000000000000000000000000000000000000000..8a3138b951fed7286736cd40502957fc16b3de32
Binary files /dev/null and b/installer/resources/themes/snark/midnight/images/up.png differ
diff --git a/installer/resources/themes/snark/midnight/snark.css b/installer/resources/themes/snark/midnight/snark.css
new file mode 100644
index 0000000000000000000000000000000000000000..037f8d3940ecea5e51684211bbeecf412eefcc9a
--- /dev/null
+++ b/installer/resources/themes/snark/midnight/snark.css
@@ -0,0 +1,2418 @@
+/* I2PSnark theme "Midnight" */
+/* Author: dr|z3d */
+
+body {
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     color: #c9ceff;
+     background: #000;
+     margin: 7px 6px;
+}
+
+/* preload top navigation mouseovers */
+body {
+     background: linear-gradient(to bottom, #000, #000),
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat, #000;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
+}
+
+body.iframed {
+     margin: 1px 0 !important;
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+}
+
+/* preload top navigation mouseovers */
+body.iframed {
+     background: url(/themes/console/images/transparent.gif),
+     url(images/button_snark_hover.png) center center no-repeat,
+     url(images/button_snark_active.png) center center no-repeat,
+     url(images/button_tracker_hover.png) center center no-repeat,
+     url(images/button_tracker_active.png) center center no-repeat,
+     url(images/button_forum_hover.png) center center no-repeat,
+     url(images/button_forum_active.png) center center no-repeat, #000 !important;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
+}
+
+* {
+     outline: none;
+}
+
+.page {
+     font-size: 9pt !important;
+     line-height: 160% !important;
+     margin: 5px 0 0 0;
+     padding: 0 0 12px;
+     text-align: center;
+     opacity: 1;
+     color: #040033;
+     border: 1px solid #443da0;
+     border-radius: 0 0 2px 2px;
+     background: #001;
+     background: linear-gradient(to bottom, #000, #003);
+     background-size: 100% 2px;
+     box-shadow: inset 0 0 3px 1px #000;
+}
+
+.iframed .page {
+     margin: 4px 0 5px;
+     padding: 0;
+     border: none;
+     background: none;
+     box-shadow: none;
+     border-radius: 0;
+}
+
+.snarknavbar, .page {
+     min-width: 900px !important;
+}
+
+/* topnav */
+
+.snarknavbar {
+     margin: 0 0 -6px;
+     padding: 14px 0;
+     text-align: center;
+     border: 1px solid #443da0;
+     border-radius: 2px 2px 0 0;
+     background: linear-gradient(to bottom, #121225 0%, #121225 50%, #000011 50%, #00000d 50%, #00000d 100%);
+     position: sticky;
+     top: -1px;
+     z-index: 999;
+}
+
+.iframed .snarknavbar {
+     border: none;
+     border-top: 1px solid #443da0;
+     border-bottom: 1px solid #443da0;
+     border-radius: 0;
+     padding-top: 14px;
+     margin-bottom: -1px;
+     position: static;
+}
+
+.snarkRefresh:link:first-child {
+     padding-left: 28px !important;
+     border-radius: 2px 0 0 2px;
+}
+
+.snarkRefresh:link:last-child {
+     margin-left: 3px;
+}
+
+.snarkRefresh:link, .snarkRefresh:visited {
+     font-size: 9pt;
+     font-weight: bold;
+     margin: 0 -1px 0 0 !important;
+     padding: 5px 7px 5px 26px !important;
+     text-decoration: none !important;
+     letter-spacing: 0.15em;
+     text-transform: uppercase !important;
+     opacity: .8;
+     color: #89f;
+     border: 1px solid #443da0;
+     border-radius: 0;
+     background: #001 url(images/button_tracker.png) 9px center no-repeat;
+     background: url(images/button_tracker.png) 9px center no-repeat, linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%);
+     box-shadow: inset 0 0 0 1px #000, 0 0 1px #000;
+     text-shadow: 0 0 1px #000;
+}
+
+.snarkRefresh:link:first-child {
+     background: #001 url(images/button_snark.png) 9px center no-repeat;
+     background: url(images/button_snark.png) 9px center no-repeat, linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%);
+}
+
+.snarkRefresh:link:nth-child(2) {
+     background: #001 url(images/button_forum.png) 9px center no-repeat;
+     background: url(images/button_forum.png) 9px center no-repeat, linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%);
+}
+
+.snarkRefresh:first-child:hover, .snarkRefresh:first-child:focus {
+     background: #04091f url(images/button_snark_hover.png) 9px center no-repeat;
+     background: url(images/button_snark_hover.png) 9px center no-repeat, linear-gradient(to bottom, #060e2f 0%, #060e2f 50%, #000 50%, #000 100%);
+}
+
+.snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2) {
+     background: #04091f url(images/button_forum_hover.png) 9px center no-repeat;
+     background: url(images/button_forum_hover.png) 9px center no-repeat, linear-gradient(to bottom, #004, #004 50%, #002 50%);
+}
+
+.snarkRefresh:first-child:active {
+     background: #652787 url(images/button_snark_active.png) !important;
+     background-repeat: no-repeat !important;
+     background-position: 9px center !important;
+}
+
+.snarkRefresh:active:nth-child(2) {
+     background: #652787 url(images/button_forum_active.png) !important;
+     background-repeat: no-repeat !important;
+     background-position: 9px center !important;
+     box-shadow: inset 3px 3px 2px #1f002f;
+}
+
+.snarkRefresh:hover, .snarkRefresh:focus {
+     text-decoration: none !important;
+     border-radius: 0;
+     background: #141c3f url(images/button_tracker_hover.png) 9px center no-repeat;
+     background: url(images/button_tracker_hover.png) 9px center no-repeat, linear-gradient(to bottom, #060e2f 0%, #060e2f 50%, #000 50%, #000 100%);
+     box-shadow: inset 0 0 0 1px #000;
+     opacity: 1;
+     color: #652787;
+     border-color: #652787;
+}
+
+.snarkRefresh:active {
+     text-decoration: none !important;
+     color: #fff;
+     border: 1px solid #fff;
+     background: #652787 url(images/button_tracker_active.png) !important;
+     background-repeat: no-repeat !important;
+     background-position: 9px center !important;
+     box-shadow: inset 3px 3px 2px #1f002f;
+     text-shadow: none;
+}
+
+.snarkRefresh:link:last-of-type {
+     border-radius: 2px !important;
+}
+
+.snarkRefresh:link[target="_blank"]:last-child {
+     border-radius: 0 2px 2px 0 !important;
+}
+
+.snarkRefresh:last-child {
+     margin-top: -5px !important;
+     border-radius: 0 2px 2px 0 !important;
+}
+
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus {
+     background-size: 16px 16px, 100% 100% !important;
+}
+
+.snarkRefresh:active, .snarkRefresh:hover:active, .snarkRefresh:first-child:active, .snarkRefresh:first-child:hover:active,
+.snarkRefresh:nth-child(2):active, .snarkRefresh:nth-child(2):hover:active {
+     background-size: 16px 16px !important;
+}
+
+/* end topnav */
+
+/* screenlog */
+
+.snarkMessages {
+     font: normal 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     overflow: auto;
+     width: auto;
+     height: 55px;
+     margin: 0;
+     padding: 2px 5px;
+     border-spacing: 0;
+     text-align: left;
+     color: #778;
+     border-bottom: 1px solid #443da0;
+     background: #000 url(images/hat.png) no-repeat scroll right top;
+     background: url(images/hat.png) no-repeat scroll right top, linear-gradient(to bottom, #002, #001);
+     background-size: auto 110%;
+     background-blend-mode: luminosity;
+}
+
+.iframed .snarkMessages {
+     margin-top: -5px;
+}
+
+.snarkMessages a:active {
+     color: #ff007c !important;
+}
+
+.snarkMessages ul {
+     margin: -1px 0 2px 0;
+     padding: 0 0 0 14px;
+     list-style: none;
+}
+
+.snarkMessages li {
+     margin-left: -15px;
+}
+
+.snarkMessages li::before {
+     content: "";
+     display: inline-block;
+     background: url(images/bullet.png) left bottom no-repeat;
+     width: 14px;
+     height: 11px;
+     background-size: 9px 9px;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+.snarkMessages img {
+     float: right;
+     margin: -3px -4px 4px 4px;
+     padding: 2px;
+     opacity: 0.8;
+     background: #001;
+     border: 1px solid #443da0;
+     border-top: 0 none;
+     border-right: 0 none;
+     width: 10px;
+     mix-blend-mode: luminosity;
+     position: sticky;
+     top: -3px;
+}
+
+.snarkMessages img:hover, .snarkMessages img:focus {
+     mix-blend-mode: normal !important;
+     border: 1px solid #443da0 !important;
+     border-top: 0 none !important;
+     border-right: 0 none !important;
+     background: #000;
+}
+
+.logshim {
+     margin-top: 10px !important;
+}
+
+.iframed .logshim {
+     margin-top: 20px !important;
+}
+
+/* end screenlog */
+
+tt, code {
+     font-family: "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+}
+
+pre {
+     font: 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font-weight: bold !important;
+     width: 100%;
+     height: 8px;
+     padding: 0;
+     text-align: left !important;
+     color: #4133ff;
+}
+
+table {
+     width: 100%;
+     margin: 0 0 10px 0;
+     padding: 0;
+     border-spacing: 0;
+     border-collapse: collapse;
+     opacity: 1 !important;
+     color: #201f36;
+     border: 0;
+}
+
+tr {
+     opacity: 1;
+}
+
+thead, tfoot {
+     background: #001;
+}
+
+thead {
+     border-bottom: 1px solid #010011;
+}
+
+th {
+     font-size: 8pt;
+     padding: 8px 2px;
+     color: #c9ceff;
+     border-top: 1px solid #443da0;
+     border-bottom: 1px solid #443da0;
+     background: #001;
+}
+
+thead th, #torrentInfoControl td {
+     background: linear-gradient(to bottom, #121225, #00000d) !important;
+}
+
+th:first-child {
+     padding-left: 2px;
+     text-align: left !important;
+}
+
+tfoot td:first-child {
+     padding-left: 0;
+     text-align: left !important;
+}
+
+th:first-child img {
+     margin: 1px -2px 3px 1px !important;
+}
+
+th:nth-child(2) img {
+     margin: 1px 5px 3px 2px !important;
+}
+
+tfoot th {
+     padding-bottom: 4px !important;
+}
+
+tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img {
+     margin: 0 2px 3px 0 !important;
+     padding-right: 0 !important;
+}
+
+tfoot tr:nth-child(n+1) {
+     text-align: left;
+}
+
+.headerstatus {
+     text-align: left;
+}
+
+.headerpriority {
+     padding-left: 10px;
+     text-align: left;
+}
+
+.ParentDir {
+     font-size: 8pt;
+     padding: 4px 0;
+     text-align: left !important;
+     border: 1px solid #1d1b3f !important;
+     border-right: 0 !important;
+     border-left: 0 !important;
+     background: #001;
+}
+
+.ParentDir a {
+     font-weight: bold !important;
+     margin-left: -4px;
+     display: inline-block;
+     width: 100%;
+}
+
+.priority {
+     font-size: 8pt;
+     min-width: 160px;
+     vertical-align: middle;
+}
+
+.snarkTorrents {
+     margin: 10px 0 0 0;
+     border: none;
+     background: #001;
+}
+
+.iframed .snarkTorrents {
+     margin-top: -1px;
+}
+
+.snarkTorrents th {
+     text-align: center;
+}
+
+.snarkTorrents thead th:first-child {
+     width: 36px;
+/*     padding-right: 0;*/
+     text-align: center !important;
+}
+
+.snarkTorrents th:nth-child(2) {
+     text-align: left;
+}
+
+.snarkTorrents th br {
+     display: none; /* kill double height button display */
+}
+
+.snarkTorrents tbody tr:last-child td {
+     border-bottom: 1px solid #443da0 !important;
+}
+
+.snarkTorrents tfoot, .snarkTorrents tfoot th {
+     font-weight: normal !important;
+     border-top: 1px solid #443da0 !important;
+}
+
+.snarkTorrents tfoot th::first-line {
+     font-weight: bold;
+}
+
+.snarkTorrents tfoot th:nth-child(n+2) {
+     white-space: nowrap;
+}
+
+.snarkTorrents tfoot th:nth-child(2) {
+     text-align: center;
+}
+
+.snarkTorrents th:nth-child(n+4) {
+     text-align: center;
+}
+
+.snarkTorrents tfoot th, .SnarkTorrents tfoot th tt {
+     font-weight: bold;
+}
+
+.snarkTorrents tfoot th tt {
+     margin-left: 2px;
+}
+
+.snarkTorrents tfoot th:nth-child(3) {
+     text-align: center;
+}
+
+.snarkTorrents tfoot th {
+     vertical-align: top;
+}
+
+.snarkTorrents tfoot th br {
+     display: inline-block;
+     margin-left: 20px !important;
+}
+
+.SnarkTorrents td:nth-child(6), .SnarkTorrents td:nth-child(7), .SnarkTorrents td:nth-child(8) {
+     text-align: center !important;
+}
+
+.snarkTorrents th {
+     text-align: left;
+}
+
+.snarkTorrents thead th {
+     background: linear-gradient(to bottom, #121225 0%, #121225 50%, #000011 50%, #00000d 50%, #00000d 100%) !important;
+     padding: 2px 1px;
+}
+
+.snarkTorrents thead th:nth-child(3) {
+     text-align: right;
+}
+
+.snarkTorrents td {
+     line-height: 110%;
+     text-align: left;
+     padding: 1px;
+}
+
+.snarkTorrents td:nth-child(1) {
+     width: 36px !important;
+}
+
+.snarkTorrents td:nth-child(3) {
+     width: 16px !important;
+     padding: 0 !important;
+     text-align: right !important;
+}
+
+.snarkTorrents td:nth-child(4) {
+     width: 16px !important;
+     padding: 0 2px 0 0 !important;
+     text-align: center !important;
+}
+
+.snarkTorrents td[colspan="10"] {
+     padding: 2px;
+}
+
+.snarkTorrents img {
+     margin: 0 !important;
+     padding: 0 !important;
+}
+
+.snarkTorrents tt {
+     font-family: "Droid Sans Mono", "Noto Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font-size: 8pt;
+     background: #2d103f;
+     color: #fff;
+     padding: 2px 3px;
+     border-radius: 2px;
+     display: inline-block;
+     margin: 1px 3px;
+     letter-spacing: 0.1em;
+}
+
+.snarkTorrentInfo img {
+     max-height: 16px !important;
+     margin: 1px 0 1px 2px !important;
+     mix-blend-mode: luminosity;
+}
+
+.snarkTorrentInfo a img {
+     mix-blend-mode: normal;
+}
+
+.snarkTorrentInfo b {
+     margin-right: 2px !important;
+}
+
+.snarkTorrentInfo th {
+     padding: 4px !important;
+     text-align: left;
+     border-top: none;
+}
+
+.snarkTorrentInfo th:first-child {
+     background: url(images/file.png) no-repeat 6px center, linear-gradient(to bottom, #010011, #000);
+     background-size: 14px;
+     background-blend-mode: luminosity;
+}
+
+.snarkTorrentInfo th:nth-child(2) {
+     font-size: 9pt;
+     padding: 5px 5px 5px 0 !important;
+}
+
+.snarkTorrentInfo td {
+     text-align: left !important;
+     vertical-align: middle !important;
+     font-size: 9pt;
+}
+
+.snarkTorrentInfo td:first-child {
+     width: 20px !important;
+     padding: 3px 4px 4px !important;
+}
+
+.snarkTorrentInfo input[type="submit"] {
+     min-width: 60px;
+     text-align: center;
+}
+
+.snarkTorrentInfo tr:nth-last-child(2) td {
+     padding: 5px 2px;
+}
+
+.snarkTorrentInfo tr:last-child {
+     border-top: 1px solid #443da0 !important;
+     background: none;
+}
+
+.snarkTorrentInfo tr:last-child td {
+     padding: 10px 5px !important;
+     text-align: right !important;
+}
+
+.SnarkTorrentInfo {
+     margin-bottom: 1px !important;
+     border-bottom: 1px solid #443da0;
+}
+
+.snarkTorrentInfo tr:nth-child(even) {
+     color: #7670c2;
+     background: #010010;
+}
+
+.snarkTorrentInfo tr:nth-child(odd) {
+     color: #7670c2;
+     background: #02001a;
+}
+
+.SnarkDirInfo {
+     margin-top: 10px !important;
+     margin-bottom: -13px;
+     border-bottom: 1px solid #443da0;
+}
+
+.snarkDirInfo th img {
+     margin: 0 !important;
+}
+
+
+.snarkDirInfo th:nth-child(2) {
+     padding-right: 10px;
+}
+
+.snarkDirInfo td {
+     padding: 5px;
+}
+
+.snarkDirInfo th:first-child {
+     padding-left: 5px;
+}
+
+.snarkDirInfo td:first-child {
+     padding-left: 4px;
+     text-align: left;
+}
+
+.snarkDirInfo td:first-child img {
+     padding-right: 6px;
+}
+
+.snarkDirInfo tr:last-child td {
+     border-bottom: 1px solid #443da0 !important;
+}
+
+/*
+.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a {
+     display: inline-block;
+     width: 100%;
+     padding: 2px 0;
+}
+*/
+
+.snarkDirInfo .headerpriority {
+     text-align: center !important;
+     vertical-align: middle;
+}
+
+.snarkDirInfo tr:last-child {
+     border-bottom: 1px solid #443da0 !important;
+}
+
+.headerpriority input[type=submit] {
+     margin: 5px;
+}
+
+table.SnarkDirInfo img {
+     max-width: 16px;
+     max-height: 16px;
+}
+
+.snarkDirInfo thead img {
+     max-width: none;
+     max-height: none;
+     margin: 0 !important;
+}
+
+/*
+.snarkDirInfo .headerpriority {
+     text-align: center !important;
+     vertical-align: middle;
+}
+*/
+
+td.subHeaderPriority, td.priority {
+     width: 0;
+     min-width: 160px !important;
+     padding: 0 5px 0 0 !important;
+     text-align: center !important;
+}
+
+td.subHeaderPriority {
+     font-size: 7.5pt;
+     font-weight: bold;
+     padding: 0 1px !important;
+     text-align: center !important;
+     background: #020022;
+     background: url(images/snarktopnav.png) repeat-x scroll center center #010011;
+}
+
+.headerpriority br {
+     display: none;
+}
+
+.headerpriority img {
+     padding: 4px !important;
+}
+
+/*
+.headerstatus {
+     min-width: 250px;
+}
+
+td.priority:last-child {
+}
+*/
+
+.priority {
+     white-space: nowrap;
+}
+
+tr.priority:last-child {
+     border-bottom: none !important;
+}
+
+th.headerdownloaded {
+     padding-left: 25px !important;
+}
+
+#setPriority th {
+     text-align: right !important;
+     padding-top: 10px;
+     padding-bottom: 10px;
+}
+
+#setPriority input:disabled[type="submit"] {
+     display: none;
+}
+
+.parentDir img {
+     padding-left: 3px;
+     mix-blend-mode: luminosity;
+}
+
+td.snarkFileStatus {
+     font-size: 8pt;
+     text-align: left;
+}
+
+td.snarkFileIcon {
+     width: 16px;
+     padding: 0;
+}
+
+td.snarkFileStatusIcon {
+     width: 24px;
+     padding: 0 4px 0 0;
+     text-align: center;
+}
+
+td {
+     font-size: 9pt;
+     padding: 1px;
+     color: #c9ceff !important;
+}
+
+.mainsection td {
+     color: #c9ceff;
+}
+
+td:first-child {
+     font-size: 9pt;
+     text-align: right;
+}
+
+.center {
+     text-align: center !important;
+}
+
+.snarkTorrentName {
+     line-height: 110%;
+     padding: 0;
+     font-size: 8.5pt;
+}
+
+.snarkTorrentName a, .snarkDirInfo td.snarkFileName a {
+     font-weight: bold !important;
+}
+
+.snarkTorrentAction {
+     width: 60px;
+     margin: 0 !important;
+     padding: 1px !important;
+     text-align: center !important;
+}
+
+/* MS Edge fix */
+_:-ms-lang(x), .snarkTorrentAction {
+     width: 72px !important;
+}
+
+.snarkTorrentAction img {
+     margin: 0 2px !important;
+     opacity: 1;
+}
+
+.snarkTorrentAction img:hover {
+     opacity: 1;
+     box-shadow: 0 0 1px 1px #652787;
+}
+
+td.snarkTorrentAction {
+     width: 66px;
+     min-width: 66px;
+}
+
+.snarkTorrentNoneLoaded {
+     font-size: 8.5pt;
+     font-weight: bold;
+     padding: 10px 5px;
+     text-align: center !important;
+     color: #3222ff !important;
+     border-bottom: 1px solid #443da0;
+     background: #001;
+}
+
+.snarkTorrentStatus {
+     padding: 2px 2px 2px 0;
+     text-align: left !important;
+     font-size: 8pt;
+     min-width: 48px;
+     text-align: left !important;
+     color: #9b96e0 !important;
+     white-space: nowrap;
+}
+
+.snarkTorrentStatus {
+     padding-right: 3px !important;
+}
+
+.snarkTorrentStatus b {
+     margin-right: 3px;
+}
+
+.snarkTorrentStatus, .snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
+     font-size: 8pt;
+     line-height: 90%;
+     padding: 0 3px;
+}
+
+.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
+     text-align: center !important;
+}
+
+.snarkTorrentDownloaded {
+     color: #c9ceff !important;
+     white-space: nowrap;
+}
+
+td.snarkTorrentDownloaded {
+     font-weight: bold;
+     padding: 0 5px;
+}
+
+.snarkTorrentUploaded {
+     color: #7670c2 !important;
+}
+
+.snarkTorrentRateUp {
+     color: #7670c2 !important;
+}
+
+.snarkTorrentRateDown {
+     color: #7670c2 !important;
+}
+
+.snarkTorrents img {
+     padding: 2px !important;
+}
+
+.snarkTorrents th img {
+     padding: 2px !important;
+     margin-bottom: 2px !important;
+}
+
+.snarkTorrents thead th:last-child img {
+     padding: 2px !important;
+}
+
+.snarkTorrents tfoot th {
+     padding: 6px 4px !important;
+     background: #000;
+}
+
+.snarkTorrents tr:hover, .snarkDirInfo tr:hover {
+     background: #040033 !important;
+}
+
+.snarkTorrents tr:hover td, .snarkDirInfo tr:hover td {
+     color: #c9ceff !important;
+}
+
+.snarkDirInfo tr:hover .snarkFileStatus img {
+     mix-blend-mode: normal;
+}
+
+/*
+.ParentDir a, .ParentDir a:visited {
+     color: #7972d1 !important;
+}
+*/
+
+.snarkTorrents a {
+     display: inline-block;
+     width: 100%;
+}
+
+/*
+.snarkTorrents tr:hover a, .snarkDirInfo tr:hover a {
+     color: #a099ff;
+}
+
+.snarkTorrents a:hover, td[onclick]:hover a, .snarkDirInfo a:hover {
+     color: #652787 !important;
+}
+
+td[onclick]:hover {
+     cursor: pointer !important;
+}
+*/
+
+.snarkTorrentEven {
+     background: #010010;
+}
+
+.snarkTorrentEven:nth-child(even) {
+     background: #010010;
+}
+
+.snarkTorrentEven:nth-child(odd) {
+     background: #010008;
+}
+
+.snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkTorrentEven td {
+     border-top: 1px inset #12111f !important;
+}
+
+_:-ms-lang(x), .snarkTorrentOdd, .snarkTorrentOdd td, .SnarkTorrentEven, .SnarkTorrentEven td {
+     border-top: 1px solid #12111f !important;
+}
+
+.snarkTorrentOdd {
+     background: #010008 !important;
+}
+
+.snarkTorrentOdd:nth-child(even) {
+     background: #010010 !important;
+}
+
+.snarkTorrentOdd:nth-child(odd) {
+     background: #010008 !important;
+}
+
+.snarkTorrentOdd td, .snarkTorrentEven td {
+     color: #c9ceff !important;
+     border-top: none !important;
+}
+
+.SnarkTorrentOdd tr:nth-child(odd) {
+     background: #010010;
+}
+
+.snarkFileName {
+     font-size: 9pt !important;
+     padding: 4px 0 !important;
+     text-align: left !important;
+}
+
+.snarkFileSize {
+     font-weight: normal;
+     padding: 4px 2px;
+     color: #7670c2 !important;
+}
+
+.snarkFileStatus {
+     font-style: italic;
+     text-align: left;
+     white-space: nowrap;
+}
+
+.snarkTorrentETA {
+     font-style: italic;
+     color: #7b74e0 !important;
+     padding-left: 3px !important;
+     padding-right: 3px !important;
+     text-align: center !important;
+}
+
+/*
+div.percentBarOuter {
+      background: #000 !important;
+      border: 1px solid #9f9;
+      border-bottom: 1px solid #474;
+      border-right: 1px solid #474;
+      border-radius: 0;
+      float: left;
+      box-shadow: none;
+      opacity: 1;
+}
+
+div.percentBarInner {
+      border: none;
+      height: 14px;
+      background: #1c943a;
+      background: linear-gradient(to bottom,  #1c943a 0%, #092f10 50%, #0d2707 50%, #091b05 50%, #091503 100%);
+}
+
+div.percentBarInner.percentBarComplete {
+      background: #001100;
+      background: linear-gradient(to bottom,  #001100 0%, #002200 52%, #000000 52%, #001100 100%);
+}
+
+.percentBarText, .percentBarOuter {
+      text-align: center;
+      height: 14px;
+      top: 0;
+      width: 80px;
+}
+
+.percentBarText{
+      text-align: center;
+      font-weight: bold;
+      line-height: 140%;
+      text-shadow: 0 1px 1px #000;
+}
+
+.snarkTorrentDownloaded .percentBarText, .snarkTorrentDownloaded .percentBarOuter  {
+      width: 110px !important;
+      word-spacing: -0.2em;
+      font-size: 7.5pt;
+}
+
+*/
+
+.choked {
+     color: #900 !important;
+}
+
+.unchoked {
+     color: #090 !important;
+}
+
+.thumb {
+     max-width: 16px;
+     transition: ease all 0.3s;
+}
+
+.thumb:hover {
+     max-width: 96px;
+     max-height: 64px;
+     transition: ease all 0.3s;
+     margin-left: -4px;
+}
+
+.snarkNewTorrent {
+     font-size: 9pt;
+}
+
+.snarkAddInfo {
+     font-size: 9pt;
+     line-height: 130% !important;
+     background: url(images/infocircle.png) left center no-repeat;
+     background-size: 14px auto;
+     padding-left: 20px;
+     margin-top: 5px;
+     display: inline-block;
+}
+
+.snarkConfigTitle, label.toggleview {
+     font-size: 10pt;
+     font-weight: bold;
+     font-variant: small-caps !important;
+     display: inline-block;
+     min-width: 200px;
+     margin: -1px 0 -5px 0;
+     padding: 3px 25px 3px 22px;
+     text-align: center !important;
+     letter-spacing: .15em;
+     border: 1px solid #443da0;
+     background: #191729;
+     background: linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000 56%, #000 100%) !important;
+     box-shadow: inset 0 0 0 1px #000;
+     text-shadow: 0 0 1px #000;
+}
+
+.snarkConfigtitle:hover, label.toggleview:hover {
+     background: #002 !important;
+     background: linear-gradient(to bottom, #004, #004 50%, #002 50%) !important;
+}
+
+.snarkConfigtitle:active, label.toggleview:active {
+     background: #003 !important;
+     background: linear-gradient(to bottom, #004, #004 50%, #002 50%) !important;
+     box-shadow: inset 3px 3px 3px #000;
+}
+
+.configsectionpanel .snarkConfigtitle:hover, .configsectionpanel .snarkConfigtitle:active {
+     background: linear-gradient(to bottom, #191729 0%, #201f33 7%, #1f1e32 9%, #161525 21%, #090812 49%, #05050e 50%, #020206 51%, #010103 53%, #000 56%, #000 100%) !important;
+     box-shadow: inset 0 0 0 1px #000 !important;
+}
+
+.snarkConfigTitle {
+     margin-bottom: -7px;
+}
+
+.configsectionpanel .snarkConfigTitle {
+     padding-bottom: 4px;
+}
+
+.configsectionpanel .snarkConfigTitle {
+     margin: -1px -1px -17px;
+     padding: 8px !important;
+     text-align: left !important;
+     display: block;
+     font-variant: normal !important;
+     text-transform: uppercase;
+     font-size: 11pt !important;
+     vertical-align: middle !important;
+}
+
+.iframed .configsectionpanel .snarkConfigTitle {
+     margin: -1px 0 -17px !important;
+     border-left: none !important;
+     border-right: none !important;
+}
+
+.snarkConfigTitle a, .snarkConfigTitle a:visited {
+     color: #89f !important;
+     display: inline-block;
+     width: 100%;
+}
+
+.snarkConfigTitle:hover a, .snarkConfigTitle a:hover, .snarkConfigTitle a:visited:hover, .toggleview:hover {
+     color: #652787 !important;
+}
+
+.snarkConfigTitle a:active, .toggleview:active {
+     color: #4f0519 !important;
+}
+
+.snarkConfigTitle a:hover img, .snarkConfigTitle a:focus img, .toggleview:hover img, .toggleview:focus img {
+     filter: drop-shadow(0 0 1px #652787);
+}
+
+.snarkConfigTitle a:active img, .toggleview:active img {
+     transform: rotate(90deg);
+     transition: ease transform 0.3s 0s;
+}
+
+.snarkConfigTitle img, label.toggleview img {
+     margin-right: -2px;
+     margin-top: -1px;
+     filter: drop-shadow(0 0 1px #000);
+/*     filter: sepia(100%) hue-rotate(150deg) drop-shadow(0 0 1px #000);*/
+}
+
+.snarkConfig {
+     font-size: 10pt;
+     width: 100%;
+}
+
+.snarkConfig i {
+     padding-left: 5px;
+}
+
+form {
+     margin-bottom: 0;
+}
+
+p {
+     line-height: 150%;
+}
+
+hr {
+     width: 0;
+     height: 1px;
+     margin: 5px 0 7px 0;
+     text-align: center;
+     color: #3e3d4b;
+     border: 0 solid #3e3d4b;
+     background: #3e3d4b;
+}
+
+hr.debug {
+     width: 100%;
+     background: #120f35;
+     margin: 3px 0;
+}
+
+hr.debug:nth-child(n+7) {
+     margin: -10px 0 3px;
+}
+
+hr.debug:last-child {
+     background: #000;
+     margin-bottom: -5px;
+}
+
+.configsectionpanel hr {
+     margin-bottom: 10px;
+}
+
+a:link {
+     font-weight: bold;
+     text-decoration: none;
+     word-wrap: break-word;
+     color: #7972d1;
+     border-radius: 0;
+}
+
+a:visited {
+     color: #4e47bf;
+}
+
+a:hover, a:focus {
+     color: #652787;
+}
+
+a:active {
+     color: #CF0039;
+}
+
+input {
+     font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     margin: 2px 4px 2px 0;
+     padding: 3px 4px !important;
+     cursor: pointer;
+     text-align: left;
+     color: #4e47bf;
+     border: 1px solid #443da0;
+     border-radius: 2px;
+     background: #001;
+}
+
+input:disabled {
+     cursor: auto;
+     opacity: .5 !important;
+}
+
+.addtorrentsection input,
+.newtorrentsection input {
+     margin-top: 0 !important;
+     margin-bottom: 5px;
+}
+
+input.r {
+     text-align: right;
+     border: 1px solid #443da0;
+     background: #001;
+}
+
+
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
+     border: none;
+     outline: none;
+}
+
+input[type="submit"], input[type="reset"], a.control, a.controld, a.controld:hover, a.controld:focus, a.controld:active,
+input:disabled[type="submit"], input:disabled:hover[type="submit"], input:disabled:active[type="submit"]  {
+     font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     min-width: 95px !important;
+     padding: 6px 8px !important;
+     text-align: center;
+     color: #4e47bf !important;
+     border: 1px solid #3e3f8f !important;
+     border-bottom-color: #14144f !important;
+     border-right-color: #14144f !important;
+     background: #000;
+     background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     box-shadow: inset 0 0 0 1px #000;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+a.control, a.controld, a.control:hover, a.controld:hover, a.control:focus, a.controld:focus {
+     display: inline-block;
+     padding: 2px 8px 1px 5px !important;
+     min-width: 0 !important;
+     margin: 0 5px 0 1px !important;
+}
+
+a.control img, a.controld img {
+     margin: 0;
+     padding: 0;
+}
+
+input[type="submit"]:hover, input[type="submit"]:focus, input[type="reset"]:hover, input[type="reset"]:focus, a.control:hover, a.control:focus {
+     color: #652787 !important;
+     border: 1px solid #652787 !important;
+     background: #000 !important;
+     box-shadow: 0 1px 1px 0 #c9ceff inset;
+}
+
+input[type="submit"]:active, input[type="reset"]:active, a.control:active {
+     color: #c9ceff !important;
+     border: 1px inset #652787;
+     background: #652787 !important;
+     box-shadow: inset 3px 3px 3px #000;
+}
+
+input:disabled {
+     cursor: not-allowed;
+}
+
+a.controld {
+     display: none;
+}
+
+input[type=image], thead img {
+     margin: 0 1px;
+     padding: 0 !important;
+     opacity: 1;
+     mix-blend-mode: luminosity;
+}
+
+input[type="image"], a img {
+     filter: drop-shadow(0 0 1px #000);
+}
+
+input[type="image"]:hover, a img:hover, input[type="image"]:focus, a img:focus {
+     filter: saturate(200%) drop-shadow(0 0 2px #652787) !important;
+}
+
+thead a img:hover, thead a img:focus, thead a:hover img, thead a:focus img {
+     filter: saturate(200%) hue-rotate(80deg) drop-shadow(0 0 2px #652787) !important;
+}
+
+input[type="checkbox"], .optbox, input[type="radio"] {
+     background: none;
+     min-width: 16px !important;
+     min-height: 16px !important;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */
+}
+
+input[type="checkbox"]:hover, .optbox:hover, input[type="radio"]:hover,
+input[type="checkbox"]:focus, .optbox:focus, input[type="radio"]:focus {
+     outline: none;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) drop-shadow(0 0 5px #652787);
+}
+
+label {
+     cursor: pointer;
+}
+
+thead a img:hover {
+     mix-blend-mode: normal !important;
+     filter: drop-shadow(0 0 1px #f60) !important;
+}
+
+.snarkTorrentAction {
+     white-space: nowrap;
+}
+
+.snarkTorrents td:last-child {
+     padding: 4px 2px !important;
+}
+
+.snarkTorrents th:last-child input[type="image"],
+.snarkTorrents td:last-child input[type="image"] {
+     background: linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%);
+     border: 1px solid #443da0 !important;
+     border: 1px solid #171c3f !important;
+     box-shadow: inset 0 0 0 1px #000;
+     padding: 4px !important;
+     border-radius: 2px;
+     text-align: center;
+     mix-blend-mode: normal;
+     margin: 0 2px;
+}
+
+.snarkTorrents th:last-child input[type="image"] {
+     width: 20px;
+     padding: 4px !important;
+     margin-bottom: 1px;
+}
+
+.snarkTorrents td:last-child input[type="image"] {
+     width: 10px;
+}
+
+.snarkTorrents th:last-child input[type="image"]:hover,
+.snarkTorrents th:last-child input[type="image"]:focus,
+.snarkTorrents td:last-child input[type="image"]:hover,
+.snarkTorrents td:last-child input[type="image"]:focus {
+/* borders on hover only for torrent control buttons, otherwise drop-shadow */
+     border: 1px solid #652787 !important;
+}
+
+.snarkTorrents th:last-child input[type="image"]:active,
+.snarkTorrents td:last-child input[type="image"]:active {
+     box-shadow: inset 3px 3px 2px #000;
+}
+
+input[type=text]:hover, input.r:hover {
+     cursor: text;
+}
+
+input[type=text]:focus, textarea:focus, input.r:focus, textarea[name="i2cpOpts"]:focus, input[name="nofilter_dataDir"]:focus {
+     color: #7166ff;
+     background: #000;
+     box-shadow: 0 0 0 1px rgba(101, 39, 135, 0.5);
+     filter: drop-shadow(0px 0 1px #99f);
+     transition: ease all 0.3s 0s;
+}
+
+textarea[name="i2cpOpts"], input[name="nofilter_dataDir"] {
+     min-width: 500px;
+     width: 70%;
+     margin: 3px 0;
+     padding: 6px !important;
+     cursor: text;
+     resize: none;
+     overflow: hidden;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+}
+
+thead img, thead img:hover {
+     opacity: 0.8;
+     max-height: 20px !important;
+}
+
+input[type=image], th a:link img, th a:visited img {
+     opacity: 1;
+}
+
+input[type=text], input.r {
+     min-width: 100px;
+     padding: 6px !important;
+}
+
+input[type=radio] {
+     margin: 0 3px 0 8px;
+     padding: 2px;
+     vertical-align: bottom;
+}
+
+input.default {
+     visibility: hidden;
+     width: 1px;
+     height: 1px;
+}
+
+input[size="85"] {
+     width: 550px;
+     width: calc(100% - 150px);
+}
+
+.addtorrentsection input,
+.newtorrentsection input {
+     margin-left: 5px !important;
+}
+
+select {
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     font-weight: bold;
+     min-width: 100px;
+     margin: 2px 4px 2px 0;
+     padding: 5px 20px 5px 4px;
+     cursor: pointer;
+     text-overflow: ellipsis;
+     color: #4e47bf;
+     border: 1px solid #3e3f8f;
+     border-bottom-color: #14144f;
+     border-right-color: #14144f;
+     border-radius: 2px;
+     background: #000 url(images/dropdown.png) right 3px center no-repeat !important;
+     -moz-appearance: none;
+     -webkit-appearance: none;
+}
+
+select:hover, select:focus {
+     color: #652787 !important;
+     border: 1px solid #652787;
+     background: #000 !important;
+}
+
+select:hover {
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
+}
+
+select option {
+     font-size: 9.5pt;
+     font-weight: normal;
+}
+
+select option:hover, select option:checked {
+     box-shadow: inset 20px 20px #652787;
+}
+
+select:hover, select:focus, select:active {
+     background: #000 url(images/dropdown_hover.png) right 3px center no-repeat !important;
+}
+
+select::-ms-expand {
+     display: none;
+}
+
+textarea {
+     font: 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font-weight: bold;
+     padding: 1px 4px 0;
+     color: #4e47bf;
+     border: 1px solid #443da0;
+     border-radius: 2px;
+     background: #001;
+}
+
+textarea:focus {
+     color: #7166ff !important;
+}
+
+img {
+     line-height: 100%;
+     margin: 0 3px 1px 3px;
+     vertical-align: middle;
+     opacity: 1.0;
+     border: none;
+}
+
+img:hover {
+     line-height: 100%;
+     opacity: 1;
+     border: none;
+}
+
+a:hover img, a:focus img {
+     filter: drop-shadow(0 0 1px #652787);
+     mix-blend-mode: normal;
+}
+
+img[src$="magnet.png"] {
+     transform: rotate(-90deg);
+}
+
+img[src$="details.png"] {
+     mix-blend-mode: luminosity;
+}
+
+img.thumb {
+     max-width: 16px;
+}
+
+.snarkFileStatus img {
+     mix-blend-mode: luminosity;
+}
+
+.snarkFileStatus img[src*="clock"] {
+     mix-blend-mode: normal !important;
+}
+
+#pagenav img.disable,
+#pagenav img.disable:hover {
+     opacity: .3;
+     border: 1px solid #171c3f !important;
+     margin-left: 3px !important;
+     mix-blend-mode: luminosity;
+     margin-left: 2px !important;
+}
+
+#pagenav {
+     font-weight: bold !important;
+}
+
+#pagenav img {
+     height: 12px;
+     margin: 0 0 0 2px !important;
+     padding: 3px 4px 2px !important;
+     background: #001;
+     background: linear-gradient(to bottom, #181d4f 0%, #181d4f 50%, #001 50%, #001 100%);
+     border: 1px solid #171c3f !important;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px #000;
+     mix-blend-mode: luminosity;
+}
+
+#pagenav img:hover, #pagenav a:focus img {
+     mix-blend-mode: normal;
+}
+
+ #pagenav a:focus img {
+     border: 1px solid #652787 !important;
+}
+
+#pagenav a img:active {
+     box-shadow: inset 2px 2px 3px 3px #000;
+     border: 1px solid #000 !important;
+}
+
+.newtorrentsection td:first-child,
+.addtorrentsection td:first-child {
+     font-weight: bold;
+     padding-right: 5px;
+     padding-left: 5px;
+     white-space: nowrap;
+}
+
+.newtorrentsection td:first-child,
+.addtorrentsection td:first-child {
+     width: 120px;
+}
+
+#trackerselect {
+     width: 100% !important;
+     width: calc(100% - 150px) !important;
+     margin: 2px 5px 0 5px;
+     border: 1px solid #120f35;
+}
+
+#trackerselect tr:nth-child(even) {
+     background: #010008 !important;
+}
+
+#trackerselect tr:nth-child(odd) {
+     border-bottom: 1px inset #000;
+     background: #010010;
+}
+
+_:-ms-lang(x), #trackerselect tr:nth-child(odd) {
+     border-bottom: 1px solid #000;
+}
+
+_:-ms-lang(x), #trackerselect tr:last-child {
+     border-bottom: 1px solid #120f35;
+}
+
+#trackerselect tr:first-child {
+     font-weight: bold;
+     border-bottom: 1px solid #120f35;
+     background: linear-gradient(to bottom, #010011, #000);
+}
+
+#trackerselect tr:first-child td {
+     padding: 3px 5px 3px 20px;
+}
+
+#trackerselect td {
+     padding: 5px 5px 5px 20px;
+     font-size: 9pt;
+}
+
+#trackerselect td:first-child {
+     width: 20%;
+     font-weight: normal;
+}
+
+#trackerselect td:nth-child(4) {
+     width: 70%;
+}
+
+#trackerselect input {
+     margin: 3px !important;
+}
+
+.configsectionpanel td:first-child {
+     font-weight: bold;
+}
+
+.trackerconfig th {
+     min-width: 50px;
+     padding: 7px 5px;
+}
+
+.trackerconfig th:first-child {
+     background: url(/themes/snark/ubergine/images/nuke.png) center center no-repeat;
+}
+
+.trackerconfig td:first-child {
+     text-align: right !important;
+}
+
+.knownTracker td:first-child {
+     text-align: center !important;
+}
+
+.trackerconfig th:first-child, .trackerconfig td:first-child {
+     padding: 5px 10px !important;
+     width: 5%;
+     min-width: 30px !important;
+}
+
+.trackerconfig td {
+     padding: 8px !important;
+}
+
+.trackerconfig th:last-child, .trackerconfig td:last-child {
+     padding-left: 10px !important;
+}
+
+.trackerconfig tr:nth-child(odd), .snarkConfig tr:nth-child(odd) {
+     background: #010009;
+}
+
+.trackerconfig tr:last-child {
+     border: 1px solid #443da0;
+     background: #001;
+     background: linear-gradient(to bottom, #010011, #000) repeat scroll 0 0 #000;
+}
+
+.trackerconfig tr:nth-child(even), .snarkConfig tr:nth-child(even) {
+     background: #010011;
+}
+
+.trackerconfig input {
+     margin: 3px 0 !important;
+     cursor: default;
+}
+
+.snarkTorrentNoneLoaded td {
+     color: #c9ceff !important;
+     padding: 10px;
+     background: #001;
+}
+
+.snarkNewTorrent td {
+     padding: 2px 3px;
+}
+
+.snarkNewTorrent td:nth-child(2),
+.snarkNewTorrent td:nth-child(3) {
+     font-weight: bold;
+     padding-right: 5px;
+}
+
+.snarkNewTorrent td[rowspan="0"] {
+     width: 50%;
+}
+
+.snarkConfig tr:last-child {
+     border: 1px solid #443da0;
+}
+
+.optbox[name="add_tracker_type"] {
+     cursor: pointer; /* active cursor only for clickable radio icons */
+}
+
+.snarkConfig input[type=submit] {
+     min-width: 100px;
+     margin: 3px 2px 3px 5px !important;
+     text-align: center;
+}
+
+#configs textarea, #configs input[type="text"], .trackerconfig textarea, .trackerconfig input[type="text"], select, input.r, input[type="checkbox"] {
+     margin-top: 3px !important;
+     margin-bottom: 3px !important;
+     display: inline-block;
+}
+
+
+#configs td, .trackerconfig td {
+     padding: 6px 5px !important;
+}
+
+#configs tr:nth-last-child(2) td {
+     padding: 10px 15px 0 !important;
+}
+
+.trackerconfig {
+     text-align: left !important;
+}
+
+.snarkConfig table tr:first-child {
+     border-top: 1px solid #443da0 !important;
+}
+
+.trackerconfig th:nth-child(n+4),
+.trackerconfig th:nth-child(n+5),
+.trackerconfig td:nth-child(n+4),
+.trackerconfig td:nth-child(n+5) {
+     text-align: center !important;
+}
+
+.trackerconfig th, .trackerconfig td, .trackerconfig th:last-child, .trackerconfig td:last-child {
+     text-align: left !important;
+}
+
+.configsectionpanel th, .configsectionpanel td {
+      font-size: 9pt;
+}
+
+.spacer {
+     display: none;
+}
+
+.configsectionpanel td[colspan="5"] {
+     border-top: 1px solid #443da0;
+}
+
+#configs td:first-child {
+     min-width: 200px;
+     padding-left: 10px !important;
+}
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#configs tr:last-child {
+     display: none;
+}
+
+#bwHelp {
+     width: 100%;
+     padding-left: 5px !important;
+}
+
+#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+     margin-left: 5px;
+     font-style: normal;
+}
+
+.snarkConfig tr:nth-last-child(2) {
+     background: none;
+}
+
+.snarkConfig tr:nth-last-child(2) td, .configsectionpanel td[colspan="5"] {
+     padding: 11px 15px 0 !important;
+     text-align: right !important;
+     border-top: 1px solid #443da0;
+}
+
+.snarkConfig tr {
+     border: none !important;
+}
+
+.trackerconfig table {
+     border: none !important;
+}
+
+.mainsection {
+     margin: 0;
+     padding: 0;
+     text-align: center;
+     word-wrap: break-word;
+     color: #c9ceff;
+     border-bottom: none;
+     background: #001;
+     background: linear-gradient(to bottom, #000, #003);
+     background-size: 100% 2px;
+     box-shadow: inset 0 0 1px 0 #110f24;
+}
+
+.newtorrentsection, .addtorrentsection, .configsection {
+     padding: 0 10px;
+     text-align: center;
+     word-wrap: break-word;
+     color: #c9ceff;
+     border: 1px solid #443da0;
+     box-shadow: inset 0 0 0 2px #000, inset 0 0 5px 2px #002;
+     background-blend-mode: luminosity;
+}
+
+.newtorrentsection {
+     margin: 0 -11px -1px;
+     background: #001 url(images/snark_create.png) no-repeat scroll right center;
+     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #001, #000009);
+     background-size: 70px, 100% 100%;
+}
+
+.addtorrentsection {
+     margin: 10px -11px -1px;
+     background: #001 url(images/snark_add.png) no-repeat scroll right center;
+     background: url(images/snark_add.png) no-repeat scroll right center, linear-gradient(to bottom, #001, #000009);
+     background-size: 64px, 100% 100%;
+}
+
+.iframed .addtorrentsection {
+     margin-top: -1px;
+}
+
+.iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection {
+     margin-left: 0;
+     margin-right: 0;
+     border-radius: 0;
+     border-left: none;
+     border-right: none;
+}
+
+.iframed .snarkTorrents, .iframed .snarkMessages, .iframed .configsectionpanel, .iframed .snarkDirInfo, .iframed .snarkTorrentInfo {
+     border-radius: 0;
+     border-left: none;
+     border-right: none;
+}
+
+.iframed .snarkTorrentInfo {
+     margin-top: -5px;
+}
+
+.configsection {
+     margin: 0 -11px -11px;
+     padding: 0 10px 15px 10px;
+     border-radius: 0 0 2px 2px;
+     background: #001 url(images/configuration.png) no-repeat scroll 101% center;
+     background: url(images/configuration.png) no-repeat scroll 101% center, linear-gradient(to bottom, #001, #000009);
+     background-size: 64px, 100% 100%;
+}
+
+.configsectionpanel {
+     font-weight: bold;
+     margin: 9px 0 0 0;
+     padding: 0;
+     text-align: center;
+     word-wrap: break-word;
+     color: #c9ceff;
+     border: 1px solid #443da0;
+     background: #001;
+     background: linear-gradient(to bottom, #001, #000009);
+     box-shadow: inset 0 0 1px 0 #010011;
+}
+
+form:last-child > .configsectionpanel {
+     margin-top: -1px;
+     margin-bottom: -1px;
+}
+
+.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel {
+     border-right: none;
+     border-left: none;
+}
+
+.newtorrentsection form, .configsection form, .addtorrentsection form {
+     color: #c9ceff !important;
+}
+
+.configsection table {
+     opacity: 1;
+     color: #c0bbff;
+}
+
+code {
+     font-family: "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     font-size: 8pt;
+     font-weight: bold;
+     padding: 0 2px;
+     color: #7166ff;
+}
+
+.routerdown {
+     padding: 10px;
+     color: #c9ceff;
+     border-bottom: 1px solid #443da0;
+}
+
+input.trackername {
+     width: 100px;
+}
+
+input.trackerhome {
+     width: 210px;
+}
+
+input.trackerannounce {
+     width: 210px;
+}
+
+/* toggle create/add panel view */
+input.toggle_input {
+     /* hide checkbox and use label as faux panel heading */
+     display: none;
+}
+
+label.toggleview:hover {
+     cursor: pointer;
+}
+
+input#toggle_addtorrent:not(checked) + label + hr + table,
+input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: none;
+}
+
+input#toggle_addtorrent:checked + label + hr + table,
+input#toggle_createtorrent:checked + label + hr + table {
+     display: table;
+}
+
+/* display panels by default on webkit based browsers (midori fix) */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+
+input#toggle_addtorrent:not(checked) + label + hr + table,
+input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+input#toggle_addtorrent:checked + label + hr + table,
+input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+}
+*/
+
+/* display by default in iframe to avoid overflow issue */
+.iframed input#toggle_addtorrent:not(checked) + label + hr + table,
+.iframed input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+.iframed input#toggle_addtorrent:checked + label + hr + table,
+.iframed input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+
+label.toggleview, .snarkConfigTitle a, .snarkConfigTitle a:visited {
+     color: #7972d1 !important;
+}
+
+.peerinfo td:first-child {
+     background: url(images/peer.png) center center no-repeat;
+     background-size: 14px 14px;
+}
+
+.peerinfo td, .debuginfo td {
+     padding-top: 5px;
+     padding-bottom: 5px;
+}
+
+/* debug */
+
+.debuginfo td:first-child {
+     background: url(images/debuginfo.png) center center no-repeat;
+     background-size: 14px 14px;
+     background-blend-mode: luminosity;
+}
+
+#resourceNotFound th, #resourceNotFound td {
+     padding: 10px 5px;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+}
+
+.debugConnection {
+     line-height: 130%;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #090 !important;
+     padding: 0 5px;
+}
+
+.from, .to {
+     font-family: sans-serif;
+     font-size: 12pt;
+     font-weight: bold;
+     vertical-align: middle;
+     line-height: 50%;
+     text-shadow: 0 0 1px #000;
+}
+
+.debugConnStat {
+     margin-right: 3px;
+     white-space: nowrap;
+}
+
+.debugConnStat, .debugRequests {
+     font-family: "Droid Sans Mono", "Noto Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     color: #ee0;
+     color: #995FBF;
+}
+
+.debugConnStat b {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     color: #c9ceff;
+}
+
+/* end debug */
+
+/* Resource Errors */
+
+.resourceError {
+     margin-bottom: 0;
+     border: none;
+}
+
+.resourceError th {
+     background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #003, #010011);
+     background-size: 24px auto, 100% 100%;
+     padding: 10px 10px 10px 40px;
+     font-size: 10pt !important;
+     border: none;
+     border-bottom: 1px solid #443da0;
+}
+
+.resourceError td {
+     padding: 10px;
+     border: none;
+     font-size: 10pt;
+}
+
+.resourceError tr:nth-child(odd) {
+     background: #010011;
+}
+
+.resourceError tr:nth-child(even) {
+     background: #000;
+}
+
+#DoesNotExist {
+     margin-top: 10px;
+     border: none;
+}
+
+#DoesNotExist th {
+     border-top: 1px solid #443da0;
+}
+
+#NotFound {
+     border-bottom: 1px solid #443da0;
+}
+
+/* end Resource Errors */
+
+#totals {
+     display: inline-block;
+     margin: 2px 0 2px 5px;
+     font-weight: bold;
+}
+
+/* configs */
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#configs td:first-child {
+     min-width: 220px !important;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 12px center no-repeat;
+     background-size: 14px auto;
+     padding-left: 26px !important;
+     width: 90%;
+     line-height: 100%;
+}
+
+td#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+     margin-left: 4px;
+}
+
+/* end configs */
+
+/* torrent priorities */
+
+.priority input[type="radio"] {
+     text-align: left;
+     margin: 0;
+}
+
+.priorityHigh, .priorityNormal, .prioritySkip {
+     padding: 0;
+     display: inline-block;
+     width: 50px;
+     font-size: 0;
+     text-align: left;
+     color: transparent;
+     overflow: hidden;
+}
+
+.priorityHigh {
+     background: url(/i2psnark/.resources/icons/clock_red.png) left 20px center no-repeat;
+}
+
+.priorityNormal {
+     background: url(/i2psnark/.resources/icons/clock.png) left 20px  center no-repeat;
+}
+
+.prioritySkip {
+     background: url(/i2psnark/.resources/icons/cancel.png) left 18px center no-repeat;
+}
+
+#setPriority a.control img {
+     mix-blend-mode: normal;
+}
+
+/* end priorities */
+
+#torrentInfoStats td {
+     text-align: left !important;
+     padding-left: 2px !important;
+}
+
+#torrentInfoStats img {
+     margin: 1px 3px 2px 5px !important;
+}
+
+#torrentInfoStats span {
+     white-space: nowrap;
+     display: inline-block;
+}
+
+.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover {
+     opacity: 0.5;
+     cursor: not-allowed;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) !important;
+}
+
+#filecheck {
+     display: inline-block;
+     margin: 5px 0;
+     background: url(images/progressbar.gif) left center no-repeat;
+     padding-left: 22px;
+}
+
+#filecheck a {
+     margin: 8px;
+}
+
+/* MS Edge fix */
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+/* responsive layout */
+
+@media screen and (max-width: 950px) {
+.snarkTorrents td:nth-child(2) {
+     white-space: nowrap;
+}
+.snarkTorrents td[colspan="10"] {
+     white-space: normal;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+
+.snarkTorrents th:first-child, .snarkTorrents td:first-child {
+     width: 26px !important;
+}
+
+.snarkTorrents td:first-child img {
+     max-height: 16px;
+}
+
+.snarkTorrents td:nth-child(2) {
+     font-weight: bold;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.dirInfoComplete {
+     display: none;
+}
+
+.snarkRefresh:link, .snarkRefresh:link:first-child {
+     padding-left: 24px !important;
+}
+
+.snarkRefresh:link, .snarkRefresh:hover, .snarkRefresh:focus {
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+.snarkRefresh:active, .snarkRefresh:hover:active, .snarkRefresh:first-child:active, .snarkRefresh:first-child:hover:active,
+.snarkRefresh:nth-child(2):active, .snarkRefresh:nth-child(2):hover:active {
+     background-size: 14px 14px !important;
+}
+
+.snarkTorrents th:first-child, .snarkTorrents td:first-child {
+     width: 30px !important;
+}
+
+.configsectionpanel .snarkConfigTitle {
+     font-size: 10.5pt !important;
+}
+
+.knownTracker a, #trackerselect a {
+     display: inline-block;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     max-width: 210px;
+     white-space: nowrap;
+}
+
+#trackerselect a {
+     max-width: 280px;
+}
+}
+
+@media screen and (max-width: 1400px) {
+.iframed .snarkMessages {
+     margin-top: -4px;
+} 
+
+.addtorrentsection, .newtorrentsection, .configsection {
+     margin-left: 0;
+     margin-right: 0;
+}
+
+.configsection {
+     margin-bottom: 0;
+}
+
+.configsectionpanel .snarkConfigTitle {
+     margin-top: -1px;
+}
+}
+
+@media screen and (min-width: 1200px) {
+a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, code, textarea, input[name="nofilter_dataDir"] {
+     font-size: 9pt !important;
+}
+
+.snarkConfigTitle, .snarkConfigTitle a, label.toggleview, .snarkRefresh:link {
+     font-size: 11pt !important;
+}
+
+.percentDownloaded {
+     pointer-events: none; /* hide tooltip */
+}
+}
+
+@media screen and (min-width: 1400px) {
+code, textarea, .snarkMessages li, .snarkMessages a, input, tt {
+     font-size: 10pt !important;
+}
+
+a, th, thead th, tfoot th, td, select, select option, .snarkAddInfo, .snarkFileName, code, textarea, input[name="nofilter_dataDir"], input, code {
+     font-size: 10pt !important;
+}
+
+.snarkRefresh {
+     font-size: 10.5pt !important;
+}
+
+.snarkConfigTitle, .toggleview {
+     padding: 4px 25px 4px 22px;
+}
+
+.snarkConfigTitle, .snarkConfigTitle a, label.toggleview {
+     font-size: 12.5pt !important;
+}
+
+.toggleview {
+     padding-bottom: 5px !important;
+}
+
+.snarkConfigTitle, label.toggleview {
+     min-width: 240px !important;
+}
+
+.snarkMessages {
+     height: 54px;
+}
+
+.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
+     text-align: center !important;
+     width: 24px !important;
+}
+
+.snarkTorrentDownloaded {
+     white-space: nowrap;
+     padding: 0 10px !important;
+}
+
+.snarkFileStatus {
+     white-space: nowrap;
+}
+
+.snarkTorrents td {
+     padding-top: 4px;
+     padding-bottom: 4px;
+}
+
+.page {
+     padding: 10px;
+     background: #003;
+     background: linear-gradient(to right, #004, #002, #004);
+     background: linear-gradient(to right, #002, #004, #002);
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .snarkMessages, .snarkTorrents, .snarkDirInfo, .snarkTorrentInfo {
+     border: 1px solid #443da0;
+}
+
+.snarkDirInfo {
+     margin-bottom: 0;
+}
+
+.snarkMessages {
+     margin-bottom: -10px;
+}
+
+.snarkMessages + form {
+     margin-top: 9px;
+}
+
+.logshim {
+     margin-top: -9px !important;
+}
+
+.snarkTorrents {
+     margin-top: 0 !important;
+}
+
+.mainsection {
+     background: none;
+}
+
+#pagenav img {
+     height: 16px;
+}
+}
+
+/* end responsive layout */
+
diff --git a/installer/resources/themes/snark/ubergine/images/accept.png b/installer/resources/themes/snark/ubergine/images/accept.png
new file mode 100644
index 0000000000000000000000000000000000000000..719e39151bbdcb581c0e096459bfc964fdc202c1
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/accept.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/arrow_refresh.png b/installer/resources/themes/snark/ubergine/images/arrow_refresh.png
deleted file mode 100644
index 0d280de31164579cf1ed018e581db43fa209ae8e..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/ubergine/images/arrow_refresh.png and /dev/null differ
diff --git a/installer/resources/themes/snark/ubergine/images/btn_stop.png b/installer/resources/themes/snark/ubergine/images/btn_stop.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdaeb855ae006cf6d123d3ee5a7df3ac1d6b8263
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/btn_stop.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/bullet.png b/installer/resources/themes/snark/ubergine/images/bullet.png
new file mode 100644
index 0000000000000000000000000000000000000000..74c893929fe829225afcb98c6c06ec0e3e77a4a9
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/bullet.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/button_forum.png b/installer/resources/themes/snark/ubergine/images/button_forum.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbc1acc42612a6caf68c88ca6aed59dc89413992
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/button_forum.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/button_forum_active.png b/installer/resources/themes/snark/ubergine/images/button_forum_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..681e4431f5f2809d1e3397683529728c8a12b69c
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/button_forum_active.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/button_forum_hover.png b/installer/resources/themes/snark/ubergine/images/button_forum_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..af25ed5973af9470ca4a97948661e6e168ee3b38
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/button_forum_hover.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/button_snark.png b/installer/resources/themes/snark/ubergine/images/button_snark.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0e28f3cbfd795e02d366ddf5c0748c2a4eac9c7
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/button_snark.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/button_snark_active.png b/installer/resources/themes/snark/ubergine/images/button_snark_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..545dcf53af118d71b40952994150cf1872d02d21
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/button_snark_active.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/button_snark_hover.png b/installer/resources/themes/snark/ubergine/images/button_snark_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e6a2d0cd010e21daa7892873fe577d38dba7c8b
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/button_snark_hover.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/button_tracker.png b/installer/resources/themes/snark/ubergine/images/button_tracker.png
new file mode 100644
index 0000000000000000000000000000000000000000..2bb3134c925dc8e23cdc4122c1b0ae93b6d763f9
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/button_tracker.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/button_tracker_active.png b/installer/resources/themes/snark/ubergine/images/button_tracker_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..2787b666fb7ede49c586433c427d2f435f7ecdec
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/button_tracker_active.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/button_tracker_hover.png b/installer/resources/themes/snark/ubergine/images/button_tracker_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..9fa2d64b7d938c5fbd28d1cedf8591a479bb69e0
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/button_tracker_hover.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/cancel.png b/installer/resources/themes/snark/ubergine/images/cancel.png
new file mode 100644
index 0000000000000000000000000000000000000000..33c876b23a8a3940476e354ffe81f9fe93ac9170
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/cancel.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/config.png b/installer/resources/themes/snark/ubergine/images/config.png
index 565a9330e0a156dff5bed2c9fad8c95a44344ba4..8151463917ec88ca0962a5bfefb9f11c9122bff8 100644
Binary files a/installer/resources/themes/snark/ubergine/images/config.png and b/installer/resources/themes/snark/ubergine/images/config.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/control_back_blue.png b/installer/resources/themes/snark/ubergine/images/control_back_blue.png
deleted file mode 100644
index 7b3f9e6fde420cb3f9454c692bc69b1d39efa280..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/ubergine/images/control_back_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/ubergine/images/control_fastforward_blue.png b/installer/resources/themes/snark/ubergine/images/control_fastforward_blue.png
deleted file mode 100644
index 4a2f9d4e4a81857f509d85bbe46936c99709cd6f..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/ubergine/images/control_fastforward_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/ubergine/images/control_play_blue.png b/installer/resources/themes/snark/ubergine/images/control_play_blue.png
deleted file mode 100644
index f8c8ec683edd6a974eacc253332f903d643dbe41..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/ubergine/images/control_play_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/ubergine/images/control_rewind_blue.png b/installer/resources/themes/snark/ubergine/images/control_rewind_blue.png
deleted file mode 100644
index 15d1584bdbb2c26a9fc4c8269aa54615a58a4657..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/ubergine/images/control_rewind_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/ubergine/images/cross.png b/installer/resources/themes/snark/ubergine/images/cross.png
new file mode 100644
index 0000000000000000000000000000000000000000..33a383748bca465d6d0e7be4fa2ce83c861e36ba
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/cross.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/debuginfo.png b/installer/resources/themes/snark/ubergine/images/debuginfo.png
new file mode 100644
index 0000000000000000000000000000000000000000..42c7cd6ab143aa45bbadec43ca28ff8868ffde20
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/debuginfo.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/dropdown.png b/installer/resources/themes/snark/ubergine/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..ffcca9c9b867994cf27dcac5df46d0928fef47c5
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/dropdown.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/dropdown_hover.png b/installer/resources/themes/snark/ubergine/images/dropdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f115f98851233839bd411337191ef76f510b9bb
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/dropdown_hover.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/first.png b/installer/resources/themes/snark/ubergine/images/first.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6930a18d555b9c2aa13b9b7e324195e226759de
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/first.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/infocircle.png b/installer/resources/themes/snark/ubergine/images/infocircle.png
new file mode 100644
index 0000000000000000000000000000000000000000..24b92176f386bcd55fbf19d695e94ee3546933c7
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/infocircle.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/last.png b/installer/resources/themes/snark/ubergine/images/last.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c63819768ce58593504715f5ab0aff426eb47d8
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/last.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/next.png b/installer/resources/themes/snark/ubergine/images/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..195a9d707b853c9fc591a518bdd0cbb6e450d115
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/next.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/nuke.png b/installer/resources/themes/snark/ubergine/images/nuke.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0d4b0201b9fc3f6f6da0c9b888822eafaac8414
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/nuke.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/peer.png b/installer/resources/themes/snark/ubergine/images/peer.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f3408dc6c12d5b4c77955824f88dc99b005daf1
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/peer.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/previous.png b/installer/resources/themes/snark/ubergine/images/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..79558ab1e169a38795bf6fa6c96c51ec63e36c9b
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/previous.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/progressbar.gif b/installer/resources/themes/snark/ubergine/images/progressbar.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e204f6b319698df8029a9e6c79cc1ea79b5e297e
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/progressbar.gif differ
diff --git a/installer/resources/themes/snark/ubergine/images/recheck.png b/installer/resources/themes/snark/ubergine/images/recheck.png
new file mode 100644
index 0000000000000000000000000000000000000000..c932759e7fa7f4ac473db118c8808544daf06cf2
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/recheck.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/restore.png b/installer/resources/themes/snark/ubergine/images/restore.png
new file mode 100644
index 0000000000000000000000000000000000000000..e55a304d632a7f4a67f49b35a8eb5c5c5b63d4ef
Binary files /dev/null and b/installer/resources/themes/snark/ubergine/images/restore.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/start_all.png b/installer/resources/themes/snark/ubergine/images/start_all.png
index b78b2c1a4a8f234e5348438fb97a0ba2db68cfd3..d206535d2e1f7784b05abfc0aea3476fea453385 100644
Binary files a/installer/resources/themes/snark/ubergine/images/start_all.png and b/installer/resources/themes/snark/ubergine/images/start_all.png differ
diff --git a/installer/resources/themes/snark/ubergine/images/stop_all.png b/installer/resources/themes/snark/ubergine/images/stop_all.png
index d983b694c12754e7acf1769742989778cad6991f..eab8e7f7485e13f578f2d053a1e0af03a3bc1dcf 100644
Binary files a/installer/resources/themes/snark/ubergine/images/stop_all.png and b/installer/resources/themes/snark/ubergine/images/stop_all.png differ
diff --git a/installer/resources/themes/snark/ubergine/snark.css b/installer/resources/themes/snark/ubergine/snark.css
index facb2fae5cd9dc37ecf669be745f7e05eb832dc0..82f20f829f1d27298ae0a9d132239f4dc49fd5f3 100644
--- a/installer/resources/themes/snark/ubergine/snark.css
+++ b/installer/resources/themes/snark/ubergine/snark.css
@@ -1,137 +1,333 @@
-/* I2PSnark theme "Ubergine" by dr|z3d */
+/* I2PSnark theme "Ubergine" */
 /* Guantanamo Commemorative Edition. */
+/* Author: dr|z3d */
+
+html {
+     min-height: 100%;
+}
 
 body {
-     background: #101 url('/themes/snark/ubergine/images/graytile.png');
-     color: #001;
-     font: 7.5pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png) #130313 !important;
+     background-size: 100% 100%, 96px 96px;
+     background: #130313 url(images/graytile.png) scroll left top / 96px 96px;
+     color: #fff;
+     font: 8pt "DejaVu Sans", Verdana, "Noto Sans", Ubuntu, Helvetica, sans-serif;
+}
+
+/* preload top navigation mouseovers */
+body:not(old) {
+     background: linear-gradient(to bottom, rgba(64,0,64,0.2), rgba(11,0,11,0.1), rgba(11,0,11,0.2)), url(images/graytile.png),
+     url(images/button_snark_hover.png) top center no-repeat,
+     url(images/button_snark_active.png) top center no-repeat,
+     url(images/button_tracker_hover.png) top center no-repeat,
+     url(images/button_tracker_active.png) top center no-repeat,
+     url(images/button_forum_hover.png) top center no-repeat,
+     url(images/button_forum_active.png) no-repeat #130313 !important;
+     background-size: 100% 100%, 96px 96px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
 }
 
 body.iframed {
-     background: transparent url('../../console/dark/images/transparent.gif') !important;
-     margin: 6px 0 !important;
+     background: transparent url(themes/console/images/transparent.gif) !important;
+     margin: 0 !important;
 }
 
-.snarkTitle {
-     font-size: 12pt;
-     font-weight: bold;
+body.iframed:not(old) {
+     background: url(/themes/console/images/transparent.gif),
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat !important;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+}
+
+.page {
+     background: #323 url(images/tile2.png);
+     background: linear-gradient(to right, rgba(30,0,30,0.4) 0%, rgba(55,0,55,0.5) 50%, rgba(30,0,30,0.4) 100%), url(images/tile2.png);
+     color: #310;
+     margin: 5px 0 0 0;
+     padding: 10px 10px 0 10px;
+     border-radius: 4px;
+     border: 1px solid #101;
+     font-size: 8pt !important;
+     line-height: 160% !important;
+     box-shadow: inset 0 0 3px 0 #101;
      text-align: center;
+     opacity: 1;
+     filter: drop-shadow(0 0 1px #000);
 }
 
-.snarkRefresh:link,.snarkRefresh:visited {
-     text-decoration: none !important;
-     text-transform: uppercase !important;
-     padding: 4px 16px 5px !important;
-     margin: -5px -8px -5px 0 !important;
-     letter-spacing: 0.03em;
-     font-weight: bold;
-     font-size: 9pt;
-     color: #f70;
-     text-shadow: 1px 1px #420;
-     background: url('/themes/snark/ubergine/images/snarknav_lowlight.png') no-repeat scroll center bottom;
-     background: #310 url('/themes/snark/ubergine/images/snarknav_on.png') repeat-x scroll center center;
-     -moz-border-radius: 0px;
-     -khtml-border-radius: 3px;
-     border-radius: 0px;;
-     -moz-box-shadow: inset 0 0 1px 0 #f90;
-     -khtml-box-shadow: inset 0 0 1px 0 #f90;
-     box-shadow: 0 0 1px 0 #f90;
+.iframed .page {
+     background: none;
+     border: none;
+     border-radius: 0;
+     box-shadow: none;
+     padding: 0 0;
+     filter: none;
+}
 
+::selection {
+     background: #404 !important;
+     color: white;
 }
 
-.snarkRefresh:hover {
-     text-decoration: none !important;
+::-moz-selection {
+     background: #404 !important;
+     color: white;
+}
+
+* {
+     outline: none;
+}
+
+/* topnav */
+
+.snarknavbar {
+     margin: -10px 0 10px 0 !important;
+     padding: 15px 10px 13px;
+     border: 1px solid #101;
+     border-radius: 0 0 4px 4px;
+     box-shadow: inset 0 0 0 1px #3f173f, inset 0 0 3px 1px #212;
+     filter: drop-shadow(0 1px 4px #000);
+     background: #101 url(images/snarktopnav.png) repeat-x scroll center center;
+     background: linear-gradient(to bottom, #522852 0%, #4a2449 11%, #321831 33%, #281428 51%, #1c0e1c 52%, #101 54%, #101 100%);
      text-transform: uppercase !important;
-     padding: 1px 16px;
      font-weight: bold;
-     color: #f50;
-     background: #310 url('/themes/snark/ubergine/images/snarknav_on.png') repeat-x scroll center center;
-     background: #310 url('/themes/snark/ubergine/images/snarknav_lowlight.png') repeat-x scroll center center;
-     -moz-border-radius: 0;
-     -khtml-border-radius: 0;
+     color: #001;
+     min-width: 600px;
+     width: 70%;
+     text-align: center;
+     position: sticky;
+     top: -2px;
+     z-index: 999;
+     transition: ease width 0.5s 0.5s;
+}
+
+_:-ms-lang(x), .snarknavbar {
+     padding: 17px 10px 15px;
+}
+
+.iframed .snarknavbar {
+     padding-bottom: 16px;
+     margin-top: 0 !important;
+     margin-bottom: -6px !important;
+     width: auto !important;
      border-radius: 0;
-     -moz-box-shadow: inset 0 0 1px 0 #f90;
-     -khtml-box-shadow: inset 0 0 1px 0 #f90;
-     box-shadow: 0 0 1px  #f90;
+     box-shadow: inset 0 0 1px 0 #7f2f7f;
+     filter: none;
+     position: static;
 }
 
-.snarkRefresh:active {
+.snarkRefresh:link,.snarkRefresh:visited {
      text-decoration: none !important;
      text-transform: uppercase !important;
-     padding: 0 16px;
+     text-shadow: 0 0 1px #000;
+     padding: 5px 12px 5px 29px !important;
+     margin-right: -4px !important;
+     letter-spacing: 0.11em;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
      font-weight: bold;
-     color: #fb0;
-     background: #310 url('/themes/snark/ubergine/images/snarknav_on.png') repeat-x scroll center center;
+     font-size: 10pt;
+     color: #f70;
+     background: #310 url(images/button_tracker.png) 11px center no-repeat;
+     background: url(images/button_tracker.png) 11px center no-repeat, linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #1f0f00 100%);
+     background-size: 16px auto, 100% 100%;
+     padding: 4px 10px 4px 29px !important;
+     border-radius: 0;
+     box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px rgba(16, 0, 16, 0.7);
+     outline: none;
+     border: 1px solid #730;
+     font-size-adjust: 0.56;
+}
+
+_:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited {
+     padding-top: 1px !important;
+}
+
+.iframed .snarkRefresh:first-child, .iframed .snarkRefresh:last-child {
+     border-radius: 0 !important;
+}
+
+.snarkRefresh:hover, .snarkRefresh:visited:hover, .snarkRefresh:focus, .snarkRefresh:visited:focus {
+     color: #d2baff !important;
+     background: #707 url(images/button_tracker_hover.png) 11px center no-repeat;
+     background: url(images/button_tracker_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%);
+     background-size: 16px auto, 100% 100%;
+     border: 1px solid #820b64;
+     transition: ease border 0.3s 0.1s;
+}
+
+.snarkRefresh:hover + .snarkRefresh:nth-last-child(1n-2), .snarkRefresh:focus + .snarkRefresh:nth-last-child(1n-2) {
+     border-left: 1px solid #820b64;
+}
+
+.snarkRefresh:active + .snarkRefresh:nth-last-child(1n-2) {
+     border-left: 1px solid #730;
+}
+
+.snarkRefresh:active, .snarkRefresh:visited:active {
+     background: #f60 url(images/button_tracker_active.png) 11px center no-repeat;
+     background-size: 16px auto, 100% 100%;
+     color: #fff !important;
+     text-shadow: none;
+     border: 1px solid #730;
+     box-shadow: 0 0 1px 0 #000, inset 0 0 0 1px #000, inset 3px 3px 3px 1px #3F1900 !important;
+}
+
+.snarkRefresh:link:first-child, .snarkRefresh:last-child[href="/i2psnark/"] {
+     background: #310 url(images/button_snark.png) 11px center no-repeat;
+     background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #1f0f00 100%);
+     background-size: 18px auto, 100% 100%;
+     padding-left: 28px !important;
+}
+
+.snarkRefresh:last-child[href="/i2psnark/"] {
+     border-radius: 2px;
+     margin: -5px 0 !important;
+     display: inline-block;
+}
+
+/* MS Edge fix */
+_:-ms-lang(x), .snarkRefresh:last-child[href="/i2psnark/"] {
+     margin: -3px 0 !important;
+}
+
+.snarkRefresh:hover:first-child, .snarkRefresh:hover:last-child[href="/i2psnark/"],
+.snarkRefresh:focus:first-child, .snarkRefresh:focus:last-child[href="/i2psnark/"] {
+     background: #707 url(images/button_snark_hover.png) 11px center no-repeat;
+     background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%);
+     background-size: 18px auto, 100% 100%;
+     color: #d2baff !important;
+}
+
+.snarkRefresh:active:first-child, .snarkRefresh:active:last-child[href="/i2psnark/"] {
+     background: #f60 url(images/button_snark_active.png) 11px center no-repeat;
+     background-size: 18px auto, 100% 100%;
+     color: #fff !important;
+}
+
+.snarkRefresh:link:nth-child(2) {
+     background: #310 url(images/button_forum.png) 11px center no-repeat;
+     background: url(images/button_forum.png) 11px center no-repeat, linear-gradient(to bottom, #a68058 1%, #7a6045 27%, #5e4730 50%, #2e1700 51%, #1f0f00 100%);
+     background-size: 16px auto, 100% 100%;
+}
+
+.snarkRefresh:hover:nth-child(2), .snarkRefresh:focus:nth-child(2) {
+     background: #707 url(images/button_forum_hover.png) 11px center no-repeat;
+     background: url(images/button_forum_hover.png) 11px center no-repeat, linear-gradient(to bottom, #a15b73 0%, #7e4062 50%, #591c3e 51%, #46133e 100%);
+     background-size: 16px auto, 100% 100%;
+     color: #d2baff !important;
+}
+
+.snarkRefresh:active:nth-child(2) {
+     background: #f60 url(images/button_forum_active.png) 11px center no-repeat;
+     background-size: 16px auto, 100% 100%;
+     color: #fff !important;
 }
 
 .snarkRefresh:last-child {
-     -moz-border-radius: 0 3px 3px 0px;
-     -khtml-border-radius: 0 3px 3px 0;
-     border-radius: 0 3px 3px 0;
-     -moz-box-shadow: inset 0 0 1px 0 #f90;
-     -khtml-box-shadow: inset 0 0 1px 0 #f90;
-     box-shadow: 0 0 1px 0 #f90;
+     border-radius: 0 2px 2px 0;
 }
 
 .snarkRefresh:first-child {
-     -moz-border-radius: 3px 0 0 3px;
-     -khtml-border-radius: 3px 0 0 3px;
-     border-radius: 3px 0 0 3px;
-     -moz-box-shadow: inset 0 0 1px 0 #f90;
-     -khtml-box-shadow: inset 0 0 1px 0 #f90;
-     box-shadow: 0 0 1px 0  #f90;
+     border-radius: 2px 0 0 2px;
 }
 
+/* end topnav */
+
+/* screenlogger */
+
 .snarkMessages {
-     font: bold 8pt "Lucida Console","DejaVu Sans Mono",Courier,mono !important;
+     font: bold 8pt "Noto Mono", "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
      text-align: left;
      margin: 0 0 10px 0;
      padding: 3px 5px;
-     border-spacing: 0px;
-     -moz-border-radius: 4px 0 0 0;
-     -khtml-border-radius: 4px 0 0 0;
-     border-radius: 4px 0 0 0;
-     border: 1px solid #000;
+     border-spacing: 0;
+     border-radius: 4px;
+     border: 1px solid #101;
      overflow: auto;
-     color: #26f;
-     max-height: 76px;
-     min-height: 45px;
+     color: #2C6AEF;
+     height: 50px;
      width: auto;
-     background: #2a192a url('/themes/snark/ubergine/images/hat.png') no-repeat scroll right center;
+     width: calc(100% - 12px);
+     background: #2a192a url(images/hat.png) no-repeat scroll right center;
+     background: url(images/hat.png) no-repeat scroll right center, linear-gradient(to bottom, #2a192a 0%, #202 100%);
+     background-size: 80px auto, 100% 100%;
+     box-shadow: inset 0 0 3px 1px rgba(16, 0, 16, 0.6);
+     outline: none;
+     filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.5));
+}
+
+.iframed .snarkMessages {
+     margin-top: 1px;
+}
+
+.iframed .snarkMessages, .iframed .snarkTorrents {
+     border-radius: 0;
+}
+
+.snarkMessages:focus {
+     filter: drop-shadow(0 0 1px #f60) !important;
 }
 
 .snarkMessages a:link, .snarkMessages a:visited {
      color: #69f !important;
+     outline: none;
 }
 
-.snarkMessages a:hover {
+.snarkMessages a:hover, .snarkMessages a:focus {
      color: #f90 !important;
 }
 
+.snarkMessages a:active {
+     color: #f30 !important;
+}
+
 .snarkMessages ul {
-     margin: 0;
-     padding: 0 0 0 16px;
+     margin: -3px 0 2px -2px;
+     padding: 0 0 0 14px;
+     list-style: none;
 }
 
-.snarkMessages p {
-     font-style: italic;
-     margin: 0;
-     text-align: right;
+.snarkMessages li {
+     margin-left: -15px;
+}
+
+.snarkMessages li::before {
+     content: '';
+     display: inline-block;
+     background: url(images/bullet.png) left bottom no-repeat;
+     width: 12px;
+     height: 11px;
+     background-size: 9px 9px;
 }
 
 .snarkMessages img {
      float: right;
-     margin: -3px -4px 4px 4px;
+     margin: -3px -5px 4px 4px;
      opacity: 0.8;
+     position: sticky;
+     top: -3px;
+     filter: sepia(100%) hue-rotate(210deg) drop-shadow(0 0 1px #000) !important;
+     mix-blend-mode: luminosity;
+     width: 12px;
+}
+
+.snarkMessages img:hover {
+     filter: sepia(100%) hue-rotate(250deg) drop-shadow(0 0 1px #f60) !important;
+     mix-blend-mode: initial;
 }
 
 .logshim {
      margin-top: -10px !important;
 }
 
+/* end screenlogger */
+
 pre {
      width: 100%;
-     font: 7.5pt "Lucida Console","DejaVu Sans Mono",Courier,mono !important;
+     font: 8pt "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
      padding: 0;
      text-align: left !important;
      height: 8px;
@@ -140,41 +336,32 @@ pre {
 }
 
 table {
-     margin: 0px 0px 10px 0px;
-     border: 0px;
-     padding: 0px;
-     border-spacing: 0px;
+     margin: 0 0 10px 0;
+     border: 0;
+     padding: 0;
+     border-spacing: 0;
      border-collapse: collapse;
      color: #323;
      width: 100%;
-     opacity: 1 !important;
-}
-
-tr { 
-     opacity: 1;
 }
 
 thead, tfoot {
-     text-shadow:0 2px 5px #333333;
      background: #101;
 }
 
-thead a, tfoot a {
-text-shadow:1px 1px #550000;
-} 
-
-thead {
-     border-bottom: 1px solid #101;
+thead, .snarkTorrentInfo th {
+     background: linear-gradient(to bottom, #202 0%, #101 100%);
+     border-top: 1px solid #101 !important;
+     border-bottom: 1px solid #101 !important;
 }
 
 th {
      padding: 4px 2px 4px 4px;
      font-size: 8pt;
-     border-top: 1px outset #001;
-     border-bottom: 1px inset #101;
+     border-top: 1px solid #101;
+     border-bottom: 1px solid #101;
      color: #ddd;
-     whitespace: nowrap;
-     letter-spacing: 0em;
+     letter-spacing: 0;
 }
 
 th:first-child {
@@ -184,7 +371,7 @@ th:first-child {
 
 tfoot td:first-child {
      text-align: left !important;
-     padding-left: 0px;
+     padding-left: 0;
 }
 
 th:first-child img {
@@ -197,10 +384,11 @@ th:nth-child(2) img {
 
 tfoot th {
      padding-bottom: 4px !important;
+     vertical-align: top;
 }
 
 tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img {
-     margin: 0px 2px 3px 0px !important;
+     margin: 0 2px 3px 0 !important;
      padding-right: 0 !important;
 }
 
@@ -221,23 +409,136 @@ tfoot tr:nth-child(n+1) {
 .ParentDir {
      background: #656;
      background: #351933;
-     font-size: 7.5pt;
-     border: 0px inset #101 !important;
-     border-left: 0 !important;
-     border-right: 0 !important;
+     border: 1px solid #101 !important;
      text-align: left !important;
-     padding: 4px 0;
+     padding: 4px 3px;
+}
+
+.ParentDir img {
+     margin-right: 4px;
+}
+
+.snarkDirInfo th:first-child {
+     border-left: 1px solid #101 !important;
+}
+
+.snarkDirInfo th:last-child {
+     border-right: 1px solid #101 !important;
+}
+
+.snarkDirInfo input[type="submit"], .snarkDirInfo a.control {
+     margin: 2px 3px !important;
+}
+
+.snarkDirInfo input.disabled, .snarkDirInfo a.controld {
+     display: none;
 }
 
 .priority {
-     font-size: 7pt;
-     vertical-align: center;
+     font-size: 8pt;
+     vertical-align: middle;
+     text-align: right !important;
+     padding-right: 15px;
+     white-space: nowrap;
+}
+
+.script {
+     display: inline-block;
+     vertical-align: top;
 }
 
-.SnarkTorrents {
+.snarkTorrents {
+     background: #212;
      margin: 0;
      border: 1px solid #101;
-     background: #212;
+     border-collapse: separate;
+     border-spacing: 0;
+     border-radius: 4px;
+     filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.5));
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) { /* fixes webkit/blink double border */
+     .snarkTorrents {
+     border-top: 1px solid transparent;
+     margin-top: -2px;
+}
+}
+
+.snarkTorrents thead th {
+     border-top: 1px solid transparent !important;
+}
+
+.snarkTorrents thead th  {
+     padding: 2px;
+     background-clip: padding-box;
+}
+
+.snarkTorrents thead th:nth-child(-n+3) {
+     max-width: 45px;
+}
+
+.snarkTorrents thead th:first-child {
+     text-align: center !important;
+     width: 16px !important;
+}
+
+.snarkTorrents thead th:nth-child(2) {
+     text-align: left;
+     min-width: 50px;
+} 
+
+.snarkTorrents tfoot {
+     background: #101;
+}
+
+.snarkTorrents tfoot th {
+     padding: 5px 2px;
+     font-weight: normal;
+}
+
+.snarkTorrents tfoot th::first-line {
+     font-weight: bold;
+     vertical-align: middle;
+}
+
+.snarkTorrents tfoot th:nth-child(even) {
+     background: #120012;
+}
+
+.snarkTorrents thead th:nth-last-child(4), .snarkTorrents thead th:nth-last-child(5), .snarkTorrents tfoot th:nth-last-child(4), .snarkTorrents tfoot th:nth-last-child(5)  {
+     text-align: center;
+}
+
+.snarkTorrents thead th:nth-last-child(4), .snarkTorrents tfoot th:nth-last-child(4) {
+     text-align: right;
+}
+
+.snarkTorrents tfoot th:nth-child(n+2) {
+     text-align: right;
+}
+
+.snarkTorrents tfoot th:nth-child(2) {
+     text-align: center;
+}
+
+.snarkTorrents td:nth-child(3), .SnarkTorrents td:nth-child(4) {
+     width: 16px;
+     padding: 2px 0;
+}
+
+.snarkTorrents td:nth-child(3) {
+     text-align: right;
+}
+
+.snarkTorrents td:nth-child(4) {
+     text-align: left;
+}
+
+.snarkTorrents tt {
+     font-family: "Noto Mono", "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     color: #cc0;
+     font-weight: bold;
+     margin-right: 2px;
 }
 
 td {
@@ -261,9 +562,8 @@ td:first-child {
 }
 
 .snarkTorrentName {
-     line-height: 100%;
-     text-shadow:1px 1px #550000;
-     padding: 2px 0 0;
+     line-height: 110%;
+     padding: 2px 1px 2px 0;
 }
 
 .snarkTorrentName img {
@@ -273,11 +573,29 @@ td:first-child {
 }
 
 .snarkTorrentAction {
-     text-shadow:1px 1px #550000;
-     padding: 1px 1px 1px 1px !important;
-     margin: 0 !important;
+     padding: 1px !important;
+     text-align: center;
+     width: 1%;
+     white-space: nowrap;
+}
+
+.snarkTorrents th:last-child {
+     white-space: nowrap !important;
      text-align: center;
-     width: 68px;
+     padding-right: 4px;
+     width: 40px;
+}
+
+.snarkTorrents th:last-child input[type="image"] {
+     padding: 0;
+     max-width: 32px;
+     background: #40003f;
+     border-radius: 2px;
+     border: 1px solid #202;
+}
+
+.snarkTorrents th:last-child input[type="image"]:hover {
+     border: 1px solid #f60;
 }
 
 .snarkTorrentAction img {
@@ -286,52 +604,58 @@ td:first-child {
 }
 
 .snarkTorrentAction img:hover {
-     -moz-box-shadow: 0 0 1px 1px #f90;
+     box-shadow: 0 0 1px 1px #f90;
      opacity: 1;
 }
 
-.snarkTorrentEven {
-     font-size: 7.5pt;
-     background: #270027;
-}
-
 .snarkTorrentNoneLoaded {
+     padding: 10px;
      background: #323;
      font-size: 8.5pt;
      font-weight: bold;
      text-align: center !important;
      color: #bbb !important;
+     border-radius: 0 0 2px 2px;
 }
 
 .snarkTorrentStatus {
      padding: 2px 2px 2px 0;
-     line-height: 100%;
-}
-
-.snarkTorrentStatus:first-child {
+     line-height: 110%;
      text-align: left !important;
-     padding-left: 0px;
-     min-width: 48px;
-     font-weight: bold;
-     color: #dd9 !important;
-     font-size: 7.5pt;
-     padding: 1px !important;
 }
 
-.snarkTorrentStatus:first-child img {
+.snarkTorrentStatus img {
      margin-right: 10px !important;
      margin-left: 6px;
 }
 
-.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
-     font-size: 7.5pt;
+img[src$="details.png"] {
+     mix-blend-mode: luminosity;
+}
+
+a img[src$="details.png"]:hover, a:focus img[src$="details.png"] {
+     mix-blend-mode: initial !important;
+}
+
+.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkFileSize, .snarkTorrentStatus, .snarkFileName {
+     font-size: 8pt;
      font-weight: bold;
      padding: 0 3px;
      line-height: 100%;
 }
 
+.snarkTorrentStatus {
+      font-weight: normal;
+}
+
+.snarkTorrents td:nth-child(2) {
+     padding-left: 0;
+}
+
 .snarkTorrentDownloaded {
      color: #76a !important;
+     white-space: nowrap;
+     text-align: center !important;
 }
 
 .snarkTorrentUploaded {
@@ -348,88 +672,237 @@ td:first-child {
 
 .snarkTorrentOdd {
      background: #351933;
-     font-size: 7.5pt;
-     border: 0px inset #101 !important;
-     border-left: 0 !important;
-     border-right: 0 !important;
+     font-size: 8pt;
 }
 
-.snarkTorrentOdd td, .snarkTorrentEven td {
-     border-top: 1px dotted #313 !important;
+.snarkTorrentEven {
+     font-size: 8pt;
+     background: #270027;
 }
 
-table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
-     background: #382010 !important;
+.snarkTorrents tr, .snarkTorrents td {
+     border-top: 1px solid #202 !important;
 }
 
-.snarkFileIcon {
-     width: 16px;
+.snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) {
+     background: #303;
+     background: linear-gradient(to right, #404, #404 5px, #313 5px, #404);
+     box-shadow: inset 0 0 1px 0 #212;
 }
 
-td.snarkFileIcon:first-child {
-     text-align: center;
+.snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) {
+     background: #404;
+     background: linear-gradient(to right, #505, #505 5px, #313 5px, #505);
+     box-shadow: inset 0 0 1px 0 #212;
 }
 
-.snarkFileName {
-     padding: 4px 0px !important; 
-     text-align: left !important;
-     font-size: 7.5pt !important;
+@media screen and (-webkit-min-device-pixel-ratio:0) { /* prevents webkit from grad-filling every td */
+.snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) {
+     background: #303;
 }
 
-.snarkFileSize {
-     padding: 4px 2px;
-     font-weight: bold;
-     color: #b6b !important;
+.snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) {
+     background: #404;
+}
 }
 
-.snarkFileStatus {
-     padding: 4px 5px 4px 15px;
-     text-align: center;
-     font-style: italic;
-     font-size: 7.5pt;
+.snarkTorrentEven + .snarkTorrentEven td:nth-child(2), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(2) {
      text-align: left;
+     padding-left: 0;
+     color: #ffdfff !important;
 }
 
-.snarkTorrentETA {
-     font-weight: bold;
-     font-style: italic;
-     color: #dd7 !important;
+.snarkTorrentEven + .snarkTorrentEven td:nth-child(4), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(4) {
+     text-align: center !important;
 }
 
-.snarkTorrentInfo img {
-     max-height: 16px !important;
-     margin: 1px 2px 2px 10px !important;    
+.snarkTorrentEven + .snarkTorrentEven td:nth-child(n+5), .snarkTorrentOdd + .snarkTorrentOdd td:nth-child(n+5) {
+     text-align: right !important;
 }
 
-.snarkTorrentInfo td {
-     text-align: left !important;
-     padding: 2px 0 1px 1px !important;
+table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
+     background: #58165e !important;
+     background: linear-gradient(to bottom, #58165e 0%, #4a0d56 100%) !important;
+     border-top: 1px solid #101 !important;
+     border-bottom: 1px solid #101 !important;
 }
 
-table.SnarkTorrentInfo {
-     margin-bottom: 3 !important;
-     background: #000;    
+table.snarkTorrents tbody tr:hover {
+     box-shadow: inset 0 1px 1px 0 #939;
 }
 
-table.SnarkDirInfo {
-     margin-top: -2px !important;     
+/* MS Edge fix */
+_:-ms-lang(x), table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
+     box-shadow: none !important;
+     background: #58165e !important;
 }
 
-.snarkDirInfo thead img {
-     margin: 0 -1px 0 0 !important;
-     padding: 0 3px !important;
+table.snarkTorrents tbody tr:hover .snarkTorrentName, table.snarkDirInfo tbody tr:hover td .snarkFileName {
+     color: #fff !important;
 }
 
-.SnarkDirInfo td, .SnarkDirInfo th {
-     min-width: 0px !important;     
+.snarkFileIcon {
+     width: 16px;
+     text-align: center;
+     padding: 4px !important;
 }
 
-.SnarkDirInfo td:nth-child(n+1) {
+.snarkFileIcon img {
+     margin: 1px;
+     padding: 0;
 }
 
-.SnarkDirInfo .headerpriority {
-     text-align: center !important;
-     vertical-align: middle;    
+.snarkFileName {
+     padding: 4px 0 0 2px !important; 
+     text-align: left !important;
+     font-size: 8pt !important;
+     white-space: nowrap;
+}
+
+.snarkFileSize {
+     padding: 4px 2px;
+     font-weight: bold;
+     color: #b6b !important;
+     width: 9em !important;
+}
+
+.snarkFileStatus {
+     padding: 2px 5px 2px 15px;
+     font-style: italic;
+     font-size: 8pt;
+     text-align: left !important;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+}
+
+.snarkFileStatus img[src*="clock"] {
+     mix-blend-mode: normal !important;
+}
+
+.snarkFileStatus img, .snarkFileStatus img:hover {
+      opacity: 0.7;
+}
+
+.snarkTorrentETA {
+     font-weight: bold;
+     font-style: italic;
+     color: #dd7 !important;
+     line-height: 120%;
+}
+
+.snarkTorrentInfo img {
+     max-height: 16px !important;
+     margin: 1px 2px 2px 4px !important;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+.snarkTorrentInfo img:nth-child(n+2) {
+     margin-left: 8px !important;
+}
+
+.snarkTorrentInfo th {
+     text-align: left;
+     padding: 6px 0;
+}
+
+.snarkTorrentInfo th:first-child:not(old) {
+     background: url(images/file.png) 6px center no-repeat;
+     background-size: 14px 16px;
+}
+
+.snarkTorrentInfo tr:first-child {
+     background: linear-gradient(to bottom, #202 0%, #101 100%) !important;
+}
+
+.snarkTorrentInfo td {
+     text-align: left !important;
+     padding: 3px 2px !important;
+     vertical-align: middle !important;
+}
+
+.snarkTorrentInfo td:first-child {
+     width: 20px;
+}
+
+.snarkTorrentInfo tr:nth-child(odd) {
+     background: #351933;
+}
+
+#torrentInfoControl td {
+     text-align: right !important;
+     border-top: 1px solid #101;
+}
+
+#torrentInfoControl, #setPriority {
+     box-shadow: inset 0 0 0 1px #303;
+}
+
+#torrentInfoControl td, #setPriority th {
+     background: linear-gradient(to bottom, #202, #101);
+     padding: 8px 5px !important;
+}
+
+table.SnarkTorrentInfo, table.snarkDirInfo {
+     margin: 0 !important;
+     border: 1px solid #101;
+     background: #270027;
+     filter: drop-shadow(0 0 1px rgba(16, 8, 16, 0.7)) !important;
+}
+
+table.snarkDirInfo {
+     margin-top: 10px !important;
+}
+
+.snarkDirInfo thead img {
+     margin: 0 -1px 0 0 !important;
+     padding: 0 3px !important;
+}
+
+.snarkDirInfo img, .snarkTorrents img {
+     filter: drop-shadow(0 0 1px #000);
+}
+
+/* MS Edge fix */
+_:-ms-lang(x), .snarkDirInfo img, .snarkTorrents img {
+     filter: none !important;
+}
+
+.snarkDirInfo td, .SnarkDirInfo th {
+     min-width: 0 !important;
+     border-bottom: 1px solid #202;
+}
+
+.snarkDirInfo .snarkFileStatus img {
+     mix-blend-mode: luminosity;
+     opacity: 1;
+     vertical-align: top;
+}
+
+.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a {
+     display: inline-block;
+     width: 100%;
+     padding: 2px 0;
+}
+
+.snarkDirInfo .headerpriority {
+     text-align: right !important;
+}
+
+#setPriority > * {
+     vertical-align: middle;
+}
+
+.snarkDirInfo img[src$="priority.png"] {
+     margin-left: -110px !important;
+}
+
+.snarkDirInfo tr:nth-last-child(1) td {
+     border-bottom: 1px solid #000 !important;
+}
+
+.snarkFileicon:hover + .snarkFileName a {
+     color: #f90;
 }
 
 .choked {
@@ -440,34 +913,113 @@ table.SnarkDirInfo {
      color: #00f000 !important;
 }
 
+.choked, .unchoked {
+     font-weight: bold;
+     font-style: italic;
+}
+
 .thumb {
-     max-height: 64px;
-     max-width: 96px;
+     max-width: 16px;
+     transition: ease all 0.3s;
+}
+
+.thumb:hover {
+     margin: 0;
+     max-width: 80px;
+     max-height: 80px;
+     transition: ease all 0.3s;
 }
 
-.snarkNewTorrent {
+div.snarkNewTorrent {
      font-size: 8pt;
+     margin-top: -1px;
+}
+
+.snarkNewTorrent td {
+     white-space: nowrap;
+}
+
+.snarkNewTorrent td:first-child, .snarkNewTorrent tr:first-child {
+     font-weight: bold;
+}
+
+table#trackerselect {
+     width: 100% !important;
+}
+
+#trackerselect td:first-child {
+     font-weight: normal;
+}
+
+#trackerselect td:nth-child(2), #trackerselect td:nth-child(3) {
+     max-width: 60px !important;
+     overflow: hidden;
+     text-overflow: ellipsis;
 }
 
 .snarkAddInfo {
      font-size: 8pt;
-     line-height: 130% !important;
+     line-height: 100% !important;
+     white-space: normal;
+     background: url(images/infocircle.png) left center no-repeat;
+     background-size: 14px auto;
+     padding: 2px 2px 2px 18px;
+     display: inline-block; 
+     margin-top: 5px;
 }
 
-.snarkConfigTitle {
-     font-size: 11pt;
+.snarkAddInfo code {
+     background: #101;
+     background: rgba(17, 0, 17, 0.7);
+     border-radius: 2px;
+     color: #fbf;
+     padding: 2px 4px;
+     box-shadow: inset 0 0 0 1px #212;
+     -moz-user-select: all;
+     -webkit-user-select: all;
+     user-select: all;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
+     font-size: 12pt;
      font-weight: bold;
-     padding: 0 25px 3px 25px;
+     padding: 4px 18px 3px;
      margin: 5px 0 10px 0 !important;
-     letter-spacing: 0.05em;
-     border: 1px solid #111;
-     -moz-border-radius: 0 0 5px 5px;
-     -khtml-border-radius: 0 0 5px 5px;
-     border-radius: 0 0 5px 5px;
-     border-top: 0;
-     text-shadow: 0px 3px 5px #323;
-     background: #101 url('/themes/snark/ubergine/images/snarknav.png') repeat-x scroll center center !important;
+     border: 1px solid #101;
+     border-top: none;
+     border-radius: 0;
+     background: #101 url(images/snarknav.png) repeat-x scroll center center;
+     background: linear-gradient(to bottom, #4a3d49 0%, #3d303d 50%, #0d000d 50%, #0d000d 100%);
      font-variant: small-caps !important;
+     letter-spacing: 0.15em;
+     filter: drop-shadow(0 1px 1px rgba(16, 0, 16, 0.5));
+     color: #f7e3fc;
+     text-shadow: 0 0 1px #000;
+     box-shadow: inset 0 0 1px 0 #313;
+     display: inline-block;
+     margin: 0 0 -3px !important;
+     min-width: 210px;
+}
+
+.snarkConfigTitle:hover, label.toggleview:hover {
+     background: linear-gradient(to bottom, #5f475d 0%, #4f3b4f 50%, #1f001f 50%, #1f001f 100%);
+     box-shadow: inset 0 0 1px #3f173f;
+     color: #d2baff;
+}
+
+.snarkConfigTitle:active, label.toggleview:active {
+     box-shadow: inset 0 0 1px #7f2f7f, inset 3px 3px 3px 1px #0d000d;
+}
+
+.snarkConfigTitle img, label.toggleview img {
+     margin: 1px -3px 2px 0;
+     vertical-align: middle;
+     filter: drop-shadow(0 0 1px #000);
+}
+
+.configsectionpanel .snarkConfigTitle:hover img {
+     filter: drop-shadow(0 0 1px #000) !important;
 }
 
 .snarkConfig {
@@ -475,25 +1027,6 @@ table.SnarkDirInfo {
      width: 100%;
 }
 
-.page {
-     background: #323 url('/themes/snark/ubergine/images/tile2.png');
-     color: #310;
-     min-width: 800px !important;
-     margin: 5px 0 0 0;
-     padding: 10px 10px 0px 10px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #101;
-     font-size: 8pt !important;
-     line-height: 160% !important;
-     -moz-box-shadow: inset 0px 0px 1px 0px #212;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #002;
-     box-shadow: inset 0px 0px 1px 0px #002;
-     text-align: center;
-     opacity: 1;
-}
-
 form {
      margin-bottom: 0;
 }
@@ -503,43 +1036,66 @@ p {
 }
 
 hr {
-     color: #444;
-     background: #444;
+     color: #212;
+     background: #212;
      height: 1px;
-     border: 0px solid #444;
+     border: 0 solid #212;
      width: 0%;
      margin: 5px 0 7px 0;
      text-align: center;
 }
 
+hr.debug {
+     width: 100%;
+}
+
+hr.debug:nth-child(n+7) {
+     margin-top: -11px;
+     margin-bottom: 2px;
+     opacity: 0.5;
+}
+
+hr.debug:last-child {
+     background: #303;
+     margin-bottom: -4px;
+}
+
 a:link {
      color: #f70;
      text-decoration: none;
      font-weight: bold;
      word-wrap: break-word;
+     outline: none;
 }
 
 a:visited {
-     color: #f50;
+     color: #f40;
      text-decoration: none;
-     font-weight: bold;
 }
 
-a:hover {
-     color: #f90;
-     font-weight: bold;
+a:hover, a:visited:hover, a:focus, a:visited:focus {
+     color: #fb0;
+}
+
+a:active, a:visited:active {
+     color: #f10;
 }
 
-a.control, a.controld {
+a.control, a.controld, a.control:active {
+     display: inline-block;
+     vertical-align: middle;
      background: #989;
+     background: linear-gradient(to bottom, #989 0%, #878 100%);
+     background-size: 100% 100% !important;
      border: 1px inset #bbb;
-     border-radius: 4px;
-     color: #000;
+     border-radius: 2px;
+     box-shadow: 0 0 1px 1px rgba(48,16,48,0.7);
+     color: #1c081e;
      font-weight: bold;
-     margin: 2px 4px;
-     padding: 3px 4px;	
-     text-shadow: 0px 0px #410;
+     padding: 4px 6px 3px 6px;
+     text-shadow: 0 0 #410;
      white-space: nowrap;
+     filter: drop-shadow(0 0 1px #313) !important;
 }
 
 a.controld {
@@ -547,85 +1103,211 @@ a.controld {
      font-weight: normal;
 }
 
+a.control img {
+     margin: -2px 2px 0 -4px !important;
+     padding: 0;
+     height: 14px;
+}
+
+a.control:hover img, a.control:focus img {
+     mix-blend-mode: luminosity;
+}
+
+a.control:active img {
+     mix-blend-mode: soft-light;
+}
+
 a.controld img {
      display: none;
 }
 
-a.control:hover {
-     background-color: #f60;
-     border: 1px outset #bbb;
-     color: #fff;
-     text-shadow: 0px 1px 5px #f00;
+input[type="submit"], input[type="reset"] {
+     background-size: 14px 14px, 100% 100% !important;
+     box-shadow: 0 0 1px 1px rgba(48,16,48,0.7);
+}
+
+a.control:active, input[type="submit"]:active, input[type="reset"]:active {
+     color: #ce1641 !important;
+     border: 1px solid #fff !important;
+     box-shadow: inset 3px 3px 3px #fff;
+}
+
+#setPriority {
+     border-top: 1px solid #000;
+}
+
+th.headerpriority {
+     padding: 5px !important;
+     text-align: right !important;
+}
+
+th.headerpriority br, .snarkTorrents thead th br {
+     display: none;
 }
 
-a.control:active {
-     background: #000 !important;
-     color: #f60 !important;
-     text-shadow: 0 !important;
+input, a.control {
+     font: 8pt "Droid Sans", "Noto Sans", "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     font-weight: bold;
 }
 
 input {
      font-size: 8.5pt;
      font-weight: bold;
      text-align: left;
-     padding: 3px 4px !important;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px inset #000;
-     background: #212 url('/themes/snark/ubergine/images/graytile.png');	 
+     padding: 3px 3px !important;
+     border-radius: 2px;
+     border: 1px solid #101;
+     background: #212 url(images/graytile.png);	 
      color: #f60;
      margin: 2px 4px;
 }
 
 input.r {
      text-align: right;
-     background: url('/themes/snark/ubergine/images/graytile.png');
+     background: url(images/graytile.png);
 }
 
 input[type=submit] {
-     text-shadow: 0px 0px #410;
-     color: #000;
+     color: #1c081e;
      background: #989;
+     background: linear-gradient(to bottom, #989 0%, #878 100%);
      border: 1px inset #bbb;
-     padding: 2px;
+     padding: 4px 2px !important;
+}
+
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
+     border: none;
+     outline: none;
+}
+
+input[type=submit]:hover, input[type=submit]:focus {
+     background-blend-mode: luminosity;
 }
 
-input[type=submit]:hover {
+input[type=submit]:hover, input[type=submit]:focus, a.control:hover, a.control:focus {
      border: 1px outset #bbb;
-     text-shadow: 0 0;	 
-     background-color: #f60;
      color: #fff;
-     text-shadow: 0px 1px 5px #f00;
+     filter: drop-shadow(0 0 1px #515) !important;
+}
+
+input[type=submit]:focus, a.control:focus {
+     filter: drop-shadow(0 0 2px #f60) !important;
 }
 
-input[type=submit]:active {
-     background: #000 !important;
-     color: #f60 !important;
-     text-shadow: 0 !important;
+input[type=submit]:active, a.control:active {
+     background-blend-mode: soft-light;
+     color: #2e134c !important;
+     filter: drop-shadow(0 0 1px #f60) sepia(100%) invert(100%) !important;
+     mix-blend-mode: hard-light;
 }
 
 input[type=image], thead img {
      padding: 0 !important;
-     -moz-border-radius: 0px;
-     -khtml-border-radius: 0px;
-     border-radius: 0px;
-     border: medium none;
+     border-radius: 3px;
+     border: 1px solid transparent;
      margin: 0 2px;
      opacity: 0.8;
+     background: none;
+     filter: drop-shadow(0 0 1px #000);
+     outline: none;
+     max-height: 22px;
+}
+
+input[type=image]:hover, input[type=image]:focus {
+     border: 1px solid #f60;
+     filter: drop-shadow(0 0 1px #f60);
+     opacity: 1;
+}
+
+a img {
+     filter: drop-shadow(0 0 1px #000);
+     outline: none;
+}
+
+a img:hover, a img:focus, a:focus img {
+     filter: drop-shadow(0 0 1px #f60);
 }
 
 thead img.disable, img.disable:hover {
-     opacity: 0.2;
+     opacity: 0.3;
+}
+
+thead img:hover, thead img:focus, thead a:hover img, thead a:focus img {
+     opacity: 1;
+     filter: drop-shadow(0 0 1px #f60);
+     border: 1px solid transparent;
+}
+
+thead a:active img {
+     filter: drop-shadow(0 0 1px #f90) !important;
+}
+
+input[type="submit"]:disabled:active, a.control:disabled:active {
+      filter: drop-shadow(0 0 1px #101);
+}
+
+#pagenav {
+     letter-spacing: 0.1em;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif !important;
+}
+
+#pagenav img:not(old) {
+     border: 1px solid #dad !important;
+     background: #fdf;
+     background: linear-gradient(to bottom, #fdf 0%, #fdf 50%, #dbd 51%);
+     border-radius: 3px;
+     box-shadow: inset 0 0 1px 1px #fff;
+     padding: 3px 4px !important;
+     margin: 0;
+     transform: scale(+1, -1);
+     mix-blend-mode: luminosity;
+     opacity: 1;
+     width: 12px;
+}
+
+#pagenav img, #pagenav img.disable:hover:not(old) {
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(140%) drop-shadow(0 0 1px #000);
+     box-shadow: inset 0 0 1px 1px #fff;
 }
 
-input[type=image]:hover, thead img:hover {
+#pagenav img:hover, #pagenav a:focus img, #pagenav a img:active {
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(140%) drop-shadow(0 0 1px #f60);
+     box-shadow: none;
      opacity: 1;
+     mix-blend-mode: normal;
+}
+
+#pagenav img.disable, #pagenav img.disable:hover, #pagenav img.disable:active {
+     margin: 0 3px 0 2px;
+     opacity: 0.3 !important;
+     mix-blend-mode: luminosity;
+}
+
+#pagenav a img:active, #pagenav img:active {
+     box-shadow: inset 1px -1px 3px 1px #fff !important;
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(140%) drop-shadow(0 0 1px #000) !important;
 }
 
-input[type=text]:active, input[type=text]:hover, input.r:hover {
+input[type="text"], input.r, input[name="nofilter_dataDir"] {
+     padding: 4px !important;
+     box-shadow: inset 1px 1px 2px 1px #101;
+     letter-spacing: 0.03em;
+     background: url(images/graytile.png) #212;
+     background-size: 96px 96px;
+     transition: ease box-shadow 0.15s 0s, ease color 0.15s 0s;
+}
+
+textarea[name="i2cpOpts"] {
+     overflow: hidden;
+}
+
+input[type=text]:active, input[type=text]:focus, input.r:focus, input[name="nofilter_dataDir"]:focus, textarea:focus {
      background: #d60;
+     background: linear-gradient(to bottom, #d60, #c50);
      color: #fff;
+     box-shadow: inset 0 0 0 1px #ffffcf;
+     transition: ease box-shadow 0.15s 0s;
+     outline: none;
 }
 
 input[type=radio] {
@@ -634,268 +1316,429 @@ input[type=radio] {
      vertical-align: bottom;
 }
 
-input.default { width: 1px; height: 1px; visibility: hidden; }
+input[type="radio"], input[type="checkbox"] {
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%);
+     min-width: 16px !important;
+     min-height: 16px !important;
+     vertical-align: middle;
+     background: none;
+}
 
-input.disabled, input.disabled:hover {
-     background-color: #989;
-     border: 1px inset #bbb;
-     color: #444;
-     font-weight: normal;
-     text-shadow: 0px 0px 0px #444;
+input[type="radio"]:hover, input[type="checkbox"]:hover, input[type="radio"]:focus, input[type="checkbox"]:focus {
+     outline: none;
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) drop-shadow(0 0 3px #f60) !important;
 }
 
-input.accept {
-     background: #989 url('../../console/images/accept.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input[type="radio"], input[type="checkbox"], select, input[type="submit"], label {
+     cursor: pointer;
 }
 
-input.add {
-     background: #989 url('../../console/images/add.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input[type=text], input.r, select {
+     min-width: 110px;
 }
 
-input.cancel {
-     background: #989 url('../../console/images/cancel.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input[name="upBW"] + i {
+     margin-left: 3px;
 }
 
-input.create {
-     background: #989 url('images/create.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input.default {
+     width: 1px; 
+     height: 1px; 
+     visibility: hidden;
 }
 
-input.delete {
-     background: #989 url('../../console/images/delete.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input.disabled, input.disabled:hover, input.disabled:active, a.control.disabled:hover, a.control.disabled:active {
+     color: #444 !important;
+     font-weight: normal;
+     border: 1px inset #bbb !important;
+     cursor: not-allowed;
 }
 
-input.reload {
-     background: #989 url('../../console/images/arrow_refresh.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input.accept, input.accept:active {
+     background: #989 url(images/accept.png) no-repeat 6px center;
+     background: url(images/accept.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     padding: 4px 6px 4px 22px !important;
 }
 
-input.starttorrent {
-     background: #989 url('images/start.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input.accept:hover, input.accept:focus {
+     background: #767 url(images/accept.png) no-repeat 6px center;
+     background: url(images/accept.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
-input.stoptorrent {
-     background: #989 url('images/stop.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input.add, input.add:active {
+     background: #989 url(images/add.png) no-repeat 6px center;
+     background: url(images/add.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     padding: 4px 6px 4px 22px !important;
 }
 
-select {
-     background: #333;
-     background: url('/themes/snark/ubergine/images/graytile.png') !important;
-     color: #f60;
-     font: 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
-     font-weight: bold;
-     padding: 2px 2px 2px 3px;
-     -moz-border-radius: 4px 0 0 4px;
-     -khtml-border-radius: 4px 0 0 4px;
-     border-radius: 4px 0 0 4px;
-     border: 1px solid #000;
+input.add:hover, input.add:focus {
+     background: #767 url(images/add.png) no-repeat 6px center;
+     background: url(images/add.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
-select:hover, textarea:hover {
-     background: #f60 !important;
-     color: #fff !important;
+input.cancel, input.cancel:active {
+     background: #989 url(images/cancel.png) no-repeat 6px center;
+     background: url(images/cancel.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     padding: 4px 6px 4px 22px !important;
 }
 
-textarea {
-     background: #111 url('/themes/snark/ubergine/images/graytile.png');
-     color: #f60;
-     font-weight: bold;
-     padding: 1px 4px 0px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px inset #000;
-     font-size: 8pt;
+input.cancel:hover, input.cancel:focus {
+     background: #767 url(images/cancel.png) no-repeat 6px center;
+     background: url(images/cancel.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);    
 }
 
-img {
-     border: none;
-     margin: 0 3px 1px 3px;
-     vertical-align: middle;
-     opacity: 1.0;
-     line-height: 100%;
+input.create, input.create:active {
+     background: #989 url(images/create.png) no-repeat 6px center;
+     background: url(images/create.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     padding: 4px 6px 4px 22px !important;
 }
 
-img:hover {
-     border: none;
-     opacity: 1;
-     line-height: 100%;
+input.create:hover, input.create:focus {
+     background: #767 url(images/create.png) no-repeat 6px center;
+     background: url(images/create.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
-.infoz {
-     margin: 0 -1px 0 0 !important;
-     padding: 0 !important;
-     lineheight: 100%;
-     float: left;
+input.delete, input.delete:active {
+     background: #989 url(images/nuke.png) no-repeat 6px center;
+     background: url(images/nuke.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     padding: 4px 6px 4px 22px !important;
 }
 
-.infoz img {
-     border: none;
-     opacity: 0.5 !important;
+input.delete:hover, input.delete:focus {
+     background: #767 url(images/nuke.png) no-repeat 6px center;
+     background: url(images/nuke.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
-.infoz img:hover {
-     opacity: 1 !important;
+input.reload, input.reload:active {
+     background: #989 url(images/restore.png) no-repeat 6px center;
+     background: url(images/restore.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     padding: 4px 6px 4px 22px !important;
 }
 
+input.reload:hover, input.reload:focus {
+     background: #767 url(images/restore.png) no-repeat 6px center;
+     background: url(images/restore.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+}
 
-div.section,div.mainsection {
-     margin: 0 0 10px 0;
-     padding: 10px;
-     border: 1px solid #001;
-     color: #001;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #212;
-     word-wrap: break-word;
-     text-align: center;
-     background: #545;
-     opacity: 1 !important;
+input.reload[name="recheck"], input.reload[name="recheck"]:active, input.disabled[name="recheck"] {
+     background: #989 url(images/recheck.png) no-repeat 6px center;
+     background: url(images/recheck.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     padding: 4px 6px 4px 22px !important;
+     margin-left: 2px !important
 }
 
-div.newtorrentsection {
-     margin: 0 0 10px 0;
-     padding: 0 10px 0px 10px;
-     border: 1px solid #001;
-     text-align: center;
-     color: #ddd;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #101;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #101;
-     box-shadow: inset 0px 0px 1px 0px #101;
-     word-wrap: break-word;
-     background: #545 url('/themes/snark/ubergine/images/snark_create.png') no-repeat scroll right center;
-     opacity: 1.0;
+input.disabled[name="recheck"]:hover {
+     background-blend-mode: initial;
 }
 
-div.addtorrentsection {
-     margin: 0 0 10px 0;
-     padding: 0 10px 0px 10px;
-     border: 1px solid #001;
-     text-align: center;
-     color: #ddd;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #101;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #101;
-     box-shadow: inset 0px 0px 1px 0px #101;
-     word-wrap: break-word;
-     background: #545 url('/themes/snark/ubergine/images/snark_add.png') no-repeat scroll right center;
-     opacity: 1.0;
+input.reload[name="recheck"]:hover, input.reload[name="recheck"]:focus {
+     background: #767 url(images/recheck.png) no-repeat 6px center;
+     background: url(images/recheck.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
 }
 
-div.configsection {
-     margin: 0 0 10px 0;
-     padding: 0 10px 15px 10px;
+input.starttorrent, input.starttorrent:active {
+     background: #989 url(images/next.png) no-repeat 6px center;
+     background: url(images/next.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     padding: 4px 6px 4px 20px !important;
+}
+
+input.starttorrent:hover, input.starttorrent:focus {
+     background: #767 url(images/next.png) no-repeat 6px center;
+     background: url(images/next.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+}
+
+input.stoptorrent, input.stoptorrent:active {
+     background: #989 url(images/btn_stop.png) no-repeat 6px center;
+     background: url(images/btn_stop.png) no-repeat 6px center, linear-gradient(to bottom, #989 0%, #878 100%);
+     padding: 4px 6px 4px 22px !important;
+}
+
+input.stoptorrent:hover, input.stoptorrent:focus {
+     background: #767 url(images/btn_stop.png) no-repeat 6px center;
+     background: url(images/btn_stop.png) no-repeat 6px center, linear-gradient(to bottom, #767 0%, #989 100%);
+}
+
+.configsectionpanel tr:nth-last-child(2) td {
+     text-align: right !important;
+     border-top: 1px solid #57415F;
+     padding-top: 10px !important;
+}
+
+select {
+     background: #212 !important;
+     background: #212 url(images/graytile.png) !important;
+     background: url(images/dropdown.png) right center no-repeat, url(images/graytile.png) #212 !important;
+     background-size: 17px 17px, 96px 96px !important;
+     color: #f60;
+     font: 8pt "DejaVu Sans", Verdana, Helvetica, sans-serif;
+     font-weight: bold;
+     padding: 2px 18px 2px 1px;
+     border-radius: 2px;
      border: 1px solid #000;
-     color: #ddd;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #101;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #101;
-     box-shadow: inset 0px 0px 1px 0px #101;
-     word-wrap: break-word;
-     text-align: center;
-     background: #545;
+     margin: 2px;
+     -webkit-appearance: none;
+     -moz-appearance: none;
+     box-shadow: inset 1px 1px 2px 1px #101;
+}
+
+select:hover, select:focus, select:active  {
+     background: #f60 !important;
+     background: #f60 url(images/dropdown_hover.png) right center no-repeat !important;
+     color: #fff !important;
+     outline: none;
+     box-shadow: none;
+     background-blend-mode: luminosity;
+}
+
+select option {
+     background: #f50;
+     color: #fff;
+     font-size: 8.5pt;
+     font-weight: bold;
+     box-shadow: inset 0 0 20px 20px #f50;
+     padding: 2px 2px 2px 1px;
+}
+
+select option:hover {
+     box-shadow: inset 0 0 20px 20px #212;
+     filter: drop-shadow(0 0 1px rgba(255,0,0,0.5));
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) { /* adjust dropdown padding in webkit */
+select {
+     padding: 4px 18px 4px 4px;
+}
+}
+
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+select {
+     padding: 4px;
+}
+}
+
+select::-ms-expand {
+     display: none;
+}
+
+textarea {
+     background: #212 url(images/graytile.png);
+     background-size: 96px 96px;
+     color: #f60;
      font-weight: bold;
+     padding: 1px 4px 0;
+     border-radius: 2px;
+     border: 1px solid #000;
+     font-size: 8pt;
+     box-shadow: inset 1px 1px 2px 1px #101;
+     transition: ease box-shadow 0.15s 0s;
+}
+
+img {
+     border: none;
+     margin: 0 3px 1px 3px;
+     vertical-align: middle;
+     opacity: 1.0;
+     line-height: 100%;
+}
+
+img:hover {
+     border: none;
+     opacity: 1;
+     line-height: 100%;
 }
 
-div.configsectionpanel {
+img[src$="magnet.png"] {
+     transform: rotate(-90deg);
+}
+
+.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .section, .mainsection {
      margin: 0 0 10px 0;
      padding: 0 10px;
-     border: 1px solid #000;
+     border: 1px solid #101;
      color: #ddd;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
      border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #101;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #101;
-     box-shadow: inset 0px 0px 1px 0px #101;
+     box-shadow: inset 0 0 3px 0 #101;
      word-wrap: break-word;
-     text-align: center;
-     background: #545 url('/themes/snark/ubergine/images/configuration.png') no-repeat scroll right center;
-     font-weight: bold;
+     filter: drop-shadow(0 0 1px #515);
+}
+
+.section, .mainsection {
+     padding: 10px;
+     color: #001;
+     word-wrap: break-word;
+     background: #545;
+     background: linear-gradient(to bottom, #545 0%, #434 100%);
+     overflow: auto;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+.section, .mainsection {
+     padding-top: 9px;
+}
+}
+
+.newtorrentsection {
+     background: #545 url(images/snark_create.png) no-repeat scroll right center;
+     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #545 0%, #434 100%);
+     background-size: 80px 80px, 100% 100%;
+}
+
+.addtorrentsection {
+     background: #545 url(images/snark_add.png) no-repeat scroll right center;
+     background: url(images/snark_add.png) no-repeat scroll 99% center, linear-gradient(to bottom, #545 0%, #434 100%);
+     background-size: 61px 61px, 100% 100%;
+}
+
+.configsection {
+     padding: 0 10px 13px 10px;
+     background: #545 url(images/configuration.png) no-repeat scroll 101% center;
+     background: url(images/configuration.png) no-repeat scroll 101.5% center, linear-gradient(to bottom, #545 0%, #434 100%);
+     background-size: 84px 82px, 100% 100%;
+}
+
+.configsectionpanel {
+     background: #545 url(images/configuration.png) no-repeat scroll right center;
+     background: url(images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #545 0%, #434 100%);
+     background-size: 84px 82px, 100% 100%;
+}
+
+.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo, 
+select, input, input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"], a.control {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif;
+     font-size: 9pt !important;
+}
+
+.iframed .mainsection, .iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
+     border-radius: 0;
+     box-shadow: inset 0 0 1px 0 #ffeffd;
+     filter: none;
+}
+
+.iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
+     margin-top: -11px;
+}
+
+.addtorrentsection td:first-child, .newtorrentsection td:first-child {
+     width: 10%;
+     white-space: nowrap;
+}
+
+.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
+     width: 80%;
+}
+
+.configsectionpanel input[type="text"], .configsectionpanel select, .configsectionpanel input.r, .configsectionpanel input[name="nofilter_dataDir"] {
+     margin-left: 0;
+     font-size: 8pt;
+}
+
+.configsectionpanel input[name="nofilter_dataDir"], .configsectionpanel textarea {
+     min-width: 550px;
+     width: 60%;
+}
+
+.configsectionpanel textarea {
+     resize: none;
+     height: 24px;
+     padding: 4px 4px 2px;
+     overflow: hidden;
+}
+
+.configsectionpanel input[type="checkbox"] {
+     margin-left: 0;
+}
+
+.configsectionpanel td:first-child {
+     width: 200px;
+}
+
+.configsectionpanel tr:last-child {
+     display: none;
 }
 
 .newtorrentsection form, .configsection form, .addtorrentsection form {
      color: #ddd !important;
+     margin-top: 1px;
 }
 
-div.configsection table{
+div.configsection table {
      color: #ffb;
      opacity: 1;
 }
 
-div.configsection a {
+div.configsection a, label.toggleview {
      color: #f60;
-     text-shadow: 1px 1px #500;
+     text-shadow: 0 0 1px #000;
 }
 
-div.configsection a:hover {
-     color: #f90;
+div.configsection a:hover, .snarkConfig .snarkConfigTitle:hover a, .snarkConfig .snarkConfigTitle a:focus {
+     color: #d2baff;
      text-decoration: none;
 }
 
+.snarkConfig .snarkConfigTitle:hover img, .snarkConfig .snarkConfigTitle:focus img, .snarkConfig .snarkConfigTitle a:focus img {
+     filter: drop-shadow(0 0 1px #d2baff);
+}
+
+.snarkConfig .snarkConfigTitle a {
+     display: inline-block;
+     width: 100%;
+}
+
 code {
-     font-size: 9pt;
+     font-size: 8pt;
      color: #b8b;
      padding: 0 2px;
      font-weight: bold;
-     font-family: "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-}
-.snarknavbar {
-     margin: -10px 0 5px 0 !important;
-     padding: 11px 10px 12px;
-     border: 1px solid #101;
-     -moz-border-radius: 0 0 8px 8px;
-     -khtml-border-radius: 0 0 8px 8px;
-     border-radius: 0 0 8px 8px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #002;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #002;
-     box-shadow: inset 0px 0px 1px 0px #002;
-     background: #101 url('/themes/snark/ubergine/images/snarktopnav.png') repeat-x scroll center center;
-     text-transform: uppercase !important;
-     letter-spacing: 0.065em !important;
-     font-weight: bold;
-     font-size: 11.5pt;
-     color: #001;
-     min-width: 700px;
-     width: 70%;
-     text-align: center;
- }
-
- .snarknavbar img {
-     border: 0;
-     margin: 0 -6px 0 -2px;
-     padding: 1px 0 0px !important;
-     vertical-align: top;
+     font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
 }
 
 .routerdown {
      color: #ee9;
+     border: 1px solid #202;
+     box-shadow: inset 0 0 0 1px #303, 0 0 1px #333;
+     padding: 15px 10px !important;
+     font-size: 10pt !important;
+     background: linear-gradient(to right, #202, #000, #202) #000;
+     border-radius: 3px;
 }
 
 .trackerconfig {
+     margin-top: 11px;
      text-align: left !important;
+     border-collapse: separate;
+     border-spacing: 0;
+}
+
+.trackerconfig th:first-child {
+     border-radius: 2px 0 0 2px;
+     background: url(images/nuke.png) center right 6px no-repeat, linear-gradient(to bottom, #414 0%, #414 50%, #313 51%, #101 100%);
+     border-left: 1px solid #101;
+     width: 5%;
+}
+
+.trackerconfig th:last-child {
+     border-radius: 0 2px 2px 0;
+     border-right: 1px solid #101;
+}
+
+.trackerconfig th {
+     background: linear-gradient(to bottom, #414 0%, #414 50%, #313 51%, #101 100%);
+}
+
+_:-ms-lang(x), .trackerconfig th {
+     background: #313;
+     box-shadow: none;
+     filter: none;
+}
+
+_:-ms-lang(x), .trackerconfig th:first-child {
+     background: url(images/nuke.png) center right 6px no-repeat #313;
+     border-right: 1px solid #313 !important;
+}
+
+_:-ms-lang(x), .trackerconfig th:nth-child(7) {
+     border-left: 1px solid #313 !important;
 }
 
 .trackerconfig th:nth-child(n+4), .trackerconfig th:nth-child(n+5), .trackerconfig td:nth-child(n+4), .trackerconfig td:nth-child(n+5) {
@@ -903,11 +1746,20 @@ code {
 }
 
 .trackerconfig th, .trackerconfig td, .trackerconfig th:last-child, .trackerconfig td:last-child {
-     text-align: left !important;     
+     text-align: left !important;
 }
 
 .trackerconfig td:first-child {
-     text-align: right !important;     
+     text-align: right !important;
+}
+
+.trackerconfig tr:nth-child(2) td {
+     padding-top: 15px;
+}
+
+.trackerconfig td[colspan="7"] {
+     padding: 0 !important;
+     height: 0 !important;
 }
 
 input.trackername {
@@ -921,3 +1773,674 @@ input.trackerhome {
 input.trackerannounce {
      width: 230px;
 }
+
+/* toggle create/add panel view */
+
+input.toggle_input { /* hide checkbox and use label as faux panel heading */
+     display: none !important;
+}
+
+label.toggleview:hover {
+     cursor: pointer;
+}
+
+input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: none;
+}
+
+input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent:checked + label + hr + table {
+     display: table;
+}
+
+/* enable to display panels by default on broken webkit based browsers (midori fix) */
+/* note that midori has other issues c. v5.10, best avoided */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) { 
+input#toggle_addtorrent:not(checked) + label + hr + table, input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+input#toggle_addtorrent:checked + label + hr + table, input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+}
+*/
+
+/* display by default in iframe to avoid overflow issue */
+
+.iframed input#toggle_addtorrent:not(checked) + label + hr + table, .iframed input#toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+.iframed input#toggle_addtorrent:checked + label + hr + table, .iframed input#toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+
+label.toggleview, .snarkConfigTitle a:visited {
+     color: #f60;
+}
+
+label.toggleview:active, .snarkConfigTitle a:active {
+     color: #9183af !important;
+}
+
+label.toggleview img:hover, label.toggleview:hover img, .snarkConfigTitle a:hover img {
+     color: #f90;
+     filter: drop-shadow(0 0 1px #d2baff);
+}
+
+label.toggleview img:active, label.toggleview:active img, .snarkConfigTitle a:active img {
+     transform: rotate(90deg);
+     transition: ease transform 0.3s 0s;
+}
+
+.peerinfo td:first-child {
+     background: url(images/peer.png) center center no-repeat;
+     background-size: 14px 14px;
+}
+
+.peerinfo td, .debuginfo td {
+     padding-top: 5px;
+     padding-bottom: 5px;
+     color: #eee !important;
+}
+
+/* debug */
+
+.debuginfo td:first-child {
+     background: url(images/debuginfo.png) center center no-repeat;
+     background-blend-mode: luminosity;
+     background-size: 14px 14px;
+}
+
+.debuginfo, .debugConnection, .debugConnStat, .debugRequests {
+     font-family: "Noto Mono", "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
+}
+
+.debuginfo {
+     line-height: 150%;
+}
+
+.debuginfo b, .debugConnStat b {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+}
+
+.debugConnection {
+     font-weight: bold !important;
+     color: #070;
+     margin-left: 3px;
+     margin-right: 3px;
+     letter-spacing: 0.03em;
+}
+
+.peerinfo:hover td:nth-child(2), .debuginfo:hover td:nth-child(2) {
+     color: #fff !important;
+}
+
+.from, .to {
+     font-family: sans-serif;
+     font-size: 12pt;
+     font-weight: bold;
+     vertical-align: middle;
+     line-height: 50%;
+     text-shadow: 0 0 1px #000;
+}
+
+.debuginfo td {
+     color: #fff !important;
+}
+
+.debugConnStat {
+     display: inline-block;
+     white-space: nowrap;
+     color: #bb0;
+}
+
+.debugRequests {
+     color: #bb0;
+}
+
+.debugConnStat b {
+     color: #ffdfff !important;
+}
+
+.peerinfo:hover b, .debuginfo:hover b {
+     color: #fff !important;
+     color: #b9b;
+}
+
+/* end debug */
+
+/* Resource Errors */
+
+.resourceError {
+     border: 1px solid #101;
+     margin-bottom: 0;
+}
+
+.resourceError th {
+     background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #414 0%, #414 50%, #313 51%, #101 100%);
+     background-size: 24px auto, 100% 100%;
+     padding: 10px 10px 10px 40px;
+     font-size: 10pt !important;
+}
+
+.mainsection .resourceError td {
+     padding: 10px !important;
+     font-size: 10pt !important;
+}
+
+.resourceError tr:nth-child(odd) {
+     background: #351933;
+}
+
+.resourceError tr:nth-child(even) {
+     background: #270027;
+}
+
+#DoesNotExist {
+     margin-top: 10px;
+}
+
+/* end Resource Errors */
+
+#totals {
+     display: inline-block;
+     margin: 2px 0 2px 6px;
+     font-weight: bold;
+}
+
+.priority input[type="radio"] {
+     text-align: left;
+     margin: 0;
+}
+
+.priorityHigh, .priorityNormal, .prioritySkip {
+     padding: 0;
+     display: inline-block;
+     width: 50px;
+     font-size: 0;
+     text-align: left;
+     color: transparent;
+     overflow: hidden;
+}
+
+.priorityHigh {
+     background: url(/i2psnark/.resources/icons/clock_red.png) left 20px center no-repeat;
+}
+
+.priorityNormal {
+     background: url(/i2psnark/.resources/icons/clock.png) left 20px  center no-repeat;
+}
+
+.prioritySkip {
+     background: url(/i2psnark/.resources/icons/cancel.png) left 18px center no-repeat;
+}
+
+.priority, .snarkDirInfo .headerpriority {
+     padding: 5px !important;
+     text-align: center !important;
+     width: 150px;
+     white-space: nowrap;
+}
+
+#setPriority th {
+     text-align: right !important;
+}
+
+.snarkDirInfo img[src$="priority.png"] {
+     margin: 0 !important;
+}
+
+#torrentInfoStats td {
+     text-align: left !important;
+}
+
+#torrentInfoStats img {
+     margin: 1px 3px 2px 5px !important;
+}
+
+#torrentInfoStats span {
+     white-space: nowrap;
+     display: inline-block;
+     margin-right: 2px;
+}
+
+/* configs */
+
+#configs {
+     border-collapse: separate;
+}
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#configs td:first-child {
+     min-width: 220px !important;
+     font-weight: bold;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 8px center no-repeat;
+     background-size: 14px auto;
+     padding-left: 26px !important;
+     width: 90%;
+     line-height: 100%;
+}
+
+td#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+     margin-left: 4px;
+     line-height: 150%;
+     font-style: normal;
+}
+
+.spacer td {
+     border-bottom: 1px solid #101;
+}
+
+/* end configs */
+
+.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover {
+     opacity: 0.7;
+     cursor: not-allowed;
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) !important;
+}
+
+#filecheck {
+     display: inline-block;
+     margin: 5px 0;
+     background: url(images/progressbar.gif) left center no-repeat;
+     padding-left: 22px;
+}
+
+#filecheck a {
+     margin: 8px;
+}
+
+/* MS Edge fix */
+
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+_:-ms-lang(x), input[type="radio"], input[type="checkbox"] {
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) !important;
+}
+
+input[type="checkbox"]:hover, input[type="checkbox"]:focus {
+     filter: sepia(100%) invert(100%) hue-rotate(58deg) brightness(80%) drop-shadow(0 0 3px f60) !important;
+}
+
+/* end Edge fix */
+
+/* responsive layout */
+
+@media screen and (max-width: 950px) {
+.snarkTorrents a, .snarkTorrentETA, .snarkTorrents tfoot th, .peerinfo td, .snarkTorrents td, .snarkTorrentInfo td, .snarkDirInfo td {
+     font-size: 7.5pt !important;
+}
+
+.page {
+     min-width: 850px !important;
+}
+}
+
+@media screen and (max-width: 1050px) {
+.page {
+     padding: 6px 6px 0;
+}
+
+.section, .mainsection {
+     padding: 6px;
+}
+
+.snarkMessages, .mainsection, .addtorrentsection, .newtorrentsection, .configsection, .configsectionpanel {
+     margin-bottom: 6px !important;
+}
+
+.snarkMessages {
+     margin-bottom: 7px !important;
+}
+
+#DoesNotExist {
+     margin-top: 6px !important;
+}
+
+.logshim {
+     margin-top: -6px !important;
+}
+
+.routerdown {
+     margin: 5px;
+}
+
+table.snarkDirInfo {
+     margin-top: 6px !important;
+}
+
+.snarkDirInfo thead img {
+     max-height: 20px;
+}
+
+.snarkTorrents td:nth-child(2) {
+     white-space: nowrap;
+}
+
+.snarkTorrents a, .snarkTorrentETA, .snarkTorrents tfoot th, .peerinfo td, .snarkTorrents td, .snarkTorrentInfo td, .snarkDirInfo td {
+     font-size: 8pt;
+}
+
+.snarkTorrents td:first-child img {
+     max-height: 16px;
+}
+
+.snarkTorrents td[colspan="10"] {
+     white-space: normal;
+}
+
+.snarkTorrentName a:not(old) {
+     max-width: 300px;
+}
+
+.snarkTorrentDownloaded {
+     white-space: nowrap;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+.iframed .snarkTorrents {
+     margin-top: 6px;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+
+.snarkTorrents td:nth-child(2), .snarkTorrents td:nth-child(2) a {
+     font-weight: bold;
+}
+
+.snarkTorrents {
+     margin-top: -1px !important;
+}
+
+.iframed .snarkTorrents {
+     margin-top: 0 !important;
+     margin-bottom: 4px;
+}
+
+.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
+     width: 75%;
+}
+
+.knownTracker a, #trackerselect td a {
+     display: inline-block;
+     max-width: 230px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+}
+
+#trackerselect td a {
+     max-width: 350px;
+}
+
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1050px) {
+     .snarkTorrents {
+     margin-top: -2px !important;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.snarknavbar {
+     width: calc(100% - 22px);
+     min-width: 600px;
+     transition: ease width 0.5s 0.5s;
+}
+
+.snarkRefresh:link,.snarkRefresh:visited {
+     background-size: 15px auto, 100% 100% !important;
+     background-position: 11px 4px, center center !important;
+     padding: 4px 10px 4px 28px !important;
+     margin-right: -5px !important;
+}
+
+.snarkTorrentName a:not(old) {
+     max-width: 340px;
+     display: inline-block;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+}
+
+.toggleview, .snarkConfigTitle, .snarkConfigTitle a {
+     font-size: 11pt !important;
+}
+
+.dirInfoComplete {
+     display: none;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1200px) {
+.toggleview, .snarkConfigTitle, .snarkConfigTitle a {
+     font-size: 12pt !important;
+}
+}
+
+@media screen and (max-width: 1400px) {
+.snarknavbar {
+     padding: 14px 10px 13px;
+}
+
+_:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited {
+     background-position: 11px 5px, center center !important;
+     background-size: 15px auto, 100% 100% !important;
+}
+}
+
+@media screen and (min-width: 1050px) {
+.snarkTorrentStatus {
+     white-space: nowrap;
+}
+
+.snarkTorrents a, th, td {
+     font-size: 8pt !important;
+}
+
+.mainsection td {
+     padding-top: 3px !important;
+     padding-bottom: 3px !important;
+}
+}
+
+@media screen and (min-width: 1200px) {
+.snarkRefresh:link {
+     font-size: 11pt;
+}
+
+.snarkRefresh:link:first-child, .snarkRefresh[href="/i2psnark/"]:last-child {
+     padding-left: 32px !important;
+}
+
+_:-ms-lang(x), .snarknavbar {
+     padding: 13px 5px 15px !important;
+}
+
+.percentDownloaded {
+     pointer-events: none; /* hide tooltip */
+}
+
+#pagenav img {
+     width: 14px !important;
+     height: 14px !important;
+}
+
+.debugConnection {
+     background: #003000;
+     color: #fff;
+     border-radius: 2px;
+     padding: 1px 3px;
+     font-weight: bold;
+     margin: 2px 4px;
+     display: inline-block;
+     box-shadow: 0 0 0 1px #101;
+}
+}
+
+@media screen and (min-width: 1400px) {
+th, td, .choked, .unchoked {
+     letter-spacing: 0 !important;
+}
+
+body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, .snarkFileStatus {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-size: 10pt !important;
+}
+
+.snarknavbar {
+     padding: 17px 10px 16px;
+}
+
+.snarknavbar img {
+     margin: -2px -9px 0 -5px;
+}
+
+.snarkRefresh:link:first-child {
+     padding-left: 32px !important;
+}
+
+.snarkRefresh:link:first-child, .snarkRefresh:last-child[href="/i2psnark/"] {
+     background-position: 11px 4px, center center !important;
+}
+
+input[type="submit"], input[type="reset"], select, select option, button, a.control, .snarkTorrents a:link, td, th, code {
+     font-size: 10pt !important;
+}
+
+.snarkConfigTitle, label.toggleview {
+     font-size: 13pt !important;
+     min-width: 240px !important;
+}
+
+.snarkRefresh:link {
+     font-size: 12pt;
+}
+
+.snarkConfigTitle, label.toggleview {
+     font-size: 12pt;
+}
+
+.mainsection td {
+     padding-top: 4px !important;
+     padding-bottom: 4px !important;
+}
+
+.peerinfo tt {
+     display: inline-block;
+}
+
+.SnarkTorrents td:nth-child(4) {
+     padding-right: 5px;
+}
+
+.snarkTorrentName a:not(old) {
+     max-width: none; 
+}
+
+.snarkTorrents tt {
+     font-size: 10pt;
+     color: #cc0;
+     background: #505;
+     padding: 2px 3px;
+     border-radius: 2px;
+     box-shadow: 0 0 1px #303;
+     letter-spacing: 0.1em;
+     opacity: 0.9;
+     margin: 1px 3px !important;
+}
+
+tt, .snarkMessages, input,  textarea {
+     font-size: 9pt !important;
+}
+
+input[type="text"], input.r, input[name="nofilter_dataDir"], .configsectionpanel textarea {
+     padding: 6px !important;
+}
+
+.configsectionpanel textarea {
+     height: 30px;
+}
+
+.snarkTorrentStatus b, .dirInfoComplete {
+     margin-right: 3px;
+}
+
+.configsectionpanel, .configsectionpanel td, .snarkNewTorrent, .snarkNewTorrent td, .snarkAddInfo,
+select, input, input.r, input[name="nofilter_dataDir"], textarea[name="i2cpOpts"] {
+     font-size: 10pt !important;
+}
+
+.addtorrentsection td:first-child, .newtorrentsection td:first-child {
+     width: 200px;
+}
+
+select {
+     padding-top: 4px;
+     padding-bottom: 4px;
+}
+
+.debuginfo td {
+     font-size: 9pt !important;
+}
+
+.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .snarkFileSize {
+     padding: 0 8px !important;
+}
+
+.choked, .unchoked {
+     margin-right: 6px;
+}
+
+#pagenav img {
+     width: 16px !important;
+     height: 16px !important;
+}
+
+#configs td {
+     padding-top: 3px;
+     padding-bottom: 3px;
+}
+
+#configs td:first-child {
+     padding-right: 10px !important;
+}
+
+#configs td:last-child {
+     padding-right: 0 !important;
+}
+
+.debugConnStat {
+     margin-right: 5px;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
+.snarkRefresh img {
+     margin: -2px -8px 0 -5px;
+}
+}
+
+/* end responsive layout */
+
diff --git a/installer/resources/themes/snark/vanilla/images/accept.png b/installer/resources/themes/snark/vanilla/images/accept.png
new file mode 100644
index 0000000000000000000000000000000000000000..719e39151bbdcb581c0e096459bfc964fdc202c1
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/accept.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/arrow_refresh.png b/installer/resources/themes/snark/vanilla/images/arrow_refresh.png
deleted file mode 100644
index 88d9edfc365feb2487cd70243d7a38259dd5e717..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/vanilla/images/arrow_refresh.png and /dev/null differ
diff --git a/installer/resources/themes/snark/vanilla/images/bling.png b/installer/resources/themes/snark/vanilla/images/bling.png
deleted file mode 100644
index edd2de7c4232e90f72ddf6954cbc7465693322ba..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/vanilla/images/bling.png and /dev/null differ
diff --git a/installer/resources/themes/snark/vanilla/images/bling2.png b/installer/resources/themes/snark/vanilla/images/bling2.png
deleted file mode 100644
index 473d05f3e062c22f7a6009fc3bfb2da70d0e0d33..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/vanilla/images/bling2.png and /dev/null differ
diff --git a/installer/resources/themes/snark/vanilla/images/btn_stop.png b/installer/resources/themes/snark/vanilla/images/btn_stop.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdaeb855ae006cf6d123d3ee5a7df3ac1d6b8263
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/btn_stop.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/bullet.png b/installer/resources/themes/snark/vanilla/images/bullet.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0cb50e68783b6f4b42e5c67139f78f78137676d
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/bullet.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/button_forum.png b/installer/resources/themes/snark/vanilla/images/button_forum.png
new file mode 100644
index 0000000000000000000000000000000000000000..32c212538cd60f606b0b81e883c1985b3e2149cb
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/button_forum.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/button_forum_active.png b/installer/resources/themes/snark/vanilla/images/button_forum_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..123596043296306a9a26e02d5841e9b43dab796d
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/button_forum_active.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/button_forum_hover.png b/installer/resources/themes/snark/vanilla/images/button_forum_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e7dfa88aec55af81eaaadecd1a9a61c200188a6
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/button_forum_hover.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/button_snark.png b/installer/resources/themes/snark/vanilla/images/button_snark.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b73e60ad79f343b8275424f6963842a0d68df54
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/button_snark.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/button_snark_active.png b/installer/resources/themes/snark/vanilla/images/button_snark_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..834c4b2e5060deb0f180deea3ea83f4e019cf823
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/button_snark_active.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/button_snark_hover.png b/installer/resources/themes/snark/vanilla/images/button_snark_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f2c06ab419dd288e43818a82b3a9283b86469c8
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/button_snark_hover.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/button_tracker.png b/installer/resources/themes/snark/vanilla/images/button_tracker.png
new file mode 100644
index 0000000000000000000000000000000000000000..40d291a96b8140c45c226162b351119cc4fa90c6
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/button_tracker.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/button_tracker_active.png b/installer/resources/themes/snark/vanilla/images/button_tracker_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..9cf00ceabc5faed0f4c108d512868af62c73e8fb
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/button_tracker_active.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/button_tracker_hover.png b/installer/resources/themes/snark/vanilla/images/button_tracker_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a022b5b9b88b5bd179b8313a65c240b9eb6e38e
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/button_tracker_hover.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/config.png b/installer/resources/themes/snark/vanilla/images/config.png
index 565a9330e0a156dff5bed2c9fad8c95a44344ba4..8151463917ec88ca0962a5bfefb9f11c9122bff8 100644
Binary files a/installer/resources/themes/snark/vanilla/images/config.png and b/installer/resources/themes/snark/vanilla/images/config.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/configuration.png b/installer/resources/themes/snark/vanilla/images/configuration.png
new file mode 100644
index 0000000000000000000000000000000000000000..43a443b513766f0d35cb5efdad5aef2e2fcf777e
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/configuration.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/control_back_blue.png b/installer/resources/themes/snark/vanilla/images/control_back_blue.png
deleted file mode 100644
index 7b3f9e6fde420cb3f9454c692bc69b1d39efa280..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/vanilla/images/control_back_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/vanilla/images/control_fastforward_blue.png b/installer/resources/themes/snark/vanilla/images/control_fastforward_blue.png
deleted file mode 100644
index 4a2f9d4e4a81857f509d85bbe46936c99709cd6f..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/vanilla/images/control_fastforward_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/vanilla/images/control_play_blue.png b/installer/resources/themes/snark/vanilla/images/control_play_blue.png
deleted file mode 100644
index f8c8ec683edd6a974eacc253332f903d643dbe41..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/vanilla/images/control_play_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/vanilla/images/control_rewind_blue.png b/installer/resources/themes/snark/vanilla/images/control_rewind_blue.png
deleted file mode 100644
index 15d1584bdbb2c26a9fc4c8269aa54615a58a4657..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/vanilla/images/control_rewind_blue.png and /dev/null differ
diff --git a/installer/resources/themes/snark/vanilla/images/debuginfo.png b/installer/resources/themes/snark/vanilla/images/debuginfo.png
new file mode 100644
index 0000000000000000000000000000000000000000..42c7cd6ab143aa45bbadec43ca28ff8868ffde20
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/debuginfo.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/delete.png b/installer/resources/themes/snark/vanilla/images/delete.png
index 1f09b34c5d59595d2a99749e9cff498c01477ed7..fa0ac30cf7e800bc937eb781518c47085146873c 100644
Binary files a/installer/resources/themes/snark/vanilla/images/delete.png and b/installer/resources/themes/snark/vanilla/images/delete.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/dropdown.png b/installer/resources/themes/snark/vanilla/images/dropdown.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec983e14ae70dcf0f3a7f64ec47f533d55a8e7f5
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/dropdown.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/dropdown_hover.png b/installer/resources/themes/snark/vanilla/images/dropdown_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d7a1062a0bf91e4a239a9b762f3e142229fe244
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/dropdown_hover.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/first.png b/installer/resources/themes/snark/vanilla/images/first.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6930a18d555b9c2aa13b9b7e324195e226759de
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/first.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/graytile.png b/installer/resources/themes/snark/vanilla/images/graytile.png
deleted file mode 100644
index e2c7bb725629541967260689f2cac114188f4b55..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/snark/vanilla/images/graytile.png and /dev/null differ
diff --git a/installer/resources/themes/snark/vanilla/images/infocircle.png b/installer/resources/themes/snark/vanilla/images/infocircle.png
new file mode 100644
index 0000000000000000000000000000000000000000..13879c45aa7dd5d65997ad511d0c4131a938d1d5
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/infocircle.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/last.png b/installer/resources/themes/snark/vanilla/images/last.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c63819768ce58593504715f5ab0aff426eb47d8
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/last.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/next.png b/installer/resources/themes/snark/vanilla/images/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..195a9d707b853c9fc591a518bdd0cbb6e450d115
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/next.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/nuke.png b/installer/resources/themes/snark/vanilla/images/nuke.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0d4b0201b9fc3f6f6da0c9b888822eafaac8414
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/nuke.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/peer.png b/installer/resources/themes/snark/vanilla/images/peer.png
new file mode 100644
index 0000000000000000000000000000000000000000..93a9e773870b3d900f1c690384d8d32256762e74
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/peer.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/previous.png b/installer/resources/themes/snark/vanilla/images/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..79558ab1e169a38795bf6fa6c96c51ec63e36c9b
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/previous.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/progressbar.gif b/installer/resources/themes/snark/vanilla/images/progressbar.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e204f6b319698df8029a9e6c79cc1ea79b5e297e
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/progressbar.gif differ
diff --git a/installer/resources/themes/snark/vanilla/images/recheck.png b/installer/resources/themes/snark/vanilla/images/recheck.png
new file mode 100644
index 0000000000000000000000000000000000000000..c932759e7fa7f4ac473db118c8808544daf06cf2
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/recheck.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/remove.png b/installer/resources/themes/snark/vanilla/images/remove.png
index de3a4adda83d33facd07b405c4a2811bdc73928f..c7f2f76f0b7432b82e10aa03c32119f5aeca4deb 100644
Binary files a/installer/resources/themes/snark/vanilla/images/remove.png and b/installer/resources/themes/snark/vanilla/images/remove.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/restore.png b/installer/resources/themes/snark/vanilla/images/restore.png
new file mode 100644
index 0000000000000000000000000000000000000000..e55a304d632a7f4a67f49b35a8eb5c5c5b63d4ef
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/restore.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/snark_add.png b/installer/resources/themes/snark/vanilla/images/snark_add.png
index 0071b49ee6d172856662c126371488edcc172867..724c36a05ec9f39495f6bf5cb00e41926f1d1b2e 100644
Binary files a/installer/resources/themes/snark/vanilla/images/snark_add.png and b/installer/resources/themes/snark/vanilla/images/snark_add.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/start.png b/installer/resources/themes/snark/vanilla/images/start.png
index 215d614f8c62c2c093993907299930f18deb4b0d..28d97b73db19cc5dc61975ec0b592206922b4b2f 100644
Binary files a/installer/resources/themes/snark/vanilla/images/start.png and b/installer/resources/themes/snark/vanilla/images/start.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/start_all.png b/installer/resources/themes/snark/vanilla/images/start_all.png
index 3434f8ce6b6e39f362b7defbfeb228c3b1d4039b..003c7fd0cb86c6ecf7bffe40f5c2cba08987dec6 100644
Binary files a/installer/resources/themes/snark/vanilla/images/start_all.png and b/installer/resources/themes/snark/vanilla/images/start_all.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/stop.png b/installer/resources/themes/snark/vanilla/images/stop.png
index 6503c5f15dd3360ae5476d0d6960ab3d1c4456a7..6442358ccbf3dc47d06e20e8afe75207c08a440b 100644
Binary files a/installer/resources/themes/snark/vanilla/images/stop.png and b/installer/resources/themes/snark/vanilla/images/stop.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/stop_all.png b/installer/resources/themes/snark/vanilla/images/stop_all.png
index ef5f095222cfd838f4447f2a31bcd0a7031d549f..41827aef252362e2682886063d1d0f076c1b4be8 100644
Binary files a/installer/resources/themes/snark/vanilla/images/stop_all.png and b/installer/resources/themes/snark/vanilla/images/stop_all.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/torrent.png b/installer/resources/themes/snark/vanilla/images/torrent.png
index c0ec7d2b0434894ba28ea9436098cb391569bb5c..6befab9226d315fc2bb67219ad7844235e0454d7 100644
Binary files a/installer/resources/themes/snark/vanilla/images/torrent.png and b/installer/resources/themes/snark/vanilla/images/torrent.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/torrent0.png b/installer/resources/themes/snark/vanilla/images/torrent0.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0ec7d2b0434894ba28ea9436098cb391569bb5c
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/torrent0.png differ
diff --git a/installer/resources/themes/snark/vanilla/images/whippy.png b/installer/resources/themes/snark/vanilla/images/whippy.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5ebb5acf7f5e5f3b2eca9ff903fd98e7512c5ee
Binary files /dev/null and b/installer/resources/themes/snark/vanilla/images/whippy.png differ
diff --git a/installer/resources/themes/snark/vanilla/snark.css b/installer/resources/themes/snark/vanilla/snark.css
index 382d6aefb755e54cac7b5e61fa7778ae107102ae..4b44ae1c795116133674cb6c45b1e24ad9320d98 100644
--- a/installer/resources/themes/snark/vanilla/snark.css
+++ b/installer/resources/themes/snark/vanilla/snark.css
@@ -1,126 +1,318 @@
 /* I2PSnark theme "Vanilla" by dr|z3d */
+/* Now with 100% more chocolate */
 
+html {
+     min-height: 100%;
+}
 
 body {
-     background: #eeb url('images/graytile.png');
-     color: #001;
-     font: 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     background: #2f231a;
+     background: repeating-linear-gradient(to bottom, #9F948B 1px, #6F5B4C 1px, #BFA285 3px);
+     color: #2f1500;
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
+}
+
+/* preload top navigation mouseovers */
+body:not(old) {
+     background: repeating-linear-gradient(to bottom, #6F5B4C 1px, #9F948B 1px, #BFA285 4px),
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat !important;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
 }
 
 body.iframed {
-     background: transparent url('../../console/dark/images/transparent.gif') !important;
+     background: transparent url(/themes/console/images/transparent.gif) !important;
      margin: 6px 0 !important;
 }
 
-.snarkTitle {
-     font-size: 12pt;
-     font-weight: bold;
+body.iframed:not(old) {
+     background: url(/themes/console/images/transparent.gif),
+     url(images/button_snark_hover.png) no-repeat,
+     url(images/button_snark_active.png) no-repeat,
+     url(images/button_tracker_hover.png) no-repeat,
+     url(images/button_tracker_active.png) no-repeat,
+     url(images/button_forum_hover.png) no-repeat,
+     url(images/button_forum_active.png) no-repeat !important;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+}
+
+* {
+     outline: none;
+}
+
+td *:focus {
+     filter: drop-shadow(0 0 1px #df0067);
+}
+
+::selection {
+     background: #900 !important;
+     color: white;
+}
+
+::-moz-selection {
+     background: #800 !important;
+     color: white;
+}
+
+input[type="submit"], input[type="reset"], button, a:link, input[type="checkbox"], input[type="radio"], select, label {
+     cursor: pointer;
+}
+
+.page {
+     background: #dfdccb url(images/tile2.png);
+     background: repeating-linear-gradient(to bottom, #ECEBDD 1px, #EFEBDD 2px, #EBE5D5 5px);
+     color: #310;
+     min-width: 900px !important;
+     margin: 5px 0 0 0;
+     padding: 10px 10px 0 10px;
+     border-radius: 2px;
+     border: 1px solid #101;
+     font-size: 9pt !important;
+     line-height: 160% !important;
+     box-shadow: inset 0 0 3px 0 #a08160, 0 0 1px 0 #4f3d36;
      text-align: center;
 }
 
-.snarkRefresh:link,.snarkRefresh:visited {
-     text-decoration: none !important;
-     text-transform: uppercase !important;
-     padding: 4px 16px 5px !important;
-     margin: -5px -8px -5px 0 !important;
-     letter-spacing: 0.05em;
+.iframed .page {
+     background: none;
+     border: none;
+     box-shadow: none;
+     padding: 0;
+}
+
+a:link, a:visited {
+     text-decoration: none;
+}
+
+td a:link {
+     color: #cf0f00;
+     text-decoration: none;
      font-weight: bold;
-     font-size: 11pt;
-     color: #f60;
-     text-shadow: 0px 1px #303;
-     background: #fff url('images/bling.png') repeat-x scroll center center;
-     -moz-border-radius: 0px;
-     -khtml-border-radius: 3px;
-     border-radius: 0px;
-     -moz-box-shadow: inset 0 0 1px 0 #330;
-     -khtml-box-shadow: inset 0 0 1px 0 #330;
-     box-shadow: 0 0 1px 0 #330;
-     text-shadow: 0 0 0;
+     word-wrap: break-word;
+}
+
+td a:visited {
+     color: #9F0B00 !important;
+}
+
+td a:hover, td a:visited:hover, td a:focus, td a:visited:focus {
+     color: #df0067 !important;
+     filter: none;
+}
+
+td a:active, td a:visited:active {
+     color: #FF2F85 !important;
+}
+
+.snarkRefresh, .toggleview, .snarkConfigTitle, thead img, .snarkTorrentAction,
+input[type="submit"], input[type="reset"], .control, .input[type="radio"], input[type="checkbox"] {
+     -webkit-user-select: none;
+     -moz-user-select: none;
+     user-select: none;
+}
+
+/* top nav */
+
+.snarknavbar {
+     margin: -11px 0 10px 0 !important;
+     padding: 13px 10px 12px;
+     border: 1px solid #2f1b0c;
+     border-radius: 0 0 2px 2px;
+     box-shadow: inset 0 0 0 1px #fff5ef, 0 0 1px 0 #4f3d36;
+     background: #efefef;
+     background: linear-gradient(to bottom, #efefef 49%, #cfc7c2 52%, #cfc7c2 100%);
+     min-width: 900px;
+     width: 70%;
+     text-align: center;
+     position: sticky;
+     top: -2px;
+     z-index: 999;
+     transition: ease width 0.5s 0.5s;
+}
 
+.iframed .snarknavbar {
+     padding-top: 12px;
+     margin: -6px 0 !important;
+     width: auto;
+     border-radius: 0;
+     box-shadow: 0 0 2px 0 #fff inset, 0 0 1px 0 #4f3d36;
+     position: static;
 }
 
-.snarkRefresh:hover {
+.snarkRefresh:link, .snarkRefresh:visited {
      text-decoration: none !important;
      text-transform: uppercase !important;
-     padding: 1px 16px;
-     letter-spacing: 0.05em;
+     padding: 4px 10px 4px 28px !important;
+     margin: -5px -4px -5px 0 !important;
+     letter-spacing: 0.08em;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
      font-weight: bold;
-     font-size: 11pt;
-     color: #f50;
-     background: #fff url('images/bling2.png') repeat-x scroll center center;*/     -moz-border-radius: 0;
-     -khtml-border-radius: 0;
+     font-size: 10pt;
+     color: #3F271B;
+     background: #fff7ef url(images/button_snark.png) 11px center no-repeat;
+     background: url(images/button_snark.png) 11px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604E 1px, #A09286 1px, #BFAFA2 2px);
+     background-size: 18px auto, 100% 100%, 100% 100%;
      border-radius: 0;
-     -moz-box-shadow: inset 0 0 1px 0 #330;
-     -khtml-box-shadow: inset 0 0 1px 0 #330;
-     box-shadow: 0 0 1px  #330;
-     text-shadow: 0 0 0;
+     border: 1px solid #efe6e0;
+     text-shadow: 0 0 1px #fff5ef;
+     box-shadow: inset 0 0 0 1px #efe6e0, 0 0 0 1px rgba(77, 69, 62, 0.1);
+     border: 1px solid #2f1b0c;
+     font-size-adjust: 0.56;
 }
 
-.snarkRefresh:active {
+_:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited {
+     padding-top: 1px !important;
+     margin-right: -5px !important;
+}
+
+.snarkRefresh:hover, .snarkRefresh:focus {
      text-decoration: none !important;
-     text-transform: uppercase !important;
-     padding: 0 16px;
-     letter-spacing: 0.05em;
-     font-weight: bold;
-     font-size: 11pt;
-     color: #fb0;
-     background: #eeb;
+     text-shadow: none !important;
+     color: #930 !important;
+     background: #ffeadf url(images/button_snark_hover.png) 11px center no-repeat;
+     background: url(images/button_snark_hover.png) 11px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
+     background-size: 18px auto, 100% 100%, 100% 100%;
+     box-shadow: inset 0 0 0 1px #fff5ef, 0 0 0 1px rgba(77, 69, 62, 0.1);
+}
+
+.snarkRefresh:active {
+     background: #dfb899 url(images/button_snark_active.png) 11px center no-repeat;
+     background: url(images/button_snark_active.png) 11px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
+     background-size: 18px auto, 100% 100%, 100% 100%;
+     text-shadow: none !important;
+     box-shadow: inset 0 0 0 1px #efe6e0, inset 2px 2px 3px 1px #59513b, 0 0 0 1px rgba(77, 69, 62, 0.1);
+}
+
+.snarkRefresh:nth-child(2) {
+     background: #fff7ef url(images/button_forum.png) 12px center no-repeat;
+     background: url(images/button_forum.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(45deg, #75604E 1px, #A09286 1px, #BFAFA2 2px);
+     background-size: 17px auto, 100% 100%, 100% 100%;
+}
+
+.snarkRefresh:nth-child(n+3) {
+     background: #fff7ef url(images/button_tracker.png) 12px center no-repeat;
+     background: url(images/button_tracker.png) 12px center no-repeat, linear-gradient(to bottom, #fff7ef 47%, rgba(207, 193, 181, 0.6) 50%), repeating-linear-gradient(135deg, #75604E 1px, #A09286 1px, #BFAFA2 2px);
+     background-size: 17px auto, 100% 100%, 100% 100%;
+}
+
+.snarkRefresh:nth-child(2):hover, .snarkRefresh:nth-child(2):focus {
+     background: #ffeadf url(images/button_forum_hover.png) 12px center no-repeat;
+     background: url(images/button_forum_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
+     background-size: 17px auto, 100% 100%, 100% 100%;
+}
+
+.snarkRefresh:nth-child(n+3):hover, .snarkRefresh:nth-child(n+3):focus {
+     background: #ffeadf url(images/button_tracker_hover.png) 12px center no-repeat;
+     background: url(images/button_tracker_hover.png) 12px center no-repeat, linear-gradient(to bottom, #ffeadf 47%, #cfb6a8 50%, #cfb6a8 100%);
+     background-size: 17px auto, 100% 100%, 100% 100%;
+}
+
+.snarkRefresh:nth-child(2):active {
+     background: #dfb899 url(images/button_forum_active.png) 12px;
+     background: url(images/button_forum_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
+     background-size: 17px auto, 100% 100%, 100% 100%;
+}
+
+.snarkRefresh:nth-child(n+3):active {
+     background: #dfb899 url(images/button_tracker_active.png) 12px center no-repeat;
+     background: url(images/button_tracker_active.png) 12px center no-repeat, linear-gradient(to bottom, #dfb899 47%, #af9178 50%, #af9178 100%);
+     background-size: 17px auto, 100% 100%, 100% 100%;
 }
 
 .snarkRefresh:last-child {
-     -moz-border-radius: 0 3px 3px 0px;
-     -khtml-border-radius: 0 3px 3px 0;
-     border-radius: 0 3px 3px 0;
-     -moz-box-shadow: inset 0 0 1px 0 #330;
-     -khtml-box-shadow: inset 0 0 1px 0 #330;
-     box-shadow: 0 0 1px 0 #330;
+     border-radius: 0 2px 2px 0;
 }
 
 .snarkRefresh:first-child {
-     -moz-border-radius: 3px 0 0 3px;
-     -khtml-border-radius: 3px 0 0 3px;
-     border-radius: 3px 0 0 3px;
-     -moz-box-shadow: inset 0 0 1px 0 #330;
-     -khtml-box-shadow: inset 0 0 1px 0 #330;
-     box-shadow: 0 0 1px 0  #330;
+     border-radius: 2px 0 0 2px;
+     padding-left: 30px !important;
 }
 
-.snarkRefresh img {
-     margin-right: -10px !important;
+.snarkRefresh:last-child[href="/i2psnark/"] {
+     border-radius: 2px;
+     margin: -5px 0 -2px !important;
 }
+
+.snarkRefresh:hover, .snarkRefresh:visited:hover {
+     color: #930 !important;
+}
+
+.snarkRefresh:active, .snarkRefresh:visited:active {
+     color: #eee !important;
+}
+
+/* end topnav */
+
+/* screenlog */
+
 .snarkMessages {
-     font: bold 8pt "Lucida Console","DejaVu Sans Mono",Courier,mono !important;
+     font: bold 8pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace !important;
      text-align: left;
-     margin: 0 0 10px 0;
-     padding: 3px 5px;
-     border-spacing: 0px;
-     -moz-border-radius: 4px 0 0 0;
-     -khtml-border-radius: 4px 0 0 0;
-     border-radius: 4px 0 0 0;
-     border: 1px solid #000;
-     overflow: auto;
-     color: #500;
-     max-height: 76px;
-     min-height: 45px;
+     margin: 0 0 10px;
+     padding: 0 3px;
+     border-spacing: 0;
+     border: 1px solid #6f533e;
+     border-radius: 2px;
+     box-shadow: inset 0 0 6px 0 #3f2307;
+     color: #cfc7c2;
+     overflow: hidden;
+     height: 56px;
      width: auto;
-     background: #eda url('/themes/snark/ubergine/images/hat.png') no-repeat scroll right center;
+     background: #3f3833 url(images/hat.png) no-repeat scroll right center;
+     background: url(images/whippy.png) no-repeat scroll right 5px bottom -7px, linear-gradient(to bottom, #5f554d 0%, #3f3833 100%);
+     background-size: auto 105%, 100% 100%;
+}
+
+.snarkMessages:hover {
+     overflow: auto;
+}
+
+.snarkMessages:focus {
+     box-shadow: inset 0 0 6px 0 #3f2307, 0 0 1px #f60;
+}
+
+.snarkMessages ul {
+     margin: 0;
+     padding: 0 0 0 16px;
+     list-style: none;
+}
+
+.snarkMessages li {
+     margin-left: -15px;
+}
+
+.snarkMessages li::before {
+     content: '';
+     display: inline-block;
+     background: url(images/bullet.png) left 2px no-repeat;
+     width: 13px;
+     height: 11px;
+     background-size: 9px 9px;
 }
 
-.snarkMessages a:link {
+.snarkMessages a:link:not([href*="action=Clear"]) {
+     mix-blend-mode: exclusion;
      color: #f60 !important;
 }
 
-.snarkMessages a:hover {
-     color: #f90 !important;
+.snarkMessages a:link:hover:not([href*="action=Clear"]) {
+     mix-blend-mode: normal;
 }
 
 .snarkMessages a:visited {
-     color: #d30 !important;
+     color: #d30;
 }
 
-.snarkMessages ul {
-     margin: 0;
-     padding: 0 0 0 16px;
+.snarkMessages a:hover, .snarkMessages a:visited:hover {
+     color: #f60 !important;
+}
+
+.snarkMessages a:link:active, .snarkMessages a:visited:active  {
+     color: #f30 !important;
 }
 
 .snarkMessages p {
@@ -131,63 +323,119 @@ body.iframed {
 
 .snarkMessages img {
      float: right;
-     margin: -3px -4px 4px 4px;
-     opacity: 0.8;
+     margin: -1px -3px 4px 4px;
+     opacity: 1 !important;
+     position: sticky;
+     top: -1px;
+     mix-blend-mode: luminosity;
+     background: #cfbda8;
+     padding: 2px 2px 1px;
+     width: 10px;
+     height: 10px;
+}
+
+.snarkMessages img:hover, .snarkMessages a:focus img {
+     mix-blend-mode: normal;
+     filter: drop-shadow(0 0 1px #f60);
 }
 
 .logshim {
      margin-top: -10px !important;
 }
 
+/* end screenlog */
+
+/* pagenav */
+
+#pagenav {
+     vertical-align: middle;
+     padding: 3px 2px 2px;
+     font-size: 9pt;
+}
+
+#pagenav img {
+     border: 1px solid #541;
+     border-radius: 2px;
+     margin-right: -3px;
+     padding: 3px 4px;
+     filter: sepia(100%) hue-rotate(340deg) drop-shadow(0 0 1px #999);
+     background: linear-gradient(to bottom, #ffeadf 51%, #cfb6a8 52%);
+     box-shadow: inset 0 0 0 1px #fff;
+     mix-blend-mode: luminosity;
+}
+
+#pagenav img:hover, #pagenav a:focus img {
+     mix-blend-mode: normal;
+}
+
+#pagenav a:active img {
+     mix-blend-mode: normal;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #3f362f !important;
+}
+
+#pagenav img.disable, #pagenav img.disable:hover {
+     mix-blend-mode: luminosity;
+     opacity: 0.2;
+     margin-right: 1px;
+}
+
+/* end pagenav */
+
 pre {
      width: 100%;
-     font: 8pt "Lucida Console","DejaVu Sans Mono",Courier,mono !important;
+     font: 8pt "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", monospace !important;
      padding: 0;
      text-align: left !important;
      height: 8px;
      color: #731;
-     font-weight: bold !important; 
+     font-weight: bold !important;
 }
 
 table {
-     margin: 0px 0px 10px 0px;
-     border: 0px;
-     padding: 0px;
-     border-spacing: 0px;
+     margin: 0 0 10px 0;
+     border: 1px solid #6f533e;
+     padding: 0;
+     border-spacing: 0;
      border-collapse: collapse;
-     color: #323;
+     color: #2f1500;
      width: 100%;
      opacity: 1 !important;
      font-size: 8.5pt !important;
 }
 
-tr { 
+tr {
      opacity: 1;
 }
 
 thead, tfoot {
-     background: url('images/bling2.png') repeat-x scroll center center #867;
+     background: #efefef;
+     background: linear-gradient(to bottom, #efefef, #cfc7c2);
      font-weight: bold;
-     color: #503;
+     color: #2f1500;
 }
 
-/*
-thead a, tfoot a {
-text-shadow: 1px 1px 1px #f00;
-} 
-*/
+thead a img, thead img {
+     opacity: 0.9;
+     filter: sepia(100%) hue-rotate(340deg);
+     max-height: 20px;
+}
 
-thead {
-     border-bottom: 1px solid #604;
+thead a:hover img, thead a:focus img {
+     opacity: 1;
+     mix-blend-mode: normal;
+     filter: drop-shadow(0 0 1px #f60);
 }
 
 th {
-     padding: 4px 2px 4px 4px;
+     padding: 4px 2px;
      font-size: 8pt;
-     border-top: 1px outset #604;
-     border-bottom: 1px inset #604;
-     whitespace: nowrap;
-     color: #511;
+     border-top: 1px solid #6f533e;
+     border-bottom: 1px solid #6f533e;
+     color: #2f1500;
+}
+
+th br {
+     display: none;
 }
 
 th:first-child {
@@ -197,15 +445,7 @@ th:first-child {
 
 tfoot td:first-child {
      text-align: left !important;
-     padding-left: 0px;
-}
-
-th:first-child img {
-     margin: 1px 1px 3px 1px !important;
-}
-
-th:nth-child(2) img {
-     margin: 1px 7px 3px 2px !important;
+     padding-left: 0;
 }
 
 tfoot th {
@@ -213,7 +453,7 @@ tfoot th {
 }
 
 tfoot img, tfoot:nth-child(2) img, tfoot:nth-child(1) img, tfoot:nth-child(3) img, tfoot:nth-child(4) img {
-     margin: 0px 2px 3px 0px !important;
+     margin: 0 2px 3px 0 !important;
      padding-right: 0 !important;
 }
 
@@ -223,47 +463,139 @@ tfoot tr:nth-child(n+1) {
 
 .headerstatus {
      text-align: left;
-     padding-left: 15px;
 }
 
 .headerpriority {
-     text-align: left;
-     padding-left: 10px;
+     text-align: center;
+     padding: 5px;
+}
+
+.headerpriority br {
+     display: none;
 }
 
 .ParentDir {
-     background: #656;
-     background: #fed;
-     font-size: 8pt;
-     border: 0px inset #604 !important;
-     border-left: 0 !important;
-     border-right: 0 !important;
+     background: #fff4ef;
+     background: linear-gradient(to right, #efe6e0, #dfd6d1 70%);
      text-align: left !important;
-     padding: 4px 0;
+     padding: 4px 0 4px 4px;
 }
 
 .priority {
-     font-size: 7pt;
-     vertical-align: center;
+     font-size: 8pt;
+     vertical-align: middle;
+     text-align: center;
+     white-space: nowrap;
+     width: 2%;
 }
 
-.SnarkTorrents {
+.snarkTorrents {
      margin: 0;
-     border: 1px solid #604;
-     background: #212;
+     border: 1px solid #6f533e;
+     background: #e8e5dc;
+     border-collapse: separate;
+     border-spacing: 0;
+     border-radius: 2px;
+}
+
+.snarkTorrents thead th {
+     border-top: 0;
+     border-bottom: 1px solid #6f533e;
+}
+
+.snarkTorrents thead th > * {
+     vertical-align: middle !important;
+}
+
+.snarkTorrents thead th:nth-child(2) {
+     text-align: left;
+     min-width: 50px;
+}
+
+.snarkTorrents tfoot th {
+     border-bottom: none !important;
+     white-space: normal !important;
+     font-weight: normal;
+}
+
+.snarkTorrents tfoot th::first-line, .snarkTorrents tfoot th:nth-child(n+7) {
+     font-weight: bold !important;
+}
+
+.snarkTorrents tfoot th:nth-child(n+2) {
+     white-space: nowrap;
+}
+
+.snarkTorrents tfoot th br {
+     display: block !important;
+}
+
+.snarkTorrents thead th:first-child {
+     text-align: center !important;
+}
+
+.snarkTorrents thead th:nth-child(3) {
+     padding: 4px 4px 4px 0	;
+     text-align: right;
+}
+
+.snarkTorrents th:nth-child(n+5) {
+     text-align: right;
+}
+
+.snarkTorrents th:nth-child(6), .snarkTorrents th:last-child {
+     text-align: center;
+}
+
+.snarkTorrents th:first-child, .snarkTorrents td:first-child {
+     width: 30px;
+     white-space: nowrap;
+}
+
+.snarkTorrents th:last-child, .snarkTorrents td:last-child {
+     width: 36px;
+     white-space: nowrap;
+}
+
+.snarkTorrents tfoot {
+     vertical-align: top;
+}
+
+.snarkTorrents tfoot th:nth-child(2) {
+     text-align: center;
+}
+
+.snarkTorrents td:first-child, .snarkTorrents td:nth-child(2) {
+     padding: 2px 0 !important;
+}
+
+.snarkTorrents td:nth-child(3), .snarkTorrents td:nth-child(4) {
+     padding: 2px 0 !important;
+     width: 16px !important;
+}
+
+.snarkTorrents td:nth-child(3) {
+     padding: 0 3px !important;
+}
+
+.snarkTorrents td:nth-child(4) {
+     text-align: center;
+     padding-right: 4px !important;
+     font-weight: bold;
+}
+
+.snarkTorrents td:nth-child(7), .peerinfo .snarkTorrentStatus {
+     font-weight: bold !important;
+     white-space: nowrap !important;
 }
 
 td {
      padding: 2px 4px;
-     color: #501 !important;
+     color: #2f1500 !important;
      opacity: 1;
      font-size: 8pt;
 }
 
-.mainsection td {
-     color: #111;
-}
-
 td:first-child {
      text-align: right;
      font-size: 8pt;
@@ -274,9 +606,8 @@ td:first-child {
 }
 
 .snarkTorrentName {
-/*     text-shadow:1px 1px #540;*/
-     padding: 3px 0 0;
-     line-height: 100%;
+     padding: 3px 0;
+     line-height: 110%;
 }
 
 .snarkTorrentName img {
@@ -290,22 +621,53 @@ td:first-child {
      margin: 0 !important;
      text-align: center;
      width: 68px;
+     white-space: nowrap;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.snarkTorrentAction {
+     width: 48px !important;
+}
 }
 
-.snarkTorrentAction img {
+/* MS Edge fix */
+_:-ms-lang(x), .snarkTorrentAction {
+     width: 72px !important;
 }
 
-.snarkTorrentAction img:hover {
-     opacity: 1;
+.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
+     filter: drop-shadow(0 0 1px rgba(127, 108, 95, 0.6));
+     border: 1px solid #4d453e;
+     border-radius: 2px;
+     padding: 3px !important;
+     background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
+     box-shadow: inset 0 0 0 1px #efe6e0;
+     vertical-align: middle;
+     mix-blend-mode: normal;
+     opacity: 1 !important;
+     max-height: 10px;
+}
+
+.snarkTorrentAction input[type="image"]:hover, .snarkTorrents th:last-child input[type="image"]:hover, .snarkTorrentAction input[type="image"]:focus, .snarkTorrents th:last-child input[type="image"]:focus  {
+     background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%);
+     border: 1px solid #930 !important;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px #f30);
+}
+
+.snarkTorrentAction input[type="image"]:active, .snarkTorrents th:last-child input[type="image"]:active {
+     box-shadow: inset 0 0 0 1px #efe6e0, inset 3px 3px 3px #4d453e;
+     mix-blend-mode: multiply;
+     filter: sepia(100%) hue-rotate(340deg);
 }
 
 .snarkTorrentEven {
      font-size: 8pt;
-     background: #feb;
+     background: #dfd6d1;
 }
 
 .snarkTorrentNoneLoaded {
-     background: #323;
+     background: #5f4e41;
      font-size: 8.5pt;
      font-weight: bold;
      text-align: center !important;
@@ -313,16 +675,13 @@ td:first-child {
 }
 
 .snarkTorrentStatus {
-     padding: -1px 0 2px;
-     font-size: 8pt !important;
-     letter-spacing: -0.05em;
-     font-weight: bold;
+     padding: 2px 0;
      line-height: 100%;
 }
 
 .snarkTorrentStatus:first-child {
      text-align: left !important;
-     padding-left: 0px;
+     padding-left: 0;
      min-width: 48px;
      font-weight: bold;
      color: #402 !important;
@@ -334,14 +693,18 @@ td:first-child {
      margin-left: 6px !important;
 }
 
-.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded {
+.snarkTorrentRateUp, .snarkTorrentRateDown, .snarkTorrentDownloaded, .snarkTorrentUploaded, .peerinfo .snarkTorrentStatus {
      font-size: 8pt;
      font-weight: bold;
      padding: 0 3px;
+     line-height: 120% !important;
 }
 
 .snarkTorrentDownloaded {
      color: #439 !important;
+     text-align: center !important;
+     padding: 2px;
+     vertical-align: middle;
 }
 
 .snarkTorrentUploaded {
@@ -350,98 +713,257 @@ td:first-child {
 
 .snarkTorrentRateUp {
      color: #626 !important;
-
 }
 
 .snarkTorrentRateDown {
      color: #439 !important;
-
 }
 
 .snarkTorrentOdd {
-     background: #fed;
+     background: #efe6e0;
      font-size: 8pt;
-     border: 0px inset #fff !important;
-     border-left: 0 !important;
-     border-right: 0 !important;
 }
-.snarkTorrentOdd td, .snarkTorrentEven td {
-     border-top: 1px dotted #313 !important;
+
+.snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td, .ParentDir {
+     border-top: 1px outset #fff5ef !important;
+     border-bottom: 1px outset #efe8e0 !important;
 }
 
-.snarkFileIcon {
-     width: 16px;
+_:-ms-lang(x), .snarkTorrentOdd td, .snarkTorrentEven td, .snarkTorrentInfo td, .ParentDir {
+     border-top: 1px solid #fff5ef !important;
+     border-bottom: 1px solid #efe8e0 !important;
 }
 
-td.snarkFileIcon:first-child {
-     text-align: center;
+.snarkTorrentOdd:last-child td, .snarkTorrentEven:last-child td {
+     border-bottom: none !important;
 }
 
-.snarkFileName {
-     padding: 4px 0px !important; 
-     text-align: left !important;
-     font-size: 8pt !important;
+table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
+     background: #f9efcf !important;
+     background: linear-gradient(to right, #700 3px, #f9efcf 3px) !important;
 }
 
-.snarkFileSize {
-     padding: 4px 2px;
-     font-weight: bold;
-     color: #727 !important;
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
+     background: #f9efcf !important;
+}
 }
 
-.snarkFileStatus {
-     padding: 4px 5px 4px 15px;
-     text-align: center;
-     font-style: italic;
-     font-size: 8pt;
-     text-align: left;
+_:-ms-lang(x), table.snarkTorrents tbody tr:hover, table.snarkDirInfo tbody tr:hover {
+     background: #f9efcf !important;
 }
 
-.snarkTorrentETA {
-     font-weight: bold;
-     font-style: italic;
-     color: #505 !important;
+.snarkDirInfo tr:hover .snarkFileStatus img {
+     mix-blend-mode: normal;
 }
 
-.snarkTorrentInfo img {
-     max-height: 16px !important;
-     margin: 1px 2px 2px 10px !important;    
+.snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) {
+     background: linear-gradient(to right, #998e88 3px, #E8DFDA 3px);
 }
 
-.snarkTorrentInfo td {
-     text-align: left !important;
-     padding: 2px 0 1px 1px !important;
+.snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) {
+     background: linear-gradient(to right, #72665f 3px, #E0D9D5 3px);
 }
 
-table.SnarkTorrentInfo {
-     margin-bottom: 3 !important;
-     border: 1px solid #604;
+@media screen and (-webkit-min-device-pixel-ratio:0) { /* chrome fix - gradient otherwise applied to each td */
+.snarkTorrentEven + .snarkTorrentEven:nth-child(even), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) {
+     background: #E8DFDA;
 }
 
-table.SnarkDirInfo {
-     margin-top: -3px !important;
-     margin-bottom: 0;   
+.snarkTorrentEven + .snarkTorrentEven:nth-child(odd), .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) {
+     background: #E0D9D5;
+}
 }
 
-.snarkDirInfo thead img {
-     margin: 0 -1px 0 0 !important;
-     padding: 0 3px !important;
+.snarkTorrentEven + .snarkTorrentEven:nth-child(even) td, .snarkTorrentOdd + .snarkTorrentOdd:nth-child(even) td, .snarkTorrentEven + .snarkTorrentEven:nth-child(odd) td, .snarkTorrentOdd + .snarkTorrentOdd:nth-child(odd) td {
+     padding: 3px 3px 3px 0 !important;
+}
+
+.snarkTorrents td[colspan="4"], .snarkTorrents td[colspan="10"]  {
+     text-align: left;
+}
+
+.snarkTorrents td[colspan="10"] {
+     font-size: 8pt;
+     white-space: normal;
+}
+
+.snarkTorrents tt {
+     background: #313;
+     background: #7F654F;
+     color: #fff;
+     padding: 2px 3px;
+     border-radius: 2px;
+     opacity: 0.8;
+     letter-spacing: 0.1em;
+}
+
+.peerinfo tt {
+     margin: 0 1px;
+}
+
+.snarkFileIcon {
+     width: 16px;
+}
+
+.snarkFileIcon img, .snarkFileIcon img:hover {
+     filter: none;
+     opacity: 0.6;
+}
+
+.snarkFileIcon a img, .snarkFileIcon a:hover img {
+     opacity: 1;
+}
+
+td.snarkFileIcon:first-child {
+     text-align: center;
+}
+
+.snarkFileName {
+     padding: 4px 0 !important;
+     text-align: left !important;
+     font-size: 8pt !important;
+     font-weight: bold;
+}
+
+.snarkFileSize {
+     padding: 4px 2px;
+     font-weight: bold;
+     color: #727 !important;
+}
+
+.snarkFileStatus {
+     padding: 4px 5px;
+     text-align: center;
+     font-style: italic;
+     font-size: 8pt;
+     text-align: left;
+     white-space: nowrap;
+}
+
+.snarkTorrentETA {
+     font-weight: bold;
+     font-style: italic;
+     color: #505 !important;
+     line-height: 120%;
+}
+
+.snarkTorrentInfo img {
+     max-height: 16px !important;
+     margin: 1px 2px 2px 2px !important;
+}
+
+.snarkTorrentInfo td {
+     text-align: left !important;
+     padding: 2px 0 1px 1px !important;
+     vertical-align: middle !important;
+     background: #efe6e0;
+}
+
+.snarkTorrentInfo tr:nth-child(even) td {
+     background: #dfd6d1;
+}
+
+.snarkTorrentInfo th {
+     text-align: left;
+     background: linear-gradient(to bottom, #efefef, #cfc7c2);
+     padding: 5px 4px 5px 0;
+}
+
+.snarkTorrentInfo th:first-child {
+     background: url(images/file.png) left 7px center no-repeat, linear-gradient(to bottom, #efefef, #cfc7c2);
+     background-size: auto 16px, 100% 100%;
+     background-blend-mode: luminosity;
+}
+
+.snarkTorrentInfo th:first-child, .snarkTorrentInfo td:first-child {
+     width: 20px;
+     text-align: left;
+     padding: 2px 3px 2px 5px !important;
+}
+
+.snarkTorrentInfo {
+     margin-bottom: 2px !important;
+     border-collapse: separate;
+}
+
+.snarkTorrentInfo tr:first-child th {
+     border-top: none;
+}
+
+#torrentInfoControl {
+     border-top: 1px solid #6f533e;
+     background: linear-gradient(to bottom, #efefef, #cfc7c2);
+}
+
+#torrentInfoControl td {
+     border-bottom: none !important;;
+     background: linear-gradient(to bottom, #efefef, #cfc7c2);
+     text-align: right !important;
+     padding-right: 8px !important;
+}
+
+.snarkDirInfo {
+     margin-top: 10px !important;
+     margin-bottom: 0;
+     border-collapse: separate;
+}
+
+.snarkDirInfo tr:first-child th {
+     border-top: none !important;
+}
+
+.snarkDirInfo thead img {
+     margin: 0 -1px 0 0 !important;
+     padding: 0 3px !important;
+}
+
+.snarkTorrentInfo, .snarkDirInfo, .resourceError, .snarkTorrents {
+     box-shadow: 0 0 2px 1px rgba(77, 69, 62, 0.3);
 }
 
 thead img.disable, img.disable:hover {
      opacity: 0.4;
 }
 
-.SnarkDirInfo td {
-     min-width: 0px !important;     
+.snarkDirInfo td {
+     min-width: 0 !important;
+}
+
+.snarkDirInfo .ParentDir a, .snarkDirInfo .snarkFileName a, .snarkTorrents .snarkTorrentName a {
+     display: inline-block;
+     width: 100%;
+     padding: 2px 0;
 }
 
-.SnarkDirInfo td:nth-child(n+1) {
+.snarkDirInfo .ParentDir a img {
+     padding-right: 3px;
 }
 
-.SnarkDirInfo .headerpriority {
+.snarkDirInfo .headerpriority {
      text-align: center !important;
-     vertical-align: middle;    
+     vertical-align: middle;
+     padding: 5px !important;
+     width: 160px
+}
+
+#setPriority .headerpriority {
+     text-align: right !important;
+     padding: 5px !important;
+     border-bottom: none;
+}
+
+#setPriority .headerpriority, #torrentInfoControl td {
+     box-shadow: inset 0 0 0 1px #efe8e0;
+     border-top: 1px solid #6f533e !important;
+}
+
+#torrentInfoStats td {
+     border-bottom: none !important;
+}
+
+#setPriority input.disabled, #setPriority a.controld {
+     display: none;
 }
 
 .choked {
@@ -453,8 +975,21 @@ thead img.disable, img.disable:hover {
 }
 
 .thumb {
-     max-height: 64px;
-     max-width: 96px;
+     transition: ease all 0.3s;
+     max-width: 16px;
+}
+
+.thumb:hover {
+     margin: -3px 0 -2px 2px !important;
+     max-width: 80px;
+     max-height: 80px;
+     transition: ease all 0.3s;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.thumb:hover {
+     margin: -3px 0 -2px -1px !important;
+}
 }
 
 .snarkNewTorrent {
@@ -463,54 +998,147 @@ thead img.disable, img.disable:hover {
 
 .snarkAddInfo {
      font-size: 8pt;
-     line-height: 130% !important;
+     display: inline-block;
+     margin-top: 7px;
+     background: url(images/infocircle.png) left center no-repeat;
+     background-size: 16px auto;
+     padding-left: 20px;
+     min-height: 16px;
 }
 
-.snarkConfigTitle {
-     font-size: 11pt;
+#trackerselect {
+     width: 100% !important;
+}
+
+#trackerselect tr:first-child td {
+     font-weight: bold;
+     padding-top: 7px;
+     padding-bottom: 7px;
+}
+
+#trackerselect td {
+     white-space: nowrap !important;
+}
+
+#trackerselect td:nth-child(2), #trackerselect td:nth-child(3) {
+     min-width: 60px !important;
+}
+
+.trackerconfig tr:first-child {
+     font-weight: bold;
+     filter: drop-shadow(0 0 1px #aaa);
+}
+
+#trackerselect td:first-child {
+     font-weight: normal;
+}
+
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
+     font-size: 11pt !important;
      font-weight: bold;
-     padding: 0 15px 3px 12px;
-     margin: 5px 0 10px 0 !important;
-     letter-spacing: 0.05em;
+     font-variant: small-caps !important;
+     padding: 4px 15px 2px 12px;
+     margin: 0 0 -3px !important;
+     letter-spacing: 0.1em;
      border: 1px solid #111;
-     -moz-border-radius: 0 0 5px 5px;
-     -khtml-border-radius: 0 0 5px 5px;
-     border-radius: 0 0 5px 5px;
      border-top: 0;
-     text-shadow: 0px 1px 1px #777;
-     background: #ffb url('images/bling.png') repeat-x scroll center center !important;
-     font-variant: small-caps !important;
-     color: #503;
-     box-shadow: 0 1px 1px #777;
+     background: #fff7ef;
+     background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, rgba(207, 193, 181, 0.6) 52%), repeating-linear-gradient(135deg, #75604E 1px, #A09286 1px, #BFAFA2 2px);
+     color: #444039;
+     box-shadow: 0 0 2px #4d453e, inset 0 0 0 1px #efe6e0;
+     display: inline-block;
+     min-width: 220px;
+     vertical-align: middle;
+     text-shadow: 0 0 1px #fff5ef;
+}
+
+.snarkConfigTitle:hover, label.toggleview:hover {
+     background: #ffeadf;
+     background: linear-gradient(to bottom, #ffeadf 0%, #ffeadf 51%, #cfb6a8 52%, #cfb6a8 100%);
+}
+
+.snarkConfigTitle:active, label.toggleview:active {
+     box-shadow:  0 0 2px #4d453e, inset 0 0 0 1px #fff, inset 2px 2px 3px 1px #59513B;
+}
+
+.snarkConfigTitle a:hover, .snarkConfigTitle a:visited:hover {
+     color: #930 !important;
+}
+
+.snarkConfigTitle a:active, .snarkConfigTitle a:visited:active  {
+     color: #f30 !important;
+}
+
+.snarkConfigTitle {
+     padding-top: 3px !important;
+}
+
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover,
+.configsectionpanel .snarkConfigTitle:active, .configsectionpanel .snarkConfigTitle:focus {
+     background: #f2eeed !important;
+     background: radial-gradient(circle at left bottom, #F9F8F2, #cfc7c2 400px) !important;
+     display: block;
+     margin: 0 -11px !important;
+     border-radius: 2px 2px 0 0;
+     padding: 5px 8px 3px !important;
+     font-variant: normal;
+     text-transform: uppercase;
+     font-size: 11pt !important;
+     box-shadow: inset 0 0 0 1px #efe6e0;
+     text-align: left;
+     letter-spacing: 0.15em !important
+}
+
+.iframed .configsectionpanel .snarkConfigTitle, .iframed .configsectionpanel .snarkConfigTitle:hover, .iframed .configsectionpanel .snarkConfigTitle:active {
+     border-radius: 0;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     font-size: 12pt !important;
+}
+}
+
+/* MS Edge fix */
+_:-ms-lang(x), .snarkConfigTitle, .snarkConfigTitle a, label.toggleview,
+.configsectionpanel .snarkConfigTitle, .configsectionpanel .snarkConfigTitle:hover {
+     padding: 3px 15px 4px;
+     font-size: 12pt !important;
+}
+
+.snarkConfigTitle a, label.toggleview {
+     color: #930 !important;
+     color: #3F271B !important;
+     text-shadow: 0 0 1px #fff5ef;
+}
+
+.snarkConfigTitle a:hover, label.toggleview:hover, .snarkConfigTitle a:focus, label.toggleview:focus {
+     color: #df0072 !important;
+     color: #930 !important;
+}
+
+
+.snarkConfigTitle a:active, .snarkConfigTitle a:visited:active, label.toggleview:active {
+     color: #603110 !important;
+}
+
+.snarkConfigTitle img, label.toggleview img {
+     margin: 1px -2px 3px 0;
+     filter: drop-shadow(0 0 1px #7f6c5f) !important;
+     mix-blend-mode: luminosity;
+}
+
+.snarkConfigTitle:hover img, label.toggleview:hover img, .snarkConfigTitle:focus img, label.toggleview:focus img {
+     mix-blend-mode: normal;
 }
 
-.snarkConfigTitle img {
-     margin-right: -3px;    
-} 
 .snarkConfig {
      font-size: 8pt;
      width: 100%;
 }
 
-.page {
-     background: #fff url('images/tile2.png');
-     color: #310;
-     min-width: 800px !important;
-     margin: 5px 0 0 0;
-     padding: 10px 10px 0px 10px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #101;
-     font-size: 9pt !important;
-     line-height: 160% !important;
-     -moz-box-shadow: inset 0px 0px 1px 0px #212;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #002;
-     box-shadow: inset 0px 0px 1px 0px #002;
-     text-align: center;
-     opacity: 1;
-}
-
 form {
      margin-bottom: 0;
 }
@@ -520,114 +1148,133 @@ p {
 }
 
 hr {
-     color: #444;
-     background: #444;
+     color: #6f533e;
+     background:#6f533e;
      height: 1px;
-     border: 0px solid #444;
+     border: none;
      width: 0%;
      margin: 5px 0 7px 0;
      text-align: center;
 }
 
-a:link {
-     color: #d30;
-     text-decoration: none;
-     font-weight: bold;
-     word-wrap: break-word;
+hr.debug {
+     width: 100%;
+     margin: 5px 0;
+     background: linear-gradient(to right, #6f533e 40%, #9f8877);
 }
 
-a:visited {
-     color: #a60;
-     text-decoration: none;
-     font-weight: bold;
+hr.debug:nth-child(n+7) {
+     margin: 2px 0 3px;
+}
+
+hr.debug:last-child {
+     display: none;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+hr.debug:nth-child(n+7) {
+    margin: -10px 0 4px;
+}
+}
+
+/* buttons & inputs */
+
+.script {
+     display: inline-block;
+     vertical-align: top !important;
 }
 
-a:hover {
-     color: #fa0;
+a.control, input[type="submit"], input[type="reset"] {
+     font: 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
      font-weight: bold;
+     background-size: 14px 14px, 100% 100% !important;
+     box-shadow: inset 0 0 0 1px #efe6e0, 0 0 1px 0 #4d453e;
+     box-shadow: inset 0 0 0 1px #efe6e0, 0 0 1px 0 rgba(77, 69, 62, 0.7);
+     display: inline-block;
 }
 
 a.control, a.controld {
-     background: #fef url('images/bling.png') repeat-x scroll center center;
-     border: 1px inset #bbb;
-     border-radius: 4px;
-     color: #f30;
+     background: linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     background-size: 100% 100% !important;
+     border: 1px solid #4F3927;
+     border-radius: 2px;
+     color: #2f1500;
      font-weight: bold;
-     margin: 2px 4px;
-     padding: 3px 4px;	
-     text-shadow: 0px 0px #410;
+     margin: 2px 4px 2px 3px !important;
+     padding: 5px 6px 5px 2px;
      white-space: nowrap;
+     display: inline-block;
 }
 
 a.controld {
      color: #f60;
      font-weight: normal;
+/*     display: none;*/
 }
 
-a.controld img {
-     display: none;
+a.control:hover, a.control:focus {
+     color: #930 !important;
+     background: linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
+     filter: drop-shadow(0px 0 1px #f60);
 }
 
-a.control:hover {
-     background-color: #fef;
-     border: 1px outset #bbb;
-     color: #f60;
-     text-shadow: 0px 1px 5px #fdf;
+a.control img, a.controld img {
+     height: 14px;
+     width: 14px;
+     vertical-align: top;
+     mix-blend-mode: normal !important;
+     filter: none !important;
 }
 
 a.control:active {
-     background: #000 !important;
-     color: #f60 !important;
-     text-shadow: 0 !important;
+     color: #f30 !important;
+}
+
+button::-moz-focus-inner, input::-moz-focus-inner {
+     outline: none;
+     border: none;
 }
 
 input {
-     font-size: 9pt;
+     font-size: 8pt;
      font-weight: bold;
      text-align: left;
-     padding: 3px 4px !important;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px inset #000;
-     background: #fff /*url('/themes/snark/ubergine/images/graytile.png')*/;	 
-     color: #000;
+     padding: 5px 4px !important;
+     border-radius: 2px;
+     border: 1px solid #2f1500;
+     background: #efe6e0;
+     color: #2f1500;
      margin: 2px 4px;
+     font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
 }
 
 input.r {
      text-align: right;
+     min-width: 100px;
+     background: #efe6e0;
 }
 
 input[type=submit] {
-     text-shadow: 0px 0px #410;
-     color: #f30;
-     background: #fff;
-     border: 1px outset #bbb;
-     padding: 2px;
-     background: #fef url('images/bling.png') repeat-x scroll center center;
+     color: #2f1500;
+     border: 1px solid #4F3927;
+     background-blend-mode: luminosity;
 }
 
-input[type=submit]:hover {
-     border: 1px inset #bbb;
-     text-shadow: 0 0;	 
-     background-color: #fef;
-     color: #f60;
-     background: #fef url('images/bling2.png') repeat-x scroll center center;
-
+input[type=submit]:hover, input[type=submit]:focus, a.control:hover {
+     color: #930 !important;
+     border: 1px solid #2f1a09;
+     box-shadow: inset 0 0 0 1px #fff5ef, 0 0 1px 0 #4d453e;
+     background-blend-mode: normal;
+     filter: drop-shadow(0 0 1px #930);
 }
 
-input[type=submit]:active {
-     background: #000 !important;
-     color: #f60 !important;
-     text-shadow: 0 !important;
+input[type=submit]:active, a.control:active {
+     color: #603110 !important;
+     box-shadow: inset 0 0 0 1px #efe6e0, inset 2px 2px 2px 1px #3f362f;
 }
 
 input[type=image] {
      padding: 0 !important;
-     -moz-border-radius: 0px;
-     -khtml-border-radius: 0px;
-     border-radius: 0px;
      border: medium none;
      margin: 0 2px;
      opacity: 0.8 !important;
@@ -637,282 +1284,392 @@ input[type=image]:hover {
      opacity: 1 !important;
 }
 
-input[type=text]:active, input[type=text]:hover, input.r:hover {
-     background: #fef;
-     color: #500;
+input[type=text], input.r, textarea, input[name="nofilter_dataDir"]  {
+     vertical-align: middle;
+     padding: 2px 4px;
+     box-shadow: inset 0 0 0 1px #f9f5f2, 0 0 0 1px rgba(186, 160, 143, 0.6);
+}
+
+input[type=text]:focus, input[type=text]:focus, input.r:focus, textarea:focus, input[name="nofilter_dataDir"]:focus {
+     background: #fffcdf;
+     color: #5f1227;
+     color: #5f1227;
+     text-shadow: none;
+     transition: ease filter 0.3s 0s;
 }
 
 input[type=radio] {
      padding: 2px;
      margin: 0 3px 0 8px;
      vertical-align: bottom;
+     background: none;
 }
 
-input.default { width: 1px; height: 1px; visibility: hidden; }
+input.default {
+     width: 1px;
+     height: 1px;
+     visibility: hidden;
+     display: none;
+}
 
-input.disabled, input.disabled:hover {
-     background-color: #989;
-     border: 1px inset #bbb;
-     color: #f60;
+input.disabled, input.disabled:hover, input.disabled:focus, input.disabled:active, a.controld, a.controld:hover, a.controld:focus, a.controld:active {
      font-weight: normal;
-     text-shadow: 0px 0px 0px #410;
+     opacity: 0.6;
+     color: #2f1500 !important;
+     box-shadow: none;
+     cursor: not-allowed;
+     background-blend-mode: luminosity !important;
+     filter: none;
+}
+
+a.controld img, a.controld:hover img, a.controld:focus img, a.controld:active img {
+     mix-blend-mode: luminosity !important;
 }
 
-input.accept {
-     background: #f3efc7 url('../../console/images/accept.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input.accept, input.disabled[name="savepri"] {
+     background: url(images/accept.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     padding: 5px 5px 5px 21px !important;
+}
+
+input.accept:hover, input.accept:focus {
+     background: url(images/accept.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
 }
 
 input.add {
-     background: #f3efc7 url('../../console/images/add.png') no-repeat 2px center !important;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+     background: url(images/add.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     padding: 5px 5px 5px 21px !important;
+}
+
+input.add:hover, input.add:focus {
+     background: url(images/add.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
 }
 
 input.cancel {
-     background: #f3efc7 url('../../console/images/cancel.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+     background: url(images/cancel.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     padding: 5px 5px 5px 21px !important;
+}
+
+input.cancel:hover, input.cancel:focus {
+     background: url(images/cancel.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
 }
 
 input.create {
-     background: #f3efc7 url('images/create.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+     background: url(images/create.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     padding: 5px 5px 5px 21px !important;
+}
+
+input.create:hover, input.create:focus {
+     background: url(images/create.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
 }
 
 input.delete {
-     background: #f3efc7 url('../../console/images/delete.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+     background: url(images/nuke.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     padding: 5px 5px 5px 21px !important;
+}
+
+input.delete:hover, input.delete:focus {
+     background: url(images/nuke.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
 }
 
 input.reload {
-     background: #f3efc7 url('../../console/images/arrow_refresh.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+     background: url(images/restore.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     padding: 5px 5px 5px 21px !important;
 }
 
-input.starttorrent {
-     background: #f3efc7 url('images/start.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input.reload:hover, input.reload:focus {
+     background: url(images/restore.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
 }
 
-input.stoptorrent {
-     background: #f3efc7 url('images/stop.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px !important;
-     min-height: 22px;
+input.reload[name="recheck"], input.disabled[name="recheck"] {
+     background: url(images/recheck.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     padding: 5px 5px 5px 21px !important;
+     margin: 6px 2px;
 }
 
-select {
-     background: #fff;
-/*     background: url('/themes/snark/ubergine/images/graytile.png') !important;*/
-     color: #101;
-     font: 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
-     font-weight: bold;
-     padding: 2px 2px 2px 3px;
-     -moz-border-radius: 4px 0 0 4px;
-     -khtml-border-radius: 4px 0 0 4px;
-     border-radius: 4px 0 0 4px;
-     border: 1px solid #000;
-     margin-left: 5px;
+input.reload[name="recheck"]:hover, input.reload[name="recheck"]:focus {
+     background: url(images/recheck.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
 }
 
-select:hover, textarea:hover {
-     background: #fff !important;
-     color: #101 !important;
+input.starttorrent {
+     background: url(images/next.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     padding: 5px 5px 5px 18px !important;
+     margin: 6px;
 }
 
-textarea {
-     background: #fff; /*url('/themes/snark/ubergine/images/graytile.png');*/
-     color: #f60;
-     font-weight: bold;
-     padding: 1px 4px 0px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px inset #000;
-     font-size: 8pt;
-     margin-left: 5px;
+input.starttorrent:hover, input.starttorrent:focus {
+     background: url(images/next.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
 }
 
-img {
-     border: none;
-     margin: 0 3px 1px 3px;
-     vertical-align: middle;
-     opacity: 1.0;
-     line-height: 100%;
+input.stoptorrent {
+     background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #eeecea 0%, #eeecea 50%, #ded9d5 50%, #ded9d5 100%);
+     padding: 5px 5px 5px 21px !important;
+     margin: 4px 5px;
 }
 
-img:hover {
-     border: none;
+input.stoptorrent:hover, input.stoptorrent:focus {
+     background: url(images/btn_stop.png) no-repeat 5px center, linear-gradient(to bottom, #fff7ef 0%, #fff7ef 51%, #cfc1b5 52%, #cfc1b5 100%);
+}
+
+input[name^="action_"] {
+     border-radius: 3px;
+     filter: sepia(100%) hue-rotate(340deg);
+     max-width: 40px;
+     margin-left: 1px;
+}
+
+input[name^="action_"]:hover, input[name^="action_"]:focus {
+     filter: sepia(100%) hue-rotate(340deg) saturate(120%) drop-shadow(0 0 1px #f60);
      opacity: 1;
-     line-height: 100%;
+     box-shadow: 0 0 1px 0 #f60;
 }
 
-.infoz {
-     margin: 0 -1px 0 0 !important;
-     padding: 0 !important;
-     lineheight: 100%;
-     float: left;
+select {
+     background: #efe6e0 url(images/dropdown.png) right center no-repeat !important;
+     color: #2f1500;
+     font: 8pt "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
+     font-weight: bold;
+     padding: 5px 14px 5px 5px;
+     border-radius: 2px;
+     border: 1px solid #2f1500;
+     margin: 2px 0 2px 4px;
+     min-width: 100px;
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     box-shadow: inset 0 0 0 1px #f9f5f2, 0 0 0 1px rgba(186, 160, 143, 0.6);
 }
 
-.infoz img {
-     border: none;
-     opacity: 0.8 !important;
+select option {
+     font-weight: bold;
 }
 
-.infoz img:hover {
-     opacity: 1 !important;
+select:focus {
+     background: #fffcdf url(images/dropdown_hover.png) right center no-repeat !important;
+     color: #5f1227 !important;
 }
 
+@-moz-document url-prefix() {
+select option {
+     background: #fffcdf;
+     box-shadow: inset 0 0 20px 20px #fffcdf;
+     color: #5f1227;
+}
 
-div.section,div.mainsection {
-     margin: 0 0 10px 0;
-     padding: 10px;
-     border: 1px solid #001;
-     color: #001;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #212;
-     word-wrap: break-word;
-     text-align: center;
-     background: #fef;
-     opacity: 1 !important;
+select option:hover, select option:checked {
+     box-shadow: inset 0 0 20px 20px #5f1227;
+     background: #f60;
+}
 }
 
-div.newtorrentsection {
-     margin: 0 0 10px 0;
-     padding: 0 10px 0px 10px;
-     border: 1px solid #001;
-     text-align: center;
-     color: #ddd;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #fff;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #fff;
-     box-shadow: inset 0px 0px 1px 0px #fff;
-     word-wrap: break-word;
-     background: #ffd url('images/snark_create.png') no-repeat scroll right center;
-     opacity: 1.0;
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+select {
+     padding: 4px;
+}
 }
 
-div.addtorrentsection {
-     margin: 0 0 10px 0;
-     padding: 0 10px 0px 10px;
-     border: 1px solid #001;
-     text-align: center;
-     color: #ddd;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #fff;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #fff;
-     box-shadow: inset 0px 0px 1px 0px #fff;
-     word-wrap: break-word;
-     background: #ffd url('images/snark_add.png') no-repeat scroll right center;
-     opacity: 1.0;
+select::-ms-expand {
+     display: none;
 }
 
-div.configsection {
-     margin: 0 0 10px 0;
-     padding: 0 10px 15px 10px;
-     border: 1px solid #000;
-     color: #ddd;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #fff;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #fff;
-     box-shadow: inset 0px 0px 1px 0px #fff;
-     word-wrap: break-word;
-     text-align: center;
-     background: #ffd;
+textarea, input[name="nofilter_dataDir"] {
+     background: #efe6e0;
      font-weight: bold;
+     padding: 2px 4px;
+     border-radius: 2px;
+     border: 1px solid #2f1500;
+     font-size: 8pt;
+     margin-left: 4px;
+     font-family: "Bitstream Vera Sans", Verdana, Helvetica, sans-serif;
+     width: 70%;
+}
+
+textarea[name="i2cpOpts"] {
+     overflow: hidden;
+}
+
+textarea[name="i2cpOpts"]:focus, .r:focus, input[type="text"]:focus, select:focus, input[name="nofilter_dataDir"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus {
+     box-shadow: 0 0 1px rgba(223, 0, 103, 0.6);
+     transition: ease box-shadow 0.3s 0s, ease filter 0.3s 0s;
+}
+
+textarea {
+     resize: none;
+     height: 26px;
+     padding: 4px;
+     color: #2f1500;
+     font-size: 8pt;
+     margin-top: 2px;
+}
+
+/* end buttons & inputs */
+
+img {
+     border: none;
+     margin: 0 2px;
+     vertical-align: middle;
+     opacity: 1.0;
+     line-height: 100%;
+     filter: drop-shadow(0 0 1px rgba(117, 114, 106, 0.6));
+}
+
+img:hover {
+     border: none;
+     opacity: 1;
+     line-height: 100%;
+}
+
+a:hover img, a:focus img {
+     filter: drop-shadow(0 0 1px #df0067);
+     mix-blend-mode: normal;
+}
+
+img[src$="magnet.png"] {
+     transform: rotate(-90deg);
+}
+
+img[src$="details.png"] {
+     mix-blend-mode: luminosity;
+}
+
+.snarkFileStatus img {
+     mix-blend-mode: luminosity;
 }
 
-div.configsectionpanel {
+.snarkFileStatus img[src*="clock"] {
+     mix-blend-mode: normal !important;
+}
+
+.newtorrentsection, .addtorrentsection, .configsection, .configsectionpanel, .section, .mainsection {
+     background: #dfd7d1;
+     background-blend-mode: luminosity;
      margin: 0 0 10px 0;
      padding: 0 10px;
-     border: 1px solid #000;
+     border: 1px solid #1f1400;
+     border-radius: 2px;
+     box-shadow: inset 0 0 0 1px  #efe6e0, 0 0 1px 0 #4f3d36;
      color: #ddd;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #fff;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #fff;
-     box-shadow: inset 0px 0px 1px 0px #fff;
-     word-wrap: break-word;
      text-align: center;
-     background: #ffd url('/themes/snark/ubergine/images/configuration.png') no-repeat scroll right center;
-     font-weight: bold;
+     word-wrap: break-word;
 }
 
-.newtorrentsection form, .configsection form, .addtorrentsection form {
-     color: #ddd !important;
+.section, .mainsection {
+     padding: 10px;
+     background: #dfd7d1;
+     background: linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%);
 }
 
-div.configsection table{
-     color: #ffb;
-     opacity: 1;
+.newtorrentsection {
+     background: #dfd7d1 url(images/snark_create.png) no-repeat scroll right center;
+     background: url(images/snark_create.png) no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%);
+     background-size: 80px 80px, 100% 100%;
 }
 
-div.configsection a {
-     color: #f30;
-     text-shadow: 1px 1px #777;
+.addtorrentsection {
+     background: #dfd7d1 url(images/snark_add.png) no-repeat scroll right 10px center;
+     background: url(images/snark_add.png) no-repeat scroll right 10px center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%);
+     background-size: 61px 61px, 100% 100%;
 }
 
-div.configsection a:hover {
-     color: #f90;
-     text-decoration: none;
+.configsection {
+     padding: 0 10px 13px 10px;
+     background: url(images/configuration.png) 102% center no-repeat, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%);
+     background-size: 84px 82px, 100% 100%;
 }
 
-code {
-     font-size: 9pt;
-     color: #930;
-     padding: 0 2px;
-     font-weight: bold;
-     font-family: "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+.configsectionpanel {
+     background: #dfd7d1 url(/themes/snark/ubergine/images/configuration.png) no-repeat scroll right center;
+     background: url(/themes/snark/ubergine/images/configuration.png) no-repeat scroll right center, linear-gradient(to bottom, #dfd7d1 0%, #cfc7c2 100%);
+     background-size: 84px 82px, 100% 100%;
 }
-.snarknavbar {
-     margin: -10px 0 5px 0 !important;
-     padding: 11px 10px 12px;
-     border: 1px solid #101;
-     -moz-border-radius: 0 0 8px 8px;
-     -khtml-border-radius: 0 0 8px 8px;
-     border-radius: 0 0 8px 8px;
-     -moz-box-shadow: inset 0px 0px 1px 0px #212;
-     -khtml-box-shadow: inset 0px 0px 1px 0px #212;
-     box-shadow: inset 0px 0px 1px 0px #212;
-     background: #fef url('images/bling2.png') repeat-x scroll center center;
-     text-transform: uppercase !important;
-     letter-spacing: 0.065em !important;
+
+.configsectionpanel td, .snarkNewTorrent td, select, select option, input, textarea, input[name="nofilter_dataDir"], .configsectionpanel th {
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Lucida Grande", "Bitstream Vera Sans", Verdana, sans-serif;
+     font-size: 9pt !important;
+}
+
+.iframed .mainsection, .iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
+     border-radius: 0;
+     box-shadow: inset 0 0 2px 0 #fff, 0 0 1px 0 #4f3d36;
+}
+
+.iframed .newtorrentsection, .iframed .addtorrentsection, .iframed .configsection, .iframed .configsectionpanel {
+     margin-top: -11px;
+}
+
+.addtorrentsection table, .newtorrentsection table, .configsectionpanel table {
+     border: none;
+}
+
+.addtorrentsection td:first-child, .newtorrentsection td:first-child {
+     width: 120px;
      font-weight: bold;
-     font-size: 11.5pt;
-     color: #001;
-     min-width: 700px;
-     width: 70%;
-     text-align: center;
- }
+}
 
- .snarknavbar img {
-     border: 0;
-     margin: 0 -6px 0 -2px;
-     padding: 1px 0 0px !important;
-     vertical-align: top;
+.addtorrentsection tr:first-child td:last-child {
+     white-space: nowrap;
+}
+
+.addtorrentsection input[type="text"], .newtorrentsection input[type="text"] {
+     width: 75%;
+     width: calc(100% - 200px);
+}
+
+.snarkConfig tr:nth-last-child(4) td, .trackerconfig tr:nth-last-child(4) td {
+     padding-bottom: 15px;
+}
+
+.snarkConfig tr:nth-last-child(2) td, .trackerconfig tr:nth-last-child(2) td {
+     border-top: 1px solid #6f533e !important;
+     padding-top: 10px;
+}
+
+.configsectionpanel tr:nth-last-child(2) td:last-child {
+     padding-right: 0;
+}
+
+.configsectionpanel tr:last-child td, .snarkConfig tr:nth-last-child(3) {
+     display: none;
+}
+
+.configsectionpanel tr:nth-last-child(2) input {
+     float: right;
+}
+
+.newtorrentsection form, .configsection form, .addtorrentsection form {
+     color: #ddd !important;
 }
 
+code, tt {
+     font-size: 8pt;
+     color: #313;
+     padding: 0 1px;
+     font-weight: bold;
+     font-family: "DejaVu Sans Mono", "Droid Sans Mono", "Lucida Console", monospace;
+}
 
 .routerdown {
-     color: #900;
+     color: #7f4c0f;
 }
 
 .trackerconfig {
+     margin-top: 11px; 
      text-align: left !important;
+     border-collapse: separate;
+     border-spacing: 0;
+}
+
+.trackerconfig th {
+     background: linear-gradient(to bottom, #efefef 0%, #efefef 51%, #cfc7c2 52%, #cfc7c2 100%);
+}
+
+.trackerconfig th:first-child {
+     border-radius: 2px 0 0 2px;
+     border-left: 1px solid #6f533e;
+     background: url(/themes/console/images/buttons/delete.png) center right 8px no-repeat, linear-gradient(to bottom, #efefef 0%, #efefef 51%, #cfc7c2 52%, #cfc7c2 100%);
+}
+
+.trackerconfig th:last-child {
+     border-radius: 0 2px 2px 0;
+     border-right: 1px solid #6f533e;
 }
 
 .trackerconfig th:nth-child(n+4), .trackerconfig th:nth-child(n+5), .trackerconfig td:nth-child(n+4), .trackerconfig td:nth-child(n+5) {
@@ -920,21 +1677,603 @@ code {
 }
 
 .trackerconfig th, .trackerconfig td, .trackerconfig th:last-child, .trackerconfig td:last-child {
-     text-align: left !important;     
+     text-align: left !important;
 }
 
 .trackerconfig td:first-child {
-     text-align: right !important;     
+     text-align: right !important;
 }
 
-input.trackername {
+.trackerconfig tr:nth-child(2) td {
+     padding-top: 10px;
+}
+
+.trackerconfig input[type="text"] {
+     margin-left: 0;
+}
+
+.trackername {
      width: 100px;
 }
 
-input.trackerhome {
+.trackerhome {
      width: 200px;
 }
 
-input.trackerannounce {
+.trackerannounce {
      width: 230px;
 }
+
+.optbox, input[type="radio"], input[type="checkbox"] {
+     min-width: 16px !important;
+     min-height: 16px !important;
+     opacity: 0.8;
+     background: none;
+     filter: sepia(50%) invert(80%) hue-rotate(150deg);
+}
+
+.optbox:hover, input[type="radio"]:hover, input[type="checkbox"]:hover, .optbox:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
+     outline: none;
+     opacity: 1;
+     filter: sepia(50%) invert(80%) hue-rotate(150deg) drop-shadow(0 0 2px #df0067);
+}
+
+/* toggle create/add panel view */
+
+.toggle_input { /* hide checkbox and use label as faux panel heading */
+     display: none !important;
+}
+
+.toggleview:hover {
+     color: #f90;
+     cursor: pointer;
+}
+
+#toggle_addtorrent:not(checked) + label + hr + table, #toggle_createtorrent:not(checked) + label + hr + table {
+     display: none;
+}
+
+#toggle_addtorrent:checked + label + hr + table, #toggle_createtorrent:checked + label + hr + table {
+     display: table;
+}
+
+/* display panels by default on webkit based browsers (midori fix) */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+#toggle_addtorrent:not(checked) + label + hr + table, #toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+#toggle_addtorrent:checked + label + hr + table, #toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+}
+*/
+
+/* display by default in iframe to avoid overflow issue */
+
+.iframed #toggle_addtorrent:not(checked) + label + hr + table, .iframed #toggle_createtorrent:not(checked) + label + hr + table {
+     display: table;
+}
+
+.iframed #toggle_addtorrent:checked + label + hr + table, .iframed #toggle_createtorrent:checked + label + hr + table {
+     display: none;
+}
+
+.toggleview, .snarkConfigTitle a:visited {
+     color: #930;
+}
+
+.toggleview img:hover, .toggleview:hover img, .snarkConfigTitle a:hover img {
+     color: #f90;
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+.toggleview:active, .snarkConfigTitle a:active {
+     color: #603110 !important;
+}
+
+.toggleview img:active, .toggleview:active img, .snarkConfigTitle a:active img {
+     transform: rotate(90deg);
+     transition: ease transform 0.3s 0s;
+}
+
+/* end panels toggle */
+
+/* debug */
+
+.debuginfo td:first-child {
+     background: url(images/debuginfo.png) center center no-repeat;
+     mix-blend-mode: luminosity !important;
+     background-size: 14px 14px;
+}
+
+.debuginfo b {
+     text-transform: capitalize;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+}
+
+.from, .to {
+     font-family: sans-serif;
+     font-size: 12pt;
+     margin: -1px 0 0 0;
+     display: inline-block;
+}
+
+.debugConnStat {
+     display: inline-block;
+     white-space: nowrap;
+     font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
+     margin-right: 5px;
+}
+
+.debugConnstat b {
+     color: #2f1500;
+}
+
+.debugConnStat, .debugRequests {
+     color:#5F3117;
+     font-weight: bold;
+}
+
+.debugRequests {
+     font-family: "Droid Sans Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
+     margin-left: 4px;
+}
+
+.debugConnection {
+     display: inline-block;
+     line-height: 100%;
+     color: #030;
+     font-weight: bold;
+     margin: 2px 3px !important;
+}
+
+/* end debug */
+
+.peerinfo td:first-child {
+     background: url(images/peer.png) center center no-repeat;
+}
+
+.peerinfo td, .debuginfo td {
+     padding-top: 5px !important;
+     padding-bottom: 5px !important;
+}
+
+#totals {
+     display: inline-block;
+     margin: 2px 0 2px 6px;
+     font-weight: bold;
+}
+
+/* Resource Errors */
+
+.resourceError {
+     border: 1px solid #6f533e;
+     margin-bottom: 0;
+}
+
+.resourceError th {
+     background: url(/themes/console/images/info/errortriangle.png) left 10px center no-repeat, linear-gradient(to bottom, #efefef, #cfc7c2);
+     background-size: 24px auto, 100% 100%;
+     padding: 10px 10px 10px 40px;
+}
+
+.mainsection .resourceError td {
+     padding: 10px !important;
+     font-size: 10pt !important;
+}
+
+.resourceError tr:nth-child(odd) {
+     background: #dfd6d1;
+}
+
+.resourceError tr:nth-child(even) {
+     background: #efe6e0;
+}
+
+#DoesNotExist {
+     margin-top: 10px;
+}
+
+/* end Resource Errors */
+
+.priorityHigh {
+     background: url(/i2psnark/.resources/icons/clock_red.png) left 28px center no-repeat;
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+}
+
+.priorityNormal {
+     background: url(/i2psnark/.resources/icons/clock.png) left 28px  center no-repeat;
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+}
+
+.prioritySkip {
+     background: url(/i2psnark/.resources/icons/cancel.png) left 26px center no-repeat;
+     display: inline-block;
+     width: 48px;
+     color: transparent;
+}
+
+/* configs */
+
+#configs {
+     border-collapse: separate;
+}
+
+#configs td:nth-child(2) {
+     white-space: nowrap;
+}
+
+#configs td:first-child {
+     min-width: 240px !important;
+     font-weight: bold;
+}
+
+#configs tr:nth-last-child(2) td, .trackerconfig tr:nth-last-child(2) td {
+     border-top: 1px solid #efe6e0 !important;
+}
+
+#configs tr:nth-last-child(4) td, .trackerconfig tr:nth-last-child(4) td {
+     border-bottom: 1px solid #4f3d36 !important;
+}
+
+td#bwHelp {
+     background: url(images/infocircle.png) left 10px center no-repeat;
+     background-size: 16px auto;
+     padding-left: 30px !important;
+     width: 90%;
+     line-height: 100%;
+}
+
+td#bwHelp a {
+     display: inline-block;
+     white-space: nowrap;
+     font-style: normal;
+}
+
+/* end configs */
+
+.knownTracker input[type="radio"], .knownTracker input[type="radio"]:hover {
+     opacity: 0.5 !important;
+     cursor: not-allowed;
+     filter: sepia(50%) invert(80%) hue-rotate(150deg) !important;
+}
+
+#filecheck {
+     display: inline-block;
+     margin: 5px 0;
+     background: url(images/progressbar.gif) left center no-repeat;
+     padding-left: 22px;
+}
+
+#filecheck a {
+     margin: 8px;
+}
+
+#torrentInfoStats td {
+     text-align: left !important;
+}
+
+#torrentInfoStats img, .snarkTorrentInfo td:first-child img {
+     margin: 1px 3px 2px 2px !important;
+     mix-blend-mode: luminosity;
+}
+
+.snarkTorrentInfo a:hover img {
+     mix-blend-mode: normal !important;
+}
+
+#torrentInfoStats b {
+     margin-left: 1px;
+}
+
+#torrentInfoStats span {
+     white-space: nowrap;
+     display: inline-block;
+     margin-right: 3px;
+}
+
+/* MS Edge fix */
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+_:-ms-lang(x), input[type="radio"], input[type="checkbox"] {
+     filter: sepia(50%) invert(80%) hue-rotate(150deg) !important;
+}
+
+/* end Edge fix */
+
+/* responsive layout */
+
+@media screen and (max-width: 1000px) {
+.snarkTorrents td:nth-child(2) {
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+.snarkTorrents td[colspan="10"] {
+     white-space: normal;
+}
+
+.snarkTorrentStatus b {
+     display: none;
+}
+
+b.alwaysShow {
+     display: inline;
+}
+
+.lowersection .snarkConfigTitle, .lowersection .snarkConfigTitle:hover,  label.toggleview, .snarkConfigTitle a {
+     font-size: 11pt !important;
+     max-width: 220px !important
+}
+
+.configsectionpanel .snarkConfigTitle {
+     font-size: 10.5pt !important;
+}
+
+.snarkTorrents td:first-child img {
+     max-height: 16px;
+}
+
+.from, .to {
+     font-size: 11pt !important;
+}
+
+.snarkTorrentOdd td, .snarkTorrentEven td {
+     padding-top: 3px;
+     padding-bottom: 3px; 
+}
+
+.snarkTorrents tt {
+     background: none;
+     color: #030;
+}
+
+.snarkDirInfo thead img {
+     max-height: 18px;
+}
+
+.knownTracker a, #trackerselect td a {
+     display: inline-block;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+     max-width: 200px !important;
+}
+
+#trackerselect td a {
+     max-width: 350px !important;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1000px) {
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     font-size: 12pt !important;
+     letter-spacing: 0.1em !important;
+}
+}
+
+@media screen and (max-width: 1200px) {
+.snarknavbar {
+     width: calc(100% - 22px);
+     transition: ease width 0.5s 0.5s;
+}
+
+.snarkRefresh:nth-child(n+2) {
+     padding: 4px 8px 4px 24px !important;
+     background-size: 14px auto, 100% 100%, 100% 100% !important;
+     background-position: 8px center, center center, center center !important;
+}
+
+.snarkRefresh:first-child {
+     padding: 4px 8px 4px 26px !important;
+     background-size: 16px auto, 100% 100%, 100% 100% !important;
+     background-position: 9px center, center center, center center !important;
+}
+
+_:-ms-lang(x), .snarkRefresh:link, .snarkRefresh:visited {
+     padding-top: 3px !important;
+}
+
+.peerinfo td, .debuginfo td {
+     padding-top: 0 !important;
+     padding-bottom: 0 !important;
+}
+
+.snarkTorrentETA {
+     padding-right: 10px !important;
+}
+
+.dirInfoComplete {
+     display: none;
+}
+
+#pagenav img {
+     height: 14px;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width: 1200px) {
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     font-size: 11pt !important;
+     letter-spacing: 0.1em !important;
+}
+}
+
+@media screen and (min-width: 1000px) {
+body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button {
+     font-size: 9pt !important;
+}
+
+.snarkRefresh:link {
+      font-size: 11.5pt;
+}
+
+.snarkTorrentOdd td, .snarkTorrentEven td {
+     padding-top: 3px !important;
+     padding-bottom: 3px !important;
+}
+
+.peerinfo tt {
+     display: inline-block;
+     margin: 0 3px;
+}
+
+.snarkTorrentName {
+     padding-left: 1px;
+}
+
+.snarkTorrentStatus {
+     white-space: nowrap;
+}
+
+.snarkTorrentStatus b {
+     margin-right: 3px;
+}
+}
+
+@media screen and (min-width: 1200px) {
+.snarkTorrentOdd td, .snarkTorrentEven td {
+     padding-top: 4px !important;
+     padding-bottom: 4px !important;
+}
+
+.percentDownloaded {
+     pointer-events: none; /* hide tooltip */
+}
+
+.snarkTorrentRateUp, .snarkTorrents th:nth-child(9), .snarkTorrents tfoot th:nth-last-child(2), .snarkTorrents .peerinfo td:nth-last-child(2)  {
+     padding-right: 15px !important;
+}
+
+thead a img, thead img {
+     max-height: 21px;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1200px) {
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     font-size: 13pt !important;
+     letter-spacing: 0.1em !important;
+}
+}
+
+@media screen and (min-width: 1400px) {
+body, .snarkTorrents td, .snarkAddInfo, th, td, .snarkFileName, a.control, input[type="submit"], input[type="reset"], select, button, code, #pagenav {
+     font-size: 10pt !important;
+}
+
+tt, .snarkTorrents tt, .snarkMessages, textarea {
+     font-size: 9pt !important;
+}
+
+.snarkAddInfo, .configsectionpanel td, .snarkNewTorrent td, .configsectionpanel th, 
+.configsectionpanel td, .snarkNewTorrent td, select, select option, input, textarea, input[name="nofilter_dataDir"] {
+     font-size: 10pt !important;
+}
+
+.snarkRefresh:link {
+      font-size: 13pt;
+}
+
+.snarkRefresh:link:first-child {
+     padding-left: 30px !important;
+}
+
+select {
+     padding-top: 4px;
+     padding-bottom: 4px;
+}
+
+.snarkTorrentDownloaded {
+     white-space: nowrap;
+     padding: 0 8px;
+}
+
+thead a img, thead img {
+     max-height: 22px;
+}
+
+.snarkTorrentAction input[type="image"], .snarkTorrents th:last-child input[type="image"] {
+     padding: 4px !important;
+     margin: 2px !important;
+}
+
+.snarkConfigTitle, .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle,
+.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active, label.toggleview {
+     min-width: 240px !important;
+     font-size: 12pt !important;
+}
+
+.mainsection td, .peerinfo td {
+     padding-top: 2px !important;
+     padding-bottom: 2px !important;
+}
+
+.snarkTorrentInfo td, .snarkDirInfo td {
+     padding-top: 5px !important;
+     padding-bottom: 5px !important;
+}
+
+.peerinfo tt {
+     margin: 1px 4px;
+}
+
+.snarkTorrentName {
+     padding-left: 2px;
+}
+
+.snarkTorrentStatus b, .dirInfoComplete {
+     margin-right: 4px;
+}
+
+.snarkDirInfo td:nth-child(n+2) {
+     padding-left: 10px;
+     padding-right: 10px;
+}
+
+tr#torrentInfoStats td {
+     padding-top: 5px !important;
+     padding-bottom: 5px !important;
+}
+
+.debuginfo td::after {
+     content: "";
+     display: inline-block;
+     min-height: 18px;
+     vertical-align: middle;
+}
+
+.debugConnection {
+     margin: 0 4px;
+     padding: 2px 3px;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     font-weight: bold;
+     background: #967158;
+     color: #fff;
+     border-radius: 2px;
+     display: inline-block;
+     vertical-align: middle;
+}
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 1400px) {
+.snarkConfigTitle, label.toggleview, .configsectionpanel .snarkConfigTitle, .snarkConfigTitle a, .snarkConfigTitle a:hover,
+.configsectionpanel .snarkConfigTitle:hover, .configsectionpanel .snarkConfigTitle:active {
+     font-size: 14pt !important;
+     letter-spacing: 0.1em !important;
+}
+}
+
+/* end responsive layout */
+
diff --git a/installer/resources/themes/susidns/classic/susidns.css b/installer/resources/themes/susidns/classic/susidns.css
new file mode 100644
index 0000000000000000000000000000000000000000..dfed3b855a22760005eb4557b267f696206d93b7
--- /dev/null
+++ b/installer/resources/themes/susidns/classic/susidns.css
@@ -0,0 +1,955 @@
+/* SusiDNS theme "Classic" */
+/* Author: dr|z3d */
+
+body {
+     font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif;
+     background: #eef;
+     color: #0c153d;
+     min-width: 700px;
+}
+
+body.iframed {
+     background: #fff !important;
+     margin: 0;
+}
+
+#logo {
+     text-align: center;
+     background: #eef url(/themes/susidns/images/logo.png) center center no-repeat;
+     background: url(/themes/susidns/images/logo.png) center center no-repeat;
+     height: 55px;
+     background-size: auto 50px;
+}
+
+#logo img {
+     display: none;
+}
+
+.iframed #logo {
+     display: none;
+}
+
+*, *:active {
+     outline: none;
+}
+
+hr {
+     display: none;
+}
+
+table {
+     width: 100%;
+}
+
+table.book {
+     border: 1px solid #89f;
+     margin: -2px 0 10px !important;
+     border-collapse: collapse;
+}
+
+.book tr {
+     border-top: 1px inset #ccf;
+     border-bottom: 1px inset #ccf;
+}
+
+table.book td {
+     padding: 2px 5px;
+}
+
+table.book th {
+     text-align: left;
+     padding-left: 5px;
+}
+
+.book th:last-child {
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%);
+}
+
+table.book tr:hover textarea {
+     background: #fff;
+     border: none;
+     box-shadow: none;
+}
+
+table.book tr:hover {
+     border-top: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+}
+
+table.book td:last-child {
+     width: 36px;
+     white-space: no-wrap;
+     text-align: center;
+     padding: 0 5px;
+}
+
+table.book td:first-child {
+     width: 200px;
+     white-space: nowrap;
+}
+
+table.book td:nth-child(2) {
+     width: 30px;
+     white-space: nowrap;
+     padding-left: 10px;
+}
+
+.book td:nth-child(3) {
+     text-align: center;
+     width: 20px;
+     padding: 2px 20px 2px 0 !important;
+}
+
+.book td:nth-child(3) a:not(old) {
+     font-size: 0 !important;
+}
+
+.book td:nth-child(3) .addrhlpr a::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     text-align: center;
+     padding: 0 10px !important;
+     filter: drop-shadow(0 0 1px #555);
+}
+
+.book td:nth-child(4) .addrhlpr:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+td.destinations {
+     padding: 0 !important;
+}
+
+#add {
+     background: #fff;
+}
+
+#add td:first-child {
+     width: 100px;
+     white-space: nowrap;
+     text-align: right;
+}
+
+#navi {
+     border: 1px solid #89f;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%);
+     margin: -1px -11px 0;
+     padding: 0;
+     position: sticky;
+     top: -1px;
+     z-index: 999;
+}
+
+.iframed #navi {
+     position: static;
+}
+
+.iframed #navi, .iframed h3, .iframed h4, .iframed #help, .iframed p.buttons, .iframed #filter {
+     border-left: none !important;
+     border-right: none !important;
+}
+
+.iframed #content h3 {
+     border: none;
+     margin: 0;
+     border-bottom: 1px dotted #89f;
+     background: none;
+}
+
+.iframed #content h3:first-child {
+     margin-top: 10px;
+}
+
+div.page {
+     border: 1px solid #89f;
+     background: #fff !important;
+     margin: 0;
+     padding: 0 10px;
+     color: #0c153d;
+     font-size: 9pt !important;
+     line-height: 160% !important;
+}
+
+.iframed .page {
+     background: transparent !important;
+     margin: 0 1px !important;
+     border: none;
+}
+
+div.help {
+     border: 1px solid #89f;
+     margin: 0 0 10px;
+     background: #eef;
+}
+
+.iframed #helpsubs {
+     margin: 0 0 -1px;
+}
+
+.iframed #helpconfig {
+     margin: 0 0 -1px;
+}
+
+#helpconfig h3 {
+     margin: -1px;
+}
+
+.iframed #helpconfig h3 {
+     margin: -1px 0;
+}
+
+.help ul, .help ol {
+     margin-left: -25px;
+     list-style-type: square;
+}
+
+p {
+     line-height: 140%;
+     margin-left: 10px;
+     margin-right: 10px;
+     font-size: 9pt;
+     text-align: justify;
+}
+
+h3 {
+     color: #0c153d;
+     font-size: 11pt;
+     font-weight: bold;
+     border: 1px solid #89f;
+     margin: -1px -11px 10px;
+     padding: 5px 10px;
+     background: #fff;
+     text-transform: capitalize;
+}
+
+#help h3 {
+     margin: -1px -1px 10px;
+}
+
+h4 {
+     border: 1px solid #89f;
+     padding: 3px 10px;
+     margin: -11px -11px 5px;
+     background: linear-gradient(to right, #fff, #eef);
+}
+
+a {
+     color: #33a;
+     text-decoration: none;
+     font-weight: bold;
+}
+
+a:visited {
+     color: #448;
+}
+
+a:hover {
+     text-decoration: none;
+     color: #f60;
+}
+
+a:active {
+     color: #f90;
+}
+
+th {
+     line-height:12pt;
+     padding:5px 10px;
+     font-size:10pt;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%);
+     border-bottom: 1px solid #89f;
+}
+
+td {
+     padding:5px 10px;
+     font-size:9pt;
+     vertical-align:center;
+}
+
+li {
+     margin-left:15px;
+     margin-right:15px;
+     font-size:9pt;
+}
+
+tr.list1 {
+     background-color:#dde1ff;
+     background: rgba(220,220,255,0.5);
+}
+
+tr.list0 {
+     background-color:#eff1ff;
+     background: rgba(240,240,255,0.5);
+}
+
+tr.list0:hover, tr.list1:hover {
+     background: #fff;
+     background: linear-gradient(to bottom, #fff 0%, #ffe 100%) !important;
+}
+
+p.messages {
+     background: #ffe;
+     border: 1px solid #89f;
+     border: 1px solid #89f;
+     padding: 15px 15px 15px 45px;
+     margin: -6px -11px 5px;
+     background: #ffe url(/themes/console/images/info/infohelp.png) 8px center no-repeat;
+     line-height: 125%;
+     box-shadow: inset 0 0 0 1px #ff9;
+}
+
+.iframed p.messages {
+     border-left: none;
+     border-right: none;
+}
+
+p.help {
+     padding: 15px 15px 15px 45px;
+     margin: 0;
+     background: #ffe url(/themes/console/images/info/infohelp.png) 8px center no-repeat;
+     line-height: 120%;
+}
+
+p.book, #messages + p {
+     background: url(/themes/susidns/images/addressbook.png) center left no-repeat;
+     padding: 10px 10px 10px 38px;
+}
+
+p.footer {
+     position: absolute;
+     top: 0;
+     left: -24px;
+     border: none;
+     background: none;
+     opacity: 0.3;
+     font-size: 8pt !important;
+     display: none;
+}
+
+.iframed #footer {
+     display: none;
+}
+
+div#filter {
+     border: 1px solid #89f;
+     padding: 0 10px;
+     margin: 0 -11px;
+     word-spacing: 0.2em;
+     background: #fff;
+     text-align: center;
+}
+
+#filter p {
+     line-height: 220%;
+     text-transform: capitalize;
+     text-align: center;
+}
+
+#filter a, #filter a:visited {
+     border: 1px solid #ccc;
+     margin: 2px 0;
+     padding: 0 6px;
+     border-radius: 2px;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     font-size: 10pt;
+     box-shadow: inset 0 0 0 1px #fff;
+     text-transform: capitalize;
+     color: #555;
+     display: inline-block;
+     min-width: 16px;
+}
+
+#filter a:hover, #filter a:focus {
+     text-decoration: none;
+     color: #f60 !important;
+     border: 1px solid #f60 !important;
+     background: #fff;
+}
+
+#filter a:active {
+     box-shadow: inset 3px 3px 3px #999;
+}
+
+#filter p b {
+     font-size: 12pt;
+     vertical-align: bottom;
+/*     border-bottom: 2px solid #0c153d;*/
+     margin-right: 5px;
+}
+
+#filter span {
+     display: inline-block;
+     border: 1px solid #89f;
+     margin-top: -1px;
+     min-width: 300px !important;
+     padding: 5px;
+     font-weight: bold;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%);
+}
+
+#filter span > * {
+     vertical-align: middle;
+}
+
+#filter span b {
+     font-size: 11pt;
+     text-transform: uppercase;
+     color: #115;
+     line-height: 80%;
+     display: inline-block;
+     margin-top: -2px;
+}
+
+#filter span a {
+     margin: 0 5px !important;
+     display:inline-block;
+     padding: 1px 5px;
+}
+
+#search {
+     text-align: center !important;
+}
+
+td.search:first-child {
+     text-align: right;
+     white-space: nowrap;
+     font-weight: bold;
+     width: 20%;
+}
+
+td.search:last-child {
+     text-align: left;
+     width: 20%;
+}
+
+#search form {
+     text-align: center !important;
+}
+
+#search table {
+     border: 1px solid #89f;
+     margin: -1px auto;
+     background: #fff;
+     width: 400px;
+}
+
+#search td {
+     padding: 5px;
+}
+
+#search input[type="text"] {
+     width: 200px;
+     margin-left: 10px;
+     background: url(/themes/console/images/buttons/search.png) 5px center no-repeat;
+     padding: 5px 5px 5px 25px;
+}
+
+#messages:empty {
+     display: none;
+}
+
+#visualid {
+     padding: 0;
+}
+
+#visualid h3 {
+     text-transform: none;
+}
+
+#idAddress {
+     text-transform: none;
+}
+
+#visualid table {
+     width: 100%;
+     border-collapse: collapse;
+     margin: 0;
+}
+
+#visualid tr:first-child td {
+     padding: 10px 10px 20px;
+}
+
+#visualid td:first-child {
+     text-align: right;
+}
+
+#visualid td[colspan="2"] {
+     border-top: 1px solid #89f;
+     padding: 15px 0;
+}
+
+.iframed #visualid td[colspan="2"] {
+     padding-bottom: 0;
+}
+
+img[src*="imagegen"] {
+     width: 256px;
+     height: 256px;
+     border: 1px solid #ddd;
+     border-radius: 4px;
+     filter: drop-shadow(0 0 3px #ccc);
+}
+
+.illustrate {
+     max-width: 90%;
+     height: auto;
+}
+
+img.illustrate {
+     margin: 10px 10px 20px;
+     padding: 10px;
+     border-radius: 4px;
+     border: 1px solid #337;
+     font-size: 10pt;
+     box-shadow: inset 0 0 1px #002;
+     background: #fff;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+_:-ms-lang(x), img.illustrate {
+     width: auto;
+     max-width: 600px;
+}
+
+#buttons, .buttons {
+     text-align: right;
+}
+
+p.buttons {
+     border: 1px solid #89f;
+     padding: 10px;
+     margin: 0 -11px -13px;
+     background: #fff;
+}
+
+.fakebutton, input, select {
+     font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif;
+}
+
+input[type="text"], input[type="password"], textarea {
+     margin: 3px 3px 3px 0;
+     vertical-align: middle;
+     min-width: 160px;
+     border: 1px solid #bbb;
+     box-shadow: inset 1px 1px 1px #ddd;
+     border-radius: 2px;
+     padding: 3px 2px;
+     color: #222;
+     font: 9pt/130% "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif;
+}
+
+input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+     box-shadow: inset 0 0 0 1px #89f;
+     box-shadow: inset 0 0 0 1px #89f, 0 0 1px rgba(136, 153, 255, 0.4);
+     color: #000;
+}
+
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
+     border: none;
+     outline: none;
+}
+
+input[type="submit"], input[type="reset"] {
+     min-width: 80px;
+}
+
+textarea {
+     width: 100%;
+     resize: none;
+     margin: 0 auto 10px;
+     color: #444;
+}
+
+td.destinations textarea, td.destinations textarea:focus {
+     font: normal 8.5pt "Noto Mono", "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     resize: none;
+     font-size: 8pt;
+     padding: 0 !important;
+     border: none;
+     border-left: 1px solid #888 !important;
+     border-right: 1px solid #888 !important;
+     border-radius: 0;
+     margin: 0 0 0 5px !important;
+     background: none;
+     box-shadow: 0 none !important;
+}
+
+.fakebutton, input[type="submit"], input[type="reset"] {
+     padding: 4px 8px !important;
+     border-radius: 2px;
+     border: 1px solid #bbb;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 #ddd;
+     background: #eee;
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     margin: 2px 0 2px 4px;
+     color: #333 !important;
+}
+
+.fakebutton:hover, input[type="submit"]:hover, input[type="reset"]:hover,
+.fakebutton:focus, input[type="submit"]:focus, input[type="reset"]:focus {
+     background: #fff;
+     background: linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     border: 1px solid #89f;
+     filter: drop-shadow(0 0 1px #89f);
+     color: #222;
+}
+
+.fakebutton:active, input[type="submit"]:active, input[type="reset"]:active {
+     box-shadow: inset 3px 3px 3px #999;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999;
+     border: 1px solid #bbb;
+     color: #333;
+}
+
+input[type="radio"], input[type="checkbox"] {
+     min-width: 16px;
+     min-height: 16px;
+     background: none;
+}
+
+input[type="radio"]:hover, input[type="radio"]:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus {
+     box-shadow: inset 0 0 1px 2px #89f;
+     filter: drop-shadow(0 0 3px #89f);
+     outline: none;
+}
+
+form[action="subscriptions"], form[action="config"] {
+     margin: 10px 0;
+}
+
+form[action="subscriptions"] textarea {
+     height: 120px !important;
+}
+
+/* topnav */
+
+#navi {
+     padding: 3px !important;
+     text-align: center !important;
+}
+
+#navi a, #navi a:visited {
+     border: 1px solid #6b78bf;
+     border-radius: 2px;
+     margin: 3px 0 !important;
+     box-shadow: 0 0 1px 0 #ddd;
+     display: inline-block;
+     outline: none;
+     color: #448 !important;
+}
+
+#navi a:hover, #navi a:focus {
+    border: 1px solid #f60;
+    color: #f60 !important;
+}
+
+#navi a:active {
+    border: 1px solid #f90;
+    box-shadow: inset 2px 2px 2px #555;
+    background-blend-mode: luminosity;
+    color: #777 !important;
+}
+
+#navi a.abook {
+     background: #fff url(/themes/susidns/images/abook.png) 5px center no-repeat;
+     background: url(/themes/susidns/images/abook.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #ddf 100%);
+     padding: 3px 5px 3px 24px;
+}
+
+#navi a.abook:hover {
+     background: url(/themes/susidns/images/abook.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #ffd 50%, #ffd 100%);
+}
+
+#navi a#subs {
+     background: #fff url(/themes/susidns/images/subs.png) 5px center no-repeat;
+     background: url(/themes/susidns/images/subs.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #ddf 100%);
+     padding: 3px 5px 3px 24px;
+}
+
+#navi a#subs:hover {
+     background: url(/themes/susidns/images/subs.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #ffd 50%, #ffd 100%);
+}
+
+#navi a#config {
+     background: #fff url(/themes/console/images/buttons/configure.png) 5px center no-repeat;
+     background: url(/themes/console/images/buttons/configure.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #ddf 100%);
+     padding: 3px 5px 3px 24px;
+}
+
+#navi a#config:hover {
+     background: url(/themes/console/images/buttons/configure_hover.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #ffd 50%, #ffd 100%);
+}
+
+#navi a#overview {
+     background: #fff url(/themes/susidns/images/overview.png) 5px center no-repeat;
+     background: url(/themes/susidns/images/overview.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eef 50%, #ddf 100%);
+     padding: 3px 5px 3px 24px;
+}
+
+#navi a#overview:hover {
+     background: url(/themes/susidns/images/overview.png) 5px center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #ffd 50%, #ffd 100%);
+}
+
+.headline + #book > table {
+     margin-top: 10px !important;
+}
+
+/* page titles */
+
+.headline h3 {
+     padding: 10px 5px 10px 40px;
+     background: url(/themes/susidns/images/addressbook.png) 10px center no-repeat;
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+.headline#subscriptions h3 {
+     background: url(/themes/susidns/images/subs_24.png) 10px center no-repeat;
+}
+
+.headline#config h3 {
+     background: url(/themes/susidns/images/configure_24.png) 10px center no-repeat;
+}
+
+.headline h4 {
+     padding: 5px 10px 5px 40px;
+     background: #eff2ff url(/themes/susidns/images/drive.png) 13px center no-repeat;
+}
+
+p#filtered {
+     background: #fff url(/themes/console/images/buttons/filter.png) 18px center no-repeat;
+     padding: 0 10px 0 38px !important;
+}
+
+p.book {
+     background: #fff url(/themes/susidns/images/abook.png) 18px center no-repeat;
+     padding: 0 10px 0 38px !important;
+}
+
+/* export hosts */
+
+#export {
+     text-align: right;
+     margin-top: -36px;
+     margin-bottom: -4px;
+}
+
+/* hide export button on published page when empty */
+#messages + form[action="export"] {
+     display: none;
+}
+
+#filter {
+     margin-top: -2px !important;
+}
+
+p#filtered {
+     padding-right: 200px !important;
+     padding-top: 2px !important;
+     padding: 2px 200px 0 20px !important;
+     background-position: left center !important;
+}
+
+#book p {
+     margin-left: 2px;
+}
+
+p.book {
+     padding-left: 26px !important;
+     background-position: left center !important;
+}
+
+/* host details page */
+
+#host_details td {
+     padding: 5px 10px !important;
+}
+
+#host_details td:first-child {
+     min-width: 10px !important;
+     width: 10%;
+     white-space: nowrap;
+     font-weight: bold;
+     text-align: right;
+}
+
+#host_details td:last-child {
+     width: 90%;
+     text-align: left;
+     border-left: none !important;
+     border-right: none !important;
+}
+
+#host_details td.destinations {
+     background: none;
+}
+
+#host_details tr:hover {
+     background: #ffd;
+}
+
+#host_details .destaddress {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
+     word-break: break-all !important;
+     white-space: normal !important;
+}
+
+/* end host details */
+
+.names img {
+     width: 20px;
+     height: 20px;
+     vertical-align: middle;
+     margin: 1px 10px 1px 1px;
+     padding: 1px;
+     border: 1px solid #89f;
+     border-radius: 2px;
+     background: #fff;
+}
+
+.names img:hover, .names a:focus img {
+     filter: drop-shadow(0 0 1px #f60) !important;
+     box-shadow: 0 0 0 1px #f60;
+}
+
+.names a:active img, .names a:focus img {
+     transform: rotate(45deg) scale(0.8);
+     transition: ease all 0.1s 0s;
+}
+
+/* hostname list */
+
+#host_list th:first-child,
+#host_list td:first-child {
+     width: 150px;
+     width: 30%;
+     white-space: nowrap;
+     padding-left: 5px;
+}
+
+#host_list th:first-child {
+     padding-left: 39px;
+}
+
+#host_list td:last-child {
+     width: 16px;
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+#host_list th:nth-child(2), #host_list td:nth-child(2),
+#host_list th:nth-child(3), #host_list td:nth-child(3),
+#host_list th:nth-child(4), #host_list td:nth-child(4) {
+     width: 35px;
+     width: 8%;
+     padding: 0 5px !important;
+     white-space: nowrap;
+     text-align: center;
+}
+
+#host_list td:nth-child(2) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(2) a::after {
+     content: url(/themes/console/images/buttons/link.png);
+     text-align: center;
+     filter: drop-shadow(0 0 1px #555);
+     cursor: pointer;
+}
+
+#host_list td:nth-child(3) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(3) a::after {
+     content: url(/themes/console/images/buttons/helper.png);
+     cursor: pointer;
+}
+
+#host_list th:nth-child(4), #host_list td:nth-child(4) {
+     padding-right: 30px !important;
+}
+
+#host_list td:nth-child(4) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(4) .addrhlpr a::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     text-align: center;
+     padding: 0 10px !important;
+     filter: drop-shadow(0 0 1px #555);
+     cursor: pointer;
+}
+
+#host_list td:nth-child(2) a:hover, #host_list td:nth-child(3) a:hover, #host_list td:nth-child(4) a:hover,
+#host_list td:nth-child(2) a:focus, #host_list td:nth-child(3) a:focus, #host_list td:nth-child(4) a:focus {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+#host_list .destaddress {
+     overflow: auto !important;
+     white-space: nowrap;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
+     font-weight: normal;
+     color: #555;
+     padding: 3px !important;
+     -webkit-user-select: all;
+     -moz-user-select: all;
+     user-select: all;
+}
+
+/* end hostname list */
+
+td.destinations {
+     max-width: 50px !important;
+     border-left: 1px inset #ccf;
+     border-right: 1px inset #ccf;
+}
+
+/* responsive layout */
+
+@media screen and (min-width: 1400px) {
+body, p, td, textarea, input, button, li, a {
+     font-size: 10pt !important;
+}
+
+code, tt {
+     font-size: 9pt !important;
+}
+
+h4, #navi a {
+     font-size: 11pt;
+}
+
+h3 {
+     font-size: 12pt !important;
+}
+
+#export {
+     margin-top: -40px !important;
+}
+
+#filter span, #filter a {
+     font-size: 11pt !important;
+     min-width: 24px !important;
+}
+
+#filter span {
+     font-size: 11pt !important;
+     min-width: 400px !important;
+}
+
+/* end responsive layout */
+
+/* Edge/IE tweaks */
+
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+/* end Edge/IE tweaks */
diff --git a/installer/resources/themes/susidns/dark/images/bin.png b/installer/resources/themes/susidns/dark/images/bin.png
new file mode 100644
index 0000000000000000000000000000000000000000..df6278bcf211ed276e36d662e606be5702fcc99e
Binary files /dev/null and b/installer/resources/themes/susidns/dark/images/bin.png differ
diff --git a/installer/resources/themes/susidns/dark/susidns.css b/installer/resources/themes/susidns/dark/susidns.css
index a1fd6cc946ade500842ac6cd5b067663074b81ac..1470be343d1a251f3e49082ac0bc186db20b8c61 100644
--- a/installer/resources/themes/susidns/dark/susidns.css
+++ b/installer/resources/themes/susidns/dark/susidns.css
@@ -1,29 +1,163 @@
-/* Susidns Dark theme by dr|z3d */
+/* SusiDNS "Camo" theme (aka "dark") */
+/* Author: dr|z3d */
 
 body {
-     font-family:"Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     background-color: #000;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif;
+     line-height: 120%;
+     background: #000;
+     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.45)), url(/themes/console/dark/images/camotile2.png) top left fixed;
      color:#ee9;
+     padding-top: 5px;
+     margin: 0 10px;
+     min-width: 650px;
 }
 
 body.iframed {
-     background: transparent !important;
+/*     background: transparent !important;*/
+     margin: 0;
+}
+
+::selection {
+     background: #030 !important;
+     color: white;
+}
+
+::-moz-selection {
+     background: #030 !important;
+     color: white;
+}
+
+.page {
+     color:#ee9;
+     margin: 10px 0;
+     padding: 0 5px;
+     font-size: 9pt !important;
+/*     background: #000;*/
+}
+
+.iframed .page {
      margin: 0;
+     padding: 0 15px;
+     background: transparent !important;
 }
 
 #logo {
      display: none;
 }
 
-#navi p {
+#logo img {
+     display: none;
+}
+
+/* topnav */
+
+div#navi  {
+     border: 1px solid #2a5f29;
+     padding: 5px 3px;
+     background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center !important;
+     background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important;
+     margin: -16px auto 30px;
+     position: sticky;
+     top: -1px;
+     border-radius: 0 0 2px 2px;
+     z-index: 999;
      text-align: center;
-     font-weight: bold;
+}
+
+.iframed div#navi  {
+     margin: -6px -15px 30px;
+     border: 1px solid #494;
+     border-right: none;
+     border-left: none;
+     padding: 5px 0;
+     border-radius: 0;
+     position: static;
 }
 
 #navi a:link {
-     text-transform: capitalize;     
+     text-transform: capitalize;
+}
+
+#navi a, #navi a:visited {
+     color: #494 !important;
+     border: 1px solid #2a5f29;
+     border-radius: 2px;
+     display: inline-block;
+     margin: 1px 0;
+     box-shadow: inset 0 0 0 1px #000;
+     filter: drop-shadow(0 0 1px #000);
+     padding: 2px 5px 3px 24px;
+}
+
+#navi a:hover, #navi a:focus  {
+    border: 1px solid #f60;
+    color: #f60 !important;
+    background: #000;
+    box-shadow: inset 0 1px 1px #ee9;
 }
 
+#navi a:active {
+    border: 1px solid #f60;
+    box-shadow: inset 3px 3px 3px #000;
+    box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000;
+    color: #ee9 !important;
+    background-blend-mode: luminosity;
+}
+
+#navi a.abook {
+     background: #000 url(/themes/susidns/images/abook.png) 5px center no-repeat;
+     background: url(/themes/susidns/images/abook.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%);
+}
+
+#navi a.abook:hover, #navi a.abook:focus {
+     background: #000 url(/themes/susidns/images/abook.png) 5px center no-repeat !important;
+}
+
+#navi a.abook:active {
+     background: #f60 url(/themes/susidns/images/abook.png) 5px center no-repeat !important;
+}
+
+#navi a#subs {
+     background: #000 url(/themes/susidns/images/subs.png) 5px center no-repeat;
+     background: url(/themes/susidns/images/subs.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%);
+}
+
+#navi a#subs:hover, #navi a#subs:focus {
+     background: #000 url(/themes/susidns/images/subs.png) 5px center no-repeat !important;
+}
+
+#navi a#subs:active {
+     background: #f60 url(/themes/susidns/images/subs.png) 5px center no-repeat !important;
+}
+
+#navi a#config {
+     background: #000 url(/themes/console/images/buttons/configure.png) 5px center no-repeat;
+     background: url(/themes/console/images/buttons/configure.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%);
+}
+
+#navi a#config:hover, #navi a#config:focus {
+     background: #000 url(/themes/console/images/buttons/configure.png) 5px center no-repeat !important;
+}
+
+#navi a#config:active {
+     background: #f60 url(/themes/console/images/buttons/configure.png) 5px center no-repeat !important;
+}
+
+#navi a#overview {
+     background: #000 url(/themes/susidns/images/overview.png) 5px center no-repeat;
+     background: url(/themes/susidns/images/overview.png) 5px center no-repeat, linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%);
+}
+
+#navi a#overview:hover, #navi a#overview:focus {
+     background: #000 url(/themes/susidns/images/overview.png) 5px center no-repeat !important;
+}
+
+#navi a#overview:active {
+     background: #f60 url(/themes/susidns/images/overview.png) 5px center no-repeat !important;
+}
+
+/* end topnav */
+
 hr {
      color: #494;
      background: #494;
@@ -32,107 +166,443 @@ hr {
      width: 100%;
      margin: 5px 0;
      text-align: center;
+     display: none;
+}
+
+div#filter {
+     border: 1px solid #2a5f29;
+     padding: 0 5px 15px;
+     text-align: center;
+     background: #001000;
+}
+
+div#filter + div#search {
+     border: 1px solid #2a5f29;
+     margin: -1px 0 14px !important;
+}
+
+div#filter + div#search > form {
+     margin: 0;
+     padding: 0;
+}
+
+#filter p, #search td {
+     font-weight: bold;
+}
+
+#search {
+     text-align: center;
+     background: #000900;
+}
+
+#search table {
+     margin: 0 auto;
+}
+
+#search td input[type="text"] {
+     margin-left: 5px;
+}
+
+#search td:first-child {
+     text-align: right;
+}
+
+#search input {
+     margin-left: 0;
+     padding-left: 0;
+}
+
+#filter p {
+     padding: 20px 20px 10px 17px;
+     text-align: center;
+}
+
+#filter p:first-child {
+     padding-bottom: 0;
+}
+
+#filter p + p {
+     display: none;
+}
+
+#search {
+     padding: 0 10px;
+     margin-top: 5px !important;
+     margin-bottom: 15px;
+}
+
+#filter a:link {
+     text-transform: capitalize;
+}
+
+#filter p {
+     line-height: 210%;
+     word-spacing: 0.1em;
+     text-transform: capitalize;
+     margin: 12px 0 0;
+     padding: 0;
+}
+
+#filter a {
+     border: 1px solid #2a5f29;
+     margin: 1px 0 3px;
+     padding: 1px 8px;
+     min-width: 18px;
+     border-radius: 2px;
+     background: #000;
+     background: linear-gradient(to bottom, #010 0%, #000 100%);
+     font-size: 10pt;
+     text-transform: uppercase;
+     white-space: nowrap;
+     display: inline-block;
+}
+
+#filter a:hover {
+     text-decoration: none;
+     color: #f60;
+     border: 1px solid #f60;
+     border-radius: 2px;
+     background: #020;
+}
+
+#filter a:active {
+     box-shadow: inset 3px 3px 3px #000;
+}
+
+#filter span {
+     display: inline-block;
+     border: 1px solid #2a5f29;
+     min-width: 300px;
+     white-space: nowrap;
+     margin-top: -1px;
+     padding: 5px;
+     font-size: 10pt;
+     font-weight: bold;
+     text-transform: capitalize;
+     background-image: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important;
+}
+
+#filter span a, #filter span a:hover {
+     border: none;
+     background: none;
+}
+
+#filter span a:active {
+     box-shadow: none;
+}
+
+#filter span b {
+     text-transform: uppercase;
+     font-size: 10pt;
+     margin: 0 0 0 5px;
 }
 
 p {
      color:#ee9;
-     margin: 0;
-     font-size: 8pt;
+     margin: 0 0 4px;
+     font-size: 9pt;
      text-align: justify;
 }
 
 span.addrhlpr {
-     font-size:8pt;
+     font-size: 9pt;
 }
 
 h3 {
-     color:#ee9;
-     font-size:10pt;
-     font-weight:bold;
-     border: 1px solid #494;
-     padding: 5px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     background: #000 url('../../console/dark/images/header.png') repeat-x scroll center center !important;
+     color: #ee9;
+     font-size: 10pt;
+     font-weight: bold;
+     border: 1px solid #2a5f29;
+     padding: 7px 10px;
+     background: #000 url(/themes/console/dark/images/header.png) repeat-x scroll center center;
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%);
      letter-spacing: 0.08em;
-     padding: 6px;
+     word-spacing: 0.1em;
      text-shadow: 0 0 2px #001100;
      text-transform: uppercase;
+     box-shadow: inset 0 0 0 1px #000;
 }
 
-a {
-     color:#f60;
-     text-decoration:none;
-     font-weight: bold;
+.headline h3 {
+     margin-top: -10px;
+}
+
+.headline h3:first-child {
+     margin-bottom: 24px;
+}
+
+#content h3 {
+     border: none;
+     border-bottom: 1px dotted #494;
+     background: none;
+}
+
+#content h3:first-child {
+     margin-top: -15px;
+}
+
+#content p {
+     line-height: 130%;
+}
+
+.headline h3:first-child + h4 {
+     margin-top: -25px;
+     margin-bottom: 26px !important;
+}
+
+div.headline {
+     margin-top: -16px;
+}
+
+div#messages {
+     margin: -16px 0 25px !important;
+     background: #020;
+     z-index: 999;
+     border: 1px solid #2a5f29;
+     box-shadow: inset 0 0 0 1px #000;
+     line-height: 120%;
+}
+
+#messages p {
+     padding: 15px 15px 15px 40px !important;
+     background: url(/themes/console/dark/images/infohelp.png) 6px center no-repeat;
+     color: #ee9;
+     padding: 5px 5px 10px;
+     margin: 0;
+     border-radius: 0;
+}
+
+#messages + p, p.book {
+     border: 1px solid #2a5f29;
+     background: #000 url(/themes/susidns/images/addressbook.png) 10px center no-repeat;
+     padding: 20px 20px 20px 50px !important;
+}
+
+#messages:empty {
+     display: none;
+}
+
+p#filtered {
+     padding: 12px 10px 8px 20px;
+     font-size: 10pt;
+     margin: -14px 0 10px;
+}
+
+div#book p, p.messages {
+     font-size: 10pt;
+}
+
+.book th:first-child, .book td:first-child {
+     padding: 0 10px !important;
+}
+
+.book td {
+     padding: 0;
+}
+
+.book td:nth-child(2) {
+     padding: 2px 0 2px 5px !important;
+     width: 30px;
+}
+
+.book td:nth-child(3) {
+     text-align: center;
+     width: 20px;
+     padding: 2px 25px 2px 0 !important;
 }
 
-a:hover {
-     text-decoration:underline;
+.book td:nth-child(3) a:not(old) {
+     font-size: 0 !important;
+}
+
+.book td:nth-child(3) .addrhlpr a::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     text-align: center;
+     padding: 0 10px !important;
+     filter: drop-shadow(0 0 1px #555);
+}
+
+.book td:nth-child(4) .addrhlpr:hover {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+h4 {
+     font-size: 9pt;
+     margin-top: -15px;
+     word-spacing: 0.1em;
+     border: 1px solid #2a5f29;
+     padding: 8px 10px 8px 35px;
+     margin-bottom: 30px !important;
+     background: #000 url(/themes/susidns/drive.png) 9px center no-repeat;
+     background: url(/themes/susidns/images/drive.png) 9px center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important;
+}
+
+a:link {
+     color: #494;
+     text-decoration: none;
      font-weight: bold;
+     outline: none;
 }
 
-th {
+a:hover, a:focus {
+     text-decoration: none;
+     color: #f60 !important;
+}
 
-     color:#ee9;
+a:visited {
+     color: #7b7;
+     text-decoration: none;
+}
+
+a:active {
+     color: #f90 !important;
+}
+
+th {
+     color: #ee9;
      font-size: 9pt;
-     padding:5px 10px;
-     font-size:10pt;
+     padding: 5px 10px;
+     text-align: left;
 }
 
 td {
+     color: #ee9;
+     padding: 5px;
+     font-size: 9pt;
+     vertical-align: middle;
+}
 
-     color:#ee9;
-     line-height:12pt;
-     padding:5px 10px;
-     font-size:8pt;
-     vertical-align:center;
+td.checkbox {
+     width: 32px !important;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%); /* colorize radios and checkboxes */
+     min-width: 16px;
+     min-height: 16px;
+     background: none;
+     cursor: pointer;
+}
+
+input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus {
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) drop-shadow(0 0 3px #f60);
+}
+
+.iframed #visualid {
+     margin-top: 16px;
+}
+
+#visualid h3 {
+     margin-bottom: -1px;
+}
+
+#idAddress {
+     text-transform: none;
+}
+
+#visualid table {
+     width: 100%;
+     border: 1px solid #2a5f29;
+     border-collapse: collapse;
+     background: #000900;
+}
+
+#visualid tr:first-child td {
+     padding: 15px 5px !important;
+}
+
+#visualid td:first-child {
+     text-align: right;
+}
+
+#visualid td {
+     text-align: left;
+}
+
+#visualid td[colspan="2"] {
+     padding: 15px 3px;
+     border-top: 1px solid #2a5f29;
+}
+
+#visualid tr:last-child {
+     background: #000;
+}
+
+form[action="addressbook"] > p.buttons {
+     margin-bottom: -16px;
+}
+
+td > img[width="320"], td > img[src^="/imagegen"] {
+     border-radius: 4px;
+     width: 240px;
+     height: 240px;
+     border: 1px solid #2a5f29;
+     padding: 5px;
+     margin: 10px 3px;
+     background: #000;
 }
 
 ol, ul {
      margin: 0 20px 0 10px;
+     display: table-row;
 }
 
 li {
-     color:#ee9;
-     line-height:12pt;
+     color: #ee9;
      margin: 0;
-     font-size:8pt;
+     font-size: 9pt;
      list-style: square;
+     line-height: 150%;
 }
 
 tr.list1 {
-     background-color:#010;
+     background-color: #000900;
 }
 
 tr.list0 {
-     background-color:#000;
+     background-color: #001000;
 }
 
-p.messages {
-     background-color:#000;
-     color:#ee9;
-     border: 1px solid #494;
-     padding: 5px;
-     margin: 5px 0 10px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
+.help {
+     border: 1px solid #2a5f29;
+     padding: 20px 30px;
 }
 
-#help {
-     border: 1px solid #494;
-     padding: 10px 20px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     margin: 0 0 15px;
+.help h3 {
+     margin: 10px -31px;
+}
+
+.help h3:first-child {
+     margin-top: -21px;
+}
+
+.help ul li:last-child {
+     margin-bottom: -10px;
+}
+
+#helpsubs {
+     padding: 0 0 0 40px;
+     background: #000 url(/themes/console/dark/images/infohelp.png) 15px center no-repeat !important;
+}
+
+#helpsubs p {
+     border: none;
+     line-height: 130%;
+     padding: 15px;
+}
+
+#helpconfig {
      background: #000;
 }
 
+div#content p {
+     padding: 0 10px;
+}
+
 p.footer {
-     font-size:7pt;
+     font-size: 7pt;
      text-align: center;
+     display: none;
 }
 
 .iframed #footer {
@@ -142,185 +612,532 @@ p.footer {
 p.buttons, #buttons {
      text-align: right;
      margin: 5px 0 -5px;
+     padding: 0 3px;
+}
+
+div#book + div#buttons {
+     border: 1px solid #2a5f29;
+     padding: 0 0 10px;
+     margin-top: 3px;
+     background: #000;
+}
+
+form[action="export"] > div#buttons {
+     border: 1px solid #2a5f29;
+     padding: 0 0 10px;
+     margin-top: 15px;
+     background: #000;
+}
+
+div#config > textarea, div#content > textarea {
+     border-radius: 0;
+     margin-top: -27px;
+}
+
+textarea[name="config"] {
+     height: 220px;
+     overflow-y: scroll;
+     resize: none;
+}
+
+div#config + div#buttons, div#content + div#buttons {
+     border: 1px solid #2a5f29;
+     margin-top: -3px;
+     padding: 5px;
+     margin-bottom: 15px;
+     background: #000;
 }
 
 .illustrate {
+     max-width: 90%;
+     height: auto;
      margin: 20px 0 15px;
      padding: 10px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
      border-radius: 4px;
      border: 1px solid #001;
      font-size: 10pt;
-     -moz-box-shadow: inset 0px 0px 1px 0px #002;
+     box-shadow: inset 0px 0px 1px 0px #002;
      background: #fff;
+     filter: invert(1) sepia(100%) hue-rotate(30deg);
+}
+
+_:-ms-lang(x), img.illustrate {
+     width: auto;
+     max-width: 600px;
+}
+
+div#book {
+     padding: 0;
+     margin: -15px 0 -5px;
 }
 
 #book table {
      width: 100%;
+     border: 1px solid #2a5f29;
+     border-collapse: separate;
 }
 
-.destinations textarea {
-     width: 100%;
-     padding: 2px;
+#book table th {
+     padding: 10px 0;
+     background: url(/themes/console/dark/images/header.png) repeat-x scroll center center #000;
+     background-image: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important;
+     border-bottom: 1px solid #2a5f29;
 }
 
-.page {
-     color:#ee9;
-     margin: 10px 0;
-     padding: 0;
-     font-size: 8pt !important;
-     -moz-box-shadow: inset 0px 0px 1px 0px #002;
+#book table td {
+     border-bottom: 1px solid #121;
+     border-top: 1px solid #000;
 }
 
-.iframed .page {
-     margin: 0;
+#book table tr:hover td {
+     background: #001a00;
+     border-bottom: 1px solid #2a5f29;
+     border-top: 1px solid #2a5f29;
 }
 
-input[type=submit], input[type=reset] {
-     border: 1px outset #999;
-     background: #ddf;
-     color: #001;
-     margin: 5px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     padding: 1px 2px;
-     text-decoration: none;
-     min-width: 110px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     -moz-box-shadow: inset 0px 2px 8px 0px #fff;
-     color: #006;
+#book table tr:nth-child(2):hover td {
+     border-top: 1px solid transparent;
 }
 
-input[type=submit]:hover, input[type=reset]:hover {
-     background: #000;
-     color: #f60;
-     border: 1px solid #f60;
-     -moz-box-shadow: inset 0 1px 1px 0 #ee9;
-     box-shadow: inset 0 1px 1px 0 #ee9;
+#book table tr:hover td textarea {
+     color: #ee9;
 }
 
-/*
-input[type=reset] {
-     border: 1px outset #999;
-     background: #ddf;
-     color: #001;
-     margin: 5px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     padding: 1px 2px;
-     text-decoration: none;
-     min-width: 110px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     -moz-box-shadow: inset 0px 2px 8px 0px #fff;
-     color: #006;
-     opacity: 0.9;
+#book th:last-child {
+     background: url(/themes/console/dark/images/header.png) repeat-x scroll center center #000;
+     background: url(images/bin.png) center center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important;
 }
 
-input[type=reset]:hover {
-     background: #22a;
-     color: #fff;
-     border: 1px solid #f60;
-     opacity: 1.0;
-     -moz-box-shadow: inset 0px 0px 0px 1px #fff;
+#book input[type="checkbox"] {
+     margin: 0;
+}
+
+div#add {
+     border: 1px solid #2a5f29;
+     padding: 0 0 10px;
+     margin-top: 23px;
+     background: #000;
+}
+
+#add h3 {
+     margin-top: -6px;
+     margin-left: -1px;
+     margin-right: -1px;
+     padding: 8px 10px;
+     font-size: 10pt;
 }
-*/
 
-input.accept {
-     background: #ddf url('/themes/console/images/accept.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#add table {
+     width: 100%;
+     width: calc(100% - 1px);
+     margin: -10px 10px 0 0;
 }
 
-input.add {
-     background: #ddf url('/themes/console/images/add.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#add td:first-child {
+     text-align: right;
 }
 
-input.cancel {
-     background: #ddf url('/themes/console/images/cancel.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#add td:last-child {
+     width: 94%;
 }
 
-input.delete {
-     background: #ddf url('/themes/console/images/delete.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+#add p.buttons {
+     margin-top: 5px;
+     border-top: 1px solid #2a5f29;
+     padding-top: 5px;
 }
 
-input.export {
-     background: #ddf url('/themes/console/images/arrow_right.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+input[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="reset"]:focus, .fakebutton:hover, #fakebutton:focus {
+     background: #000;
+     color: #f60;
+     border: 1px solid #f60;
+     box-shadow: inset 0 1px 1px 0 #ee9;
 }
 
-input.reload {
-     background: #ddf url('/themes/console/images/arrow_refresh.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.fakebutton, .fakebutton:visited {
+     color: #494;
 }
 
-input.search {
-     background: #ddf url('/themes/console/images/magnifier.png') no-repeat 2px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+.fakebutton:hover, .fakebutton:focus {
+     color: #f60;
 }
 
-input.search[type="text"] {
-     background: #eef url('/themes/console/images/magnifier.png') no-repeat 2px center;
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
+     border: none;
+     outline: none;
 }
 
 input {
      font-size: 9pt;
      font-weight: bold;
      text-align: left;
-     padding: 3px 4px !important;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #494;
-     background: #000 none !important;      
+     padding: 5px !important;
+     border-radius: 2px;
+     border: 1px solid #2a5f29;
+     background: #000 none !important;
      color: #494;
      margin: 2px 4px 2px 0;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif;
      min-width: 64px !important;
 }
 
-input[type=submit], input[type=reset] {
+input[type="submit"], input[type="reset"], .fakebutton {
      color: #494;
      background: #000;
      border: 1px outset #191;
-     padding: 2px !important;
-     box-shadow: 0 1px 1px 0 #119911 inset;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     border-radius: 2px;
+     margin: 5px;
+     padding: 5px !important;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Helvetica, sans-serif;
      text-align: center;
      min-height: 22px !important;
+     min-width: 80px !important;
+     cursor: pointer;
 }
 
-input[type=submit]:active, input[type=reset]:active {
+input[type=submit]:active, input[type=reset]:active, .fakebutton:active {
      background: #f60 !important;
      color: #ee9 !important;
      border: 1px solid #f60;
+     filter: none;
+     box-shadow: inset 3px 3px 3px #000;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000;
 }
 
-textarea {
-     color: #494;
+input[type="submit"], input[type="reset"], select, button { /* webkit/blink fix for oversaturated colors */
+     border: 1px solid #8b8;
+     border-bottom: 1px solid #171;
+     border-right: 1px solid #171;
+     background: linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%) !important;
+}
+
+input[type="text"] {
+     padding: 4px !important;
+}
+
+input[type="text"], textarea {
      background: #000;
-     border: 1px solid #494;
-     padding: 2px !important;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
+     background: linear-gradient(to bottom, #000 0%, #010 100%) !important;
+     box-shadow: inset 0 0 3px 3px #000;
+     color: #bb7;
+}
+
+textarea {
+     color: #bb7;
+     border: 1px solid #2a5f29;
+     padding: 3px 5px;
+     font: bold 8.5pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     border-radius: 2px;
+     width: 100%;
+     height: 120px;
+     line-height: 140%;
+     resize: none;
+}
+
+textarea[cols="70"] {
+     width: 100% !important;
+     height: 40px;
+}
+
+/*
+.destinations textarea {
      width: 100%;
-     height: 100px;
-     spell-check: false;
+     padding: 1px !important;
+     height: 32px;
+     resize: none;
+     border: none;
+     border-left: 1px solid #2a5f29;
+     border-right: 1px solid #2a5f29;
+     margin: 0 !important;
+     border-radius: 0;
 }
+*/
 
 input:focus, textarea:focus {
-     color: #ee9;     
+     color: #ee9;
+     background: #000 !important;
+     filter: drop-shadow(0 0 1px #880);
+     transition: ease filter 0.3s 0s;
+     outline: none;
+}
+
+textarea:focus {
+     filter: none;
+     box-shadow: inset 0 0 1px #880;
+}
+
+input[name="search"] {
+     background: url(/themes/console/images/buttons/search.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%) !important;
+     padding: 5px 5px 5px 25px !important;
+}
+
+input[name="search"]:focus {
+     background: #000 url(/themes/console/images/buttons/search.png) 5px center no-repeat !important;
+     padding: 5px 5px 5px 25px !important;
 }
+
+/* page titles */
+
+.headline h3 {
+     padding: 10px 5px 10px 35px;
+     background: url(/themes/susidns/images/addressbook.png) 5px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%);
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+.headline#subscriptions h3 {
+     background: url(/themes/susidns/images/subs_24.png) 5px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%);
+}
+
+.headline#config h3 {
+     background: url(/themes/susidns/images/configure_24.png) 5px center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%);
+}
+
+/* export hosts button adjustments */
+
+#export {
+     text-align: right;
+     margin-top: -58px;
+     margin-bottom: 23px;
+     padding-right: 4px;
+     float: right;
+     clear: left !important;
+}
+
+#export input[type="submit"] {
+     display: inline-block;
+}
+
+p#filtered {
+     padding-left: 35px !important;
+     padding-right: 250px !important;
+}
+
+p.book {
+     padding-left: 35px !important;
+}
+
+#messages + p, p.book {
+     border: 1px solid #2a5f29;
+     background: #000 url(/themes/susidns/images/addressbook.png) 5px center no-repeat;
+}
+
+/* hide export button on published addressbook if empty */
+#messages + form[action="export"] {
+     display: none;
+}
+
+/* host details page */
+
+#host_details td {
+     padding: 6px 10px !important;
+}
+
+#host_details td:first-child {
+     min-width: 10px !important;
+     width: 10%;
+     white-space: nowrap;
+     font-weight: bold;
+     text-align: right;
+}
+
+#host_details td:last-child {
+     width: 90%;
+     text-align: left;
+     border-left: none !important;
+     border-right: none !important;
+}
+
+#host_details td.destinations {
+     background: none;
+}
+
+#host_details tr:hover {
+     background: #ffd;
+}
+
+#host_details .destaddress {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
+     word-break: break-all !important;
+     white-space: normal !important;
+}
+
+/* end host details */
+
+.names img {
+     width: 20px;
+     height: 20px;
+     vertical-align: middle;
+     margin: 6px 8px 6px 2px;
+     padding: 1px;
+     border: 1px solid #141;
+     border-radius: 2px;
+     background: #000;
+}
+
+.names img:hover, .names a:focus img {
+     border: 1px solid #f60;
+}
+
+.names a:active img, .names a:focus img {
+     transform: rotate(45deg) scale(0.8);
+     transition: ease all 0.1s 0s;
+}
+
+/* hostname list */
+
+#host_list {
+     margin-top: 28px;
+}
+
+#host_list th:first-child, #host_list td:first-child {
+     width: 150px;
+     width: 30%;
+     white-space: nowrap;
+     padding-left: 5px !important;
+}
+
+#host_list th:first-child {
+     padding-left: 39px !important;
+}
+
+#host_list td:last-child {
+     width: 16px;
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+#host_list th:nth-child(2), #host_list td:nth-child(2),
+#host_list th:nth-child(3), #host_list td:nth-child(3),
+#host_list th:nth-child(4), #host_list td:nth-child(4) {
+     width: 35px;
+     width: 8%;
+     padding: 0 5px !important;
+     white-space: nowrap;
+     text-align: center;
+}
+
+#host_list td:nth-child(2) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(2) a::after {
+     content: url(/themes/console/images/buttons/link.png);
+     text-align: center;
+     filter: drop-shadow(0 0 1px #555);
+     cursor: pointer;
+}
+
+#host_list td:nth-child(3) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(3) a::after {
+     content: url(/themes/console/images/buttons/helper.png);
+     cursor: pointer;
+}
+
+#host_list th:nth-child(4), #host_list td:nth-child(4) {
+     padding-right: 30px !important;
+}
+
+#host_list td:nth-child(4) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(4) .addrhlpr a::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     text-align: center;
+     padding: 0 10px !important;
+     filter: drop-shadow(0 0 1px #555);
+     cursor: pointer;
+}
+
+#host_list td:nth-child(2) a:hover, #host_list td:nth-child(3) a:hover, #host_list td:nth-child(4) a:hover,
+#host_list td:nth-child(2) a:focus, #host_list td:nth-child(3) a:focus, #host_list td:nth-child(4) a:focus {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+#host_list .destaddress {
+     overflow: auto !important;
+     white-space: nowrap;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
+     font-weight: normal;
+     padding: 3px !important;
+     -moz-user-select: all;
+     -webkit-user-select: all;
+     user-select: all;
+}
+
+#host_list .destaddress:hover, #host_list .destaddress:focus {
+     color: #bb0;
+}
+
+/* end hostname list */
+
+td.destinations {
+     max-width: 50px !important;
+     border-left: 1px solid #121;
+     border-right: 1px solid #121;
+}
+
+/* MS Edge fix */
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+/* responsive layout */
+
+@media screen and (max-width: 710px) {
+#navi a {
+     background: linear-gradient(to bottom, #020 0%, #020 50%, #000 50%, #000 100%) !important;
+     padding: 2px 8px !important;
+}
+
+#navi a.abook:hover, #navi a#overview:hover, #navi a#subs:hover, #navi a#config:hover,
+#navi a.abook:focus, #navi a#overview:focus, #navi a#subs:focus, #navi a#config:focus {
+     background: #000 !important;
+     padding: 2px 8px !important;
+}
+
+#navi a.abook:active, #navi a#overview:active, #navi a#subs:active, #navi a#config:active {
+     background: #f60 !important;
+}
+}
+
+@media screen and (min-width: 1400px) {
+
+body, input[type="submit"], input[type="reset"], .fakebutton, input, select, h4, td.names a, p, li, #filter a, #host_details td, textarea, th, #search td, .destaddress {
+     font-size: 10pt !important;
+}
+
+div#navi {
+     padding: 6px 5px !important;
+}
+
+#navi a {
+     font-size: 10pt !important;
+     padding: 4px 7px 5px 25px !important;
+}
+
+h3, #filter a, #filter span {
+     font-size: 11pt !important;
+}
+
+#filter a {
+     margin: 0 2px -2px !important;
+     min-width: 20px;
+}
+
+div#filter {
+     background: linear-gradient(to right, #000, #001000 10%, #001000 90%, #000);
+}
+
+form[action="addressbook"] > p.buttons {
+     margin-bottom: -20px;
+}
+}
+
+/* end responsive layout */
diff --git a/installer/resources/themes/susidns/images/abook.png b/installer/resources/themes/susidns/images/abook.png
new file mode 100644
index 0000000000000000000000000000000000000000..5821b4d768132287473b97bf9e0ce84dde12d42d
Binary files /dev/null and b/installer/resources/themes/susidns/images/abook.png differ
diff --git a/installer/resources/themes/susidns/images/addressbook.png b/installer/resources/themes/susidns/images/addressbook.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee3a32eced6a139390fff886eb1d800b445e8159
Binary files /dev/null and b/installer/resources/themes/susidns/images/addressbook.png differ
diff --git a/installer/resources/themes/susidns/images/configure_24.png b/installer/resources/themes/susidns/images/configure_24.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c07e6cdc552ceff7b100b3893b26212093bcfcc
Binary files /dev/null and b/installer/resources/themes/susidns/images/configure_24.png differ
diff --git a/installer/resources/themes/susidns/images/drive.png b/installer/resources/themes/susidns/images/drive.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6822468da74a12271c2344eea751ac8e2c98a0f
Binary files /dev/null and b/installer/resources/themes/susidns/images/drive.png differ
diff --git a/installer/resources/themes/susidns/images/how.png b/installer/resources/themes/susidns/images/how.png
new file mode 100644
index 0000000000000000000000000000000000000000..8d1e26192b6e0005b5e94c35a712faf98fc68084
Binary files /dev/null and b/installer/resources/themes/susidns/images/how.png differ
diff --git a/installer/resources/themes/susidns/images/how_fr.png b/installer/resources/themes/susidns/images/how_fr.png
new file mode 100644
index 0000000000000000000000000000000000000000..43da5d091e98e8a034b523799d89976080c4a981
Binary files /dev/null and b/installer/resources/themes/susidns/images/how_fr.png differ
diff --git a/installer/resources/themes/susidns/images/logo.png b/installer/resources/themes/susidns/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9fda6650c2b00cb08c83d72baf58324e87a9013e
Binary files /dev/null and b/installer/resources/themes/susidns/images/logo.png differ
diff --git a/installer/resources/themes/susidns/images/overview.png b/installer/resources/themes/susidns/images/overview.png
new file mode 100644
index 0000000000000000000000000000000000000000..471676bfc914432603993c99b43acb7f4c8b958c
Binary files /dev/null and b/installer/resources/themes/susidns/images/overview.png differ
diff --git a/installer/resources/themes/susidns/images/subs.png b/installer/resources/themes/susidns/images/subs.png
new file mode 100644
index 0000000000000000000000000000000000000000..b586aaea2d52bbd497661498cb29747ecc7ff930
Binary files /dev/null and b/installer/resources/themes/susidns/images/subs.png differ
diff --git a/installer/resources/themes/susidns/images/subs_24.png b/installer/resources/themes/susidns/images/subs_24.png
new file mode 100644
index 0000000000000000000000000000000000000000..767af42d54eed4bf2622a39a74134c3459f62252
Binary files /dev/null and b/installer/resources/themes/susidns/images/subs_24.png differ
diff --git a/installer/resources/themes/susidns/light/images/logo.png b/installer/resources/themes/susidns/light/images/logo.png
deleted file mode 100644
index 7cf9954786c84fe0d218c0e6a6361d7ea07673e9..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/susidns/light/images/logo.png and /dev/null differ
diff --git a/installer/resources/themes/susidns/light/susidns.css b/installer/resources/themes/susidns/light/susidns.css
index 398a369e77815c3445702afa1ade5d815108bb12..873bc677fd5d5710b908f79c8b7d85fc413170d1 100644
--- a/installer/resources/themes/susidns/light/susidns.css
+++ b/installer/resources/themes/susidns/light/susidns.css
@@ -1,245 +1,1269 @@
+/* Susimail "Light" theme by dr|z3d */
+/* Codename "Corporat" */
+
 body {
-     font-family:"Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     background-color: #f0f0f0;
-     color:#001;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-size: 9pt;
+     background-color: #fff;
+     background: #a4a4cb url(/themes/console/light/images/tile2.png) center center;
+     color: #333;
+     margin: 0 5px;
 }
 
 body.iframed {
      background: transparent !important;
      margin: 0;
+     overflow: hidden;
+}
+
+::selection {
+     background: #27377f !important;
+     color: white;
+     text-shadow: none;
+}
+
+::-moz-selection {
+     background: #27377f !important;
+     color: white;
+     text-shadow: none;
+}
+
+* {
+     outline: none;
+}
+
+#logo {
+     margin: -5px 0 -1px;
+     text-align: center;
+     background: #eef url(/themes/susidns/images/logo.png) center center no-repeat;
+     background: url(/themes/susidns/images/logo.png) center center no-repeat, linear-gradient(to bottom, #fff, #eef);
+     height: 55px;
+     background-size: auto 50px, 100% 100%;
+     border: 1px solid #7778bf;
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+#logo img {
+     display: none;
 }
 
 .iframed #logo {
      display: none;
 }
 
-#navi p{
-     text-align: center !important;
-     text-transform: capitalize;
+#logo + hr, #navi + hr {
+     display: none;
+}
+
+hr {
+     display: none;
+}
+
+code, tt, .destaddress {
+     font-size: 8pt;
+}
+
+#host_list .destaddress {
+     -moz-user-select: all;
+     -webkit-user-select: all;
+}
+
+#navi {
+     margin: -1px 0 0;
+     padding: 5px 3px;
+     text-align: center;
+     border: 1px solid #7778bf;
+     background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(239, 239, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100%), linear-gradient(to bottom, #fff 0%, #fff 51%, #eef 51%, #ddf 100%);
+     border-radius: 2px 2px 0 0;
+     box-shadow: inset 0 0 0 1px #fff;
+     z-index: 100;
      font-weight: bold;
+     vertical-align: middle;
+     font-size: 9pt;
+     position: sticky;
+     top: -1px;
+}
+
+.iframed #navi {
+     margin: -11px -11px 10px;
+     padding: 7px 5px 6px;
+     border-radius: 0;
+     position: static;
+}
+
+#navi a, #navi a:visited {
+     border: 1px solid #77789f;
+     border-radius: 2px;
+     color: #3b6bbf;
+     display: inline-block;
+     margin: 2px 0;
+     text-transform: capitalize;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+}
+
+#navi a:hover, #navi a:focus {
+     background-blend-mode: luminosity;
+     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.8));
+     color: #f60;
+     border: 1px solid #f60;
+     transition: ease border 0.7s;
+}
+
+#navi a:active {
+     color: #555;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 2px #999;
+     mix-blend-mode: luminosity;
+}
+
+#navi a.abook {
+     background: url(/themes/susidns/images/abook.png) 5px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 50%, #ebebff) #fff;
+     padding: 5px 5px 5px 24px;
+}
+
+#navi a#subs {
+     background: url(/themes/susidns/images/subs.png) 5px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 50%, #ebebff) #fff;
+     padding: 5px 5px 5px 24px;
+}
+
+#navi a#config {
+     background: url(/themes/console/images/buttons/configure.png) 5px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 50%, #ebebff) #fff;
+     padding: 5px 5px 5px 24px;
+}
+
+#navi a#overview {
+     background: url(/themes/susidns/images/overview.png) 5px center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 50%, #ebebff) #fff;
+     padding: 5px 5px 5px 24px;
+}
+
+.headline {
+     border: 1px solid #7778bf;
+     margin: -1px 0 -2px;
+     padding: 8px 5px;
+     background: #fff;
+     background: linear-gradient(to right, #fff 70%, #eef);
+}
+
+.iframed .headline {
+     margin-top: 6px;
+}
+
+h3, h4, th, #filter span {
+     color: #31334f;
+}
+
+.headline h3 {
+     margin: 0;
+     padding: 2px 5px 3px 30px;
+     background: url(/themes/susidns/images/addressbook.png) left center no-repeat;
+     font-size: 11pt;
+}
+
+.headline#subscriptions h3 {
+     background: url(/themes/susidns/images/subs_24.png) left center no-repeat;
+}
+
+.headline#config h3 {
+     background: url(/themes/susidns/images/configure_24.png) left center no-repeat;
+}
+
+span.location {
+     font-size: 9pt;
+     font-weight: normal;
+     text-transform: none;
+     letter-spacing: normal;
+     word-spacing: normal;
+}
+
+.headline h4 {
+     border-top: 1px solid #7778bf;
+     margin: 5px -6px 0;
+     padding: 8px 10px 0;
+     padding: 8px 10px 0 33px;
+     background: url(/themes/susidns/images/drive.png) 9px 7px no-repeat;
+}
+
+#content {
+     border: 1px solid #7778bf;
+     padding: 0 15px;
+     margin: -1px 0 0;
+     background: #fff;
+}
+
+.iframed #content {
+     overflow: hidden;
+     border: none;
+     background: none;
+     padding: 0;
+}
+
+form[action="subscriptions"] #content {
+     margin-top: 1px;
+}
+
+#content textarea  {
+     margin: 2px -15px;
+     padding: 5px 0;
+     border: none;
+     width: 100%;
+     resize: none;
+     filter: none;
+     box-shadow: none;
+}
+
+.iframed #content textarea {
+     border: 1px solid #7778bf;
+     margin: 0;
+}
+
+#content + #buttons {
+     border: 1px solid #7778bf;
+     margin: -1px 0 10px;
+     background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+}
+
+#content h3 {
+     border: 1px solid #77789f;
+     padding: 5px 8px;
+     border-radius: 2px;
+     background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), linear-gradient(to right, #fff 5%, rgba(231, 231, 255, 0.8) 15%) !important;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ccc;
+}
+
+.iframed #content h3 {
+     margin-top: 3px;
+}
+
+#content p {
+     margin-left: 15px;
+     margin-right: 15px;
+}
+
+div#add {
+     border: 1px solid #7778bf;
+     margin-top: -1px;
+     padding: 0 15px;
+     background: #fff;
 }
 
-p {
-     color:black;
-     line-height:12pt;
-     margin-left:5mm;
-     margin-right:5mm;
-     font-size:9pt;
+.iframed #add {
+     margin-top: 10px;
+}
+
+#add h3 {
+     border-bottom: 1px solid #7778bf;
+     margin: 0 -15px;
+     padding: 5px 10px;
+}
+
+#add table {
+     width: 100%;
+     margin: 5px 0;
+}
+
+#add table td:first-child {
+     width: 50px;
+     white-space: nowrap;
+     text-align: right;
+}
+
+#add td {
+     padding: 3px;
+}
+
+div#add p.buttons {
+     border: 1px solid #7778bf;
+     margin: 0 -16px -1px;
+     background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+}
+
+div.help {
+     border: 1px solid #7778bf;
+     padding: 0 15px;
+     background: #eef;
+     margin: -11px 0 0;
+}
+
+.iframed div.help {
+     border-radius: 0 0 2px 2px;
+}
+
+.help#helpsubs {
+     background: #eef url(/themes/console/images/info/infohelp.png) 10px center no-repeat;
+     padding: 0 15px 0 45px;
+     font-size: 10pt;
+}
+
+div.help h3 {
+     border: 1px solid #7778bf;
+     padding: 5px 10px;
+     margin: -1px -16px 0;
+     background: #fff;
+}
+
+p#help {
+     margin: 0;
+     padding: 0;
+}
+
+p, #helpconfig {
+     font-size: 9pt;
      text-align: justify;
 }
 
+.iframed #helpconfig, .iframed #helpsubs {
+     margin-top: 10px;
+     box-shadow: inset 0 0 0 1px #fff;
+     border-radius: 0;
+}
+
 span.addrhlpr {
-     font-size:8pt;
+     font-size: 9pt;
+}
+
+a, button, input[type="submit"], input[type="cancel"], select, h3 {
+     text-shadow: 0 1px 1px #fff;
+}
+
+a:hover, a:focus, a:active, select:hover, select:focus, select:active, input:hover, input:focus, input:active, button:hover, button:focus, button:active {
+     text-shadow: none;
 }
 
 h3 {
-     color:black;
-     font-size:12pt;
+     font-size: 11pt;
      letter-spacing: 0.08em;
-     line-height:18pt;
-     font-weight:bold;
+     font-weight: bold;
+     text-transform: uppercase;
+     margin-bottom: 0;
 }
 
 a {
-     color:#327BBF;
+     color: #3b6bbf;
      text-decoration:none;
      font-weight: bold;
+     outline: none;
 }
 
-a:hover {
-     text-decoration:underline;
-     font-weight: bold;
+a:visited {
+     color: #2c4e8f;
+}
+
+a:hover, a:focus {
+     text-decoration: none;
+     color: #f60;
+}
+
+a:active {
+     color: #f30;
 }
 
 th {
-     color:black;
-     line-height:12pt;
      padding:5px 10px;
-     font-size:10pt;
+     font-size: 10pt;
 }
 
 td {
-     color:black;
-     line-height:12pt;
-     padding:5px 10px;
-     font-size:9pt;
-     vertical-align:center;
+     padding: 5px 10px;
+     font-size: 9pt;
+     vertical-align: middle;
+}
+
+ol, ul {
+     margin-left: -30px;
 }
 
 li {
-     color:black;
-     line-height:12pt;
-     margin-left:5mm;
-     margin-right:5mm;
-     font-size:9pt;
+     font-size: 9pt;
+     list-style: square;
+     line-height: 140%;
+}
+
+li b {
+     text-transform: capitalize;
 }
 
 tr.list1 {
-     background-color:#E8E8EC;
+     background-color: #f7f8ff;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff;
 }
 
 tr.list0 {
-     background-color:#F0F0F4;
+     background-color: #eef;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff;
 }
 
-p.messages {
-     background-color:#92CAFF;
-     color:#327BBF;
-     color:black;
-     border-style:dotted;
-     padding-top: 5mm;
-     padding-right: 5mm;
-     padding-bottom: 5mm;
-     padding-left: 5mm;
-}
-
-#help {
-     border: 1px solid;
-     padding: 10px;
-     border-radius: 4px;
+div#messages {
+     bottom: 0;
+     left: 0;
+     position: fixed;
+     right: 0;
+     text-align: center;
+     margin: 0 -20px;
+     padding: 10px 15px;
+     z-index: 10;
+     opacity: 0.85;
+     border-top: 1px solid #fff;
+     background: #113;
 }
 
-p.footer {
-     font-size:7pt;
+.iframed div#messages {
+     bottom: 22px;
+     border: none;
+     margin: 0 1px;
+}
+
+div#messages:empty {
+     display: none;
+}
+
+p.messages {
+     color: #fff;
      text-align: center;
+     font-weight: bold;
+}
+
+#footer {
+     border: 1px solid #7778bf;
+     background: #eef;
+     background: linear-gradient(to right, #eef, #fff, #eef);
+     margin: -1px 0 -5px;
+     box-shadow: inset 0 0 0 1px #fff;
 }
 
 .iframed #footer {
      display: none;
 }
 
+p.footer {
+     font-size: 7pt;
+     text-align: center;
+     margin: 4px;
+}
+
 .illustrate {
-     margin: 10px;
-     padding: 10px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
+     max-width: 90%;
+     height: auto;
+     margin: 10px 10px 20px;
+     padding: 2px 10px;
      border-radius: 4px;
-     border: 1px solid #001;
+     border: 1px solid #447;
      font-size: 10pt;
-     -moz-box-shadow: inset 0px 0px 1px 0px #002;
+     box-shadow: inset 0 0 0 1px #ccc;
      background: #fff;
+     opacity: 0.85;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+_:-ms-lang(x), img.illustrate {
+     width: auto;
+     max-width: 600px;
 }
 
 .page {
-     background-color: #fff;
-     color:#001;
      margin: 0;
-     padding: 10px;
-/*     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #001; */
+     padding: 10px 0;
      font-size: 9pt !important;
-     line-height: 160% !important;
-     -moz-box-shadow: inset 0px 0px 1px 0px #002;
+     border: 1px solid #7778bf;
+     border: none;
+     border-radius: 2px;
+     min-width: 700px;
 }
 
 .iframed .page {
-     background-color: #f0f0f0;
-     margin: 0;
+     background-color: transparent !important;
+     margin: 1px;
+     border: none;
+     padding: 10px 10px 0;
+     overflow: hidden !important;
+     min-width: 520px;
 }
 
 textarea {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     font-size: 9pt;
      width: 100%;
+     border-radius: 2px;
+     border: 1px solid #7778bf;
+     padding: 1px 3px;
+     color: #333;
+     resize: none;
+}
+
+input[type="text"], input[type="password"], textarea {
+     padding: 5px !important;
+     box-shadow: inset 1px 1px 2px #bbb;
+     border: 1px solid #999;
+     border-radius: 2px;
+     color: #333;
+     background: #fff;
+}
+
+input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+     color: #111;
+     box-shadow: 0 0 1px #89f;
+     background: #fff !important;
 }
 
-#buttons, .buttons {
+textarea[name="config"] {
+     border-radius: 0;
+     box-shadow: none;
+     border: 1px solid #7778bf;
+}
+
+#config + #buttons {
+     border: 1px solid #7778bf;
+     margin: -2px 0 10px;
+     background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+}
+
+#filter, #search {
+    border: 1px solid #7778bf;
+    padding: 5px 15px;
+    margin-bottom: -1px;
+    background: #fff;
+}
+
+#search {
+     margin-bottom: -2px;
+     padding: 0;
+     text-align: center;
+}
+
+#search table {
+     margin: 0;
+     display: inline;
+     background: none;
+}
+
+td.search {
+     text-align: left;
+     padding: 0;
+     background: none;
+}
+
+td.search:first-child {
      text-align: right;
 }
 
-input[type=submit] {
-     border: 1px outset #999;
-     background: #ddf;
-     color: #001;
-     margin: 5px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     padding: 1px 2px;
-     text-decoration: none;
-     min-width: 110px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     -moz-box-shadow: inset 0px 2px 8px 0px #fff;
-     color: #006;
-     opacity: 0.9;
+#filter {
+     padding: 0 15px;
+     font-weight: bold;
+     text-align: center;
+}
+
+#filter a {
+     border: 1px solid #7778bf;
+     padding: 4px 8px;
+     display: inline-block;
+     min-width: 20px;
+     text-align: center;
+     border-radius: 2px;
+     text-transform: capitalize;
+     margin: 2px 1px;
+     background: #fff;
+     filter: drop-shadow(0 0 1px #ccc);
 }
 
+#filter a:hover {
+     color: #f60;
+}
 
-input[type=submit]:hover {
-     background: #22a;
+#filter a:active {
      color: #fff;
-     border: 1px solid #f60;
-     opacity: 1.0;
-     -moz-box-shadow: inset 0px 0px 0px 1px #fff;
+     background: #f60;
+     text-decoration: none;
+     box-shadow: inset 0 0 0 1px #fff;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #333;
+}
+
+#filter span {
+     display: inline-block;
+     text-align: center;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     vertical-align: middle;
+     border: 1px solid #77789f;
+     border-radius: 0 0 2px 2px;
+     padding: 6px 10px;
+     width: 40%;
+     min-width: 300px;
+     margin: -1px 10%;
+     box-shadow: inset 0 0 0 1px #fff;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%);
+}
+
+#filter span a {
+     margin: -8px 1px;
+     letter-spacing: normal;
+     word-spacing: normal;
+     padding: 2px 5px;
+}
+
+#filter span b {
+     font-size: 11pt;
+     margin: 0 5px;
+     text-transform: uppercase;
+     color: #111;
+     line-height: 80%;
+}
+
+#filter p {
+     text-align: center;
+}
+
+p#filtered {
+     background: #eef url(/themes/console/images/buttons/filter.png) 8px center no-repeat;
+     background: url(/themes/console/images/buttons/filter.png) 8px center no-repeat, repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.5) 3px, #fff 5px), #fff;
+     padding: 10px 200px 10px 32px !important;
+}
+
+div#book, #messages + p {
+     border: 1px solid #7778bf;
+     padding: 10px;
+}
+
+div#book {
+     margin: 1px 0 -1px;
+     background: #fff;
+}
+
+#messages + p {
+     margin: 1px 0 -1px;
+}
+
+form {
+     margin: 0;
+     padding: 0;
+}
+
+th {
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%);
+     font-size: 9pt;
+}
+
+table {
+     background: #fff;
+}
+
+table.book {
+     width: 100%;
+}
+
+.book th:first-child {
+     padding-left: 10px;
+}
+
+.book th:last-child  {
+     background: #fff url(/themes/console/images/buttons/delete.png) center center no-repeat;
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 50%, #eef 50%);
+     width: 16px;
+}
+
+.book th {
+     text-align: left;
+     padding-left: 3px;
+}
+
+.book tr:hover td {
+     background: #ffd;
+}
+
+.book tr:first-child td, .book tr.head + .list1 td {
+     border-top: none;
+}
+
+.book td {
+     border-top: 1px solid #ddf;
+     padding: 3px;
+}
+
+/* hostname list */
+#host_list, #host_details {
+     border: 1px solid #7778bf;
+     box-shadow: 0 0 0 1px #fff;
+}
+
+#host_list th:first-child,
+#host_list td:first-child {
+     width: 150px;
+     width: 30%;
+     white-space: nowrap;
+     padding-left: 5px;
+}
+
+#host_list th:first-child {
+     padding-left: 39px;
+}
+
+#host_list td:last-child {
+     width: 16px;
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+#host_list th:nth-child(2), #host_list td:nth-child(2),
+#host_list th:nth-child(3), #host_list td:nth-child(3),
+#host_list th:nth-child(4), #host_list td:nth-child(4) {
+     width: 35px;
+     width: 8%;
+     padding: 0 5px !important;
+     white-space: nowrap;
+     text-align: center;
+}
+
+#host_list td:nth-child(2) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(2) a::after {
+     content: url(/themes/console/images/buttons/link.png);
+     text-align: center;
+     filter: drop-shadow(0 0 1px #555);
+     cursor: pointer;
+}
+
+#host_list td:nth-child(3) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(3) a::after {
+     content: url(/themes/console/images/buttons/helper.png);
+     cursor: pointer;
+}
+
+#host_list th:nth-child(4), #host_list td:nth-child(4) {
+     padding-right: 30px !important;
+}
+
+#host_list td:nth-child(4) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(4) .addrhlpr a::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     text-align: center;
+     padding: 0 10px !important;
+     filter: drop-shadow(0 0 1px #555);
+     cursor: pointer;
+}
+
+#host_list td:nth-child(2) a:hover, #host_list td:nth-child(3) a:hover, #host_list td:nth-child(4) a:hover,
+#host_list td:nth-child(2) a:focus, #host_list td:nth-child(3) a:focus, #host_list td:nth-child(4) a:focus {
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+#host_list .destaddress {
+     overflow: auto !important;
+     white-space: nowrap;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     font-weight: normal;
+     color: #555;
+     padding: 3px !important;
+}
+
+td.destinations {
+     max-width: 50px !important;
+     border-left: 1px solid #ddf;
+     border-right: 1px solid #ddf;
+     padding: 0;
+     background: #fff;
+}
+
+td.destinations textarea {
+     box-shadow: none;
+     height: 28px !important;
+}
+
+/* end hostname list */
+
+/* host details page */
+
+#host_details td {
+     padding: 5px 10px !important;
+}
+
+#host_details td:first-child {
+     min-width: 10px !important;
+     width: 10%;
+     white-space: nowrap;
+     font-weight: bold;
+     text-align: right;
+}
+
+#host_details td:last-child {
+     width: 90%;
+     text-align: left;
+     border-left: none !important;
+     border-right: none !important;
+}
+
+#host_details td.destinations {
+     background: none;
+}
+
+#host_details tr:hover {
+     background: #ffd;
+}
+
+#host_details .destaddress {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     word-break: break-all !important;
+     white-space: normal !important;
+}
+
+/* identicon + qr image */
+
+#visualid {
+     border: 1px solid #7778bf !important;
+     margin-top: -1px;
+     border-radius: 2px;
+     background: #fff;
+     padding-top: 0;
+}
+
+.iframed #visualid {
+     margin-top: 9px;
+}
+
+#visualid h3 {
+     border-bottom: 1px solid #7778bf;
+     padding: 8px 10px 6px;
+     margin-top: 0;
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%);
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+#idAddress {
+     text-transform: none;
 }
 
-input[type=reset] {
-     border: 1px outset #999;
-     background: #ddf;
-     color: #001;
+#visualid table {
+     width: 100% !important;
+     margin: 12px 0 0;
+     background: none;
+     border: none;
+     border-collapse: collapse;
+}
+
+#visualid tr:first-child td {
+     padding-bottom: 15px;
+}
+
+#visualid td {
+     width: 50%;
+}
+
+#visualid td:first-child {
+     text-align: right;
+}
+
+#visualid td[colspan="2"] {
+     text-align: right;
+     padding: 20px 5px;
+     border-top: 1px solid #7778bf;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+}
+
+img[src^="/imagegen"] {
+     height: 256px;
+     width: 256px;
+     border: 1px solid #7778bf;
+     padding: 3px;
+     border-radius: 2px;
+     background: #fff;
+     filter: drop-shadow(0 0 1px #ccc);
+}
+
+/* end host details */
+
+/* host list identicons */
+
+.names img {
+     width: 20px;
+     height: 20px;
+     vertical-align: middle;
+     margin: 1px 10px 1px 1px;
+     padding: 1px;
+}
+
+.names img:hover, .names a:focus img {
+     filter: drop-shadow(0 0 1px #f60) !important;
+     box-shadow: 0 0 0 1px #f60;
+}
+
+.names a:active img, .names a:focus img {
+     transform: rotate(45deg) scale(0.8);
+     transition: ease all 0.1s 0s;
+}
+
+/* end host list identicons */
+
+.names a[href^="http"], .names a[href^="details"], .helper a {
+     display: inline-block;
+     width: 100%;
+}
+
+.book th {
+     border-bottom: 1px solid #7778bf;
+}
+
+.book textarea {
+     padding: 0 !important;
+     margin: 0;
+     border: none;
+     border-left: 1px solid #bbf;
+     border-right: 1px solid #bbf;
+     resize: none;
+     background: none;
+}
+
+div#book {
+    padding: 8px;
+    background: #efefff;
+    background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.5) 3px, #fff 5px), #fff;
+    box-shadow: inset 0 0 0 1px #fff;
+}
+
+.iframed div#book {
+     margin-bottom: 10px;
+}
+
+p.book {
+     background: url(/themes/susidns/images/addressbook.png) 5px center no-repeat;
+     padding: 5px 5px 5px 33px;
+}
+
+#buttons {
+     padding: 10px 5px;
+     text-align: right;
+     background: #fff;
+     background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+}
+
+p.buttons {
+     text-align: right;
+     padding: 0;
+     margin: 0;
+}
+
+table + p.buttons {
+     padding: 10px 5px;
+}
+
+#book + #buttons {
+     border: 1px solid #7778bf;
+     margin-top: -1px;
+}
+
+.iframed #book + #buttons {
+     margin-top: -11px;
+}
+
+form[action="export"] {
+     margin: -1px 0;
+}
+
+input[type="radio"], input[type="checkbox"] {
+     background: none;
+     cursor: pointer;
+     min-width: 16px !important;
+     min-height: 16px !important;
+}
+
+input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="radio"]:hover, input[type="radio"]:focus {
+     filter: drop-shadow(0 0 3px #89f);
+}
+
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, button::-moz-focus-inner  {
+     outline: none;
+     border: none;
+}
+
+input[type="submit"], input[type="reset"], .fakebutton {
      margin: 5px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     padding: 1px 2px;
+     font: 9pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     padding: 4px 3px;
      text-decoration: none;
-     min-width: 110px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     -moz-box-shadow: inset 0px 2px 8px 0px #fff;
-     color: #006;
-     opacity: 0.9;
+     border-radius: 2px;
+     border: 1px solid #999;
+     box-shadow: inset 0 0 0 1px #fff;
+     background: #eee;
+     background: linear-gradient(to bottom, #fff, #ddd);
+     color: #333;
+     filter: saturate(70%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+     cursor: pointer;
 }
 
-input[type=reset]:hover {
-     background: #22a;
-     color: #fff;
+a.fakebutton {
+     color: #333;
+     font-weight: normal;
+}
+
+a.fakebutton:hover, a.fakebutton:focus {
+     color: #111;
+}
+
+a.fakebutton:active {
+     color: #666 !important;
+}
+
+input[type=submit]:hover, input[type=reset]:hover, input[type=submit]:focus, input[type=reset]:focus, .fakebutton:hover, .fakebutton:focus {
+     background: #eee;
+     background: linear-gradient(to bottom, #ddd, #fff);
+     color: #111;
      border: 1px solid #f60;
-     opacity: 1.0;
-     -moz-box-shadow: inset 0px 0px 0px 1px #fff;
+     box-shadow: inset 0px 0px 0px 1px #fff;
+     filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8));
+     transition: ease border 0.7s;
+}
+
+input[type="submit"]:active, input[type="reset"]:active, .fakebutton:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 2px #555;
+     background-blend-mode: luminosity;
+     color: #666;
 }
 
 input.accept {
-     background: #ddf url('/themes/console/images/accept.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+     background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100%;
+     padding: 5px 7px 5px 22px;
 }
 
+input.accept:hover, input.accept:focus {
+     background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100%;
+}
+
+/*
+input.accept[value="Replace"] {
+     background: #eee url(/themes/console/images/buttons/edit2.png) no-repeat 6px center;
+     background:url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     padding: 5px 7px 5px 22px;
+}
+
+input.accept[value="Replace"]:hover, input.accept[value="Replace"]:focus {
+     background: #fff url(/themes/console/images/buttons/edit2.png) no-repeat 6px center;
+     background:url(/themes/console/images/buttons/edit2.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+}
+*/
+
 input.add {
-     background: #ddf url('/themes/console/images/add.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+     background: #eee url(/themes/console/images/buttons/add.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100%;
+     padding: 5px 7px 5px 22px;
+}
+
+input.add:hover, input.add:focus {
+     background: #fff url(/themes/console/images/buttons/add.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/add.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100%;
 }
 
 input.cancel {
-     background: #ddf url('/themes/console/images/cancel.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+     background: #eee url(/themes/console/images/buttons/no.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100%;
+     padding: 5px 7px 5px 22px;
+}
+
+input.cancel:hover, input.cancel:focus {
+     background: #fff url(/themes/console/images/buttons/no.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100%;
 }
 
 input.delete {
-     background: #ddf url('/themes/console/images/delete.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+     background: #eee url(/themes/console/images/buttons/delete.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100%;
+     padding: 5px 7px 5px 22px;
+}
+
+input.delete:hover, input.delete:focus {
+     background: #fff url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100%;
 }
 
 input.export {
-     background: #ddf url('/themes/console/images/arrow_right.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+     background: #eee url(/themes/console/images/buttons/go.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100%;
+     padding: 5px 7px 5px 22px;
+     margin-top: 5px;
+}
+
+input.export:hover, input.export:focus {
+     background: #fff url(/themes/console/images/buttons/go.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100%;
 }
 
 input.reload {
-     background: #ddf url('/themes/console/images/arrow_refresh.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+     background: #eee url(/themes/console/images/buttons/update.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100%;
+     padding: 5px 7px 5px 22px;
+}
+
+input.reload:hover, input.reload:focus {
+     background: #fff url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100%;
 }
 
 input.search {
-     background: #ddf url('/themes/console/images/magnifier.png') no-repeat 2px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+     background: #eee url(/themes/console/images/buttons/search.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/search.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100%;
+     padding: 6px 8px 6px 22px;
+}
+
+input.search:hover, input.search:focus {
+     background: #fff url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/search_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100%;
 }
 
 input.search[type="text"] {
-     background: #eef url('/themes/console/images/magnifier.png') no-repeat 2px center;
+     background: #fff url(/themes/console/images/buttons/search.png) no-repeat 6px center;
+     padding: 5px 5px 5px 28px !important;
+     margin: 1px 5px 0;
+}
+
+input.search[type="text"]:focus {
+     background: #fff url(/themes/console/images/buttons/search.png) no-repeat 6px center !important;
+}
+
+#visualid .fakebutton {
+     background: #eee url(/themes/console/images/buttons/go.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #fff, #ddd);
+     background-size: 14px 14px, 100% 100%;
+     padding: 6px 8px 6px 22px;
+}
+
+#visualid .fakebutton:hover, #visualid .fakebutton:focus {
+     background: #fff url(/themes/console/images/buttons/go.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/go.png) no-repeat 6px center, linear-gradient(to bottom, #ddd, #fff);
+     background-size: 14px 14px, 100% 100%;
 }
+
+form[action="addressbook"] table {
+     width: 100% !important;
+     font-weight: bold;
+}
+
+/* export hosts */
+
+#export {
+     text-align: right;
+     margin-top: -36px;
+}
+
+.iframed #export {
+     margin-bottom: 11px;
+}
+
+/* hide export button on published page when empty */
+#messages + form[action="export"] {
+     display: none;
+}
+
+#filter {
+     margin-top: -2px !important;
+}
+
+/* responsive layout */
+
+@media screen and (max-width: 680px) {
+#navi {
+     padding: 5px 3px !important;
+}
+
+#navi a {
+     background: linear-gradient(to bottom, #fff 50%, #eef 50%, #ebebff) #fff !important;
+     padding: 3px 5px !important;
+}
+
+#visualid img[src^="/imagegen"] {
+     width: 228px !important;
+     height: 228px !important;
+}
+}
+
+@media screen and (min-width: 1400px) {
+body, p, td, textarea, input, button, li, a, th, h4 {
+     font-size: 10pt !important;
+}
+
+code, tt, .destaddress {
+     font-size: 9pt !important;
+}
+
+#navi a {
+     font-size: 11pt;
+}
+
+h3 {
+     font-size: 12pt !important;
+}
+
+#export {
+     margin-top: -40px !important;
+}
+
+#filter span, #filter a {
+     font-size: 11pt !important;
+}
+
+td.destinations textarea {
+     height: 32px !important;
+}
+
+input.export {
+     margin-top: 8px;
+}
+
+#host_list th:nth-child(2), #host_list td:nth-child(2),
+#host_list th:nth-child(3), #host_list td:nth-child(3),
+#host_list th:nth-child(4), #host_list td:nth-child(4) {
+     padding: 0 20px;
+     width: 6%;
+}
+
+.headline h4 {
+     background: rgba(0, 0, 0, 0) url(/themes/susidns/images/drive.png) no-repeat scroll 10px 8px;
+}
+}
+
+@media screen and (max-width: 1000px) {
+.iframed .illustrate {
+     margin: 0 10px 15px;
+}
+
+#content h3 {
+     font-size: 10pt;
+}
+}
+
+@media screen and (min-width: 1000px) {
+#content h3 {
+     font-size: 10.5pt;
+}
+}
+
+/* end responsive layout */
+
+/* Edge/IE tweaks */
+
+_:-ms-lang(x), * {
+     filter: none !important;
+     text-shadow: none !important;
+}
+
+/* end Edge/IE tweaks */
\ No newline at end of file
diff --git a/installer/resources/themes/susidns/midnight/susidns.css b/installer/resources/themes/susidns/midnight/susidns.css
index 6e4618299530cf72b9913003f55c3072098380ae..8d6923d02f28c4e279da1bae3e7239a4e75061e2 100644
--- a/installer/resources/themes/susidns/midnight/susidns.css
+++ b/installer/resources/themes/susidns/midnight/susidns.css
@@ -1,330 +1,1164 @@
-/* Susidns Midnight theme by dr|z3d */
+/* SusiDNS "Midnight" theme */
+/* Author: dr|z3d */
 
 body {
-     font-family:"Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      background-color: #000;
-     color: #eef;
+     color:#c9ceff;
+     margin: 0 10px;
+     font-size: 9pt;
 }
 
 body.iframed {
      background: transparent !important;
      margin: 0;
+     padding: 0;
+     overflow: hidden;
+}
+
+* {
+     outline: none;
 }
 
 #logo {
      display: none;
 }
 
-#navi p {
-     text-align: center;
+/* topnav */
+
+div#navi  {
+     border: 1px solid #2d295f;
+     padding: 3px 0 2px;
+     background: #002 url(/themes/console/midnight/images/header.png) repeat-x scroll center center !important;
+     background: linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     margin: -11px 0 27px;
+     box-shadow: inset 0 0 0 1px #000;
+     position: sticky;
+     top: -1px;
+     z-index: 999;
+     text-align: center !important;
      font-weight: bold;
+     font-size: 9pt;
+     padding: 6px 5px 5px !important;
+     min-width: 512px;
 }
 
-#navi a:link {
+.iframed #navi {
+     padding: 5px !important;
+     border: 1px solid #443da0 !important;
+     margin: 0 0 27px;
+     position: static;
+}
+
+#navi a, #navi a:visited {
+     border: 1px solid #2d295f;
+     border-radius: 2px;
+     padding: 5px;
+     margin: 3px 0 !important;
+     filter: drop-shadow(0 0 1px #000);
+     display: inline-block;
+     outline: none;
      text-transform: capitalize;
+     color: #928fbf !important;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+#navi a:hover, #navi a:focus {
+    border: 1px solid #652787;
+    color: #652787 !important;
+}
+
+#navi a:active {
+     border: 1px solid #652787;
+     background-blend-mode: luminosity;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important;
+     color: #c9ceff !important;
+}
+
+#navi a.abook {
+     background: #001 url(/themes/susidns/images/abook.png) 6px center no-repeat;
+     background: url(/themes/susidns/images/abook.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%);
+     padding: 5px 8px 5px 25px;
+}
+
+#navi a.abook:hover, #navi a.abook:focus {
+     background: #000 url(/themes/susidns/images/abook.png) 6px center no-repeat !important;
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
+}
+
+#navi a.abook:active {
+     background: #652787 url(/themes/susidns/images/abook.png) 6px center no-repeat !important;
+}
+
+#navi a#subs {
+     background: #001 url(/themes/susidns/images/subs.png) 6px center no-repeat;
+     background: url(/themes/susidns/images/subs.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%);
+     padding: 5px 8px 5px 25px;
+}
+
+#navi a#subs:hover, #navi a#subs:focus  {
+     background: #001 url(/themes/susidns/images/subs.png) 6px center no-repeat;
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
+}
+
+#navi a#subs:active {
+     background: #652787 url(/themes/susidns/images/subs.png) 6px center no-repeat;
 }
 
+#navi a#config {
+     background: #001 url(/themes/console/images/buttons/configure.png) 6px center no-repeat;
+     background: url(/themes/console/images/buttons/configure.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%);
+     padding: 5px 8px 5px 25px;
+}
+
+#navi a#config:hover, #navi a#config:focus {
+     background: #000 url(/themes/console/images/buttons/configure.png) 6px center no-repeat;
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
+}
+
+#navi a#config:active {
+     background: #652787 url(/themes/console/images/buttons/configure.png) 6px center no-repeat;
+}
+
+#navi a#overview {
+     background: #001 url(/themes/susidns/images/overview.png) 6px center no-repeat;
+     background: url(/themes/susidns/images/overview.png) 6px center no-repeat, linear-gradient(to bottom, #25233f 50%, #000 50%);
+     padding: 5px 8px 5px 25px;
+}
+
+#navi a#overview:hover, #navi a#overview:focus {
+     background: #000 url(/themes/susidns/images/overview.png) 6px center no-repeat;
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
+}
+
+#navi a#overview:active {
+     background: #652787 url(/themes/susidns/images/overview.png) 6px center no-repeat;
+}
+
+#navi > * {
+     vertical-align: middle;
+}
+
+/* end topnav */
+
 hr {
-     color: #99f;
-     background: #99f;
+     color: #2d295f;
+     background: #2d295f;
      height: 1px;
-     border: 0px solid #99f;
+     border: 0px solid #2d295f;
      width: 100%;
      margin: 5px 0;
      text-align: center;
+     display: none;
 }
 
-p {
-     color:#eef;
+div#filter {
+     border: 1px solid #2d295f;
+     padding: 0 0 15px;
+     text-align: center;
+}
+
+div#filter + div#search {
+     border: 1px solid #2d295f;
+     margin-top: 13px;
+     margin-bottom: 14px;
+}
+
+div#filter + div#search > form {
      margin: 0;
-     font-size: 8pt;
+     padding: 0;
+}
+
+#filter p, #search td {
+     font-size: 9pt !important;
+     font-weight: bold;
+}
+
+td.search > * {
+     vertical-align: middle;
+}
+
+#search input[type="text"] {
+     background: #000 url(/themes/console/images/buttons/search.png) 5px center no-repeat;
+     background: url(/themes/console/images/buttons/search.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #000019 100%) !important;
+     padding: 5px 5px 5px 25px !important;
+     margin-left: 5px;
+}
+
+#search input[type="text"]:focus {
+     background: #000 url(/themes/console/images/buttons/search.png) 5px center no-repeat !important;
+}
+
+#filter p {
+     padding: 15px 10px 0;
+}
+
+#filter p:first-child {
+     padding-bottom: 0;
+}
+
+p#filtered {
+     margin: -15px 0 10px !important;
+}
+
+#search {
+     padding: 0 10px;
+     margin-top: -1px !important;
+     padding-bottom: -20px;
+     margin-bottom: 20px;
+}
+
+#filter a:link, #filter a:visited {
+     text-transform: capitalize;
+     background: #000;
+     border: 1px solid #443da0;
+     border-radius: 2px;
+     padding: 3px 8px;
+     text-align: center;
+     color: #443da0;
+     display: inline-block;
+     margin: 2px 0;
+}
+
+#filter a:hover, #filter a:focus  {
+     border: 1px solid #652787;
+     transform: scale(1.1);
+}
+
+#filter a:active {
+     background: #652787;
+     color: #c9ceff !important;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000;
+}
+
+#filter span {
+     display: inherit;
+     text-align: center;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     font-weight: bold;
+     word-spacing: 0.1em;
+     vertical-align: middle;
+     border: 1px solid #2d295f;
+     border-radius: 0 0 2px 2px;
+     padding: 5px 10px !important;
+     min-width: 300px;
+     max-width: 500px;
+     width: 40%;
+     white-space: nowrap;
+     margin: -1px auto;
+     box-shadow: inset 0 0 0 1px #000;
+     background: url(/themes/console/midnight/images/header.png) repeat-x scroll center center #000;
+     background-image: linear-gradient(to bottom, #010010 0%, #020019 50%, #060051%, #0100100%) !important;
+}
+
+#filter span a, #filter span a:hover {
+     letter-spacing: normal;
+     word-spacing: normal;
+     display: inline-block;
+     border: none !important;
+     background: !important;
+     transform: none;
+}
+
+#filter span a:active {
+     background: none;
+     box-shadow: none;
+     color: #4f0519 !important;
+}
+
+#filter span b {
+     font-size: 11pt;
+     margin: -3px 5px 0;
+     text-transform: uppercase;
+     color: #fff;
+     line-height: 80%;
+}
+
+#filter p {
+     text-align: center;
+}
+
+#search table {
+     margin: 0 auto;
+}
+
+p {
+     color:#c9ceff;
+     margin: 0 0 4px;
+     font-size: 9pt;
      text-align: justify;
 }
 
+#messages + p, p.book {
+     border: 1px solid #2d295f;
+     background: #001 url(/themes/susidns/images/addressbook.png) 10px center no-repeat;
+     background-size: 24px 24px;
+     padding: 20px 20px 20px 42px !important;
+}
+
+#messages {
+     margin-bottom: 24px;
+}
+
+#messages:empty {
+     margin-top: -10px;
+     display: none;
+}
+
 span.addrhlpr {
      font-size:8pt;
 }
 
 h3 {
-     color:#eef;
-     font-size:10pt;
-     font-weight:bold;
-     border: 1px solid #99f;
-     padding: 5px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     background: #001 url("../../console/midnight/images/titles.png") repeat-x scroll center center !important;
+     color: #c9ceff;
+     font-size: 10pt;
+     font-weight: bold;
+     border: 1px solid #2d295f;
+     padding: 7px 10px;
+     border-radius: 2px;
+     background: #000 url(/themes/console/midnight/images/header.png) repeat-x scroll center center;
+     background: linear-gradient(to bottom, #191729 0%, #000 50%);
      letter-spacing: 0.08em;
-     padding: 6px;
-     text-shadow: 0 0 2px #001100;
+     word-spacing: 0.1em;
+     text-shadow: 0 0 2px #010011;
      text-transform: uppercase;
+     box-shadow: inset 0 0 0 1px #000;
 }
 
-a {
-     color:#f60;
-     text-decoration:none;
-     font-weight: bold;
+#content h3 {
+     border: none;
+     border-radius: 0;
+     border-bottom: 1px dotted #2d295f;
+     background: none !important;
+     margin: 0 20px 10px;
+     padding: 5px 10px;
+}
+
+#content p + h3 {
+      margin-top: 15px !important;
+}
+
+.headline h3 {
+     border-radius: 2px 2px 0 0;
+     margin-top: -10px;
+}
+
+.headline h3:first-child {
+     font-size: 10.5pt;
+     margin-bottom: 24px;
+     border-radius: 0;
+}
+
+#content h3:first-child {
+     margin-top: -15px;
+     font-size: 10.5pt;
+}
+
+.headline h3:first-child + h4 {
+     margin-top: -25px;
+     margin-bottom: 25px !important;
+}
+
+#add h3 {
+     margin-top: -1px;
+     margin-left: -11px;
+     margin-right: -11px;
+     padding: 8px 10px;
+     font-size: 10pt;
+}
+
+#add table {
+     width: 100%;
+}
+
+#add td:last-child {
+     width: 94%;
 }
 
-a:hover {
-     text-decoration:underline;
+.headline {
+     margin-top: -16px;
+}
+
+div#messages p {
+}
+
+div#messages + p {
+     padding: 12px 10px 8px 20px;
+}
+
+div#book p {
+     padding: 15px 15px 15px 35px !important;
+}
+
+h4 {
+     font-size: 9pt;
+     margin-top: -15px;
+     word-spacing: 0.1em;
+     border: 1px solid #2d295f;
+     padding: 8px 10px;
+     margin-bottom: 30px !important;
+     background: linear-gradient(to right, #000, #001);
+}
+
+div#messages > p.messages {
+     padding: 10px;
+}
+
+#messages p {
+     padding: 15px 15px 15px 40px !important;
+     background: url(/themes/console/images/info/infohelp.png) 6px center no-repeat;
+}
+
+a:link {
+     color: #7972d1;
+     text-decoration: none;
      font-weight: bold;
+     outline: none;
 }
 
-th {
+a:hover, a:focus {
+     text-decoration: none;
+     color: #652787 !important;
+}
+
+a:visited {
+     color: #4e47bf;
+     text-decoration: none;
+}
+
+a:active {
+     color: #4f0519 !important;
+}
 
-     color:#ee9;
+th {
+     color: #c9ceff;
      font-size: 9pt;
-     padding:5px 10px;
-     font-size:10pt;
+     padding: 5px 10px;
+     font-size: 10pt;
+     text-align: left;
+}
+
+.iframed .book tr.head th {
+     border-top: 1px solid #2d295f;
+     border-bottom: 1px solid #2d295f;
+}
+
+.book th:last-child {
+     background: #000 url(/themes/console/images/buttons/delete.png) center center no-repeat !important;
+     font-size: 0;
+     padding: 0 !important;
+}
+
+table.book td:first-child {
+     font-weight: bold;
 }
 
 td {
+     color: #c9ceff;
+     padding: 5px;
+     font-size: 9pt;
+     vertical-align: center;
+}
 
-     color:#ee9;
-     line-height:12pt;
-     padding:5px 10px;
-     font-size:8pt;
-     vertical-align:center;
+td.checkbox {
+     width: 32px !important;
+}
+
+td.names a {
+     font-size: 9pt !important;
+}
+
+td > img[width="320"], td > img[src^="/imagegen"] {
+     border-radius: 2px;
+     width: 240px;
+     height: 240px;
+     border: 1px solid #2d295f;
+     padding: 5px;
+     margin: 10px 3px;
+     background: #000;
 }
 
 ol, ul {
      margin: 0 20px 0 10px;
+     display: table-row;
+     padding: 0px 10px;
 }
 
 li {
-     color:#ee9;
-     line-height:12pt;
+     color: #c9ceff;
+     line-height: 150%;
      margin: 0;
-     font-size:8pt;
+     font-size: 9pt;
      list-style: square;
 }
 
 tr.list1 {
-     background-color:#001
+     background-color: #010011;
 }
 
 tr.list0 {
-     background-color:#000;
+     background-color: #000;
 }
 
 p.messages {
-     background-color:#000;
-     color:#ee9;
-     border: 1px solid #99f;
-     padding: 5px;
+     color:#c9ceff;
+     border: 1px solid #2d295f;
+     padding: 5px 5px 10px;
      margin: 5px 0 10px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-}
-
-#help {
-     border: 1px solid #99f;
-     padding: 10px 20px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     margin: 0 0 15px;
-     background: #000;
+     margin: -15px 0 14px;
+     border-radius: 0;
+}
+
+.help {
+     border: 1px solid #2d295f;
+     padding: 20px 30px;
+     background: #001;
+     margin-bottom: 5px;
+}
+
+.help h3 {
+     margin: 10px -31px;
+     border-radius: 0;
+}
+
+.help h3:first-child {
+     margin-top: -21px;
+}
+
+.help ul li:last-child {
+     margin-bottom: -10px;
+}
+
+.help p {
+     border: none;
+     padding: 0;
+}
+
+#helpsubs {
+     background: #001 url(/themes/console/images/info/infohelp.png) 12px center no-repeat;
+     padding: 15px 15px 15px 52px;
+}
+
+div#content {
+}
+
+div#content p {
+     padding: 0 30px;
 }
 
 p.footer {
-     font-size:7pt;
+     font-size: 8pt;
      text-align: center;
+     border: 1px solid #113;
+     padding: 5px 0 2px;
+}
+
+#footer {
+     position: fixed;
+     bottom: -4px;
+     width: calc(100% - 20px);
+     margin: 0;
+     display: none;
 }
 
 .iframed #footer {
      display: none;
 }
 
-p.buttons, #buttons {
+#buttons {
+     text-align: right;
+     background: #001;
+     background: linear-gradient(to right, #001, #000) !important;
+}
+
+p.buttons, .buttons {
      text-align: right;
      margin: 5px 0 -5px;
+     padding: 0 3px;
+}
+
+p.buttons {
+     border: 1px solid #2d295f;
+     padding: 8px 5px;
+}
+
+div#book + div#buttons {
+     margin: 9px 0 20px !important;
+}
+
+#add p.buttons {
+     border: none;
+     padding: 0;
+}
+
+form[action="subscriptions"] {
+     margin: 0;
+}
+
+textarea[name="config"], textarea[name="content"] {
+     border-radius: 0;
+     margin-top: -26px;
+     resize: none;
+     border: 1px solid #2d295f;
+     font-size: 8.5pt;
+}
+
+textarea[name="config"] {
+     height: 220px;
+     overflow-y: scroll;
+     resize: none;
+}
+
+div#config + div#buttons, div#content + div#buttons {
+     border: 1px solid #2d295f;
+     margin-top: -3px;
+     padding: 5px;
+     margin-bottom: 15px;
+     background: #001;
 }
 
 .illustrate {
+     max-width: 90%;
+     height: auto;
      margin: 20px 0 15px;
      padding: 10px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #001;
+     border-radius: 2px;
+     border: 1px solid #010011;
      font-size: 10pt;
-     -moz-box-shadow: inset 0px 0px 1px 0px #002;
+     box-shadow: inset 0px 0px 1px 0px #020022;
      background: #fff;
+     filter: sepia(100%) invert(100%);
+}
+
+_:-ms-lang(x), img.illustrate {
+     width: auto;
+     max-width: 600px;
+}
+
+div#book {
+     padding: 0;
+     margin: -15px 0 -10px;
 }
 
 #book table {
      width: 100%;
+     border: 1px solid #2d295f !important;
+/*     margin-top: -10px;*/
 }
 
-.destinations textarea {
-     width: 100%;
-     padding: 2px;
+.iframed #book table {
+     border: none !important;
 }
 
-.page {
-     color:#ee9;
-     margin: 10px 0;
+#book table th {
+     padding: 5px 0;
+     background: url(/themes/console/midnight/images/header.png) repeat-x scroll center center #000;
+     background-image: linear-gradient(to bottom, #010010 0%, #020019 50%, #060051%, #0100100%) !important;
+     border-bottom: 1px solid #2d295f;
+}
+
+#book td {
+     border-bottom: 1px solid #17142f;
      padding: 0;
-     font-size: 8pt !important;
-     -moz-box-shadow: inset 0px 0px 1px 0px #002;
 }
 
-.iframed .page {
-     margin: 0;
+#book table tr:hover {
+     background: #003;
 }
 
-input[type=submit], input[type=reset] {
-     border: 1px outset #999;
-     background: #ddf;
-     color: #001;
-     margin: 5px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     padding: 1px 2px;
-     text-decoration: none;
-     min-width: 110px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     -moz-box-shadow: inset 0px 2px 8px 0px #fff;
-     color: #006;
+#book table tr:hover textarea {
+     color: #c9ceff;
 }
 
-input[type=submit]:hover, input[type=reset]:hover {
-     background: #000;
-     color: #f60;
-     border: 1px solid #f60;
-     -moz-box-shadow: inset 0 1px 1px 0 #ee9;
-     box-shadow: inset 0 1px 1px 0 #ee9;
-}
-
-/*
-input[type=reset] {
-     border: 1px outset #999;
-     background: #ddf;
-     color: #001;
-     margin: 5px;
-     font: bold 8pt "Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     padding: 1px 2px;
-     text-decoration: none;
-     min-width: 110px;
-     border-radius: 4px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     -moz-box-shadow: inset 0px 2px 8px 0px #fff;
-     color: #006;
-     opacity: 0.9;
+#book, #messages, #filter, #search {
+     background: #001;
 }
 
-input[type=reset]:hover {
-     background: #22a;
-     color: #fff;
-     border: 1px solid #f60;
-     opacity: 1.0;
-     -moz-box-shadow: inset 0px 0px 0px 1px #fff;
+.book th:first-child, .book td:first-child {
+     padding: 0 10px !important;
+     width: 200px;
+     white-space: nowrap;
 }
-*/
 
-input.accept {
-     background: #ddf url('/themes/console/images/accept.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.book td:nth-child(2) {
+     padding: 2px 0 2px 5px !important;
+     width: 30px;
 }
 
-input.add {
-     background: #ddf url('/themes/console/images/add.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.book td:nth-child(3) {
+     text-align: center;
+     width: 20px;
+     padding: 2px 25px 2px 0 !important;
 }
 
-input.cancel {
-     background: #ddf url('/themes/console/images/cancel.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.book td:nth-child(3) a:not(old) {
+     font-size: 0 !important;
 }
 
-input.delete {
-     background: #ddf url('/themes/console/images/delete.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.book td:nth-child(3) .addrhlpr a::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     text-align: center;
+     padding: 2px 10px !important;
+     filter: drop-shadow(0 0 1px #555);
 }
 
-input.export {
-     background: #ddf url('/themes/console/images/arrow_right.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.book td:nth-child(3) .addrhlpr:hover {
+     filter: drop-shadow(0 0 1px #b73fff);
 }
 
-input.reload {
-     background: #ddf url('/themes/console/images/arrow_refresh.png') no-repeat 2px center;
-     padding: 2px 3px 2px 20px;
-     min-height: 22px;
+.headline + #book > table td {
+     padding: 5px;
 }
 
-input.search {
-     background: #ddf url('/themes/console/images/magnifier.png') no-repeat 2px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+.headline + #book > table td:first-child {
+     width: 120px;
+     white-space: nowrap;
+     text-align: right;
 }
 
-input.search[type="text"] {
-     background: #eef url('/themes/console/images/magnifier.png') no-repeat 2px center;
+.headline + #book > table td.destinations {
+     padding: 0;
+}
+
+#visualid {
+     border: 1px solid #2d295f;
+     margin-top: -10px;
+     background: #001;
+}
+
+.iframed #visualid {
+     border: none;
+}
+
+#visualid h3 {
+     margin-top: -1px;
+     border-left: none;
+     border-right: none;
+}
+
+#idAddress {
+     text-transform: none;
+}
+
+#visualid table {
+     width: 100%;
+     margin-top: -15px;
+     margin-bottom: 1px;
+     border-collapse: collapse;
+}
+
+#visualid td:first-child {
+     text-align: right;
+}
+
+#visualid td[colspan="2"] {
+     text-align: right;
+     border-top: 1px solid #2d295f;
+     padding: 17px 9px 15px !important;
+}
+
+.iframed #visualid td[colspan="2"] {
+     padding: 20px 9px 5px !important;
+}
+
+div#add {
+     border: 1px solid #2d295f;
+     padding: 0 10px 15px;
+     margin-top: 20px;
+     background: #001;
+}
+
+.page {
+     color:#c9ceff;
+     margin: 10px 0;
+     padding: 0;
+     font-size: 9pt !important;
+     background: #000;
+}
+
+.iframed .page {
+     margin: 1px 0 0;
+     overflow: hidden;
 }
 
 input {
      font-size: 9pt;
      font-weight: bold;
      text-align: left;
-     padding: 3px 4px !important;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-     border: 1px solid #99f;
+     padding: 4px !important;
+     border-radius: 2px;
+     border: 1px solid #443da0;
      background: #000 none !important;
-     color: #99f;
+     color: #4e47bf;
      margin: 2px 4px 2px 0;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      min-width: 64px !important;
 }
 
-input[type="text"] {
-     color: #eef;
+input[type="checkbox"], input[type="radio"], .optbox {
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */
+     background: none;
+     min-width: 16px;
+     min-height: 16px;
+}
+
+input[type=submit]::-moz-focus-inner, input[type=reset]::-moz-focus-inner {
+     border: none;
+     outline: none;
 }
 
-input[type=submit], input[type=reset] {
-     color: #99f;
+input[type=submit], input[type=reset], .fakebutton {
+     color: #4e47bf;
      background: #000;
-     border: 1px outset #119;
-     padding: 2px !important;
-     box-shadow: 0 1px 1px 0 #119 inset;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     border: 1px solid #3e3f8f;
+     border-bottom-color: #14144f;
+     border-right-color: #14144f;
+     padding: 5px !important;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
      text-align: center;
-     min-height: 22px !important;
+     min-width: 90px !important;
+     box-shadow: inset 0 0 0 1px #000;
+     border-radius: 2px;
+}
+
+input[type=submit]:hover, input[type=reset]:hover,
+input[type=submit]:focus, input[type=reset]:focus,
+.fakebutton:hover, .fakebutton:focus {
+     background: #000 !important;
+     color: #652787;
+     border: 1px solid #652787;
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
 }
 
-input[type=submit]:active, input[type=reset]:active {
-     background: #f60 !important;
-     color: #eef !important;
-     border: 1px solid #f60;
+input[type=submit]:active, input[type=reset]:active, .fakebutton:active {
+     background: #652787 !important;
+     color: #c9ceff !important;
+     border: 1px solid #652787;
+     box-shadow: inset 3px 3px 3px #000;
 }
 
 textarea {
-     color: #eef;
+     color: #7670c2;
+     background: #000;
+     border: 1px solid #443da0;
+     padding: 3px 5px;
+     font: bold 8.5pt "Droid Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     border-radius: 2px;
+     width: 100%;
+     height: 120px;
+     line-height: 140%;
+     resize: none;
+}
+
+input[type="text"], textarea {
+     background: linear-gradient(to bottom, #000 0%, #000019 100%) !important;
+     box-shadow: inset 0 0 3px 3px #000;
+}
+
+input[type="text"]:focus, textarea:focus {
+     background: #000 !important;
+     color: #c9ceff;
+     border-radius: 2px;
+}
+
+input[type=text]:focus, textarea[name="destination"]:focus {
+     color: #c9ceff !important;
      background: #000;
-     border: 1px solid #99f;
-     padding: 2px !important;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
+     filter: drop-shadow(0 0 1px #99f);
+     box-shadow: 0 0 0 1px rgba(101, 39, 135, 0.5);
+     transition: filter ease 0.3s;
+}
+
+textarea[cols="70"] {
+     width: 100% !important;
+     height: 40px;
+     white-space: pre-wrap;
+}
+
+.destinations textarea {
      width: 100%;
-     height: 100px;
-     spell-check: false;
+     padding: 1px 1px 1px 2px !important;
+     resize: none;
+     margin: 0;
+     border-radius: 0;
+     border: none;
+     border-left: 1px solid #17142f;
+     border-right: 3px solid #17142f;
+     height: 32px;
+     overflow-x: auto;
+     overflow-y: hidden !important;
+}
+
+.iframed iframe {
+     width: calc(100% - 10px);
+}
+
+/* iframed content border removal */
+
+.iframed #navi, .iframed h3, .iframed h4, .iframed #book, .iframed #add, .iframed #filtered, .iframed #filter, .iframed #search,
+table.book, .iframed #buttons, .iframed .buttons, .iframed #messages + p, .iframed p.book, .iframed #helpsubs,
+.iframed textarea[name="config"], .iframed textarea[name="content"], .iframed #helpconfig, .iframed p.messages {
+     border-right: none !important;
+     border-left: none !important;
+}
+
+/* page titles */
+
+.headline h3 {
+     padding: 10px 5px 10px 40px;
+     background: url(/themes/susidns/images/addressbook.png) 10px center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%);
+     font-size: 11pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+}
+
+.headline#subscriptions h3 {
+     background: url(/themes/susidns/images/subs_24.png) 10px center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%);
+}
+
+.headline#config h3 {
+     background: url(/themes/susidns/images/configure_24.png) 10px center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%);
 }
 
-input:focus, textarea:focus {
-     color: #eef;
+.headline h4 {
+     padding: 5px 10px 5px 35px;
+     background: url(/themes/susidns/images/drive.png) 13px center no-repeat;
 }
+
+p#filtered {
+     background: url(/themes/console/images/buttons/filter.png) 13px center no-repeat;
+     padding: 15px 250px 15px 35px !important;
+}
+
+p.book {
+     background: url(/themes/susidns/images/abook.png) 13px center no-repeat;
+     padding: 10px 10px 10px 35px !important;
+}
+
+/* export hosts button adjustments */
+
+#export {
+     text-align: right;
+     margin-top: -48px;
+     margin-bottom: 23px;
+     padding-right: 4px;
+     float: right;
+     clear: left !important;
+}
+
+#export input[type="submit"] {
+     display: inline-block;
+}
+
+p.book {
+     padding-left: 35px !important;
+}
+
+#messages + p, p.book {
+     border: 1px solid #2d295f;
+     background: #000 url(/themes/susidns/images/addressbook.png) 5px center no-repeat;
+}
+
+/* hide export button on published addressbook if empty */
+#messages + form[action="export"] {
+     display: none;
+}
+
+/* host details page */
+
+#host_details td {
+     padding: 5px 10px !important;
+}
+
+#host_details td:first-child {
+     min-width: 10px !important;
+     width: 10%;
+     white-space: nowrap;
+     font-weight: bold;
+     text-align: right;
+}
+
+#host_details td:last-child {
+     width: 90%;
+     text-align: left;
+     border-left: none !important;
+     border-right: none !important;
+}
+
+#host_details td.destinations {
+     background: none;
+}
+
+#host_details tr:hover {
+     background: #ffd;
+}
+
+#host_details .destaddress {
+     word-break: break-all !important;
+     white-space: normal !important;
+}
+
+/* end host details */
+
+.names img {
+     width: 20px;
+     height: 20px;
+     vertical-align: middle;
+     margin: 1px 10px 1px 1px;
+     padding: 1px;
+     border: 1px solid #17142f;
+     border-radius: 2px;
+     background: #000;
+}
+
+.names img:hover, .names a:focus img {
+     border: 1px solid #652787;
+     background: #652787;
+}
+
+.names a:active img, .names a:focus img {
+     transform: rotate(45deg) scale(0.8);
+     transition: ease all 0.1s 0s;
+}
+
+/* hostname list */
+
+#host_list {
+     margin-top: 28px;
+}
+
+#host_list th:first-child,
+#host_list td:first-child {
+     width: 150px;
+     width: 30%;
+     white-space: nowrap;
+     padding-left: 5px !important;
+}
+
+#host_list th:first-child {
+     padding-left: 39px !important;
+}
+
+#host_list td:last-child {
+     width: 16px;
+     white-space: nowrap;
+     font-weight: bold;
+}
+
+#host_list th:nth-child(2), #host_list td:nth-child(2),
+#host_list th:nth-child(3), #host_list td:nth-child(3),
+#host_list th:nth-child(4), #host_list td:nth-child(4) {
+     width: 35px;
+     width: 8%;
+     padding: 0 5px !important;
+     white-space: nowrap;
+     text-align: center;
+}
+
+#host_list td:nth-child(2) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(2) a::after {
+     content: url(/themes/console/images/buttons/link.png);
+     text-align: center;
+     filter: drop-shadow(0 0 1px #555);
+     cursor: pointer;
+}
+
+#host_list td:nth-child(3) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(3) a::after {
+     content: url(/themes/console/images/buttons/helper.png);
+     cursor: pointer;
+}
+
+#host_list th:nth-child(4), #host_list td:nth-child(4) {
+     padding-right: 30px !important;
+}
+
+#host_list td:nth-child(4) a:not(old) {
+     font-size: 0 !important;
+}
+
+#host_list td:nth-child(4) .addrhlpr a::after {
+     content: url(/themes/console/images/buttons/fullview.png);
+     text-align: center;
+     padding: 0 10px !important;
+     filter: drop-shadow(0 0 1px #555);
+     cursor: pointer;
+}
+
+#host_list td:nth-child(2) a:hover, #host_list td:nth-child(3) a:hover, #host_list td:nth-child(4) a:hover,
+#host_list td:nth-child(2) a:focus, #host_list td:nth-child(3) a:focus, #host_list td:nth-child(4) a:focus {
+     filter: drop-shadow(0 0 2px #652787);
+}
+
+#host_list .destaddress {
+     overflow: auto !important;
+     white-space: nowrap;
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace !important;
+     font-weight: normal;
+     padding: 3px !important;
+     -moz-user-select: all;
+     -webkit-user-select: all;
+     user-select: all;
+}
+
+td.destinations {
+     max-width: 50px !important;
+     border-left: 1px solid #2d295f;
+     border-right: 1px solid #2d295f;
+}
+
+/* end hostname list */
+
+/* responsive layout */
+
+@media screen and (min-width: 1200px) {
+#filter a {
+     font-size: 10pt;
+     margin: 0 2px -5px !important;
+     display: inline-block;
+     min-width: 12px;
+}
+}
+
+@media screen and (min-width: 1500px) {
+body, input[type="text"], select, h4, td.names a, #filter p, #search td, p, a, textarea, .help li, td, tt, code, textarea, input[type="submit"], input[type="reset"], .destaddress {
+     font-size: 10pt !important;
+}
+
+#navi a {
+     font-size: 10.5pt !important;
+}
+
+h3 {
+     font-size: 12pt !important;
+}
+
+#filter a {
+     font-size: 11pt !important;
+     min-width: 14px;
+}
+
+.destinations textarea {
+     height: 34px;
+}
+}
+
+/* end responsive layout */
+
+/* Edge/IE tweaks */
+
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+/* end Edge/IE tweaks */
+
diff --git a/installer/resources/themes/susimail/classic/images/3down.png b/installer/resources/themes/susimail/classic/images/3down.png
new file mode 100644
index 0000000000000000000000000000000000000000..93c3b73e07764f44bfbc2b68cc940fa9f8b40a51
Binary files /dev/null and b/installer/resources/themes/susimail/classic/images/3down.png differ
diff --git a/installer/resources/themes/susimail/classic/images/3up.png b/installer/resources/themes/susimail/classic/images/3up.png
new file mode 100644
index 0000000000000000000000000000000000000000..1805c14fe8fa3782bc1d3d306109cb981d736af7
Binary files /dev/null and b/installer/resources/themes/susimail/classic/images/3up.png differ
diff --git a/installer/resources/themes/susimail/classic/images/attach.png b/installer/resources/themes/susimail/classic/images/attach.png
new file mode 100644
index 0000000000000000000000000000000000000000..169a845c14fe9bed9e7b0c939e47745c5ee9402d
Binary files /dev/null and b/installer/resources/themes/susimail/classic/images/attach.png differ
diff --git a/installer/resources/themes/susimail/classic/images/bin.png b/installer/resources/themes/susimail/classic/images/bin.png
new file mode 100644
index 0000000000000000000000000000000000000000..df6278bcf211ed276e36d662e606be5702fcc99e
Binary files /dev/null and b/installer/resources/themes/susimail/classic/images/bin.png differ
diff --git a/installer/resources/themes/susimail/classic/mobile.css b/installer/resources/themes/susimail/classic/mobile.css
new file mode 100644
index 0000000000000000000000000000000000000000..9500da873e951835286628fd0b7d9f3e1aed2894
--- /dev/null
+++ b/installer/resources/themes/susimail/classic/mobile.css
@@ -0,0 +1,60 @@
+/* Susimail Mobile Theme Override "Classic" */
+
+body {
+     margin: -1px 0 0;
+}
+
+.page {
+     min-width: 560px;
+     padding: 0 5px 12px !important;
+     border-radius: 0;
+     border-left: 1px solid transparent !important;
+     border-right: 1px solid transparent !important;
+}
+
+form {
+     margin-bottom: 5px;
+}
+
+#dologin {
+     width: 500px !important;
+     margin: 22px auto 10px !important;
+}
+
+#dologin h1 {
+     display: block !important;
+}
+
+.notifications {
+     margin: -1px 5px !important;
+}
+
+p.error, p.info {
+     border-left: none !important;
+     border-right: none !important
+}
+
+.topbuttons {
+     margin: -1px -6px !important;
+     border-left: none !important;
+     border-right: none !important;
+}
+
+#prefsave {
+     margin: 10px -6px -17px !important;
+     border-left: none !important;
+     border-right: none !important
+}
+
+#mailbox td:nth-child(6), #mailbox th:nth-child(6), #mailbox td:nth-child(8), #mailbox th:nth-child(8) {
+     display: none;
+}
+
+#newmail input[type="text"], #composemail textarea {
+     width: 100%;
+     min-width: 360px !important;
+}
+
+.header, .footer {
+     display: none;
+}
diff --git a/installer/resources/themes/susimail/classic/susimail.css b/installer/resources/themes/susimail/classic/susimail.css
new file mode 100644
index 0000000000000000000000000000000000000000..db305eb097a1e3b0ae87f1a7bad96248109b8857
--- /dev/null
+++ b/installer/resources/themes/susimail/classic/susimail.css
@@ -0,0 +1,1140 @@
+/* Susimail "Classic" Theme */
+/* Author: dr|z3d */
+
+body {
+     background: #eef url(/themes/console/classic/images/bg0.png);
+     color: #0c153d;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-size: 9pt;
+}
+
+body.iframed {
+     background: transparent !important;
+     margin: 5px 0 0 0;
+     overflow: hidden; /* webkit fix */
+}
+
+* {
+     outline: none;
+}
+
+div.header {
+     padding: 30px 10px;
+     margin: 0 -10px;
+     background: #fff !important;
+     border-bottom: 1px solid #89f;
+     background: #fff url(/themes/susimail/images/susimail.png) center center no-repeat !important;
+     background-size: auto 80% !important;
+}
+
+.header img {
+     transform: scale(0.6);
+     display: none;
+}
+
+h3#config {
+     border: 1px solid #89f;
+     padding: 5px 10px;
+     width: 300px;
+     margin: 0 auto 10px;
+     background: url(/themes/console/classic/images/titlebg.png) right center no-repeat;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%);
+     border-radius: 0 0 2px 2px;
+}
+
+textarea[name="config_text"] {
+     resize: none;
+}
+
+li {
+     color: #0c153d;
+     font-size: 8.5pt;
+     margin-left: 5mm;
+     margin-right: 5mm;
+}
+
+p {
+     color: #0c153d;
+     margin-left: 5mm;
+     margin-right: 5mm;
+     font-size: 9pt;
+}
+
+p.hl {
+     font-size: 12pt;
+     letter-spacing: 2pt;
+     line-height: 18pt;
+     font-weight: bold;
+}
+
+p.text {
+     margin-left: 10px;
+     margin-right: 10px;
+}
+
+p.error, p.info {
+     color: #900;
+     padding: 15px 15px 15px 55px;
+     border: 1px solid #89f;
+     background: #ffe url(/themes/console/images/info/errortriangle.png) 8px center no-repeat;
+     text-align: left;
+     margin: -1px -11px;
+     box-shadow: inset 0 0 0 1px #fff;
+     display: block;
+     font-weight: bold;
+     line-height: 120%;
+}
+
+td p.info, td p.error {
+     margin: -2px -3px;
+}
+
+tr.mailbody p.error {
+     margin: -3px -1px;
+}
+
+tr.mailbody:nth-child(n+3) {
+     background: #fff;
+     border-top: 1px solid #89f;
+     border-bottom: 1px solid #89f;
+}
+
+p.info {
+     color: #337;
+     background: #ffe url(/themes/console/images/info/infohelp.png) 8px center no-repeat;
+     padding: 15px 15px 15px 45px;
+}
+
+span.coloured {
+     color:#327BBF;
+}
+
+div.footer {
+     border-top: 1px solid #89f;
+     margin: 0 -10px -10px;
+     background: #fff;
+     background: rgba(255,255,255,0.5);
+     padding: 1px;
+     display: none;
+}
+
+p.footer {
+     padding: 1px;
+     margin: 0;
+     font-size:8pt;
+     line-height:10pt;
+     text-align: center;
+}
+
+.iframed .footer {
+     display: none;
+}
+
+p.mailbody {
+     font: 9pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     margin: 0 20px 10px;
+     text-align: left;
+}
+
+.iframed p.mailbody {
+     margin: 0;
+     padding: 0 20px 10px;
+}
+
+.mailbody pre {
+     white-space: pre-wrap !important;
+     word-wrap: break-word;
+}
+
+div.attached {
+     padding: 5px 0 5px 25px;
+     background: #fff;
+     background: url(images/attach.png) 5px center no-repeat;
+     vertical-align: middle;
+     text-align: left;
+}
+
+.iframed .attached {
+     padding: 5px 0 5px 25px;
+}
+
+.attached img {
+     border: 1px solid #cfd6ff;
+     padding: 2px;
+}
+
+td#addattach {
+     border-bottom: 1px solid #89f;
+}
+
+td#attachedfile {
+     border-bottom: 1px dotted #89f;
+}
+
+.iframed .header {
+     display: none;
+}
+
+a:link {
+     color: #33a;
+     text-decoration: none;
+     font-weight: bold;
+     word-wrap: break-word;
+}
+
+a:visited {
+     color: #448;
+     text-decoration: none;
+     font-weight: bold;
+}
+
+a:hover, a:focus {
+     color: #f60;
+     text-decoration: none;
+     font-weight: bold;
+     outline: none;
+}
+
+a:active {
+     color: #f93;
+     text-decoration: none;
+     font-weight: bold;
+}
+
+a.linkspam {
+     color: #8f1a1a;
+}
+
+a.linknew {
+     color: #2a7f00;
+}
+
+td {
+     color: #0c153d;
+     line-height: 12pt;
+     font-size: 9pt;
+     padding: 1px 3px;
+}
+
+tr.list0 {
+     background: #dde1ff;
+     background: rgba(220,220,255,0.5);
+}
+
+tr.list1 {
+     background: #eff1ff;
+     background: rgba(240,240,255,0.5);
+}
+
+tr.list0, tr.list1 {
+     border-top: 1px inset #ccf !important;
+     border-bottom: 1px inset #ccf !important;
+}
+
+_:-ms-lang(x), tr.list0, tr.list1 {
+     border-bottom: 1px solid #ccf !important;
+}
+
+tr.list0:hover, tr.list1:hover {
+     background: #fff;
+     background: linear-gradient(to bottom, #fff 0%, #ffe 100%) !important;
+     cursor: pointer;
+     border-top: 1px solid #89f !important;
+     border-bottom: 1px solid #89f !important;
+}
+
+tr.list0:hover td, tr.list1:hover td {
+     color: #104e99 !important;
+}
+
+tr.list0:hover a, tr.list1:hover a {
+     color: #f60;
+}
+
+tr.list0 a:link {
+     text-decoration: none;
+}
+
+tr.list1 a:link {
+     text-decoration: none;
+}
+
+table.noborder {
+     margin-left: 0;
+     margin-top: 0;
+     margin-right: 0;
+}
+
+table#mailbox, div.topbuttons {
+     border: 1px solid #89f;
+     background: #eef;
+}
+
+table#mailbox {
+     margin: 0 auto -12px;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {  /* webkit fixes */
+table#mailbox {
+     margin-top: 1px;
+}
+
+div#prefsave {
+     border-bottom: 1px solid #89f;
+}
+}
+
+_:-ms-lang(x), table#mailbox {
+     margin-top: 1px;
+}
+
+#mailbox th {
+     border-bottom: 1px solid #89f;
+     background: url(/themes/console/classic/images/titlebg.png) right center no-repeat;
+     background: linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important;
+}
+
+#mailbox th:first-child {
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important;
+}
+
+#mailbox th:nth-child(2) {
+     background: url(/themes/susimail/images/status.png) center center no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important;
+     background-blend-mode: luminosity;
+}
+
+#mailbox th:nth-child(4) {
+     background: url(/susimail/icons/attach.png) center right 3px no-repeat, linear-gradient(to bottom, #fff 0%, #fff 50%, #eff2ff 50%, #eff2ff 100%) !important;
+}
+
+#mailbox th:last-child, #mailbox td:last-child, #mailbox th:nth-last-child(3), #mailbox td:nth-last-child(3) {
+     text-align: right;
+     width: 100px;
+     white-space: nowrap;
+     padding-right: 5px;
+}
+
+#mailbox td:nth-child(5) {
+     text-align: left;
+}
+
+#mailbox td[colspan="9"] {
+     display: none;
+}
+
+#mailbox td:nth-child(2), #mailbox td:nth-child(4) {
+     width: 24px;
+     text-align: right;
+}
+
+#mailbox td:nth-child(3) a, #mailbox td:nth-child(3) a:visited  {
+     color: #0c153d;
+}
+
+#mailbox hr, #newmail hr {
+     display: none;
+}
+
+#mailbox td:first-child {
+     text-align: center;
+}
+
+#mailbox td:nth-child(3) a {
+     font-weight: normal;
+}
+
+#mailbox tr:hover td:nth-child(3) a {
+     color: #104e99 !important;
+}
+
+#mailbox tr.bottombuttons td {
+     border-top: 1px solid #89f;
+     background: #fff;
+     padding-top: 3px;
+     padding-bottom: 3px;
+}
+
+#mailbox tr.bottombuttons td:first-child {
+     text-align: left;
+}
+
+#mailbox tr.bottombuttons td:last-child {
+     padding-right: 2px;
+}
+
+#mailbox a img.sort:hover, .sort:focus {
+     opacity: 1 !important;
+     filter: drop-shadow(0 0 1px #f60);
+}
+
+img.sort {
+     height: 8px;
+     width: auto;
+}
+
+#newmail input[type="text"] {
+     width: 665px;
+}
+
+#newmail td:first-child {
+     font-weight: bold;
+     padding-right: 10px;
+}
+
+pre {
+     font: 8.5pt "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     margin-left: 1cm;
+     margin-right: 1cm;
+}
+
+.page {
+     background: #eef url(/themes/console/classic/images/bg2.png);
+     color: #0c153d;
+     margin: 0;
+     padding: 0 10px 10px;
+     border: 1px solid #89f;
+     font-size: 9pt !important;
+     line-height: 160% !important;
+     box-shadow: 0 0 0 1px #eee;
+     text-align: center;
+     min-width: 800px;
+}
+
+.iframed .page {
+     background: transparent;
+     margin: -6px 1px;
+     min-width: 580px;
+     border: none;
+     box-shadow: none;
+}
+
+table {
+     text-align: justify;
+     width: 100%;
+     border-collapse: collapse;
+}
+
+th {
+     font-size: 10pt;
+     font-weight: bold;
+}
+
+form {
+     line-height: 160%
+}
+
+.iframed form {
+     margin-bottom: -12px;
+}
+
+#viewmail {
+     margin: 0 -10px;
+     border-top: 1px solid #89f;
+     background: #eef;
+}
+
+.iframed #viewmail {
+     margin: 0 0 -10px;
+     padding: 0;
+     border: 1px solid #89f;
+}
+
+table#message_full {
+     margin-bottom: -23px;
+}
+
+.iframed #message_full {
+     margin-bottom: -1px;
+}
+
+#message_full tr:last-child {
+     border-bottom: 1px solid #89f;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     background: none;
+     min-width: 16px;
+     min-height: 16px;
+}
+
+input[type="radio"]:hover, input[type="radio"]:focus, input[type="checkbox"]:hover, input[type="checkbox"]:focus {
+     filter: drop-shadow(0 0 3px #89f);
+     box-shadow: inset 0 0 1px 2px #89f;
+     outline: none;
+}
+
+input { /* opera fix */
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-size: 9pt;
+}
+
+textarea {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     font-size: 9pt;
+}
+
+input[type="text"], input[type="password"], textarea {
+     border: 1px solid #bbb;
+     box-shadow: inset 1px 1px 1px #ddd;
+     padding: 4px 5px !important;
+     border-radius: 2px;
+     color: #333;
+}
+
+input[type=submit] {
+     margin: 3px;
+}
+
+input.new_upload, input.delete_attachment {
+     float: right;
+     text-transform: capitalize;
+     margin-right: 0;
+}
+
+@-moz-document url-prefix(http://) {
+button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
+     padding: 0 !important;
+     border: 0 none !important;
+}
+}
+
+button:focus, input[type="submit"]:focus, input[type="reset"]:focus {
+     filter: drop-shadow(0 0 1px #89f);
+}
+
+button, input[type="submit"], input[type="reset"] {
+     padding: 5px;
+     border-radius: 2px;
+     color: #333;
+     border: 1px solid #bbb;
+     box-shadow: inset 0 0 0 1px #fff, 0 0 1px 0 #ddd;
+     background: #eee;
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     outline: none !important;
+     display: inline-block;
+     background-size: 14px 14px, 100% 100% !important;
+     cursor: pointer;
+}
+
+input[type="file"] {
+     padding: 3px 2px;
+}
+
+button:hover, input[type="submit"]:hover, input[type="reset"]:hover,
+button:focus, input[type="submit"]:focus, input[type="reset"]:focus {
+     color: #222;
+     background: #fff;
+     background: linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     border: 1px solid #89f;
+     filter: drop-shadow(0 0 1px #89f);
+}
+
+input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+     box-shadow: inset 0 0 0 1px #89f;
+     box-shadow: inset 0 0 0 1px #89f, 0 0 1px rgba(136, 153, 255, 0.4);
+     color: #000;
+}
+
+button:active, input[type="submit"]:active, input[type="reset"]:active {
+     background: #ddd;
+     box-shadow: inset 3px 3px 3px #999;
+     box-shadow: inset 0 0 0 1px #fff, inset 3px 3px 3px #999;
+     color: #555;
+     border: 1px solid #bbb;
+}
+
+input[disabled][type="submit"], input[disabled][type="submit"]:hover, input[disabled][type="submit"]:active {
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     opacity: 0.6;
+}
+
+input.optbox {
+     vertical-align: middle;
+     background: none;
+}
+
+input, label {
+     cursor: pointer;
+}
+
+input[type="text"], input[type="password"] {
+     cursor: text;
+}
+
+/* illustrated images inc */
+
+input.cancel {
+     background: #eee url(/themes/console/images/buttons/no.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.cancel:hover, input.cancel:focus {
+     background: #fff url(/themes/console/images/buttons/no.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/no.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.clearselection {
+     background: #eee url(/themes/susimail/images/none.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/none.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.clearselection:hover, input.clearselection:focus {
+     background: #fff url(/themes/susimail/images/none.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/none.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.delete, input.delete_attachment, input.really_delete {
+     background: #eee url(/themes/console/images/buttons/delete.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/delete.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.delete:hover, input.delete_attachment:hover, input.really_delete:hover,
+input.delete:focus, input.delete_attachment:focus, input.really_delete:focus {
+     background: #fff url(/themes/console/images/buttons/delete_hover.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+.topbuttons input.delete {
+     margin-left: 0;
+}
+
+input.download {
+     background: #eee url(/themes/console/images/buttons/download.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.download:hover, input.download:focus {
+     background: #fff url(/themes/console/images/buttons/download.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/download.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.offline {
+     background: #eee url(/themes/susimail/images/offline.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/offline.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.offline:hover, input.offline:focus {
+     background: #fff url(/themes/susimail/images/offline_hover.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/offline_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.list {
+     background: #eee url(/themes/susimail/images/folder.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/folder.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.list:hover, input.list:focus {
+     background: #eee url(/themes/susimail/images/folder-open.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/folder-open.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.forward {
+     background: #eee url(/themes/susimail/images/forward.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/forward.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.forward:hover, input.forward:focus {
+     background: #fff url(/themes/susimail/images/forward.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/forward.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.login {
+     background: #eee url(/themes/susimail/images/login.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/login.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.login:hover, input.login:focus {
+     background: #fff url(/themes/susimail/images/login_hover.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/login_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.logout {
+     background: #eee url(/themes/susimail/images/logout.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/logout.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.logout:hover, input.logout:focus {
+     background: #fff url(/themes/susimail/images/logout_hover.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/logout_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.reload, input.refresh {
+     background: #eee url(/themes/console/images/buttons/update.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/update.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.reload:hover, input.refresh:hover, input.reload:focus, input.refresh:focus {
+     background: #eee url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.invertselection {
+     background: #eee url(/themes/susimail/images/selection.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/selection.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.invertselection:hover, input.invertselection:focus {
+     background: #eee url(/themes/susimail/images/selection.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/selection.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.show {
+     background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.show:hover, input.show:focus {
+     background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.markall {
+     background: #eee url(/themes/susimail/images/all.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/all.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.markall:hover, input.markall:focus {
+     background: #fff url(/themes/susimail/images/all.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/all.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.new {
+     background: #eee url(/themes/susimail/images/compose.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/compose.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.new:hover, input.new:focus {
+     background: #fff url(/themes/susimail/images/compose_hover.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/compose_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.reply {
+     background: #eee url(/themes/susimail/images/reply.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/reply.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.reply:hover, input.reply:focus {
+     background: #fff url(/themes/susimail/images/reply.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/reply.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.replyall {
+     background: #eee url(/themes/susimail/images/reply-all.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/reply-all.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.replyall:hover, input.replyall:focus {
+     background: #fff url(/themes/susimail/images/reply-all.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/reply-all.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.setpagesize, input.save {
+     background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.setpagesize:hover, input.save:hover, input.setpagesize:focus, input.save:focus {
+     background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.send {
+     background: #eee url(/themes/susimail/images/send.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/send.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.send:hover, input.send:focus {
+     background: #fff url(/themes/susimail/images/send_hover.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/send_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.configure {
+     background: #eee url(/themes/console/images/buttons/configure.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/configure.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.configure:hover, input.configure:focus {
+     background: #fff url(/themes/console/images/buttons/configure_hover.png) no-repeat 7px center;
+     background: url(/themes/console/images/buttons/configure_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.saveas {
+     background: #eee url(/themes/susimail/images/save.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/save.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.saveas:hover, input.saveas:focus {
+     background: #fff url(/themes/susimail/images/save_hover.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/save_hover.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.new_upload {
+     background: #eee url(/themes/susimail/images/attach.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/attach.png) no-repeat 7px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+input.new_upload:hover, input.new_upload:focus {
+     background: #fff url(/themes/susimail/images/attach.png) no-repeat 7px center;
+     background: url(/themes/susimail/images/attach.png) no-repeat 7px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     padding: 5px 8px 5px 24px;
+}
+
+/* pagenav */
+
+input.firstpage, input[name="firstpage"],
+input.firstpage[disabled]:hover, input[name="firstpage"][disabled]:hover,
+input.firstpage[disabled]:focus, input[name="firstpage"][disabled]:focus {
+     background: #eee url(/themes/susimail/images/first.png) no-repeat center center !important;
+     background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     padding: 5px 14px !important;
+     text-indent: -99999px;
+}
+
+input.firstpage:hover, input[name="firstpage"]:hover,
+input.firstpage:focus, input[name="firstpage"]:focus {
+     background: #fff url(/themes/susimail/images/first.png) no-repeat center center;
+     background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.lastpage, input[name="lastpage"],
+input.lastpage[disabled]:hover, input[name="lastpage"][disabled]:hover,
+input.lastpage[disabled]:focus, input[name="lastpage"][disabled]:focus {
+     background: #eee url(/themes/susimail/images/last.png) no-repeat center center !important;
+     background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     padding: 5px 14px !important;
+     text-indent: -99999px;
+}
+
+input.lastpage:hover, input[name="lastpage"]:hover,
+input.lastpage:focus, input[name="lastpage"]:focus {
+     background: #fff url(/themes/susimail/images/last.png) no-repeat center center;
+     background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.prevpage, input.prev, input[name="prev"], input[name="prevpage"],
+input.prevpage[disabled]:hover, input.prev[disabled]:hover, input[name="prev"][disabled]:hover, input[name="prevpage"][disabled]:hover,
+input.prevpage[disabled]:focus, input.prev[disabled]:focus, input[name="prev"][disabled]:focus, input[name="prevpage"][disabled]:focus {
+     background: #eee url(/themes/susimail/images/previous.png) no-repeat center center;
+     background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     padding: 5px 14px !important;
+     text-indent: -99999px;
+}
+
+input.prevpage:hover, input.prev, input[name="prev"]:hover, input[name="prevpage"]:hover,
+input.prevpage:focus, input.prev, input[name="prev"]:focus, input[name="prevpage"]:focus {
+     background: #fff url(/themes/susimail/images/previous.png) no-repeat center center;
+     background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.nextpage, input.next, input[name="nextpage"], input[name="next"],
+input.nextpage[disabled]:hover, input.next[disabled]:hover, input[name="nextpage"][disabled]:hover, input[name="next"][disabled]:hover,
+input.nextpage[disabled]:focus, input.next[disabled]:focus, input[name="nextpage"][disabled]:focus, input[name="next"][disabled]:focus {
+     background: #eee url(/themes/susimail/images/next.png) no-repeat center center;
+     background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%) !important;
+     padding: 5px 14px !important;
+     text-indent: -99999px;
+}
+
+input.nextpage:hover, input.next:hover, input[name="nextpage"]:hover,
+input.nextpage:focus, input.next:focus, input[name="nextpage"]:focus {
+     background: #fff url(/themes/susimail/images/next.png) no-repeat center center;
+     background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input[disabled] {
+     cursor: default;
+}
+
+#pagenav input[disabled]:hover, #pagenav input[disabled]:active,
+#messagenav input[disabled]:hover, #messagenav input[disabled]:active {
+     border: 1px solid #bbb;
+     box-shadow: inset 0 0 0 1px #fff;
+     filter: none !important;
+}
+
+/* end pagenav */
+
+/* end illustrated images */
+
+div#composemail {
+     text-align: center !important;
+     padding: 10px;
+}
+
+#composemail table {
+     width: auto;
+     margin: auto;
+}
+
+#composemail input {
+     margin-left: 0;
+}
+
+#composemail input[type="file"] {
+     padding: 0;
+}
+
+#mailhead {
+     margin: 0;
+}
+
+#mailhead, #message_full tr:first-child {
+     background: #dde1ff;
+}
+
+#message_full tr:first-child {
+     border-bottom: 1px solid #89f;
+}
+
+#mailhead tr {
+     border: none !important;
+}
+
+#mailhead td:first-child {
+     white-space: nowrap;
+     width: 20px;
+     text-align: right;
+     padding-left: 10px;
+     font-weight: bold;
+}
+
+div#dologin {
+     border: 1px solid #777;
+     padding: 10px 0 0;
+     width: 500px;
+     margin: 60px auto 40px;
+     box-shadow: 0 0 0 1px #fff;
+     background: #fff;
+}
+
+.iframed #dologin {
+     margin: 18px auto 15px;
+}
+
+#dologin input[type="text"] {
+     text-align: left !important;
+     font-weight: normal;
+}
+
+#dologin input[name="user"] {
+     background: #fff url(/themes/console/images/buttons/user.png) 5px center no-repeat;
+     padding: 4px 5px 4px 26px !important;
+}
+
+#dologin input[name="pass"] {
+     background: #fff url(/themes/console/images/buttons/password.png) 5px center no-repeat;
+     padding: 4px 5px 4px 26px !important;
+}
+
+#dologin input[name="host"] {
+     width: calc(65% + 26px) !important;
+}
+
+#dologin table {
+     width: 100%;
+     width: calc(100% - 2px);
+     margin: 0 auto;
+     border-collapse: collapse;
+}
+
+#dologin td {
+     padding: 3px;
+     font-weight: bold !important;
+     color: #333;
+}
+
+#dologin td:first-child {
+     white-space: nowrap;
+     padding-left: 0;
+     width: 120px !important;
+}
+
+#dologin td:last-child {
+     width: auto !important;
+     padding-right: 0;
+}
+
+#dologin td[colspan="2"] {
+     padding: 3px 0;
+}
+
+#dologin tr:last-child td {
+     padding: 3px 0 5px;
+}
+
+#dologin h1 {
+     border-bottom: 1px solid #777;
+     padding: 10px 15px;
+     margin: -10px 0 10px;
+     font-size: 14pt;
+     text-align: left;
+     background: #fff;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background: linear-gradient(to right, #fff 30%, #eff2ff);
+     box-shadow: inset 0 0 0 1px #fff;
+     display: none;
+}
+
+#dologin hr {
+     display: block !important;
+     background: #777;
+     box-shadow: 0 1px 0 1px #fff;
+}
+
+.iframed #dologin h1 {
+     display: block;
+}
+
+.iframed div.footer {
+     margin-top: -10px;
+}
+
+hr {
+     color: #555;
+     background: #555;
+     height: 1px;
+     border: 0 solid #555;
+     width: 100%;
+     margin: 5px 0;
+     text-align: center;
+     display: none;
+}
+
+#composemail td {
+     padding: 3px;
+}
+
+#composemail textarea {
+     width: 665px;
+     min-width: 665px;
+     min-height: 200px;
+     margin-top: 5px;
+}
+
+#composemail input, #composemail textarea {
+     margin-right: 0;
+}
+
+div#pagenav {
+     border-top: 1px solid #89f;
+     padding: 10px 5px 0;
+     font-size: 9.5pt;
+     border-radius: 0 0 4px 4px;
+     margin: 0 -11px !important;
+}
+
+.topbuttons {
+     padding: 6px 0 5px;
+     margin: -1px -11px;
+     background: #fff !important;
+     background: linear-gradient(to bottom, #fff 0%, #eef 100%) !important;
+}
+
+.iframed .topbuttons, .iframed p.error, .iframed p.info {
+     border-left: none;
+     border-right: none;
+}
+
+table#pagenav {
+     width: 100%;
+     margin: 7px auto -3px;
+     border-top: 1px solid #89f;
+}
+
+.bottombuttons br {
+     display: none;
+}
+
+div#prefsave {
+     padding: 5px 0;
+     border-top: 1px solid #89f;
+     margin: 10px -10px -22px;
+     background: #fff;
+}
+
+tr.bottombuttons table#pagenav {
+     width: 100%;
+     margin: 0;
+     border-bottom: 1px solid #555;
+}
+
+table#pagenav td {
+     white-space: nowrap;
+     font-size: 10pt;
+     font-weight: bold;
+     padding: 6px 3px 4px;
+     text-align: center;
+}
+
+table#pagenav td:first-child {
+     text-align: right;
+     width: 49%;
+}
+
+table#pagenav td:last-child {
+     text-align: left;
+     width: 49%;
+}
+
+#pagenav input:disabled {
+     display: inline;
+     opacity: 0.3;
+}
+
+.bottombuttons input:disabled {
+      display: none;
+}
+
+/* responsive layout */
+
+@media screen and (max-width: 1024px) {
+.page {
+     min-width: 600px;
+}
+
+#composemail textarea, #newmail input[type="text"] {
+     min-width: 400px;
+     width: 100% !important;
+}
+}
+
+@media screen and (min-width: 1024px) {
+body, td, textarea, input, div, p.mailbody, p.error {
+     font-size: 10pt !important;
+}
+}
+
+/* end responsive layout */
+
+/* Edge/IE tweaks*/
+
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+/* end Edge/IE tweaks */
+
diff --git a/installer/resources/themes/susimail/dark/images/first.png b/installer/resources/themes/susimail/dark/images/first.png
new file mode 100644
index 0000000000000000000000000000000000000000..d46591f828352be60e61c7e4da5622c3f83536db
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/first.png differ
diff --git a/installer/resources/themes/susimail/dark/images/first_active.png b/installer/resources/themes/susimail/dark/images/first_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..2eefd083d68de32fc17a5b81beb39db11039fbf3
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/first_active.png differ
diff --git a/installer/resources/themes/susimail/dark/images/first_disabled.png b/installer/resources/themes/susimail/dark/images/first_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0072c9e33b618a7ebb57299b44ee7a7b7cf8701
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/first_disabled.png differ
diff --git a/installer/resources/themes/susimail/dark/images/first_hover.png b/installer/resources/themes/susimail/dark/images/first_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..fbef9e8c2e02b61d30beed7755c9e825053ef394
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/first_hover.png differ
diff --git a/installer/resources/themes/susimail/dark/images/hatter_med.png b/installer/resources/themes/susimail/dark/images/hatter_med.png
new file mode 100644
index 0000000000000000000000000000000000000000..18d27ed19ad6bd18d5e6c071b9678bcb73fd3b69
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/hatter_med.png differ
diff --git a/installer/resources/themes/susimail/dark/images/last.png b/installer/resources/themes/susimail/dark/images/last.png
new file mode 100644
index 0000000000000000000000000000000000000000..6c38c49aaeafa5851a529d52854f6045e042d51f
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/last.png differ
diff --git a/installer/resources/themes/susimail/dark/images/last_active.png b/installer/resources/themes/susimail/dark/images/last_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ec74f394cece7aa10564a9e4b462926219ad1e7
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/last_active.png differ
diff --git a/installer/resources/themes/susimail/dark/images/last_disabled.png b/installer/resources/themes/susimail/dark/images/last_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e3958bd388aa721dcb2ebdc0083cddab4f90f64
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/last_disabled.png differ
diff --git a/installer/resources/themes/susimail/dark/images/last_hover.png b/installer/resources/themes/susimail/dark/images/last_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..83790387c0c83b791470a3536841e5b788ba3956
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/last_hover.png differ
diff --git a/installer/resources/themes/susimail/dark/images/mail.png b/installer/resources/themes/susimail/dark/images/mail.png
new file mode 100644
index 0000000000000000000000000000000000000000..24fac2956cb633d5758dacb7a637b11be676c7ee
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/mail.png differ
diff --git a/installer/resources/themes/susimail/dark/images/next.png b/installer/resources/themes/susimail/dark/images/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..f41a92ecb02202980438d6880d54fcda2fd7e954
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/next.png differ
diff --git a/installer/resources/themes/susimail/dark/images/next_active.png b/installer/resources/themes/susimail/dark/images/next_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..4dd21154e954e3ef37b8a6e3a1b309ccd311e361
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/next_active.png differ
diff --git a/installer/resources/themes/susimail/dark/images/next_disabled.png b/installer/resources/themes/susimail/dark/images/next_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..da01cb7ac0c7b37ed0895932825dd212491c1a52
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/next_disabled.png differ
diff --git a/installer/resources/themes/susimail/dark/images/next_hover.png b/installer/resources/themes/susimail/dark/images/next_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f495c13e70d834ccaefe6e9ebd77f3aae783b8e5
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/next_hover.png differ
diff --git a/installer/resources/themes/susimail/dark/images/previous.png b/installer/resources/themes/susimail/dark/images/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..7535a7cf1e952136e2636f20f731f0df8063b167
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/previous.png differ
diff --git a/installer/resources/themes/susimail/dark/images/previous_active.png b/installer/resources/themes/susimail/dark/images/previous_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..65a4253c7ab7db70149e59ebd12470a16c6ad929
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/previous_active.png differ
diff --git a/installer/resources/themes/susimail/dark/images/previous_disabled.png b/installer/resources/themes/susimail/dark/images/previous_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..c49db000f13225e28f396e07b20ffef34cd52a68
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/previous_disabled.png differ
diff --git a/installer/resources/themes/susimail/dark/images/previous_hover.png b/installer/resources/themes/susimail/dark/images/previous_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..4efbdfd8147a1bb7487adc8d95c5e6016af75ebd
Binary files /dev/null and b/installer/resources/themes/susimail/dark/images/previous_hover.png differ
diff --git a/installer/resources/themes/susimail/dark/mobile.css b/installer/resources/themes/susimail/dark/mobile.css
index e30f878be95f39e78bcd818a810d6d1c611e35e3..b98156604a1b60228fa6c666f3fb0bce58524d9e 100644
--- a/installer/resources/themes/susimail/dark/mobile.css
+++ b/installer/resources/themes/susimail/dark/mobile.css
@@ -1,17 +1,126 @@
+/* Susimail Mobile Theme Override "Dark" */
+
+body {
+     margin: 0;
+}
+
+.page {
+     min-width: 400px;
+}
+
+#dologin {
+     width: 500px !important;
+}
+
+#dologin input[type="text"], #dologin input[type="password"] {
+     width: 70% !important;
+}
+
+#pagenav {
+     margin-bottom: -7px !important;
+     border-bottom: 1px solid #494 !important;
+}
+
+div.topbuttons {
+     padding: 6px 0 !important;
+}
+
+.topbuttons input[type="submit"], .topbuttons input[type="reset"] {
+     min-width: 40px !important;
+     padding: 5px !important;
+     margin: 4px 5px !important;
+}
+
+#mailbox th {
+     display: none;
+}
+
 #mailbox tr, #mailbox td {
      display: block;
+     padding: 1px 0;
 }
 
-#mailbox th {
-     position: absolute;
-     top: -9999px;
-     left: -9999px;
+#mailbox td:first-child {
+     float: right;
+     padding-right: 3px;
+}
+
+#mailbox td:last-child {
+     font-style: italic;
+}
+
+#mailbox td[colspan="9"] {
+     display: none;
+}
+
+table#mailbox td[colspan="5"], table#mailbox td[colspan="4"] {
+     background: #000 !important;
+     border: none !important;
+     display: block;
 }
 
-#mailbox .optbox {
-     float: left;
+.list0 td, .list1 td {
+     border: none !important;
 }
 
-div.header, div.footer {
+#mailbox td:nth-child(2), #mailbox td:nth-child(4), #mailbox td:nth-child(6), #mailbox td:nth-child(8) {
      display: none;
 }
+
+input[type="text"], input[type="password"], textarea {
+     width: 90% !important;
+     min-width: 0 !important;
+}
+
+input[name="pagesize"] {
+     width: 40px !important;
+}
+
+input[type="submit"], input.cancel {
+     min-width: 70px !important;
+     margin: 2px 0 3px 3px !important;
+}
+
+#newmail {
+     margin: 0 !important;
+     width: 100% !important;
+}
+
+#newmail td:first-child {
+     width: 10%;
+}
+
+form {
+     line-height: 110% !important;
+}
+
+tr.list0:hover td:first-child, tr.list1:hover td:first-child, tr.list0:hover td:last-child, tr.list1:hover td:last-child {
+     box-shadow: none !important;
+}
+
+.attached img {
+     max-width: 95%;
+     height: auto;
+}
+
+textarea[name="config_text"] {
+     width: 90%;
+}
+
+h3#config {
+     width: 200px;
+     white-space: nowrap;
+}
+
+.header, #footer {
+     display: none;
+}
+
+#mailbox td:nth-child(3) a.linkold::before {
+     content: "From: ";
+}
+
+
+#mailbox td:nth-child(5) a.linkold::before {
+     content: "Subject: ";
+}
diff --git a/installer/resources/themes/susimail/dark/susimail.css b/installer/resources/themes/susimail/dark/susimail.css
index 0d49e6540c7a42e31b1f9f8bfe4eee80935608a6..8619dc6e3b65c9de8638b00f5f7995956889e10d 100644
--- a/installer/resources/themes/susimail/dark/susimail.css
+++ b/installer/resources/themes/susimail/dark/susimail.css
@@ -1,15 +1,34 @@
-/* Susimail dark theme by dr|z3d */
+/* Susimail "Camo" theme (aka "dark") */
+/* Author: dr|z3d */
+/* Thanks to Florian Kuhlmann for the hatface images. [http://www.flickr.com/photos/floriankuhlmann/] */
+/* Droid Sans font family and css3 compliant browser recommended for optimal results */
 
 body {
      background-color: #000;
      color:#ee9;
-     font-family:"Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
-     font-size: 8pt;
+     font-family: "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-size: 9pt;
+     margin: 8px 5px;
 }
 
 body.iframed {
      background: transparent !important;
      margin: 0;
+     padding-top: 0;
+}
+
+::selection {
+     background: #030 !important;
+     color: white;
+}
+
+::-moz-selection {
+     background: #030 !important;
+     color: white;
+}
+
+* {
+     outline: none;
 }
 
 div.header {
@@ -54,21 +73,28 @@ p.text {
      margin-right:10mm;
 }
 
+p.info, p.error {
+     color:#ee9;
+     display: block !important;
+     border: 1px solid #494;
+     margin: 20px 20px 0 !important;
+     padding: 15px 10px 15px 45px;
+     background: #000 url(/themes/console/dark/images/infohelp.png) 10px center no-repeat;
+     background: url(/themes/console/dark/images/infohelp.png) 10px center no-repeat, linear-gradient(to right, #000 0%, #001500 65%, #001800 90%);
+     text-align: left;
+     border-radius: 2px;
+}
+
 p.error {
      color: #f00;
-     background: url("../../console/images/errortriangle.png") no-repeat scroll 20px center #000;
+     background: url(/themes/console/images/info/errortriangle.png) no-repeat scroll 10px center #000;
      border: 1px solid #f00;
-     border-radius: 4px;
+     border-radius: 2px;
      font-weight: bold;
      text-align: justify;
      word-wrap: break-word;
-     padding: 15px 5px 15px 70px !important;
-     margin: 10px 10px 15px;
-     min-height: 30px;
-}
-
-p.info {
-     color:#327BBF;
+     padding-left: 60px !important;
+     display: block !important;
 }
 
 span.coloured {
@@ -80,78 +106,321 @@ p.footer {
      margin-right:10mm;
      font-size:8pt;
      line-height:10pt;
+     display: none;
+}
+
+.footer hr {
+     margin-top: -12px;
+     display: none;
 }
 
 .iframed #footer {
      display: none;
 }
 
-p.mailbody {
-     font: 9pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+p.mailbody, textarea {
+     font: 9pt "Noto Mono", "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
      margin: 0 5px;
      text-align: left;
 }
 
+.header {
+     display: none;
+}
+
 .iframed .header {
      display: none;
 }
 
+div.topbuttons {
+     padding: 7px 0 8px !important;
+     font-weight: bold;
+     border: 1px solid #494;
+     border-bottom: 0 solid;
+     border-radius: 2px 2px 0 0;
+     margin-bottom: -4px;
+     margin-top: -1px;
+     margin: -1px -1px -4px -1px;
+     border-bottom: 1px solid #494;
+     background: #000 url(images/hatter_med.png) left bottom no-repeat;
+     background: url(images/hatter_med.png) left bottom no-repeat, linear-gradient(to bottom, #002000 0%, #000 100%);
+     background-size: auto 95%, 100% 100%;
+}
+
+.iframed .topbuttons {
+/*     border-top: none !important; */
+     margin-top: -1px;
+     border-radius: 0;
+}
+
+div.topbuttons br {
+     margin-bottom: 12px !important;
+}
+
+.topbuttons input.next {
+     margin-bottom: -20px !important;
+}
+
+.bottombuttons br {
+     display: none;
+}
+
+.bottombuttons input:disabled {
+     display: none;
+}
+
+td[colspan="9"] hr {
+     display: none;
+}
 
 .mailbody {
-     display: block !important;
+/*     display: block !important; */
+     padding: 0 10px !important;
 }
 
-.mailbody td {
+table#mailbox {
+     margin-bottom: 0;
 }
 
-p img {
-/*     display: none; */
-     height: 0;
-     width: 0;
-     margin: -20px 0;
+.iframed #mailbox {
+     margin-bottom: -10px;
+}
+
+#mailbox th:first-child {
+     padding: 0 !important;
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+}
+
+#mailbox th:nth-child(2) {
+     background: url(/themes/susimail/images/status.png) center center no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+     background-blend-mode: luminosity, normal;
+}
+
+
+#mailbox th:nth-child(4) {
+     background: url(/susimail/icons/attach.png) center right 5px no-repeat, linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
+}
+
+table#mailbox td[colspan="5"], table#mailbox td[colspan="4"] {
+     border-top: 1px solid #494 !important;
+     padding: 6px 0 2px !important;
+}
+
+table#mailbox td[colspan="5"] {
+     border-bottom: none;
+     padding-left: 6px !important;
+     padding-bottom: 6px !important;
+     background: #000;
+     background: linear-gradient(to bottom, #121 0%, #010 50%, #000 100%);
+}
+
+table#mailbox td[colspan="4"] {
+     padding-right: 6px !important;
+     padding-bottom: 6px !important;
+     border-bottom: none;
+     background: #000;
+     background: linear-gradient(to bottom, #121 0%, #010 50%, #000 100%);
 }
 
-p:first-child {
+table#mailbox td[colspan="5"] br, table#mailbox td[colspan="4"] br {
      display: none;
 }
 
-p.error {
-     display: block !important;
+table#mailbox td[colspan="9"] i {
+     font-size: 10pt;
+}
+
+table#mailbox td:nth-child(2) {
+     text-align: right !important;
+     width: 24px !important;
+}
+
+table#mailbox tr[class^="list"]:hover {
+     cursor: pointer;
+}
+
+#mailbox td#from {
+     white-space: nowrap;
+     width: 100px;
+}
+
+#mailbox td#subject {
+     max-height: 40px;
+     overflow: hidden;
 }
 
-a {
+#message_full td {
+     background: #000;
+}
+
+input.optbox {
+     opacity: 0.8;
+     background: none;
+}
+
+input.optbox:hover {
+     opacity: 1.0;
+     filter: drop-shadow(0 0 3px #f60);
+}
+
+#attachedfile {
+     border-bottom: 1px dotted #151;
+     padding: 5px 5px 5px 8px !important;
+}
+
+td#attachedfile:last-child {
+     padding-left: 10px;
+}
+
+td#deleteattached {
+     padding: 5px 5px 0 !important;
+     text-align: right;
+}
+
+tr.bottombuttons:last-child td {
+     padding-bottom: 20px !important;
+}
+
+a:link {
      color: #f60;
+     color: #5a5;
      text-decoration: none;
      font-weight: bold;
 }
 
-a:hover {
-     text-decoration: underline;
+a:hover, a:visited:hover, a:focus {
+     color: #f60 !important;
+     outline: none;
+}
+
+a:visited {
+     color: #960;
+     color: #272;
 }
 
 td {
      color: #ee9;
      margin: 0 5px;
-     font-size: 8pt;
+     font-size: 9pt;
      padding: 2px;
 }
 
 tr.list0 {
-     background-color: #000;
+     background-color: #000800;
 }
 
 tr.list1 {
      background-color: #010;
 }
 
+/* mailbox display finessing */
+
+tr.list0 td, tr.list1 td {
+     padding: 4px;
+     color: #bb7;
+}
+
+tr.list0:hover td, tr.list1:hover td {
+     color: #ee9;
+}
+
+tr.list0:hover, tr.list1:hover, tr.list0:hover a, tr.list1:hover a {
+     background: #002000;
+     color: #f60;
+}
+
+tr.list0:hover td:nth-child(3) a, tr.list1:hover td:nth-child(3) a, #mailbox td:nth-child(3) a:focus, #mailbox td:nth-child(3) a:focus {
+     color: #ee9 !important;
+}
+
+
+tr.list0:hover td:first-child, tr.list1:hover td:first-child {
+/*     background: url(images/highlight.png) left center repeat-y; */
+      box-shadow: inset 3px 0 0 #900;
+}
+
+tr.list0:hover td:last-child, tr.list1:hover td:last-child {
+      box-shadow: inset -3px 0 0 #900;
+}
+
+.list0 td:first-child, .list1 td:first-child, #mailbox th:first-child {
+     text-align: center !important;
+     width: 16px;
+     padding-left: 8px;
+     padding-right: 8px;
+}
+
+.list0 td:nth-child(2), .list1 td:nth-child(2) {
+     width: 32px;
+     text-align: right;
+}
+
+.list0 td:nth-child(3) a, .list1 td:nth-child(3) a {
+     color: #bb7 !important;
+     font-weight: normal;
+}
+
+.list0 td:nth-child(4), .list1 td:nth-child(4) {
+     min-width: 16px !important;
+     text-align: right;
+}
+
+table[id="mailbox"] tr th:last-child, .list0 td:last-child, .list1 td:last-child {
+     min-width: 70px !important;
+     text-align: right;
+     padding-right: 20px;
+     white-space: nowrap;
+}
+
+table[id="mailbox"] th {
+     font-size: 9pt;
+     text-transform: uppercase !important;
+     padding-left: 3px;
+     text-shadow: 0 1px 1px #000;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-top: none;
+     white-space: nowrap;
+}
+
+table[id="mailbox"] th img {
+     filter: drop-shadow(0 0 1px #f00);
+}
+
+table[id="mailbox"] th img:hover, table[id="mailbox"] th a:focus img {
+     opacity: 1 !important;
+}
+
+#mailbox td:nth-child(5) {
+     text-align: left;
+}
+
+#mailbox .list0 td, #mailbox .list1 td {
+     border-bottom: 1px solid #000;
+}
+
+#mailbox tr.bottombuttons td[colspan="9"] {
+/*     display: none; */
+}
+
+tr.bottombuttons td {
+     padding-left: 0 !important;
+}
+
+/* end mailbox finessing */
+
 table.noborder {
      margin-left: 0;
      margin-top: 0;
      margin-right: 0;
 }
 
+td:first-child {
+     font-weight: bold;
+}
+
 pre {
-     font: 9pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
+     font: 9pt "Noto Mono", "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
      margin-left: 1cm;
      margin-right: 1cm;
 }
@@ -162,6 +431,11 @@ pre {
      padding: 0;
      font-size: 9pt !important;
      text-align: center;
+     min-width: 700px;
+}
+
+.iframed page {
+     margin-top: -20px;
 }
 
 table {
@@ -172,94 +446,98 @@ table {
 th {
      font-size: 9pt;
      font-weight: bold;
-     background: url("../../console/dark/images/header.png") repeat scroll center center #000000;
+     background: #000000 url(../../console/dark/images/header.png) repeat scroll center center;
+     background: linear-gradient(to bottom, #1a261a 0%, #223022 7%, #212f21 9%, #172317 21%, #091109 49%, #050d05 50%, #020602 51%, #010301 53%, #000000 56%, #000000 100%) !important;
      padding: 7px;
      border-bottom: 1px solid #494;
      border-top: 1px solid #494;
 }
 
 form {
-     line-height: 160%
+     line-height: 160%;
+     border-radius: 2px;
+     padding-bottom: 0;
+     border: 1px solid #494;
+     background: #000;
 }
 
-.mailhead {
-     font-size: 9pt;
-     font-weight: bold;
-}
 
-input.cancel, input.clearselection, input.logout {
-     background: #000 url('/themes/console/images/cancel.png') no-repeat 2px center;
-     min-height: 22px;
+.iframed form {
+     border: none;
+     overflow: hidden;
 }
 
-input.delete, input.delete_attachment, input.really_delete {
-     background: #000 url('/themes/console/images/delete.png') no-repeat 2px center;
-     min-height: 22px;
+form table {
+     margin-bottom: 5px;
 }
 
-input.download, input.lastpage {
-     background: #000 url('/themes/console/images/arrow_down.png') no-repeat 2px center;
-     min-height: 22px;
+textarea {
+     background: #000;
+     color: #ee9;
+     border: 1px solid #494;
+     border-radius: 2px;
+     padding: 5px;
 }
+/* compose mail */
 
-input.firstpage {
-     background: #000 url('/themes/console/images/arrow_up.png') no-repeat 2px center;
-     min-height: 22px;
+textarea[name="new_text"] {
+     min-width: 662px;
+     margin: 10px 10px 10px 3px;
+     text-align: left;
 }
 
-input.list, input.offline {
-     background: #000 url('/themes/console/images/folder.png') no-repeat 2px center;
-     min-height: 22px;
+td#addattach {
+     padding: 0 10px 10px !important;
+     border-bottom: 1px solid #131;
 }
 
-input.forward, input.login, input.nextpage, input.send, input.next {
-     background: #000 url('/themes/console/images/arrow_right.png') no-repeat 2px center;
-     min-height: 22px;
+td#attachedfile {
+     padding: 2px 0;
 }
 
-input.invertselection, input.reload, input.refresh {
-     background: #000 url('/themes/console/images/arrow_refresh.png') no-repeat 2px center;
-     min-height: 22px;
+table#mailhead {
+     font-size: 9pt;
+     font-weight: bold;
+     border-bottom: 1px solid #494;
+     border-top: 1px solid #494;
+     background: #010;
+     width: 100%;
+     background: #010;
 }
 
-input.markall, input.show {
-     background: #000 url('/themes/console/images/tick.png') no-repeat 2px center;
-     min-height: 22px;
+#mailhead td {
+     background: #010;
 }
 
-input.new {
-     background: #000 url('/themes/console/images/email.png') no-repeat 2px center;
-     min-height: 22px;
+#mailhead td:first-child {
+     width: 50px;
+     white-space: nowrap;
+     padding-left: 10px;
 }
 
-input.reply, input.replyall {
-     background: #000 url('/themes/console/images/arrow_turn_left.png') no-repeat 2px center;
-     min-height: 22px;
+#mailhead td:last-child {
+     font-weight: normal;
 }
 
-input.prevpage, input.prev {
-     background: #000 url('/themes/console/images/arrow_left.png') no-repeat 2px center;
-     min-height: 22px;
+input, label {
+     cursor: pointer;
 }
-
-input.send, input.setpagesize, input.save {
-     background: #000 url('/themes/console/images/accept.png') no-repeat 2px center;
-     min-height: 22px;
+input[type="file"] {
+     border: none !important;
+     padding: 0 !important;
+     margin-left: 0;
 }
 
-input.configure {
-     background: #000 url('/susimail/icons/wrench.png') no-repeat 2px center;
-     min-height: 22px;
+input[type="file"]:hover, input[type="file"]:focus {
+     color: #f60;
 }
 
-input.saveas {
-     background: #000 url('/susimail/icons/drive_edit.png') no-repeat 2px center;
-     min-height: 22px;
+input.new_upload {
+     float: right;
 }
 
-input[type=file], input.new_upload {
-     background: #000 url('/themes/console/images/add.png') no-repeat 2px center;
-     min-height: 22px;
+* {
+     outline: none;
 }
 
 input {
@@ -267,55 +545,532 @@ input {
      font-weight: bold;
      text-align: left;
      padding: 2px 2px 3px !important;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
+     border-radius: 2px;
      border: 1px solid #494;
-     background: #000 none !important;      
      color: #494;
-     margin: 2px 4px 2px 0;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     margin: 3px;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif;
      min-width: 64px !important;
 }
 
+input.optbox {
+     min-width: 16px !important;
+     vertical-align: middle;
+}
+
+input[type="checkbox"], input[type="radio"] {
+     background: none;
+     min-width: 16px;
+     min-height: 16px;
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%); /* colorize radios and checkboxes */
+}
+
+input[type="checkbox"]:hover, input[type="radio"]:hover, input[type="checkbox"]:focus, input[type="radio"]:focus {
+     filter: invert(100%) sepia(100%) hue-rotate(70deg) saturate(200%) drop-shadow(0 0 3px #f60);
+}
+
+input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {
+     border: none;
+     outline: none;
+}
+
 input[type=submit], input.cancel {
      color: #494;
      background: #000;
      border: 1px outset #191;
-     box-shadow: 0 1px 1px 0 #119911 inset;
-     font: bold 8pt "Lucida Sans Unicode","Bitstream Vera Sans",Verdana,Tahoma,Helvetica,sans-serif;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", Lato, "Segoe UI", Verdana, Helvetica, sans-serif;
      text-align: center;
-     min-height: 22px !important;
+     padding: 5px 8px !important;
+     min-width: 95px !important;
+     margin: 4px 5px;
+     filter: drop-shadow(0 0 1px #000);
 }
 
-input[type=submit]:hover, input.cancel:hover {
+input[type=submit]:hover, input.cancel:hover, input[type=submit]:focus, input.cancel:focus {
      color: #f60;
      background: #000;
      border: 1px solid #f60;
-     box-shadow: 0 1px 1px 0 #ee9 inset;
-     -moz-box-shadow: 0 1px 1px 0 #ee9 inset;
-     -khtml-box-shadow: 0 1px 1px 0 #ee9 inset;
+     box-shadow: inset 0 1px 1px 0 #ee9 ;
 }
 
 input[type=submit]:active, input.cancel:active {
-     border: 1px inset #f60;
+     border: 1px solid #f60;
      background: #f60 !important;
      color: #EE9 !important;
-     -moz-box-shadow: inset 0px 0px 0px 0px #f60;
-     -khtml-box-shadow: inset 0px 0px 0px 0px #f60;
-     box-shadow: inset 0px 0px 0px 0px #f60;
+     box-shadow: inset 3px 3px 3px #000;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000;
+     outline: none;
 }
 
-input[type=text] {
-     color: #ee9;     
+#dologin input:disabled, #dologin input:disabled:hover, #dologin input:disabled:active {
+     border: none;
+     color: #ff0;
+     margin: 2px 0;
+     padding-top: 3px;
+     box-shadow: none;
+     background: none !important;
+     text-align: left !important;
+     cursor: default;
 }
 
-input:disabled, input:disabled:hover, input:disabled:active {
-     border: none;
+input[name="user"], input[name="pass"] {
+     border: 1px solid #363;
+     background: #000;
+}
+
+input[name="user"]:focus, input[name="pass"]:focus, input[type="text"]:focus, textarea:focus {
+     border: 1px solid #494;
      color: #ee9;
-     margin-left: -2px;
-     box-shadow: none;
-     -moz-box-shadow: none;
-     -khtml-box-shadow: none;
+}
+
+input[name="host"], input[name="pop3"], input[name="smtp"] {
+    display: inline !important;
+    margin-top: 3px !important;
+    font-family: "Noto Mono", "Droid Sans Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+    color: #ff0;
+    background: none !important;
+    border-radius: 0;
+}
+
+input[type="text"], input[type="password"], textarea {
+     color: #bb7;
+     background: #000;
+     cursor: text;
+     padding: 4px !important;
+     border: 1px solid #363;
+     background: linear-gradient(to bottom, #000 0%, #010 100%) !important;
+     box-shadow: inset 0 0 3px 3px #000;
+     font-size: 9pt;
+}
+
+input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+     color: #ee9 !important;
      background: #000 !important;
+     filter: drop-shadow(0 0 1px #880);
+     transition: ease filter 0.3s 0s;
 }
+
+input[name="user"] {
+     background: url(/themes/console/images/buttons/user.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%) !important;
+     padding: 5px 5px 5px 25px !important;
+}
+
+input[name="user"]:focus {
+     background: #000 url(/themes/console/images/buttons/user.png) 5px center no-repeat !important;
+}
+
+input[name="pass"] {
+     background: url(/themes/console/images/buttons/password.png) 5px center no-repeat, linear-gradient(to bottom, #000 0%, #010 100%) !important;
+     padding: 5px 5px 5px 25px !important;
+}
+
+input[name="pass"]:focus {
+     background: #000 url(/themes/console/images/buttons/password.png) 5px center no-repeat !important;
+}
+
+input.delete {
+     margin-left: 5px;
+}
+
+
+input[type="submit"], input[type="reset"], select, button { /* webkit/blink fix for oversaturated colors */
+     border: 1px solid #8b8;
+     border-bottom: 1px solid #171;
+     border-right: 1px solid #171;
+     background: linear-gradient(to bottom, #020 0%, #000 20%, #000 80%, #010 100%);
+}
+
+.page td[colspan="2"] {
+     text-align: left;
+     padding: 0 0 10px 0;
+/*     padding-left: 13%;*/
+}
+
+.page td[colspan="2"] hr {
+     display: none;
+}
+
+/* login + misc mods */
+
+div.notifications {
+     text-align: center;
+     padding: 0 0 20px;
+}
+
+div#dologin {
+     border: 1px solid #494;
+     margin: 20px auto;
+     width: 600px;
+     padding: 0 0 10px;
+     background: #001000;
+     border-radius: 2px;
+     background: linear-gradient(to bottom, #000 0%, #010 50%, #010 100%);
+     background: url(images/hatter_med.png) right bottom no-repeat, linear-gradient(to bottom, #000 0%, #010 50%, #010 100%);
+     box-shadow: inset 0 0 1px 2px #020;
+
+}
+
+#dologin h1 {
+     border: 1px solid #494;
+     padding: 10px 10px 10px 48px;
+     margin: -1px -1px 15px -1px;
+     border-radius: 2px 2px 0 0;
+     text-transform: uppercase;
+     font-size: 14pt;
+     letter-spacing:0.08em;
+     word-spacing: 0.1em;
+     text-align:left;
+     background: #002000 url(images/mail.png) 8px center no-repeat;
+     background: url(images/mail.png) 8px center no-repeat, linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%);
+     text-shadow: 0 1px 1px #000;
+     box-shadow: inset 0 0 1px 2px #020;
+}
+
+#dologin table {
+     width: 100%;
+     margin-bottom: -9px;
+     border-collapse: collapse;
+     border-spacing: 0 !important;
+}
+
+#dologin td {
+     padding: 1px 2px !important;
+}
+
+#dologin td:first-child {
+     width: 29%;
+     white-space: nowrap;
+}
+
+#dologin td:last-child {
+     width: 71%;
+     white-space: nowrap;
+}
+
+#dologin td[colspan="2"] {
+     text-align: center;
+     padding: 3px 3px 5px !important;
+}
+
+#dologin hr {
+     display: block;
+     background: #030;
+     box-shadow: 0 1px 1px #000;
+     margin: 5px 0;
+     opacity: 0.5;
+}
+
+div.notifications + div#dologin {
+     margin-top: 0;
+}
+
+div#composemail {
+     text-align: center !important;
+     padding: 50px;
+}
+
+#composemail table {
+     width: auto;
+     margin: auto;
+}
+
+#composemail table td {
+     padding: 2px 5px;
+}
+
+h3#config {
+     border: 1px solid #494;
+     padding: 5px;
+     margin: 3px auto 18px auto;
+     width: 400px;
+     font-size: 10pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background: #001700;
+     border-radius: 0 0 2px 2px;
+     background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important;
+}
+
+textarea[name="config_text"] {
+     resize: none;
+}
+
+#message_full tr:first-child td {
+     padding-bottom: 5px;
+}
+
+p.mailbody {
+     margin: 0;
+     background: #000;
+     padding: 5px 20px 20px !important;
+}
+
+.mailbody + hr, .attached + hr {
+     display: none;
+}
+
+tr.mailbody:nth-child(n+3), tr.mailbody:nth-child(n+3) td {
+     background: #010;
+     border-top: 1px solid #494;
+     padding: 5px;
+}
+
+tr.mailbody:last-child td {
+     border-bottom: 1px solid #494;
+}
+
+div.attached {
+     margin: 0 -1px -1px;
+     border-radius: 0 0 2px 2px;
+     padding: 10px 10px 10px 30px !important;
+     background: url(/themes/susimail/images/attach.png) 10px center no-repeat;
+}
+
+.attached img {
+     border: 1px solid #494;
+     border-radius: 2px;
+     padding: 2px;
+     background: #010;
+}
+
+.attached p.mailbody {
+     padding: 5px !important;
+     background: none;
+}
+
+div#emptymailbox {
+     padding: 20px 10px;
+}
+
+/* pagenav */
+
+table#pagenav {
+     width: 100%;
+     margin: 7px auto -3px;
+     border-top: 1px solid #494;
+     background: #000;
+     background: linear-gradient(to bottom, #001000 0%, #001900 50%, #000 51%, #000 100%) !important;
+}
+
+table#pagenav tr:hover td {
+     color: #ee9;
+}
+
+table#pagenav td {
+     white-space: nowrap;
+     font-size: 10.5pt;
+     font-weight: bold;
+     letter-spacing: 0.1em;
+     word-spacing: 0.1em;
+     padding: 3px 5px;
+     text-align: center;
+     color: #bb7;
+}
+
+table#pagenav td:first-child {
+     text-align: right;
+     width: 46%;
+}
+
+table#pagenav td:nth-child(2) {
+     text-align: center !important;
+     width: 4%;
+     white-space: nowrap;
+}
+
+table#pagenav td:last-child {
+     text-align: left;
+     width: 46%;
+}
+
+.topbuttons table#pagenav {
+     margin-bottom: -8px;
+}
+
+.bottombuttons table#pagenav {
+     margin-top: -2px;
+}
+
+div#prefsave { /* config page button positioning */
+     margin: 20px 0 10px;
+     border-top: 1px solid #494;
+     padding-top: 10px;
+}
+
+.iframed #prefsave {
+     margin-bottom: 0;
+     padding-top: 15px;
+}
+
+#prefsave input[type="submit"] {
+     min-width: 124px !important;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {  /* webkit fixes */
+table#mailbox {
+     margin-top: 1px;
+}
+
+div#prefsave {
+     padding-bottom: 5px;
+     border-bottom: 1px solid #494;
+}
+
+.iframed .page {
+     border-bottom: 1px solid #494;
+}
+}
+
+#pagenav input:disabled, #pagenav input:disabled:hover, #pagenav input:disabled:active {
+     border: 1px solid #444 !important;
+     cursor: default;
+     opacity: 0.5;
+     box-shadow: none !important;
+     background: #f00 !important;
+     display: inline;
+}
+
+#pagenav input[type="submit"] {
+     font-size: 0;
+     width: 24px !important;
+     min-width: 24px !important;
+     height: 24px;
+     margin: 3px !important;
+}
+
+#pagenav input[type="submit"]::-moz-focus-inner {
+     outline: none;
+     border: none;
+}
+
+#pagenav input.firstpage {
+     background: #000 url(images/first.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.firstpage:hover, #pagenav input.firstpage:focus {
+     background: #000 url(images/first_hover.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+     border: 1px solid #f60;
+}
+
+#pagenav input.firstpage:active {
+     background: #f60 url(images/first_active.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input[name="firstpage"]:disabled {
+     background: #000 url(images/first_disabled.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.prevpage {
+     background: #000 url(images/previous.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.prevpage:hover, #pagenav input.prevpage:focus {
+     background: #000 url(images/previous_hover.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+     border: 1px solid #f60;
+}
+
+#pagenav input.prevpage:active {
+     background: #f60 url(images/previous_active.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input[name="prevpage"]:disabled {
+     background: #000 url(images/previous_disabled.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.nextpage {
+     background: #000 url(images/next.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.nextpage:hover, #pagenav input.nextpage:focus {
+     background: #000 url(images/next_hover.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+     border: 1px solid #f60;
+}
+
+#pagenav input.nextpage:active {
+     background: #f60 url(images/next_active.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input[name="nextpage"]:disabled {
+     background: #000 url(images/next_disabled.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.lastpage {
+     background: #000 url(images/last.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.lastpage:hover, #pagenav input.lastpage:focus {
+     background: #000 url(images/last_hover.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+     border: 1px solid #f60;
+}
+
+#pagenav input.lastpage:active {
+     background: #f60 url(images/last_active.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input[name="lastpage"]:disabled {
+     background: #000 url(images/last_disabled.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+/* end pagenav */
+
+/* responsive layout */
+
+@media screen and (min-width: 1024px) {
+body, td, textarea, div, p.mailbody {
+     font-size: 10pt !important;
+}
+
+#pagenav input {
+     font-size: 0 !important;
+}
+
+.topbuttons input[type="submit"], .topbuttons input[type="reset"] {
+     margin: 3px 5px !important;
+}
+}
+
+@media screen and (min-width: 1500px) {
+input, textarea {
+     font-size: 10pt !important;
+}
+
+select, button, input[type="submit"], input[type="reset"] {
+     font-size: 9pt;
+}
+
+textarea[name="new_text"] {
+     width: 660px;
+}
+}
+
+@media screen and (max-width: 600px) {
+.topbuttons input[type="submit"], .topbuttons input[type="reset"] {
+     min-width: 50px !important;
+     margin: 3px 5px !important;
+}
+}
+
+/* end responsive layout */
+
+/* MS Edge fix */
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
diff --git a/installer/resources/themes/susimail/images/all.png b/installer/resources/themes/susimail/images/all.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd60d1952ffb0ab72f21fea9b4d9edd490b1cade
Binary files /dev/null and b/installer/resources/themes/susimail/images/all.png differ
diff --git a/installer/resources/themes/susimail/images/attach.png b/installer/resources/themes/susimail/images/attach.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ddc762d34b2fbfc3cd5bc9235c180914f55cac7
Binary files /dev/null and b/installer/resources/themes/susimail/images/attach.png differ
diff --git a/installer/resources/themes/susimail/images/compose.png b/installer/resources/themes/susimail/images/compose.png
new file mode 100644
index 0000000000000000000000000000000000000000..be6ed904f7c50712b536d1c017acb3a88b1936cb
Binary files /dev/null and b/installer/resources/themes/susimail/images/compose.png differ
diff --git a/installer/resources/themes/susimail/images/compose_hover.png b/installer/resources/themes/susimail/images/compose_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..cece453bed0790755600163a211625a46e1192a2
Binary files /dev/null and b/installer/resources/themes/susimail/images/compose_hover.png differ
diff --git a/installer/resources/themes/susimail/images/first.png b/installer/resources/themes/susimail/images/first.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1753b836326cc4f5343abde49a8ed38489fb28f
Binary files /dev/null and b/installer/resources/themes/susimail/images/first.png differ
diff --git a/installer/resources/themes/susimail/images/folder-open.png b/installer/resources/themes/susimail/images/folder-open.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c65bd9895f4126cc1cd567585add4a72e4292cb
Binary files /dev/null and b/installer/resources/themes/susimail/images/folder-open.png differ
diff --git a/installer/resources/themes/susimail/images/folder.png b/installer/resources/themes/susimail/images/folder.png
new file mode 100644
index 0000000000000000000000000000000000000000..069ddf2d1560bdf9b736786a696e61b4b9a9c46d
Binary files /dev/null and b/installer/resources/themes/susimail/images/folder.png differ
diff --git a/installer/resources/themes/susimail/images/forward.png b/installer/resources/themes/susimail/images/forward.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e171209a666174c601e176121728e4d6d80219c
Binary files /dev/null and b/installer/resources/themes/susimail/images/forward.png differ
diff --git a/installer/resources/themes/susimail/images/last.png b/installer/resources/themes/susimail/images/last.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f9ff8b1d564f8b3534390cdf64e2d493759432f
Binary files /dev/null and b/installer/resources/themes/susimail/images/last.png differ
diff --git a/installer/resources/themes/susimail/images/login.png b/installer/resources/themes/susimail/images/login.png
new file mode 100644
index 0000000000000000000000000000000000000000..35c182de1ae36b2a01f1ab9c7f724d8b5812c164
Binary files /dev/null and b/installer/resources/themes/susimail/images/login.png differ
diff --git a/installer/resources/themes/susimail/images/login_hover.png b/installer/resources/themes/susimail/images/login_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..aec67022bf4f8d30ed65ed298709be71a9880736
Binary files /dev/null and b/installer/resources/themes/susimail/images/login_hover.png differ
diff --git a/installer/resources/themes/susimail/images/logout.png b/installer/resources/themes/susimail/images/logout.png
new file mode 100644
index 0000000000000000000000000000000000000000..72cb8c10681b7ae3301b639227ea802cb33634f3
Binary files /dev/null and b/installer/resources/themes/susimail/images/logout.png differ
diff --git a/installer/resources/themes/susimail/images/logout_hover.png b/installer/resources/themes/susimail/images/logout_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..76e246dbbde5a90e822faf35543d6ed0cc57513e
Binary files /dev/null and b/installer/resources/themes/susimail/images/logout_hover.png differ
diff --git a/installer/resources/themes/susimail/images/next.png b/installer/resources/themes/susimail/images/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..60aab67f6024c84a824493bfb07c8f5f16c5c63e
Binary files /dev/null and b/installer/resources/themes/susimail/images/next.png differ
diff --git a/installer/resources/themes/susimail/images/none.png b/installer/resources/themes/susimail/images/none.png
new file mode 100644
index 0000000000000000000000000000000000000000..c17045a61d8f5111d9b8101489bc185513a6d90a
Binary files /dev/null and b/installer/resources/themes/susimail/images/none.png differ
diff --git a/installer/resources/themes/susimail/images/offline.png b/installer/resources/themes/susimail/images/offline.png
new file mode 100644
index 0000000000000000000000000000000000000000..9399d3923de93b1208faaf33895745c85e710835
Binary files /dev/null and b/installer/resources/themes/susimail/images/offline.png differ
diff --git a/installer/resources/themes/susimail/images/offline_hover.png b/installer/resources/themes/susimail/images/offline_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..159b28ffd7fab29298915f540fc2dfd3c89c05ff
Binary files /dev/null and b/installer/resources/themes/susimail/images/offline_hover.png differ
diff --git a/installer/resources/themes/susimail/images/previous.png b/installer/resources/themes/susimail/images/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4c29b07dc0a76b29f8407e9a30f8a9d746a317d
Binary files /dev/null and b/installer/resources/themes/susimail/images/previous.png differ
diff --git a/installer/resources/themes/susimail/images/reply-all.png b/installer/resources/themes/susimail/images/reply-all.png
new file mode 100644
index 0000000000000000000000000000000000000000..edaa0935115ad083ddf0c0f1ae9e378ddd56f431
Binary files /dev/null and b/installer/resources/themes/susimail/images/reply-all.png differ
diff --git a/installer/resources/themes/susimail/images/reply.png b/installer/resources/themes/susimail/images/reply.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1d29d305e829f1493a55dc5f2e4e9409b90ea7f
Binary files /dev/null and b/installer/resources/themes/susimail/images/reply.png differ
diff --git a/installer/resources/themes/susimail/images/save.png b/installer/resources/themes/susimail/images/save.png
new file mode 100644
index 0000000000000000000000000000000000000000..9a89d64ff4841c8c5c04e87201238f62899d1fc5
Binary files /dev/null and b/installer/resources/themes/susimail/images/save.png differ
diff --git a/installer/resources/themes/susimail/images/save_hover.png b/installer/resources/themes/susimail/images/save_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..37cbf99819e9066f828f88b57410068bf4489a3c
Binary files /dev/null and b/installer/resources/themes/susimail/images/save_hover.png differ
diff --git a/installer/resources/themes/susimail/images/selection.png b/installer/resources/themes/susimail/images/selection.png
new file mode 100644
index 0000000000000000000000000000000000000000..eec5502df264d374fa78c471ff58e21dfe759ac3
Binary files /dev/null and b/installer/resources/themes/susimail/images/selection.png differ
diff --git a/installer/resources/themes/susimail/images/send.png b/installer/resources/themes/susimail/images/send.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca632c4efefc0e6b10d9c9018e6f76ce85cdcdd5
Binary files /dev/null and b/installer/resources/themes/susimail/images/send.png differ
diff --git a/installer/resources/themes/susimail/images/send_hover.png b/installer/resources/themes/susimail/images/send_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..563c25cead30ac0fd4815882618735a6f769eb68
Binary files /dev/null and b/installer/resources/themes/susimail/images/send_hover.png differ
diff --git a/installer/resources/themes/susimail/images/status.png b/installer/resources/themes/susimail/images/status.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a79762acfdd3309a7d59f64e76b3e30d01afdff
Binary files /dev/null and b/installer/resources/themes/susimail/images/status.png differ
diff --git a/installer/resources/themes/susimail/images/susimail.png b/installer/resources/themes/susimail/images/susimail.png
new file mode 100644
index 0000000000000000000000000000000000000000..5317f71ca29598f96d9ce9411d2751770115c836
Binary files /dev/null and b/installer/resources/themes/susimail/images/susimail.png differ
diff --git a/installer/resources/themes/susimail/light/images/3down.png b/installer/resources/themes/susimail/light/images/3down.png
index 885193e242c6bcf8864821e01e15196dd67f0745..06f22df269e5892eb2e93128e6de602f35359ffb 100644
Binary files a/installer/resources/themes/susimail/light/images/3down.png and b/installer/resources/themes/susimail/light/images/3down.png differ
diff --git a/installer/resources/themes/susimail/light/images/3up.png b/installer/resources/themes/susimail/light/images/3up.png
index 62ac7149437e6221f70b45ab787602403d610096..c99a3d20cd8a441e8dce0b157a952e7c60071a7e 100644
Binary files a/installer/resources/themes/susimail/light/images/3up.png and b/installer/resources/themes/susimail/light/images/3up.png differ
diff --git a/installer/resources/themes/susimail/light/images/susimail.png b/installer/resources/themes/susimail/light/images/susimail.png
deleted file mode 100644
index c7de5f0f01a89d3c1775ad7bea14a51874ea9970..0000000000000000000000000000000000000000
Binary files a/installer/resources/themes/susimail/light/images/susimail.png and /dev/null differ
diff --git a/installer/resources/themes/susimail/light/mobile.css b/installer/resources/themes/susimail/light/mobile.css
index e30f878be95f39e78bcd818a810d6d1c611e35e3..40204754004dbfd9774c66c8303cb4bcd78c21a1 100644
--- a/installer/resources/themes/susimail/light/mobile.css
+++ b/installer/resources/themes/susimail/light/mobile.css
@@ -1,17 +1,27 @@
-#mailbox tr, #mailbox td {
-     display: block;
+/* Susimail Mobile Theme Override "Light" */
+
+body {
+     margin: 0;
+}
+
+.page {
+     min-width: 560px;
+     padding: 5px 5px 0 !important;
+     border-radius: 0;
 }
 
-#mailbox th {
-     position: absolute;
-     top: -9999px;
-     left: -9999px;
+form {
+     margin-bottom: 5px;
 }
 
-#mailbox .optbox {
-     float: left;
+#dologin {
+     width: 500px !important;
+}
+
+#mailbox td:nth-child(6), #mailbox th:nth-child(6), #mailbox td:nth-child(8), #mailbox th:nth-child(8) {
+     display: none;
 }
 
-div.header, div.footer {
+.header, .footer {
      display: none;
 }
diff --git a/installer/resources/themes/susimail/light/susimail.css b/installer/resources/themes/susimail/light/susimail.css
index df3d749fa281410a7243bdc9577ed3af7d0bf9a6..574ffd8cba32111d09088d231e4107e03ac54b2a 100644
--- a/installer/resources/themes/susimail/light/susimail.css
+++ b/installer/resources/themes/susimail/light/susimail.css
@@ -1,136 +1,216 @@
+/* Susimail "Light" theme */
+/* Codename: "Corporat" */
+/* Author: dr|z3d */
+
+body {
+     color: #333;
+     font-family: "Droid Sans", "NotoSans", Ubuntu, "Bitstream Vera Sans", "Segoe UI", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     font-size: 9pt;
+     background: #a4a4cb url(/themes/console/light/images/tile2.png);
+}
+
+/* preload button mouseovers */
 body {
-     background-color: #eef;
-     color:#001;
-     font-family:"Lucida Sans Unicode", "Bitstream Vera Sans", Verdana, Tahoma, Helvetica, sans-serif;
+     background: url(/themes/console/light/images/tile2.png),
+     url(/themes/susimail/images/compose_hover.png) no-repeat,
+     url(/themes/susimail/images/login_hover.png) no-repeat,
+     url(/themes/susimail/images/logout_hover.png) no-repeat,
+     url(/themes/susimail/images/offline_hover.png) no-repeat,
+     url(/themes/susimail/images/save_hover.png) no-repeat,
+     url(/themes/susimail/images/send_hover.png) no-repeat,
+     url(/themes/console/images/buttons/configure_hover.png),
+     url(/themes/console/images/buttons/delete_hover.png),
+     url(/themes/console/images/buttons/update_hover.png), #a4a4cb !important;
+     background-size: 32px 32px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
 }
 
 body.iframed {
-     background: transparent !important;
+     background: transparent url(/themes/console/images/transparent.gif) !important;
      margin: 5px 0 0 0;
 }
 
-div.header {
-     padding: 8px 5px 12px 5px;
+body.iframed {
+     background: url(/themes/console/images/transparent.gif),
+     url(/themes/susimail/images/compose_hover.png) no-repeat,
+     url(/themes/susimail/images/login_hover.png) no-repeat,
+     url(/themes/susimail/images/logout_hover.png) no-repeat,
+     url(/themes/susimail/images/offline_hover.png) no-repeat,
+     url(/themes/susimail/images/save_hover.png) no-repeat,
+     url(/themes/susimail/images/send_hover.png) no-repeat,
+     url(/themes/console/images/buttons/configure_hover.png),
+     url(/themes/console/images/buttons/delete_hover.png),
+     url(/themes/console/images/buttons/update_hover.png), transparent !important;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+}
+
+* {
+     outline: none;
 }
 
 li {
-     color:#001;
-     line-height:12pt;
+     color: #333;
+     line-height: 12pt;
      font-size: 8.5pt;
-     margin-left:5mm;
-     margin-right:5mm;
+     margin-left: 5px;
+     margin-right: 5px;
 }
 
 p {
-     color:#001;
-     line-height:12pt;
-     margin-left:5mm;
-     margin-right:5mm;
-     font-size:8.5pt;
+     color: #333;
+     margin-left: 15px;
+     margin-right: 15px;
+     font-size: 8.5pt;
 }
 
 p.hl {
-     font-size:12pt;
-     letter-spacing:2pt;
-     line-height:18pt;
-     font-weight:bold;
+     font-size: 12pt;
+     letter-spacing: 2pt;
+     line-height: 18pt;
+     font-weight :bold;
 }
 
 p.text {
-     margin-left:10mm;
-     margin-right:10mm;
+     margin-left: 10px;
+     margin-right: 10px;
 }
 
 p.error {
-     color:#ff0000;
+     color: #f00;
+     font-size: 10pt;
 }
 
 p.info {
-     color:#327BBF;
+     color: #030;
+     font-size: 10pt;
 }
 
-span.coloured {
-     color:#327BBF;
+tr.mailbody, #message_full tr:first-child {
+     box-shadow: inset 0 0 0 1px #fff;
 }
 
-p.footer {
-     margin-left:10mm;
-     margin-right:10mm;
-     font-size:8pt;
-     line-height:10pt;
+#mailhead tr {
+     box-shadow: none !important;
 }
 
-.iframed .footer {
-     display: none;
+tr.mailbody td {
+     word-break: break-all;
+     word-wrap: break-word;
+     width: 100%;
+     padding: 0;
 }
 
-p.mailbody {
-     font: 10pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     margin-left:1cm;
-     margin-right:1cm;
-      text-align: left;
+.mailbody p.info {
+     margin: -32px 0 0;
+     display: block;
+     border: 1px solid #447;
+     border-radius: 2px;
+     box-shadow: inset 0 0 1px #f00;
+     padding: 20px 10px;
+     width: calc(100% - 40px);
+     background: #ffe;
+     color: #900;
+     font-weight: bold;
+     filter: drop-shadow(0 0 1px #999);
+}
+
+span.coloured {
+     color: #327BBF;
 }
 
-.iframed .header {
+div.header, .iframed .header {
      display: none;
 }
 
-.iframed p:first-child {
+div.footer {
+     border-top: none;
+     margin: -14px 0 10px;
+     border: 1px solid #7778bf;
+     background: #eef;
+     background: linear-gradient(to right, rgba(232,232,255,0.3) 35%, #fff 50%, rgba(232,232,255,0.3) 65%), repeating-linear-gradient(to bottom, #fff 1px, #ddf 2px, #fff 3px);
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+p.footer {
+     margin: 0;
+     font-size: 8pt;
+     line-height: 10pt;
+     text-align: center;
+     padding: 3px;
+     color: #449 !important;
+     text-shadow: 0 0 5px #fff;
+}
+
+.iframed .footer {
      display: none;
 }
 
-/*
-.mailbody {
-     display: block !important;
+p.mailbody {
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     text-align: left;
+     padding: 0 0 15px;
+     margin-top: 0;
+     line-height: 130%;
 }
-*/
 
 a {
-     color:#327BBF;
+     color: #327bbf;
      text-decoration:none;
      font-weight: bold;
+     outline: none;
 }
 
 a.linkspam {
-     color:#927B40;
+     color: #927b40;
 }
 
 a.linknew {
-     color:#327B40;
+     color: #327b40;
 }
 
 a.linkold {
-     color:#327BBF;
+     color: #327bbf;
 }
 
-a:hover {
-     text-decoration:underline;
+a:hover, a:focus, tr:hover td[onclick] a {
+     text-decoration: none;
+     color: #f60 !important;
 }
 
-td {
+a:active {
+     color: #f30;
+}
 
-     color:#001;
-     line-height:12pt;
-     margin-left:5mm;
-     margin-right:5mm;
+a:visited {
+     color: #6b97bf;
+}
+
+td {
+     color: #333;
      font-size:9pt;
      padding: 1px 3px;
 }
 
+td[onclick] {
+     cursor: pointer;
+}
+
 tr.list0 {
-     background-color:#ececec;
+     background: #eef;
+     background: repeating-linear-gradient(45deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff;
 }
 
 tr.list1 {
-     background-color:#f4f4f4;
+     background: #f7f8ff;
+     background: repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(240, 240, 255, 0.3) 3px, #fff 5px), #fff;
 }
 
-tr.list0:hover {
-     background-color:#e0e0f4;
+tr.list0:hover, tr.list1:hover {
+     background-color: #ffd;
+     box-shadow: inset 0 0 0 1px #fff;
 }
 
-tr.list1:hover {
-     background-color:#e0e0f4;
+_:-ms-lang(x), tr.list0:hover, tr.list1:hover {
+     box-shadow: none !important;
 }
 
 tr.list0 a:link {
@@ -141,40 +221,37 @@ tr.list1 a:link {
      text-decoration: none;
 }
 
-.iframed tr.list1 {
-     background-color:#f0f0f0;
-}
-
 table.noborder {
-     margin-left:0mm;
-     margin-top:0mm;
-     margin-right:0mm;
+     margin-left: 0;
+     margin-top: 0;
+     margin-right: 0;
 }
 
 pre {
-     font: 8.5pt "Lucida Console", "DejaVu Sans Mono", Courier, mono;
-     margin-left:1cm;
-     margin-right:1cm;
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+     margin-left: 10px;
+     margin-right: 10px;
 }
 
 .page {
      background-color: #fff;
-     color:#001;
-     margin: -20px 0 0 0;
-     padding: 10px;
-     -moz-border-radius: 4px;
-     -khtml-border-radius: 4px;
-     border-radius: 4px;
-/*     border: 1px solid #001; */
+     color: #333;
+     margin: 0;
+     padding: 10px 10px 0;
+     border-radius: 2px 2px 0 0;
      font-size: 8.5pt !important;
      line-height: 160% !important;
-     -moz-box-shadow: inset 0px 0px 1px 0px #002;
+     box-shadow: inset 0 0 0 1px #bbf;
      text-align: center;
+     border: 1px solid #447;
+     min-width: 800px;
 }
 
 .iframed .page {
-     background-color: #f0f0f0;
      margin: 0;
+     padding: 1px;
+     border: none;
+     box-shadow: none;
 }
 
 table {
@@ -183,109 +260,1024 @@ table {
 }
 
 th {
-     font-size: 10pt;
+     font-size: 9pt;
      font-weight: bold;
+     vertical-align: middle;
+}
+
+table#mailbox {
+     border: 1px solid #7778bf;
+     border-left: none;
+     border-right: none;
+     border-collapse: separate;
+     border-spacing: 0;
+}
+
+.iframed #mailbox {
+     border-bottom: none !important;
+     margin: 0;
+}
+
+#emptymailbox {
+     padding: 10px;
+}
+
+#mailbox hr {
+     display: none;
+}
+
+#mailbox th {
+     background: #fff;
+     background: linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), #efefff;
+     color: #555;
+     border-bottom: 1px solid #7778bf;
+     white-space: nowrap;
+     padding: 6px 5px !important;
+}
+
+#mailbox th:first-child {
+     background: #fff url(/themes/console/images/buttons/delete.png) center center no-repeat;
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), #efefff;
+}
+
+#mailbox th:nth-child(2) {
+     background: #fff url(/themes/susimail/images/status.png) center center no-repeat;
+     background: url(/themes/susimail/images/status.png) center center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), #efefff;
+     background-blend-mode: luminosity, normal;
+}
+
+#mailbox th:nth-child(4) {
+     background: #fff url(/susimail/icons/attach.png) center center no-repeat;
+     background: url(/susimail/icons/attach.png) center center no-repeat, linear-gradient(to bottom, #fff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,240,0.4)), #efefff;
+}
+
+#mailbox th:nth-child(5) {
+     text-align: left;
+}
+
+#mailbox td:nth-child(5) {
+     white-space: normal;
+     word-break: break-all;
+}
+
+#mailbox th:last-child, #mailbox td:nth-child(4) {
+     text-align: right;
+}
+
+#mailbox tr td {
+     border-top: 1px solid #bbf;
+}
+
+#mailbox tr:nth-child(3) td {
+     border-top: none;
+}
+
+#mailbox tr:first-child {
+     display: none;
+}
+
+#mailbox td:first-child, #mailbox td:nth-child(2), #mailbox td:nth-child(4), #mailbox td:nth-child(6) {
+     width: 20px;
+}
+
+#mailbox td:nth-child(5) {
+     text-align: left;
+}
+
+#mailbox td:nth-child(7) {
+     text-align: right;
+     width: 100px;
+     white-space: nowrap;
+}
+
+#mailbox td:nth-child(3) a, #mailbox td:nth-child(3) a:hover {
+     font-weight: normal;
+     color: #333 !important;
+}
+
+#mailbox td[onclick]:last-child {
+     padding-right: 5px;
+     width: 76px;
+     white-space: nowrap;
+}
+
+#mailbox .bottombuttons td {
+     padding: 4px 4px 5px;
+     border-top: 1px solid #7778bf;
+}
+
+.iframed #mailbox .bottombuttons td {
+     padding: 5px 3px;
+}
+
+#mailbox .bottombuttons input[type="submit"][disabled] {
+     display: none;
 }
 
 form {
      line-height: 160%
 }
 
-.mailhead {
-     font-size: 8.5pt;
+.header + form {
+     border: 1px solid #7778bf;
+     border-radius: 2px 2px 0 0;
+     background: #fff;
+     background: rgba(220,220,255,0.05);
+     box-shadow: 0 0 0 1px #fff;
+}
+
+.iframed .header + form {
+     margin-bottom: 0;
+}
+
+#message_full {
+     border: 1px solid #7778bf;
+     border-left: none;
+     border-right: none;
+     border-collapse: separate;
+     border-spacing: 0;
+     margin: 0;
+     padding: 0 !important;
+}
+
+.iframed #message_full {
+     border-bottom: none;
+}
+
+#message_full tr:first-child {
+     background: #efefff;
+     background: rgba(220,220,255,0.2);
+}
+
+#message_full tr:first-child td {
+     border-bottom: 1px solid #7778bf;
+     background: none !important;
+}
+
+#mailhead {
+     padding: 0;
+     margin: 0;
+}
+
+#mailhead td {
+     border: none !important;
+}
+
+#mailhead hr, .mailbody hr {
+     display: none;
+}
+
+#mailhead tr:first-child {
+     background: none;
+}
+
+#mailhead td:first-child {
+     width: 45px;
+     white-space: nowrap;
      font-weight: bold;
 }
 
-input.cancel, input.clearselection, input.logout {
-     background: #ddf url('/themes/console/images/cancel.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+button::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner  {
+     outline: none;
+     border: none;
+}
+
+input, label {
+     cursor: pointer;
+}
+
+label:hover {
+     color: #000;
+}
+
+input[type="radio"], input[type="checkbox"] {
+     vertical-align: middle;
+     background: none;
+     outline: none;
+     min-width: 16px;
+     min-height: 16px;
+}
+
+input[type="checkbox"]:hover, input[type="checkbox"]:focus, input[type="radio"]:hover, input[type="radio"]:focus {
+     filter: drop-shadow(0 0 3px #89f);
+}
+
+input[type="text"], input[type="password"] {
+     cursor: text;
+     font-size: 9pt;
+}
+
+input[type="submit"], input[type="reset"] {
+     border: 1px solid #999;
+     box-shadow: inset 0 0 0 1px #fff;
+     background: #eee;
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     color: #333;
+     margin: 3px;
+     font: 9pt "Droid Sans", "NotoSans", Ubuntu, "Bitstream Vera Sans", "Segoe UI", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     padding: 4px 5px;
+     text-decoration: none;
+     text-shadow: 0 1px 1px #fff;
+     border-radius: 2px;
+     opacity: 1;
+     background-size: 14px auto, 100% 100% !important;
+     filter: saturate(70%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+     cursor: pointer;
+}
+
+input[type="submit"]:hover, input[type="reset"]:hover, input[type="submit"]:focus, input[type="reset"]:focus {
+     filter: saturate(100%) drop-shadow(0 0 1px rgba(204, 204, 204, 0.8));
+     border: 1px solid #f60;
+     color: #222;
+     transition: ease border 0.7s;
+}
+
+input[type="submit"]:active, input[type="reset"]:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #999;
+     color: #555;
+     background-blend-mode: luminosity;
+     border: 1px solid #f30;
+}
+
+input[disabled], input[disabled]:hover, input[disabled]:focus {
+     opacity: 0.4;
+     cursor: default;
+     border: 1px solid #999;
+}
+
+input.cancel {
+     background: #eee url(/themes/console/images/buttons/no.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.cancel:hover {
+     background: #fff url(/themes/console/images/buttons/no.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.clearselection {
+     background: #eee url(/themes/susimail/images/none.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/none.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.clearselection:hover {
+     background: #fff url(/themes/susimail/images/none.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/none.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
 }
 
 input.delete, input.delete_attachment, input.really_delete {
-     background: #ddf url('/themes/console/images/delete.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+     background: #eee url(/themes/console/images/buttons/delete.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.delete:hover, input.delete_attachment:hover, input.really_delete:hover {
+     background: #fff url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.download {
+     background: #eee url(/themes/console/images/buttons/download.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.download:hover {
+     background: #fff url(/themes/console/images/buttons/download.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.offline {
+     background: #eee url(/themes/susimail/images/offline.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/offline.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.offline:hover {
+     background: #fff url(/themes/susimail/images/offline_hover.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/offline_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.list {
+     background: #eee url(/themes/susimail/images/folder.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/folder.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.list:hover {
+     background: #eee url(/themes/susimail/images/folder-open.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/folder-open.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.forward {
+     background: #eee url(/themes/susimail/images/forward.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/forward.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.forward:hover {
+     background: #fff url(/themes/susimail/images/forward.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/forward.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.login {
+     background: #eee url(/themes/susimail/images/login.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/login.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.login:hover {
+     background: #fff url(/themes/susimail/images/login_hover.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/login_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.logout {
+     background: #eee url(/themes/susimail/images/logout.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/logout.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
 }
 
-input.download, input.lastpage {
-     background: #ddf url('/themes/console/images/arrow_down.png') no-repeat 1px center;
-     padding: 2px 3px 2px 19px;
-     min-height: 22px;
+input.logout:hover {
+     background: #fff url(/themes/susimail/images/logout_hover.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/logout_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
 }
 
-input.firstpage {
-     background: #ddf url('/themes/console/images/arrow_up.png') no-repeat 1px center;
-     padding: 2px 3px 2px 19px;
-     min-height: 22px;
+input.reload, input.refresh {
+     background: #eee url(/themes/console/images/buttons/update.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
 }
 
-input.list, input.offline {
-     background: #ddf url('/themes/console/images/folder.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+input.reload:hover, input.refresh:hover {
+     background: #eee url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
 }
 
-input.forward, input.login, input.nextpage, input.send, input.next {
-     background: #ddf url('/themes/console/images/arrow_right.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+input.invertselection {
+     background: #eee url(/themes/susimail/images/selection.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/selection.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
 }
 
-input.invertselection, input.reload, input.refresh {
-     background: #ddf url('/themes/console/images/arrow_refresh.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+input.invertselection:hover {
+     background: #eee url(/themes/susimail/images/selection.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/selection.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
 }
 
-input.markall, input.show {
-     background: #ddf url('/themes/console/images/tick.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+input.show {
+     background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.show:hover {
+     background: #fff url(/themes/console/images/buttons/yes.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.markall {
+     background: #eee url(/themes/susimail/images/all.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/all.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.markall:hover {
+     background: #fff url(/themes/susimail/images/all.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/all.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
 }
 
 input.new {
-     background: #ddf url('/themes/console/images/email.png') no-repeat 0px center;
-     padding: 2px 3px 2px 36px;
-     min-height: 22px;
+     background: #eee url(/themes/susimail/images/compose.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/compose.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.new:hover {
+     background: #fff url(/themes/susimail/images/compose_hover.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/compose_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.reply {
+     background: #eee url(/themes/susimail/images/reply.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/reply.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.reply:hover {
+     background: #fff url(/themes/susimail/images/reply.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/reply.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.replyall {
+     background: #eee url(/themes/susimail/images/reply-all.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/reply-all.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.replyall:hover {
+     background: #fff url(/themes/susimail/images/reply-all.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/reply-all.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+/* pagenav */
+
+#pagenav tr {
+     display: block !important;
+     border: none;
+}
+
+#pagenav td {
+     border: none !important;
+}
+
+input.firstpage, input[name="firstpage"],
+input.firstpage[disabled]:hover, input[name="firstpage"][disabled]:hover {
+     background: #eee url(/themes/susimail/images/first.png) no-repeat center center;
+     background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 4px 10px;
+     text-indent: -99999px;
+}
+
+input.firstpage:hover, input[name="firstpage"]:hover {
+     background: #fff url(/themes/susimail/images/first.png) no-repeat center center;
+     background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.lastpage, input[name="lastpage"],
+input.lastpage[disabled]:hover, input[name="lastpage"][disabled]:hover {
+     background: #eee url(/themes/susimail/images/last.png) no-repeat center center;
+     background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 4px 10px;
+     text-indent: -99999px;
+}
+
+input.lastpage:hover, input[name="lastpage"]:hover {
+     background: #fff url(/themes/susimail/images/last.png) no-repeat center center;
+     background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.prevpage, input.prev, input[name="prev"], input[name="prevpage"],
+input.prevpage[disabled]:hover, input.prev[disabled]:hover, input[name="prev"][disabled]:hover, input[name="prevpage"][disabled]:hover {
+     background: #eee url(/themes/susimail/images/previous.png) no-repeat center center;
+     background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 4px 10px;
+     text-indent: -99999px;
+}
+
+input[name="prev"]:hover, input[name="prevpage"]:hover {
+     background: #fff url(/themes/susimail/images/previous.png) no-repeat center center;
+     background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.nextpage, input.next, input[name="nextpage"], input[name="next"],
+input.nextpage[disabled]:hover, input.next[disabled]:hover, input[name="nextpage"][disabled]:hover, input[name="next"][disabled]:hover {
+     background: #eee url(/themes/susimail/images/next.png) no-repeat center center;
+     background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 4px 10px;
+     text-indent: -99999px;
+}
+
+input.nextpage:hover, input.next:hover, input[name="nextpage"]:hover {
+     background: #fff url(/themes/susimail/images/next.png) no-repeat center center;
+     background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
 }
 
-input.reply, input.replyall {
-     background: #ddf url('/themes/console/images/arrow_turn_left.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+/* end pagenav */
+
+input.setpagesize, input.save {
+     background: #eee url(/themes/console/images/buttons/yes.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
 }
 
-input.prevpage, input.prev {
-     background: #ddf url('/themes/console/images/arrow_left.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+input.send {
+     background: #eee url(/themes/susimail/images/send.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/send.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
 }
 
-input.send, input.setpagesize, input.save {
-     background: #ddf url('/themes/console/images/accept.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+input.send:hover {
+     background: #fff url(/themes/susimail/images/send_hover.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/send_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
 }
 
 input.configure {
-     background: #ddf url('/susimail/icons/wrench.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+     background: #eee url(/themes/console/images/buttons/configure.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/configure.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.configure:hover {
+     background: #fff url(/themes/console/images/buttons/configure_hover.png) no-repeat 6px center;
+     background: url(/themes/console/images/buttons/configure_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
 }
 
 input.saveas {
-     background: #ddf url('/susimail/icons/drive_edit.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+     background: #eee url(/themes/susimail/images/save.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/save.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.saveas:hover {
+     background: #fff url(/themes/susimail/images/save_hover.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/save_hover.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.new_upload {
+     background: #eee url(/themes/susimail/images/attach.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/attach.png) no-repeat 6px center, linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     padding: 5px 7px 5px 24px;
+}
+
+input.new_upload:hover {
+     background: #fff url(/themes/susimail/images/attach.png) no-repeat 6px center;
+     background: url(/themes/susimail/images/attach.png) no-repeat 6px center, linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+input.new_upload {
+     float: right;
+}
+
+a.sort {
+     vertical-align: middle;
+     display: inline-block;
+}
+
+img.sort {
+     border: 1px solid #999;
+     border-radius: 2px;
+     background: linear-gradient(to bottom, #fff 0%, #ddd 100%);
+     margin: 0;
+     vertical-align: middle;
+     filter: drop-shadow(0 0 1px rgba(204, 204, 204, 0.6));
+}
+
+img.sort:hover, img.sort[disabled]:hover, .sort:focus img, .sort[disabled]:focus img {
+     opacity: 1 !important;
+     border: 1px solid #f60;
+     background: linear-gradient(to bottom, #ddd 0%, #fff 100%);
+}
+
+img.sort:active {
+     box-shadow: inset 0 0 0 1px #fff, inset 2px 2px 2px #999;
+}
+
+input[type="file"] {
+     background: none;
+     font-size: 9pt;
+     padding: 5px 0;
+}
+
+input[type="text"], input[type="password"], textarea {
+     padding: 5px !important;
+     box-shadow: inset 2px 2px 1px rgba(204, 204, 204, 0.6);
+     border: 1px solid #999;
+     border-radius: 2px;
+     color: #333;
+}
+
+input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
+     color: #111;
+     box-shadow: 0 0 1px #89f;
+}
+
+input[type="text"][disabled] {
+     opacity: 1;
+     background: #e9e9e9;
+}
+
+textarea {
+     font-family: "Droid Sans Mono", "Noto Mono", "Lucida Console", "DejaVu Sans Mono", monospace;
+}
+
+#composemail {
+     text-align: center !important;
+     padding: 10px;
+     border: 1px solid #7778bf;
+     border-left: none;
+     border-right: none;
+     border-radius: 0 0 2px 2px;
+     background: #efefff;
+     background: linear-gradient(to right, #efefff, #fff, #efefff);
+}
+
+.iframed #composemail {
+     border-bottom: none;
+}
+
+#composemail hr {
+     display: none;
+}
+
+#composemail table {
+     width: auto;
+     margin: auto;
+}
+
+#composemail td {
+     padding: 3px;
+}
+
+#composemail td:first-child {
+    padding-right: 5px;
+}
+
+#composemail textarea {
+     margin-top: 15px;
+}
+
+#composemail textarea, #composemail input[type="text"] {
+     width: calc(100% - 20px);
+     min-width: 565px;
+}
+
+div#mailheader {
+     margin: 10px 10px 10px 20px;
+}
+
+#mailheader table td:first-child {
+     white-space: nowrap;
+     width: 20px;
+}
+
+#newmail td:first-child {
+     font-weight: bold;
+}
+
+div#dologin {
+     border: 1px solid #555;
+     padding: 10px 10px 0;
+     border-radius: 2px;
+     width: 600px;
+     margin: 40px auto 40px;
+     box-shadow: inset 0 0 2px 2px rgba(225, 225, 255, 0.5), 0 0 1px rgba(204, 204, 204, 0.6);
+     background: #fff;
+     background: linear-gradient(to bottom, #fff, rgba(232,232,255,0.5)), linear-gradient(to bottom, rgba(255,255,255,0.7) 5%, rgba(220,220,255,0.9)), linear-gradient(to right, #fff, #efefff, #fff);
+     background-size: 100% 100%, auto 2px, 100%, 100%;
+}
+
+.iframed #dologin {
+     margin: 30px auto 30px;
+}
+
+#dologin td {
+     padding: 3px;
+     font-weight: bold;
+     color: #444;
+}
+
+#dologin td:first-child {
+     white-space: nowrap;
+}
+
+#dologin td:last-child {
+     width: 80%;
+}
+
+#dologin h1 {
+     border-bottom: 1px solid #999;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     font-size: 14pt;
+     text-align: left;
+     padding: 0 10px 12px 15px;
+     margin: 5px -9px;
+}
+
+.iframed #dologin h1 {
+     display: none;
+}
+
+#dologin input[type="text"], input[name="pagesize"] {
+     text-align: left !important;
+}
+
+#dologin input[name="user"] {
+     background: #fff url(/themes/console/images/buttons/user.png) 5px 6px no-repeat;
+     padding: 5px 5px 5px 26px !important;
+}
+
+#dologin input[name="pass"] {
+     background: #fff url(/themes/console/images/buttons/password.png) 5px 5px no-repeat;
+     padding: 5px 5px 5px 26px !important;
+}
+
+#dologin input[name="user"], #dologin input[name="pass"], #dologin input[name="host"] {
+     width: 240px;
+}
+
+hr {
+     color: #999;
+     background: #999;
+     height: 1px;
+     border: 0 solid #999;
+     width: 100%;
+     margin: 5px 0;
+     text-align: center;
+}
+
+textarea[name="config_text"] {
+     margin-bottom: 15px;
+     resize: none;
+     height: 280px;
+}
+
+div#pagenav {
+     border-top: 1px solid #555;
+     padding: 10px 5px 0;
+     font-size: 9.5pt;
+     border-radius: 0 0 2px 2px;
+}
+
+
+h3#config {
+     text-align: center;
+     border: 1px solid #7778bf;
+     border-left: none;
+     border-right: none;
+     margin: 0 0 20px;
+     padding: 10px;
+     text-transform: uppercase;
+     font-size: 11pt;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background: #efefff;
+     box-shadow: inset 0 0 0 1px #fff;
+     text-shadow: 0 1px 1px #fff;
+     background: linear-gradient(to right, #efefff, #fff, #efefff);
+}
+
+.topbuttons {
+     margin: -1px -1px 0;
+     padding: 5px 5px 4px;
+     text-align: center;
+     border: 1px solid #7778bf;
+     border-bottom: none;
+     z-index: 100;
+     font-weight: bold;
+     vertical-align: middle;
+     font-size: 9pt;
+     background: repeating-linear-gradient(to bottom, #eef 1px, #eef 2px, #fff 3px) !important;
+}
+
+.topbuttons, .iframed .topbuttons {
+     white-space: nowrap;
+}
+
+.topbuttons:not(old), .iframed .topbuttons:not(old) {
+     display: inline-block;
+     width: calc(100% - 10px);
+}
+
+/* float topbuttons, single line  */
+
+.topbuttons input {
+     float: left;
 }
 
-input[type=file], input.new_upload {
-     background: #ddf url('/themes/console/images/add.png') no-repeat 4px center;
-     padding: 2px 3px 2px 24px;
-     min-height: 22px;
+.topbuttons input[name="pagesize"], .topbuttons .setpagesize, .topbuttons input[onclick] {
+     float: none !important;
 }
 
-input[type=text], input[type=password] {
-     padding: 1px 4px;
+.topbuttons input.new, .topbuttons input.refresh, .topbuttons input.logout,
+.topbuttons input.reply, .topbuttons input.replyall, .topbuttons input.forward, .topbuttons input.saveas, .topbuttons input.delete {
+     float: left;
+     margin-left: 2px;
+     margin-top: 2px !important;
 }
+
+.topbuttons input.prev, .topbuttons input[name="prev"], .topbuttons input.prevpage, .topbuttons input[name="prevpage"],
+.topbuttons input.next, .topbuttons input[name="next"], .topbuttons input.nextpage, input[name="nextpage"],
+.topbuttons input.firstpage, .topbuttons input[name="firstpage"], .topbuttons input.lastpage, .topbuttons input[name="lastpage"],
+.topbuttons input.list {
+     height: 26px;
+     margin: 2px;
+}
+
+#messagenav {
+     float: right;
+     margin-right: -1px;
+     margin-left: -7px;
+}
+
+.topbuttons br {
+     display: none;
+}
+
+.topbuttons br ~ input {
+    margin: 3px 2px;
+}
+
+.topbuttons input.prev, .topbuttons input[name="prev"] {
+     margin-left: 10px;
+}
+
+.topbuttons input.list {
+     background-position: center center;
+     text-indent: -99999px;
+     padding: 5px 10px;
+}
+
+.topbuttons input[type="text"] {
+    margin: 3px 3px 5px !important;
+}
+
+#pagenav input {
+     float: none;
+     margin: 2px 1px !important;
+     padding: 5px 10px;
+}
+
+#pagenav input[name="prevpage"] {
+     margin-right: 5px !important;
+}
+
+#pagenav input[name="nextpage"] {
+     margin-left: 5px !important;
+}
+
+#pagenav input[disabled]:hover, #pagenav input[disabled]:active {
+     box-shadow: inset 0 0 0 1px #fff !important;
+}
+
+.topbuttons input[type="text"] {
+     margin: 5px;
+     padding: 4px 4px 5px !important;
+}
+
+.topbuttons div#pagenav {
+     margin-top: 10px;
+     display: inline-block;
+}
+
+table#pagenav {
+     float: right;
+     width: 200px;
+     margin: -3px -4px -1px 0;
+     padding: 2px;
+     border-collapse: separate;
+     border-spacing: 0;
+}
+
+table#pagenav td {
+     white-space: nowrap;
+     font-size: 10pt;
+     font-weight: bold;
+     padding: 1px 2px;
+     text-align: center;
+     font-style: italic;
+}
+
+table#pagenav td:first-child {
+     text-align: right;
+     width: 49%;
+}
+
+table#pagenav td:last-child {
+     text-align: left;
+     width: 49%;
+}
+
+table#pagenav td:nth-child(2) {
+     width: 2%;
+     white-space: nowrap;
+}
+
+.bottombuttons br {
+     display: none;
+}
+
+div#bottombuttons {
+     padding: 0 0 20px;
+}
+
+tr.bottombuttons, .topbuttons {
+     box-shadow: inset 0 0 0 1px #fff;
+}
+
+_:-ms-lang(x), tr.bottombuttons, .topbuttons {
+     box-shadow: none !important;
+}
+
+tr.bottombuttons:last-child {
+     background: linear-gradient(to bottom, #fff 50%, rgba(220,220,255,0.3)), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px), #fff !important;
+}
+
+tr.bottombuttons table#pagenav {
+     width: 100%;
+     margin: 0;
+}
+
+tr.bottombuttons:empty {
+     display: none;
+}
+
+#composemail .bottombuttons {
+     background: none !important;
+     box-shadow: none !important;
+}
+
+.notifications {
+     bottom: 0;
+     left: 0;
+     position: fixed;
+     right: 0;
+     text-align: center;
+     margin: 0 -20px;
+     padding: 5px 10px;
+     z-index: 10;
+     opacity: 0.85;
+     border-top: 1px solid #fff;
+     background: #113;
+}
+
+.iframed .notifications {
+     margin-bottom: 9px;
+     border-radius: 4px 4px 0 0;
+     border: none;
+     margin: 0 20% 9px;
+}
+
+.notifications p.info {
+     font-size: 10pt !important;
+     color: #fff;
+}
+
+.notifications p {
+     filter: drop-shadow(0 0 2px #000);
+     letter-spacing: 0.07em;
+     word-spacing: 0.2em;
+     font-weight: bold;
+}
+
+p.error {
+     font-size: 10pt !important;
+}
+
+td p.error {
+     padding: 10px;
+}
+
+#newmail input[type="checkbox"],  #attachedfile input[type="checkbox"] {
+     margin: 0 2px 0 0;
+}
+
+#attachedfile {
+     border-bottom: 1px dotted #7778bf;
+}
+
+.attached {
+     text-align: left;
+     background: url(/themes/susimail/images/attach.png) 10px center no-repeat, rgba(220,220,255,0.2);
+     padding: 8px 5px 8px 35px;
+     border-top: 1px solid #7778bf;
+     margin: 0;
+     box-shadow: inset 0 0 0 1px #fff;
+     overflow: auto !important;
+}
+
+.attached img {
+     border: 1px solid #555;
+     border-radius: 2px;
+     padding: 3px;
+     background: #fff;
+     text-align: center;
+     max-width: 100%;
+     max-width: calc(100% - 5px);
+     filter: drop-shadow(0 0 1px #999);
+}
+
+#deleteattached input {
+     margin: 8px 3px 0 0;
+}
+
+#prefsave {
+     margin-bottom: 25px !important;
+}
+
+/* responsive layout */
+
+@media screen and (min-width: 1024px) {
+body, td, textarea, input, div, p.mailbody, th, a {
+     font-size: 10pt !important;
+}
+
+td {
+     padding: 3px 5px;
+}
+}
+
+/* end responsive layout */
+
+/* Edge/IE tweaks */
+
+_:-ms-lang(x), * {
+     filter: none !important;
+     text-shadow: none !important;
+}
+
+/* end Edge/IE tweaks */
diff --git a/installer/resources/themes/susimail/midnight/images/3down.png b/installer/resources/themes/susimail/midnight/images/3down.png
new file mode 100644
index 0000000000000000000000000000000000000000..7c3e7efb8da8da1772cecf53c0907eca7a7def6b
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/3down.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/3up.png b/installer/resources/themes/susimail/midnight/images/3up.png
new file mode 100644
index 0000000000000000000000000000000000000000..93496114ca038ec5e35d679f2b235e8983c474de
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/3up.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/attach.png b/installer/resources/themes/susimail/midnight/images/attach.png
new file mode 100644
index 0000000000000000000000000000000000000000..398fabe18c5b42fc43c08d793fc6d8f90cc0d6a7
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/attach.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/first.png b/installer/resources/themes/susimail/midnight/images/first.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc8479b631dae142af23b93ec4b426c154ace425
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/first.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/first_active.png b/installer/resources/themes/susimail/midnight/images/first_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..2eefd083d68de32fc17a5b81beb39db11039fbf3
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/first_active.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/first_disabled.png b/installer/resources/themes/susimail/midnight/images/first_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..b0072c9e33b618a7ebb57299b44ee7a7b7cf8701
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/first_disabled.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/first_hover.png b/installer/resources/themes/susimail/midnight/images/first_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b860e8f74cdb94797246920bbb3efcffae7312e
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/first_hover.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/hatter_med.png b/installer/resources/themes/susimail/midnight/images/hatter_med.png
new file mode 100644
index 0000000000000000000000000000000000000000..2f3b0698a93726da742064f93e82a11176e783fd
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/hatter_med.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/last.png b/installer/resources/themes/susimail/midnight/images/last.png
new file mode 100644
index 0000000000000000000000000000000000000000..ed6ca93932f064c82bfb840b78bde8c0ca9c3e93
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/last.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/last_active.png b/installer/resources/themes/susimail/midnight/images/last_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ec74f394cece7aa10564a9e4b462926219ad1e7
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/last_active.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/last_disabled.png b/installer/resources/themes/susimail/midnight/images/last_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e3958bd388aa721dcb2ebdc0083cddab4f90f64
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/last_disabled.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/last_hover.png b/installer/resources/themes/susimail/midnight/images/last_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..f727d74c7d9383208ccd3fa6626e966196b6b47b
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/last_hover.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/mail.png b/installer/resources/themes/susimail/midnight/images/mail.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ae5af15868162cef66fbf53771be47650013786
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/mail.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/next.png b/installer/resources/themes/susimail/midnight/images/next.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ece8e45a176ffbdd71763f828e946af8aa01b03
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/next.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/next_active.png b/installer/resources/themes/susimail/midnight/images/next_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..4dd21154e954e3ef37b8a6e3a1b309ccd311e361
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/next_active.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/next_disabled.png b/installer/resources/themes/susimail/midnight/images/next_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..da01cb7ac0c7b37ed0895932825dd212491c1a52
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/next_disabled.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/next_hover.png b/installer/resources/themes/susimail/midnight/images/next_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..230f7e7d434c61e6441a232d48a9757d4d8c9ff8
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/next_hover.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/previous.png b/installer/resources/themes/susimail/midnight/images/previous.png
new file mode 100644
index 0000000000000000000000000000000000000000..da6a24f5358346df5dca09a4adfda7f5bf7ef399
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/previous.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/previous_active.png b/installer/resources/themes/susimail/midnight/images/previous_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..65a4253c7ab7db70149e59ebd12470a16c6ad929
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/previous_active.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/previous_disabled.png b/installer/resources/themes/susimail/midnight/images/previous_disabled.png
new file mode 100644
index 0000000000000000000000000000000000000000..c49db000f13225e28f396e07b20ffef34cd52a68
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/previous_disabled.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/previous_hover.png b/installer/resources/themes/susimail/midnight/images/previous_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..012880a5fdff9b001e3c8b4140ec5666bed18302
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/previous_hover.png differ
diff --git a/installer/resources/themes/susimail/midnight/images/susimail.png b/installer/resources/themes/susimail/midnight/images/susimail.png
new file mode 100644
index 0000000000000000000000000000000000000000..baa85b7f2da220dfe88cd427bf39c37ba9664878
Binary files /dev/null and b/installer/resources/themes/susimail/midnight/images/susimail.png differ
diff --git a/installer/resources/themes/susimail/midnight/mobile.css b/installer/resources/themes/susimail/midnight/mobile.css
new file mode 100644
index 0000000000000000000000000000000000000000..baa2b9f7670038304f69806eaf3cc0733e0fc027
--- /dev/null
+++ b/installer/resources/themes/susimail/midnight/mobile.css
@@ -0,0 +1,27 @@
+/* Susimail Mobile Theme Override "Midnight" */
+
+body {
+     margin: 0;
+}
+
+.page {
+     min-width: 560px;
+     padding: 5px 5px 0 !important;
+     border-radius: 0;
+}
+
+form {
+     margin-bottom: 5px;
+}
+
+#dologin {
+     width: 500px !important;
+}
+
+#mailbox td:nth-child(6), #mailbox th:nth-child(6), #mailbox td:nth-child(8), #mailbox th:nth-child(8) {
+     display: none;
+}
+
+.header, .footer {
+     display: none;
+}
diff --git a/installer/resources/themes/susimail/midnight/susimail.css b/installer/resources/themes/susimail/midnight/susimail.css
new file mode 100644
index 0000000000000000000000000000000000000000..e56c2a32fb68aafde5709ea3e0d2edf363b38bbd
--- /dev/null
+++ b/installer/resources/themes/susimail/midnight/susimail.css
@@ -0,0 +1,1332 @@
+/* Susimail "Midnight" by dr|z3d */
+/* Thanks to Florian Kuhlmann for the hatface images. [http://www.flickr.com/photos/floriankuhlmann/] */
+/* Droid Sans font family and css3 compliant browser recommended for optimal results */
+
+html {
+     min-height: 100%;
+}
+
+body {
+     background-color: #000;
+     color: #c9ceff;
+     font-family: "Droid Sans", "Noto Sans", "Bitstream Vera Sans", "Lucida Grande", "DejaVu Sans", "Segoe UI", Verdana, Tahoma, Helvetica, sans-serif;
+     font-size: 9pt;
+     margin: 6px 5px;
+}
+
+/* preload button mouseovers */
+body {
+     background: linear-gradient(to bottom, #000, #000),
+     url(/themes/susimail/images/compose_hover.png) no-repeat,
+     url(/themes/susimail/images/login_hover.png) no-repeat,
+     url(/themes/susimail/images/logout_hover.png) no-repeat,
+     url(/themes/susimail/images/offline_hover.png) no-repeat,
+     url(/themes/susimail/images/save_hover.png) no-repeat,
+     url(/themes/susimail/images/send_hover.png) no-repeat,
+     url(/themes/console/images/buttons/configure_hover.png) no-repeat,
+     url(/themes/console/images/buttons/delete_hover.png) no-repeat,
+     url(/themes/console/images/buttons/update_hover.png) no-repeat, #000 !important;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+}
+
+body.iframed {
+     background: transparent url(/themes/console/images/transparent.gif) !important;
+     margin: 1px 0 0;
+}
+
+body.iframed {
+     background: url(/themes/console/images/transparent.gif),
+     url(/themes/susimail/images/compose_hover.png) no-repeat,
+     url(/themes/susimail/images/login_hover.png) no-repeat,
+     url(/themes/susimail/images/logout_hover.png) no-repeat,
+     url(/themes/susimail/images/offline_hover.png) no-repeat,
+     url(/themes/susimail/images/save_hover.png) no-repeat,
+     url(/themes/susimail/images/send_hover.png) no-repeat,
+     url(/themes/console/images/buttons/configure_hover.png) no-repeat,
+     url(/themes/console/images/buttons/delete_hover.png) no-repeat,
+     url(/themes/console/images/buttons/update_hover.png) no-repeat, transparent !important;
+     background-size: 100% 100%, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0 !important;
+}
+
+* {
+     outline: none;
+}
+
+.iframed form {
+     border: 1px solid transparent !important;
+}
+
+div.header {
+     padding: 8px 5px 12px 5px;
+}
+
+hr {
+     color: #443da0;
+     background: #443da0;
+     height: 1px;
+     border: 0 solid #443da0;
+     width: 100%;
+     margin: 5px 0;
+     text-align: center;
+}
+
+li {
+     color: #c9ceff;
+     line-height: 12pt;
+     font-size: 10pt;
+     margin-left: 5mm;
+     margin-right: 5mm;
+}
+
+p {
+     color: #c9ceff;
+     line-height: 12pt;
+     margin-left: 5mm;
+     margin-right: 5mm;
+     font-size: 9pt;
+}
+
+p.hl {
+     font-size: 12pt;
+     letter-spacing: 2pt;
+     line-height: 18pt;
+     font-weight: bold;
+}
+
+p.text {
+     margin-left: 10mm;
+     margin-right: 10mm;
+}
+
+p.info, p.error {
+     color: #c9ceff;
+     display: block !important;
+     border: 1px solid #443da0;
+     margin: 20px 20px 0 !important;
+     padding: 15px 10px 15px 45px;
+     background: #000 url(/themes/console/images/info/infohelp.png) 10px center no-repeat;
+     background: url(/themes/console/images/info/infohelp.png) 10px center no-repeat, linear-gradient(to right, #000000, #010015 65%, #020018 90%);
+     text-align: left;
+     border-radius: 2px;
+}
+
+p.error {
+     color: #652787;
+     background: url(/themes/console/images/info/errortriangle.png) no-repeat scroll 10px center #000;
+     border: 1px solid #652787;
+     border-radius: 2px;
+     font-weight: bold;
+     text-align: justify;
+     word-wrap: break-word;
+     padding-left: 60px !important;
+     display: block !important;
+}
+
+span.coloured {
+     color: #382dc4;
+}
+
+p.footer {
+     margin-left: 10mm;
+     margin-right: 10mm;
+     font-size: 8pt;
+     line-height: 10pt;
+     display: none;
+}
+
+.footer hr {
+     margin-top: -12px;
+     display: none;
+}
+
+.iframed #footer {
+     display: none;
+}
+
+p.mailbody, textarea {
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     margin: 0 5px;
+     text-align: left;
+}
+.header {
+     display: none;
+}
+
+.iframed .header {
+     display: none;
+}
+
+div.topbuttons {
+     padding: 7px 0 8px !important;
+     font-weight: bold;
+     border: 1px solid #443da0;
+     border-bottom: 0 solid;
+     border-radius: 2px 2px 0 0;
+     margin-bottom: -4px;
+     margin-top: -1px;
+     margin: -1px -1px -4px -1px;
+     border-bottom: 1px solid #443da0;
+     background: #000 url(images/hatter_med.png) left bottom no-repeat;
+     background: url(images/hatter_med.png) left bottom no-repeat, linear-gradient(to bottom, #020020 0%, #0100100%);
+     background-size: 144px 100px, 100% 100% !important;
+}
+
+.iframed .topbuttons {
+     border: none;
+     border-bottom: 1px solid #443da0;
+     border-radius: 0;
+}
+
+div.topbuttons br {
+     margin-bottom: 12px !important;
+}
+
+.topbuttons input.next {
+     margin-bottom: -20px !important;
+}
+
+.bottombuttons br {
+     display: none;
+}
+
+.bottombuttons input:disabled {
+     display: none;
+}
+
+td[colspan="9"] hr {
+     display: none;
+}
+
+.mailbody {
+/*     display: block !important; */
+     padding: 0 10px !important;
+}
+
+table#mailbox {
+     margin-bottom: 0;
+}
+
+#mailbox th:first-child {
+     background: url(/themes/console/images/buttons/delete.png) center center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     font-size: 0;
+     padding: 0;
+}
+
+#mailbox th:nth-child(2) {
+     background: url(/themes/susimail/images/status.png) center center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     font-size: 0;
+     padding: 0;
+     background-blend-mode: luminosity, normal;
+}
+
+#mailbox th:nth-child(3) {
+     text-align: left;
+}
+
+#mailbox th:nth-child(4) {
+     background: url(/susimail/icons/attach.png) center right 5px no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     font-size: 0;
+     padding: 0;
+}
+
+table#mailbox td[colspan="5"], table#mailbox td[colspan="4"] {
+     border-top: 1px solid #443da0 !important;
+     padding: 6px 0 2px !important;
+}
+
+table#mailbox td[colspan="5"] {
+     border-bottom: none;
+     padding-left: 6px !important;
+     padding-bottom: 6px !important;
+     background: #000;
+     background: linear-gradient(to bottom, #010012, #060050%, #0100100%);
+}
+
+table#mailbox td[colspan="4"] {
+     padding-right: 6px !important;
+     padding-bottom: 6px !important;
+     border-bottom: none;
+     background: #000;
+     background: linear-gradient(to bottom, #010012, #060050%, #0100100%);
+}
+
+table#mailbox td[colspan="5"] br, table#mailbox td[colspan="4"] br {
+     display: none;
+}
+
+table#mailbox td[colspan="9"] i {
+     font-size: 10pt;
+}
+
+table#mailbox td:nth-child(2) {
+     text-align: right !important;
+     width: 24px !important;
+}
+
+table#mailbox tr[class^="list"]:hover {
+     cursor: pointer;
+}
+
+#mailbox td#from {
+     white-space: nowrap;
+     width: 100px;
+}
+
+#mailbox td#subject {
+     max-height: 40px;
+     overflow: hidden;
+}
+
+input[type="checkbox"], .optbox {
+     min-width: 16px !important;
+     min-height: 16px !important;
+     background: none;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%); /* colorize radios and checkboxes */
+}
+
+input.optbox {
+     opacity: 0.8;
+}
+
+input.optbox:hover, input.optbox:focus {
+     opacity: 1.0;
+     filter: invert(100%) sepia(100%) hue-rotate(200deg) saturate(200%) drop-shadow(0 0 5px #652787);
+}
+
+td#deleteattached {
+     padding-top: 5px !important;
+}
+
+#attachedfile input[type="checkbox"] {
+     margin: 0 2px 0 0;
+     vertical-align: middle;
+}
+
+#attachedfile {
+     border-bottom: 1px dotted #322e6b;
+     padding: 5px 5px 5px 8px !important;
+}
+
+tr.bottombuttons:last-child td {
+     padding-bottom: 20px !important;
+     border-bottom: 1px solid #443da0 !important;
+}
+
+a:link {
+     color: #7972d1;
+     text-decoration: none;
+     font-weight: bold;
+}
+
+a:hover, a:visited:hover {
+     color: #652787;
+}
+
+a:visited {
+     color: #4e47bf;
+}
+
+a:active {
+     color: #4f0519;
+}
+
+td {
+     color: #c9ceff;
+     margin: 0 5px;
+     font-size: 9pt;
+     padding: 2px;
+}
+
+tr.list0 {
+     background-color: #010008;
+}
+
+tr.list1 {
+     background-color: #010011;
+}
+
+/* mailbox display finessing */
+
+tr.list0 td, tr.list1 td {
+     padding: 4px;
+     color: #7670c2;
+}
+
+tr.list0:hover td, tr.list1:hover td {
+     color: #c9ceff;
+}
+
+tr.list0:hover, tr.list1:hover, tr.list0:hover a, tr.list1:hover a {
+     background: #020020;
+     color: #652787;
+}
+
+tr.list0:hover td:nth-child(3) a, tr.list1:hover td:nth-child(3) a {
+     color: #c9ceff !important;
+}
+
+
+tr.list0:hover td:first-child, tr.list1:hover td:first-child {
+/*     background: url(images/highlight.png) left center repeat-y; */
+      box-shadow: inset 3px 0 0 #0b0099;
+}
+
+tr.list0:hover td:last-child, tr.list1:hover td:last-child {
+      box-shadow: inset -3px 0 0 #0b0099;
+}
+
+.list0 td:first-child, .list1 td:first-child, #mailbox th:first-child {
+     text-align: center !important;
+     width: 16px;
+     padding-left: 8px;
+     padding-right: 8px;
+}
+
+.list0 td:nth-child(2), .list1 td:nth-child(2) {
+     width: 32px;
+     text-align: right;
+}
+
+.list0 td:nth-child(3) a, .list1 td:nth-child(3) a {
+     color: #7670c2 !important;
+     font-weight: normal;
+}
+
+.list0 td:nth-child(4), .list1 td:nth-child(4) {
+     min-width: 16px !important;
+     text-align: right;
+}
+
+table[id="mailbox"] tr th:last-child, .list0 td:last-child, .list1 td:last-child {
+     min-width: 70px !important;
+     text-align: right;
+     padding-right: 20px;
+     white-space: nowrap;
+}
+
+table[id="mailbox"] th {
+     font-size: 9pt;
+     text-transform: uppercase !important;
+     padding-left: 3px;
+     text-shadow: 0 1px 1px #000;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     border-top: none;
+     white-space: nowrap;
+}
+
+table[id="mailbox"] th img {
+     filter: drop-shadow(0 0 1px #652787) hue-rotate(190deg);
+}
+
+table[id="mailbox"] th img:hover {
+     opacity: 1 !important;
+}
+
+table#mailbox th:nth-child(5), table#mailbox th:nth-child(7) {
+     text-align: left;
+}
+
+img[class="sort"] {
+     filter: hue-rotate(180deg);
+}
+
+#mailbox .list0 td, #mailbox .list1 td {
+     border-bottom: 1px solid #000;
+}
+
+#mailbox tr.bottombuttons td[colspan="9"] {
+/*     display: none; */
+}
+
+tr.bottombuttons td {
+     padding-left: 0 !important;
+     padding-right: 0 !important;
+}
+
+/* end mailbox finessing */
+
+table.noborder {
+     margin-left: 0;
+     margin-top: 0;
+     margin-right: 0;
+}
+
+td:first-child {
+     font-weight: bold;
+}
+
+pre {
+     font: 9pt "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+     margin-left: 1cm;
+     margin-right: 1cm;
+}
+
+.page {
+     color: #c9ceff;
+     margin: 0;
+     padding: 0;
+     font-size: 9pt !important;
+     text-align: center;
+     min-width: 700px;
+}
+
+table {
+     width: 100%;
+}
+
+th {
+     font-size: 9pt;
+     font-weight: bold;
+     background: #001;
+     background: linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     padding: 7px;
+     border-bottom: 1px solid #443da0;
+     border-top: 1px solid #443da0;
+}
+
+form {
+     line-height: 160%;
+     border-radius: 2px;
+     padding-bottom: 0;
+     border: 1px solid #443da0;
+     background: #000;
+}
+
+form table {
+     margin-bottom: 5px;
+}
+
+textarea {
+     background: #000;
+     color: #c9ceff;
+     border: 1px solid #443da0;
+     border-radius: 2px;
+     padding: 5px;
+}
+
+textarea[name="config_text"] {
+     margin-bottom: 10px;
+     resize: none;
+}
+
+/* compose mail */
+
+textarea[name="new_text"] {
+     min-width: 581px;
+     margin: 10px 0 10px 3px;
+     text-align: left;
+}
+
+td#addattach {
+     padding-left: 5px !important;
+}
+
+td#attachedfile {
+     padding: 2px 0;
+}
+
+#mailhead {
+     font-size: 9pt;
+     font-weight: bold;
+     background: #002;
+     border: 1px solid #443da0;
+     border-left: none;
+     border-right: none;
+}
+
+.iframed #mailhead {
+     margin-top: 3px;
+}
+
+#mailhead td:first-child {
+     text-align: right;
+     width: 100px;
+     white-space: nowrap;
+}
+
+#mailhead td:last-child {
+     font-weight: normal;
+}
+
+div#composemail {
+     text-align: center !important;
+     padding: 50px;
+}
+
+#composemail table {
+     width: auto;
+     margin: auto;
+}
+
+#composemail table td {
+     padding: 2px 5px;
+}
+
+#newmail input[type="text"], #composemail textarea {
+     width: 100%;
+}
+
+/* end compose mail */
+
+input, label {
+     cursor: pointer;
+}
+
+input[type="file"] {
+     border: none;
+     padding: 0 !important;
+}
+
+input[type="file"]:hover {
+     color: #652787;
+}
+
+input.new_upload {
+     float: right;
+}
+
+input {
+     font-size: 9pt;
+     font-weight: bold;
+     text-align: left;
+     padding: 2px 2px 3px !important;
+     border-radius: 2px;
+     border: 1px solid #443da0;
+     color: #4e47bf;
+     margin: 3px;
+     font: bold 8pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+/*     min-width: 64px !important;*/
+}
+
+input.optbox {
+     min-width: 16px !important;
+     min-height: 16px !important;
+}
+
+input[type=submit]::-moz-focus-inner, input.cancel::-moz-focus-inner {
+     border: none;
+     box-shadow: none;
+}
+
+input[type=submit], input.cancel {
+     color: #4e47bf;
+     background: #000;
+     background: linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     border: 1px solid #3e3f8f;
+     border-bottom-color: #14144f;
+     border-right-color: #14144f;
+     font: bold 9pt "Droid Sans", "Noto Sans", Ubuntu, "Segoe UI", "Bitstream Vera Sans", "DejaVu Sans", Verdana, "Lucida Grande", Helvetica, sans-serif;
+     text-align: center;
+     padding: 5px 8px !important;
+     margin: 4px 5px;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+input[type=submit]:hover, input.cancel:hover,
+input[type=submit]:focus, input.cancel:focus {
+     color: #652787;
+     background: #000 !important;
+     border: 1px solid #652787;
+     box-shadow: inset 0 1px 1px 0 #c9ceff;
+}
+
+input[type=submit]:active, input.cancel:active {
+     border: 1px inset #652787;
+     background: #652787 !important;
+     color: #c9ceff !important;
+     box-shadow: inset 3px 3px 3px #000 !important;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important;
+}
+
+input[type=text], input[type=password], textarea {
+     color: #7670c2;
+     background: #000;
+     cursor: text;
+     padding: 4px !important;
+     border: 1px solid #322e6b;
+}
+
+#dologin input:disabled, #dologin input:disabled:hover, #dologin input:disabled:active {
+     border: none;
+     color: #9b9ebf;
+     margin: 0;
+     padding-top: 3px;
+     box-shadow: none;
+     background: none !important;
+     text-align: left !important;
+     cursor: default;
+}
+
+input[name="user"], input[name="pass"] {
+     border: 1px solid #322e6b;
+     background: #000;
+}
+
+input[name="user"]:focus, input[name="pass"]:focus, input[type="text"]:focus, textarea:focus {
+     border: 1px solid #443da0;
+     color: #c9ceff;
+     box-shadow: 0 0 0 1px rgba(101, 39, 135, 0.5);
+}
+
+input[name="host"], input[name="pop3"], input[name="smtp"] {
+    display: inline !important;
+    margin-top: 3px !important;
+    font-family: "Droid Sans Mono", "Noto Mono", "Andale Mono", "DejaVu Sans Mono", "Lucida Console", monospace;
+    color: #652787;
+    background: none !important;
+    border-radius: 0;
+    box-shadow: none;
+}
+
+input.delete {
+     margin-left: 2px;
+}
+.page td[colspan="2"] {
+     text-align: left;
+     padding: 0 0 10px 0;
+}
+
+.page td[colspan="2"] hr {
+     display: none;]
+}
+
+/* login + misc mods */
+
+div.notifications {
+     text-align: center;
+     padding: 0 0 20px;
+}
+
+div#dologin {
+     border: 1px solid #443da0;
+     margin: 20px auto;
+     width: 600px;
+     padding: 0 0 10px;
+     background: #010010;
+     border-radius: 2px;
+     background: linear-gradient(to bottom, #000000, #060050%, #0100100%);
+     background: url(images/hatter_med.png) right bottom no-repeat, linear-gradient(to bottom, #000000, #000600 50%, #000010 100%);
+}
+
+#dologin h1 {
+     border: 1px solid #443da0;
+     padding: 10px 10px 10px 48px;
+     margin: -1px -1px 15px -1px;
+     border-radius: 2px 2px 0 0;
+     text-transform: uppercase;
+     font-size: 14pt;
+     letter-spacing:0.08em;
+     word-spacing: 0.1em;
+     text-align:left;
+     background: #020020 url("/themes/console/images/email.png") 8px center no-repeat;
+     background: url("images/mail.png") 8px center no-repeat, linear-gradient(to bottom, #191729 0%, #000 50%) !important;
+     text-shadow: 0 1px 1px #000;
+     box-shadow: inset 0 0 0 1px #000;
+}
+
+#dologin table {
+     width: 100%;
+     margin-bottom: -9px;
+     border-collapse: collapse;
+     border-spacing: 0 !important;
+}
+
+#dologin td {
+     padding: 1px 2px !important;
+}
+
+#dologin td:first-child {
+     width: 29%;
+     white-space: nowrap;
+}
+
+#dologin td:last-child {
+     width: 71%;
+     white-space: nowrap;
+}
+
+#dologin td[colspan="2"] {
+     text-align: center;
+     padding: 3px 3px 5px !important;
+}
+
+#dologin hr {
+     display: block;
+     background: #040033;
+     box-shadow: 0 1px 1px 1px #000;
+     margin: 5px 0 8px;
+     opacity: 0.5;
+}
+
+div.notifications + div#dologin {
+     margin-top: 0;
+}
+
+h3#config {
+     border: 1px solid #443da0;
+     padding: 5px;
+     margin: 3px auto 18px auto;
+     width: 400px;
+     font-size: 10pt;
+     text-transform: uppercase;
+     letter-spacing: 0.08em;
+     word-spacing: 0.1em;
+     background: #020017;
+     border-radius: 0 0 2px 2px;
+     background: linear-gradient(to bottom, #010010 0%, #020019 50%, #060051%, #0100100%) !important;
+}
+
+div#mailheader {
+     padding: 10px;
+     margin: 3px -1px;
+     border: 1px solid #443da0;
+     font-size: 10pt !important;
+     background: #020019;
+}
+
+#mailheader table {
+     min-width: 300px;
+}
+
+#mailheader table td {
+     font-size: 10pt;
+}
+
+#mailheader table td:first-child {
+     white-space: nowrap;
+     width: 20px;
+}
+
+p.mailbody {
+     margin: 0;
+     background: #000;
+     padding: 5px 20px 20px !important;
+}
+
+.mailbody + hr, #attached + hr {
+     display: none;
+}
+
+div.attached {
+     border: 1px solid #443da0;
+     margin: 0 -1px -1px;
+     border-radius: 0 0 2px 2px;
+     padding: 10px 10px 10px 30px !important;
+     background: #020019 url(images/attach.png) 5px center no-repeat;
+     background-size: 20px 20px;
+}
+
+.iframed div.attached {
+     border-left: none;
+     border-right: none;
+     border-radius: 0;
+}
+
+.attached p.mailbody {
+     padding: 5px !important;
+     background: none;
+}
+
+.attached img {
+     border: 1px solid #443da0;
+     border-radius: 2px;
+}
+
+div#emptymailbox {
+     padding: 20px 10px;
+}
+
+table#pagenav {
+     width: 100%;
+     margin: 7px auto -3px;
+     border-top: 1px solid #443da0;
+     background: #000;
+     background: linear-gradient(to bottom, #010010 0%, #020019 50%, #060051%, #0100100%) !important;
+}
+
+table#pagenav td {
+     white-space: nowrap;
+     font-size: 10pt;
+     font-weight: bold;
+     letter-spacing: 0.1em;
+     word-spacing: 0.1em;
+     padding: 3px 5px;
+     text-align: center;
+     color: #c9ceff;
+}
+
+table#pagenav td:first-child {
+     text-align: right;
+     width: 46%;
+}
+
+table#pagenav td:nth-child(2) {
+     text-align: center !important;
+     min-width: 100px;
+}
+
+table#pagenav td:last-child {
+     text-align: left;
+     width: 46%;
+}
+
+.topbuttons table#pagenav {
+     margin-bottom: -8px;
+}
+
+.bottombuttons table#pagenav {
+     margin-top: -2px;
+}
+
+div#bottombuttons { /* config page button positioning */
+     margin: -6px 0 15px;
+}
+
+#pagenav input:disabled, #pagenav input:disabled:hover, #pagenav input:disabled:active {
+     border: 1px solid #3e3d4b !important;
+     cursor: default;
+     opacity: 0.5;
+     box-shadow: none !important;
+     background: #652787 !important;
+     display: inline;
+}
+
+#pagenav input[type="submit"] {
+     font-size: 0;
+     width: 22px !important;
+     min-width: 22px !important;
+     height: 22px;
+     margin: 3px 1px !important;
+}
+
+#pagenav input.firstpage {
+     background: #000 url(images/first.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.firstpage:hover {
+     background: #000 url(images/first_hover.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.firstpage:active {
+     background: #652787 url(images/first_active.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input[name="firstpage"]:disabled {
+     background: #000 url(images/first_disabled.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.prevpage {
+     background: #000 url(images/previous.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.prevpage:hover {
+     background: #000 url(images/previous_hover.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.prevpage:active {
+     background: #652787 url(images/previous_active.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input[name="prevpage"]:disabled {
+     background: #000 url(images/previous_disabled.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.nextpage {
+     background: #000 url(images/next.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.nextpage:hover {
+     background: #000 url(images/next_hover.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.nextpage:active {
+     background: #652787 url(images/next_active.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input[name="nextpage"]:disabled {
+     background: #000 url(images/next_disabled.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.lastpage {
+     background: #000 url(images/last.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.lastpage:hover {
+     background: #000 url(images/last_hover.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input.lastpage:active {
+     background: #652787 url(images/last_active.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+#pagenav input[name="lastpage"]:disabled {
+     background: #000 url(images/last_disabled.png) center center no-repeat !important;
+     background-size: 12px 12px !important;
+}
+
+/* end pagenav */
+
+#prefsave {
+     padding: 10px 10px 20px;
+}
+
+
+/* illustrated buttons inc */
+
+input[type="submit"][class], input[type="cancel"][class],
+input[type="submit"][class]:hover, input[type="cancel"][class]:hover,
+input[type="submit"][class]:focus, input[type="cancel"][class]:focus {
+     background-size: 14px 14px, 100% 100% !important;
+}
+
+input.cancel {
+     background: #000 url(/themes/console/images/buttons/no.png) no-repeat 6px center !important;
+     background: url(/themes/console/images/buttons/no.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.cancel:hover, input.cancel:focus {
+     background: #000 url(/themes/console/images/buttons/no.png) no-repeat 6px center !important;
+}
+
+input.clearselection {
+     background: #000 url(/themes/susimail/images/none.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/none.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.clearselection:hover, input.clearselection:focus {
+     background: #000 url(/themes/susimail/images/none.png) no-repeat 6px center !important;
+}
+
+input.delete, input.delete_attachment, input.really_delete {
+     background: #000 url(/themes/console/images/buttons/delete.png) no-repeat 6px center !important;
+     background: url(/themes/console/images/buttons/delete.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.delete:hover, input.delete_attachment:hover, input.really_delete:hover,
+input.delete:focus, input.delete_attachment:focus, input.really_delete:focus {
+     background: #000 url(/themes/console/images/buttons/delete_hover.png) no-repeat 6px center !important;
+}
+
+input.download {
+     background: #000 url(/themes/console/images/buttons/download.png) no-repeat 6px center !important;
+     background: url(/themes/console/images/buttons/download.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.download:hover, input.download:focus {
+     background: #000 url(/themes/console/images/buttons/download.png) no-repeat 6px center !important;
+}
+
+input.offline {
+     background: #000 url(/themes/susimail/images/offline.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/offline.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.offline:hover, input.offline:focus {
+     background: #000 url(/themes/susimail/images/offline_hover.png) no-repeat 6px center !important;
+}
+
+input.list {
+     background: #000 url(/themes/susimail/images/folder.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/folder.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.list:hover, input.list:focus {
+     background: #000 url(/themes/susimail/images/folder-open.png) no-repeat 6px center !important;
+}
+
+input.forward {
+     background: #000 url(/themes/susimail/images/forward.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/forward.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.forward:hover, input.forward:focus {
+     background: #000 url(/themes/susimail/images/forward.png) no-repeat 6px center !important;
+}
+
+input.login {
+     background: #000 url(/themes/susimail/images/login.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/login.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.login:hover, input.login:focus {
+     background: #000 url(/themes/susimail/images/login_hover.png) no-repeat 6px center !important;
+}
+
+input.logout {
+     background: #000 url(/themes/susimail/images/logout.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/logout.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.logout:hover, input.logout:focus {
+     background: #000 url(/themes/susimail/images/logout_hover.png) no-repeat 6px center !important;
+}
+
+input.reload, input.refresh {
+     background: #000 url(/themes/console/images/buttons/update.png) no-repeat 6px center !important;
+     background: url(/themes/console/images/buttons/update.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.reload:hover, input.refresh:hover,
+input.reload:focus, input.refresh:focus {
+     background: #000 url(/themes/console/images/buttons/update_hover.png) no-repeat 6px center !important;
+}
+
+input.invertselection {
+     background: #000 url(/themes/susimail/images/selection.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/selection.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.invertselection:hover, input.invertselection:focus {
+     background: #000 url(/themes/susimail/images/selection.png) no-repeat 6px center !important;
+}
+
+input.show {
+     background: #000 url(/themes/console/images/buttons/yes.png) no-repeat 6px center !important;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.show:hover, input.show:focus {
+     background: #000 url(/themes/console/images/buttons/yes.png) no-repeat 6px center !important;
+}
+
+input.markall {
+     background: #000 url(/themes/susimail/images/all.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/all.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.markall:hover, input.markall:focus {
+     background: #000 url(/themes/susimail/images/all.png) no-repeat 6px center !important;
+}
+
+input.new {
+     background: #000 url(/themes/susimail/images/compose.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/compose.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.new:hover, input.new:focus {
+     background: #000 url(/themes/susimail/images/compose_hover.png) no-repeat 6px center !important;
+}
+
+input.reply {
+     background: #000 url(/themes/susimail/images/reply.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/reply.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.reply:hover, input.reply:focus {
+     background: #000 url(/themes/susimail/images/reply.png) no-repeat 6px center !important;
+}
+
+input.replyall {
+     background: #000 url(/themes/susimail/images/reply-all.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/reply-all.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.replyall:hover, input.replyall:focus {
+     background: #000 url(/themes/susimail/images/reply-all.png) no-repeat 6px center !important;
+}
+
+input.setpagesize, input.save {
+     background: #000 url(/themes/console/images/buttons/yes.png) no-repeat 6px center !important;
+     background: url(/themes/console/images/buttons/yes.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.setpagesize:hover, input.save:hover,
+input.setpagesize:focus, input.save:focus {
+     background: #000 url(/themes/console/images/buttons/yes.png) no-repeat 6px center !important;
+}
+
+input.send {
+     background: #000 url(/themes/susimail/images/send.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/send.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.send:hover, input.send:focus {
+     background: #000 url(/themes/susimail/images/send_hover.png) no-repeat 6px center !important;
+}
+
+input.configure {
+     background: #000 url(/themes/console/images/buttons/configure.png) no-repeat 6px center !important;
+     background: url(/themes/console/images/buttons/configure.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.configure:hover, input.configure:focus {
+     background: #000 url(/themes/console/images/buttons/configure_hover.png) no-repeat 6px center !important;
+}
+
+input.saveas {
+     background: #000 url(/themes/susimail/images/save.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/save.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.saveas:hover, input.saveas:focus {
+     background: #000 url(/themes/susimail/images/save_hover.png) no-repeat 6px center !important;
+}
+
+input.new_upload {
+     background: #000 url(/themes/susimail/images/attach.png) no-repeat 6px center !important;
+     background: url(/themes/susimail/images/attach.png) no-repeat 6px center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 7px 5px 23px !important;
+}
+
+input.new_upload:hover, input.new_upload:focus {
+     background: #000 url(/themes/susimail/images/attach.png) no-repeat 6px center !important;
+}
+
+/* pagenav */
+
+input.firstpage, input[name="firstpage"],
+input.firstpage[disabled]:hover, input[name="firstpage"][disabled]:hover {
+     background: #000 url(/themes/susimail/images/first.png) no-repeat center center;
+     background: url(/themes/susimail/images/first.png) no-repeat center center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 10px !important;
+     text-indent: -99999px;
+     background-size
+}
+
+input.firstpage:hover, input[name="firstpage"]:hover,
+input.firstpage:focus, input[name="firstpage"]:focus {
+     background: #000 url(/themes/susimail/images/first.png) no-repeat center center;
+}
+
+input.lastpage, input[name="lastpage"],
+input.lastpage[disabled]:hover, input[name="lastpage"][disabled]:hover,
+input.lastpage[disabled]:focus, input[name="lastpage"][disabled]:focus {
+     background: #000 url(/themes/susimail/images/last.png) no-repeat center center;
+     background: url(/themes/susimail/images/last.png) no-repeat center center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 10px !important;
+     text-indent: -99999px;
+}
+
+input.lastpage:hover, input[name="lastpage"]:hover,
+input.lastpage:focus, input[name="lastpage"]:focus {
+     background: #000 url(/themes/susimail/images/last.png) no-repeat center center;
+}
+
+input.prevpage, input.prev, input[name="prev"], input[name="prevpage"],
+input.prevpage[disabled]:hover, input.prev[disabled]:hover, input[name="prev"][disabled]:hover, input[name="prevpage"][disabled]:hover,
+input.prevpage[disabled]:focus, input.prev[disabled]:focus, input[name="prev"][disabled]:focus, input[name="prevpage"][disabled]:focus {
+     background: #000 url(/themes/susimail/images/previous.png) no-repeat center center;
+     background: url(/themes/susimail/images/previous.png) no-repeat center center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 10px !important;
+     text-indent: -99999px;
+}
+
+input.prevpage:hover, input.prev, input[name="prev"]:hover, input[name="prevpage"]:hover,
+input.prevpage:focus, input.prev, input[name="prev"]:focus, input[name="prevpage"]:focus {
+     background: #000 url(/themes/susimail/images/previous.png) no-repeat center center !important;
+}
+
+input.nextpage, input.next, input[name="nextpage"], input[name="next"],
+input.nextpage[disabled]:hover, input.next[disabled]:hover, input[name="nextpage"][disabled]:hover, input[name="next"][disabled]:hover,
+input.nextpage[disabled]:focus, input.next[disabled]:focus, input[name="nextpage"][disabled]:focus, input[name="next"][disabled]:focus {
+     background: #000 url(/themes/susimail/images/next.png) no-repeat center center;
+     background: url(/themes/susimail/images/next.png) no-repeat center center, linear-gradient(to bottom, #1f1e32, #090812 50%, #000 50%) !important;
+     padding: 5px 10px !important;
+     text-indent: -99999px;
+}
+
+input.nextpage:hover, input.next:hover, input[name="nextpage"]:hover,
+input.nextpage:focus, input.next:focus, input[name="nextpage"]:focus {
+     background: #000 url(/themes/susimail/images/next.png) no-repeat center center !important;
+}
+
+input.prev, input[name="next"], input.prev[disabled], input[name="next"][disabled],
+input.prev:hover, input[name="next"]:hover, input.prev[disabled]:hover, input[name="next"][disabled]:hover {
+     padding: 5px 15px !important;
+}
+
+input[type="submit"][disabled], input[type="submit"][disabled]:hover, input[type="submit"][disabled]:focus, input[type="submit"][disabled]:active {
+     opacity: 0.5;
+     box-shadow: none;
+     cursor: default;
+     border: 1px solid #3e3f8f !important;
+     border-bottom-color: #14144f !important;
+     border-right-color: #14144f !important;
+}
+
+/* end pagenav */
+
+/* end illustrated buttons */
+
+input[type=submit]:active, input.cancel:active {
+     border: 1px solid #652787;
+     background-color: #652787 !important;
+     background-blend-mode: luminosity;
+     color: #c9ceff !important;
+     box-shadow: inset 3px 3px 3px #000 !important;
+     box-shadow: inset 0 0 0 1px #000, inset 3px 3px 3px #000 !important;
+}
+
+/* responsive layout */
+
+@media screen and (max-width: 700px) {
+.topbuttons input[type="submit"], .topbuttons input[type="reset"] {
+     min-width: 50px !important;
+     margin: 3px 5px !important;
+}
+}
+
+@media screen and (min-width: 1024px) {
+body, td, textarea, div, p.mailbody {
+     font-size: 10pt !important;
+}
+
+.topbuttons input[type="submit"], .topbuttons input[type="reset"] {
+     margin: 3px 5px !important;
+}
+}
+
+@media screen and (min-width: 1500px) {
+input, input[type="submit"], input[type="reset"], p.error {
+     font-size: 10pt !important;
+}
+
+#pagenav input {
+     font-size: 0 !important;
+}
+}
+
+/* end responsive layout */
+
+/* Edge/IE tweaks */
+_:-ms-lang(x), * {
+     filter: none !important;
+}
+
+/* end Edge/IE tweaks */
diff --git a/licenses/LICENSE-FugueIcons.txt b/licenses/LICENSE-FugueIcons.txt
new file mode 100644
index 0000000000000000000000000000000000000000..4fc7b75deadc4c878969d7d09a35e684f2dbab0a
--- /dev/null
+++ b/licenses/LICENSE-FugueIcons.txt
@@ -0,0 +1,80 @@
+Fugue Icons
+
+(C) 2013 Yusuke Kamiyamane. All rights reserved.
+
+These icons are licensed under a Creative Commons
+Attribution 3.0 License.
+<http://creativecommons.org/licenses/by/3.0/>
+
+If you can't or don't want to provide attribution, please
+purchase a royalty-free license.
+<http://p.yusukekamiyamane.com/>
+
+I'm unavailable for custom icon design work. But your
+suggestions are always welcome!
+<mailto:p@yusukekamiyamane.com>
+
+------------------------------------------------------------
+
+All logos and trademarks in some icons are property of their
+respective owners.
+
+------------------------------------------------------------
+
+- geotag
+
+  (C) Geotag Icon Project. All rights reserved.
+  <http://www.geotagicons.com/>
+
+  Geotag icon is licensed under a Creative Commons
+  Attribution-Share Alike 3.0 License or LGPL.
+  <http://creativecommons.org/licenses/by-sa/3.0/>
+  <http://opensource.org/licenses/lgpl-license.php>
+
+- language
+
+  (C) Language Icon Project. All rights reserved.
+  <http://www.languageicon.org/>
+
+  Language icon is licensed under a Creative Commons
+  Attribution-Share Alike 3.0 License.
+  <http://creativecommons.org/licenses/by-sa/3.0/>
+
+- open-share
+
+  (C) Open Share Icon Project. All rights reserved.
+  <http://www.openshareicons.com/>
+
+  Open Share icon is licensed under a Creative Commons
+  Attribution-Share Alike 3.0 License.
+  <http://creativecommons.org/licenses/by-sa/3.0/>
+
+- opml
+
+  (C) OPML Icon Project. All rights reserved.
+  <http://opmlicons.com/>
+
+  OPML icon is licensed under a Creative Commons
+  Attribution-Share Alike 2.5 License.
+  <http://creativecommons.org/licenses/by-sa/2.5/>
+
+- share
+
+  (C) Share Icon Project. All rights reserved.
+  <http://shareicons.com/>
+
+  Share icon is licensed under a GPL or LGPL or BSD or
+  Creative Commons Attribution 2.5 License.
+  <http://opensource.org/licenses/gpl-license.php>
+  <http://opensource.org/licenses/lgpl-license.php>
+  <http://opensource.org/licenses/bsd-license.php>
+  <http://creativecommons.org/licenses/by/2.5/>
+
+- xfn
+
+  (C) Wolfgang Bartelme. All rights reserved.
+  <http://www.bartelme.at/>
+
+  XFN icon is licensed under a Creative Commons
+  Attribution-Share Alike 2.5 License.
+  <http://creativecommons.org/licenses/by-sa/2.5/>
\ No newline at end of file
diff --git a/router/java/src/net/i2p/router/Blocklist.java b/router/java/src/net/i2p/router/Blocklist.java
index 1e239e9be0264dff72549b6a4d8358419d96bfb5..38a5b79399318b001c7a1c99d2be87f9bfc279cb 100644
--- a/router/java/src/net/i2p/router/Blocklist.java
+++ b/router/java/src/net/i2p/router/Blocklist.java
@@ -1017,48 +1017,58 @@ public class Blocklist {
         Set<Integer> singles = new TreeSet<Integer>();
         singles.addAll(_singleIPBlocklist);
         if (!(singles.isEmpty() && _singleIPv6Blocklist.isEmpty())) {
-            out.write("<table><tr><th align=\"center\" colspan=\"2\"><b>");
+            out.write("<table id=\"bannedips\"><tr><td>");
+            out.write("<table id=\"banneduntilrestart\"><tr><th align=\"center\"><b>");
             out.write(_t("IPs Banned Until Restart"));
-            out.write("</b></td></tr>");
+            out.write("</b></th></tr>");
+            if (!singles.isEmpty()) {
+                out.write("<tr id=\"ipv4\" align=\"center\"><td><b>");
+                out.write(_t("IPv4 Addresses"));
+                out.write("</b></td></tr>");
+            }
             // first 0 - 127
             for (Integer ii : singles) {
                  int ip = ii.intValue();
                  if (ip < 0)
                      continue;
-                 out.write("<tr><td align=\"center\" width=\"50%\">");
+                 out.write("<tr><td align=\"center\">");
                  out.write(toStr(ip));
-                 out.write("</td><td width=\"50%\">&nbsp;</td></tr>\n");
+                 out.write("</td></tr>\n");
             }
             // then 128 - 255
             for (Integer ii : singles) {
                  int ip = ii.intValue();
                  if (ip >= 0)
                      break;
-                 out.write("<tr><td align=\"center\" width=\"50%\">");
+                 out.write("<tr><td align=\"center\">");
                  out.write(toStr(ip));
-                 out.write("</td><td width=\"50%\">&nbsp;</td></tr>\n");
+                 out.write("</td></tr>\n");
             }
             // then IPv6
             if (!_singleIPv6Blocklist.isEmpty()) {
+                out.write("<tr id=\"ipv6\" align=\"center\"><td><b>");
+                out.write(_t("IPv6 Addresses"));
+                out.write("</b></td></tr>");
                 List<BigInteger> s6;
                 synchronized(_singleIPv6Blocklist) {
                     s6 = new ArrayList<BigInteger>(_singleIPv6Blocklist.keySet());
                 }
                 Collections.sort(s6);
                 for (BigInteger bi : s6) {
-                     out.write("<tr><td align=\"center\" width=\"50%\">");
+                     out.write("<tr><td align=\"center\">");
                      out.write(Addresses.toString(toIPBytes(bi)));
-                     out.write("</td><td width=\"50%\">&nbsp;</td></tr>\n");
+                     out.write("</td></tr>\n");
                 }
             }
             out.write("</table>");
         }
         if (_blocklistSize > 0) {
-            out.write("<table><tr><th align=\"center\" colspan=\"2\"><b>");
+            out.write("</td><td>");
+            out.write("<table id=\"permabanned\"><tr><th align=\"center\" colspan=\"3\"><b>");
             out.write(_t("IPs Permanently Banned"));
-            out.write("</b></th></tr><tr><td align=\"center\" width=\"50%\"><b>");
+            out.write("</b></th></tr><tr><td align=\"center\" width=\"49%\"><b>");
             out.write(_t("From"));
-            out.write("</b></td><td align=\"center\" width=\"50%\"><b>");
+            out.write("</b></td><td></td><td align=\"center\" width=\"49%\"><b>");
             out.write(_t("To"));
             out.write("</b></td></tr>");
             int max = Math.min(_blocklistSize, MAX_DISPLAY);
@@ -1068,12 +1078,16 @@ public class Blocklist {
                  int from = getFrom(_blocklist[i]);
                  if (from < 0)
                      continue;
-                 out.write("<tr><td align=\"center\" width=\"50%\">"); out.write(toStr(from)); out.write("</td><td align=\"center\" width=\"50%\">");
+                 out.write("<tr><td align=\"center\" width=\"49%\">");
+                 out.write(toStr(from));
+                 out.write("</td>");
                  int to = getTo(_blocklist[i]);
                  if (to != from) {
-                     out.write(toStr(to)); out.write("</td></tr>\n");
+                     out.write("<td align=\"center\">-</td><td align=\"center\" width=\"49%\">");
+                     out.write(toStr(to));
+                     out.write("</td></tr>\n");
                  } else
-                     out.write("&nbsp;</td></tr>\n");
+                     out.write("<td></td><td width=\"49%\">&nbsp;</td></tr>\n");
                  displayed++;
             }
             // then 128 - 255
@@ -1081,18 +1095,23 @@ public class Blocklist {
                  int from = getFrom(_blocklist[i]);
                  if (from >= 0)
                      break;
-                 out.write("<tr><td align=\"center\" width=\"50%\">"); out.write(toStr(from)); out.write("</td><td align=\"center\" width=\"50%\">");
+                 out.write("<tr><td align=\"center\" width=\"49%\">");
+                 out.write(toStr(from));
+                 out.write("</td>");
                  int to = getTo(_blocklist[i]);
                  if (to != from) {
-                     out.write(toStr(to)); out.write("</td></tr>\n");
+                     out.write("<td align=\"center\">-</td><td align=\"center\" width=\"49%\">");
+                     out.write(toStr(to));
+                     out.write("</td></tr>\n");
                  } else
-                     out.write("&nbsp;</td></tr>\n");
+                     out.write("<td></td><td width=\"49%\">&nbsp;</td></tr>\n");
             }
             if (_blocklistSize > MAX_DISPLAY)
                 // very rare, don't bother translating
                 out.write("<tr><th colspan=2>First " + MAX_DISPLAY + " displayed, see the " +
                           BLOCKLIST_FILE_DEFAULT + " file for the full list</th></tr>");
             out.write("</table>");
+            out.write("</td></tr></table>");
         } else {
             out.write("<br><i>");
             out.write(_t("none"));
diff --git a/router/java/src/net/i2p/router/PersistentKeyRing.java b/router/java/src/net/i2p/router/PersistentKeyRing.java
index 920eec7d298c34f8888bc79f57da829cd18b22e0..f7dadc6c5e666026fa706e211c085fd2ef210752 100644
--- a/router/java/src/net/i2p/router/PersistentKeyRing.java
+++ b/router/java/src/net/i2p/router/PersistentKeyRing.java
@@ -64,7 +64,7 @@ public class PersistentKeyRing extends KeyRing {
     @Override
     public void renderStatusHTML(Writer out) throws IOException {
         StringBuilder buf = new StringBuilder(1024);
-        buf.append("\n<table><tr><th align=\"left\">Destination Hash<th align=\"left\">Name or Dest.<th align=\"left\">Encryption Key</tr>");
+        buf.append("\n<table class=\"configtable\"><tr><th align=\"left\">Destination Hash<th align=\"left\">Name or Dest.<th align=\"left\">Encryption Key</tr>");
         for (Entry<Hash, SessionKey> e : entrySet()) {
             buf.append("\n<tr><td>");
             Hash h = e.getKey();
diff --git a/router/java/src/net/i2p/router/transport/TransportManager.java b/router/java/src/net/i2p/router/transport/TransportManager.java
index 9e6c9a953c29a27c1b7767793450abe99a057925..54553657b168f78fc19b3010640067535e9dcc4b 100644
--- a/router/java/src/net/i2p/router/transport/TransportManager.java
+++ b/router/java/src/net/i2p/router/transport/TransportManager.java
@@ -721,7 +721,7 @@ public class TransportManager implements TransportEventListener {
      */
     public void renderStatusHTML(Writer out, String urlBase, int sortFlags) throws IOException {
         if (_context.getBooleanProperty(PROP_ADVANCED)) {
-            out.write("<p><b>");
+            out.write("<p id=\"upnpstatus\"><b>");
             out.write(_t("Status"));
             out.write(": ");
             out.write(_t(getReachabilityStatus().toStatusString()));
@@ -740,7 +740,7 @@ public class TransportManager implements TransportEventListener {
         }
 
         StringBuilder buf = new StringBuilder(4*1024);
-        buf.append("<h3>").append(_t("Router Transport Addresses")).append("</h3><pre>\n");
+        buf.append("<h3 id=\"transports\">").append(_t("Router Transport Addresses")).append("</h3><pre id=\"transports\">\n");
         for (Transport t : _transports.values()) {
             if (t.hasCurrentAddress()) {
                 for (RouterAddress ra : t.getCurrentAddresses()) {
@@ -759,7 +759,7 @@ public class TransportManager implements TransportEventListener {
         } else if (_upnpManager != null) {
             out.write(_upnpManager.renderStatusHTML());
         } else {
-            out.write("<h3><a name=\"upnp\"></a>" + _t("UPnP is not enabled") + "</h3>\n");
+            out.write("<h3 id=\"upnpstatus\"><a name=\"upnp\"></a>" + _t("UPnP is not enabled") + "</h3>\n");
         }
         out.write("</p>\n");
         out.flush();
@@ -768,39 +768,36 @@ public class TransportManager implements TransportEventListener {
 
     private final String getTransportsLegend() {
         StringBuilder buf = new StringBuilder(1024);
-        buf.append("<h3 id=\"help\">").append(_t("Help")).append("</h3><div class=\"configure\"><p>")
+        buf.append("<p class=\"infohelp\">")
            .append(_t("Your transport connection limits are automatically set based on your configured bandwidth."))
            .append('\n')
            .append(_t("To override these limits, add the settings i2np.ntcp.maxConnections=nnn and i2np.udp.maxConnections=nnn on the advanced configuration page."))
-           .append("</p></div>\n");
-        buf.append("<h3>").append(_t("Definitions")).append("</h3><div class=\"configure\">" +
-                   "<p><b id=\"def.peer\">").append(_t("Peer")).append("</b>: ").append(_t("The remote peer, identified by router hash")).append("<br>\n" +
-                   "<b id=\"def.dir\">").append(_t("Dir")).append("</b>: " +
-                   "<img alt=\"Inbound\" src=\"/themes/console/images/inbound.png\"> ").append(_t("Inbound connection")).append("<br>\n" +
-                   "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
-                   "<img alt=\"Outbound\" src=\"/themes/console/images/outbound.png\"> ").append(_t("Outbound connection")).append("<br>\n" +
-                   "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
-                   "<img src=\"/themes/console/images/inbound.png\" alt=\"V\" height=\"8\" width=\"12\"> ").append(_t("They offered to introduce us (help other peers traverse our firewall)")).append("<br>\n" +
-                   "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
-                   "<img src=\"/themes/console/images/outbound.png\" alt=\"^\" height=\"8\" width=\"12\"> ").append(_t("We offered to introduce them (help other peers traverse their firewall)")).append("<br>\n" +
-                   "<b id=\"def.idle\">").append(_t("Idle")).append("</b>: ").append(_t("How long since a packet has been received / sent")).append("<br>\n" +
-                   "<b id=\"def.rate\">").append(_t("In/Out")).append("</b>: ").append(_t("The smoothed inbound / outbound transfer rate (KBytes per second)")).append("<br>\n" +
-                   "<b id=\"def.up\">").append(_t("Up")).append("</b>: ").append(_t("How long ago this connection was established")).append("<br>\n" +
-                   "<b id=\"def.skew\">").append(_t("Skew")).append("</b>: ").append(_t("The difference between the peer's clock and your own")).append("<br>\n" +
-                   "<b id=\"def.cwnd\">CWND</b>: ").append(_t("The congestion window, which is how many bytes can be sent without an acknowledgement")).append(" / <br>\n" +
-                   "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ").append(_t("The number of sent messages awaiting acknowledgement")).append(" /<br>\n" +
-                   "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ").append(_t("The maximum number of concurrent messages to send")).append(" /<br>\n"+
-                   "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ").append(_t("The number of pending sends which exceed congestion window")).append("<br>\n" +
-                   "<b id=\"def.ssthresh\">SST</b>: ").append(_t("The slow start threshold")).append("<br>\n" +
-                   "<b id=\"def.rtt\">RTT</b>: ").append(_t("The round trip time in milliseconds")).append("<br>\n" +
-                   //"<b id=\"def.dev\">").append(_t("Dev")).append("</b>: ").append(_t("The standard deviation of the round trip time in milliseconds")).append("<br>\n" +
-                   "<b id=\"def.rto\">RTO</b>: ").append(_t("The retransmit timeout in milliseconds")).append("<br>\n" +
-                   "<b id=\"def.mtu\">MTU</b>: ").append(_t("Current maximum send packet size / estimated maximum receive packet size (bytes)")).append("<br>\n" +
-                   "<b id=\"def.send\">").append(_t("TX")).append("</b>: ").append(_t("The total number of messages sent to the peer")).append("<br>\n" +
-                   "<b id=\"def.recv\">").append(_t("RX")).append("</b>: ").append(_t("The total number of messages received from the peer")).append("<br>\n" +
-                   "<b id=\"def.resent\">").append(_t("Dup TX")).append("</b>: ").append(_t("The total number of packets retransmitted to the peer")).append("<br>\n" +
-                   "<b id=\"def.dupRecv\">").append(_t("Dup RX")).append("</b>: ").append(_t("The total number of duplicate packets received from the peer")).append("</p>" +
-                   "</div>\n");
+           .append("</p>\n");
+        buf.append("<h3 class=\"tabletitle\">").append(_t("Definitions")).append("</h3>")
+           .append("<table id=\"peerdefs\">\n")
+           .append("<tr><td><b id=\"def.peer\">").append(_t("Peer")).append("</b></td><td>").append(_t("The remote peer, identified by router hash")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.dir\">").append(_t("Dir")).append("</b></td><td><img alt=\"Inbound\" src=\"/themes/console/images/inbound.png\"> ").append(_t("Inbound connection")).append("</td></tr>\n")
+           .append("<tr><td></td><td><img alt=\"Outbound\" src=\"/themes/console/images/outbound.png\"> ").append(_t("Outbound connection")).append("</td></tr>\n")
+           .append("<tr><td></td><td><img src=\"/themes/console/images/inbound.png\" alt=\"V\" height=\"8\" width=\"12\"> ").append(_t("They offered to introduce us (help other peers traverse our firewall)")).append("</td></tr>\n")
+           .append("<tr><td></td><td><img src=\"/themes/console/images/outbound.png\" alt=\"^\" height=\"8\" width=\"12\"> ").append(_t("We offered to introduce them (help other peers traverse their firewall)")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.idle\">").append(_t("Idle")).append("</b></td><td>").append(_t("How long since a packet has been received / sent")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.rate\">").append(_t("In/Out")).append("</b></td><td>").append(_t("The smoothed inbound / outbound transfer rate (KBytes per second)")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.up\">").append(_t("Up")).append("</b></td><td>").append(_t("How long ago this connection was established")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.skew\">").append(_t("Skew")).append("</b></td><td>").append(_t("The difference between the peer's clock and your own")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.cwnd\">CWND</b></td><td>").append(_t("The congestion window, which is how many bytes can be sent without an acknowledgement")).append(" / </td></tr>\n")
+           .append("<tr><td></td><td>").append(_t("The number of sent messages awaiting acknowledgement")).append(" /</td></tr>\n")
+           .append("<tr><td></td><td>").append(_t("The maximum number of concurrent messages to send")).append(" /</td></tr>\n")
+           .append("<tr><td></td><td>").append(_t("The number of pending sends which exceed congestion window")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.ssthresh\">SST</b></td><td>").append(_t("The slow start threshold")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.rtt\">RTT</b></td><td>").append(_t("The round trip time in milliseconds")).append("</td></tr>\n")
+           //.append("<tr><td><b id=\"def.dev\">").append(_t("Dev")).append("</b></td><td>").append(_t("The standard deviation of the round trip time in milliseconds")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.rto\">RTO</b></td><td>").append(_t("The retransmit timeout in milliseconds")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.mtu\">MTU</b></td><td>").append(_t("Current maximum send packet size / estimated maximum receive packet size (bytes)")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.send\">").append(_t("TX")).append("</b></td><td>").append(_t("The total number of messages sent to the peer")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.recv\">").append(_t("RX")).append("</b></td><td>").append(_t("The total number of messages received from the peer")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.resent\">").append(_t("Dup TX")).append("</b></td><td>").append(_t("The total number of packets retransmitted to the peer")).append("</td></tr>\n")
+           .append("<tr><td><b id=\"def.dupRecv\">").append(_t("Dup RX")).append("</b></td><td>").append(_t("The total number of duplicate packets received from the peer")).append("</td></tr>\n")
+           .append("</table>");
         return buf.toString();
     }
 
diff --git a/router/java/src/net/i2p/router/transport/ntcp/NTCPTransport.java b/router/java/src/net/i2p/router/transport/ntcp/NTCPTransport.java
index 90138313b8dad6eca4302a298a24aa31c1bf0e9c..29a6abc105057b2bcc6c53460f886f4de2e1bf44 100644
--- a/router/java/src/net/i2p/router/transport/ntcp/NTCPTransport.java
+++ b/router/java/src/net/i2p/router/transport/ntcp/NTCPTransport.java
@@ -1368,7 +1368,7 @@ public class NTCPTransport extends TransportImpl {
             buf.append(". ").append(_t("Status")).append(": ").append(_t(getReachabilityStatus().toStatusString()));
         }
         buf.append(".</h3>\n" +
-                   "<table>\n" +
+                   "<div class=\"widescroll\"><table id=\"ntcpconnections\">\n" +
                    "<tr><th><a href=\"#def.peer\">").append(_t("Peer")).append("</a></th>" +
                    "<th>").append(_t("Dir")).append("</th>" +
                    "<th>").append(_t("IPv6")).append("</th>" +
@@ -1379,7 +1379,7 @@ public class NTCPTransport extends TransportImpl {
                    "<th align=\"right\"><a href=\"#def.send\">").append(_t("TX")).append("</a></th>" +
                    "<th align=\"right\"><a href=\"#def.recv\">").append(_t("RX")).append("</a></th>" +
                    "<th>").append(_t("Out Queue")).append("</th>" +
-                   "<th>").append(_t("Backlogged?")).append("</th>" +
+                   "<th title=\"").append(_t("Is peer backlogged?")).append("\">").append(_t("Backlogged?")).append("</th>" +
                    //"<th>").append(_t("Reading?")).append("</th>" +
                    " </tr>\n");
         out.write(buf.toString());
@@ -1397,7 +1397,7 @@ public class NTCPTransport extends TransportImpl {
                 buf.append("<img src=\"/themes/console/images/outbound.png\" alt=\"Outbound\" title=\"").append(_t("Outbound")).append("\"/>");
             buf.append("</td><td class=\"cells\" align=\"center\">");
             if (con.isIPv6())
-                buf.append("&#x2713;");
+                buf.append("<span class=\"backlogged\">&#x2714;</span>");
             else
                 buf.append("&nbsp;");
             buf.append("</td><td class=\"cells\" align=\"right\">");
@@ -1432,7 +1432,7 @@ public class NTCPTransport extends TransportImpl {
             buf.append("</td><td class=\"cells\" align=\"center\">").append(outQueue);
             buf.append("</td><td class=\"cells\" align=\"center\">");
             if (con.isBacklogged())
-                buf.append("&#x2713;");
+                buf.append("<span class=\"backlogged\">&#x2714;</span>");
             else
                 buf.append("&nbsp;");
             //long readTime = con.getReadTime();
@@ -1457,7 +1457,7 @@ public class NTCPTransport extends TransportImpl {
             buf.append("</b></td><td>&nbsp;</td><td>&nbsp;</td></tr>\n");
         }
 
-        buf.append("</table>\n");
+        buf.append("</table></div>\n");
         out.write(buf.toString());
         buf.setLength(0);
     }
diff --git a/router/java/src/net/i2p/router/transport/udp/Sorters.java b/router/java/src/net/i2p/router/transport/udp/Sorters.java
index 21ea5ec7aff8b171e8aeb5e26315ffd4ffa314be..ba9d3497f3610bc4916e3ff044173c25ede23473 100644
--- a/router/java/src/net/i2p/router/transport/udp/Sorters.java
+++ b/router/java/src/net/i2p/router/transport/udp/Sorters.java
@@ -285,20 +285,21 @@ class Sorters {
 
     static void appendSortLinks(StringBuilder buf, String urlBase, int sortFlags, String descr, int ascending) {
         if (ascending == FLAG_ALPHA) {  // 0
-            buf.append(" <a href=\"").append(urlBase).append("?sort=0" +
-                       "#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a>");
+            buf.append(" <span class=\"sortdown\"><a href=\"").append(urlBase).append("?sort=0" +
+                       "#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a></span>");
         } else if (sortFlags == ascending) {
-            buf.append(" <a href=\"").append(urlBase).append("?sort=").append(0-ascending);
-            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a>" +
-                       "<b><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></b>");
+            buf.append(" <span class=\"sortdown\"><a href=\"").append(urlBase).append("?sort=").append(0-ascending);
+            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a></span>" +
+                       "<span class=\"sortupactive\"><b><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></b></span>");
         } else if (sortFlags == 0 - ascending) {
-            buf.append(" <b><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></b><a href=\"").append(urlBase).append("?sort=").append(ascending);
-            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></a>");
+            buf.append(" <span class=\"sortdownactive\"><b><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></b></span><span class=\"sortup\"><a href=\"")
+               .append(urlBase).append("?sort=").append(ascending);
+            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></a></span>");
         } else {
-            buf.append(" <a href=\"").append(urlBase).append("?sort=").append(0-ascending);
-            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a>" +
-                       "<a href=\"").append(urlBase).append("?sort=").append(ascending);
-            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></a>");
+            buf.append(" <span class=\"sortdown\"><a href=\"").append(urlBase).append("?sort=").append(0-ascending);
+            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/inbound.png\" alt=\"V\"></a></span>" +
+                       "<span class=\"sortup\"><a href=\"").append(urlBase).append("?sort=").append(ascending);
+            buf.append("#udpcon\" title=\"").append(descr).append("\"><img src=\"/themes/console/images/outbound.png\" alt=\"^\"></a></span>");
         }
     }
 }
diff --git a/router/java/src/net/i2p/router/transport/udp/UDPTransport.java b/router/java/src/net/i2p/router/transport/udp/UDPTransport.java
index 3d720e21fbd33c8d952fbdb0350ecbc3160ed764..d90ddf29feff493f4b8195405d433f118bafcc2d 100644
--- a/router/java/src/net/i2p/router/transport/udp/UDPTransport.java
+++ b/router/java/src/net/i2p/router/transport/udp/UDPTransport.java
@@ -2672,7 +2672,7 @@ public class UDPTransport extends TransportImpl implements TimedWeightedPriority
             buf.append(". ").append(_t("Status")).append(": ").append(_t(_reachabilityStatus.toStatusString()));
         }
         buf.append(".</h3>\n");
-        buf.append("<table>\n");
+        buf.append("<div class=\"widescroll\"><table id=\"udpconnections\">\n");
         buf.append("<tr><th class=\"smallhead\" nowrap><a href=\"#def.peer\">").append(_t("Peer")).append("</a><br>");
         if (sortFlags != FLAG_ALPHA)
             appendSortLinks(buf, urlBase, sortFlags, _t("Sort by peer hash"), FLAG_ALPHA);
@@ -2936,7 +2936,7 @@ public class UDPTransport extends TransportImpl implements TimedWeightedPriority
             buf.append("</td></tr>");
         }
      }  // numPeers > 0
-        buf.append("</table>\n");
+        buf.append("</table></div>\n");
 
       /*****
         long bytesTransmitted = _context.bandwidthLimiter().getTotalAllocatedOutboundBytes();