diff --git a/gui/html/chronoshare-helpers.js b/gui/html/chronoshare-helpers.js
new file mode 100644
index 0000000..ed95925
--- /dev/null
+++ b/gui/html/chronoshare-helpers.js
@@ -0,0 +1,58 @@
+function number_format( number, decimals, dec_point, thousands_sep ) {
+    // http://kevin.vanzonneveld.net
+    // +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
+    // +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+    // +     bugfix by: Michael White (http://crestidg.com)
+    // +     bugfix by: Benjamin Lupton
+    // +     bugfix by: Allan Jensen (http://www.winternet.no)
+    // +    revised by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
+    // *     example 1: number_format(1234.5678, 2, '.', '');
+    // *     returns 1: 1234.57
+
+    var n = number, c = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals;
+    var d = dec_point == undefined ? "," : dec_point;
+    var t = thousands_sep == undefined ? "." : thousands_sep, s = n < 0 ? "-" : "";
+    var i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", j = (j = i.length) > 3 ? j % 3 : 0;
+
+    return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
+}
+
+function SegNumToFileSize (segNum) {
+    filesize = segNum * 1024;
+
+    if (filesize >= 1073741824) {
+	filesize = number_format(filesize / 1073741824, 2, '.', '') + ' Gb';
+    } else {
+	if (filesize >= 1048576) {
+     	    filesize = number_format(filesize / 1048576, 2, '.', '') + ' Mb';
+   	} else {
+	    if (filesize > 1024) {
+    		filesize = number_format(filesize / 1024, 0) + ' Kb';
+  	    } else {
+    		filesize = '< 1 Kb';
+	    };
+ 	};
+    };
+    return filesize;
+};
+
+/**
+ * @brief Convert binary data represented as non-escaped hex string to Uint8Array
+ * @param str String like ba0cb43e4b9639c114a0487d5faa7c70452533963fc8beb37d1b67c09a48a21d
+ *
+ * Note that if string length is odd, null will be returned
+ */
+StringHashToUint8Array = function (str) {
+    if (str.length % 2 != 0) {
+        return null;
+    }
+
+    var buf = new Uint8Array (str.length / 2);
+
+    for (var i = 0; i < str.length; i+=2) {
+        value = parseInt (str.substring (i, i+2), 16);
+        buf[i/2] = value;
+    }
+
+    return buf;
+};
diff --git a/gui/html/chronoshare-navigation.js b/gui/html/chronoshare-navigation.js
new file mode 100644
index 0000000..7dafd71
--- /dev/null
+++ b/gui/html/chronoshare-navigation.js
@@ -0,0 +1,70 @@
+var CHRONOSHARE;
+
+var PAGE; // no default page anymore (no reason to have)
+var PARAMS = [ ];
+var URIPARAMS = "";
+
+function nav_anchor (aurl) {
+    aurl = aurl.split('#');
+    if (aurl[1])
+    {
+        aurl_split = aurl[1].split ('&');
+        page = aurl_split[0];
+
+        vars = [ ];
+        for (var i = 1; i < aurl_split.length; i++)
+        {
+            hash = aurl_split[i].split('=');
+            vars.push(hash[0]);
+            // there is strange double-encoding problem...
+            vars[hash[0]] = decodeURIComponent (decodeURIComponent (hash[1]));
+        }
+
+        if (page != PAGE)
+        {
+            PAGE = page;
+            PARAMS = vars;
+            URIPARAMS = aurl[1];
+
+            if (CHRONOSHARE) {
+                CHRONOSHARE.run ();
+            }
+        }
+        else if (aurl[1] != URIPARAMS)
+        {
+            PARAMS = vars;
+            URIPARAMS = aurl[1];
+
+            if (CHRONOSHARE) {
+                CHRONOSHARE.run ();
+            }
+        }
+    }
+}
+
+$(document).ready (function () {
+    nav_anchor (window.location.href);
+
+    if (!PARAMS.user || !PARAMS.folder)
+    {
+        $("#error").html ("user and folder must be be specified in the URL");
+        $("#error").removeClass ("hidden");
+        return;
+    }
+    else {
+        // update in-page URLs
+        $(".needs-get-url").each (function (index,element) {
+            this.href += "&user="+encodeURIComponent (encodeURIComponent (PARAMS.user))
+                + "&folder="+encodeURIComponent (encodeURIComponent (PARAMS.folder));
+        });
+        $(".needs-get-url").removeClass ("needs-get-url");
+    }
+
+    CHRONOSHARE = new ChronoShare (PARAMS.user, PARAMS.folder);
+    CHRONOSHARE.run ();
+
+    $(window).on('hashchange', function() {
+        nav_anchor (window.location.href);
+    });
+});
+
diff --git a/gui/html/chronoshare.js b/gui/html/chronoshare.js
index ffd9724..bf8b4a1 100644
--- a/gui/html/chronoshare.js
+++ b/gui/html/chronoshare.js
@@ -1,94 +1,78 @@
-var CHRONOSHARE;
+$.Class ("ChronoShare", { },
+ {
+     init: function (username, foldername) {
+         $("#folder-name").text (foldername);
+         $("#user-name").text (username);
 
-var PAGE = "folderHistory";
-var PARAMS = [ ];
-var URIPARAMS = "";
+         this.username = new Name (username);
+         this.files = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("info").add ("files").add ("folder");
 
-function nav_anchor (aurl) {
-    aurl = aurl.split('#');
-    if (aurl[1])
-    {
-        aurl_split = aurl[1].split ('&');
-        page = aurl_split[0];
+         this.actions = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("info").add ("actions");
 
-        vars = [ ];
-        for (var i = 1; i < aurl_split.length; i++)
-        {
-            hash = aurl_split[i].split('=');
-            vars.push(hash[0]);
-            // there is strange double-encoding problem...
-            vars[hash[0]] = decodeURIComponent (decodeURIComponent (hash[1]));
-        }
+         this.restore = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("cmd").add ("restore").add ("file");
 
-        if (page != PAGE)
-        {
-            PAGE = page;
-            PARAMS = vars;
-            URIPARAMS = aurl[1];
+         this.ndn = new NDN ({host:"127.0.0.1"});
+     },
 
-            if (CHRONOSHARE) {
-                CHRONOSHARE.run ();
-            }
-        }
-        else if (aurl != URIPARAMS)
-        {
-            PARAMS = vars;
-            URIPARAMS = aurl[1];
+     run: function () {
+         console.log ("RUN page: " + PAGE);
+         $("#loader").fadeIn (500);
+         $("#error").addClass ("hidden");
 
-            if (CHRONOSHARE) {
-                CHRONOSHARE.run ();
-            }
-        }
-    }
-}
+         cmd = {};
+         if (PAGE == "fileList") {
+             cmd = this.info_files (PARAMS.item);
+         }
+         else if (PAGE == "folderHistory") {
+             cmd = this.info_actions ("folder", PARAMS.item);
+         }
+         else if (PAGE == "fileHistory") {
+             cmd = this.info_actions ("file", PARAMS.item);
+         }
 
-$(document).ready (function () {
-    nav_anchor (window.location.href);
+         if (cmd.request && cmd.callback) {
+             console.log (cmd.request.to_uri ());
+             this.ndn.expressInterest (cmd.request, cmd.callback);
+         }
+         else {
+             $("#loader").fadeOut (500); // ("hidden");
+             $("#content").empty ();
+             if (cmd.error) {
+                 $("#error").html (cmd.error);
+             }
+             else {
+                 $("#error").html ("Unknown error with " + PAGE);
+             }
+             $("#error").removeClass ("hidden");
+         }
+     },
 
-    if (!PARAMS.user || !PARAMS.folder)
-    {
-        $("#error").html ("user and folder must be be specified in the URL");
-        $("#error").removeClass ("hidden");
-        return;
-    }
-    else {
-        // update in-page URLs
-        $(".needs-get-url").each (function (index,element) {
-            this.href += "&user="+encodeURIComponent (encodeURIComponent (PARAMS.user))
-                + "&folder="+encodeURIComponent (encodeURIComponent (PARAMS.folder));
-        });
-        $(".needs-get-url").removeClass ("needs-get-url");
-    }
+     info_files: function(folder) {
+         request = new Name ().add (this.files)./*add (folder_in_question).*/addSegment (PARAMS.offset?PARAMS.offset:0);
+         return { request:request, callback: new FilesClosure (this) };
+     },
 
-    CHRONOSHARE = new ChronoShare (PARAMS.user, PARAMS.folder);
-    CHRONOSHARE.run ();
+     info_actions: function (type/*"file" or "folder"*/, fileOrFolder /*file or folder name*/) {
+         if (type=="file" && !fileOrFolder) {
+             return { error: "info_actions: fileOrFolder parameter is missing" };
+         }
 
-    $(window).on('hashchange', function() {
-        nav_anchor (window.location.href);
-    });
-});
+         request = new Name ().add (this.actions).add (type);
+         if (fileOrFolder) {
+             request.add (fileOrFolder);
+         }
+         request.addSegment (PARAMS.offset?PARAMS.offset:0);
+         return { request: request, callback: new HistoryClosure (this) };
+     },
 
-/**
- * @brief Convert binary data represented as non-escaped hex string to Uint8Array
- * @param str String like ba0cb43e4b9639c114a0487d5faa7c70452533963fc8beb37d1b67c09a48a21d
- *
- * Note that if string length is odd, null will be returned
- */
-StringHashToUint8Array = function (str) {
-    if (str.length % 2 != 0) {
-        return null;
-    }
-
-    var buf = new Uint8Array (str.length / 2);
-
-    for (var i = 0; i < str.length; i+=2) {
-        value = parseInt (str.substring (i, i+2), 16);
-        buf[i/2] = value;
-    }
-
-    return buf;
-};
-
+     cmd_restore_file: function (filename, version, hash) {
+         request = new Name ().add (this.restore)
+             .add (filename)
+             .addSegment (version)
+             .add (hash);
+         console.log (request.to_uri ());
+     }
+ });
 
 $.Class ("FilesClosure", {}, {
     init: function (chronoshare) {
@@ -105,21 +89,24 @@
 	    }
             data = JSON.parse (convertedData);
 
+            tbody = $("<tbody />", { "id": "file-list-files" });
+
             // error handling?
-            table = $("#content").append (
+            newcontent = $("<div />", { "id": "content" }).append (
                 $("<table />", { "class": "item-list" })
                     .append ($("<thead />")
                              .append ($("<tr />")
                                       .append ($("<th />", { "class": "filename border-left", "scope": "col" }).text ("Filename"))
                                       .append ($("<th />", { "class": "version", "scope": "col" }).text ("Version"))
+                                      .append ($("<th />", { "class": "size", "scope": "col" }).text ("Size"))
                                       .append ($("<th />", { "class": "modified", "scope": "col" }).text ("Modified"))
                                       .append ($("<th />", { "class": "modified-by border-right", "scope": "col" }).text ("Modified By"))))
-                    .append ($("<tbody />", { "id": "file-list-files" }))
+                    .append (tbody)
                     .append ($("<tfoot />")
                              .append ($("<tr />")
-                                      .append ($("<td />", { "colspan": "4", "class": "border-right border-left" })))));
+                                      .append ($("<td />", { "colspan": "5", "class": "border-right border-left" })))));
+            newcontent.hide ();
 
-            var html = $("#file-list-files");
             for (var i = 0; i < data.files.length; i++) {
                 file = data.files[i];
 
@@ -130,28 +117,71 @@
                     $(this).toggleClass('highlighted');
                 });
 
-                row.attr ("filename", encodeURIComponent(encodeURIComponent(file.filename)));
+                row.attr ("filename", file.filename); //encodeURIComponent(encodeURIComponent(file.filename)));
+
 
                 row.bind('click', function (e) {
-                    url = "#fileHistory";
-                    url += "&item=" + $(this).attr ("filename");
-                    pos = URIPARAMS.indexOf ("&");
-                    if (pos >= 0) {
-                        url += URIPARAMS.substring (pos)
-                    }
+                    url = new HistoryClosure (null).base_url ("fileHistory")
+                    url += "&item=" + encodeURIComponent (encodeURIComponent ($(this).attr ("filename")));
 
                     document.location = url;
                 });
 
-		row.append ($("<td />", {"class": "border-left"}).text (file.filename));
-		row.append ($("<td />").text (file.version));
-		row.append ($("<td />").text (new Date (file.timestamp)));
-		row.append ($("<td />", {"class": "border-right"})
+		row.append ($("<td />", { "class": "filename border-left" }).text (file.filename));
+		row.append ($("<td />", { "class": "version" }).text (file.version));
+		row.append ($("<td />", { "class": "size" }).text (SegNumToFileSize (file.segNum)));
+		row.append ($("<td />", { "class": "modified" }).text (new Date (file.timestamp)));
+		row.append ($("<td />", { "class": "modified-by border-right"})
 			    .append ($("<userName />").text (file.owner.userName))
 			    .append ($("<seqNo> /").text (file.owner.seqNo)));
 
-		html = html.append (row);
+		tbody = tbody.append (row);
             }
+
+            // if (!PARAMS.offset || PARAMS.offset==0)
+            // {
+            $("#content").fadeOut ("fast", function () {
+                $(this).replaceWith (newcontent);
+                $("#content").fadeIn ("fast");
+            });
+
+            self = this; // small "cheat"
+            $("#content-nav").fadeOut ("fast", function () {
+                $("#content-nav a").hide ();
+
+                if (PARAMS.offset !== undefined || data.more !== undefined) {
+                    $("#content-nav").fadeIn ("fast");
+
+                    if (data.more !== undefined) {
+                        $("#get-more").show ();
+
+                        $("#get-more").unbind ('click').click (function () {
+                            url = self.base_url ();
+                            url += "&offset="+data.more;
+
+                            document.location = url;
+                        });
+                    }
+                    if (PARAMS.offset > 0) {
+                        $("#get-less").show ();
+
+                        $("#get-less").unbind ('click').click (function () {
+                            url = self.base_url ();
+                            if (PARAMS.offset > 1) {
+                                url += "&offset="+(PARAMS.offset - 1);
+                            }
+
+                            document.location = url;
+                        });
+                    }
+                }
+            });
+            // }
+            // else {
+            //     tbody.children ().each (function (index, row) {
+            //         $("#history-list-actions").append (row);
+            //     });
+            // }
         }
         else if (kind == Closure.UPCALL_INTEREST_TIMED_OUT) {
             $("#error").html ("Interest timed out");
@@ -161,6 +191,16 @@
             $("#error").html ("Unknown error happened");
             $("#error").removeClass ("hidden");
         }
+    },
+
+    base_url: function () {
+        url = "#fileList"+
+            "&user="+encodeURIComponent (encodeURIComponent (PARAMS.user)) +
+            "&folder="+encodeURIComponent (encodeURIComponent (PARAMS.folder));
+        if (PARAMS.item !== undefined) {
+            url += "&item="+encodeURIComponent (encodeURIComponent (PARAMS.item));
+        }
+        return url;
     }
 });
 
@@ -180,8 +220,9 @@
 	    }
             data = JSON.parse (convertedData);
 
-            // error handling?
-            table = $("#content").append (
+            tbody = $("<tbody />", { "id": "history-list-actions" });
+
+            newcontent = $("<div />", { "id": "content" }).append (
                 $("<table />", { "class": "item-list" })
                     .append ($("<thead />")
                              .append ($("<tr />")
@@ -189,44 +230,90 @@
                                       .append ($("<th />", { "class": "version", "scope": "col" }).text ("Version"))
                                       .append ($("<th />", { "class": "modified", "scope": "col" }).text ("Modified"))
                                       .append ($("<th />", { "class": "modified-by border-right", "scope": "col" }).text ("Modified By"))))
-                    .append ($("<tbody />", { "id": "history-list-actions" }))
+                    .append (tbody)
                     .append ($("<tfoot />")
                              .append ($("<tr />")
                                       .append ($("<td />", { "colspan": "4", "class": "border-right border-left" })))));
 
-            var html = $("#history-list-actions");
             for (var i = 0; i < data.actions.length; i++) {
                 action = data.actions[i];
 
 	        row = $("<tr />");
 	        if (i%2) { row.addClass ("odd"); }
+                if (action.action=="DELETE") { row.addClass ("delete"); }
 
                 row.bind('mouseenter mouseleave', function() {
                     $(this).toggleClass('highlighted');
                 });
 
-                row.attr ("filename", encodeURIComponent(encodeURIComponent(action.filename)));
+                // row.attr ("filename", );//encodeURIComponent(encodeURIComponent(action.filename)));
+                // row.attr ("version",
 
-                row.bind('click', function (e) {
-                    url = "#fileHistory";
-                    url += "&item=" + $(this).attr ("filename");
-                    pos = URIPARAMS.indexOf ("&");
-                    if (pos >= 0) {
-                        url += URIPARAMS.substring (pos)
-                    }
+                // row.bind('click', function (e) {
+                //     url = "#fileHistory";
+                //     url += "&item=" + $(this).attr ("filename");
+                //     pos = URIPARAMS.indexOf ("&");
+                //     if (pos >= 0) {
+                //         url += URIPARAMS.substring (pos)
+                //     }
 
-                    document.location = url;
-                });
+                //     document.location = url;
+                // });
 
-	        row.append ($("<td />", {"class": "border-left"}).text (action.filename));
-	        row.append ($("<td />").text (action.version));
-	        row.append ($("<td />").text (new Date (action.timestamp)));
-	        row.append ($("<td />")
+	        row.append ($("<td />", { "class": "filename border-left" }).text (action.filename));
+	        row.append ($("<td />", { "class": "version" }).text (action.version));
+	        row.append ($("<td />", { "class": "timestamp" }).text (new Date (action.timestamp)));
+	        row.append ($("<td />", { "class": "modified-by border-right" })
 	        	    .append ($("<userName />").text (action.id.userName))
 	        	    .append ($("<seqNo> /").text (action.id.seqNo)));
 
-	        html = html.append (row);
+	        tbody = tbody.append (row);
             }
+
+            // if (!PARAMS.offset || PARAMS.offset==0)
+            // {
+            $("#content").fadeOut ("fast", function () {
+                $(this).replaceWith (newcontent);
+                $("#content").fadeIn ("fast");
+            });
+
+            self = this; // small "cheat"
+            $("#content-nav").fadeOut ("fast", function () {
+                $("#content-nav a").hide ();
+
+                if (PARAMS.offset !== undefined || data.more !== undefined) {
+                    $("#content-nav").fadeIn ("fast");
+
+                    if (data.more !== undefined) {
+                        $("#get-more").show ();
+
+                        $("#get-more").unbind ('click').click (function () {
+                            url = self.base_url (PAGE);
+                            url += "&offset="+data.more;
+
+                            document.location = url;
+                        });
+                    }
+                    if (PARAMS.offset > 0) {
+                        $("#get-less").show ();
+
+                        $("#get-less").unbind ('click').click (function () {
+                            url = self.base_url (PAGE);
+                            if (PARAMS.offset > 1) {
+                                url += "&offset="+(PARAMS.offset - 1);
+                            }
+
+                            document.location = url;
+                        });
+                    }
+                }
+            });
+            // }
+            // else {
+            //     tbody.children ().each (function (index, row) {
+            //         $("#history-list-actions").append (row);
+            //     });
+            // }
         }
         else if (kind == Closure.UPCALL_INTEREST_TIMED_OUT) {
             $("#error").html ("Interest timed out");
@@ -236,52 +323,19 @@
             $("#error").html ("Unknown error happened");
             $("#error").removeClass ("hidden");
         }
+    },
+
+    base_url: function (page) {
+        url = "#"+page+
+            "&user="+encodeURIComponent (encodeURIComponent (PARAMS.user)) +
+            "&folder="+encodeURIComponent (encodeURIComponent (PARAMS.folder));
+        if (PARAMS.item !== undefined) {
+            url += "&item="+encodeURIComponent (encodeURIComponent (PARAMS.item));
+        }
+        return url;
     }
 });
 
 
-$.Class ("ChronoShare", { },
- {
-     init: function (username, foldername) {
-         this.username = new Name (username);
-         this.files = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("info").add ("files").add ("folder");
-
-         this.actions = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("info").add ("actions");
-
-         this.restore = new Name ("/localhost").add (this.username).add ("chronoshare").add (foldername).add ("cmd").add ("restore").add ("file");
-
-         // this.ndn = new NDN ({host:"127.0.0.1", getHostAndPort: function() { return {host: "127.0.0.1", port: 9696}}});
-         this.ndn = new NDN ({host:"127.0.0.1"});
-     },
-
-
-     run: function () {
-         $("#content").empty ();
-         $("#loader").fadeIn (500);
-         $("#error").addClass ("hidden");
-
-         if (PAGE == "fileList") {
-             request = new Name ().add (this.files)./*add (folder_in_question).*/add ("nonce").addSegment (0);
-             console.log (request.to_uri ());
-             this.ndn.expressInterest (request, new FilesClosure (this));
-         }
-         else if (PAGE == "folderHistory") {
-             request = new Name ().add (this.actions).add ("folder")./*add (folder_in_question).*/add ("nonce").addSegment (0);
-             console.log (request.to_uri ());
-             this.ndn.expressInterest (request, new HistoryClosure (this));
-         }
-         else if (PAGE == "fileHistory") {
-             if (!PARAMS.item) {
-                 $("#loader").fadeOut (500); // ("hidden");
-                 $("#error").html ("incorrect input for fileHistory command");
-                 $("#error").removeClass ("hidden");
-                 return;
-             }
-             request = new Name ().add (this.actions).add ("file").add (PARAMS.item).add ("nonce").addSegment (0);
-             console.log (request.to_uri ());
-             this.ndn.expressInterest (request, new HistoryClosure (this));
-         }
-     }
- });
 
 
diff --git a/gui/html/index.html b/gui/html/index.html
index 24de8ca..ffa46a0 100644
--- a/gui/html/index.html
+++ b/gui/html/index.html
@@ -17,22 +17,29 @@
 
   <body>
     <header>
-      <h1>ChronoShare</h1>
+      <h1>ChronoShare <green id="folder-name"></green> for <grey id="user-name"></grey></h1>
       <h2 id="folderName"></h2>
 
       <nav>
         <ul>
-          <li><a class="needs-get-url" href="#fileList">File list</a></li>
-          <li><a class="needs-get-url" href="#folderHistory">Folder history</a></li>
+          <li><a class="needs-get-url" href="#fileList">All files</a></li>
+          <li><a class="needs-get-url" href="#folderHistory">Recent actions</a></li>
         </ul>
       </nav>
     </header>
 
     <article>
-      <!-- <img id="loader" src="load.gif" /> -->
       <div id="content" class="hidden">
       </div>
 
+      <content-nav id="content-nav" style="display: none">
+        <ul>
+          <li><a id="get-less" class="ajax-action">&lt;&lt; Previous</a></li>
+          <li><a id="get-more" class="ajax-action">Next &gt;&gt;</a></li>
+        </ul>
+
+      </content-nav>
+
       <div class="hidden" id="loader">
         <img src="load.gif" />
       </div>
@@ -57,6 +64,8 @@
     </footer>
 
     <script src="detect.js"></script>
+    <script type="text/javascript" src="chronoshare-helpers.js"></script>
+    <script type="text/javascript" src="chronoshare-navigation.js"></script>
     <script type="text/javascript" src="chronoshare.js"></script>
     <script type="text/javascript">
       $(window).ready (function () {
diff --git a/gui/html/style.css b/gui/html/style.css
index cd16f8c..cc3face 100644
--- a/gui/html/style.css
+++ b/gui/html/style.css
@@ -28,8 +28,9 @@
 }
 
 article {
-    margin: 20px auto 0;
+    margin: 20px auto 20px;
     width: 90%;
+    padding-bottom: 20px;
 }
 
 footer {
@@ -64,9 +65,7 @@
     min-width: 587px;
     width: 100%;
     height: 40px;
-}
 
-nav {
     background-color: #EAF4EF;
     -moz-border-radius: 6px;
     border-radius: 6px;
@@ -189,9 +188,22 @@
 .filename {
     width: 50%;
 }
+
+.highlighted .filename {
+    font-weight: bold;
+}
+
+.delete .filename {
+    color: red;
+}
+
 .version {
     width: 5%;
 }
+.size {
+    width: 5%;
+    whitespace: nowrap;
+}
 .modified {
     width: 20%;
 }
@@ -227,4 +239,46 @@
 seqNo {
     display: inline-block;
     margin-left: 5px;
-}
\ No newline at end of file
+}
+
+.ajax-action {
+    cursor: pointer;
+}
+
+
+
+/* Navigation menu */
+content-nav {
+    display: inline-block;
+    margin: 0;
+    /* width: 100%; */
+    height: 24px;
+
+    background-color: #EAF4EF;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    border: 1px solid #99CCB2;
+}
+
+content-nav ul {
+    margin: 0;
+    padding: 0px;
+}
+
+content-nav li {
+    list-style-type: none;
+    display: inline;
+    margin: 0;
+}
+
+content-nav li a {
+    display: inline-block;
+    color: #727272;
+    font-size: 14px;
+    line-height: 14px;
+    font-family: sans-serif;
+    text-decoration: none;
+    padding: 5px 30px 5px 30px;
+}
+
+content-nav li a.active, content-nav a:hover { color: #2D9A65; }