diff --git a/src/static/css/pad.css b/src/static/css/pad.css
index 19180ade..df9dde14 100644
--- a/src/static/css/pad.css
+++ b/src/static/css/pad.css
@@ -401,180 +401,36 @@ table#otheruserstable {
   color: #888;
   font-style: italic;
 }
-.modaldialog.cboxreconnecting .modaldialog-inner,
-.modaldialog.cboxconnecting .modaldialog-inner {
-  background: url(../../static/img/connectingbar.gif) no-repeat center 60px;
-  height: 100px;
+
+#connectivity {
+  z-index: 600 !important;
 }
-.modaldialog.cboxreconnecting,
-.modaldialog.cboxconnecting,
-.modaldialog.cboxdisconnected {
-  background: #8FCDE0
-}
-.cboxdisconnected #connectionboxinner div {
-  display: none
-}
-.cboxdisconnected_userdup #connectionboxinner #disconnected_userdup {
-  display: block
-}
-.cboxdisconnected_deleted #connectionboxinner #disconnected_deleted {
-  display: block
-}
-.cboxdisconnected_initsocketfail #connectionboxinner #disconnected_initsocketfail {
-  display: block
-}
-.cboxdisconnected_looping #connectionboxinner #disconnected_looping {
-  display: block
-}
-.cboxdisconnected_slowcommit #connectionboxinner #disconnected_slowcommit {
-  display: block
-}
-.cboxdisconnected_unauth #connectionboxinner #disconnected_unauth {
-  display: block
-}
-.cboxdisconnected_unknown #connectionboxinner #disconnected_unknown {
-  display: block
-}
-.cboxdisconnected_initsocketfail #connectionboxinner #reconnect_advise,
-.cboxdisconnected_looping #connectionboxinner #reconnect_advise,
-.cboxdisconnected_slowcommit #connectionboxinner #reconnect_advise,
-.cboxdisconnected_unknown #connectionboxinner #reconnect_advise {
-  display: block
-}
-.cboxdisconnected div#reconnect_form {
-  display: block
-}
-.cboxdisconnected .disconnected h2 {
-  display: none
-}
-.cboxdisconnected .disconnected .h2_disconnect {
-  display: block
-}
-.cboxdisconnected_userdup .disconnected h2.h2_disconnect {
-  display: none
-}
-.cboxdisconnected_userdup .disconnected h2.h2_userdup {
-  display: block
-}
-.cboxdisconnected_unauth .disconnected h2.h2_disconnect {
-  display: none
-}
-.cboxdisconnected_unauth .disconnected h2.h2_unauth {
-  display: block
-}
-#connectionstatus {
-  position: absolute;
-  width: 37px;
-  height: 41px;
-  overflow: hidden;
-  right: 0;
-  z-index: 11;
-}
-#connectionboxinner .connecting {
-  margin-top: 20px;
-  font-size: 2.0em;
-  color: #555;
-  text-align: center;
+
+#connectivity * {
   display: none;
 }
-.cboxconnecting #connectionboxinner .connecting {
-  display: block
-}
-#connectionboxinner .disconnected h2 {
-  font-size: 1.8em;
-  color: #333;
-  text-align: left;
-  margin-top: 10px;
-  margin-left: 10px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
-#connectionboxinner .disconnected p {
-  margin: 10px 10px;
-  font-size: 1.2em;
-  line-height: 1.1;
-  color: #333;
-}
-#connectionboxinner .disconnected {
-  display: none
-}
-.cboxdisconnected #connectionboxinner .disconnected {
-  display: block
-}
-#connectionboxinner .reconnecting {
-  margin-top: 20px;
-  font-size: 1.6em;
-  color: #555;
-  text-align: center;
-  display: none;
-}
-.cboxreconnecting #connectionboxinner .reconnecting {
-  display: block
+
+#connectivity .visible,
+#connectivity .visible * {
+  display: block;
 }
+
 #reconnect_form button {
   font-size: 12pt;
   padding: 5px;
 }
-#mainmodals {
-  z-index: 600; /* higher than the modals themselves: */
-}
-.modalfield {
-  font-size: 1.2em;
-  padding: 1px;
-  border: 1px solid #bbb;
-}
-#mainmodals .editempty {
-  color: #aaa
-}
-.modaldialog {
-  position: absolute;
-  top: 100px;
-  left: 50%;
-  margin-left: -243px;
-  width: 485px;
-  display: none;
-  z-index: 501;
-  zoom: 1;
-  overflow: hidden;
-  background: white;
-  border: 1px solid #999;
-}
-.modaldialog .modaldialog-inner {
-  padding: 10pt
-}
-.modaldialog .modaldialog-hide {
-  float: right;
-  background-repeat: no-repeat;
-  background-image: url(static/img/sharebox4.gif);
-  display: block;
-  width: 22px;
-  height: 22px;
-  background-position: -454px -6px;
-  margin-right: -5px;
-  margin-top: -5px;
-}
-.modaldialog label,
-.modaldialog h1 {
-  color: #222222;
-  font-size: 125%;
-  font-weight: bold;
-}
-.modaldialog th {
-  vertical-align: top;
-  text-align: left;
-}
 
-#modaloverlay {
+.toolbar #overlay {
   z-index: 500;
   display: none;
   background-repeat: repeat-both;
   width: 100%;
   position: absolute;
-  height: 100%;
+  height: inherit;
   left: 0;
   top: 0;
 }
-* html #modaloverlay {
+* html #overlay {
   /* for IE 6+ */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
@@ -874,6 +730,10 @@ input[type=checkbox] {
 .popup input[type=text], #users input[type=text] {
   outline: none;
 }
+.popup button {
+  padding: 5px;
+  font-size: 14px;
+}
 .popup a {
   text-decoration: none
 }
@@ -895,6 +755,7 @@ input[type=checkbox] {
 #settings,
 #importexport,
 #embed,
+#connectivity,
 #users {
   position: absolute;
   top: 36px;
@@ -914,15 +775,6 @@ input[type=checkbox] {
   border-left: 1px solid #ccc !important;
   width: 185px !important;
 }
-@media screen and (max-width: 960px) { 
-    .modaldialog {
-      position: relative;
-      margin: 0 auto;
-      width: 80%;
-      top: 40px;
-      left: 0;
-    }
-}
 @media screen and (max-width: 600px) { 
     .toolbar ul li.separator {
       display: none;
@@ -986,6 +838,7 @@ input[type=checkbox] {
     }
     #settings,
     #importexport,
+    #connectivity,
     #embed {
       left: 0;
       top: 0;
diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css
index 4c8913d3..5f24a4cf 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/img/connectingbar.gif b/src/static/img/connectingbar.gif
index 34f54e90..5e54d694 100644
Binary files a/src/static/img/connectingbar.gif and b/src/static/img/connectingbar.gif differ
diff --git a/src/static/js/ace2_inner.js b/src/static/js/ace2_inner.js
index cc9f1288..490eee19 100644
--- a/src/static/js/ace2_inner.js
+++ b/src/static/js/ace2_inner.js
@@ -3237,7 +3237,7 @@ function Ace2Inner(){
     }
     //hide the dropdownso
     if(window.parent.parent.padeditbar){ // required in case its in an iframe should probably use parent..  See Issue 327 https://github.com/Pita/etherpad-lite/issues/327
-      window.parent.parent.padeditbar.toogleDropDown("none");
+      window.parent.parent.padeditbar.toggleDropDown("none");
     }
   }
 
diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js
index 33953e33..fed9f2e7 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/static/js/pad_connectionstatus.js b/src/static/js/pad_connectionstatus.js
index bb0f0521..c592afbd 100644
--- a/src/static/js/pad_connectionstatus.js
+++ b/src/static/js/pad_connectionstatus.js
@@ -21,6 +21,7 @@
  */
 
 var padmodals = require('./pad_modals').padmodals;
+var padeditbar = require('./pad_editbar').padeditbar;
 
 var padconnectionstatus = (function()
 {
@@ -42,15 +43,18 @@ var padconnectionstatus = (function()
       status = {
         what: 'connected'
       };
-      padmodals.hideModal(500);
+      
+      padmodals.showModal('connected');
+      padmodals.hideOverlay(500);
     },
     reconnecting: function()
     {
       status = {
         what: 'reconnecting'
       };
-      $("#connectionbox").get(0).className = 'modaldialog cboxreconnecting';
-      padmodals.showModal("#connectionbox", 500);
+      
+      padmodals.showModal('reconnecting');
+      padmodals.showOverlay(500);
     },
     disconnected: function(msg)
     {
@@ -61,20 +65,15 @@ var padconnectionstatus = (function()
         what: 'disconnected',
         why: msg
       };
+      
       var k = String(msg).toLowerCase(); // known reason why
       if (!(k == 'userdup' || k == 'deleted' || k == 'looping' || k == 'slowcommit' || k == 'initsocketfail' || k == 'unauth'))
       {
-        k = 'unknown';
+        k = 'disconnected';
       }
       
-      var cls = 'modaldialog cboxdisconnected cboxdisconnected_' + k;
-      $("#connectionbox").get(0).className = cls;
-      padmodals.showModal("#connectionbox", 500);
-
-      $('button#forcereconnect').click(function()
-      {
-        window.location.reload();
-      });
+      padmodals.showModal(k);
+      padmodals.showOverlay(500);
     },
     isFullyConnected: function()
     {
diff --git a/src/static/js/pad_editbar.js b/src/static/js/pad_editbar.js
index af2bc40a..59658a04 100644
--- a/src/static/js/pad_editbar.js
+++ b/src/static/js/pad_editbar.js
@@ -122,21 +122,25 @@ var padeditbar = (function()
       {
         if(cmd == "showusers")
         {
-          self.toogleDropDown("users");
+          self.toggleDropDown("users");
         }
         else if (cmd == 'settings')
         {
-              self.toogleDropDown("settings");
+              self.toggleDropDown("settings");
+        }
+        else if (cmd == 'connectivity')
+        {
+              self.toggleDropDown("connectivity");
         }
         else if (cmd == 'embed')
         {
           self.setEmbedLinks();
           $('#linkinput').focus().select();
-          self.toogleDropDown("embed");
+          self.toggleDropDown("embed");
         }
         else if (cmd == 'import_export')
         {
-	      self.toogleDropDown("importexport");
+	      self.toggleDropDown("importexport");
         }
         else if (cmd == 'savedRevision')
         {
@@ -182,13 +186,14 @@ var padeditbar = (function()
       }
       if(padeditor.ace) padeditor.ace.focus();
     },
-    toogleDropDown: function(moduleName)
+    toggleDropDown: function(moduleName, cb)
     {
-      var modules = ["settings", "importexport", "embed", "users"];
+      var modules = ["settings", "connectivity", "importexport", "embed", "users"];
       
       // hide all modules and remove highlighting of all buttons
       if(moduleName == "none")
       {
+        var returned = false
         for(var i=0;i<modules.length;i++)
         {
           //skip the userlist
@@ -200,9 +205,11 @@ var padeditbar = (function()
           if(module.css('display') != "none")
           {
             $("#" + modules[i] + "link").removeClass("selected");
-            module.slideUp("fast");
+            module.slideUp("fast", cb);
+            returned = true;
           }
         }
+        if(!returned && cb) return cb();
       }
       else 
       {
@@ -220,7 +227,7 @@ var padeditbar = (function()
           else if(modules[i]==moduleName)
           {
             $("#" + modules[i] + "link").addClass("selected");
-            module.slideDown("fast");
+            module.slideDown("fast", cb);
           }
         }
       }
diff --git a/src/static/js/pad_modals.js b/src/static/js/pad_modals.js
index 2d2b324c..0292e048 100644
--- a/src/static/js/pad_modals.js
+++ b/src/static/js/pad_modals.js
@@ -21,6 +21,7 @@
  */
  
 var padutils = require('./pad_utils').padutils;
+var padeditbar = require('./pad_editbar').padeditbar;
 
 var padmodals = (function()
 {
@@ -30,17 +31,16 @@ var padmodals = (function()
     {
       pad = _pad;
     },
-    showModal: function(modalId, duration)
+    showModal: function(messageId)
     {
-      $(".modaldialog").hide();
-      $(modalId).show().css(
-      {
-        'opacity': 0
-      }).animate(
-      {
-        'opacity': 1
-      }, duration);
-      $("#modaloverlay").show().css(
+      padeditbar.toggleDropDown("none", function() {
+        $("#connectivity .visible").removeClass('visible');
+        $("#connectivity ."+messageId).addClass('visible');
+        padeditbar.toggleDropDown("connectivity");
+      });
+    },
+    showOverlay: function(duration) {
+      $("#overlay").show().css(
       {
         'opacity': 0
       }).animate(
@@ -48,19 +48,8 @@ var padmodals = (function()
         'opacity': 1
       }, duration);
     },
-    hideModal: function(duration)
-    {
-      padutils.cancelActions('hide-feedbackbox');
-      padutils.cancelActions('hide-sharebox');
-      $("#sharebox-response").hide();
-      $(".modaldialog").animate(
-      {
-        'opacity': 0
-      }, duration, function()
-      {
-        $("#modaloverlay").hide();
-      });
-      $("#modaloverlay").animate(
+    hideOverlay: function(duration) {
+      $("#overlay").animate(
       {
         'opacity': 0
       }, duration, function()
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 36d6334c..35f8897a 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -22,6 +22,9 @@
 
         <% e.begin_block("body"); %>
         <div id="editbar" class="toolbar">
+            <div id="overlay">
+                <div id="overlay-inner"></div>
+            </div>
             <ul class="menu_left">
                 <% e.begin_block("editbarMenuLeft"); %>
                 <li class="acl-write" id="bold" data-key="bold">
@@ -86,9 +89,14 @@
             </ul>
             <ul class="menu_right">
                 <% e.begin_block("editbarMenuRight"); %>
-                <li class="acl-write" data-key="settings">
-                    <a class="grouped-left" id="settingslink" title="Settings of this pad">
-                        <span class="buttonicon buttonicon-settings"></span>
+                <li data-key="import_export">
+                    <a class="grouped-left" id="importexportlink" title="Import/Export from/to different document formats">
+                        <span class="buttonicon buttonicon-import_export"></span>
+                    </a>
+                </li>
+                <li onClick="document.location = document.location.pathname+ '/timeslider'">
+                    <a id="timesliderlink" class="grouped-middle" title="Show the history of this pad">
+                        <span class="buttonicon buttonicon-history"></span>
                     </a>
                 </li>
                 <li class="acl-write" data-key="savedRevision">
@@ -97,9 +105,9 @@
                     </a>
                 </li>
                 <li class="acl-write separator"></li>
-                <li data-key="import_export">
-                    <a class="grouped-left" id="importexportlink" title="Import/Export from/to different document formats">
-                        <span class="buttonicon buttonicon-import_export"></span>
+                <li class="acl-write" data-key="settings">
+                    <a class="grouped-left" id="settingslink" title="Settings of this pad">
+                        <span class="buttonicon buttonicon-settings"></span>
                     </a>
                 </li>
                 <li data-key="embed">
@@ -108,11 +116,6 @@
                     </a>
                 </li>
                 <li class="separator"></li>
-                <li onClick="document.location = document.location.pathname+ '/timeslider'">
-                    <a id="timesliderlink" title="Show the history of this pad">
-                        <span class="buttonicon buttonicon-history"></span>
-                    </a>
-                </li>
                 <li id="usericon" data-key="showusers">
                     <a title="Show connected users">
                         <span class="buttonicon buttonicon-showusers"></span>
@@ -222,6 +225,60 @@
                 <% e.end_block(); %>
             </div>
         </div>
+        
+        <div id="connectivity" class="popup">
+            <% e.begin_block("modals"); %>
+                <div class="connected visible">
+                  <h2>Connected.</h2>
+                </div>
+                <div class="reconnecting">
+                  <h1>Reestablishing connection...</h1>
+                  <p><img alt="" border="0" src="/static/img/connectingbar.gif" /></p>
+                </div>
+                <div class="userdup">
+                  <h1>Opened in another window.</h1>
+                  <h2>You seem to have opened this pad in another browser window.</h2>
+                  <p>If you'd like to use this window instead, you can reconnect.</p>
+                  <button id="forcereconnect">Reconnect Now</button>
+                </div>
+                <div class="unauth">
+                  <h1>No Authorization.</h1>
+                  <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">
+                  <h1>Disconnected.</h1>
+                  <h2>We're having trouble talking to the EtherPad lite synchronization server.</h2>
+                  <p>You may be connecting through an incompatible firewall or proxy server.</p>
+                </div>
+                <div class="initsocketfail">
+                  <h1>Disconnected.</h1>
+                  <h2>We were unable to connect to the EtherPad lite synchronization server.</h2>
+                  <p>This may be due to an incompatibility with your web browser or internet connection.</p>
+                </div>
+                <div class="slowcommit">
+                  <h1>Disconnected.</h1>
+                  <h2>Server not responding.</h2>
+                  <p>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">
+                  <h1>Disconnected.</h1>
+                  <p>This pad was deleted.</p>
+                </div>
+                <div class="disconnected">
+                  <h1>Disconnected.</h1>
+                  <h2>Lost connection with the EtherPad lite synchronization server.</h2>
+                  <p>This may be due to a loss of network connectivity. 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>
 
         <div id="embed" class="popup">
             <% e.begin_block("embedPopup"); %>
@@ -241,6 +298,11 @@
             </div>
             <% e.end_block(); %>
         </div>
+        
+        <div id="editorcontainerbox">
+            <div id="editorcontainer"></div>
+            <div id="editorloadingbox">Loading...</div>
+        </div>
 
         <div id="chatthrob"></div>
 
@@ -262,57 +324,6 @@
 
         <div id="focusprotector">&nbsp;</div>
 
-        <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>
-                <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>
-            </div>
-            <% e.end_block(); %>
-        </div>
         <% e.end_block(); %>
 
         <% e.begin_block("scripts"); %>
diff --git a/src/templates/timeslider.html b/src/templates/timeslider.html
index 88bfa4e7..02af9f6c 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,59 @@
     </div><!-- /padmain -->
   </div><!-- /padpage -->
 
-  <div id="modaloverlay">
-    <div id="modaloverlay-inner">
-      <!-- -->
+<div id="connectivity" class="popup">
+  <% e.begin_block("modals"); %>
+    <div class="connected visible">
+      <h2>Connected.</h2>
     </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 class="reconnecting">
+      <h1>Reestablishing connection...</h1>
+      <p><img alt="" border="0" src="/static/img/connectingbar.gif" /></p>
+    </div>
+    <div class="userdup">
+      <h1>Opened in another window.</h1>
+      <h2>You seem to have opened this pad in another browser window.</h2>
+      <p>If you'd like to use this window instead, you can reconnect.</p>
+      <button id="forcereconnect">Reconnect Now</button>
+    </div>
+    <div class="unauth">
+      <h1>No Authorization.</h1>
+      <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">
+      <h1>Disconnected.</h1>
+      <h2>We're having trouble talking to the EtherPad lite synchronization server.</h2>
+      <p>You may be connecting through an incompatible firewall or proxy server.</p>
+    </div>
+    <div class="initsocketfail">
+      <h1>Disconnected.</h1>
+      <h2>We were unable to connect to the EtherPad lite synchronization server.</h2>
+      <p>This may be due to an incompatibility with your web browser or internet connection.</p>
+    </div>
+    <div class="slowcommit">
+      <h1>Disconnected.</h1>
+      <h2>Server not responding.</h2>
+      <p>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">
+      <h1>Disconnected.</h1>
+      <p>This pad was deleted.</p>
+    </div>
+    <div class="disconnected">
+      <h1>Disconnected.</h1>
+      <h2>Lost connection with the EtherPad lite synchronization server.</h2>
+      <p>This may be due to a loss of network connectivity. 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">