diff --git a/css/print/pdf.css b/css/print/pdf.css
index 20c646a..2b86cb2 100644
--- a/css/print/pdf.css
+++ b/css/print/pdf.css
@@ -144,9 +144,14 @@ ul, ol, div, p {
 }
 
 /* Display slide speaker notes when 'showNotes' is enabled */
+.reveal.show-notes {
+	max-width: none;
+	max-height: none;
+}
 .reveal .speaker-notes-pdf {
 	display: block;
 	width: 100%;
+	height: auto;
 	max-height: none;
 	top: auto;
 	right: auto;
diff --git a/css/reveal.css b/css/reveal.css
index 8ec6bbd..0c52205 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -269,11 +269,11 @@ body {
     left: 50%;
     -webkit-transform: translateX(-50%) rotate(-90deg);
             transform: translateX(-50%) rotate(-90deg); }
-  .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled,
-  .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled {
+  .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled,
+  .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled {
     opacity: 0.3; }
-    .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-left.enabled:hover,
-    .reveal .controls[data-controls-back-arrows="deemphasized"] .navigate-up.enabled:hover {
+    .reveal .controls[data-controls-back-arrows="faded"] .navigate-left.enabled:hover,
+    .reveal .controls[data-controls-back-arrows="faded"] .navigate-up.enabled:hover {
       opacity: 1; }
   .reveal .controls[data-controls-back-arrows="hidden"] .navigate-left.enabled,
   .reveal .controls[data-controls-back-arrows="hidden"] .navigate-up.enabled {
@@ -1433,36 +1433,49 @@ body {
 .reveal aside.notes {
   display: none; }
 
+.reveal.show-notes {
+  max-width: 80vw;
+  overflow: visible; }
+
 .reveal .speaker-notes {
-  display: none;
+  display: block;
   position: absolute;
-  width: 70%;
-  max-height: 15%;
-  left: 15%;
-  bottom: 26px;
-  padding: 10px;
+  width: 20vw;
+  height: 100%;
+  top: 0;
+  left: 100%;
+  padding: 14px;
   z-index: 1;
   font-size: 18px;
   line-height: 1.4;
-  color: #fff;
-  background-color: rgba(0, 0, 0, 0.5);
+  color: #222;
+  background-color: #f5f5f5;
   overflow: auto;
   box-sizing: border-box;
   text-align: left;
   font-family: Helvetica, sans-serif;
   -webkit-overflow-scrolling: touch; }
 
-.reveal .speaker-notes.visible:not(:empty) {
-  display: block; }
+.reveal .speaker-notes:before {
+  content: 'Speaker notes';
+  display: block;
+  margin-bottom: 10px;
+  opacity: 0.5; }
 
 @media screen and (max-width: 1024px) {
+  .reveal.show-notes {
+    max-width: none;
+    max-height: 70vh;
+    overflow: visible; }
   .reveal .speaker-notes {
-    font-size: 14px; } }
+    top: 70vh;
+    left: 0;
+    width: 100%;
+    height: 30vh; } }
 
 @media screen and (max-width: 600px) {
   .reveal .speaker-notes {
-    width: 90%;
-    left: 5%; } }
+    font-size: 14px; } }
 
 /*********************************************
  * ZOOM PLUGIN
diff --git a/css/reveal.scss b/css/reveal.scss
index 42f5d5e..f24ed2c 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -335,11 +335,11 @@ body {
 		transform: translateX(-50%) rotate( -90deg );
 	}
 
-	// Back arrow style: "deemphasized":
+	// Back arrow style: "faded":
 	// Strongly deemphasizes backwards navigation in favor of drawing
 	// attention to forwards navigation
-	&[data-controls-back-arrows="deemphasized"] .navigate-left.enabled,
-	&[data-controls-back-arrows="deemphasized"] .navigate-up.enabled {
+	&[data-controls-back-arrows="faded"] .navigate-left.enabled,
+	&[data-controls-back-arrows="faded"] .navigate-up.enabled {
 		opacity: 0.3;
 
 		&:hover {
@@ -1521,21 +1521,26 @@ body {
 	display: none;
 }
 
+.reveal.show-notes {
+	max-width: 80vw;
+	overflow: visible;
+}
+
 // An interface element that can optionally be used to show the
 // speaker notes to all viewers, on top of the presentation
 .reveal .speaker-notes {
-	display: none;
+	display: block;
 	position: absolute;
-	width: 70%;
-	max-height: 15%;
-	left: 15%;
-	bottom: 26px;
-	padding: 10px;
+	width: 20vw;
+	height: 100%;
+	top: 0;
+	left: 100%;
+	padding: 14px;
 	z-index: 1;
 	font-size: 18px;
 	line-height: 1.4;
-	color: #fff;
-	background-color: rgba(0,0,0,0.5);
+	color: #222;
+	background-color: #f5f5f5;
 	overflow: auto;
 	box-sizing: border-box;
 	text-align: left;
@@ -1543,20 +1548,31 @@ body {
 	-webkit-overflow-scrolling: touch;
 }
 
-.reveal .speaker-notes.visible:not(:empty) {
+.reveal .speaker-notes:before {
+	content: 'Speaker notes';
 	display: block;
+	margin-bottom: 10px;
+	opacity: 0.5;
 }
 
 @media screen and (max-width: 1024px) {
+	.reveal.show-notes {
+		max-width: none;
+		max-height: 70vh;
+		overflow: visible;
+	}
+
 	.reveal .speaker-notes {
-		font-size: 14px;
+		top: 70vh;
+		left: 0;
+		width: 100%;
+		height: 30vh;
 	}
 }
 
 @media screen and (max-width: 600px) {
 	.reveal .speaker-notes {
-		width: 90%;
-		left: 5%;
+		font-size: 14px;
 	}
 }
 
diff --git a/js/reveal.js b/js/reveal.js
index 594093b..02dbebe 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -56,8 +56,8 @@
 			controlsLayout: 'bottom-right',
 
 			// Specifies the display rules for backwards navigation arrows;
-			// "deemphasized", "hidden" or "visible"
-			controlsBackArrows: 'deemphasized',
+			// "faded", "hidden" or "visible"
+			controlsBackArrows: 'faded',
 
 			// Display a presentation progress bar
 			progress: true,
@@ -106,7 +106,7 @@
 			// key is pressed
 			help: true,
 
-			// Flags if it should be possible to pause the presentation (blackout)
+			// Flags if it should be possible to pause t.spehe presentation (blackout)
 			pause: true,
 
 			// Flags if speaker notes should be visible to all viewers
@@ -1032,11 +1032,11 @@
 		}
 
 		if( config.showNotes ) {
-			dom.speakerNotes.classList.add( 'visible' );
+			dom.wrapper.classList.add( 'show-notes' );
 			dom.speakerNotes.setAttribute( 'data-layout', typeof config.showNotes === 'string' ? config.showNotes : 'inline' );
 		}
 		else {
-			dom.speakerNotes.classList.remove( 'visible' );
+			dom.wrapper.classList.remove( 'show-notes' );
 		}
 
 		if( config.mouseWheel ) {