diff -r 000000000000 -r 6474c204b198 browser/metro/theme/browser.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/browser/metro/theme/browser.css	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,1402 @@
+/* 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/. */
+
+%filter substitution
+%include defines.inc
+
+%define forward_transition_length 200ms
+%define forward_spacing 50px
+
+/* Tab/StartUI tray ======================================================== */
+
+#tray {
+  transition: transform @metro_animation_duration@ @metro_animation_easing@;
+  transform: translateY(-@tabs_height@);
+  width: 100%;
+}
+
+#tray {
+  position: fixed;
+}
+
+#tray[expanded]:not([viewstate="snapped"]) {
+  transform: none;
+}
+
+/* Tabs -------------------------------------------------------------------- */
+
+#tabs-container {
+  background: @panel_dark_color@ @panel_dark_background@;
+  padding: 0;
+  -moz-padding-start: @metro_spacing_normal@;
+  width: 100%;
+}
+
+#tabs {
+  -moz-padding-start: 0;
+}
+
+#tabs .tabs-list {
+  display: block;
+  -moz-user-focus: ignore;
+  padding: 0;
+  background-color: transparent;
+  margin: 0;
+  overflow: auto;
+}
+
+.tabs-scrollbox > .scrollbutton-up[collapsed],
+.tabs-scrollbox > .scrollbutton-down[collapsed],
+#tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-up,
+#tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-down {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
+#tabs > .tabs-scrollbox > .scrollbutton-down:-moz-locale-dir(rtl),
+#tabs > .tabs-scrollbox > .scrollbutton-up {
+  list-style-image: url("images/tab-arrows.png") !important;
+  -moz-image-region: rect(15px 58px 63px 14px) !important;
+  padding-right: 15px;
+  width: @tabs_scrollarrow_width@;
+}
+#tabs > .tabs-scrollbox > .scrollbutton-down:hover:-moz-locale-dir(rtl),
+#tabs > .tabs-scrollbox > .scrollbutton-up:hover {
+  -moz-image-region: rect(14px 102px 62px 58px) !important;
+}
+#tabs > .tabs-scrollbox > .scrollbutton-down:active:-moz-locale-dir(rtl),
+#tabs > .tabs-scrollbox > .scrollbutton-up:active {
+  -moz-image-region: rect(14px 152px 62px 108px) !important;
+}
+#tabs > .tabs-scrollbox > .scrollbutton-down[disabled]:-moz-locale-dir(rtl),
+#tabs > .tabs-scrollbox > .scrollbutton-up[disabled] {
+  -moz-image-region: rect(15px 196px 63px 152px) !important;
+}
+
+#tabs > .tabs-scrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
+#tabs > .tabs-scrollbox > .scrollbutton-down {
+  list-style-image: url("images/tab-arrows.png") !important;
+  -moz-image-region: rect(73px 58px 121px 14px) !important;
+  padding-left: 15px;
+  width: @tabs_scrollarrow_width@;
+}
+#tabs > .tabs-scrollbox > .scrollbutton-up:hover:-moz-locale-dir(rtl),
+#tabs > .tabs-scrollbox > .scrollbutton-down:hover {
+  -moz-image-region: rect(72px 102px 120px 58px) !important;
+}
+#tabs > .tabs-scrollbox > .scrollbutton-up:active:-moz-locale-dir(rtl),
+#tabs > .tabs-scrollbox > .scrollbutton-down:active {
+  -moz-image-region: rect(72px 152px 120px 108px) !important;
+}
+#tabs > .tabs-scrollbox > .scrollbutton-up[disabled]:-moz-locale-dir(rtl),
+#tabs > .tabs-scrollbox > .scrollbutton-down[disabled] {
+  -moz-image-region: rect(73px 196px 121px 152px) !important;
+}
+
+.tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::after {
+  right: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@);
+}
+
+.tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::before {
+  right: auto;
+  left: calc(@tabs_scrollarrow_width@ + @newtab_button_width@);
+}
+
+.tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed])::after {
+  content: "";
+  visibility: visible;
+  display: block;
+  background-color: rgb(90, 91, 95);
+  position: absolute;
+  top: 0;
+  left: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@); /* .scrollbutton-up width + #tabs-container left padding */
+  width: 1px;
+  height: @tabs_height@;
+}
+
+.tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed])::before {
+  content: "";
+  visibility: visible;
+  display: block;
+  background-color: rgb(90, 91, 95);
+  position: absolute;
+  top: 0;
+  right: calc(@tabs_scrollarrow_width@ + @newtab_button_width@); /* .scrollbutton-down width + #newtab-button width */
+  width: 1px;
+  height: @tabs_height@;
+}
+
+/* Hack for bug 965550 */
+.tabs-scrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
+  -moz-padding-start: calc(2 * @tabs_scrollarrow_width@);
+  -moz-margin-start: calc(-2 * @tabs_scrollarrow_width@);
+}
+
+#tabs-container[viewstate="snapped"] {
+  visibility: hidden;
+}
+
+@-moz-keyframes open-documenttab {
+  0% {
+    opacity: 0;
+    transform: scale(0, 0);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+}
+
+@-moz-keyframes close-documenttab {
+  0% {
+    opacity: 1;
+    transform: scale(1, 1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0, 0);
+  }
+}
+
+.documenttab-container {
+  animation: open-documenttab 0.4s ease-out;
+}
+
+documenttab[closing] > .documenttab-container {
+  animation: close-documenttab 0.4s ease-out;
+  animation-fill-mode: forwards;
+}
+
+.documenttab-favicon {
+  visibility: collapse;
+}
+
+.documenttab-thumbnail {
+  margin: @metro_spacing_normal@ @metro_spacing_snormal@;
+  background: white none center top no-repeat;
+  background-size: cover;
+  min-width: @thumbnail_width@;
+  width: @thumbnail_width@;
+  height: @thumbnail_height@;
+}
+#tray:not([expanded]) .documenttab-thumbnail {
+  background-image: none!important;
+}
+
+/* TODO: Decide how and where to display private tabs.
+ * For now, display them in the main tab strip but hide the thumbnail. */
+documenttab[private] .documenttab-thumbnail {
+  background-color: purple;
+}
+
+.documenttab-title {
+  margin: @metro_spacing_normal@ @metro_spacing_snormal@;
+  margin-top: 0;
+  font-size: @metro_font_normal@;
+  width: @thumbnail_width@;
+  padding: 4px @metro_spacing_snormal@ 8px;
+
+  background: #000;
+  opacity: 0.95;
+  color: #fff;
+  box-shadow: 0 0 @metro_spacing_snormal@ rgba(0, 0, 0, 0.25);
+}
+
+.documenttab-crop {
+  background: transparent url("chrome://browser/skin/images/tab-crop.png") 50% 50% no-repeat;
+}
+
+.documenttab-selection {
+  background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 0%, 100%, 50%, 0%) 50% 50% no-repeat;
+}
+
+documenttab[selected] .documenttab-selection {
+  background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 50%, 100%, 100%, 0%) 50% 50% no-repeat;
+}
+
+.documenttab-crop:-moz-locale-dir(rtl),
+.documenttab-selection:-moz-locale-dir(rtl),
+documenttab[selected] .documenttab-selection:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.documenttab-close {
+  background: none !important;
+  padding: @metro_spacing_small@ !important;
+  margin-top: @metro_spacing_snormal@;
+  -moz-margin-end: @metro_spacing_xsmall@;
+  border-color: transparent !important;
+  list-style-image: url("chrome://browser/skin/images/closetab-default.png");
+}
+
+.documenttab-close > .button-box > .button-text {
+  display: none;
+}
+
+#tabs-controls {
+  -moz-box-align: start;
+  -moz-box-orient: vertical;
+}
+
+#newtab-button {
+  list-style-image: url(chrome://browser/skin/images/newtab-default.png);
+
+  /* Add some extra padding for a larger target */
+  padding: 18px 20px 30px 20px;
+  width: @newtab_button_width@;
+}
+
+/* Start UI ----------------------------------------------------------------- */
+
+#urlbar-autocomplete[viewstate="snapped"],
+#urlbar-autocomplete[viewstate="portrait"]{
+  -moz-box-orient: vertical;
+}
+
+#autocomplete-overlay {
+  display: none;
+  background-color: black;
+  opacity: .3;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+#stack[autocomplete] > #page > #content-viewport > #autocomplete-overlay {
+  display: -moz-box;
+}
+
+/* Browser Content Areas ==================================================== */
+
+/* a 'margin-top' is applied dynamically in ContentAreaObserver */
+#browsers {
+  background: white;
+  transition-property: margin-top;
+  transition-duration: .3s;
+  transition-timing-function: ease-in-out;
+}
+#browsers browser {
+  /* unset padding-bottom immediately */
+  transition-duration: 0s;
+  transition-delay:    0s;
+  transition-property: padding-bottom;
+}
+/* Selection overlay and monocles */
+#page,
+.selection-overlay {
+  -moz-stack-sizing: ignore;
+}
+
+.selection-overlay {
+  pointer-events: none;
+}
+
+.selection-overlay:-moz-focusring {
+  outline: 0 !important;
+}
+
+.selection-overlay-hidden {
+  display: none;
+}
+
+.selectionhandle {
+  background-image: url("chrome://browser/skin/images/selection-monocle.png");
+  background-repeat: no-repeat;
+  background-size: 18px 18px;
+  padding: 0px;
+  margin-top: -19px;
+  margin-left: -9px;
+  pointer-events: auto;
+}
+
+@media (min-resolution: @min_res_140pc@) {
+  /* Load 140% image when scaled by 140% */
+  .selectionhandle {
+    background-image: url("chrome://browser/skin/images/selection-monocle@1.4x.png");
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  /* Load 180% image when scaled by 180% */
+  .selectionhandle {
+    background-image: url("chrome://browser/skin/images/selection-monocle@1.8x.png");
+  }
+}
+
+/* content scrollbars */
+.scroller {
+  opacity: 0;
+  background-color: rgba(0, 0, 0, 0.4) !important;
+  -moz-border-top-colors: none !important;
+  -moz-border-bottom-colors: none !important;
+  -moz-border-right-colors: none !important;
+  -moz-border-left-colors: none !important;
+  border-radius: @border_radius_tiny@;
+  border: @border_width_tiny@ solid rgba(255, 255, 255, 0.4) !important;
+}
+
+.scroller[panning] {
+  opacity: 1;
+}
+
+.scroller[orient="vertical"] {
+  min-width: @scroller_thickness@;
+  width: @scroller_thickness@;
+  min-height: @scroller_minimum@;
+}
+
+.scroller[orient="horizontal"] {
+  min-height: @scroller_thickness@;
+  height: @scroller_thickness@;
+  min-width: @scroller_minimum@;
+}
+
+/* overlay buttons */
+
+.overlay-button {
+  position: fixed;
+  top: 50%;
+  margin-top: -65px;
+  width: 118px;
+  height: 118px;
+  background-color: hsla(210,30%,10%,.2);
+  background-size: 60px;
+  background-repeat: no-repeat;
+  background-origin: padding-box;
+  background-clip: padding-box;
+  border: 6px solid hsla(0,0%,100%,.7);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px hsla(0,0%,0%,.04),
+              0 0 9px 0 hsla(0,0%,0%,.1);
+  transition-property: left, right, transform, background-position,
+                       background-color, background-size, border-color,
+                       visibility, box-shadow, top;
+  transition-duration: 550ms;
+  transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+}
+
+#overlay-back {
+  background-image: url(chrome://browser/skin/images/overlay-back.png);
+}
+
+#overlay-plus {
+  background-image: url(chrome://browser/skin/images/overlay-plus.png);
+}
+
+@media (min-resolution: @min_res_140pc@) {
+  #overlay-back {
+    background-image: url(chrome://browser/skin/images/overlay-back@1.4x.png);
+  }
+
+  #overlay-plus {
+    background-image: url(chrome://browser/skin/images/overlay-plus@1.4x.png);
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  #overlay-back {
+    background-image: url(chrome://browser/skin/images/overlay-back@1.8x.png);
+  }
+
+  #overlay-plus {
+    background-image: url(chrome://browser/skin/images/overlay-plus@1.8x.png);
+  }
+}
+
+#overlay-back:-moz-locale-dir(ltr),
+#overlay-plus:-moz-locale-dir(rtl) {
+  left: -70px;
+  background-position: right 6px center;
+}
+
+#overlay-plus:-moz-locale-dir(ltr) {
+  right: -70px;
+  background-position: left 6px center;
+}
+
+#stack[viewstate="snapped"] > .overlay-button,
+#stack[keyboardVisible] > .overlay-button,
+#stack[autocomplete] > .overlay-button,
+#stack[fullscreen] > .overlay-button,
+#appbar[visible] ~ .overlay-button,
+.overlay-button[disabled] {
+  box-shadow: none;
+  visibility: collapse;
+}
+
+#stack[keyboardVisible] > #overlay-back:-moz-locale-dir(ltr),
+#stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(rtl),
+#stack[autocomplete] > #overlay-back:-moz-locale-dir(ltr),
+#stack[autocomplete] > #overlay-plus:-moz-locale-dir(rtl),
+#stack[fullscreen] > #overlay-back:-moz-locale-dir(ltr),
+#stack[fullscreen] > #overlay-plus:-moz-locale-dir(rtl),
+#appbar[visible] ~ #overlay-back:-moz-locale-dir(ltr),
+#appbar[visible] ~ #overlay-plus:-moz-locale-dir(rtl),
+#overlay-back[disabled]:-moz-locale-dir(ltr),
+#overlay-plus[disabled]:-moz-locale-dir(rtl) {
+  transform: translateX(-60px);
+}
+
+#stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(ltr),
+#stack[keyboardVisible] > #overlay-back:-moz-locale-dir(rtl),
+#stack[autocomplete] > #overlay-plus:-moz-locale-dir(ltr),
+#stack[autocomplete] > #overlay-back:-moz-locale-dir(rtl),
+#stack[fullscreen] > #overlay-plus:-moz-locale-dir(ltr),
+#stack[fullscreen] > #overlay-back:-moz-locale-dir(rtl),
+#appbar[visible] ~ #overlay-plus:-moz-locale-dir(ltr),
+#appbar[visible] ~ #overlay-back:-moz-locale-dir(rtl),
+#overlay-plus[disabled]:-moz-locale-dir(ltr),
+#overlay-back[disabled]:-moz-locale-dir(rtl) {
+  transform: translateX(60px);
+}
+
+.overlay-button:hover {
+  background-color: hsla(210,30%,10%,.4);
+  background-size: 90px;
+  border-color: hsla(0,0%,100%,.9);
+}
+
+#overlay-back:-moz-locale-dir(ltr):hover,
+#overlay-plus:-moz-locale-dir(rtl):hover {
+  background-position: right 12px center;
+  transform: translateX(40px) scale(1.2);
+}
+
+#overlay-plus:-moz-locale-dir(ltr):hover {
+  background-position: left 12px center;
+  transform: translateX(-40px) scale(1.2);
+}
+
+#overlay-back:-moz-locale-dir(rtl):hover {
+  transform: translateX(-40px) scale(1.2) scaleX(-1);
+}
+
+#overlay-back:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+  right: -70px;
+  background-position: right 9px center;
+}
+
+#overlay-back[mousedrag],
+#overlay-plus[mousedrag] {
+  transition-property: left, right, transform, background-position,
+                       background-color, background-size, border-color,
+                       visibility, box-shadow;
+}
+
+/* Navigation bar ========================================================== */
+
+/* Most appbars are hidden by default, but we want to keep #navbar visible so
+ * we can show the progress bar at all times.  Instead, we hide only the
+ * toolbar portion of the navbar. */
+#navbar {
+  visibility: visible;
+}
+#navbar:not([hiding]):not([visible]) > #toolbar-overlay {
+  visibility: hidden;
+}
+
+#content-viewport[navbar="visible"] .active-tab-notificationbox:not([count="0"]):not([notificationsVisible="false"]) {
+  padding-bottom: @toolbar_height@;
+}
+
+
+/* Progress meter ---------------------------------------------------------- */
+
+#progress-container {
+  display: block;
+  position: absolute;
+  top: -@progress_height@;
+  height: @progress_height@;
+  width: 100%;
+  background-color: hsla(210,5%,80%,1);
+  box-shadow: 0 1px 0 hsla(210,5%,50%,.1) inset;
+  -moz-user-focus: ignore;
+}
+#progress-container[startpage] {
+  visibility: collapse;
+}
+
+#progress-control {
+  display: block;
+  height: @progress_height@;
+  background-image: -moz-linear-gradient(left, hsla(200,100%,83%,.5),
+                                         hsla(200,100%,83%,0)),
+                    -moz-linear-gradient(top, #1ab2ff, #0091ff);
+  border-right: 1px solid #0082e5;
+  transition: width .3s ease-in;
+  -moz-user-focus: ignore;
+}
+
+#progress-control:-moz-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#progress-control[fade] {
+  opacity: 0;
+  transition: width .3s ease-in, .5s opacity ease-in;
+}
+
+/* Toolbar ----------------------------------------------------------------- */
+
+#toolbar-overlay {
+  background-color: @panel_light_color@;
+}
+
+#urlbar-autocomplete {
+  padding-top: 0;
+}
+
+#toolbar {
+  padding: 0 @toolbar_horizontal_padding@;
+}
+
+#toolbar[viewstate="snapped"] {
+  padding: 0 @toolbar_snapped_horizontal_padding@;
+}
+
+#toolbar[viewstate="snapped"] > toolbarbutton {
+  margin: 0 @toolbar_snapped_horizontal_spacing@;
+}
+
+/* Combined back/forward buttons */
+
+#back-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-back.png);
+  position: relative;
+  z-index: 1;
+  transition: opacity @forward_transition_length@ ease-out;
+}
+
+#back-button:-moz-locale-dir(rtl),
+#forward-button:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#back-button[disabled] {
+  visibility: visible;
+  opacity: 0.5;
+}
+
+#forward-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-forward.png);
+  transition: margin @forward_transition_length@ ease-out,
+              visibility @forward_transition_length@ ease-out,
+              opacity @forward_transition_length@ ease-out;
+}
+
+#forward-button[disabled] {
+  -moz-margin-start: -@forward_spacing@ !important;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+@media (min-resolution: @min_res_140pc@) {
+  #back-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
+  }
+
+  #forward-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-forward@1.4x.png);
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  #back-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
+  }
+
+  #forward-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-forward@1.8x.png);
+  }
+}
+
+/* URL bar */
+#urlbar {
+  border: @metro_border_thick@ solid @urlbar_border_color@;
+  margin: 0 @toolbar_horizontal_spacing@;
+  padding: 0;
+  background-color: @field_background_color@;
+  overflow: hidden;
+}
+
+#urlbar[editing] {
+  border-color: @metro_orange@;
+}
+
+/* Identity widget */
+#identity-icon {
+  margin: 0;
+  padding: 0 @metro_spacing_snormal@;
+  list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
+}
+
+#identity-box.verifiedDomain > #identity-icon {
+  list-style-image: url("chrome://browser/skin/images/identity-icons-https.png");
+}
+
+#identity-box.verifiedIdentity > #identity-icon {
+  list-style-image: url("chrome://browser/skin/images/identity-icons-https-ev.png");
+}
+
+#toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
+  list-style-image: url("chrome://browser/skin/images/icons-identity-firefox.png");
+}
+
+#urlbar[autocomplete] > #identity-box > #identity-icon {
+  list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search.png");
+}
+
+/* Main URL textbox */
+#urlbar-edit {
+  margin: 0 !important;
+  min-height: @urlbar_edit_height@;
+  -moz-appearance: none !important;
+  border-radius: 0;
+  border: 0 none !important;
+  padding: 0 !important;
+}
+
+#urlbar-edit > hbox > .textbox-input-box > .textbox-input:invalid {
+  /* Hide error glow around the address bar that shows by default
+   * when URLs are made invalid by trmming. */
+  box-shadow: none !important;
+}
+
+/* Combined stop-reload button */
+.urlbar-button {
+  margin: 0;
+  -moz-image-region: rect(0px, 30px, 30px, 0px);
+}
+
+.urlbar-button:hover:not(:active) {
+  -moz-image-region: rect(0px, 60px, 30px, 30px);
+  background-color: #dedfdf;
+}
+
+.urlbar-button:active {
+  -moz-image-region: rect(0px, 90px, 30px, 60px);
+  background-color: #6d7073;
+}
+
+.urlbar-button  > .toolbarbutton-icon {
+  width: 30px;
+  height: 30px;
+}
+
+#go-button {
+  list-style-image: url(chrome://browser/skin/images/urlbar-go.png)
+}
+
+#reload-button {
+  list-style-image: url(chrome://browser/skin/images/urlbar-reload.png);
+}
+
+#stop-button {
+  list-style-image: url(chrome://browser/skin/images/urlbar-stop.png);
+}
+
+@media (min-resolution: @min_res_140pc@) {
+  .urlbar-button {
+    -moz-image-region: rect(0px, 42px, 42px, 0px);
+  }
+
+  .urlbar-button:hover:not(:active) {
+    -moz-image-region: rect(0px, 84px, 42px, 42px);
+  }
+
+  .urlbar-button:active {
+    -moz-image-region: rect(0px, 126px, 42px, 84px);
+  }
+
+  #go-button {
+    list-style-image: url(chrome://browser/skin/images/urlbar-go@1.4x.png)
+  }
+
+  #reload-button {
+    list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.4x.png);
+  }
+
+  #stop-button {
+    list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.4x.png);
+  }
+
+  #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
+    list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.4x.png");
+  }
+
+  #urlbar[autocomplete] > #identity-box > #identity-icon {
+    list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.4x.png");
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  .urlbar-button {
+    -moz-image-region: rect(0px, 54px, 54px, 0px);
+  }
+
+  .urlbar-button:hover:not(:active) {
+    -moz-image-region: rect(0px, 108px, 54px, 54px);
+  }
+
+  .urlbar-button:active {
+    -moz-image-region: rect(0px, 162px, 54px, 108px);
+  }
+
+  #go-button {
+    list-style-image: url(chrome://browser/skin/images/urlbar-go@1.8x.png)
+  }
+
+  #reload-button {
+    list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.8x.png);
+  }
+
+  #stop-button {
+    list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.8x.png);
+  }
+
+  #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
+    list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.8x.png");
+  }
+
+  #urlbar[autocomplete] > #identity-box > #identity-icon {
+    list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.8x.png");
+  }
+}
+
+/* navbar edit button: one button out of three - when editing: go, when !editing,
+   loading: stop, when !editing, !loading: reload */
+
+#go-button, #reload-button, #stop-button  {
+  visibility: collapse;
+}
+
+#urlbar[editing] > #go-button,
+#urlbar:not([editing])[loading] > #stop-button,
+#urlbar:not([editing]):not([loading]) > #reload-button {
+  visibility: visible;
+}
+
+/* Contextual toolbar controls */
+
+#toolbar-context-autocomplete,
+.hide-on-start,
+#toolbar-context-page {
+  transition-property: opacity, visibility;
+  transition-duration: @forward_transition_length@;
+  transition-timing-function: @metro_animation_easing@;
+}
+
+#toolbar-contextual:not([autocomplete]) #toolbar-context-autocomplete,
+#toolbar-contextual[startpage] .hide-on-start,
+#toolbar-contextual[autocomplete] #toolbar-context-page {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+#toolbar[viewstate="snapped"] #toolbar-contextual {
+  visibility: collapse;
+}
+
+#download-progress:not([progress]) {
+  visibility: collapse;
+}
+
+#download-progress {
+  list-style-image: url(chrome://browser/skin/images/navbar-download.png);
+}
+
+#download-progress[progress="100"] {
+  list-style-image: url(chrome://browser/skin/images/navbar-download-finished.png);
+}
+
+#pin-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-pin.png);
+}
+
+#star-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-star.png);
+}
+
+#menu-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-menu.png);
+}
+
+#close-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-close.png);
+}
+
+@media (min-resolution: @min_res_140pc@) {
+  #download-progress {
+    list-style-image: url(chrome://browser/skin/images/navbar-download@1.4x.png);
+  }
+
+  #download-progress[progress="100"] {
+    list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.4x.png);
+  }
+
+  #pin-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-pin@1.4x.png);
+  }
+
+  #star-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-star@1.4x.png);
+  }
+
+  #menu-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-menu@1.4x.png);
+  }
+
+  #close-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-close@1.4x.png);
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  #download-progress {
+    list-style-image: url(chrome://browser/skin/images/navbar-download@1.8x.png);
+  }
+
+  #download-progress[progress="100"] {
+    list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.8x.png);
+  }
+
+  #pin-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-pin@1.8x.png);
+  }
+
+  #star-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-star@1.8x.png);
+  }
+
+  #menu-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-menu@1.8x.png);
+  }
+
+  #close-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-close@1.8x.png);
+  }
+}
+
+/* Panel UI ================================================================ */
+
+#panel-container {
+  padding: 60px 40px;
+}
+
+#panel-container[viewstate="snapped"] .canSnapTiles .richgrid-item-content {
+  -moz-box-orient: horizontal;
+}
+
+#panel-close-button {
+  -moz-margin-end: 40px;
+  list-style-image: url(chrome://browser/skin/images/navbar-back.png);
+  -moz-box-pack: center;
+}
+
+#panel-close-button:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+@media (min-resolution: @min_res_140pc@) {
+  #panel-close-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  #panel-close-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
+  }
+}
+
+#panel-items {
+  padding-top: 20px;
+  -moz-padding-start: 88px;
+}
+
+#panel-container[viewstate="snapped"] #panel-items {
+  padding-left: 0px;
+}
+
+/* Console Section - Panel UI ---------------------------------------------- */
+
+#console-filter-warnings,
+#console-filter-messages {
+  visibility: visible;
+}
+
+@media (max-width: 499px) {
+  #console-filter-warnings,
+  #console-filter-messages {
+    visibility: collapse;
+  }
+}
+
+.console-error-msg,
+.console-msg-text {
+  white-space: pre-wrap;
+}
+
+/* Find bar ================================================================ */
+
+#findbar {
+  background-color: @metro_orange@;
+  padding: 0;
+}
+
+#findbar > toolbar {
+  min-height: @findbar_height@ !important;
+}
+
+#findbar-textbox {
+  border: none !important;
+  width: 20em;
+}
+
+/* Override the default box ordering and make the find textbox appear to the
+   right of the icon */
+#findbar-textbox input {
+  -moz-box-ordinal-group: 2
+}
+
+#findbar-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
+  background: rgb(255,200,200);
+}
+
+#findbar-textbox:hover:active {
+  background: #8db8d8;
+}
+
+.textbox-search-icon {
+  list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
+  -moz-image-region: auto;
+}
+
+#findbar-previous-button {
+  -moz-image-region: rect(0px, 400px, 40px, 360px);
+}
+
+#findbar-previous-button:hover:not(:active) {
+  -moz-image-region: rect(40px, 400px, 80px, 360px);
+}
+
+#findbar-previous-button:active {
+  -moz-image-region: rect(80px, 400px, 120px, 360px);
+}
+
+#findbar-next-button {
+  -moz-image-region: rect(0px, 440px, 40px, 400px);
+}
+
+#findbar-next-button:hover:not(:active) {
+  -moz-image-region: rect(40px, 440px, 80px, 400px);
+}
+
+#findbar-next-button:active {
+  -moz-image-region: rect(80px, 440px, 120px, 400px);
+}
+
+#findbar-close-button {
+  -moz-image-region: rect(0px, 480px, 40px, 440px);
+}
+
+#findbar-close-button:hover:not(:active) {
+  -moz-image-region: rect(40px, 480px, 80px, 440px);
+}
+
+#findbar-close-button:active {
+  -moz-image-region: rect(80px, 480px, 120px, 440px);
+}
+
+/* Contextual appbar ======================================================= */
+
+#contextualactions-tray {
+  background-color: @metro_orange@;
+}
+
+#contextualactions-tray > toolbarbutton {
+  opacity: 1;
+}
+#contextualactions-tray > toolbarbutton[fade] {
+  opacity: 0;
+}
+#contextualactions-tray > toolbarbutton:not([immediate]) {
+  transition-property: opacity;
+  transition-duration: .3s;
+  transition-timing-function: ease-in;
+  transition-delay: 80ms;
+}
+#contextualactions-tray > toolbarbutton > .toolbarbutton-text {
+  color: white;
+}
+
+#pin-selected-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin.png);
+}
+
+#unpin-selected-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin.png);
+}
+
+#hide-selected-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide.png);
+}
+
+#delete-selected-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete.png);
+}
+
+#clear-selected-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear.png);
+}
+
+#restore-selected-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore.png);
+}
+
+@media (min-resolution: @min_res_140pc@) {
+  #pin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.4x.png);
+  }
+
+  #unpin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.4x.png);
+  }
+
+  #hide-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.4x.png);
+  }
+
+  #delete-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.4x.png);
+  }
+
+  #clear-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.4x.png);
+  }
+
+  #restore-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.4x.png);
+  }
+}
+
+@media (min-resolution: @min_res_180pc@) {
+  #pin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.8x.png);
+  }
+
+  #unpin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.8x.png);
+  }
+
+  #hide-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.8x.png);
+  }
+
+  #delete-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.8x.png);
+  }
+
+  #clear-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.8x.png);
+  }
+
+  #restore-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.8x.png);
+  }
+}
+
+/* Download notifications ======================================================= */
+
+.download-filename-text {
+  font-weight: bold;
+}
+.download-host-text {
+  font-weight: bold;
+}
+
+/* Autoscroll popup ======================================================== */
+
+.autoscroller {
+  height: 28px;
+  width: 28px;
+  border: none;
+  margin: -14px;
+  padding: 0;
+  background-image: url("chrome://browser/skin/images/autoscroll.png");
+  background-color: transparent;
+  position: fixed;
+  visibility: hidden;
+  background-repeat: no-repeat;
+  background-origin: padding-box;
+  background-clip: padding-box;
+  background-position: right top;
+  -moz-appearance: none;
+}
+
+.autoscroller[scrolldir="NS"] {
+  background-position: right center;
+}
+
+.autoscroller[scrolldir="EW"] {
+  background-position: right bottom;
+}
+
+/* Flyouts ================================================================= */
+
+/* don't add a margin to the very top settings entry in flyouts */
+flyoutpanel > settings:first-child {
+  margin-top: 0px;
+}
+
+/* Sync flyout pane -------------------------------------------------------- */
+
+#sync-flyoutpanel {
+  font-size: @metro_font_normal@;
+  font-weight: 400;
+}
+
+#sync-flyoutpanel button {
+  font-weight: 700;
+}
+
+#sync-flyoutpanel .syncHeader {
+  font-weight: 600;
+}
+
+#sync-flyoutpanel .syncSecondaryText {
+  font-weight: 100;
+  font-size: @metro_font_snormal@;
+}
+
+#sync-flyoutpanel .syncInstructionText {
+  font-style: italic;
+}
+
+.syncThrobber .progressBall {
+   margin: 2px;
+   width: 22px;
+   height: 22px;
+ }
+
+.syncThrobber .progressBallInner {
+  width: 5px;
+  height: 5px;
+  border-radius: 3px;
+}
+
+#sync-flyoutpanel .syncErrorText {
+  color: red;
+}
+
+#sync-flyoutpanel textbox {
+  margin: @metro_spacing_small@;
+  padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
+  background: @field_background_color@;
+  border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
+  color: @field_foreground_color@;
+}
+
+#sync-setup-throbber {
+  margin-top: 15px;
+  margin-left: 25px;
+}
+
+#sync-connected-device {
+  width: 200px;
+}
+
+#sync-manualsetup-failure {
+  width: 200px;
+}
+
+#sync-flyoutpanel .syncJPAKECode {
+  margin: @metro_spacing_small@;
+  padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
+  background: @field_background_color@;
+  border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
+  color: @field_foreground_color@;
+  display: block !important;
+  font-size: @metro_font_large@ !important;
+  font-weight: 600;
+  letter-spacing: 0.4em;
+  text-align: center;
+  width: 175px;
+}
+
+#sync-connected-device {
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+}
+
+#sync-connected-lastSynced {
+  margin-top: 0px;
+  padding-top: 0px;
+}
+
+#sync-connected-throbber {
+  margin-top: 12px;
+  margin-left: 15px;
+}
+
+/* About flyout pane ------------------------------------------------------- */
+
+/* Colors are defined in /browser/branding/<dir>/content/metro-about.css */
+
+#about-flyoutpanel {
+  background-image: url('chrome://branding/content/metro-about-footer.png');
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: right bottom;
+}
+
+#about-flyoutpanel .text-link {
+  color: inherit;
+}
+
+#about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-header,
+#about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-contents {
+  background-color: inherit;
+  border: none;
+}
+
+#about-policy-label {
+  padding: 1.5em @metro_spacing_large@;
+  margin: 1em -@metro_spacing_large@;
+}
+
+#about-version-label {
+ margin-top: 11pt;
+}
+
+#currentChannel {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+/* Preferences flyout pane ------------------------------------------------- */
+
+/* Lay out each <setting> in a single row */
+setting {
+  min-height: @touch_row@; /* row size */
+  -moz-box-align: center;
+  -moz-box-orient: horizontal;
+}
+
+/* ...except for some exceptions */
+.setting-expanded {
+  -moz-box-align: start;
+  -moz-box-orient: vertical;
+}
+
+setting > vbox {
+  -moz-box-flex: 1;
+}
+
+settings {
+  margin-top: 32px;
+}
+
+.settings-title {
+  font-weight: bold;
+}
+
+/* <setting> elements that are not in a <settings> group get special treatment */
+#prefs-flyoutpanel > setting,
+#sync-flyoutpanel > setting {
+  margin-top: 16px;
+}
+
+#prefs-flyoutpanel > setting .preferences-title {
+  font-weight: bold;
+}
+
+setting[type="integer"] > .preferences-alignment,
+setting[type="string"] > .preferences-alignment {
+  -moz-box-flex: 3;
+}
+
+setting[type="file"] > .preferences-alignment,
+setting[type="directory"] > .preferences-alignment {
+  -moz-box-align: center;
+}
+
+/* Removes the left side title vbox on radio setting */
+setting[type="radio"] > vbox {
+  display: none;
+}
+
+#prefs-homepage-options, #prefs-homepage-popup {
+  min-width: 200px;
+}
+
+.options-box {
+  -moz-margin-start: 28px;  /* sized based on the 32px addon image */
+}
+
+.options-box > setting:last-child {
+  border-bottom: 0;
+}
+
+.preferences-description {
+  font-size: @font_small@ !important;
+  color: grey;
+}
+
+.preferences-description:empty {
+  display: none;
+}
+
+/* Clear private data prefs */
+
+/* hide subitems when other data checkbox is not checked */
+#prefs-privdata-other:not([checked]) + #prefs-privdata-subitems {
+  display: none;
+}
+
+#prefs-privdata-subitems {
+  display: block;
+  padding-left: @metro_spacing_xnormal@;
+  font-size: @metro_font_snormal@;
+}
+
+/* arrange sub-items in two columns */
+.privdata-subitem-item {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0;
+  width: 50%;
+}
+
+#clear-notification {
+  max-height: 25px;
+}
+
+#clearprivacythrobber {
+  max-width: 25px;
+  max-height: 25px;
+}
+
+#clearprivacythrobber .progressContainer {
+  width: 25px;
+  height: 25px;
+}
+
+#clearprivacythrobber .progressBall {
+  margin: 2px;
+  width: 22px;
+  height: 22px;
+}
+
+#clear-notification-done {
+  font-weight: bold;
+}