diff --git a/src/_h5ai/css/inc/content.less b/src/_h5ai/css/inc/content.less
new file mode 100644
index 00000000..cd84d554
--- /dev/null
+++ b/src/_h5ai/css/inc/content.less
@@ -0,0 +1,18 @@
+
+#content {
+	max-width: 960px;
+	margin: 0 auto;
+
+	> header {
+		display: none;
+		padding-bottom: 10px;
+		margin-bottom: 80px;
+		border-bottom: 2px dashed #ddd;
+	}
+	> footer {
+		display: none;
+		padding-top: 10px;
+		margin-top: 80px;
+		border-top: 2px dashed #ddd;
+	}
+}
diff --git a/src/_h5ai/css/inc/footer.less b/src/_h5ai/css/inc/footer.less
new file mode 100644
index 00000000..5a00fffe
--- /dev/null
+++ b/src/_h5ai/css/inc/footer.less
@@ -0,0 +1,111 @@
+
+body > footer {
+	position: fixed;
+	z-index: 1;
+	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);
+
+	color: #999;
+	font-size: 0.85em;
+	text-align: center;
+
+	a, a:active, a:visited {
+		color: #555;
+		text-decoration: none;
+		.transition(all 0.2s ease-in-out);
+		opacity: 0.7;
+
+		&:hover {
+			color: #e80;
+			opacity: 1;
+		}
+	}
+	.left {
+		display: block;
+		padding: 0 8px;
+		float: left
+	}
+	.center {
+		display: block;
+		margin: 0 100px;
+	}
+	.right {
+		display: block;
+		padding: 0 8px;
+		float: right
+	}
+	.noJsMsg {
+		color: #c33;
+		margin-left: 16px;
+	}
+	.status {
+		.sep {
+			display: inline-block;
+			padding: 0 6px;
+		}
+		&.default {
+		}
+		&.dynamic {
+			display: none;
+		}
+	}
+	#langSelector {
+		position: relative;
+		cursor: pointer;
+
+		.langOptions {
+			position: absolute;
+			z-index: 2;
+			overflow: auto;
+			display: none;
+			right: 0;
+			top: 0;
+			max-height: 200px;
+			background-color: rgb(241,241,241);
+			border: 1px solid rgb(210,210,210);
+
+			> .scrollbar {
+				margin: 0;
+				width: 6px;
+				background-color: rgb(210,210,210);
+
+				.drag {
+					background-color: rgb(180,180,180);
+				}
+				&.dragOn .drag {
+					background-color: rgb(150,150,150);
+				}
+			}
+
+			ul {
+				margin: 0;
+				padding: 0;
+				list-style: none;
+				text-align: left;
+
+				li {
+					padding: 8px 24px 10px 24px;
+					white-space: nowrap;
+					border-top: 1px solid rgb(231,231,231);
+					.transition(all 0.2s ease-in-out);
+
+					&.current {
+						color: #333;
+						background-color: rgba(255,255,255,0.8);
+					}
+					&:hover {
+						color: #e80;
+						background-color: rgba(255,255,255,0.8);
+					}
+				}
+				li:nth-child(3n+1) {
+
+				}
+			}
+		}
+	}
+}
diff --git a/src/_h5ai/css/inc/main.less b/src/_h5ai/css/inc/main.less
deleted file mode 100644
index 13baed80..00000000
--- a/src/_h5ai/css/inc/main.less
+++ /dev/null
@@ -1,260 +0,0 @@
-
-@import "h5bp-norm";
-@import "mixins";
-
-
-html.js {
-	.hideOnJs {
-		display: none;
-	}
-}
-html.no-js {
-	.hideOnNoJs {
-		display: none;
-	}
-}
-
-
-body {
-	font-family: Ubuntu, sans-serif;
-	font-size: 16px;
-	color: #555;
-	background-color: #fff;
-	margin: 80px 30px;
-}
-
-
-
-body > nav {
-	position: fixed;
-	z-index: 1;
-	width: 100%;
-	left: 0;
-	top: 0;
-	font-size: 0.85em;
-	background-color: rgb(241,241,241);
-	border-bottom: 2px solid rgb(210,210,210);
-
-	span.jsDisabledFallback {
-		display: block;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-		color: #999;
-	}
-	a, a:active, a:visited, span.element {
-		color: #555;
-		cursor: pointer;
-		text-decoration: none;
-		opacity: 0.7;
-		.transition(all 0.2s ease-in-out);
-
-		display: block;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-
-		&:hover, &.hover {
-			color: #e80;
-			background-color: rgba(255,255,255,0.5);
-			opacity: 1.0;
-		}
-	}
-	.current {
-		a, span.element {
-			background-color: rgba(255,255,255,0.5);
-			opacity: 1.0;
-		}
-	}
-	img {
-		position: relative;
-		top: -2px;
-		width: 16px;
-		height: 16px;
-	}
-	img + span, img + input {
-		margin-left: 6px;
-	}
-	.crumb {
-		float: left;
-		border-right: 1px solid rgb(231,231,231);
-		.hint {
-			margin-left: 8px;
-			font-style: italic;
-			color: #999;
-		}
-		img.hint {
-			width: 10px;
-			height: 10px;
-		}
-	}
-	.view {
-		float: right;
-		border-left: 1px solid rgb(231,231,231);
-	}
-	#download {
-		display: none;
-		float: right;
-		border-left: 1px solid rgb(231,231,231);
-		.transition(all 0.2s ease-in-out);
-
-		&.zipping {
-
-		}
-		&.failed {
-			background-color: rgba(255,0,0,0.5);
-		}
-	}
-	#filter {
-		float: right;
-		border-left: 1px solid rgb(231,231,231);
-
-		input {
-			border: none;
-			font-family: Ubuntu, sans-serif;
-			color: #555;
-			background-color: rgba(0,0,0,0);
-			width: 100px;
-		}
-	}
-}
-
-
-#content {
-	max-width: 960px;
-	margin: 0 auto;
-
-	> header {
-		display: none;
-		padding-bottom: 10px;
-		margin-bottom: 80px;
-		border-bottom: 2px dashed #ddd;
-	}
-	> footer {
-		display: none;
-		padding-top: 10px;
-		margin-top: 80px;
-		border-top: 2px dashed #ddd;
-	}
-}
-
-
-@import "table";
-@import "extended";
-@import "tree";
-@import "context";
-
-
-body > footer {
-	position: fixed;
-	z-index: 1;
-	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);
-
-	color: #999;
-	font-size: 0.85em;
-	text-align: center;
-
-	a, a:active, a:visited {
-		color: #555;
-		text-decoration: none;
-		.transition(all 0.2s ease-in-out);
-		opacity: 0.7;
-
-		&:hover {
-			color: #e80;
-			opacity: 1;
-		}
-	}
-	.left {
-		display: block;
-		padding: 0 8px;
-		float: left
-	}
-	.center {
-		display: block;
-		margin: 0 100px;
-	}
-	.right {
-		display: block;
-		padding: 0 8px;
-		float: right
-	}
-	.noJsMsg {
-		color: #c33;
-		margin-left: 16px;
-	}
-	.status {
-		.sep {
-			display: inline-block;
-			padding: 0 6px;
-		}
-		&.default {
-		}
-		&.dynamic {
-			display: none;
-		}
-	}
-	#langSelector {
-		position: relative;
-		cursor: pointer;
-
-		.langOptions {
-			position: absolute;
-			z-index: 2;
-			overflow: auto;
-			display: none;
-			right: 0;
-			top: 0;
-			max-height: 200px;
-			background-color: rgb(241,241,241);
-			border: 1px solid rgb(210,210,210);
-
-			> .scrollbar {
-				margin: 0;
-				width: 6px;
-				background-color: rgb(210,210,210);
-
-				.drag {
-					background-color: rgb(180,180,180);
-				}
-				&.dragOn .drag {
-					background-color: rgb(150,150,150);
-				}
-			}
-
-			ul {
-				margin: 0;
-				padding: 0;
-				list-style: none;
-				text-align: left;
-
-				li {
-					padding: 8px 24px 10px 24px;
-					white-space: nowrap;
-					border-top: 1px solid rgb(231,231,231);
-					.transition(all 0.2s ease-in-out);
-
-					&.current {
-						color: #333;
-						background-color: rgba(255,255,255,0.8);
-					}
-					&:hover {
-						color: #e80;
-						background-color: rgba(255,255,255,0.8);
-					}
-				}
-				li:nth-child(3n+1) {
-
-				}
-			}
-		}
-	}
-}
-
-@import "responsive";
-
diff --git a/src/_h5ai/css/inc/nav.less b/src/_h5ai/css/inc/nav.less
new file mode 100644
index 00000000..4c753f82
--- /dev/null
+++ b/src/_h5ai/css/inc/nav.less
@@ -0,0 +1,94 @@
+
+body > nav {
+	position: fixed;
+	z-index: 1;
+	width: 100%;
+	left: 0;
+	top: 0;
+	font-size: 0.85em;
+	background-color: rgb(241,241,241);
+	border-bottom: 2px solid rgb(210,210,210);
+
+	span.jsDisabledFallback {
+		display: block;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 10px;
+		color: #999;
+	}
+	a, a:active, a:visited, span.element {
+		color: #555;
+		cursor: pointer;
+		text-decoration: none;
+		opacity: 0.7;
+		.transition(all 0.2s ease-in-out);
+
+		display: block;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 10px;
+
+		&:hover, &.hover {
+			color: #e80;
+			background-color: rgba(255,255,255,0.5);
+			opacity: 1.0;
+		}
+	}
+	.current {
+		a, span.element {
+			background-color: rgba(255,255,255,0.5);
+			opacity: 1.0;
+		}
+	}
+	img {
+		position: relative;
+		top: -2px;
+		width: 16px;
+		height: 16px;
+	}
+	img + span, img + input {
+		margin-left: 6px;
+	}
+	.crumb {
+		float: left;
+		border-right: 1px solid rgb(231,231,231);
+		.hint {
+			margin-left: 8px;
+			font-style: italic;
+			color: #999;
+		}
+		img.hint {
+			width: 10px;
+			height: 10px;
+		}
+	}
+	.view {
+		float: right;
+		border-left: 1px solid rgb(231,231,231);
+	}
+	#download {
+		display: none;
+		float: right;
+		border-left: 1px solid rgb(231,231,231);
+		.transition(all 0.2s ease-in-out);
+
+		&.zipping {
+
+		}
+		&.failed {
+			background-color: rgba(255,0,0,0.5);
+		}
+	}
+	#filter {
+		float: right;
+		border-left: 1px solid rgb(231,231,231);
+
+		input {
+			border: none;
+			font-family: Ubuntu, sans-serif;
+			color: #555;
+			background-color: rgba(0,0,0,0);
+			width: 100px;
+		}
+	}
+}
diff --git a/src/_h5ai/css/main-js.less b/src/_h5ai/css/main-js.less
deleted file mode 100644
index f72967ff..00000000
--- a/src/_h5ai/css/main-js.less
+++ /dev/null
@@ -1,2 +0,0 @@
-
-@import "inc/main";
diff --git a/src/_h5ai/css/main-php.less b/src/_h5ai/css/main-php.less
deleted file mode 100644
index 5efa7731..00000000
--- a/src/_h5ai/css/main-php.less
+++ /dev/null
@@ -1,17 +0,0 @@
-
-@import "inc/main";
-
-
-#table {
-	display: none;
-}
-
-#tree, #content > header, #content > footer {
-	display: block;
-}
-
-html.no-js {
-	#extended.details-view, #extended.icons-view {
-		display: block;
-	}
-}
diff --git a/src/_h5ai/css/main.less b/src/_h5ai/css/main.less
new file mode 100644
index 00000000..a803f9cc
--- /dev/null
+++ b/src/_h5ai/css/main.less
@@ -0,0 +1,58 @@
+
+@import "inc/h5bp-norm";
+@import "inc/mixins";
+
+
+body {
+	font-family: Ubuntu, sans-serif;
+	font-size: 16px;
+	color: #555;
+	background-color: #fff;
+	margin: 80px 30px;
+}
+
+
+@import "inc/nav";
+@import "inc/content";
+@import "inc/table";
+@import "inc/extended";
+@import "inc/tree";
+@import "inc/context";
+@import "inc/footer";
+@import "inc/responsive";
+
+
+html.js {
+	.hideOnJs {
+		display: none;
+	}
+}
+html.no-js {
+	.hideOnNoJs {
+		display: none;
+	}
+}
+html.h5ai-js {
+	#h5ai-reference:after {
+		content: " (js)";
+	}
+}
+html.h5ai-php {
+	#h5ai-reference:after {
+		content: " (php)";
+	}
+
+	#table {
+		display: none;
+	}
+
+	#tree, #content > header, #content > footer {
+		display: block;
+	}
+
+	html.no-js {
+		#extended.details-view, #extended.icons-view {
+			display: block;
+		}
+	}
+}
diff --git a/src/_h5ai/footer.html b/src/_h5ai/footer.html
index e8ca080d..d32323cc 100644
--- a/src/_h5ai/footer.html
+++ b/src/_h5ai/footer.html
@@ -1,12 +1,10 @@
 			<!-- generated code ends here -->
 		</section>
-		<section id="extended" class="clearfix"></section>
-		<footer></footer>
 	</section>
-	<section id="tree"></section>
+	<div id="selection-rect"></div>
 	<footer class="clearfix">
 		<span class="left">
-			<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION% (js)</a>
+			<a id="h5ai-reference" href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION%</a>
 			<span class="hideOnJs noJsMsg"> ⚡ JavaScript is disabled! ⚡ </span>
 		</span>
 		<span class="right">
diff --git a/src/_h5ai/footer.php b/src/_h5ai/footer.php
deleted file mode 100644
index ee6c2b75..00000000
--- a/src/_h5ai/footer.php
+++ /dev/null
@@ -1,4 +0,0 @@
-		<!-- generated code ends here -->
-	</section>
-</body>
-</html>
diff --git a/src/_h5ai/header.html b/src/_h5ai/header.html
index ef671b42..1cada171 100644
--- a/src/_h5ai/header.html
+++ b/src/_h5ai/header.html
@@ -13,16 +13,18 @@
 	<link rel="shortcut icon" type="image/png" href="/_h5ai/images/h5ai-16x16.png">
 	<link rel="apple-touch-icon" type="image/png" href="/_h5ai/images/h5ai-48x48.png">
 	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
-	<link rel="stylesheet" href="/_h5ai/css/main-js.css">
+	<link rel="stylesheet" href="/_h5ai/css/main.css">
 	<script src="/_h5ai/js/modernizr.min.js"></script>
 </head>
 <body>
-	<div id="selection-rect"></div>
 	<nav class="clearfix hideOnNoJs">
 		<ul id="navbar"></ul>
 	</nav>
+	<section id="tree"></section>
 	<section id="content">
 		<header></header>
+		<section id="extended" class="clearfix"></section>
+		<footer></footer>
 		<section id="table" class="hideOnJs">
 			<!--
 				The following code was generated by Apache's autoindex module. It is not valid HTML5, but this
diff --git a/src/_h5ai/header.php b/src/_h5ai/header.php
index f9ce0a3e..1d0d0790 100644
--- a/src/_h5ai/header.php
+++ b/src/_h5ai/header.php
@@ -14,11 +14,10 @@
 	<link rel="shortcut icon" type="image/png" href="/_h5ai/images/h5ai-16x16.png">
 	<link rel="apple-touch-icon" type="image/png" href="/_h5ai/images/h5ai-48x48.png">
 	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
-	<link rel="stylesheet" href="/_h5ai/css/main-php.css">
+	<link rel="stylesheet" href="/_h5ai/css/main.css">
 	<script src="/_h5ai/js/modernizr.min.js"></script>
 </head>
 <body>
-	<div id="selection-rect"></div>
 	<nav class="clearfix">
 		<ul id="navbar">
 			<?php echo $crumb->toHtml(); ?>
@@ -29,32 +28,5 @@
 		<?php echo $customize->getHeader(); ?>
 		<?php echo $extended->toHtml(); ?>
 		<?php echo $customize->getFooter(); ?>
-	</section>
-	<footer class="clearfix">
-		<span class="left">
-			<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION% (php)</a>
-			<span class="hideOnJs noJsMsg"> ⚡ JavaScript is disabled! ⚡ </span>
-		</span>
-		<span class="right">
-			<span id="langSelector">
-				<span class="lang">en</span> - <span class="l10n-lang">english</span>
-				<span class="langOptions"></span>
-			</span>
-		</span>
-		<span class="center">
-			<span class="hideOnNoJs">
-				<span class="status default">
-					<span class="folderTotal"></span> <span class="l10n-folders">folders</span>
-					<span class='sep'>·</span>
-					<span class="fileTotal"></span> <span class="l10n-files">files</span>
-				</span>
-				<span class="status dynamic">
-				</span>
-			</span>
-		</span>
-	</footer>
-	<script src="/_h5ai/js/libs.js"></script>
-	<script src="/_h5ai/config.js"></script>
-	<script src="/_h5ai/js/main.js"></script>
-	<section id="table">
-		<!-- The following code was generated by Apache's autoindex module and gets ignored and removed from the DOM tree. -->
+		<section id="table" class="hideOnJs">
+			<!-- The following code was generated by Apache's autoindex module and gets ignored and removed from the DOM tree. -->
diff --git a/src/_h5ai/js/inc/lib/jquery.qrcode.js b/src/_h5ai/js/inc/lib/jquery.qrcode.js
index d4c8dcb0..1d990be3 100644
--- a/src/_h5ai/js/inc/lib/jquery.qrcode.js
+++ b/src/_h5ai/js/inc/lib/jquery.qrcode.js
@@ -6,6 +6,7 @@
  * kudos to http://github.com/jeromeetienne/jquery-qrcode
  */
 (function ($) {
+	'use strict';
 
 	// @include "qrcode.js"
 
diff --git a/src/_h5ai/js/inc/lib/jquery.scrollpanel.js b/src/_h5ai/js/inc/lib/jquery.scrollpanel.js
index 2b8d0a0c..dfe675c5 100644
--- a/src/_h5ai/js/inc/lib/jquery.scrollpanel.js
+++ b/src/_h5ai/js/inc/lib/jquery.scrollpanel.js
@@ -5,7 +5,6 @@
  *
  * still quick and dirty!
  */
-
 (function (window, $) {
 	"use strict";
 
diff --git a/src/h5ai.htaccess b/src/h5ai.htaccess
index 10a0ea89..c98fe61a 100644
--- a/src/h5ai.htaccess
+++ b/src/h5ai.htaccess
@@ -8,11 +8,11 @@
 
 # pure JavaScript version
 HeaderName    /_h5ai/header.html
-ReadmeName    /_h5ai/footer.html
 
 # PHP version
 # HeaderName    /_h5ai/header.php
-# ReadmeName    /_h5ai/footer.php
+
+ReadmeName    /_h5ai/footer.html
 
 IndexIgnore _h5ai*