Update: Header.html Added to the Demo

Demo.html

@@ -79,6 +79,10 @@
     <span id="redo">Redo</span>
   </p>
 </header>
+
+<iframe src="build/header.html" width="500" height="80"></iframe>
 <iframe src="build/document.html" onload="top.editor=this.contentWindow.editor" width="500" height="500"></iframe>
+
+
 </body>
 </html>

ui/ui.css

@@ -1 +1,41 @@
+.menu .item {
+    color:#000;
+    float:left;
+    background:#FFF;
+    padding:10px;
+    border-left:1px #EEE solid;
+    -webkit-font-smoothing:subpixel-antialiased
+}
+
+.menu .group {
     border-radius:3px;
+    display:inline-block;
+    border:1px #EEE solid;
+    margin:5px
+}
+
+.menu .group .item .flip {
+    -ms-transform:rotateY(180deg);
+    -webkit-transform:rotateY(180deg);
+    -moz-transform:rotateY(180deg);
+    transform:rotateY(180deg)
+}
+
+.menu {
+    text-align:center;
+    -webkit-touch-callout:none;
+    -webkit-user-select:none;
+    -khtml-user-select:none;
+    -moz-user-select:none;
+    -ms-user-select:none;
+    user-select:none
+}
+
+.menu .group .item:hover, .menu .item:first-child:hover {
+	border-left: 3px #55ACEE solid;
+}
+
+.menu .item:first-child {
+    border-left:none;
+}
+