css/style.css

@@ -136,37 +136,35 @@ p:first-child {
   flex-direction: column;
   overflow: hidden;
   height: 100%;
+  position: relative;
 }
-#main #main-header {
+#main .header {
   flex: 0 0 auto;
+  z-index: 1;
 }
-#main #main-header #menu-button {
+#main .header #menu-button {
   display: none;
 }
-#main #main-header .header > * {
+#main .header > * {
   padding-left: 20px !important;
 }
 #main #content {
   flex: 1 1 auto;
   overflow: auto;
+  z-index: 0;
 }
 #main #content #body {
   padding: 20px;
   margin-bottom: 60px;
 }
-#buttons #buttons-left,
-#buttons #buttons-right {
-  position: fixed;
+#buttons-left,
+#buttons-right {
+  position: absolute;
   padding: 10px;
   bottom: 0px;
 }
-#buttons #buttons-left {
-  left: 0px;
-}
-#buttons #buttons-right {
-  right: 0px;
-}
-#buttons button {
+#buttons-left button,
+#buttons-right button {
   margin: 10px;
   border-radius: 50%;
   display: inline-block;
@@ -181,6 +179,12 @@ p:first-child {
   font-size: 24px;
   line-height: 24px;
 }
+#buttons-left {
+  left: 0px;
+}
+#buttons-right {
+  right: 0px;
+}
 #cookiePopup {
   position: absolute;
   background: black;

less/style.less

@@ -161,15 +161,17 @@ p:first-child{
 	flex-direction: column;
 	overflow:hidden;
 	height:100%;
+	position:relative;
 
-	#main-header{
+	.header{
 		flex: 0 0 auto;
+		z-index:1;
 
 		#menu-button{
 			display:none;
 		}
 
-		.header>*{
+		>*{
 			padding-left: 20px !important;
 		}
 	}
@@ -177,6 +179,7 @@ p:first-child{
 	#content{
 		flex: 1 1 auto;
 		overflow:auto;
+		z-index:0;
 
 		#body{
 			padding:20px;
@@ -187,20 +190,10 @@ p:first-child{
 
 }
 
-#buttons{
-	#buttons-left,#buttons-right{
-		position:fixed;
-		padding: 10px;
-		bottom: 0px;
-	}
-	
-	#buttons-left{
-		left: 0px;
-	}
-
-	#buttons-right{
-		right: 0px;
-	}
+#buttons-left,#buttons-right{
+	position:absolute;
+	padding: 10px;
+	bottom: 0px;
 
 	button{
 		margin:10px;
@@ -219,6 +212,14 @@ p:first-child{
 	}
 }
 
+#buttons-left{
+	left: 0px;
+}
+
+#buttons-right{
+	right: 0px;
+}
+
 #cookiePopup{
 	position:absolute;
 	background:black;

template.php

@@ -106,16 +106,14 @@ function FormatURI(URI $uri, $base=""){
 			</div>
 		</div>
 		<div id="main">
-			<div id="main-header">
-				<div class="header">
-					<img src="/images/menu.svg" id="menu-button" ng-click="menuVisible=!menuVisible" /><?php // using php tags to remove HTML space but to keep source tidy
-					?><h2><?php // Shitty, I know, but eh...
-						?><span>{@Title}</span><?php
-						$__crumbs=Breadcrumbs::GetAll();
-						foreach ($__crumbs as $crumb)
-							echo '<span>',$crumb['text'],'</span>';
-					?></h2>
-				</div>
+			<div class="header">
+				<img src="/images/menu.svg" id="menu-button" ng-click="menuVisible=!menuVisible" /><?php // using php tags to remove HTML space but to keep source tidy
+				?><h2><?php // Shitty, I know, but eh...
+					?><span>{@Title}</span><?php
+					$__crumbs=Breadcrumbs::GetAll();
+					foreach ($__crumbs as $crumb)
+						echo '<span>',$crumb['text'],'</span>';
+				?></h2>
 			</div>
 			<div id="content">
 				<div id="body">
@@ -129,10 +127,8 @@ function FormatURI(URI $uri, $base=""){
 				</div>
 				<div id="footer">{@Footer}</div>
 			</div>
-			<div id="buttons">
-				<div id="buttons-left">{@ButtonsLeft}</div>
-				<div id="buttons-right">{@ButtonsRight}</div>
-			</div>
+			<div id="buttons-left">{@ButtonsLeft}</div>
+			<div id="buttons-right">{@ButtonsRight}</div>
 		</div>
 		<div class="backdrop" ng-show="shouldShowMenu()" ng-click="menuVisible=false"></div>
 		<div id="spinner" class="backdrop" ng-show="spinnerVisible">