clean up of index.html neeed to test this, probably stuff i did wrong

css/style.less

@@ -1,60 +1,15 @@
 @import "../bootstrap/less/bootstrap.less";
 
-
+/* Comments:
-html, body {
+ *
-    width:100%; 
+ * 1. we need to rationalise the use of width and max widths. they seem to be
-}
+ * completely arbitrarily chosen. May not allow for a lot of flexibility…
-
+ * especially on different screens size.
-/* 
- * The top heading of the doc
  *
  */
 
-#masthead {
+html, body {
-    .page-header;
+    width:100%; 
-    .clearfix;
-    .hidden-xs;
-    .make-row(12);
-
-    .app.title {
-        .make-sm-column(10);
-        .desc {
-            .small;
-        }
-    }
-
-    .logout-button {
-        .make-sm-column(2);
-        a {
-            .hidden;
-            .glyphicon;
-            .glyphicon-log-out;
-            .btn; 
-            .btn-link;
-        }
-    }
-}
-
-#slider {
-    .center-block;
-    padding: 5px;
-    max-width: 750px;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    text-align: left;
-}
-
-#slider-container {
-    max-width: 1500px;/*[RFC] why the max-width? */
-    width: 1500px; 
-    height: 100%;
-}
-
-#main {
-    float: left;
-    overflow: hidden;
 }
 
 .block {
@@ -74,6 +29,119 @@ html, body {
     transition: margin-left 0.4s ease-in-out;
 }
 
+.placehold {
+    font-size: 0.0001em;
+    color: transparent;
+}
+
+/* 
+ * The top heading of the doc
+ *
+ */
+
+#masthead {
+    .page-header;
+    .clearfix;
+    .hidden-xs;
+    .make-row(12);
+    margin-top: 0;
+    padding: 0 10px;
+
+    .app.title, .logout-button {
+        margin-top: 20px;
+    }
+
+    .app.title {
+        .make-sm-column(10);
+        .desc {
+            .small;
+        }
+    }
+
+    .logout-button {
+        .make-sm-column(2);
+        font-size: 2em;
+        a {
+            .hidden;
+            .glyphicon;
+            .glyphicon-log-out;
+            .btn; 
+            .btn-link;
+        }
+    }
+}
+
+/* 
+ * The “slider”
+ *
+ */
+
+#slider {
+    .center-block;
+    padding: 5px;
+    max-width: 750px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    text-align: left;
+}
+
+#slider-container {
+    max-width: 1500px;/*[RFC] why the max-width? */
+    width: 1500px; 
+    height: 100%;
+}
+
+#slideBack, #slideTo, #main {
+    .block;
+}
+
+/* 
+ * The main part of the app
+ *
+ */
+
+#main {
+    float: left;
+    overflow: hidden;
+}
+
+.ajax-loader {
+    .placehold;
+    background: url(/img/ajax-loader.gif) 50% 50% no-repeat transparent;
+    width: 24px;
+    height: 24px;
+}
+
+/* 
+ * The pop up dialog
+ *
+ */
+
+#popup {
+    .modal;
+    .fade;
+    .modal-dialog;
+
+    #popup-title {
+        .modal-dialog;
+        .modal-content;
+        .modal-header;
+        .modal-title;
+    }
+    #popup-body {
+        .modal-dialog;
+        .modal-content;
+        .modal-body;
+    }
+}
+
+/* 
+ * Various styles 
+ *
+ */
+
 body .form-control {
     padding: 6px;
 }
@@ -84,18 +152,6 @@ body .form-control {
     margin: -35px 120px 0 120px;
 }
 
-.page-header {
-    margin-top: 0px;
-    padding: 0 10px;
-}
-    .page-header h1,
-    .page-header .logout-button {
-        margin-top:20px;
-    }
-    .page-header h1 {max-width: 85%; /* leave space for logout button */}
-    .logout-button {font-size:2em;}
-
-
 div.br {
     height: 30px;
 }
@@ -111,6 +167,7 @@ div.br {
     background: rgba(255, 255, 255, 0.5);
     padding-top: 10%;
 }
+
 .loader-content img {
     display: inline-block;
     vertical-align: middle;

index.html

@@ -21,18 +21,11 @@
 
         <div id="slider-container">
 
-            <!--div id="slideBack" class="block" style="display: none;"></div>
-            <div id="main" class="block">
-                <div class="text-center"><a class="slide" href="#/login"><img src="img/ajax-loader.gif"></a></div>
-            </div>
-            <div id="slideTo" class="block" style="display: none; z-index: 100;"></div>
-            <div class="clearfix"></div-->
-
             <div id="slideBack" style="display: none;"></div>
 
             <div id="main" role="main">
                 <a class="slide" href="#/login">
-                    <img src="img/ajax-loader.gif" alt="loading">
+                    <span class="ajax-loader">loading…</span>
                 </a>
             </div>
 
@@ -53,8 +46,8 @@
         </div>
     </div-->
     <div id="popup" role="dialog">
-        <h2 class="modal-title" id="popup-title"></h2>
+        <h2  id="popup-title"></h2>
-        <div class="modal-body" id="popup-body"></div>
+        <div  id="popup-body"></div>
     </div>
 
     <script type="text/javascript" src="js/vendor/jquery-1.10.1.min.js"></script>