fixed footer in full

css/screen.css

@@ -1,9 +1,8 @@
 html, body {
 	margin: 0;
 	padding: 0;
-	min-height: 100%;
+	height: 100%;
 	font-family: FeuraSans, sans-serif;
-	overflow-x: hidden;
 }
 
 .red    { background: #e74c3c; color: #ecf0f1; }
@@ -51,9 +50,9 @@ header .button, footer .button {
 .smallogo { text-align: center; margin: 0; padding: 0; }
 .smallogo img { width: 50%; }
 
-button:active, a:active. .button:active {
+button:active, a:active, .button:active {
-	background: black;
+	background: black !important;
-	color: white;
+	color: white !important;
 }
 
 #login article, #settings article {
@@ -70,6 +69,7 @@ label {
 
 section {
 	display: none;
+	min-height: 100%;
 }
 
 section.active {
@@ -115,6 +115,18 @@ img {
 	height: auto;
 }
 
+@media screen and (width: 320px) {
+	#full > article > * {
+		max-width: 300px !important;
+	}
+}
+
+@media screen and (width: 480px) {
+	#full > article > * {
+		max-width: 460px !important;
+	}
+}
+
 canvas {
 	width: 80px;
 	height: 40px;
@@ -187,8 +199,20 @@ canvas {
 	color: inherit;
 }
 
+#full.active {
+	min-height: 100%;
+	display: -moz-box;
+	-moz-box-orient: vertical;
+	min-width: 100%;
+}
+
 #full > article {
 	padding: 0 10px;
+	-moz-box-flex: 1;
+}
+
+#full > header {
+	height: 2.5em;
 }
 
 #full h1 {
@@ -198,7 +222,10 @@ canvas {
 	padding: 0;
 }
 
-
+#full .wrapper {
+	min-height: 100% !important;
+	border: 1px solid white;
+}
 
 #full h1 a {
 	text-decoration: none;
@@ -224,7 +251,9 @@ canvas {
 }
 
 #full footer.bar {
-	margin: 30px -10px 0 -10px;
+	margin: auto 0 0 0;
+	position: relative;
+	height: 3.8em;
 }
 
 #full footer.bar a.next {

index.html

@@ -88,7 +88,7 @@
     <div class="info swipe">
       <p>Swipe with your finger right and left to navigate to next and previous article.</p>
     </div>
-  <article>
+  </article>
   <footer class="bar">
     <a class="button previous" href="#previous">Previous</a>
     <a class="button next" href="#next">Next</a>