--- a/cms/app-client/app/styles/components/player-component.scss	Sat Dec 03 01:32:43 2016 +0100
+++ b/cms/app-client/app/styles/components/player-component.scss	Sat Dec 03 02:43:57 2016 +0100
@@ -23,7 +23,7 @@
     height: 100%;
 }
 
-.player-component #audio .controls i {
+.player-component #audio .controls .player-control {
     position: relative;
     width: auto;
     height: 40px;
@@ -200,7 +200,7 @@
 .player-component #audio .controls.extra i.fa-text-height {
     position: relative;
     overflow: hidden;
-    display: inline-block;
+    display: block;
     width: 16px;
 }
 
@@ -216,3 +216,26 @@
 .player-component .player-language-list span {
     display: inline;
 }
+
+.player-component .controls-transcript {
+    display:inline-block;
+}
+
+.player-component .controls-transcript {
+  /* taken from https://codepen.io/jamesbarnett/pen/yILjk*/
+    input[type=checkbox] { display:none; } /* to hide the checkbox itself */
+    input[type=checkbox] + label:before {
+      font-family: FontAwesome;
+      display: inline-block;
+      color: $corpus-white;
+      font-size: 15px;
+      width: 15px;
+      padding-left: 2px;
+    }
+    label {
+      width: 16px;
+    }
+    input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
+
+    input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
+  }