Changes design.

src/_h5ai/css/inc/context.less

@@ -1,6 +1,7 @@
 
 #context {
 	position: fixed;
+	z-index: 1;
 	display: none;
 	right: 16px;
 	bottom: 50px;

src/_h5ai/css/inc/footer.less

@@ -1,13 +1,13 @@
 
 body > footer {
 	position: fixed;
-	z-index: 1;
+	z-index: 5;
 	width: 100%;
 	left: 0;
 	bottom: 0;
 	padding: 6px 0 8px 0;
-	background-color: rgb(241,241,241);
-	border-top: 2px solid rgb(210,210,210);
+	.vert-gradient(rgb(241,241,241), rgb(228,228,228));
+	border-top: 1px solid rgb(210,210,210);
 
 	color: #999;
 	font-size: 0.85em;

src/_h5ai/css/inc/mixins.less

@@ -1,38 +1,59 @@
 
+
 .border-radius (@radius) {
-	-moz-border-radius: @radius;
-	-webkit-border-radius: @radius;
-	border-radius: @radius;
+    -webkit-border-radius: @radius; /* Saf3-4, iOS 1-3.2, Android <1.6 */
+       -moz-border-radius: @radius; /* FF1-3.6 */
+            border-radius: @radius; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
+}
+
+
+.background-clip () {
+    -webkit-background-clip: padding-box;
+       -moz-background-clip: padding;
+            background-clip: padding-box;
 }
 
 
 .box-shadow (@shadow) {
-	-moz-box-shadow: @shadow;
-	-webkit-box-shadow: @shadow;
-	box-shadow: @shadow;
+    -webkit-box-shadow: @shadow; /* Saf3-4 */
+       -moz-box-shadow: @shadow; /* FF3.5 - 3.6 */
+            box-shadow: @shadow; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
 }
 
 
 .transition (@transition) {
-	-moz-transition: @transition;
-	-ms-transition: @transition;
-	-o-transition: @transition;
-	-webkit-transition: @transition;
-	transition: @transition;
+    -webkit-transition: @transition; /* Saf3.2+, Chrome */
+       -moz-transition: @transition; /* FF4+ */
+        -ms-transition: @transition; /* IE10? */
+         -o-transition: @transition; /* Opera 10.5+ */
+            transition: @transition;
 }
 
 
 .transform (@transform) {
-	-moz-transform: @transform;
-	-o-transform: @transform;
-	-webkit-transform: @transform;
-	transform: @transform;
+    -webkit-transform: @transform; /* Saf3.1+, Chrome */
+       -moz-transform: @transform; /* FF3.5+ */
+        -ms-transform: @transform; /* IE9 */
+         -o-transform: @transform; /* Opera 10.5 */
+            transform: @transform;
+                 zoom: 1;
+}
+
+
+.vert-gradient (@top, @bottom) {
+    background-color: @top;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(@top), to(@bottom)); /* Saf4+, Chrome */
+    background-image: -webkit-linear-gradient(top, @top, @bottom); /* Chrome 10+, Saf5.1+, iOS 5+ */
+    background-image:    -moz-linear-gradient(top, @top, @bottom); /* FF3.6 */
+    background-image:     -ms-linear-gradient(top, @top, @bottom); /* IE10 */
+    background-image:      -o-linear-gradient(top, @top, @bottom); /* Opera 11.10+ */
+    background-image:         linear-gradient(top, @top, @bottom);
 }
 
 
 .background-size (@size) {
-	-moz-background-size: @size;
-	-webkit-background-size: @size;
-	background-size: @size;
+    -webkit-background-size: @size; /* Saf3-4 */
+       -moz-background-size: @size; /* FF3.6 */
+            background-size: @size; /* Opera, IE9, Saf5, Chrome, FF4 */
 }
 

src/_h5ai/css/inc/nav.less

@@ -1,13 +1,13 @@
 
 body > nav {
 	position: fixed;
-	z-index: 1;
+	z-index: 5;
 	width: 100%;
 	left: 0;
 	top: 0;
 	font-size: 0.85em;
-	background-color: rgb(241,241,241);
-	border-bottom: 2px solid rgb(210,210,210);
+	.vert-gradient(rgb(241,241,241), rgb(228,228,228));
+	border-bottom: 1px solid rgb(210,210,210);
 
 	span.jsDisabledFallback {
 		display: block;
@@ -51,7 +51,7 @@ body > nav {
 	}
 	.crumb {
 		float: left;
-		border-right: 1px solid rgb(231,231,231);
+		border-right: 1px solid rgba(0,0,0,0.05);
 		.hint {
 			margin-left: 8px;
 			font-style: italic;
@@ -64,12 +64,12 @@ body > nav {
 	}
 	.view {
 		float: right;
-		border-left: 1px solid rgb(231,231,231);
+		border-left: 1px solid rgba(0,0,0,0.05);
 	}
 	#download {
 		display: none;
 		float: right;
-		border-left: 1px solid rgb(231,231,231);
+		border-left: 1px solid rgba(0,0,0,0.05);
 		.transition(all 0.2s ease-in-out);
 
 		&.zipping {
@@ -81,7 +81,7 @@ body > nav {
 	}
 	#filter {
 		float: right;
-		border-left: 1px solid rgb(231,231,231);
+		border-left: 1px solid rgba(0,0,0,0.05);
 
 		input {
 			border: none;

src/_h5ai/css/inc/tree.less

@@ -3,15 +3,14 @@
 	display: none;
 	position: fixed;
 	left: 0;
-	top:  62px;
+	top:  31px;
+	height: 100%;
 	z-index: 1;
 	overflow: auto;
 	font-size: 0.85em;
 	padding: 8px;
 	background-color: rgb(241,241,241);
-	border: 1px solid rgb(210,210,210);
-	border-left: none;
-	.border-radius(0 10px 10px 0);
+	border-right: 2px solid rgb(221,221,221);
 
 	> .scrollbar {
 		margin: 8px 8px 8px 0;

src/_h5ai/js/inc/Core.js

@@ -90,7 +90,7 @@
 							navHeight = $("body > nav").outerHeight(),
 							footerHeight = $("body > footer").outerHeight(),
 							contentSpacing = 50,
-							treeSpacing = 30;
+							treeSpacing = 0;
 
 						$body.css({
 							"margin-top": navHeight + contentSpacing,
@@ -99,7 +99,7 @@
 
 						$tree.css({
 							top: navHeight + treeSpacing,
-							height: winHeight - navHeight - footerHeight - 18 - 2 * treeSpacing
+							height: winHeight - navHeight - footerHeight - 16 - 2 * treeSpacing
 						});
 
 						try {