=== modified file 'lava_server/htdocs/css/default.css'
--- lava_server/htdocs/css/default.css	2011-11-22 20:38:02 +0000
+++ lava_server/htdocs/css/default.css	2012-06-04 05:10:13 +0000
@@ -73,6 +73,7 @@
   display: -moz-box;
   display: -webkit-box;
 
+  height: 37px;
   width: 100%;
   position: relative;
   z-index: 1000;
@@ -105,6 +106,11 @@
   outline: none;
 }
 
+#lava-panel .lava-panel-element{
+  display: table-cell;
+  outline: none;
+}
+
 #lava-panel .lava-panel-element.lava-indicator {
   box-pack: end;
   -moz-box-pack: end;
@@ -125,16 +131,26 @@
   text-decoration: none;
 }
 
-/* Spacer */
-
-#lava-panel-spacer {
-  box-flex: 1;
-  -moz-box-flex: 1;
-  -webkit-box-flex: 1;
-}
-
 /* Panel menu items */
 
+#lava-menu-bar-right, #lava-menu-bar-left {
+  height: 30px;
+  position: absolute;
+  top: 0;
+  white-space: nowrap;
+  z-index: 1000;
+}
+
+#lava-menu-bar-left {
+  left: 0;
+  padding-left: 4px;
+}
+
+#lava-menu-bar-right {
+  right: 0;
+  padding-right: 5px;
+}
+
 #lava-panel ul.lava-panel-menu {
   list-style: none;
 
@@ -180,6 +196,10 @@
   text-align: center;
 }
 
+#lava-user-indicator ul.lava-panel-menu {
+  text-align: left;
+}
+
 #lava-user-indicator img {
   vertical-align: top;
 }
@@ -191,6 +211,7 @@
 /* AJAX indicator */
 
 #lava-ajax-indicator {
+  visibility: hidden;
   opacity: 0.0;
 }
 

=== modified file 'lava_server/templates/layouts/content.html'
--- lava_server/templates/layouts/content.html	2011-11-22 20:56:07 +0000
+++ lava_server/templates/layouts/content.html	2012-06-04 03:32:24 +0000
@@ -17,24 +17,24 @@
 
     {% block menu %}
     <!-- menu -->
+    <div id="lava-menu-bar-left">
     {% for menu in lava.menu_list %}
     <div class="lava-panel-element{% if menu.sub_menu %} has-menu{% endif %}">
       <a class="lava-panel-menu-text" href="{{ menu.url }}">{{ menu.label }}{% if menu.sub_menu %} &#x25BE;{% endif %}</a>
+      {% if menu.sub_menu %}
+      <ul class="lava-panel-menu">
+      {% for sub_menu in menu.sub_menu %}
+        <li><a href="{{ sub_menu.url }}">{{ sub_menu.label }}</a></li>
+      {% endfor %}
+      </ul>
+      {% endif %}
     </div>
-    {% if menu.sub_menu %}
-    <ul class="lava-panel-menu">
-    {% for sub_menu in menu.sub_menu %}
-      <li><a href="{{ sub_menu.url }}">{{ sub_menu.label }}</a></li>
-    {% endfor %}
-    </ul>
-    {% endif %}
     {% endfor %}
     <!-- !menu -->
     {% endblock menu %}
-
-    <!-- empty spacer to separate menu from indicators -->
-    <div class="lava-panel-element no-hover" id="lava-panel-spacer"></div>
-
+    </div>
+    <!-- !lava menu bar left -->
+    <div id="lava-menu-bar-right">
     <!-- ajax indicator -->
     <div class="lava-panel-element lava-indicator no-hover" id="lava-ajax-indicator">
       <div class="lava-panel-menu-text">
@@ -46,12 +46,13 @@
         $('#lava-ajax-indicator').animate({
           opacity: 1.0
         }, "fast", function() {
+          $("#lava-ajax-indicator").css("visibility", "visible");
         });
       }).ajaxStop(function() {
         $('#lava-ajax-indicator').animate({
           opacity: 0.0
         }, "fast", function() {
-          $("#lava-ajax-indicator").css("display", "hidden");
+          $("#lava-ajax-indicator").css("visibility", "hidden");
         });
       });
     </script>
@@ -73,17 +74,19 @@
           >{% trans "Guest" %}</a>
         {% endif %}
       </div>
+      {% if user.is_authenticated %}
+      <ul class="lava-panel-menu">
+        <li><a href="{% url lava.me %}">My profile</a></li>
+        {% if user.is_staff %}
+        <li><a href="{% url admin:index %}">Administration</a></li>
+        {% endif %}
+        <li><a href="{% url django.contrib.auth.views.logout %}">Sign out</a></li>
+      </ul>
+      {% endif %}
     </div>
-    {% if user.is_authenticated %}
-    <ul class="lava-panel-menu">
-      <li><a href="{% url lava.me %}">My profile</a></li>
-      {% if user.is_staff %}
-      <li><a href="{% url admin:index %}">Administration</a></li>
-      {% endif %}
-      <li><a href="{% url django.contrib.auth.views.logout %}">Sign out</a></li>
-    </ul>
-    {% endif %}
     <!-- !user indicator -->
+    </div>
+    <!-- !lava menu bar right -->
 
   </div>
   <!-- !panel -->
@@ -138,7 +141,7 @@
           menu_should_open = true;
           $("#lava-panel").addClass("active");
 
-          if ($(this).next(".lava-panel-menu").position().top > -500) {
+          if ($(this).children(".lava-panel-menu").position().top > -500) {
             // Clicking on a menu with a visible sub-menu just triggers the link
             return;
           }
@@ -149,7 +152,7 @@
           // Find the sub menu 
           var self = $(this);
           current_menu = self;
-          current_sub_menu = self.next(".lava-panel-menu");
+          current_sub_menu = self.children(".lava-panel-menu");
 
           // Add an 'active' class to the current menu, this showes up as a nice gradient
           current_menu.addClass("active");

