put all debug gui (load/save/deliverables) into a table

2 files changed, 31 insertions, 21 deletions

diff --git a/index.html b/index.html
index 5b211778..90359a57 100644
--- a/index.html
+++ b/index.html
@@ -64,26 +64,48 @@
       </table>
       </div>
 
+    <div class="debug-ui">
+    <table>
+    <tbody>
+    <tr>
+    <td>
     <div class="save">
         <a href="#">SAVE</a>
     </div>
+    </td>
+    <td>
     <div class="saveToFile">
         <a href="#">Save to File</a>
     </div>
+    </td>
+    </tr>
+    <tr>
+    <td>
     <div class="load">
         <a href="#">LOAD</a>
     </div>
+    </td>
+    </tr>
+    <tr>
+    <td>
     <div class="deliverabletest">
         <a href="#">Load deliverables</a>
     </div>
-
+    </td>
+    </tr>
+    <tr>
+    <td>
+    <div class="debug">debug</div>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+    </div>
 
     <div class="logo">
         <a href="#"><img src="images/sage.png"/></a>
     </div>
 
-
-    <div class="debug">debug</div>
   </div>
 
   <div class="poweredby">powered by <a href="http://www.rhizi.org"><img src="images/rhizismall.png"/></a></div>
diff --git a/style.css b/style.css
index eb319454..55ef4d93 100644
--- a/style.css
+++ b/style.css
@@ -272,38 +272,26 @@ input:focus {
    border-color: #303030;
 }
 
-.debug{
+.debug-ui {
   position:fixed;
-  bottom:10px;
+  bottom:70px;
   left:10px;
+  text-decoration: none;
+}
+
+.debug{
 }
 
 .save{
-  position:fixed;
-  bottom:30px;
-  left:10px;
-  text-decoration: none;
 }
 
 .saveToFile {
-  position:fixed;
-  bottom:30px;
-  left:60px;
-  text-decoration: none;
 }
 
 .load{
-  position:fixed;
-  bottom:50px;
-  left:10px;
-  text-decoration: none;
 }
 
 .deliverabletest{
-  position:fixed;
-  bottom:70px;
-  left:10px;
-  text-decoration: none;
 }
 
 .poweredby{