diff -r 000000000000 -r 6474c204b198 browser/metro/theme/platform.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/metro/theme/platform.css	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,926 @@
+/* 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/. */
+
+/* Global Skin ------------------------------------------------------------- */
+
+@import url(chrome://global/skin/);
+
+%filter substitution
+%include defines.inc
+
+/* Typography & General Styling -------------------------------------------- */
+
+::-moz-selection {
+  color: white;
+  background-color: @metro_orange@;
+}
+
+:root {
+  font-family: "Segoe UI", sans-serif !important;
+  font-size: @font_normal@;
+}
+
+.text-link {
+  color: @metro_orange@;
+  text-decoration: none;
+}
+
+textbox,
+menulist {
+  -moz-appearance: none;
+  min-width: @field_sizing@; /* button size */
+  min-height: @field_sizing@; /* button size */
+  margin: @metro_spacing_small@;
+  padding: @metro_spacing_xsmall@ @metro_spacing_small@;
+
+  font-size: @metro_font_normal@;
+  font-weight: normal !important;
+
+  color: @field_foreground_color@;
+  background: @field_background_color@;
+  border: @metro_border_thick@ solid @field_foreground_color@ !important;
+  border-radius: 0;
+}
+
+textbox[disabled],
+menulist[disabled] {
+  border-color: @field_disabled_foreground_color@ !important;
+  color: @field_disabled_foreground_color@;
+}
+
+menulist:not([disabled]):hover:active {
+  color: @field_background_color@;
+  background: @field_foreground_color@;
+}
+
+/* Button ------------------------------------------------------------------ */
+
+button {
+  -moz-appearance: none;
+  border: 1px solid;
+  font-size: @metro_font_normal@;
+  font-weight: normal;
+  margin: @metro_spacing_small@;
+  min-width: @field_sizing@;
+  min-height: 32px;
+  padding: 3px 16px;
+}
+
+/* Non-default button colors */
+
+button {
+  background: linear-gradient(to bottom, hsl(210, 5%, 89%), hsl(210, 5%, 87%));
+  border-color: hsl(220, 5%, 86%);
+  color: hsl(0, 0%, 10%);
+}
+
+button:not([disabled]):hover {
+  background: linear-gradient(to bottom, hsl(210, 5%, 75%), hsl(210, 5%, 73%));
+  border-color: hsl(210, 5%, 71%);
+  color: hsl(0, 0%, 10%);
+}
+
+/* Default button colors */
+
+button[default],
+.notification-button-default {
+  background: linear-gradient(to bottom, hsl(35, 100%, 50%), hsl(30, 100%, 50%));
+  border-color: hsl(30, 100%, 48%);
+  color: white;
+}
+
+button[default]:not([disabled]):hover,
+.notification-button-default:not([disabled]):hover {
+  background: linear-gradient(to bottom, hsl(25, 100%, 47%), hsl(25, 100%, 45%));
+  border-color: hsl(25, 100%, 43%);
+  color: white;
+}
+
+/* Pushed button colors (both default and non-default */
+
+/* Note: these need enough specificity to override all the :hover rules above. */
+button:not([disabled]):hover:active,
+button:not([disabled])[checked="true"],
+button[default]:not([disabled])[checked="true"],
+.notification-button-default:not([disabled])[checked="true"] {
+  background: linear-gradient(to bottom, hsl(210, 5%, 28%), hsl(210, 5%, 25%));
+  border-color: hsl(216, 4%, 27%);
+  color: white;
+}
+
+/* Disabled button colors (both default and non-default */
+
+button[disabled] {
+  background: linear-gradient(to bottom, hsl(210, 3%, 93%), hsl(210, 3%, 92%));
+  border-color: hsl(210, 3%, 91%);
+  color: hsl(0, 0%, 60%);
+}
+
+/* Textbox ----------------------------------------------------------------- */
+
+textbox[isempty="true"] {
+  color: @field_mid_foreground_color@;
+}
+
+spinbuttons {
+  border: none;
+}
+
+.spinbuttons-box {
+  border: none;
+  -moz-box-orient: horizontal;
+  -moz-box-direction: reverse;
+}
+
+.spinbuttons-down,
+.spinbuttons-up {
+  border: none !important;
+}
+
+.spinbuttons-down {
+  list-style-image: url("chrome://browser/skin/images/arrowdown-16.png");
+}
+
+.spinbuttons-up {
+  list-style-image: url("chrome://browser/skin/images/arrowup-16.png");
+}
+
+/* Menu List --------------------------------------------------------------- */
+
+menulist {
+  -moz-user-focus: ignore;
+  padding: @metro_spacing_xsmall@ 0;
+  -moz-padding-start: @metro_spacing_small@;
+  border-color: @field_disabled_foreground_color@ !important;
+}
+
+/* Popup Menus ------------------------------------------------------------- */
+
+.menu-container {
+  position: absolute;
+  opacity: 0;
+}
+
+.menu-container[showingfrom="below"] {
+  transform: translateY(@metro_spacing_normal@);
+}
+
+.menu-container[showingfrom="above"] {
+  transform: translateY(-@metro_spacing_normal@);
+}
+
+.menu-container[hiding],
+.menu-container[showing] {
+  transition: opacity ease-out 0.2s,
+              transform ease-out 0.2s;
+}
+
+.menu-container[showing] {
+  opacity: 1;
+  transform: none;
+}
+
+.menu-popup > richlistbox {
+  padding: 3px 0;
+  border: #000 solid @metro_border_thick@;
+  -moz-appearance: none;
+  display: -moz-box;
+}
+
+.menu-popup > richlistbox > scrollbox {
+  width: 100%;
+  overflow-x: hidden !important;
+}
+
+.menu-popup richlistitem {
+  width: 100%;
+  min-height: @touch_button_small@;
+  min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
+  border: 0 none;
+  -moz-box-align: center;
+  font-weight: 600;
+}
+.menu-popup > richlistbox > richlistitem {
+  -moz-padding-end: 50px;
+}
+/* Additional styles applied to popups for form <select> elements. */
+#select-container {
+  padding: 0;
+  position: absolute;
+  background-color: transparent;
+}
+
+#select-commands {
+  -moz-appearance: none;
+  background-color: white;
+  border: #000 solid @metro_border_thick@;
+  display: -moz-box;
+  -moz-user-focus: ignore;
+  -moz-box-align: stretch;
+  width: 100%;
+}
+
+/* ensure click events are dispatched targetting the select option not the label */
+#select-commands > .option-command > label {
+  pointer-events: none;
+}
+
+/* listcell element doesn't have flex="1" so we need to force it */
+.option-command > listcell {
+  -moz-box-flex: 1 !important;
+}
+
+.option-command {
+  min-height: @touch_button_small@;
+  min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
+  border: 0 none;
+}
+
+.option-command.optgroup {
+  font-weight: bold;
+  font-style: italic;
+  pointer-events: none;
+}
+
+.select-popup > richlistbox > scrollbox {
+  width: 100%;
+  overflow-x: hidden !important;
+}
+
+/* Toolbar Button --------------------------------------------------------- */
+
+toolbarbutton {
+  min-width: @metro_spacing_large@; /* primary button size */
+  min-height: @metro_spacing_large@; /* primary button size */
+  -moz-appearance: none;
+  margin: 0;
+  padding: @metro_spacing_xsmall@;
+}
+
+toolbarbutton:not(.show-text) .toolbarbutton-text {
+  display: none;
+}
+
+.toolbarbutton-icon[label]:not([label=""]),
+.toolbarbutton-icon[type="menu"] {
+  -moz-margin-end: @metro_spacing_xsmall@;
+}
+
+toolbarbutton:not(.show-text) .toolbarbutton-icon,
+toolbarbutton:not([image]) .toolbarbutton-icon,
+toolbarbutton[image=''] .toolbarbutton-icon {
+  -moz-margin-end: 0;
+}
+
+toolbarbutton:hover,
+toolbarbutton:hover:active,
+toolbarbutton[open="true"] {
+  border-color: transparent;
+}
+
+/* Toggleswitch ------------------------------------------------------------ */
+
+checkbox.toggleswitch {
+  margin: @metro_spacing_small@;
+  min-height: @metro_spacing_normal@;
+  font-weight: bold;
+}
+
+checkbox.toggleswitch hbox {
+  -moz-box-align: center;
+}
+
+checkbox.toggleswitch:not([checked]) .onlabel,
+checkbox.toggleswitch[checked] .offlabel {
+  display: none;
+}
+
+checkbox.toggleswitch radiogroup {
+  border: @metro_border_thick@ solid @field_disabled_foreground_color@;
+  -moz-box-orient: horizontal;
+}
+
+checkbox.toggleswitch radio {
+  -moz-appearance: none;
+  margin: 0;
+  border: 0 none;
+  border-radius: 0;
+  background: 0 none;
+  padding: 0;
+  min-height: @metro_spacing_normal@;
+  height: @metro_spacing_normal@;
+}
+
+checkbox.toggleswitch[checked] radio.checkbox-radio-on,
+checkbox.toggleswitch:not([checked]) radio.checkbox-radio-off {
+  width: @metro_spacing_normal@;
+  min-width: @metro_spacing_normal@;
+  background: #000;
+  margin: -@metro_border_thick@;
+}
+
+checkbox.toggleswitch[checked] radio.checkbox-radio-off,
+checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
+  width: @metro_spacing_xxxnormal@;
+  min-width: @metro_spacing_xxxnormal@;
+  margin: @metro_border_thin@;
+}
+
+checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
+  background: @field_disabled_foreground_color@;
+}
+
+checkbox.toggleswitch[checked] radio.checkbox-radio-off {
+  background: @selected_color@;
+}
+
+checkbox.toggleswitch[checked] radio:last-child {
+  -moz-margin-start: 0;
+}
+
+checkbox.toggleswitch[checked] radio:first-child {
+  -moz-margin-end: 0;
+}
+
+/* Color Picker ------------------------------------------------------------ */
+
+colorpicker > panel {
+  background-color: #767973;
+}
+
+colorpicker > vbox {
+  background-color: #767973;
+}
+
+/* Rich List Box ---------------------------------------------------------- */
+
+richlistbox {
+  -moz-user-focus: ignore;
+  margin: 0;
+}
+
+richlistitem {
+  -moz-user-focus: ignore;
+  min-height: @metro_spacing_normal@; /* row size */
+  padding: @metro_spacing_small@;
+}
+
+richlistitem label.normal,
+richlistitem description.normal,
+richlistitem label.normal-black,
+richlistitem description.normal-black,
+richlistitem label.normal-bold,
+richlistitem description.normal-bold{
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+richlistitem label.normal,
+richlistitem description.normal {
+  color: gray;
+}
+
+richlistitem label.normal-bold,
+richlistitem description.normal-bold {
+  font-weight: bold;
+}
+
+richlistitem[selected],
+richlistitem:not([disabled]):not([selected]):active {
+  background-color: @metro_orange@;
+  color: #fff;
+}
+
+richlistitem:not([disabled]):not([selected]):hover {
+  background-color: #ccc;
+}
+
+richlistitem.section-header,
+richlistitem[selected].section-header {
+  font-weight: bold;
+  color: #000;
+  background-color: lightgray;
+}
+
+richlistitem[selected] .hide-on-select,
+richlistitem .show-on-select {
+  visibility: collapse;
+}
+
+richlistitem[selected] .show-on-select,
+richlistitem .hide-on-select {
+  visibility: visible;
+}
+
+richlistitem[typeName="message"] {
+  border-bottom: 0;
+}
+
+/* Notification box ("info app bar") ---------------------------------------- */
+
+notification {
+  background: hsl(0, 0%, 98%);
+  border-bottom: 1px solid hsla(0, 0%, 0%, .07);
+  box-shadow: 0 0 10px hsla(0, 0%, 0%, .1);
+  min-height: 64px;
+}
+
+notificationbox[count="0"] .notification-layer,
+notificationbox[count="1"] .notification-layer,
+notificationbox[count="2"] .notification-layer[anonid="layer2"] {
+  visibility: collapse;
+}
+
+notificationbox[count="2"] .notification-layer[anonid="layer1"],
+notificationbox[count="3"] .notification-layer[anonid="layer1"],
+notificationbox[count="3"] .notification-layer[anonid="layer2"] {
+  visibility: visible;
+}
+
+.notification-layer {
+  border: @metro_border_thin@ solid @field_disabled_foreground_color@;
+  border-bottom: none;
+  height:5px
+}
+
+.notification-inner {
+  border-style: none;
+  border: @metro_border_thin@ solid @field_disabled_foreground_color@;
+}
+
+.notification-button {
+  -moz-margin-start: 0;
+  -moz-margin-end: 20px;
+}
+
+.messageImage {
+  width: 32px;
+  height: 32px;
+  -moz-margin-start: 40px;
+  -moz-margin-end: 16px;
+}
+
+/* If there is no image set, collapse the image but keep the starting margin */
+.messageImage:not([src]) {
+  width: 0;
+  -moz-margin-end: 0;
+}
+
+.messageText {
+  margin: 0;
+}
+
+.messageCloseButton {
+  list-style-image: url("chrome://browser/skin/images/infobar-close.png");
+  padding: 0;
+  -moz-margin-start: 0;
+  -moz-margin-end: 40px;
+  -moz-image-region: rect(0, 40px, 40px, 0);
+}
+
+.messageCloseButton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.messageCloseButton:hover {
+  -moz-image-region: rect(0, 80px, 40px, 40px);
+}
+
+.messageCloseButton:hover:active {
+  -moz-image-region: rect(0, 120px, 40px, 80px);
+}
+
+.notification-link {
+  /* Make the link take up all the space before the buttons. */
+  -moz-box-flex: 9999;
+}
+
+/* ensure the notification children pick up snapped-view box property overrides */
+.notification-button.box-inherit {
+  -moz-margin-start: inherit;
+  -moz-margin-end: inherit;
+  width: inherit;
+  display: inherit;
+  overflow: inherit;
+}
+
+@media (max-width: 330px) {
+  /* notifications need layout tweaks in narrow viewport
+   */
+  .notification-button {
+      display: block;
+      width: calc(100% - 40px);
+      overflow: visible;
+      -moz-margin-start: 40px;
+      -moz-margin-end: 0;
+  }
+
+  .notification-inner {
+    display: block;
+    padding: @metro_spacing_xnormal@;
+  }
+  .notification-inner > [anonid="details"] {
+    display: inline-block;
+    width: calc(100% - 48px);
+  }
+
+  .notification-inner > .messageCloseButton {
+    display: inline-block;
+    vertical-align: top;
+    -moz-margin-start: 8px;
+    -moz-margin-end: 0;
+  }
+  .notification-inner > [anonid="details"] > .messageImage {
+    display: inline;
+    vertical-align: top;
+    -moz-margin-start: 0;
+    -moz-margin-end: 8px;
+  }
+  .notification-inner > [anonid="details"] > .messageText {
+    display: inline-block;
+    width: calc(100% - 40px);
+    overflow: visible;
+  }
+
+}
+
+/* Prompts ----------------------------------------------------------------- */
+
+.mainContainer {
+  padding: 5vh 10vw;
+}
+
+.info\.title {
+  font-size: @metro_font_large@;
+  border-bottom: 1px solid #C7C7C7;
+  padding-bottom: @metro_spacing_normal@;
+  width: 100%;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.info\.body {
+  font-size: @metro_font_normal@;
+  padding-bottom: @metro_spacing_normal@;
+  height: 100%;
+  max-height: 30vh;
+  max-width: 55vw;
+}
+
+.buttonContainer {
+  background-color: transparent;
+  border: none;
+}
+
+.buttonContainer > button {
+  min-width: @touch_action_minwidth@;
+  margin: 5px 0 5px @metro_spacing_xnormal@;
+}
+
+/* set all the things to display block to allow body to grow with content and
+  obey overflow auto. Except on authentication prompts because a grid is used to
+  align labels and textboxes. */
+tabmodalprompt:not([promptType="promptUserAndPass"]) .info\.body,
+tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer,
+tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer,
+tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows > row:not([hidden]),
+tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows {
+  display: block;
+}
+
+tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer {
+  overflow: auto;
+}
+
+.topContainer > rows > row > label {
+  margin-left: 0;
+}
+
+.topContainer > rows > row > checkbox {
+  -moz-margin-start: 0;
+  -moz-padding-start: 0;
+}
+
+.topContainer > rows > row > textbox {
+  font-size: @metro_font_normal@;
+  height: 40px;
+  margin: 5px 0;
+  width: 100%;
+}
+
+.topContainer > rows > row > textbox[focused] {
+  border-color: @metro_orange@ !important;
+}
+
+#stack[keyboardVisible] tabmodalprompt > spacer {
+  min-height: 20px;
+  max-height: 20px;
+}
+
+#stack[keyboardVisible] tabmodalprompt .info\.body {
+  max-height: 15vh;
+}
+
+@media (max-width: 600px) {
+  .mainContainer {
+    padding: 5vh 5vw;
+    width: 90vw;
+  }
+
+  .buttonContainer > button {
+    min-width: @touch_action_snapped_minwidth@;
+  }
+}
+
+/*.meta -------------------------------------------------------------------- */
+
+.meta {
+  background-color: @panel_light_color@;
+}
+
+/* needs to observe the viewstate */
+.meta-section-container {
+  padding: 45px 75px 0;
+  -moz-box-orient: horizontal;
+}
+
+.meta-section-container[viewstate="snapped"],
+.meta-section-container[viewstate="portrait"] {
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
+.meta-section-container[viewstate="snapped"] {
+  padding: 0;
+}
+
+.meta-section {
+  margin: 0 @metro_spacing_large@;
+}
+
+.meta-section-container[viewstate="snapped"] > .meta-section {
+  margin: 0 @metro_spacing_xnormal@;
+}
+
+.meta-section-title {
+  margin: @metro_spacing_normal@ @tile_side_margin@;
+  font-size: @metro_font_large@;
+  font-weight: 100;
+  cursor: default;
+}
+
+.meta-section-title.wide-title {
+  font-size: @metro_font_xlarge@;
+  margin-bottom: calc(40px - @tile_side_margin@);
+}
+
+.meta-section:not([expanded]) > .meta-section-title.narrow-title:after {
+  content: ">";
+}
+
+.meta-section-container:not([viewstate="snapped"]) .meta-section-title.narrow-title,
+.meta-section-container[viewstate="snapped"] .meta-section-title.wide-title {
+  display: none;
+}
+
+.meta-section-container[viewstate="snapped"] .meta-section-title,
+.meta-section-container[viewstate="snapped"] richgrid {
+  margin-top: @metro_spacing_xnormal@;
+  padding: 0;
+}
+
+.meta-section > richgrid {
+  opacity: 1;
+  transform: translateX(0) translateY(0);
+  transition-duration: 367ms;
+  transition-delay: 500ms;
+  transition-timing-function: @metro_animation_easing@;
+}
+
+.meta-section:nth-child(2) > richgrid {
+  transition-delay: 600ms;
+}
+.meta-section:nth-child(3) > richgrid {
+  transition-delay: 700ms;
+}
+.meta-section:nth-child(4) > richgrid {
+  transition-delay: 800ms;
+}
+
+.meta-section > richgrid[fade] {
+  opacity: 0;
+  transform: translateX(150px) translateY(25px);
+}
+
+#start-container[viewstate="snapped"] .meta-section > richgrid {
+  transition-property: none;
+}
+
+/* Autocomplete ----------------------------------------------------------------- */
+
+#urlbar-autocomplete-scroll:not([autocomplete]) {
+  transform: translateY(calc(3 * @grid_row_height@ + 64px));
+  visibility: collapse;
+}
+
+#urlbar-autocomplete-scroll[autocomplete] {
+  height: calc(3 * @grid_row_height@ + 64px);
+  max-height: calc(3 * @grid_row_height@ + 64px);
+  transform: translateY(0);
+  transition-timing-function: @metro_animation_easing@;
+  transition-property: transform;
+  transition-duration: @metro_animation_duration@;
+  transition-delay: 0s;
+  visibility: visible;
+}
+
+#urlbar-autocomplete-scroll:not([autocomplete]) > .meta-section-container > .meta-section {
+  opacity: 0;
+}
+
+#urlbar-autocomplete > .meta-section {
+  opacity: 1;
+  transition-property: opacity;
+  transition-timing-function: @metro_animation_easing@;
+  transition-duration: @metro_animation_duration@;
+  transition-delay: 0s;
+  visibility: visible;
+}
+
+#urlbar-autocomplete[nomatch] > .meta-section[anonid="results-container"] {
+  opacity: 0;
+  visibility: collapse;
+}
+
+#urlbar-autocomplete richgriditem:not([value]) {
+  visibility: collapse;
+}
+
+/* App bars ----------------------------------------------------------------- */
+
+appbar {
+  display: block;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  transform: translateY(100%);
+  transition: transform @metro_animation_duration@ @metro_animation_easing@;
+  font-size: 0;
+  visibility: hidden;
+}
+
+appbar[hiding],
+appbar[visible] {
+  visibility: visible;
+}
+
+appbar[visible] {
+  transform: none;
+}
+
+#stack[keyboardVisible] > appbar {
+  /* Slow the bottom up transition since it's impossible to match the system's
+     soft keyboard movement. */
+  transition: transform @metro_animation_duration@ @metro_animation_easing@,
+              bottom @appbar_keyboard_slideup_duration@ @appbar_keyboard_slideup_easing@ @appbar_keyboard_slideup_delay@;
+}
+
+
+appbar toolbar {
+  -moz-appearance: none;
+  -moz-box-align: center;
+  border: 0;
+  width: 100%;
+  min-height: @toolbar_height@;
+  font-size: 1rem;
+}
+
+appbar toolbar toolbarbutton {
+  border: 0;
+  margin: 0 @toolbar_horizontal_spacing@;
+  padding: 0;
+  /* Don't inherit background-color from toolbarbutton[checked="true"] */
+  background-color: transparent;
+}
+
+appbar toolbar toolbarbutton[disabled] {
+  visibility: collapse;
+}
+
+appbar toolbar[labelled] {
+  min-height: @labelled_toolbar_height@;
+}
+
+appbar toolbar[labelled] toolbarbutton {
+  -moz-box-orient: vertical;
+}
+
+appbar toolbar[labelled] toolbarbutton > .toolbarbutton-text {
+  display: block;
+  padding-top: @metro_spacing_small@;
+  font-size: 0.75rem;
+}
+
+/* Sprites */
+
+.appbar-primary .toolbarbutton-icon,
+.appbar-secondary .toolbarbutton-icon {
+  width: 40px;
+  height: 40px;
+}
+
+/* Primary sprite format: one button per sprite.
+
+   States from left to right:
+   normal, hover, active/toggled, toggled+hover, toggled+active. */
+
+.appbar-primary {
+  -moz-image-region: rect(0 40px 40px 0);
+}
+
+.appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
+  -moz-image-region: rect(0 80px 40px 40px);
+}
+
+.appbar-primary:not([checked]):active:not([disabled]),
+.appbar-primary[checked] {
+  -moz-image-region: rect(0 120px 40px 80px);
+}
+
+.appbar-primary[checked]:hover:not(:active):not([disabled]) {
+  -moz-image-region: rect(0 160px 40px 120px);
+}
+
+.appbar-primary[checked]:active:not([disabled]) {
+  -moz-image-region: rect(0 200px 40px 160px);
+}
+
+@media (min-resolution: @min_res_140pc@) {
+  .appbar-primary {
+    -moz-image-region: rect(0 56px 56px 0);
+  }
+
+  .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
+    -moz-image-region: rect(0 112px 56px 56px);
+  }
+
+  .appbar-primary:not([checked]):active:not([disabled]),
+  .appbar-primary[checked] {
+    -moz-image-region: rect(0 168px 56px 112px);
+  }
+
+  .appbar-primary[checked]:hover:not(:active):not([disabled]) {
+    -moz-image-region: rect(0 224px 56px 168px);
+  }
+
+  .appbar-primary[checked]:active:not([disabled]) {
+    -moz-image-region: rect(0 280px 56px 224px);
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  .appbar-primary {
+    -moz-image-region: rect(0 72px 72px 0);
+  }
+
+  .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
+    -moz-image-region: rect(0 144px 72px 72px);
+  }
+
+  .appbar-primary:not([checked]):active:not([disabled]),
+  .appbar-primary[checked] {
+    -moz-image-region: rect(0 216px 72px 144px);
+  }
+
+  .appbar-primary[checked]:hover:not(:active):not([disabled]) {
+    -moz-image-region: rect(0 288px 72px 216px);
+  }
+
+  .appbar-primary[checked]:active:not([disabled]) {
+    -moz-image-region: rect(0 360px 72px 288px);
+  }
+}
+
+/* Secondary sprite format: one sprite for everything */
+
+.appbar-secondary {
+  list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
+}
+
+/* Flyout panels (sidebars) ------------------------------------------------- */
+
+.flyout-narrow {
+  width: 346px;
+}
+
+/* Some elements don't resize to fit their container properly for some reason.
+ * Setting max-width on the element or a child fixes it. */
+.flyout-narrow .flyoutpanel-hack {
+  max-width: calc(346px - 2 * 40px);
+}
+
+.console-row-code {
+   padding-top: 2px;
+   font-size: small;
+}
\ No newline at end of file