new optional controls aligned to screen edges

12 files changed, 193 insertions, 144 deletions

diff --git a/css/theme/beige.css b/css/theme/beige.css
index 7424a05..c92d501 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -255,34 +255,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #8b743d; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #8b743d; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #8b743d; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #8b743d; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #c0a86e; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #c0a86e; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #c0a86e; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #c0a86e; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #333; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/black.css b/css/theme/black.css
index 96e4fd4..ed5819d 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -251,34 +251,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #42affa; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #42affa; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #42affa; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #42affa; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #8dcffc; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #8dcffc; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #8dcffc; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #8dcffc; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #fff; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/blood.css b/css/theme/blood.css
index 1e0fbaf..38c2a08 100644
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -254,34 +254,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #a23; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #a23; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #a23; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #a23; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #dd5566; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #dd5566; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #dd5566; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #dd5566; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #eee; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/league.css b/css/theme/league.css
index 63711c3..d4ef858 100644
--- a/css/theme/league.css
+++ b/css/theme/league.css
@@ -257,34 +257,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #13DAEC; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #13DAEC; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #13DAEC; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #13DAEC; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #71e9f4; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #71e9f4; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #71e9f4; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #71e9f4; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #eee; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/moon.css b/css/theme/moon.css
index 791a4a0..8b8285a 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -255,34 +255,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #268bd2; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #268bd2; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #268bd2; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #268bd2; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #78b9e6; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #78b9e6; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #78b9e6; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #78b9e6; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #93a1a1; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/night.css b/css/theme/night.css
index 3db1175..db136c1 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -249,34 +249,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #e7ad52; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #e7ad52; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #e7ad52; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #e7ad52; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #f3d7ac; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #f3d7ac; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #f3d7ac; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #f3d7ac; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #eee; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/serif.css b/css/theme/serif.css
index e9b08c6..4049b80 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -251,34 +251,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #51483D; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #51483D; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #51483D; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #51483D; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #8b7c69; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #8b7c69; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #8b7c69; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #8b7c69; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #000; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/simple.css b/css/theme/simple.css
index f64343e..aa4900e 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -254,34 +254,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #00008B; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #00008B; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #00008B; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #00008B; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #0000f1; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #0000f1; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #0000f1; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #0000f1; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #000; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 33689eb..e8034ff 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -258,34 +258,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #3b759e; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #3b759e; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #3b759e; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #3b759e; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #74a7cb; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #74a7cb; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #74a7cb; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #74a7cb; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #333; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index 9bd21aa..7283879 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -255,34 +255,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #268bd2; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #268bd2; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #268bd2; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #268bd2; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #78b9e6; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #78b9e6; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #78b9e6; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #78b9e6; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #657b83; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index bcbaf0c..7a5f406 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -297,42 +297,47 @@ body {
  * NAVIGATION CONTROLS
  *********************************************/
 
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
 	border-right-color: $linkColor;
 }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
 	border-left-color: $linkColor;
 }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
 	border-bottom-color: $linkColor;
 }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
 	border-top-color: $linkColor;
 }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
 	border-right-color: $linkColorHover;
 }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
 	border-left-color: $linkColorHover;
 }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
 	border-bottom-color: $linkColorHover;
 }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
 	border-top-color: $linkColorHover;
 }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+	background-color: $mainColor;
+}
+
 
 /*********************************************
  * PROGRESS BAR
diff --git a/css/theme/white.css b/css/theme/white.css
index 7adc605..7e3d63c 100644
--- a/css/theme/white.css
+++ b/css/theme/white.css
@@ -251,34 +251,38 @@ body {
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
-.reveal .controls .navigate-left,
-.reveal .controls .navigate-left.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled {
   border-right-color: #2a76dd; }
 
-.reveal .controls .navigate-right,
-.reveal .controls .navigate-right.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled {
   border-left-color: #2a76dd; }
 
-.reveal .controls .navigate-up,
-.reveal .controls .navigate-up.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled {
   border-bottom-color: #2a76dd; }
 
-.reveal .controls .navigate-down,
-.reveal .controls .navigate-down.enabled {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down,
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled {
   border-top-color: #2a76dd; }
 
-.reveal .controls .navigate-left.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-left.enabled:hover {
   border-right-color: #6ca0e8; }
 
-.reveal .controls .navigate-right.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-right.enabled:hover {
   border-left-color: #6ca0e8; }
 
-.reveal .controls .navigate-up.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-up.enabled:hover {
   border-bottom-color: #6ca0e8; }
 
-.reveal .controls .navigate-down.enabled:hover {
+.reveal .controls[data-controls-type="bottom-right"] .navigate-down.enabled:hover {
   border-top-color: #6ca0e8; }
 
+.reveal .controls[data-controls-type="edges"] button:before,
+.reveal .controls[data-controls-type="edges"] button:after {
+  background-color: #222; }
+
 /*********************************************
  * PROGRESS BAR
  *********************************************/