New layout: application actions sticking to the right edge

css/style.css

@@ -12,9 +12,9 @@ body {
   text-align: center;
   font-size: 0;
   position: absolute;
-  left: 104px;
+  left: 100px; /* Reserve room for tools on the left edge of the screen. */
   top: 10px;
-  right: 0;
+  right: 50px; /* Reserve room for actions on the right edge of the screen. */
   bottom: 10px;
 }
 
@@ -47,8 +47,7 @@ body {
   position: fixed;
   top: 0;
   bottom: 0;
-  left: 0;
-  width: 140px;
+  z-index: 10;
 }
 
 .sticky-section .wrap {
@@ -56,6 +55,24 @@ body {
   vertical-align: middle;
 }
 
+.left-sticky-section.sticky-section {
+  left: 0;
+  max-width: 100px;
+}
+
+.left-sticky-section .tool-icon {
+  float: left;
+}
+
+.right-sticky-section.sticky-section {
+  right: 0;
+  width: 50px;
+}
+
+.right-sticky-section .tool-icon {
+  float: right;
+}
+
 
 /**
  * Canvases layout
@@ -133,10 +150,6 @@ body {
   overflow: hidden;
 }
 
-.application-actions {
-  margin-top: 35px;
-}
-
 /** 
  * User messages 
  */

css/tools.css

@@ -6,7 +6,6 @@
 }
 
 .tool-icon {
-  float: left;
   cursor : pointer;
   width: 46px;
   height: 46px;
@@ -219,5 +218,6 @@
   font-size: 11px;
   text-transform: uppercase;
   color: #fff;
+  text-align: center;
 }