diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css
index 926c80123..ea914ae66 100644
--- a/src/static/css/timeslider.css
+++ b/src/static/css/timeslider.css
@@ -67,13 +67,56 @@
   width:122px;
 }
 
+
 .topbarcenter, #docbar {display:none;}
-#padmain {top:30px;}
+#padmain {top:0px !important;}
 #editbarright {float:right;}
 #returnbutton {color:#222; font-size:16px; line-height:29px; margin-top:0; padding-right:6px;}
 #importexport {top:118px;}
 #importexport .popup {width:185px;}
 
+
+.timeslider-bar 
+{
+  background: #f7f7f7;
+  background: linear-gradient(#f7f7f7, #f1f1f1 80%);
+  border-bottom: 1px solid #ccc;
+  overflow: hidden;
+  padding-top: 3px;
+  width: 100%;
+}
+
+.timeslider-bar #editbar 
+{
+  border-bottom: none;
+  float: right;
+  width: 170px;
+  width: initial;
+}
+
+.timeslider-bar h1 
+{
+  margin: 5px;
+}
+.timeslider-bar p 
+{
+  margin: 5px;
+}
+#timeslider-top {
+  width: 100%;
+  position: fixed;
+  z-index: 1;
+}
+
+#authorsList .author {
+  padding-left: 0.4em;
+  padding-right: 0.4em;
+}
+
+#padeditor {
+  position: static;
+}
+
 /* lists */
 .list-bullet2, .list-indent2, .list-number2 {margin-left:3em;}
 .list-bullet3, .list-indent3, .list-number3 {margin-left:4.5em;}
diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js
index f88eb5ddc..9aceb7336 100644
--- a/src/static/js/broadcast_slider.js
+++ b/src/static/js/broadcast_slider.js
@@ -170,26 +170,27 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
       $('#error').show();
     }
 
+    var fixPadHeight = _.throttle(function(){
+      var height = $('#timeslider-top').height();
+      $('#editorcontainerbox').css({marginTop: height});
+    }, 600);
+    
     function setAuthors(authors)
     {
-      $("#authorstable").empty();
+      var authorsList = $("#authorsList");
+      authorsList.empty();
       var numAnonymous = 0;
       var numNamed = 0;
       _.each(authors, function(author)
       {
         if (author.name)
         {
+          if (numNamed !== 0) authorsList.append(', ');
+           
+          var authorColor =  clientVars.colorPalette[author.colorId] || author.colorId;
+          var span = $('<span />').text(author.name || "unnamed").css('background-color', authorColor).addClass('author');
+          authorsList.append(span);
           numNamed++;
-          var tr = $('<tr></tr>');
-          var swatchtd = $('<td></td>');
-          var swatch = $('<div class="swatch"></div>');
-          swatch.css('background-color', clientVars.colorPalette[author.colorId]);
-          swatchtd.append(swatch);
-          tr.append(swatchtd);
-          var nametd = $('<td></td>');
-          nametd.text(author.name || "unnamed");
-          tr.append(nametd);
-          $("#authorstable").append(tr);
         }
         else
         {
@@ -198,13 +199,19 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
       });
       if (numAnonymous > 0)
       {
-        var html = "<tr><td colspan=\"2\" style=\"color:#999; padding-left: 10px\">" + (numNamed > 0 ? "...and " : "") + numAnonymous + " unnamed author" + (numAnonymous > 1 ? "s" : "") + "</td></tr>";
-        $("#authorstable").append($(html));
+        var anonymousAuthorString = numAnonymous + " unnamed author" + (numAnonymous > 1 ? "s" : "")
+        if (numNamed !== 0){
+          authorsList.append(' + ' + anonymousAuthorString);
+        } else {
+          authorsList.append(anonymousAuthorString);
+        }
       }
       if (authors.length == 0)
       {
-        $("#authorstable").append($("<tr><td colspan=\"2\" style=\"color:#999; padding-left: 10px\">No Authors</td></tr>"))
+        authorsList.append("No Authors");
       }
+      
+      fixPadHeight();
     }
 
     BroadcastSlider = {
@@ -465,7 +472,6 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
         {
           if (clientVars.supportsSlider)
           {
-            $("#padmain, #rightbars").css('top', "130px");
             $("#timeslider").show();
             setSliderLength(clientVars.totalRevs);
             setSliderPosition(clientVars.revNum);
diff --git a/src/static/timeslider.html b/src/static/timeslider.html
index 413fbe804..3c909ede0 100644
--- a/src/static/timeslider.html
+++ b/src/static/timeslider.html
@@ -11,40 +11,14 @@
   <style type="text/css" title="dynamicsyntax"></style>
 </head>
 
-<body id="padbody" class="timeslider limwidth nonpropad nonprouser">
+<body id="padbody" class="timeslider limwidth">
   <div id="padpage">
     <div id="padtop">
-      <div class="topbar">
-        <div class="topbarleft">
-          <!-- -->
-        </div>
-
-        <div class="topbarright">
-          <!-- -->
-        </div>
-
-        <div class="topbarcenter">
-          <a href="/" class="topbarBrand">Etherpad v1.1</a> <a href="http://etherpad.org"
-          class="EtherpadLink">Etherpad is</a> <a href="../../static/LICENSE" class=
-          "Licensing">free software</a>
-
-          <div class="fullscreen" onclick="$('body').toggleClass('maximized');">
-            Full screen
-          </div><a href="javascript:void(0);" onclick=
-          "$('body').toggleClass('maximized');" class="topbarmaximize" title=
-          "Toggle maximization"></a>
-        </div>
-
-        <div class="specialkeyarea">
-          <!-- -->
-        </div>
-      </div>
       <div id="alertbar">
         <div id="servermsg">
           <h3>Server Notice<span id="servermsgdate"><!-- --></span>:</h3><a id=
           "hidetopmsg" href="javascript:%20void%20pad.hideServerMessage()" name=
           "hidetopmsg">hide</a>
-
           <p id="servermsgtext"><!-- --></p>
         </div>
       </div>
@@ -67,104 +41,56 @@
         </table>
       </div><!-- /docbar -->
     </div>
-
-    <div id="timeslider-wrapper">
-      <div id="error" style="display: none">
-        It looks like you're having connection troubles. <a href=
-        "/ep/pad/view/test/latest">Reconnect now</a>.
+    
+    <div id="timeslider-top">
+      <div id="timeslider-wrapper">
+        <div id="timeslider" unselectable="on" style="display: none">
+          <div id="timeslider-left"></div>
+          <div id="timeslider-right"></div>
+          <div id="timer"></div>
+          <div id="timeslider-slider">
+            <div id="ui-slider-handle"></div>
+            <div id="ui-slider-bar"></div>
+          </div>
+          <div id="playpause_button">
+            <div id="playpause_button_icon" class=""></div>
+          </div>
+          <div id="steppers">
+            <div class="stepper" id="leftstep"></div>
+            <div class="stepper" id="rightstep"></div>
+          </div>
+        </div>
       </div>
 
-      <div id="timeslider" unselectable="on" style="display: none">
-        <div id="timeslider-left"></div>
+      <div class="timeslider-bar">
+          <div class="editbarright" id="editbar">
+            <ul>
+              <li onClick="window.padeditbar.toolbarClick('import_export');return false;">
+                <a id="exportlink" title="Export to different document formats">
+                  <div class="buttonicon buttonicon-import_export"></div>
+                </a>
+              </li>
+            </ul>
+            <a id="returnbutton">Return to pad</a>
+          </div>
 
-        <div id="timeslider-right"></div>
-
-        <div id="timer"></div>
-
-        <div id="timeslider-slider">
-          <div id="ui-slider-handle"></div>
-
-          <div id="ui-slider-bar"></div>
-        </div>
-
-        <div id="playpause_button">
-          <div id="playpause_button_icon" class=""></div>
-        </div>
-
-        <div id="steppers">
-          <div class="stepper" id="leftstep"></div>
-
-          <div class="stepper" id="rightstep"></div>
-        </div>
+          <div>
+              <h1>
+                <span id="revision_label"></span>
+                <span id="revision_date"></span>
+              </h1>
+              <p>Authors:
+              <span id="authorsList">
+                <span>No Authors</span>
+              </span> </p>
+          </div>
       </div>
     </div>
-    
-    <!--<div id="rightbars" style="top: 95px;">
-      <div id="rightbar"><a href="/ep/pad/view/c6fg9GM51V/latest" id="viewlatest">Viewing latest content</a><br>
-      <a thref="/ep/pad/view/c6fg9GM51V/rev.%revision%" href="/ep/pad/view/c6fg9GM51V/rev.0" class="tlink">Link to this version</a>
-      <br><a thref="/ep/pad/view/ro.fw470Orpi4T/rev.%revision%" href="/ep/pad/view/ro.fw470Orpi4T/rev.0" class="tlink">Link to read-only page</a><br><a href="/c6fg9GM51V">Edit this pad</a>
-      <h2>Download as</h2>
-      <img src="../../static/img/may09/html.gif"><a thref="/ep/pad/export/c6fg9GM51V/rev.%revision%?format=html" href="/ep/pad/export/c6fg9GM51V/rev.0?format=html" class="tlink">HTML</a><br>
-      <img src="../../static/img/may09/txt.gif"><a thref="/ep/pad/export/c6fg9GM51V/rev.%revision%?format=txt" href="/ep/pad/export/c6fg9GM51V/rev.0?format=txt" class="tlink">Plain text</a><br>
-      <img src="../../static/img/may09/doc.gif"><a thref="/ep/pad/export/c6fg9GM51V/rev.%revision%?format=doc" href="/ep/pad/export/c6fg9GM51V/rev.0?format=doc" class="tlink">Microsoft Word</a><br>
-      <img src="../../static/img/may09/pdf.gif"><a thref="/ep/pad/export/c6fg9GM51V/rev.%revision%?format=pdf" href="/ep/pad/export/c6fg9GM51V/rev.0?format=pdf" class="tlink">PDF</a>
-
-
-      </div>
-      <div id="legend">
-      <h2>Authors</h2>
-      <table cellspacing="0" cellpadding="0" border="0" id="authorstable"><tbody><tr><td style="color:#999; padding-left: 10px" colspan="2">No Authors</td></tr></tbody></table>
-      </div>
-    </div>-->
 
     <div id="padmain">
       <div id="padeditor">
-        <div id="editbar" class="editbar disabledtoolbar">
-          <div id="editbarinner" class="editbarinner">
-            <div id="editbarleft" class="editbarleft">
-              <!-- -->
-            </div>
-
-            <div id="editbarright" class="editbarright">
-              <!-- termporary place holder--> 
-              <ul>
-                <li onClick="window.padeditbar.toolbarClick('import_export');return false;">
-                  <a id="exportlink" title="Export to different document formats">
-                    <div class="buttonicon buttonicon-import_export"></div>
-                  </a>
-                </li>
-              </ul>
-              <a id = "returnbutton">Return to pad</a>
-            </div>
-
-            <div id="editbarinner" class="editbarinner">
-              <table cellpadding="0" cellspacing="0" border="0" id="editbartable" class=
-              "editbartable">
-                <tr>
-                  <td>
-                    <h1>
-                      <span id="revision_label"></span>
-                      <span id="revision_date"></span>
-                    </h1>
-                  </td>
-
-                  <td width="100%">&nbsp;</td>
-                </tr>
-              </table>
-
-              <table cellpadding="0" cellspacing="0" border="0" id="editbarsavetable"
-              class="editbarsavetable">
-                <tr>
-                  <td></td>
-                </tr>
-              </table>
-            </div>
-          </div>
-        </div>
-
         <div id="editorcontainerbox">
           <div id="padcontent">
-            
           </div>
         </div>
       </div><!-- /padeditor -->