Fixed status indicator region

IPython/html/static/notebook/less/menubar.less

@@ -19,6 +19,12 b''
   line-height: 12px;
 }
 
+#menubar .navbar-right {
+  // Add some padding to the right aligned items.
+  padding-top: 5px;
+}
+
+
 i.menu-icon {
   // add padding to account for float-right
   padding-top: 4px;
@@ -36,7 +42,8 b' ul#menus {'
   float: left;
 }
 
-// http://www.bootply.com/86684
+// Make sub menus work in BS3.
+// Credit: http://www.bootply.com/86684
 .dropdown-submenu{position:relative;}
 .dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
 .dropdown-submenu:hover>.dropdown-menu{display:block;}

IPython/html/static/notebook/less/notificationarea.less

@@ -1,4 +1,6 b''
 #notification_area {
+    .pull-right();
+    
     z-index: 10;
 }
 
@@ -12,8 +14,17 b''
 }
 
 #kernel_indicator {
-    // Pull it to the right, outside the container boundary
-    margin-right: -16px;
+    .pull-right();
+    .indicator_area();
+
+    margin-right: 12px;
+}
+
+#modal_indicator {
+    .pull-right();
+    .indicator_area();
+    
+    margin-right: 5px;
 }
 
 .edit_mode_icon:before {

IPython/html/templates/notebook.html

@@ -254,17 +254,17 b' class="notebook_app"'
             </ul>
         </li>
     </ul>
-        </div>
-    </div>
-
-    <!-- float to the right of the menu bar -->
-    <div id="kernel_indicator" class="indicator_area pull-right">
+            <ul class="nav navbar-nav navbar-right">
+                <div id="kernel_indicator">
        <i id="kernel_indicator_icon"></i>
     </div>
-    <div id="modal_indicator" class="indicator_area pull-right">
+                <div id="modal_indicator">
        <i id="modal_indicator_icon"></i>
     </div>
     <div id="notification_area"></div>
+            </ul>
+        </div>
+    </div>
 </div>
 <div id="maintoolbar" class="navbar">
   <div class="toolbar-inner navbar-inner navbar-nobg">