2 files changed, 56 insertions, 25 deletions

diff --git a/assets/less/docs.less b/assets/less/docs.less
index 57b4ad9e..23814f8b 100644
--- a/assets/less/docs.less
+++ b/assets/less/docs.less
@@ -8,21 +8,21 @@
 @import "lib/mixins.less";
 
 @font-face {
-  font-family: "Avenir";
-  src: 	url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), 
-  		url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), 
-       	url("../../assets/fonts/AvenirLTStd-Medium.ttf")  format("truetype");
-  font-style:   normal;
-  font-weight:  400;
+	font-family: "Avenir";
+	src: 	url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), 
+			url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), 
+			url("../../assets/fonts/AvenirLTStd-Medium.ttf")  format("truetype");
+	font-style:   normal;
+	font-weight:  400;
 }
 
 @font-face {
-  font-family: "Avenir";
-  src: 	url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), 
-  		url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), 
-       	url("../../assets/fonts/AvenirLTStd-Heavy.ttf")  format("truetype");
-  font-style:   normal;
-  font-weight:  600;
+	font-family: "Avenir";
+	src: 	url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), 
+			url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), 
+			url("../../assets/fonts/AvenirLTStd-Heavy.ttf")  format("truetype");
+	font-style:   normal;
+	font-weight:  600;
 }
 
 // BORDER-BOX ALL THE THINGS! 
@@ -38,9 +38,7 @@ body {
 	.font-size(18);
 	color: #6D797F;
 	line-height: 1.5;
-	background: #ECF0F1;
-	max-width: 960px;
-	margin: 40px auto;
+	background: #fff;
 	text-align: center;
 }
 h1 {
@@ -56,5 +54,20 @@ p {
 	margin: 0 0 20px;
 }
 header {
-	margin-bottom: 40px;
+	margin: 40px 0;
+}
+
+.example-audio .player,
+.example-video .player {
+	margin: 0 auto;
+
+	&:fullscreen {
+		max-width: none;
+	}
+}
+.example-audio .player {
+	max-width: 480px;
+}
+.example-video .player {
+	max-width: 1200px;
 }
\ No newline at end of file
diff --git a/assets/less/simple-media.less b/assets/less/simple-media.less
index 9219b331..fbb0d224 100644
--- a/assets/less/simple-media.less
+++ b/assets/less/simple-media.less
@@ -89,6 +89,7 @@
 .player {
 	position: relative;
 	max-width: 100%;
+	min-width: 290px;
 	overflow: hidden; // For the controls
 	background: #000;
 
@@ -141,11 +142,18 @@
 		line-height: 1;
 
 		// Layout
-		&-playback {
-			float: left;
-		}
 		&-sound {
-			float: right;
+			display: inline-block;
+			margin-top: @control-spacing;
+		}
+		@media (min-width: 560px) {
+			&-playback {
+				float: left;
+			}
+			&-sound {
+				float: right;
+				margin-top: 0;
+			}
 		}
 		
 		input + label, 
@@ -327,15 +335,25 @@
 
 	// Full screen mode
 	&:fullscreen {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
 		height: 100%;
 		width: 100%;
 
 		.player-video {
-			position: absolute;
-			top: 50%;
-			left: 0;
-			right: 0;
-			transform: translateY(-50%);
+			height: 100%;
+			width: 100%;
+
+			video {
+				height: 100%;
+			}
+			.player-captions {
+				top: auto;
+				bottom: 80px;
+			}
 		}
 		.player-controls {
 			position: absolute;