diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css
index 4c8913d38..5f24a4cf3 100644
--- a/src/static/css/timeslider.css
+++ b/src/static/css/timeslider.css
@@ -150,6 +150,13 @@
   margin-top: 0;
   padding-right: 6px;
 }
+#settings,
+#importexport,
+#embed,
+#connectivity,
+#users {
+    top: 62px;
+}
 #importexport .popup {
   width: 185px
 }
diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js
index 33953e333..fed9f2e79 100644
--- a/src/static/js/broadcast_slider.js
+++ b/src/static/js/broadcast_slider.js
@@ -155,9 +155,7 @@ function loadBroadcastSliderJS(fireWhenAllScriptsAreLoaded)
 
     function showReconnectUI()
     {
-      var cls = 'modaldialog cboxdisconnected cboxdisconnected_unknown';
-      $("#connectionbox").get(0).className = cls;
-      padmodals.showModal("#connectionbox", 500);
+      padmodals.showModal("disconnected");
     }
 
     var fixPadHeight = _.throttle(function(){
diff --git a/src/templates/timeslider.html b/src/templates/timeslider.html
index 88bfa4e70..b9e9186c7 100644
--- a/src/templates/timeslider.html
+++ b/src/templates/timeslider.html
@@ -33,6 +33,12 @@
             <div class="stepper" id="rightstep"></div>
           </div>
         </div>
+        
+        <div id="overlay">
+          <div id="overlay-inner">
+            <!-- -->
+          </div>
+        </div>
       </div>
 
       <div class="timeslider-bar">
@@ -70,54 +76,55 @@
     </div><!-- /padmain -->
   </div><!-- /padpage -->
 
-  <div id="modaloverlay">
-    <div id="modaloverlay-inner">
-      <!-- -->
-    </div>
-  </div>
-
-  <div id="mainmodals">
-      <% e.begin_block("modals"); %>
-          <div id="connectionbox" class="modaldialog">
-              <div id="connectionboxinner" class="modaldialog-inner">
-                  <div class="connecting">Connecting...</div>
-                  <div class="reconnecting">Reestablishing connection...</div>
-                  <div class="disconnected">
-                      <h2 class="h2_disconnect">Disconnected.</h2>
-                      <h2 class="h2_userdup">Opened in another window.</h2>
-                      <h2 class="h2_unauth">No Authorization.</h2>
-                      <div id="disconnected_looping">
-                          <p><b>We're having trouble talking to the EtherPad lite synchronization server.</b> You may be connecting through an incompatible firewall or proxy server.</p>
-                      </div>
-                      <div id="disconnected_initsocketfail">
-                          <p><b>We were unable to connect to the EtherPad lite synchronization server.</b> This may be due to an incompatibility with your web browser or internet connection.</p>
-                      </div>
-                      <div id="disconnected_userdup">
-                          <p><b>You seem to have opened this pad in another browser window.</b> If you'd like to use this window instead, you can reconnect.</p>
-                      </div>
-                      <div id="disconnected_unknown">
-                          <p><b>Lost connection with the EtherPad lite synchronization server.</b> This may be due to a loss of network connectivity.</p>
-                      </div>
-                      <div id="disconnected_slowcommit">
-                          <p><b>Server not responding.</b> This may be due to network connectivity issues or high load on the server.</p>
-                      </div>
-                      <div id="disconnected_unauth">
-                          <p>Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.</p>
-                      </div>
-                      <div id="disconnected_deleted">
-                          <p>This pad was deleted.</p>
-                      </div>
-                      <div id="reconnect_advise">
-                          <p>If this continues to happen, please let us know</p>
-                      </div>
-                      <div id="reconnect_form">
-                          <button id="forcereconnect">Reconnect Now</button>
-                      </div>
-                  </div>
-              </div>
-          </div>
-      <% e.end_block(); %>
-  </div>
+<div id="connectivity" class="popup">
+  <% e.begin_block("modals"); %>
+      <div class="connected visible">
+        <h2>Connected.</h2>
+      </div>
+      <div class="reconnecting">
+        <h2>Reestablishing connection...</h2>
+        <p><img alt="" border="0" src="/static/img/connectingbar.gif" /></p>
+      </div>
+      <div class="userdup">
+        <h2>Opened in another window.</h2>
+        <p><b>You seem to have opened this pad in another browser window.</b> If you'd like to use this window instead, you can reconnect.</p>
+        <button id="forcereconnect">Reconnect Now</button>
+      </div>
+      <div class="unauth">
+        <h2>No Authorization.</h2>
+        <p>Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.</p>
+        <button id="forcereconnect">Reconnect Now</button>
+      </div>
+      <div class="looping">
+        <h2>Disconnected.</h2>
+        <p><b>We're having trouble talking to the EtherPad lite synchronization server.</b> You may be connecting through an incompatible firewall or proxy server.</p>
+      </div>
+      <div class="initsocketfail">
+        <h2>Disconnected.</h2>
+        <p><b>We were unable to connect to the EtherPad lite synchronization server.</b> This may be due to an incompatibility with your web browser or internet connection.</p>
+      </div>
+      <div class="slowcommit">
+        <h2>Disconnected.</h2>
+        <p><b>Server not responding.</b> This may be due to network connectivity issues or high load on the server.</p>
+        <button id="forcereconnect">Reconnect Now</button>
+      </div>
+      <div class="deleted">
+        <h2>Disconnected.</h2>
+        <p>This pad was deleted.</p>
+      </div>
+      <div class="disconnected">
+        <h2>Disconnected.</h2>
+        <p><b>Lost connection with the EtherPad lite synchronization server.</b> This may be due to a loss of network connectivity.</p>
+        <p>If this continues to happen, please let us know</p>
+        <button id="forcereconnect">Reconnect Now</button>
+      </div>
+      <form id="reconnectform" method="post" action="/ep/pad/reconnect" accept-charset="UTF-8" style="display: none;">
+          <input type="hidden" class="padId" name="padId">
+          <input type="hidden" class="diagnosticInfo" name="diagnosticInfo">
+          <input type="hidden" class="missedChanges" name="missedChanges">
+      </form>
+  <% e.end_block(); %>
+</div>
 
 <!-- export code -->
 <div id="importexport">