--- a/b2g/chrome/content/touchcontrols.css
+++ b/b2g/chrome/content/touchcontrols.css
@@ -3,162 +3,175 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
 /* video controls */
 .controlsOverlay {
   -moz-box-pack: center;
   -moz-box-align: end;
-  padding: 20px;
   -moz-box-flex: 1;
   -moz-box-orient: horizontal;
 }
 
 .controlsOverlay[scaled] {
   /* scaled attribute in videocontrols.css causes conflict
      due to different -moz-box-orient values */
   -moz-box-align: end;
 }
 
 .controlBar {
   -moz-box-flex: 1;
-  font-size: 16pt;
-  padding: 10px;
   background-color: rgba(50,50,50,0.8);
-  border-radius: 8px;
   width: 100%;
 }
 
+.buttonsBar {
+  -moz-box-flex: 1;
+  -moz-box-align: center;
+}
+
 .controlsSpacer {
   display: none;
   -moz-box-flex: 0;
 }
 
 .fullscreenButton,
 .playButton,
 .castingButton,
 .muteButton {
   -moz-appearance: none;
-  min-height: 42px;
-  min-width: 42px;
+  padding: 2px;
   border: none !important;
+  min-height: 24px;
+  min-width: 24px;
 }
 
 .fullscreenButton {
   background: url("chrome://b2g/content/images/fullscreen-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 .fullscreenButton[fullscreened="true"] {
   background: url("chrome://b2g/content/images/exitfullscreen-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 .controlBar[fullscreen-unavailable] .fullscreenButton {
   display: none;
 }
 
 .playButton {
   background: url("chrome://b2g/content/images/pause-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 /*
  * Normally the button bar has fullscreen spacer play spacer mute, but if
  * this is an audio control rather than a video control, the fullscreen button
  * is hidden by videocontrols.xml, and that alters the position of the
  * play button.  This workaround moves it back to center.
  */
 .controlBar[fullscreen-unavailable] .playButton {
   transform: translateX(28px);
 }
 
 .playButton[paused="true"] {
   background: url("chrome://b2g/content/images/play-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 .castingButton {
   display: none;
 }
 
 .muteButton {
   background: url("chrome://b2g/content/images/mute-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 .muteButton[muted="true"] {
   background: url("chrome://b2g/content/images/unmute-hdpi.png") no-repeat center;
+  background-size: contain;
+  background-origin: content-box;
 }
 
 /* bars */
 .scrubberStack {
-  width: 100%;
-  min-height: 32px;
-  max-height: 32px;
-  padding: 0px 8px;
-  margin: 0px;
+  -moz-box-flex: 1;
+  padding: 0px 18px;
 }
 
+.flexibleBar,
+.flexibleBar .progress-bar,
 .bufferBar,
 .bufferBar .progress-bar,
 .progressBar,
 .progressBar .progress-bar,
 .scrubber,
 .scrubber .scale-slider,
 .scrubber .scale-thumb {
   -moz-appearance: none;
   border: none;
   padding: 0px;
   margin: 0px;
   background-color: transparent;
-  border-radius: 3px;
 }
 
-.bufferBar {
-  border: 1px solid #5e6166;
+.flexibleBar,
+.bufferBar,
+.progressBar {
+  height: 24px;
+  padding: 11px 0px;
 }
 
-.bufferBar,
-.progressBar {
-  margin: 11px 0px 9px 0px;
-  height: 8px
+.flexibleBar {
+  padding: 12px 0px;
+}
+
+.flexibleBar .progress-bar {
+  border: 1px #777777 solid;
+  border-radius: 1px;
 }
 
 .bufferBar .progress-bar {
-  background-color: #5e6166;
+  border: 2px #AFB1B3 solid;
+  border-radius: 2px;
 }
 
 .progressBar .progress-bar {
-  background-color: white;
+  border: 2px #FF9500 solid;
+  border-radius: 2px;
 }
 
+
 .scrubber {
-  margin-left: -16px;
-  margin-right: -16px;
+  margin-left: -8px;
+  margin-right: -8px;
+}
+
+.positionLabel, .durationLabel {
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 12px;
+  color: white;
 }
 
 .scrubber .scale-thumb {
   display: -moz-box;
   margin: 0px !important;
   padding: 0px !important;
   background: url("chrome://b2g/content/images/scrubber-hdpi.png") no-repeat;
-  background-size: 32px 32px;
-  height: 32px;
-  width: 32px;
-}
-
-.durationBox {
-  -moz-box-orient: horizontal;
-  -moz-box-pack: start;
-  -moz-box-align: center;
-  color: white;
-  font-weight: bold;
-  padding: 0px 8px;
-  margin-top: -6px;
-}
-
-.positionLabel {
-  -moz-box-flex: 1;
+  background-size: 12px 12px;
+  height: 12px;
+  width: 12px;
 }
 
 .statusOverlay {
   -moz-box-align: center;
   -moz-box-pack: center;
   background-color: rgb(50,50,50);
 }
 

--- a/mobile/android/themes/core/touchcontrols.css
+++ b/mobile/android/themes/core/touchcontrols.css
@@ -13,162 +13,172 @@
 }
 
 .controlsOverlay[scaled] {
   /* scaled attribute in videocontrols.css causes conflict
      due to different -moz-box-orient values */
   -moz-box-align: end;
 }
 
-.controlBar {
-  -moz-box-flex: 1;
-  font-size: 16pt;
-  background-color: rgba(50,50,50,0.8);
-  width: 100%;
-}
-
 .controlsSpacer {
   display: none;
   -moz-box-flex: 0;
 }
 
+.controlBar {
+  -moz-box-flex: 1;
+  width: 100%;
+  background-color: rgba(50,50,50,0.8);
+}
+
+.buttonsBar {
+  -moz-box-flex: 1;
+  -moz-box-align: center;
+}
+
 .playButton,
 .castingButton,
 .muteButton,
 .fullscreenButton {
   -moz-appearance: none;
-  height: 24px;
-  width: 24px;
+  padding: 15px;
   border: none !important;
-}
-
-.muteButton {
-  width: 28px;
+  width: 48px;
+  height: 48px;
 }
 
 .playButton {
   background: url("chrome://browser/skin/images/pause.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .playButton[paused="true"] {
   background: url("chrome://browser/skin/images/play.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .castingButton {
   background: url("chrome://browser/skin/images/cast-ready.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .castingButton[active="true"] {
   background: url("chrome://browser/skin/images/cast-active.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 /* If the casting button is showing, there will be two buttons on the right side of the controls.
  * This shifts the play button to be centered.
  */
 .castingButton:not([hidden="true"]) + .fullscreenButton + spacer + .playButton {
   transform: translateX(-21px);
 }
 
 .muteButton {
+  padding-left: 17.25px;
+  padding-right: 9.75px;
   background: url("chrome://browser/skin/images/mute.svg") no-repeat left;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .muteButton[muted="true"] {
   background: url("chrome://browser/skin/images/unmute.svg") no-repeat left;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .fullscreenButton {
   background-color: transparent;
   background: url("chrome://browser/skin/images/fullscreen.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .fullscreenButton[fullscreened] {
   background: url("chrome://browser/skin/images/exitfullscreen.svg") no-repeat center;
   background-size: contain;
+  background-origin: content-box;
 }
 
 .controlBar[fullscreen-unavailable] .fullscreenButton {
   display: none;
 }
 
 /* bars */
 .scrubberStack {
-  width: 100%;
-  min-height: 32px;
-  max-height: 32px;
-  padding: 0px 8px;
-  margin: 0px;
+  -moz-box-flex: 1;
+  padding: 0px 18px;
 }
 
+.flexibleBar,
+.flexibleBar .progress-bar,
 .bufferBar,
 .bufferBar .progress-bar,
 .progressBar,
 .progressBar .progress-bar,
 .scrubber,
 .scrubber .scale-slider,
 .scrubber .scale-thumb {
   -moz-appearance: none;
   border: none;
   padding: 0px;
   margin: 0px;
   background-color: transparent;
 }
 
-.bufferBar {
-  border: 1px solid #5e6166;
+.flexibleBar,
+.bufferBar,
+.progressBar {
+  height: 32px;
+  padding: 15px 0px;
 }
 
-.bufferBar,
-.progressBar {
-  margin: 11px 0px 9px 0px;
-  height: 8px
+.flexibleBar {
+  padding: 16px 0px;
+}
+
+.flexibleBar .progress-bar {
+  border: 1px #777777 solid;
+  border-radius: 1px;
 }
 
 .bufferBar .progress-bar {
-  background-color: #5e6166;
+  border: 2px #AFB1B3 solid;
+  border-radius: 2px;
 }
 
 .progressBar .progress-bar {
-  background-color: white;
+  border: 2px #FF9500 solid;
+  border-radius: 2px;
 }
 
 .scrubber {
-  margin-left: -16px;
-  margin-right: -16px;
+  margin-left: -12px;
+  margin-right: -12px;
 }
 
 .scrubber .scale-thumb {
   display: -moz-box;
   margin: 0px !important;
   padding: 0px !important;
-  background: url("chrome://browser/skin/images/scrubber.svg") no-repeat;
-  background-size: 32px 32px;
+  background: url("chrome://browser/skin/images/scrubber.svg") no-repeat center;
+  background-size: 12px 12px;
   height: 32px;
   width: 32px;
 }
 
-.durationBox {
-  -moz-box-orient: horizontal;
-  -moz-box-pack: start;
-  -moz-box-align: center;
+.positionLabel, .durationLabel {
+  font-family: 'Roboto', Helvetica, Arial, sans-serif;
+  font-size: 16px;
   color: white;
-  font-weight: bold;
-  padding: 0px 8px;
-  margin-top: -6px;
-}
-
-.positionLabel {
-  -moz-box-flex: 1;
 }
 
 .statusOverlay {
   -moz-box-align: center;
   -moz-box-pack: center;
   background-color: rgb(50,50,50);
 }
 

--- a/toolkit/content/widgets/videocontrols.xml
+++ b/toolkit/content/widgets/videocontrols.xml
@@ -1572,45 +1572,42 @@
 
             <vbox class="controlsOverlay">
                 <spacer class="controlsSpacer" flex="1"/>
                 <box flex="1" hidden="true">
                     <box class="clickToPlay" hidden="true" flex="1"/>
                 </box>
                 <vbox class="controlBar" hidden="true">
                     <hbox class="buttonsBar">
-                        <button class="castingButton" hidden="true"
-                                aria-label="&castingButton.castingLabel;"/>
-                        <button class="fullscreenButton"
-                            enterfullscreenlabel="&fullscreenButton.enterfullscreenlabel;"
-                            exitfullscreenlabel="&fullscreenButton.exitfullscreenlabel;"/>
-                        <spacer flex="1"/>
                         <button class="playButton"
                                 playlabel="&playButton.playLabel;"
                                 pauselabel="&playButton.pauseLabel;"/>
-                        <spacer flex="1"/>
+                        <label class="positionLabel" role="presentation"/>
+                        <stack class="scrubberStack">
+                            <box class="backgroundBar"/>
+                            <progressmeter class="flexibleBar" value="100"/>
+                            <progressmeter class="bufferBar"/>
+                            <progressmeter class="progressBar" max="10000"/>
+                            <scale class="scrubber" movetoclick="true"/>
+                        </stack>
+                        <label class="durationLabel" role="presentation"/>
                         <button class="muteButton"
                                 mutelabel="&muteButton.muteLabel;"
                                 unmutelabel="&muteButton.unmuteLabel;"/>
                         <stack class="volumeStack">
                           <box class="volumeBackground"/>
                           <box class="volumeForeground" anonid="volumeForeground"/>
                           <scale class="volumeControl" movetoclick="true"/>
                         </stack>
-                      </hbox>
-                    <stack class="scrubberStack" flex="1">
-                        <box class="backgroundBar"/>
-                        <progressmeter class="bufferBar"/>
-                        <progressmeter class="progressBar" max="10000"/>
-                        <scale class="scrubber" movetoclick="true"/>
-                    </stack>
-                    <vbox class="durationBox">
-                        <label class="positionLabel" role="presentation"/>
-                        <label class="durationLabel" role="presentation"/>
-                    </vbox>
+                        <button class="castingButton" hidden="true"
+                                aria-label="&castingButton.castingLabel;"/>
+                        <button class="fullscreenButton"
+                            enterfullscreenlabel="&fullscreenButton.enterfullscreenlabel;"
+                            exitfullscreenlabel="&fullscreenButton.exitfullscreenlabel;"/>
+                    </hbox>
                 </vbox>
             </vbox>
         </stack>
     </xbl:content>
 
     <implementation>
 
         <constructor>