diff --git a/static/css/pad.css b/static/css/pad.css
index 79dce0197..924299bff 100644
--- a/static/css/pad.css
+++ b/static/css/pad.css
@@ -156,16 +156,16 @@ a img
   margin: 0; 
 }
 
-#editorloadingbox { 
-  padding-top: 100px; 
-  padding-bottom: 100px; 
-  font-size: 2.5em;  
+#editorloadingbox {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  font-size: 2.5em;
   color: #aaa;
-  text-align: center; 
-  position: absolute; 
-  width: 100%; 
-  height: 30px; 
-  z-index: 100; 
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: 30px;
+  z-index: 100;
   
   background: url(../../static/img/connectingbar.gif) no-repeat center 130px;
 }
@@ -482,7 +482,7 @@ table#otheruserstable { display: none; }
   border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
 }
 .usertdname input.editempty { color: #888; font-style: italic;}
-
+  
 .modaldialog.cboxreconnecting .modaldialog-inner,
 .modaldialog.cboxconnecting .modaldialog-inner {
   background: url("../../static/img/connectingbar.gif") no-repeat scroll center bottom transparent;
@@ -520,22 +520,20 @@ table#otheruserstable { display: none; }
   z-index: 11;
 }
 #connectionboxinner .connecting {
+  margin-top: 20px;
   font-size: 2.0em; color: #555;
   text-align: center; display: none;
 }
 .cboxconnecting #connectionboxinner .connecting { display: block; }
 
-#connectionboxinner .disconnected{
-  margin: 10px;  
-}
-
 #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 0;
+  margin: 10px 10px;
   font-size: 1.2em;
   line-height: 1.1;
   color: #333;
@@ -544,6 +542,7 @@ table#otheruserstable { display: none; }
 .cboxdisconnected #connectionboxinner .disconnected { display: block; }
 
 #connectionboxinner .reconnecting {
+  margin-top: 20px;
   font-size: 1.6em; color: #555;
   text-align: center; display: none;
 }
@@ -602,7 +601,7 @@ table#otheruserstable { display: none; }
 
 .modaldialog {
   position: absolute;
-  top: 35px;
+  top: 100px;
   left:50%;
   margin-left:-243px;
   width: 485px;
@@ -613,6 +612,7 @@ table#otheruserstable { display: none; }
   background: white;
  border: 1px solid #999;
 }
+.modaldialog .modaldialog-inner { padding: 10pt; }
 .modaldialog .modaldialog-hide {
   float: right;
   background-repeat: no-repeat;
@@ -693,6 +693,20 @@ table#otheruserstable { display: none; }
   top: 5px; right: 220px;
 }
 
+#modaloverlay {
+  z-index: 500; display: none;
+  background-repeat: repeat-both;
+  width: 100%; position: absolute;
+  height: 100%; left: 0; top: 0;
+}
+
+* html #modaloverlay { /* for IE 6+ */
+  opacity: 1; /* in case this is looked at */
+  background-image: none;
+  background-repeat: no-repeat;
+  /* scale the image */
+}
+
 a#topbarmaximize {
  float: right;
  width: 16px;
@@ -1180,6 +1194,16 @@ input[type=checkbox] {
  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) {
   #editbar ul li {
     padding: 4px 1px;
diff --git a/static/js/pad.js b/static/js/pad.js
index c9694c0fe..743ab3601 100644
--- a/static/js/pad.js
+++ b/static/js/pad.js
@@ -702,6 +702,11 @@ var pad = {
     else if (newState == "RECONNECTING")
     {
       padconnectionstatus.reconnecting();
+      
+      padeditor.disable();
+      padeditbar.disable();
+      paddocbar.disable();
+      padimpexp.disable();
     }
     else if (newState == "DISCONNECTED")
     {
diff --git a/static/pad.html b/static/pad.html
index 693703fa8..11b8b558a 100644
--- a/static/pad.html
+++ b/static/pad.html
@@ -73,52 +73,6 @@
             </ul>
             <div id="editbar-RO">&nbsp;</div>
         </div>
-        <div id="mainmodals">
-            <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>
-            
-        </div>
 
         <div id="users">
             <div id="connectionstatus"></div>
@@ -252,6 +206,53 @@
         </div>
 
         <div id="focusprotector">&nbsp;</div>
+        
+        <div id="mainmodals">
+            <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>
+            
+        </div>
 
         <script type="text/javascript" src="../static/js/require-kernel.js"></script>
         <script type="text/javascript" src="../socket.io/socket.io.js"></script>