diff -r 000000000000 -r 6474c204b198 browser/metro/theme/firstrun.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/metro/theme/firstrun.css	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,265 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Rearrange about:start ---------------------- */
+
+/* Disable all instructions in snapped mode */
+#start-container[viewstate="snapped"] .firstrun {
+  display: none;
+}
+
+/* Keep only first column of tiles */
+#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid,
+#start-container:not([viewstate="snapped"]) #start-bookmarks-grid .richgrid-grid,
+#start-container:not([viewstate="snapped"]) #start-history-grid .richgrid-grid {
+  -moz-column-count: 1 !important;
+}
+
+/* Add some bottom padding to make sure bottom tile will not be
+below instruction */
+#start-container[viewstate="landscape"] #start-topsites-grid .richgrid-grid {
+  padding-bottom: 30px;
+}
+
+/* Keep only first few items */
+#start-container:not([viewstate="snapped"]) #start-history-grid richgriditem:nth-child(n+3),
+#start-container:not([viewstate="snapped"]) #start-bookmarks-grid richgriditem:nth-child(n+3),
+#start-container[viewstate="portrait"] #start-topsites-grid richgriditem:nth-child(n+4) {
+  display: none;
+}
+
+/* Add some space for the instructions */
+#start-container[viewstate="portrait"] {
+  padding-top: 120px;
+  padding-bottom: 120px;
+}
+
+/* Remove watermark */
+.meta {
+  background-image: none;
+}
+
+
+/* Welcome pane ---------------------- */
+
+/* Logo and welcome message */
+#firstrun-welcome {
+  width: 550px;
+  font-family: "Segoe UI", sans-serif;
+  padding: 30px 0;
+}
+
+.welcome-image {
+  background-image: url("chrome://branding/content/metro_firstrun_logo.png");
+
+  width: 220px;
+  height: 220px;
+}
+
+#firstrun-welcome .welcome-title {
+  font-size: 25px;
+  color: #4d4e53;
+  line-height: 30px;
+  padding-top: 20px;
+}
+
+#firstrun-welcome .welcome-subtitle {
+  font-size: 16px;
+  color: #808080;
+  line-height: 22px;
+  padding-top: 10px;
+}
+
+/* Instructions ---------------------- */
+
+.instruction-content-container {
+    width: 380px;
+}
+
+.instruction-label {
+  font-size: 16px;
+  color: #808080;
+  line-height: 22px;
+}
+
+.instruction-arrow {
+  width: 76px;
+  height: 76px;
+}
+
+.instruction-arrow.arrow-top,
+.instruction-arrow.arrow-down {
+  background-image: url("chrome://browser/skin/images/arrow-top.png");
+}
+
+.instruction-arrow.arrow-down {
+  transform: rotate(180deg);
+}
+.instruction-arrow.arrow-down:-moz-locale-dir(rtl) {
+  transform: scaleY(-1);
+}
+
+.instruction-arrow.arrow-back,
+.instruction-arrow.arrow-forward,
+.instruction-arrow.arrow-back-straight,
+.instruction-arrow.arrow-forward-straight {
+  background-image: url("chrome://browser/skin/images/arrow-left.png");
+}
+
+.instruction-arrow.arrow-back,
+.instruction-arrow.arrow-forward:-moz-locale-dir(rtl) {
+  transform: rotate(0) scaleY(1);
+}
+
+.instruction-arrow.arrow-forward,
+.instruction-arrow.arrow-back:-moz-locale-dir(rtl) {
+  transform: rotate(180deg) scaleY(-1);
+}
+
+.instruction-arrow.arrow-back-straight,
+.instruction-arrow.arrow-forward-straight:-moz-locale-dir(rtl) {
+  transform: rotate(220deg) scaleX(-1);
+}
+
+.instruction-arrow.arrow-forward-straight,
+.instruction-arrow.arrow-back-straight:-moz-locale-dir(rtl) {
+  transform: rotate(-220deg);
+}
+
+#instruction-tabs {
+  position: absolute;
+  top: 10px;
+  transform: translateX(calc(630px - 50%));
+}
+#instruction-tabs:-moz-locale-dir(rtl) {
+  right: 0;
+  left: auto;
+  transform: translateX(calc(50% - 630px));
+}
+
+#start-container[viewstate="portrait"] #instruction-tabs {
+  transform: translateX(calc(50vw - 50%));
+}
+#start-container[viewstate="portrait"] #instruction-tabs:-moz-locale-dir(rtl) {
+  transform: translateX(calc(-50vw + 50%));
+}
+
+#start-container[viewstate="landscape"] #instruction-topsites {
+  position: absolute;
+  bottom: 15%;
+}
+
+#start-container[viewstate="landscape"] #instruction-topsites .instruction-content-container {
+  -moz-box-align: start;
+}
+
+#start-container[viewstate="portrait"] #instruction-topsites-box {
+  margin-bottom: 20px;
+}
+
+#start-container[viewstate="portrait"] #instruction-topsites .instruction-content-container {
+  -moz-box-align: center;
+}
+
+#start-container[viewstate="portrait"] #instruction-topsites .arrow-back-straight {
+  display: none;
+}
+
+#start-container[viewstate="portrait"] #instruction-topsites .arrow-back {
+  display: block;
+}
+
+#start-container[viewstate="landscape"] #instruction-topsites .arrow-back-straight {
+  display: block;
+}
+
+#start-container[viewstate="landscape"] #instruction-topsites .arrow-back {
+  display: none;
+}
+
+#start-container[viewstate="landscape"] #instruction-history,
+#start-container[viewstate="landscape"] #instruction-bookmarks {
+  position: absolute;
+  top: 310px;
+  transform: translateX(calc(-300px - 50%));
+}
+#start-container[viewstate="landscape"] #instruction-history:-moz-locale-dir(rtl),
+#start-container[viewstate="landscape"] #instruction-bookmarks:-moz-locale-dir(rtl) {
+  transform: translateX(calc(300px + 50%));
+}
+
+#start-container[viewstate="portrait"] #instruction-history,
+#start-container[viewstate="portrait"] #instruction-bookmarks,
+#start-container[viewstate="portrait"] #instruction-topsites {
+  transform: translateX(-55px);
+}
+#start-container[viewstate="portrait"] #instruction-history:-moz-locale-dir(rtl),
+#start-container[viewstate="portrait"] #instruction-bookmarks:-moz-locale-dir(rtl),
+#start-container[viewstate="portrait"] #instruction-topsites:-moz-locale-dir(rtl) {
+  transform: translateX(55px);
+}
+
+#start-container[viewstate="landscape"] #instruction-menu {
+  position: fixed;
+  bottom: 16px;
+  right: 37px;
+}
+#start-container[viewstate="landscape"] #instruction-menu:-moz-locale-dir(rtl) {
+  left: 37px;
+  right: auto;
+}
+
+#start-container[viewstate="portrait"] #instruction-menu {
+  position: absolute;
+  right: 37px;
+  transform: translateY(40px);
+}
+#start-container[viewstate="portrait"] #instruction-menu:-moz-locale-dir(rtl) {
+  left: 37px;
+  right: auto;
+}
+
+#start-container #instruction-menu .instruction-label {
+    max-width: 300px;
+}
+
+#start-container[viewstate="landscape"] #start-history {
+  padding-left: 50px;
+}
+
+/* Higher resolution images ---------------------- */
+
+@media (min-resolution: @min_res_140pc@) {
+  /* Load 140% image when scaled by 140% */
+  .instruction-arrow.arrow-top,
+  .instruction-arrow.arrow-down {
+    background-image: url("chrome://browser/skin/images/arrow-top@1.4x.png");
+  }
+
+  .instruction-arrow.arrow-back,
+  .instruction-arrow.arrow-forward {
+    background-image: url("chrome://browser/skin/images/arrow-left@1.4x.png");
+  }
+
+  .welcome-image {
+    background-image: url("chrome://branding/content/metro_firstrun_logo@1.4x.png");
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  /* Load 180% image when scaled by 180% */
+  .instruction-arrow.arrow-top,
+  .instruction-arrow.arrow-down {
+    background-image: url("chrome://browser/skin/images/arrow-top@1.8x.png");
+  }
+
+  .instruction-arrow.arrow-back,
+  .instruction-arrow.arrow-forward {
+    background-image: url("chrome://browser/skin/images/arrow-left@1.8x.png");
+  }
+
+  .welcome-image {
+    background-image: url("chrome://branding/content/metro_firstrun_logo@1.8x.png");
+  }
+}