LCARStrek/browser/browser.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @import url("chrome://global/skin/");
   6 @import url("downloads/indicator.css");
   7
   8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
   9 @namespace html url("http://www.w3.org/1999/xhtml");
  10 @namespace svg url("http://www.w3.org/2000/svg");
  11
  12 toolbar {
  13   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
  14 }
  15
  16 toolbar[customizable="true"] {
  17   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
  18 }
  19
  20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
  21   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
  22   toolbar[customizable="true"]:not([nowindowdrag="true"]) {
  23     -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
  24   }
  25 }
  26
  27 toolbar[type="menubar"][autohide="true"] {
  28   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
  29 }
  30
  31 #toolbar-menubar[autohide="true"] {
  32   -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
  33 }
  34
  35 menubar {
  36   -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
  37 }
  38
  39 :root {
  40   /*--backbutton-urlbar-overlap: 5px;*/
  41
  42   --identity-box-verified-background-color: #000000;
  43
  44   --panel-separator-color: #A09090;
  45
  46   --urlbar-separator-color: #9C9CFF;
  47 }
  48
  49 #menubar-items {
  50   -moz-box-orient: vertical; /* for flex hack */
  51 }
  52
  53 #main-menubar {
  54   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
  55 }
  56
  57 /* ::::: primary toolbar ::::: */
  58
  59 .toolbar-primary > .toolbar-box > .toolbar-holder {
  60   background-color: #A09090;
  61 }
  62
  63 .toolbar-primary > .toolbar-box > .toolbar-startcap,
  64 .toolbar-primary > .toolbar-box > .toolbar-endcap {
  65   background-color: #9C9CFF;
  66 }
  67
  68 /* Hides the titlebar-placeholder underneath the window caption buttons when we
  69    are not autohiding the menubar. */
  70 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
  71   display: none;
  72 }
  73
  74 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
  75    toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
  76    of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
  77 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
  78 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
  79 /*  margin-top: 3px;*/
  80 }
  81
  82 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
  83 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
  84 /*  margin-top: var(--space-above-tabbar);*/
  85 }
  86
  87 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
  88   /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
  89   #toolbar-menubar:not([autohide="true"]) {
  90     -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
  91   }
  92 }
  93
  94 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
  95   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
  96   #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
  97     padding-left: 60px;
  98   }
  99 }
 100
 101 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
 102   /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
 103   display: none;
 104 }
 105
 106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
 107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
 108 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
 109 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
 110   outline-color: #A09090;
 111 }
 112
 113 #navigator-toolbox {
 114 }
 115
 116 #navigator-toolbox::after {
 117   content: "";
 118   display: -moz-box;
 119   -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
 120   height: 1px;
 121 }
 122
 123 #navigator-toolbox > toolbar {
 124 }
 125
 126 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
 127 }
 128
 129 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
 130   overflow: -moz-hidden-unscrollable;
 131   max-height: 4em;
 132   transition: min-height 170ms ease-out, max-height 170ms ease-out;
 133 }
 134
 135 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
 136   min-height: 0.1px;
 137   max-height: 0;
 138   transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
 139 }
 140
 141 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
 142   /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
 143   /* Indent also due to non-applicable aero rule in original Windows theme. */
 144   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
 145   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
 146     /* like menubar */
 147     background-color: #6000CF;
 148     color: #FF9F00;
 149   }
 150
 151   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
 152   #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
 153     background-color: #8050B0;
 154     color: #FF9F00;
 155   }
 156
 157   #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
 158     /*color: inherit;*/
 159   }
 160
 161   #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
 162     visibility: hidden;
 163   }
 164
 165   #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
 166     -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
 167     visibility: visible;
 168   }
 169 }
 170
 171 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 172   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 173   #titlebar-buttonbox > .titlebar-button {
 174     display: none;
 175   }
 176 }
 177
 178 #nav-bar {
 179   /* Position the toolbar above the bottom of background tabs */
 180   position: relative;
 181   z-index: 1;
 182 }
 183
 184 #personal-bookmarks {
 185 /*  min-height: 24px; */
 186 }
 187
 188 #PersonalToolbar > #home-button {
 189   -moz-box-orient: horizontal;
 190 }
 191
 192 #PersonalToolbar > #home-button > .toolbarbutton-text {
 193   display: block;
 194 }
 195
 196 #print-preview-toolbar:not(:-moz-lwtheme) {
 197   /* -moz-appearance: toolbox; */
 198 }
 199
 200 #browser-bottombox:not(:-moz-lwtheme) {
 201 }
 202
 203 /* ::::: titlebar ::::: */
 204
 205 #titlebar {
 206   /* like menubar */
 207   background-color: #6000CF;
 208   color: #FF9F00;
 209 }
 210 #titlebar:-moz-window-inactive {
 211   background-color: #8050B0;
 212   color: #FF9F00;
 213 }
 214
 215 #main-window[sizemode="normal"] > #titlebar {
 216   margin-top: -3px;
 217   margin-bottom: 3px;
 218 }
 219
 220 #main-window[sizemode="maximized"] > #titlebar {
 221   margin-top: 4px;
 222 }
 223
 224 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 225   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 226   #main-window[sizemode="normal"] > #titlebar,
 227   #main-window[sizemode="maximized"] > #titlebar {
 228     margin-top: 19px;
 229     /* There is a margin-bottom set to -23 by code. */
 230   }
 231 }
 232
 233 /* The button box must appear on top of the navigator-toolbox in order for
 234  * click and hover mouse events to work properly for the button in the restored
 235  * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
 236  * can swallow those events. It will also place the buttons above the fog on
 237  * themes with Aero Glass.
 238  */
 239 #titlebar-buttonbox,
 240 #main-window[sizemode="maximized"] #titlebar-buttonbox {
 241   -moz-appearance: none;
 242   margin-top: 6px;
 243   margin-top: 4px;
 244   -moz-margin-end: 3px;
 245   z-index: 1;
 246 }
 247
 248 .titlebar-placeholder[type="appmenu-button"] {
 249   margin-left: 4px;
 250 }
 251
 252 .titlebar-placeholder[type="caption-buttons"] {
 253   margin-left: 10px;
 254 }
 255
 256 /* titlebar command buttons */
 257 #titlebar-min {
 258   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
 259 }
 260
 261 #titlebar-min:hover {
 262   list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
 263 }
 264
 265 #titlebar-max {
 266   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
 267 }
 268
 269 #titlebar-max:hover {
 270   list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
 271 }
 272
 273 #main-window[sizemode="maximized"] #titlebar-max {
 274   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
 275 }
 276
 277 #main-window[sizemode="maximized"] #titlebar-max:hover {
 278   list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
 279 }
 280
 281 #titlebar-close {
 282   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
 283 }
 284
 285 #titlebar-close:hover {
 286   list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
 287 }
 288
 289 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
 290   /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
 291   #titlebar-fullscreen-button {
 292     -moz-appearance: none;
 293     list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
 294     -moz-image-region: rect(0px, 16px, 16px, 0px);
 295   }
 296
 297   #titlebar-fullscreen-button:hover {
 298     -moz-image-region: rect(0px, 32px, 16px, 16px);
 299   }
 300
 301   @media (min-resolution: 2dppx) {
 302     #titlebar-fullscreen-button {
 303       list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
 304       -moz-image-region: rect(0px, 32px, 32px, 0px);
 305     }
 306
 307     #titlebar-fullscreen-button:hover {
 308       -moz-image-region: rect(0px, 64px, 32px, 32px);
 309     }
 310   }
 311 }
 312
 313
 314 /* ::::: bookmark buttons ::::: */
 315
 316 toolbarbutton.bookmark-item:not(.subviewbutton),
 317 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
 318 /*  margin: 0;
 319   padding: 2px 3px;*/
 320 }
 321
 322 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
 323 toolbarbutton.bookmark-item[open="true"] {
 324 /*  padding-top: 3px;
 325   padding-bottom: 1px;
 326   -moz-padding-start: 4px;
 327   -moz-padding-end: 2px;*/
 328 }
 329
 330 .bookmark-item > .toolbarbutton-icon,
 331 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
 332   width: 16px;
 333   height: 16px;
 334   -moz-margin-start: 1px;
 335   -moz-margin-end: 2px;
 336   margin-top: 1px;
 337   margin-bottom: 1px;
 338 }
 339
 340 /* Force the display of the label for bookmarks */
 341 .bookmark-item > .toolbarbutton-text,
 342 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
 343   display: -moz-box !important;
 344 }
 345
 346 .bookmark-item > .toolbarbutton-menu-dropmarker {
 347   display: none;
 348 }
 349
 350 #bookmarks-toolbar-placeholder {
 351   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
 352   -moz-box-orient: horizontal;
 353 }
 354
 355 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
 356 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
 357   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
 358 }
 359
 360 /* ----- BOOKMARK STAR ANIMATION ----- */
 361
 362 @keyframes animation-bookmarkAdded {
 363   from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
 364   60%  { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
 365   80%  { opacity: 1; }
 366   to   { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
 367 }
 368
 369 @keyframes animation-bookmarkPulse {
 370   from { transform: scale(1); }
 371   50%  { transform: scale(1.3); }
 372   to   { transform: scale(1); }
 373 }
 374
 375 #bookmarked-notification-container {
 376   min-height: 1px;
 377   min-width: 1px;
 378   height: 1px;
 379   margin-bottom: -1px;
 380   z-index: 5;
 381   position: relative;
 382 }
 383
 384 #bookmarked-notification {
 385   background-size: 16px;
 386   background-position: center;
 387   background-repeat: no-repeat;
 388   width: 16px;
 389   height: 16px;
 390   opacity: 0;
 391 }
 392
 393 #bookmarked-notification-dropmarker-anchor {
 394   z-index: -1;
 395   position: relative;
 396 }
 397
 398 #bookmarked-notification-dropmarker-icon {
 399   width: 18px;
 400   height: 18px;
 401   visibility: hidden;
 402 }
 403
 404 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
 405   background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
 406   animation: animation-bookmarkAdded 800ms;
 407   animation-timing-function: ease, ease, ease;
 408 }
 409
 410 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 411   list-style-image: none !important;
 412 }
 413
 414 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
 415   visibility: visible;
 416   animation: animation-bookmarkPulse 300ms;
 417   animation-delay: 600ms;
 418   animation-timing-function: ease-out;
 419 }
 420
 421 /* ::::: bookmark menus ::::: */
 422
 423 menu.bookmark-item,
 424 menuitem.bookmark-item {
 425   min-width: 0;
 426   max-width: 32em;
 427 }
 428
 429 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
 430   margin-top: 0;
 431   margin-bottom: 0;
 432 }
 433
 434 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
 435   -moz-padding-start: 0px;
 436 }
 437
 438 /* ::::: bookmark items ::::: */
 439
 440 .bookmark-item  {
 441   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
 442   -moz-image-region: auto;
 443 }
 444
 445 .bookmark-item[container] {
 446   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
 447   -moz-image-region: auto;
 448 }
 449
 450 .bookmark-item[container][open] {
 451   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
 452   -moz-image-region: auto;
 453 }
 454
 455 .bookmark-item[container][livemark] {
 456   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
 457   -moz-image-region: auto;
 458 }
 459
 460 .bookmark-item[container][livemark] .bookmark-item {
 461   list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
 462   -moz-image-region: rect(0px, 16px, 16px, 0px);
 463 }
 464
 465 .bookmark-item[container][livemark] .bookmark-item[visited] {
 466   -moz-image-region: rect(0px, 32px, 16px, 16px);
 467 }
 468
 469 .bookmark-item[container][query] {
 470   list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
 471   -moz-image-region: auto;
 472 }
 473
 474 .bookmark-item[query][tagContainer] {
 475   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
 476   -moz-image-region: auto;
 477 }
 478
 479 .bookmark-item[query][dayContainer] {
 480   list-style-image: url("chrome://communicator/skin/history/calendar.png");
 481   -moz-image-region: auto;
 482 }
 483
 484 .bookmark-item[query][hostContainer] {
 485   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
 486   -moz-image-region: auto;
 487 }
 488
 489 .bookmark-item[query][hostContainer][open] {
 490   list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
 491   -moz-image-region: auto;
 492 }
 493
 494 .bookmark-item[cutting] > .toolbarbutton-icon,
 495 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
 496   opacity: 0.5;
 497 }
 498
 499 .bookmark-item[cutting] > .toolbarbutton-text,
 500 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
 501   opacity: 0.7;
 502 }
 503
 504 /* ::::: primary toolbar buttons ::::: */
 505
 506 /* === BEGIN toolbarbuttons.inc.css === */
 507
 508 /* Whole section of this included file: */
 509 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 510           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 511           #social-share-button, #open-file-button, #find-button, #developer-button,
 512           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 513           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 514           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 515           #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
 516           #pocket-button),
 517 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 518   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
 519 }
 520 toolbar[brighttext] #pocket-button,
 521 #pocket-button {
 522   list-style-image: url("chrome://browser/skin/ToolbarFx.png") !important; /* override pocket.css */
 523 }
 524
 525 #back-button {
 526   -moz-image-region: rect(0, 36px, 18px, 18px);
 527 }
 528
 529 #back-button:hover:not([disabled="true"]) {
 530   -moz-image-region: rect(18px, 36px, 36px, 18px);
 531 }
 532
 533 #back-button[disabled="true"] {
 534   -moz-image-region: rect(36px, 36px, 54px, 18px);
 535 }
 536
 537 #forward-button {
 538   -moz-image-region: rect(0, 72px, 18px, 54px);
 539 }
 540
 541 #forward-button:hover:not([disabled="true"]) {
 542   -moz-image-region: rect(18px, 72px, 36px, 54px);
 543 }
 544
 545 #forward-button[disabled="true"] {
 546   -moz-image-region: rect(36px, 72px, 54px, 54px);
 547 }
 548
 549 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 550 #forward-button:-moz-locale-dir(rtl) {
 551   transform: scaleX(-1);
 552 }
 553
 554 #home-button[cui-areatype="toolbar"] {
 555   -moz-image-region: rect(0, 126px, 18px, 108px);
 556 }
 557
 558 #home-button[cui-areatype="toolbar"]:hover {
 559   -moz-image-region: rect(18px, 126px, 36px, 108px);
 560 }
 561
 562 #bookmarks-menu-button[cui-areatype="toolbar"] {
 563   -moz-image-region: rect(0, 144px, 18px, 126px);
 564 }
 565
 566 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
 567 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
 568   -moz-image-region: rect(18px, 144px, 36px, 126px);
 569 }
 570
 571 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
 572 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
 573   -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
 574   background-color: transparent !important;
 575 }
 576
 577 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
 578   -moz-image-region: rect(0, 162px, 18px, 144px);
 579 }
 580
 581 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
 582 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
 583 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
 584   /* When starred and clicked (for edit/delete dialog),
 585    * then only the menubutton-button itself is open, but not the whole menubutton. */
 586   -moz-image-region: rect(18px, 162px, 36px, 144px);
 587 }
 588
 589 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 590   -moz-image-region: rect(0, 630px, 18px, 612px);
 591 }
 592
 593 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
 594   padding: 1px;
 595   -moz-box-align: center;
 596 }
 597
 598 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
 599 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 600   -moz-image-region: rect(18px, 630px, 36px, 612px);
 601 }
 602
 603 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
 604 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
 605   padding-top: 2px;
 606   padding-bottom: 0px;
 607   -moz-padding-start: 2px;
 608   -moz-padding-end: 0px;
 609 }
 610
 611 #history-panelmenu[cui-areatype="toolbar"] {
 612   -moz-image-region: rect(0, 180px, 18px, 162px);
 613 }
 614
 615 #history-panelmenu[cui-areatype="toolbar"]:hover,
 616 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
 617   -moz-image-region: rect(18px, 180px, 36px, 162px);
 618 }
 619
 620 #downloads-button[cui-areatype="toolbar"] {
 621   -moz-image-region: rect(0, 198px, 18px, 180px);
 622 }
 623
 624 #downloads-button[cui-areatype="toolbar"]:hover,
 625 #downloads-button[cui-areatype="toolbar"][open="true"] {
 626   -moz-image-region: rect(18px, 198px, 36px, 180px);
 627 }
 628
 629 #add-ons-button[cui-areatype="toolbar"] {
 630   -moz-image-region: rect(0, 216px, 18px, 198px);
 631 }
 632
 633 #add-ons-button[cui-areatype="toolbar"]:hover {
 634   -moz-image-region: rect(18px, 216px, 36px, 198px);
 635 }
 636
 637 #open-file-button[cui-areatype="toolbar"] {
 638   -moz-image-region: rect(0, 234px, 18px, 216px);
 639 }
 640
 641 #open-file-button[cui-areatype="toolbar"]:hover {
 642   -moz-image-region: rect(18px, 234px, 36px, 216px);
 643 }
 644
 645 #save-page-button[cui-areatype="toolbar"] {
 646   -moz-image-region: rect(0, 252px, 18px, 234px);
 647 }
 648
 649 #save-page-button[cui-areatype="toolbar"]:hover {
 650   -moz-image-region: rect(18px, 252px, 36px, 234px);
 651 }
 652
 653 #sync-button[cui-areatype="toolbar"] {
 654   -moz-image-region: rect(0, 270px, 18px, 252px);
 655 }
 656
 657 #sync-button[cui-areatype="toolbar"]:hover {
 658   -moz-image-region: rect(18px, 270px, 36px, 252px);
 659 }
 660
 661 #sync-button[cui-areatype="toolbar"][status="active"],
 662 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
 663   list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
 664   -moz-image-region: rect(0, 18px, 18px, 0px);
 665 }
 666
 667 /*
 668 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
 669 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
 670   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
 671 }
 672 */
 673
 674 #feed-button[cui-areatype="toolbar"] {
 675   -moz-image-region: rect(0, 288px, 18px, 270px);
 676 }
 677
 678 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
 679 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
 680   -moz-image-region: rect(18px, 288px, 36px, 270px);
 681 }
 682
 683 #feed-button[cui-areatype="toolbar"][disabled="true"] {
 684   -moz-image-region: rect(36px, 288px, 54px, 270px);
 685 }
 686
 687 #social-share-button[cui-areatype="toolbar"] {
 688   -moz-image-region: rect(0px, 306px, 18px, 288px);
 689 }
 690
 691 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
 692 #social-share-button[cui-areatype="toolbar"][open="true"] {
 693   -moz-image-region: rect(18px, 306px, 36px, 288px);
 694 }
 695
 696 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
 697   -moz-image-region: rect(36px, 306px, 54px, 288px);
 698 }
 699
 700 #characterencoding-button[cui-areatype="toolbar"] {
 701   -moz-image-region: rect(0, 324px, 18px, 306px);
 702 }
 703
 704 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
 705 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
 706   -moz-image-region: rect(18px, 324px, 36px, 306px);
 707 }
 708
 709 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
 710   -moz-image-region: rect(36px, 324px, 54px, 306px);
 711 }
 712
 713 #new-window-button[cui-areatype="toolbar"] {
 714   -moz-image-region: rect(0, 342px, 18px, 324px);
 715 }
 716
 717 #new-window-button[cui-areatype="toolbar"]:hover {
 718   -moz-image-region: rect(18px, 342px, 36px, 324px);
 719 }
 720
 721 #e10s-button[cui-areatype="toolbar"] {
 722   -moz-image-region: rect(0, 342px, 18px, 324px);
 723 }
 724
 725 #e10s-button[cui-areatype="toolbar"]:hover {
 726   -moz-image-region: rect(18px, 342px, 36px, 324px);
 727 }
 728
 729 #e10s-button > .toolbarbutton-icon {
 730   transform: scaleY(-1);
 731 }
 732
 733 #new-tab-button[cui-areatype="toolbar"] {
 734   -moz-image-region: rect(0, 360px, 18px, 342px);
 735 }
 736
 737 #new-tab-button[cui-areatype="toolbar"]:hover {
 738   -moz-image-region: rect(18px, 360px, 36px, 342px);
 739 }
 740
 741 #privatebrowsing-button[cui-areatype="toolbar"] {
 742   -moz-image-region: rect(0, 378px, 18px, 360px);
 743 }
 744
 745 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
 746   -moz-image-region: rect(18px, 378px, 36px, 360px);
 747 }
 748
 749 #find-button[cui-areatype="toolbar"] {
 750   -moz-image-region: rect(0, 396px, 18px, 378px);
 751 }
 752
 753 #find-button[cui-areatype="toolbar"]:hover {
 754   -moz-image-region: rect(18px, 396px, 36px, 378px);
 755 }
 756
 757 #print-button[cui-areatype="toolbar"] {
 758   -moz-image-region: rect(0, 414px, 18px, 396px);
 759 }
 760
 761 #print-button[cui-areatype="toolbar"]:hover {
 762   -moz-image-region: rect(18px, 414px, 36px, 396px);
 763 }
 764
 765 #fullscreen-button[cui-areatype="toolbar"] {
 766   -moz-image-region: rect(0, 432px, 18px, 414px);
 767 }
 768
 769 #fullscreen-button[cui-areatype="toolbar"]:hover {
 770   -moz-image-region: rect(18px, 432px, 36px, 414px);
 771 }
 772
 773 #developer-button[cui-areatype="toolbar"] {
 774   -moz-image-region: rect(0, 450px, 18px, 432px);
 775 }
 776
 777 #developer-button[cui-areatype="toolbar"]:hover,
 778 #developer-button[cui-areatype="toolbar"][open="true"] {
 779   -moz-image-region: rect(18px, 450px, 36px, 432px);
 780 }
 781
 782 #preferences-button[cui-areatype="toolbar"] {
 783   -moz-image-region: rect(0, 468px, 18px, 450px);
 784 }
 785
 786 #preferences-button[cui-areatype="toolbar"]:hover {
 787   -moz-image-region: rect(18px, 468px, 36px, 450px);
 788 }
 789
 790 #PanelUI-menu-button {
 791   -moz-image-region: rect(0, 486px, 18px, 468px);
 792 }
 793
 794 #PanelUI-menu-button:hover,
 795 #PanelUI-menu-button[open="true"] {
 796   -moz-image-region: rect(18px, 486px, 36px, 468px);
 797 }
 798
 799 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
 800   -moz-image-region: rect(0, 504px, 18px, 486px);
 801 }
 802
 803 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
 804   -moz-image-region: rect(18px, 504px, 36px, 486px);
 805 }
 806
 807 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
 808   -moz-image-region: rect(36px, 504px, 54px, 486px);
 809 }
 810
 811 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
 812   -moz-image-region: rect(0, 522px, 18px, 504px);
 813 }
 814
 815 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
 816   -moz-image-region: rect(18px, 522px, 36px, 504px);
 817 }
 818
 819 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
 820   -moz-image-region: rect(36px, 522px, 54px, 504px);
 821 }
 822
 823 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
 824   -moz-image-region: rect(0, 540px, 18px, 522px);
 825 }
 826
 827 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
 828   -moz-image-region: rect(18px, 540px, 36px, 522px);
 829 }
 830
 831 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
 832   -moz-image-region: rect(36px, 540px, 54px, 522px);
 833 }
 834
 835 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
 836   -moz-image-region: rect(0, 558px, 18px, 540px);
 837 }
 838
 839 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
 840   -moz-image-region: rect(18px, 558px, 36px, 540px);
 841 }
 842
 843 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
 844   -moz-image-region: rect(36px, 558px, 54px, 540px);
 845 }
 846
 847 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
 848   -moz-image-region: rect(0, 576px, 18px, 558px);
 849 }
 850
 851 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
 852   -moz-image-region: rect(18px, 576px, 36px, 558px);
 853 }
 854
 855 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
 856   -moz-image-region: rect(36px, 576px, 54px, 558px);
 857 }
 858
 859 #nav-bar-overflow-button {
 860   -moz-image-region: rect(0, 612px, 18px, 594px);
 861 }
 862
 863 #nav-bar-overflow-button:hover,
 864 #nav-bar-overflow-button[open="true"] {
 865   -moz-image-region: rect(18px, 612px, 36px, 594px);
 866 }
 867
 868 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 869   transform: scaleX(-1);
 870 }
 871
 872 #tabview-button {
 873   -moz-image-region: rect(0, 648px, 18px, 630px);
 874 }
 875
 876 #tabview-button:hover {
 877   -moz-image-region: rect(18px, 648px, 36px, 630px);
 878 }
 879
 880 #email-link-button[cui-areatype="toolbar"] {
 881   -moz-image-region: rect(0, 666px, 18px, 648px);
 882 }
 883
 884 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
 885   -moz-image-region: rect(18px, 666px, 36px, 648px);
 886 }
 887
 888 #email-button[cui-areatype="toolbar"][disabled="true"] {
 889   -moz-image-region: rect(36px, 666px, 54px, 648px);
 890 }
 891
 892 #sidebar-button[cui-areatype="toolbar"] {
 893   -moz-image-region: rect(0, 684px, 18px, 666px);
 894 }
 895
 896 #sidebar-button[cui-areatype="toolbar"]:hover {
 897   -moz-image-region: rect(18px, 684px, 36px, 666px);
 898 }
 899
 900 #panic-button[cui-areatype="toolbar"] {
 901   -moz-image-region: rect(0, 702px, 18px, 684px);
 902 }
 903
 904 #panic-button[cui-areatype="toolbar"]:hover,
 905 #panic-button[cui-areatype="toolbar"][open] {
 906   -moz-image-region: rect(18px, 702px, 36px, 684px);
 907 }
 908
 909 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 910   transform: scaleX(-1);
 911 }
 912
 913 #web-apps-button[cui-areatype="toolbar"] {
 914   -moz-image-region: rect(0, 720px, 18px, 702px);
 915 }
 916
 917 #web-apps-button[cui-areatype="toolbar"]:hover {
 918   -moz-image-region: rect(18px, 720px, 36px, 702px);
 919 }
 920
 921 #loop-button,
 922 #loop-button > .toolbarbutton-badge-stack {
 923   list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
 924   -moz-image-region: rect(0, 18px, 18px, 0);
 925 }
 926
 927 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
 928 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
 929   -moz-image-region: rect(0, 90px, 18px, 72px);
 930 }
 931
 932 #loop-button[state="disabled"],
 933 #loop-button[disabled="true"],
 934 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
 935 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
 936   -moz-image-region: rect(0, 36px, 18px, 18px);
 937 }
 938
 939 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
 940 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
 941   -moz-image-region: rect(0, 126px, 18px, 108px);
 942 }
 943
 944 #loop-button:not([disabled="true"])[state="error"],
 945 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
 946   -moz-image-region: rect(0, 54px, 18px, 36px);
 947 }
 948
 949 #loop-button:not([disabled="true"])[state="action"],
 950 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
 951   -moz-image-region: rect(0, 72px, 18px, 54px);
 952 }
 953
 954 #loop-button:not([disabled="true"])[state="active"],
 955 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
 956   -moz-image-region: rect(0, 108px, 18px, 90px);
 957 }
 958
 959 #webide-button[cui-areatype="toolbar"] {
 960   -moz-image-region: rect(0, 738px, 18px, 720px);
 961 }
 962
 963 #webide-button[cui-areatype="toolbar"]:hover {
 964   -moz-image-region: rect(18px, 738px, 36px, 720px);
 965 }
 966
 967 #pocket-button[cui-areatype="toolbar"] {
 968   -moz-image-region: rect(0, 774px, 18px, 756px);
 969 }
 970
 971 #pocket-button[cui-areatype="toolbar"]:hover,
 972 #pocket-button[cui-areatype="toolbar"][open] {
 973   -moz-image-region: rect(18px, 774px, 36px, 756px);
 974 }
 975
 976 /* === END toolbarbuttons.inc.css === */
 977
 978 /* === BEGIN menupanel.inc.css === */
 979
 980 /* Menu panel and palette styles */
 981
 982 :root {
 983    /* avoid aero overrides with changed filenames */
 984   --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
 985   --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
 986 }
 987
 988 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
 989 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 990           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 991           #social-share-button, #open-file-button, #find-button, #developer-button,
 992           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 993           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 994           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 995           #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
 996           #pocket-button)[cui-areatype="menu-panel"],
 997 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 998           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 999           #social-share-button, #open-file-button, #find-button, #developer-button,
1000           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
1001           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
1002           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
1003           #copy-button, #paste-button, #e10s-button, #panic-button, #web-apps-button, #webide-button, #loop-button,
1004                                                 #pocket-button) {
1005   list-style-image: var(--menupanel-list-style-image);
1006 }
1007
1008 #home-button[cui-areatype="menu-panel"],
1009 toolbarpaletteitem[place="palette"] > #home-button {
1010   -moz-image-region: rect(0px, 128px, 32px, 96px);
1011 }
1012
1013 #home-button[cui-areatype="menu-panel"]:hover,
1014 toolbarpaletteitem[place="palette"] > #home-button:hover {
1015   -moz-image-region: rect(32px, 128px, 64px, 96px);
1016 }
1017
1018 #bookmarks-menu-button[cui-areatype="menu-panel"],
1019 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1020   -moz-image-region: rect(0px, 192px, 32px, 160px);
1021 }
1022
1023 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1024 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1025   -moz-image-region: rect(32px, 192px, 64px, 160px);
1026 }
1027
1028 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1029   -moz-image-region: rect(32px, 192px, 64px, 160px);
1030 }
1031
1032 #history-panelmenu[cui-areatype="menu-panel"],
1033 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1034   -moz-image-region: rect(0px, 224px, 32px, 192px);
1035 }
1036
1037 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1038 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1039   -moz-image-region: rect(32px, 224px, 64px, 192px);
1040 }
1041
1042 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1043   -moz-image-region: rect(32px, 224px, 64px, 192px);
1044 }
1045
1046 #downloads-button[cui-areatype="menu-panel"],
1047 toolbarpaletteitem[place="palette"] > #downloads-button {
1048   -moz-image-region: rect(0px, 256px, 32px, 224px);
1049 }
1050
1051 #downloads-button[cui-areatype="menu-panel"]:hover,
1052 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1053   -moz-image-region: rect(32px, 256px, 64px, 224px);
1054 }
1055
1056 #add-ons-button[cui-areatype="menu-panel"],
1057 toolbarpaletteitem[place="palette"] > #add-ons-button {
1058   -moz-image-region: rect(0px, 288px, 32px, 256px);
1059 }
1060
1061 #add-ons-button[cui-areatype="menu-panel"]:hover,
1062 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1063   -moz-image-region: rect(32px, 288px, 64px, 256px);
1064 }
1065
1066 #open-file-button[cui-areatype="menu-panel"],
1067 toolbarpaletteitem[place="palette"] > #open-file-button {
1068   -moz-image-region: rect(0px, 320px, 32px, 288px);
1069 }
1070
1071 #open-file-button[cui-areatype="menu-panel"]:hover,
1072 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1073   -moz-image-region: rect(32px, 320px, 64px, 288px);
1074 }
1075
1076 #save-page-button[cui-areatype="menu-panel"],
1077 toolbarpaletteitem[place="palette"] > #save-page-button {
1078   -moz-image-region: rect(0px, 352px, 32px, 320px);
1079 }
1080
1081 #save-page-button[cui-areatype="menu-panel"]:hover,
1082 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1083   -moz-image-region: rect(32px, 352px, 64px, 320px);
1084 }
1085
1086 #sync-button[cui-areatype="menu-panel"],
1087 toolbarpaletteitem[place="palette"] > #sync-button {
1088   -moz-image-region: rect(0px, 384px, 32px, 352px);
1089 }
1090
1091 #sync-button[cui-areatype="menu-panel"]:hover,
1092 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1093   -moz-image-region: rect(32px, 384px, 64px, 352px);
1094 }
1095
1096 #sync-button[cui-areatype="menu-panel"][status="active"] {
1097   list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1098   -moz-image-region: rect(0px, 32px, 32px, 0px);
1099 }
1100
1101 #feed-button[cui-areatype="menu-panel"],
1102 toolbarpaletteitem[place="palette"] > #feed-button {
1103   -moz-image-region: rect(0px, 416px, 32px, 384px);
1104 }
1105
1106 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1107 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1108   -moz-image-region: rect(32px, 416px, 64px, 384px);
1109 }
1110
1111 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1112 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1113   -moz-image-region: rect(64px, 416px, 96px, 384px);
1114 }
1115
1116 #social-share-button[cui-areatype="menu-panel"],
1117 toolbarpaletteitem[place="palette"] > #social-share-button {
1118   -moz-image-region: rect(0px, 448px, 32px, 416px);
1119 }
1120
1121 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1122 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1123   -moz-image-region: rect(32px, 448px, 64px, 416px);
1124 }
1125
1126 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1127 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1128   -moz-image-region: rect(64px, 448px, 96px, 416px);
1129 }
1130
1131 #characterencoding-button[cui-areatype="menu-panel"],
1132 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1133   -moz-image-region: rect(0px, 480px, 32px, 448px);
1134 }
1135
1136 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1137 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1138   -moz-image-region: rect(32px, 480px, 64px, 448px);
1139 }
1140
1141 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1142 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1143   -moz-image-region: rect(64px, 480px, 96px, 448px);
1144 }
1145
1146 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1147   -moz-image-region: rect(32px, 480px, 64px, 448px);
1148 }
1149
1150 #new-window-button[cui-areatype="menu-panel"],
1151 toolbarpaletteitem[place="palette"] > #new-window-button {
1152   -moz-image-region: rect(0px, 512px, 32px, 480px);
1153 }
1154
1155 #new-window-button[cui-areatype="menu-panel"]:hover,
1156 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1157   -moz-image-region: rect(32px, 512px, 64px, 480px);
1158 }
1159
1160 #e10s-button[cui-areatype="menu-panel"],
1161 toolbarpaletteitem[place="palette"] > #e10s-button {
1162   -moz-image-region: rect(0px, 512px, 32px, 480px);
1163 }
1164
1165 #e10s-button[cui-areatype="menu-panel"]:hover,
1166 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1167   -moz-image-region: rect(32px, 512px, 64px, 480px);
1168 }
1169
1170 #new-tab-button[cui-areatype="menu-panel"],
1171 toolbarpaletteitem[place="palette"] > #new-tab-button {
1172   -moz-image-region: rect(0px, 544px, 32px, 512px);
1173 }
1174
1175 #new-tab-button[cui-areatype="menu-panel"]:hover,
1176 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1177   -moz-image-region: rect(32px, 544px, 64px, 512px);
1178 }
1179
1180 #privatebrowsing-button[cui-areatype="menu-panel"],
1181 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1182   -moz-image-region: rect(0px, 576px, 32px, 544px);
1183 }
1184
1185 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1186 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1187   -moz-image-region: rect(32px, 576px, 64px, 544px);
1188 }
1189
1190 #tabview-button[cui-areatype="menu-panel"],
1191 toolbarpaletteitem[place="palette"] > #tabview-button {
1192   -moz-image-region: rect(0px, 608px, 32px, 576px);
1193 }
1194
1195 #tabview-button[cui-areatype="menu-panel"]:hover,
1196 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1197   -moz-image-region: rect(32px, 608px, 64px, 576px);
1198 }
1199
1200 #find-button[cui-areatype="menu-panel"],
1201 toolbarpaletteitem[place="palette"] > #find-button {
1202   -moz-image-region: rect(0px, 640px, 32px, 608px);
1203 }
1204
1205 #find-button[cui-areatype="menu-panel"]:hover,
1206 toolbarpaletteitem[place="palette"] > #find-button:hover {
1207   -moz-image-region: rect(32px, 640px, 64px, 608px);
1208 }
1209
1210 #print-button[cui-areatype="menu-panel"],
1211 toolbarpaletteitem[place="palette"] > #print-button {
1212   -moz-image-region: rect(0px, 672px, 32px, 640px);
1213 }
1214
1215 #print-button[cui-areatype="menu-panel"]:hover,
1216 toolbarpaletteitem[place="palette"] > #print-button:hover {
1217   -moz-image-region: rect(32px, 672px, 64px, 640px);
1218 }
1219
1220 #fullscreen-button[cui-areatype="menu-panel"],
1221 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1222   -moz-image-region: rect(0px, 704px, 32px, 672px);
1223 }
1224
1225 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1226 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1227   -moz-image-region: rect(32px, 704px, 64px, 672px);
1228 }
1229
1230 #developer-button[cui-areatype="menu-panel"],
1231 toolbarpaletteitem[place="palette"] > #developer-button {
1232   -moz-image-region: rect(0px, 736px, 32px, 704px);
1233 }
1234
1235 #developer-button[cui-areatype="menu-panel"]:hover,
1236 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1237   -moz-image-region: rect(32px, 736px, 64px, 704px);
1238 }
1239
1240 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1241   -moz-image-region: rect(32px, 736px, 64px, 704px);
1242 }
1243
1244 #preferences-button[cui-areatype="menu-panel"],
1245 toolbarpaletteitem[place="palette"] > #preferences-button {
1246   -moz-image-region: rect(0px, 768px, 32px, 736px);
1247 }
1248
1249 #preferences-button[cui-areatype="menu-panel"]:hover,
1250 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1251   -moz-image-region: rect(32px, 768px, 64px, 736px);
1252 }
1253
1254 #email-link-button[cui-areatype="menu-panel"],
1255 toolbarpaletteitem[place="palette"] > #email-link-button {
1256   -moz-image-region: rect(0, 800px, 32px, 768px);
1257 }
1258
1259 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1260 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1261   -moz-image-region: rect(32px, 800px, 64px, 768px);
1262 }
1263
1264 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1265 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1266   -moz-image-region: rect(64px, 800px, 96px, 768px);
1267 }
1268
1269 #sidebar-button[cui-areatype="menu-panel"],
1270 toolbarpaletteitem[place="palette"] > #sidebar-button {
1271   -moz-image-region: rect(0, 864px, 32px, 832px);
1272 }
1273
1274 #sidebar-button[cui-areatype="menu-panel"]:hover,
1275 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1276 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1277   -moz-image-region: rect(32px, 864px, 64px, 832px);
1278 }
1279
1280 #panic-button[cui-areatype="menu-panel"],
1281 toolbarpaletteitem[place="palette"] > #panic-button {
1282   -moz-image-region: rect(0, 896px, 32px, 864px);
1283 }
1284
1285 #panic-button[cui-areatype="menu-panel"]:hover,
1286 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1287 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1288   -moz-image-region: rect(32px, 896px, 64px, 864px);
1289 }
1290
1291 #web-apps-button[cui-areatype="menu-panel"],
1292 toolbarpaletteitem[place="palette"] > #web-apps-button {
1293   -moz-image-region: rect(0, 928px, 32px, 896px);
1294 }
1295
1296 #web-apps-button[cui-areatype="menu-panel"]:hover,
1297 toolbarpaletteitem[place="palette"] > #web-apps-button:hover {
1298   -moz-image-region: rect(32px, 928px, 64px, 896px);
1299 }
1300
1301 #webide-button[cui-areatype="menu-panel"],
1302 toolbarpaletteitem[place="palette"] > #webide-button {
1303   -moz-image-region: rect(0px, 960px, 32px, 928px);
1304 }
1305
1306 #webide-button[cui-areatype="menu-panel"]:hover,
1307 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1308   -moz-image-region: rect(32px, 960px, 64px, 928px);
1309 }
1310
1311 #pocket-button[cui-areatype="menu-panel"],
1312 toolbarpaletteitem[place="palette"] > #pocket-button {
1313   -moz-image-region: rect(0px, 992px, 32px, 960px);
1314 }
1315
1316 #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1317   -moz-image-region: rect(32px, 992px, 64px, 960px);
1318 }
1319
1320 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1321   -moz-image-region: rect(0, 832px, 32px, 800px);
1322 }
1323
1324 #loop-button[cui-areatype="menu-panel"],
1325 toolbarpaletteitem[place="palette"] > #loop-button {
1326   list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1327   -moz-image-region: rect(0, 32px, 32px, 0);
1328 }
1329
1330 /* Make sure that the state icons are not shown in the customization palette. */
1331 toolbarpaletteitem[place="palette"] > #loop-button {
1332   -moz-image-region: rect(0, 32px, 32px, 0) !important;
1333 }
1334
1335 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1336   -moz-image-region: rect(0, 160px, 32px, 128px);
1337 }
1338
1339 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1340 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1341   -moz-image-region: rect(0, 64px, 32px, 32px);
1342 }
1343
1344 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1345   -moz-image-region: rect(0, 224px, 32px, 192px);
1346 }
1347
1348 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1349   -moz-image-region: rect(0, 96px, 32px, 64px);
1350 }
1351
1352 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1353   -moz-image-region: rect(0, 128px, 32px, 96px);
1354 }
1355
1356 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1357   -moz-image-region: rect(0, 192px, 32px, 160px);
1358 }
1359
1360 /* Wide panel control icons */
1361
1362 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1363 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1364 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1365 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1366   list-style-image: var(--menupanel-small-list-style-image);
1367 }
1368
1369 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1370 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1371   -moz-image-region: rect(0px, 32px, 16px, 16px);
1372 }
1373
1374 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1375 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1376   -moz-image-region: rect(16px, 32px, 32px, 16px);
1377 }
1378
1379 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1380 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1381   -moz-image-region: rect(32px, 32px, 48px, 16px);
1382 }
1383
1384 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1385 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1386   -moz-image-region: rect(0px, 48px, 16px, 32px);
1387 }
1388
1389 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1390 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1391   -moz-image-region: rect(16px, 48px, 32px, 32px);
1392 }
1393
1394 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1395 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1396   -moz-image-region: rect(32px, 48px, 48px, 32px);
1397 }
1398
1399 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1400 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1401   -moz-image-region: rect(0px, 64px, 16px, 48px);
1402 }
1403
1404 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1405 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1406   -moz-image-region: rect(16px, 64px, 32px, 48px);
1407 }
1408
1409 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1410 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1411   -moz-image-region: rect(32px, 64px, 48px, 48px);
1412 }
1413
1414 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1415 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1416   -moz-image-region: rect(0px, 80px, 16px, 64px);
1417 }
1418
1419 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1420 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1421   -moz-image-region: rect(16px, 80px, 32px, 64px);
1422 }
1423
1424 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1425 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1426   -moz-image-region: rect(32px, 80px, 48px, 64px);
1427 }
1428
1429 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1430 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1431   -moz-image-region: rect(0px, 96px, 16px, 80px);
1432 }
1433
1434 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1435 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1436   -moz-image-region: rect(16px, 96px, 32px, 80px);
1437 }
1438
1439 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1440 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1441   -moz-image-region: rect(32px, 96px, 48px, 80px);
1442 }
1443
1444 #add-share-provider {
1445   list-style-image: var(--menupanel-small-list-style-image);
1446   -moz-image-region: rect(0px, 96px, 16px, 80px);
1447 }
1448
1449 /* === END menupanel.inc.css === */
1450
1451 .toolbarbutton-1:not([type="menu-button"]) {
1452   -moz-box-orient: vertical;
1453 }
1454
1455 .toolbarbutton-1,
1456 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1457 /*  min-width: 36px;
1458   min-height: 36px;*/
1459 }
1460
1461 .toolbarbutton-1,
1462 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1463 .toolbarbutton-1[disabled="true"]:hover:active,
1464 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1465   padding: 1px 2px;
1466 }
1467
1468 .toolbarbutton-1:hover:active,
1469 .toolbarbutton-1[open="true"],
1470 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1471   padding-top: 2px;
1472   padding-bottom: 0px;
1473   -moz-padding-start: 3px;
1474   -moz-padding-end: 1px;
1475 }
1476
1477 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1478 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1479 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1480 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1481 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1482 }
1483
1484 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1485 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1486 }
1487
1488 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1489 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1490 }
1491
1492 .toolbarbutton-1 > .toolbarbutton-icon,
1493 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1494 }
1495
1496 .findbar-button,
1497 #nav-bar .toolbarbutton-1,
1498 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1499 }
1500
1501 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1502 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1503 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1504 }
1505
1506 #nav-bar #PanelUI-menu-button {
1507 /*  -moz-padding-start: 7px;
1508   -moz-padding-end: 5px;*/
1509 }
1510
1511 #nav-bar .toolbarbutton-1[type=panel],
1512 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1513 /*  padding-left: 5px;
1514   padding-right: 5px;*/
1515 }
1516
1517 #nav-bar .toolbarbutton-1 > menupopup {
1518 /*  margin-top: -3px;*/
1519 }
1520
1521 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1522   margin-top: -4px;
1523 }
1524
1525 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1526 /*  -moz-padding-end: 0;*/
1527 }
1528
1529 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1530 /*  -moz-padding-start: 0;
1531   -moz-box-align: center;*/
1532 }
1533
1534 .findbar-button > .toolbarbutton-text,
1535 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1536 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1537 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1538 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1539 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1540 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1541 /*  padding: 2px 6px;
1542   border: 1px solid;
1543   border-color: transparent;
1544   transition-property: background-color, border-color;
1545   transition-duration: 150ms;*/
1546 }
1547 /*
1548 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1549 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1550 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1551   padding: 3px 7px;
1552 }
1553 */
1554
1555 /* Help SDK icons fit: */
1556 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1557 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1558   width: 16px;
1559 }
1560
1561 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1562   /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1563   width: 32px;
1564 }
1565
1566 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1567 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1568 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1569 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1570 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1571 /*  -moz-padding-end: 17px;*/
1572 }
1573
1574 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1575 }
1576
1577 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1578 }
1579
1580 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1581 }
1582
1583 #nav-bar .toolbaritem-combined-buttons {
1584 /*  margin-left: 2px;
1585   margin-right: 2px;*/
1586 }
1587
1588 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1589 /*  padding-left: 0;
1590   padding-right: 0;*/
1591 }
1592
1593 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1594 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1595 /*
1596   content: "";
1597   display: -moz-box;
1598   width: 1px;
1599   height: 16px;
1600   -moz-margin-end: -1px;
1601 */
1602 }
1603
1604 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1605 }
1606
1607 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1608 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1609 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1610 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1611 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1612 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1613 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1614 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1615 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1616 }
1617
1618 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1619 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1620 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1621 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1622 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1623 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1624 }
1625
1626 #TabsToolbar .toolbarbutton-1,
1627 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1628 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1629 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1630 }
1631
1632 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1633 #TabsToolbar .toolbarbutton-1[open],
1634 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1635 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1636 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1637 }
1638
1639 /* unified back/forward button */
1640
1641 #forward-button {
1642   -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1643 }
1644
1645 #forward-button > menupopup {
1646   margin-top: 1px !important;
1647 }
1648
1649 #forward-button > .toolbarbutton-icon {
1650   background-clip: padding-box !important;
1651   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1652   /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1653 }
1654
1655 #forward-button {
1656   -moz-margin-start: -4px !important;
1657   padding-left: 5px;
1658   padding-right: 5px;
1659   margin-top: 3px;
1660   margin-bottom: 3px;
1661   border-radius: 0 10000px 10000px 0;
1662 }
1663
1664 #forward-button:-moz-locale-dir(rtl) {
1665   border-radius: 10000px 0 0 10000px;
1666 }
1667
1668 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1669   transition: margin-left 150ms ease-out;
1670 }
1671
1672 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1673   margin-left: -27px !important;
1674 }
1675
1676 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1677   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1678   transition-delay: 100s;
1679 }
1680
1681 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1682   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1683   margin-left: -27.01px !important;
1684 }
1685
1686 #back-button {
1687 /*  padding-top: 3px !important;
1688   padding-bottom: 3px !important;
1689   -moz-padding-start: 5px !important;
1690   -moz-padding-end: 0 !important;*/
1691   position: relative;
1692   z-index: 1;
1693   border-radius: 10000px;
1694   width: 30px;
1695   height: 30px;
1696   margin-top: -2px;
1697   margin-bottom: -2px;
1698 }
1699
1700 #back-button:-moz-locale-dir(rtl) {
1701 }
1702
1703 #back-button > menupopup {
1704   margin-top: -1px !important;
1705 }
1706
1707 #back-button > .toolbarbutton-icon {
1708   border-radius: 10000px !important;
1709   background-clip: padding-box !important;
1710 /*  background-color: hsla(210,25%,98%,.08) !important;
1711   padding: 6px !important;
1712   border-style: none !important;
1713   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1714               0 0 0 1px hsla(210,4%,10%,.25);*/
1715   transition-property: background-color, box-shadow !important;
1716   transition-duration: 250ms !important;
1717 }
1718
1719 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1720 /*  background-color: hsla(210,4%,10%,.08) !important;*/
1721 }
1722
1723 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1724 #back-button[open="true"] > .toolbarbutton-icon {
1725 /*  background-color: hsla(210,4%,10%,.12) !important;
1726   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1727               0 0 0 1px hsla(210,4%,10%,.25),
1728               0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1729 }
1730
1731 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1732   transform: scaleX(-1);
1733 }
1734 /*
1735 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1736 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1737   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1738 }
1739
1740 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1741 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1742   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1743 }
1744
1745 #home-button.bookmark-item {
1746   list-style-image: url("chrome://browser/skin/Toolbar.png");
1747 }
1748
1749 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1750 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1751 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1752 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1753 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1754 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1755 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1756   position: relative;
1757   z-index: 1;
1758   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1759 }
1760
1761 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1762 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1763   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1764 }
1765 */
1766
1767 #downloads-button > .toolbarbutton-icon {
1768   margin: 0;
1769 }
1770
1771 /* tabview menu item */
1772
1773 #menu_tabview {
1774   list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1775   -moz-image-region: rect(1px, 89px, 17px, 73px);
1776 }
1777
1778 #menu_tabview[groups="0"] {
1779   -moz-image-region: rect(1px, 17px, 17px, 1px);
1780 }
1781
1782 #menu_tabview[groups="1"] {
1783   -moz-image-region: rect(1px, 35px, 17px, 19px);
1784 }
1785
1786 #menu_tabview[groups="2"] {
1787   -moz-image-region: rect(1px, 53px, 17px, 37px);
1788 }
1789
1790 #menu_tabview[groups="3"] {
1791   -moz-image-region: rect(1px, 71px, 17px, 55px);
1792 }
1793
1794 /* undo close tab menu item */
1795 #alltabs_undoCloseTab {
1796   list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1797 }
1798
1799 @media (min-resolution: 1.1dppx) {
1800   #alltabs_undoCloseTab {
1801     list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1802   }
1803   #alltabs_undoCloseTab > .toolbarbutton-icon {
1804     width: 16px;
1805   }
1806 }
1807
1808 /* zoom control text (reset) button special case: */
1809
1810 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1811   /* To make this line up with the icons, it needs the same height (18px) +
1812    * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1813    * increase in text sizes would break things...
1814    */
1815   min-height: 20px;
1816 }
1817
1818 /* ::::: fullscreen window controls ::::: */
1819
1820 #window-controls {
1821   -moz-margin-start: 4px;
1822 }
1823
1824 #minimize-button,
1825 #restore-button,
1826 #close-button {
1827 /*  list-style-image: url("chrome://global/skin/icons/windowControls.png");
1828   padding: 0; */
1829 }
1830
1831 #minimize-button {
1832   list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1833 }
1834
1835 #minimize-button:hover {
1836   list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1837 }
1838
1839 #restore-button {
1840   list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1841 }
1842
1843 #restore-button:hover {
1844   list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1845 }
1846
1847 #close-button {
1848   list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1849 }
1850
1851 #close-button:hover {
1852   list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1853 }
1854
1855 /* ::::: Location Bar ::::: */
1856
1857 #urlbar,
1858 .searchbar-textbox {
1859   border-radius: 5px;
1860   margin: 2px 0;
1861   -moz-margin-start: 3px;
1862 }
1863
1864 #urlbar {
1865   /* make color as light as possible to deal with dark non-domain parts */
1866   color: #FFBFFF;
1867 }
1868
1869 /* overlap the urlbar's border */
1870 #PopupAutoCompleteRichResult {
1871   margin-top: -1px;
1872 }
1873
1874 #urlbar:-moz-lwtheme,
1875 .searchbar-textbox:-moz-lwtheme {
1876   /* background-color: rgba(255,255,255,.8);
1877   @navbarTextboxCustomBorder@
1878   color: black; */
1879 }
1880
1881 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1882 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1883 /*  background-color: rgba(255,255,255,.9);*/
1884 }
1885
1886 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1887 .searchbar-textbox:-moz-lwtheme[focused] {
1888 /*  background-color: white;*/
1889 }
1890
1891 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1892 /*  -moz-border-start: none;
1893   margin-left: 0;*/
1894 }
1895
1896 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1897 /*  border-top-left-radius: 0;
1898   border-bottom-left-radius: 0; */
1899 }
1900
1901 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1902 /*  border-top-right-radius: 0;
1903   border-bottom-right-radius: 0; */
1904 }
1905
1906 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1907 /*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1908 /*  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1909 }
1910
1911 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1912 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1913   /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1914   transform: scaleX(-1);
1915 }
1916
1917 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1918   -moz-box-direction: reverse;
1919 }
1920
1921 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1922 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1923   color: #E7ADE7;
1924 }
1925
1926 #urlbar-container {
1927   -moz-box-orient: horizontal;
1928   -moz-box-align: stretch;
1929 }
1930
1931 .urlbar-textbox-container {
1932   -moz-box-align: stretch;
1933 }
1934
1935 .urlbar-input-box {
1936   -moz-margin-start: 0;
1937 }
1938
1939 #urlbar-icons {
1940   -moz-box-align: center;
1941 }
1942
1943 .urlbar-icon {
1944   padding: 0 2px;
1945 }
1946
1947 .search-go-container {
1948   padding: 2px;
1949 }
1950
1951 .search-go-container > .search-go-button {
1952   padding: 0;
1953 }
1954
1955 #urlbar-search-footer {
1956   border-top: 1px solid #A09090;
1957 }
1958
1959 #urlbar-search-settings {
1960 }
1961
1962 #urlbar-search-settings:hover {
1963 }
1964
1965 #urlbar-search-settings:hover:active {
1966 }
1967
1968 #urlbar-search-splitter {
1969   min-width: 6px;
1970   -moz-margin-start: -3px;
1971   border: none;
1972   background: transparent;
1973 }
1974
1975 #urlbar-search-splitter + #urlbar-container > #urlbar,
1976 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1977   -moz-margin-start: 0;
1978 }
1979
1980 #urlbar-display-box {
1981 }
1982
1983 .urlbar-display {
1984   -moz-border-end: 1px solid #9C9CFF;
1985   -moz-margin-end: 3px;
1986   margin-top: 0;
1987   margin-bottom: 0;
1988   -moz-margin-start: 0;
1989   color: #8050B0;
1990 }
1991
1992 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1993
1994 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1995   border-bottom: 1px solid #A09090;
1996   background-color: #000000;
1997   padding: 6px 0;
1998   -moz-padding-start: 44px;
1999   -moz-padding-end: 6px;
2000   background-image: url("chrome://browser/skin/info.svg");
2001   background-clip: padding-box;
2002   background-position: 20px center;
2003   background-repeat: no-repeat;
2004   background-size: 16px 16px;
2005 }
2006
2007 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
2008   background-position: right 20px center;
2009 }
2010
2011 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2012   margin: 0;
2013   padding: 0;
2014 }
2015
2016 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2017   -moz-margin-start: 0;
2018 }
2019
2020 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2021   -moz-appearance: none;
2022   min-width: 80px;
2023   border-radius: 3px;
2024   padding: 4px 16px;
2025   margin: 0;
2026   -moz-margin-start: 10px;
2027 }
2028
2029 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2030 }
2031
2032 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2033 }
2034
2035 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2036 }
2037
2038 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2039 }
2040
2041 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2042
2043 #search-container {
2044   min-width: calc(54px + 11ch);
2045 }
2046
2047 /* identity box */
2048
2049 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2050   var(--identity-box-verified-background-color);
2051 }
2052
2053 #identity-box:-moz-focusring {
2054   outline: 1px dotted #008484;
2055   outline-offset: -1px;
2056 }
2057
2058 #identity-box.verifiedDomain:-moz-focusring,
2059 #identity-box.verifiedIdentity:-moz-focusring {
2060   outline-color: #000000;
2061 }
2062
2063 /* Location bar dropmarker */
2064
2065 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2066   background-color: transparent;
2067 }
2068
2069 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2070 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2071 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2072   border: none;
2073   border-radius: 0px;
2074   transition: opacity 0.15s ease;
2075 }
2076
2077 #navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2078   opacity: 0;
2079 }
2080
2081 .urlbar-history-dropmarker:hover {
2082 }
2083
2084 .urlbar-history-dropmarker:hover:active,
2085 .urlbar-history-dropmarker[open="true"] {
2086 }
2087
2088 /* page proxy icon */
2089
2090 /* === BEGIN identity-block.inc.css === */
2091
2092 #identity-box {
2093   --identity-box-verified-color: #008484;
2094   /* Default theme does different color per channel, we can't as they do it build-time. */
2095   --identity-box-chrome-color: #9C9CFF;
2096
2097   border-inline-end: 1px solid --urlbar-separator-color);
2098   font-size: .9em;
2099   border-radius: 2px;
2100   padding: 3px 5px;
2101   margin-inline-end: 4px;
2102   overflow: hidden;
2103   /* The latter two properties have a transition to handle the delayed hiding of
2104      the forward button when hovered. */
2105   transition: background-color 150ms ease, padding-left, padding-right;
2106 }
2107
2108 #identity-box:-moz-locale-dir(ltr) {
2109   border-top-right-radius: 0;
2110   border-bottom-right-radius: 0;
2111 }
2112
2113 #identity-box:-moz-locale-dir(rtl) {
2114   border-top-left-radius: 0;
2115   border-bottom-left-radius: 0;
2116 }
2117
2118 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2119   color: var(--identity-box-chrome-color);
2120   -moz-border-end: 1px solid var(--identity-box-chrome-color);
2121 }
2122
2123 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2124   color: var(--identity-box-verified-color);
2125   -moz-border-end: 1px solid var(--identity-box-verified-color);
2126 }
2127
2128 #notification-popup-box:not([hidden]) + #identity-box {
2129   padding-inline-start: 10px !important;
2130   border-radius: 0;
2131 }
2132
2133 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2134 /*   border-radius: 0; */
2135   -moz-padding-start: 2px;
2136   -moz-padding-end: 2px;
2137   -moz-margin-end: 1px;
2138 }
2139
2140 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2141     #notification-popup-box[hidden] + #identity-box {
2142   padding-inline-start: 2px;
2143 }
2144
2145 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2146     #notification-popup-box[hidden] + #identity-box {
2147   /* Forward button hiding is delayed when hovered, so we should use the same
2148      delay for the identity box. We handle both horizontal paddings (for LTR and
2149      RTL), the latter two delays here are for padding-left and padding-right. */
2150   transition-delay: 0s, 100s, 100s;
2151 }
2152
2153 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2154     #notification-popup-box[hidden] + #identity-box {
2155   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2156   padding-inline-start: 2.01px;
2157 }
2158
2159 /* TRACKING PROTECTION ICON */
2160
2161 #tracking-protection-icon {
2162   width: 16px;
2163   height: 16px;
2164   margin-inline-start: 0;
2165   list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
2166   opacity: 1;
2167 }
2168
2169 #tracking-protection-icon[state="loaded-tracking-content"] {
2170   list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2171 }
2172
2173 #tracking-protection-icon[animate] {
2174   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2175 }
2176
2177 #tracking-protection-icon:not([state]) {
2178   margin-inline-start: -18px;
2179   pointer-events: none;
2180   opacity: 0;
2181   /* Only animate the shield in, when it disappears hide it immediately. */
2182   transition: none;
2183 }
2184
2185 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2186   visibility: collapse;
2187 }
2188
2189 /* MAIN IDENTITY ICON */
2190
2191 #page-proxy-favicon {
2192   width: 16px;
2193   height: 16px;
2194   list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
2195   margin: 2px;
2196 }
2197
2198 .chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2199   list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
2200 }
2201
2202 .verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2203 .verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2204   list-style-image: url("chrome://browser/skin/identity-secure.svg");
2205 }
2206
2207 .mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2208   list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
2209 }
2210
2211 .weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2212 .mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2213 .mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2214   list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
2215 }
2216
2217 .mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2218   list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
2219 }
2220
2221 #page-proxy-favicon[pageproxystate="invalid"] {
2222   opacity: 0.3;
2223 }
2224
2225 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2226   list-style-image: url("chrome://branding/content/icon64.png");
2227 }
2228
2229 #identity-popup-brandName {
2230   font-weight: bold;
2231   font-size: 1.25em;
2232   margin-top: .5em;
2233   margin-bottom: .5em;
2234 }
2235
2236 #identity-popup-content-box {
2237   max-width: 50ch;
2238 }
2239
2240 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
2241   -moz-image-region: inherit;
2242   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2243   width: 16px;
2244   height: 16px;
2245   opacity: 1;
2246 }
2247
2248 /* MAIN IDENTITY ICON */
2249
2250 #identity-icon {
2251   width: 16px;
2252   height: 16px;
2253   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2254 }
2255
2256 #identity-box:hover > #identity-icon,
2257 #identity-box[open=true] > #identity-icon {
2258   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2259 }
2260
2261 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2262   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2263 }
2264
2265 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2266   opacity: 0.3;
2267 }
2268
2269 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2270   -moz-image-region: inherit;
2271   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2272   width: 16px;
2273   height: 16px;
2274   opacity: 1;
2275 }
2276
2277 /* TRACKING PROTECTION ICON */
2278
2279 #tracking-protection-icon {
2280   width: 16px;
2281   height: 16px;
2282   margin-inline-start: 2px;
2283   margin-inline-end: 0;
2284   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2285   opacity: 1;
2286 }
2287
2288 #tracking-protection-icon[state="loaded-tracking-content"] {
2289   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2290 }
2291
2292 #tracking-protection-icon[animate] {
2293   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2294 }
2295
2296 #tracking-protection-icon:not([state]) {
2297   margin-inline-end: -18px;
2298   pointer-events: none;
2299   opacity: 0;
2300   /* Only animate the shield in, when it disappears hide it immediately. */
2301   transition: none;
2302 }
2303
2304 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2305   visibility: collapse;
2306 }
2307
2308 /* CONNECTION ICON */
2309
2310 #connection-icon {
2311   width: 16px;
2312   height: 16px;
2313   margin-inline-start: 2px;
2314   visibility: collapse;
2315 }
2316
2317 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2318 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2319   list-style-image: url(chrome://browser/skin/identity-secure.svg);
2320   visibility: visible;
2321 }
2322
2323 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2324 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2325   list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2326   visibility: visible;
2327 }
2328
2329 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2330 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2331 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2332   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2333   visibility: visible;
2334 }
2335
2336 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2337   list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2338   visibility: visible;
2339 }
2340
2341 /* === END identity-block.inc.css === */
2342
2343 #page-proxy-favicon {
2344   -moz-image-region: rect(0, 16px, 16px, 0);
2345 }
2346
2347 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2348 /*  -moz-margin-end: 1px;*/
2349 }
2350
2351 #identity-box:hover > #page-proxy-favicon {
2352   -moz-image-region: rect(0, 32px, 16px, 16px);
2353 }
2354
2355 #identity-box:hover:active > #page-proxy-favicon,
2356 #identity-box[open=true] > #page-proxy-favicon {
2357   -moz-image-region: rect(0, 48px, 16px, 32px);
2358 }
2359
2360 #identity-box:hover {
2361   background-color: #FFCF00;
2362   color: #000000;
2363 }
2364
2365 #identity-box:hover:active,
2366 #identity-box[open=true] {
2367   background-color: #FF9F00;
2368   color: #000000;
2369 }
2370
2371 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2372 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2373 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2374   background-color: #9C9CFF;
2375   color: #000000;
2376 }
2377
2378 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2379 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2380 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2381   background-color: #008484;
2382   color: #000000;
2383 }
2384
2385 /* autocomplete */
2386
2387 #treecolAutoCompleteImage {
2388   max-width: 36px;
2389 }
2390
2391 .ac-result-type-bookmark,
2392 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2393   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2394   -moz-image-region: rect(0px 16px 16px 0px);
2395   width: 16px;
2396   height: 16px;
2397 }
2398
2399 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2400 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2401 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2402 }
2403
2404 .ac-result-type-keyword,
2405 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2406 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2407   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2408   width: 16px;
2409   height: 16px;
2410 }
2411
2412   .ac-result-type-keyword[selected="true"],
2413   .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2414   richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2415     list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2416   }
2417
2418 .ac-result-type-tag,
2419 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2420   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2421   width: 16px;
2422   height: 16px;
2423 }
2424
2425 .ac-comment,
2426 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2427 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2428   font-size: 1.05em;
2429 }
2430
2431 .ac-extra > .ac-comment,
2432 .ac-url-text,
2433 .ac-action-text {
2434   font-size: 1em;
2435 }
2436
2437 .ac-url-text,
2438 .ac-action-text {
2439   color: #9C9CFF;
2440 }
2441
2442 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2443   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2444   -moz-image-region: rect(0, 16px, 16px, 0);
2445   padding: 0 3px;
2446   width: 22px;
2447   height: 16px;
2448 }
2449
2450 @media (min-resolution: 1.1dppx) {
2451   richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2452     list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2453     -moz-image-region: rect(0, 32px, 32px, 0);
2454   }
2455 }
2456
2457 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2458   -moz-image-region: rect(16px, 16px, 32px, 0);
2459 }
2460
2461 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2462   color: #8050B0;
2463 }
2464
2465 .ac-comment[selected="true"],
2466 .ac-url-text[selected="true"],
2467 .ac-action-text[selected="true"] {
2468   color: inherit !important;
2469 }
2470
2471 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2472 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2473 {
2474   color: #8050B0;
2475   font-size: smaller;
2476 }
2477
2478 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2479   border-top: 1px solid #9C9CFF;
2480 }
2481
2482 /* combined go/reload/stop button in location bar */
2483
2484 #urlbar-go-button,
2485 #urlbar-reload-button,
2486 #urlbar-stop-button {
2487   border-style: none;
2488   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2489 /*  padding: 0 9px;*/
2490   margin-inline-start: 0px;
2491   border-inline-start: 1px solid var(--urlbar-separator-color);
2492   border-image: linear-gradient(transparent 15%,
2493                                 var(--urlbar-separator-color) 15%,
2494                                 var(--urlbar-separator-color) 85%,
2495                                 transparent 85%);
2496   border-image-slice: 1;
2497 }
2498
2499 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2500   border-top-left-radius: 0px;
2501   border-bottom-left-radius: 0px;
2502 }
2503
2504 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2505   border-top-right-radius: 0px;
2506   border-bottom-right-radius: 0px;
2507 }
2508
2509 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2510 #urlbar-reload-button:not(:hover) {
2511   -moz-border-start-style: none;
2512   -moz-padding-start: 3px;
2513 }
2514
2515 #urlbar-reload-button {
2516   -moz-image-region: rect(0px, 14px, 14px, 0px);
2517 }
2518
2519 #urlbar-reload-button[disabled=true] {
2520   -moz-image-region: rect(28px, 14px, 42px, 0px);
2521 }
2522
2523 #urlbar-reload-button:not([disabled=true]):hover {
2524   -moz-image-region: rect(14px, 14px, 28px, 0px);
2525 }
2526
2527 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2528   transform: scaleX(-1);
2529 }
2530
2531 #urlbar-go-button {
2532   -moz-image-region: rect(0, 42px, 14px, 28px);
2533 }
2534
2535 #urlbar-go-button:hover {
2536   -moz-image-region: rect(14px, 42px, 28px, 28px);
2537 }
2538
2539 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2540   transform: scaleX(-1);
2541 }
2542
2543 #urlbar-stop-button {
2544   -moz-image-region: rect(0px, 28px, 14px, 14px);
2545 }
2546
2547 #urlbar-stop-button:hover {
2548   -moz-image-region: rect(14px, 28px, 28px, 14px);
2549 }
2550
2551 @media (min-resolution: 1.1dppx) {
2552   #urlbar-go-button,
2553   #urlbar-reload-button,
2554   #urlbar-stop-button {
2555     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2556   }
2557
2558   #urlbar-go-button > .toolbarbutton-icon,
2559   #urlbar-reload-button > .toolbarbutton-icon,
2560   #urlbar-stop-button > .toolbarbutton-icon {
2561     width: 14px;
2562   }
2563
2564   #urlbar-go-button {
2565     -moz-image-region: rect(0, 84px, 28px, 56px);
2566   }
2567
2568   #urlbar-go-button:hover {
2569     -moz-image-region: rect(28px, 84px, 56px, 56px);
2570   }
2571
2572   #urlbar-go-button:hover:active {
2573     -moz-image-region: rect(56px, 84px, 84px, 56px);
2574   }
2575
2576   #urlbar-reload-button {
2577     -moz-image-region: rect(0, 28px, 28px, 0);
2578   }
2579
2580   #urlbar-reload-button:not([disabled]):hover {
2581     -moz-image-region: rect(28px, 28px, 56px, 0);
2582   }
2583
2584   #urlbar-reload-button:not([disabled]):hover:active {
2585     -moz-image-region: rect(56px, 28px, 84px, 0);
2586   }
2587
2588   #urlbar-stop-button {
2589     -moz-image-region: rect(0, 56px, 28px, 28px);
2590   }
2591
2592   #urlbar-stop-button:not([disabled]):hover {
2593     -moz-image-region: rect(28px, 56px, 56px, 28px);
2594   }
2595
2596   #urlbar-stop-button:hover:active {
2597     -moz-image-region: rect(56px, 56px, 84px, 28px);
2598   }
2599 }
2600
2601 /* popup blocker button */
2602
2603 #page-report-button {
2604   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2605   -moz-image-region: rect(0, 16px, 16px, 0);
2606 }
2607
2608 #page-report-button:hover ,
2609 #page-report-button:hover:active,
2610 #page-report-button[open="true"] {
2611   -moz-image-region: rect(0, 32px, 16px, 16px);
2612 }
2613
2614 /* Reader mode button */
2615
2616 #reader-mode-button {
2617   list-style-image: url("chrome://browser/skin/readerMode.svg");
2618   -moz-image-region: rect(0, 16px, 16px, 0);
2619 }
2620
2621 #reader-mode-button:hover,
2622 #reader-mode-button[readeractive]:hover {
2623   -moz-image-region: rect(0, 32px, 16px, 16px);
2624 }
2625
2626 #reader-mode-button:hover:active,
2627 #reader-mode-button[readeractive] {
2628   -moz-image-region: rect(0, 48px, 16px, 32px);
2629 }
2630
2631 /* social share panel */
2632
2633 .social-share-frame {
2634   min-width: 756px;
2635   height: 150px;
2636 }
2637
2638 #share-container {
2639   min-width: 756px;
2640   background-color: white;
2641   background-repeat: no-repeat;
2642   background-position: center center;
2643 }
2644 #share-container[loading] {
2645   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2646 }
2647 #share-container > browser {
2648   transition: opacity 150ms ease-in-out;
2649   opacity: 1;
2650 }
2651 #share-container[loading] > browser {
2652   opacity: 0;
2653 }
2654
2655 .social-share-toolbar {
2656   border-bottom: 1px solid #9C9CFF;
2657   padding: 2px;
2658 }
2659
2660 #social-share-provider-buttons {
2661   padding: 0;
2662   margin: 0;
2663 }
2664
2665 .share-provider-button {
2666   padding: 5px;
2667   margin: 2px;
2668 }
2669
2670 .share-provider-button > .toolbarbutton-text {
2671   display: none;
2672 }
2673 .share-provider-button > .toolbarbutton-icon {
2674   width: 16px;
2675   min-height: 16px;
2676   max-height: 16px;
2677 }
2678
2679 /* fixup corners for share panel */
2680 .social-panel > .social-panel-frame {
2681   border-radius: inherit;
2682 }
2683
2684 #social-share-panel {
2685   min-height: 100px;
2686   min-width: 766px;
2687 }
2688
2689 #share-container,
2690 .social-share-frame {
2691   border-top-left-radius: 0;
2692   border-bottom-left-radius: inherit;
2693   border-top-right-radius: 0;
2694   border-bottom-right-radius: inherit;
2695 }
2696
2697 #social-share-panel > .social-share-toolbar {
2698   border-top-left-radius: inherit;
2699   border-top-right-radius: inherit;
2700 }
2701
2702 #social-share-provider-buttons {
2703   border-top-left-radius: inherit;
2704   border-top-right-radius: inherit;
2705 }
2706
2707 /* social recommending panel */
2708
2709 #social-mark-button {
2710   -moz-image-region: rect(0, 16px, 16px, 0);
2711 }
2712
2713 /* bookmarks menu-button */
2714
2715 #bookmarks-menu-button.bookmark-item {
2716   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2717   -moz-image-region: rect(0px 16px 16px 0px);
2718 }
2719
2720 #bookmarks-menu-button.bookmark-item[starred] {
2721   -moz-image-region: rect(0px 32px 16px 16px);
2722 }
2723
2724 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2725   padding-top: 2px;
2726   padding-bottom: 2px;
2727 }
2728
2729 #BMB_bookmarksPopup[side="top"],
2730 #BMB_bookmarksPopup[side="bottom"] {
2731   margin-left: -20px;
2732   margin-right: -20px;
2733 }
2734
2735 #BMB_bookmarksPopup[side="left"],
2736 #BMB_bookmarksPopup[side="right"] {
2737   margin-top: -20px;
2738   margin-bottom: -20px;
2739 }
2740
2741 /* bookmarking panel */
2742
2743 #editBookmarkPanelStarIcon {
2744   list-style-image: url("chrome://browser/skin/places/starred48.png");
2745   width: 48px;
2746   height: 48px;
2747 }
2748
2749 #editBookmarkPanelStarIcon[unstarred] {
2750   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2751 }
2752
2753 #editBookmarkPanelTitle {
2754   font-size: 130%;
2755 }
2756
2757 #editBookmarkPanelHeader,
2758 #editBookmarkPanelContent {
2759   margin-bottom: .5em;
2760 }
2761
2762 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2763 #editBMPanel_folderTree {
2764   min-width: 27em;
2765 }
2766
2767 .panel-promo-box {
2768   margin: 5px 0 -6px;
2769   padding: 5px 0;
2770   border-top: 1px solid #9C9CFF;
2771   border-bottom-left-radius: 5px;
2772   border-bottom-right-radius: 5px;
2773 }
2774
2775 .panel-promo-icon {
2776   list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2777   -moz-margin-end: 10px;
2778   vertical-align: middle;
2779 }
2780
2781 .panel-promo-closebutton {
2782   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2783   -moz-margin-end: -3px;
2784   margin-top: -3px;
2785 }
2786
2787 .panel-promo-closebutton:hover {
2788   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2789 }
2790
2791 .panel-promo-closebutton:hover:active {
2792   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2793 }
2794
2795 .panel-promo-closebutton > .toolbarbutton-text {
2796   padding: 0;
2797 }
2798
2799 /* ::::: content area ::::: */
2800
2801 #sidebar-box {
2802   background-color: #9C9CFF;
2803   color: #000000;
2804 }
2805
2806 #sidebar {
2807   background-color: #000000;
2808 }
2809
2810 #sidebar-splitter {
2811   -moz-margin-start: 0;
2812 }
2813
2814 #sidebar-header {
2815   color: #000000;
2816   padding: 2px;
2817 }
2818
2819 #sidebar-title {
2820   -moz-padding-start: 0px;
2821 }
2822
2823 #sidebar-header > .close-icon {
2824 /*  padding: 4px 2px;
2825   margin: 0;
2826   border: none;*/
2827   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2828 }
2829
2830 #sidebar-header > .close-icon:hover,
2831 #sidebar-header > .close-icon:hover:active {
2832   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2833 }
2834
2835 #sidebar-splitter:-moz-locale-dir(ltr),
2836 #sidebar:-moz-locale-dir(ltr) {
2837   border-radius: 0 5px 0 0;
2838 }
2839
2840 #sidebar-splitter:-moz-locale-dir(rtl),
2841 #sidebar:-moz-locale-dir(rtl) {
2842   border-radius: 5px 0 0 0;
2843 }
2844
2845 .browserContainer > findbar {
2846 /*
2847   background-color: -moz-dialog;
2848   color: -moz-DialogText;
2849 */
2850 }
2851
2852 /* Tabstrip */
2853
2854 #TabsToolbar {
2855   min-height: 0;
2856   padding: 0;
2857   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2858 }
2859
2860 #TabsToolbar .toolbar-holder {
2861   background-color: #000000; /* correct effect of being an actual toolbar */
2862 }
2863
2864 #main-window[disablechrome] #TabsToolbar,
2865 #TabsToolbar[tabsontop="false"] {
2866   border-bottom: 1px solid #008484;
2867 }
2868
2869 /* === BEGIN tabs.inc.css === */
2870
2871 :root {
2872   /* --tab-toolbar-navbar-overlap: 1px; */
2873   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2874   /* --tab-min-height: 31px; */
2875 }
2876 #TabsToolbar {
2877   /* --tab-stroke-background-size: auto 100%; */
2878 }
2879
2880 .tabbrowser-tab,
2881 .tabs-newtab-button,
2882 #TabsToolbar > #new-tab-button {
2883   margin-top: 0px;
2884 }
2885
2886 .tabbrowser-tab {
2887   padding: 1px 4px 2px;
2888 }
2889
2890 .tabbrowser-tab:first-of-type {
2891   -moz-margin-start: 2px;
2892 }
2893
2894 .tabs-newtab-button,
2895 #TabsToolbar > #new-tab-button {
2896   border-radius: 8px 8px 0px 0px;
2897   -moz-margin-start: 0;
2898 }
2899
2900 .tabs-newtab-button:not(:hover),
2901 #TabsToolbar > #new-tab-button:not(:hover) {
2902   background-color: #C09070;
2903 }
2904
2905 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2906 .tabbrowser-tab[visuallyselected=true] {
2907 /*  position: relative;
2908   z-index: 2;*/
2909 }
2910
2911 .tab-background-middle {
2912 }
2913
2914 .tab-content {
2915 }
2916
2917 .tab-content[pinned] {
2918 }
2919
2920 .tab-throbber,
2921 .tab-icon-image,
2922 .tab-icon-sound,
2923 .tab-close-button {
2924 }
2925
2926 .tab-throbber,
2927 .tab-icon-image {
2928   height: 16px;
2929   width: 16px;
2930   -moz-margin-end: 3px;
2931 }
2932
2933 .tab-icon-image {
2934   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2935 }
2936
2937 .tab-icon-overlay {
2938   width: 16px;
2939   height: 16px;
2940   margin-top: -8px;
2941   -moz-margin-start: -15px;
2942   position: relative;
2943 }
2944
2945 .tab-icon-overlay[crashed] {
2946   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2947 }
2948
2949 .tab-icon-overlay[soundplaying],
2950 .tab-icon-overlay[muted]:not([crashed]) {
2951   border-radius: 10px;
2952 }
2953
2954 .tab-icon-overlay[soundplaying]:hover,
2955 .tab-icon-overlay[muted]:hover {
2956   background-color: #FFCF00;
2957 }
2958
2959 .tab-icon-overlay[soundplaying] {
2960   display: -moz-box;
2961   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2962 }
2963
2964 .tab-icon-overlay[muted]:not([crashed]) {
2965   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2966 }
2967
2968 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2969   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2970 }
2971
2972
2973 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2974   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2975 }
2976
2977 .tab-throbber[busy] {
2978   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2979 }
2980
2981 .tab-throbber[progress] {
2982   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2983 }
2984
2985 .tab-throbber[pinned],
2986 .tab-icon-image[pinned] {
2987   -moz-margin-start: 2px;
2988   -moz-margin-end: 2px;
2989 }
2990
2991 .tab-label {
2992   /* this needs to add up to the 16px of the icon image */
2993   height: 12px;
2994   margin-top: 2px !important;
2995   margin-bottom: 2px !important;
2996 }
2997
2998 .tab-icon-sound {
2999   -moz-margin-start: 4px;
3000   width: 16px;
3001   height: 16px;
3002   padding: 0;
3003 }
3004
3005 .tab-icon-sound[muted] {
3006   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3007 }
3008
3009 .tab-icon-sound[muted]:hover {
3010   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3011 }
3012
3013 .tab-icon-sound[muted]:hover:active {
3014   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3015 }
3016
3017 .tab-icon-sound[soundplaying] {
3018   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
3019 }
3020
3021 .tab-icon-sound[soundplaying]:hover {
3022   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
3023 }
3024
3025 .tab-icon-sound[soundplaying]:hover:active {
3026   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3027 }
3028
3029 .tab-icon-sound[muted] {
3030   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3031 }
3032
3033 .tab-icon-sound[muted]:hover {
3034   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3035 }
3036
3037 .tab-icon-sound[muted]:hover:active {
3038   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3039 }
3040
3041 .tab-icon-sound[visuallyselected=true][soundplaying] {
3042   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3043 }
3044
3045 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3046   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3047 }
3048
3049 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
3050   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3051 }
3052
3053 .tab-icon-sound[visuallyselected=true][muted] {
3054   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3055 }
3056
3057 .tab-icon-sound[visuallyselected=true][muted]:hover {
3058   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3059 }
3060
3061 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
3062   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3063 }
3064
3065 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
3066   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
3067 }
3068
3069 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
3070   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
3071 }
3072
3073 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
3074   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
3075 }
3076
3077 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
3078   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
3079 }
3080
3081 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
3082   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
3083 }
3084
3085 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
3086   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3087 }
3088
3089 .tab-close-button {
3090   margin-top: 1px;
3091   padding: 0;
3092 }
3093
3094 .tab-background,
3095 .tabs-newtab-button {
3096   /* overlap the tab curves */
3097 }
3098
3099 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3100 }
3101
3102 /* Tab Overflow */
3103 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3104 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3105 }
3106
3107 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3108 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3109 }
3110
3111 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3112 }
3113
3114 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3115 }
3116
3117 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3118 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3119 }
3120
3121 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3122 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3123 }
3124
3125 .tab-background-start[visuallyselected=true]::after,
3126 .tab-background-start[visuallyselected=true]::before,
3127 .tab-background-start,
3128 .tab-background-end,
3129 .tab-background-end[visuallyselected=true]::after,
3130 .tab-background-end[visuallyselected=true]::before {
3131 }
3132
3133 .tabbrowser-tab:not([visuallyselected=true]),
3134 .tabbrowser-tab:-moz-lwtheme {
3135 }
3136
3137 /* tabbrowser-tab focus ring */
3138 .tabbrowser-tab:focus {
3139   outline: 1px dotted;
3140 }
3141
3142 /* Selected tab */
3143
3144 .tabbrowser-tab[visuallyselected="true"] {
3145 }
3146
3147 /* End selected tab */
3148
3149 /* User Context UI - change tab decoration depending on userContextId.
3150    Defaults to gray for unknown usercontextids. */
3151 .tabbrowser-tab[usercontextid] {
3152   background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3153   background-size: auto 2px;
3154   background-repeat: no-repeat;
3155 }
3156
3157 /* Personal User Context */
3158 .tabbrowser-tab[usercontextid="1"] {
3159   background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3160 }
3161 /* Work User Context */
3162 .tabbrowser-tab[usercontextid="2"] {
3163   background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3164 }
3165 /* Banking User Context */
3166 .tabbrowser-tab[usercontextid="3"] {
3167   background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3168 }
3169 /* Shopping User Context */
3170 .tabbrowser-tab[usercontextid="4"] {
3171   background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3172 }
3173
3174 /* Tab pointer-events */
3175 /*
3176 .tabbrowser-tab {
3177   pointer-events: none;
3178 }
3179
3180 .tab-background-middle,
3181 .tabs-newtab-button,
3182 .tab-icon-overlay[soundplaying],
3183 .tab-icon-overlay[muted]:not([crashed]),
3184 .tab-icon-sound,
3185 .tab-close-button {
3186   pointer-events: auto;
3187 }
3188 */
3189 /* Pinned tabs */
3190
3191 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
3192   background-color: #E7ADE7;
3193 }
3194
3195 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
3196   background-color: #3333FF;
3197   color: #000000;
3198 }
3199
3200 /* Tab separators */
3201 /*
3202 .tabbrowser-tab::after,
3203 .tabbrowser-tab::before {
3204   width: 1px;
3205   -moz-margin-start: -1px;
3206   background-image: linear-gradient(transparent 5px,
3207                                     currentColor 5px,
3208                                     currentColor calc(100% - 4px),
3209                                     transparent calc(100% - 4px));
3210   opacity: 0.2;
3211 }
3212
3213 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3214 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3215   opacity: 0.4;
3216 }
3217 */
3218 /* Also show separators beside the selected tab when dragging it. */
3219 /*
3220 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3221 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3222 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3223   content: "";
3224   display: -moz-box;
3225 }
3226 */
3227 /* New tab button */
3228
3229 .tabs-newtab-button {
3230   width: 28px;
3231   /* width: calc(36px + var(--tab-curve-width)); */
3232 }
3233
3234 /* === END tabs.inc.css === */
3235
3236 /* Background tabs:
3237  *
3238  * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3239  * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3240  * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3241  */
3242 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3243 /*  clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3244 }
3245
3246 /* Tab DnD indicator */
3247 .tab-drop-indicator {
3248   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3249   margin-bottom: -11px;
3250 }
3251
3252 /* Tab close button */
3253 .tab-close-button {
3254   list-style-image: url("chrome://global/skin/icons/close-button.gif");
3255 }
3256
3257 .tab-close-button:hover,
3258 .tab-close-button:hover[selected="true"] {
3259   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3260 }
3261
3262 .tab-close-button:hover:active,
3263 .tab-close-button:hover:active[selected="true"] {
3264   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3265 }
3266
3267 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3268
3269 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3270 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3271   margin: 0;
3272   padding-top: 0;
3273   padding-bottom: 0;
3274   background-origin: border-box;
3275 }
3276
3277 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3278 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3279 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3280 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3281  }
3282
3283 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3284 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3285  }
3286
3287 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3288 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3289 /*  transform: scaleX(-1);*/
3290 }
3291
3292 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3293   transition: 1s background-color ease-out;
3294 }
3295
3296 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3297   background-color: #008484;
3298 }
3299
3300 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3301 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3302 /*  border-width: 0 2px 0 0;
3303   border-style: solid;
3304   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3305 }
3306
3307 .tabs-newtab-button > .toolbarbutton-icon {
3308   margin-top: -1px;
3309   margin-bottom: -1px;
3310 }
3311
3312 .tabs-newtab-button,
3313 #TabsToolbar > #new-tab-button,
3314 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3315 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3316   list-style-image: url("chrome://browser/skin/tabbrowser/newtabFx.png");
3317   -moz-image-region: rect(0, 16px, 18px, 0);
3318 }
3319
3320 .tabs-newtab-button,
3321 .tabs-newtab-button:hover,
3322 #TabsToolbar > #new-tab-button,
3323 #TabsToolbar > #new-tab-button:hover {
3324   -moz-image-region: rect(0, 32px, 18px, 16px);
3325 }
3326
3327 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3328 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3329 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3330 .tabs-newtab-button:-moz-lwtheme-brighttext,
3331 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3332 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3333 }
3334
3335 #TabsToolbar > #new-tab-button {
3336   width: 26px;
3337 }
3338
3339 #alltabs-button {
3340   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3341 }
3342
3343 #alltabs-button:hover,
3344 #alltabs-button:hover:active,
3345 #alltabs-button[open="true"] {
3346   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3347 }
3348
3349 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3350 #alltabs-button:-moz-lwtheme-brighttext {
3351 }
3352
3353 #alltabs-button > .toolbarbutton-icon {
3354 /*  margin: 0 2px;*/
3355 }
3356
3357 #alltabs-button > .toolbarbutton-menu-dropmarker {
3358   display: none;
3359 }
3360
3361 /* All tabs menupopup */
3362 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3363   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3364   -moz-image-region: auto;
3365 }
3366
3367 .alltabs-item[selected="true"] {
3368   font-weight: bold;
3369 }
3370
3371 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3372   list-style-image: url("chrome://global/skin/icons/loading.gif");
3373 }
3374
3375 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3376   background-color: #402800;
3377 }
3378
3379 .alltabs-endimage[muted] {
3380   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3381 }
3382
3383 .alltabs-endimage[soundplaying] {
3384   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3385 }
3386
3387 toolbarbutton.chevron {
3388   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3389 }
3390
3391 toolbarbutton.chevron:hover {
3392   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3393 }
3394 /*
3395 toolbar[brighttext] toolbarbutton.chevron {
3396   list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3397 }
3398 */
3399 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3400 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3401   transform: scaleX(-1);
3402 }
3403
3404 toolbarbutton.chevron > .toolbarbutton-text,
3405 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3406   display: none;
3407 }
3408
3409 toolbarbutton.chevron > .toolbarbutton-icon {
3410   margin: 0;
3411 }
3412
3413 #sidebar-throbber[loading="true"] {
3414   list-style-image: url("chrome://global/skin/icons/loading.gif");
3415   -moz-margin-end: 4px;
3416 }
3417
3418 /* Bookmarks toolbar */
3419 #PlacesToolbarDropIndicator {
3420   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3421 }
3422
3423 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3424   background-color: #008484 !important;
3425   color: #FFCF00 !important;
3426 }
3427
3428 /* rules for menupopup drop indicators */
3429 .menupopup-drop-indicator-bar {
3430   position: relative;
3431   /* these two margins must together compensate the indicator's height */
3432   margin-top: -1px;
3433   margin-bottom: -1px;
3434 }
3435
3436 .menupopup-drop-indicator {
3437   list-style-image: none;
3438   height: 2px;
3439   -moz-margin-end: -4em;
3440   background-color: #008484;
3441 }
3442
3443 /* === BEGIN notification-icons.inc.css === */
3444
3445 .popup-notification-icon {
3446   width: 64px;
3447   height: 64px;
3448   -moz-margin-end: 10px;
3449 }
3450
3451 .popup-notification-icon[popupid="geolocation"] {
3452   list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3453 }
3454
3455 .popup-notification-icon[popupid="xpinstall-disabled"],
3456 .popup-notification-icon[popupid="addon-install-blocked"],
3457 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3458   list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3459 }
3460
3461 .popup-notification-icon[popupid="addon-progress"] {
3462   list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3463 }
3464
3465 .popup-notification-icon[popupid="addon-install-failed"] {
3466   list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3467 }
3468
3469 .popup-notification-icon[popupid="addon-install-confirmation"] {
3470   list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3471 }
3472
3473 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3474   list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3475 }
3476
3477 .popup-notification-icon[popupid="addon-install-complete"] {
3478   list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3479 }
3480
3481 .popup-notification-icon[popupid="addon-install-restart"] {
3482   list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3483 }
3484
3485 .popup-notification-icon[popupid="click-to-play-plugins"] {
3486   list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3487 }
3488
3489 .popup-notification-icon[popupid="web-notifications"] {
3490   list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3491 }
3492
3493 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3494 .popup-notification-icon[popupid*="offline-app-requested"],
3495 .popup-notification-icon[popupid="offline-app-usage"] {
3496   list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3497 }
3498
3499 .popup-notification-icon[popupid="password"] {
3500   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3501 }
3502
3503 .popup-notification-icon[popupid="webapps-install-progress"],
3504 .popup-notification-icon[popupid="webapps-install"] {
3505   list-style-image: url("chrome://global/skin/icons/webapps-64.png");
3506 }
3507
3508 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3509 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3510   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3511 }
3512
3513 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3514 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3515   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3516 }
3517
3518 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3519 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3520   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3521 }
3522
3523 .popup-notification-icon[popupid="pointerLock"] {
3524   list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3525 }
3526
3527 /* Notification icon box */
3528 #notification-popup .panel-promo-box {
3529 /*  margin: 10px -10px -10px; */
3530 }
3531
3532 #notification-popup-box {
3533   position: relative;
3534   background-color: #000000;
3535   background-clip: padding-box;
3536   padding-left: 3px;
3537   padding-right: 8px;
3538   border-radius: 3px 0 0 3px;
3539   border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3540   -moz-margin-end: -8px;
3541   border-right-width: 8px;
3542 }
3543
3544 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3545 /*  padding-left: 7px; */
3546 }
3547
3548 /* This changes the direction of the main notification box on the url bar. */
3549 #notification-popup-box:-moz-locale-dir(rtl),
3550 /* This adds a second flip for the notification anchors, as they don't switch direction
3551    for RTL mode. */
3552 .notification-anchor-icon:-moz-locale-dir(rtl) {
3553   transform: scaleX(-1);
3554 }
3555
3556 /* For the anchor icons in the chat window, we don't have the notification popup box,
3557    so we need to cancel the RTL transform. */
3558 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3559   transform: none;
3560 }
3561
3562 .notification-anchor-icon {
3563   list-style-image: url("chrome://global/skin/icons/information-16.png");
3564
3565   width: 16px;
3566   height: 16px;
3567   margin: 0 2px;
3568 }
3569
3570 .notification-anchor-icon:-moz-focusring {
3571   outline: 1px dotted #008484;
3572 }
3573
3574 .identity-notification-icon,
3575 #identity-notification-icon {
3576   list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
3577 }
3578
3579 .geo-notification-icon,
3580 #geo-notification-icon {
3581   list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3582 }
3583
3584 #addons-notification-icon {
3585   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3586 }
3587
3588 #addons-notification-icon:hover {
3589   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3590 }
3591
3592 #addons-notification-icon:hover:active {
3593   list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3594 }
3595
3596 .indexedDB-notification-icon,
3597 #indexedDB-notification-icon {
3598   list-style-image: url("chrome://global/skin/icons/question-16.png");
3599 }
3600
3601 #password-notification-icon {
3602   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3603 }
3604
3605 #login-fill-notification-icon {
3606   /* Temporary icon until the capture and fill doorhangers are unified. */
3607   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3608   transform: scaleX(-1);
3609 }
3610
3611 #webapps-notification-icon {
3612   list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3613 }
3614
3615 #plugins-notification-icon {
3616   list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3617 }
3618
3619 #plugins-notification-icon.plugin-hidden {
3620   list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3621 }
3622
3623 #plugins-notification-icon.plugin-blocked {
3624   list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3625 }
3626
3627 #plugins-notification-icon {
3628 /*  -moz-image-region: rect(0, 16px, 16px, 0);*/
3629 }
3630
3631 #plugins-notification-icon:hover {
3632 /*  -moz-image-region: rect(0, 32px, 16px, 16px);*/
3633 }
3634
3635 #notification-popup-box[hidden] {
3636   /* Override display:none to make the pluginBlockedNotification animation work
3637      when showing the notification repeatedly. */
3638   display: -moz-box;
3639   visibility: collapse;
3640 }
3641
3642 #plugins-notification-icon.plugin-blocked[showing] {
3643   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3644 }
3645
3646 @keyframes pluginBlockedNotification {
3647   from {
3648     opacity: 0;
3649   }
3650   to {
3651     opacity: 1;
3652   }
3653 }
3654
3655 .webRTC-shareDevices-notification-icon,
3656 #webRTC-shareDevices-notification-icon {
3657   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3658 }
3659
3660 .webRTC-sharingDevices-notification-icon,
3661 #webRTC-sharingDevices-notification-icon {
3662   list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3663 }
3664
3665 .webRTC-shareMicrophone-notification-icon,
3666 #webRTC-shareMicrophone-notification-icon {
3667   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3668 }
3669
3670 .webRTC-sharingMicrophone-notification-icon,
3671 #webRTC-sharingMicrophone-notification-icon {
3672   list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3673 }
3674
3675 .webRTC-shareScreen-notification-icon,
3676 #webRTC-shareScreen-notification-icon {
3677   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3678 }
3679
3680 .webRTC-sharingScreen-notification-icon,
3681 #webRTC-sharingScreen-notification-icon {
3682   list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3683 }
3684
3685 .web-notifications-notification-icon,
3686 #web-notifications-notification-icon {
3687   list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3688   -moz-image-region: rect(0, 16px, 16px, 0);
3689 }
3690
3691 .web-notifications-notification-icon:hover,
3692 #web-notifications-notification-icon:hover {
3693   -moz-image-region: rect(0, 32px, 16px, 16px);
3694 }
3695
3696 .web-notifications-notification-icon:hover:active,
3697 #web-notifications-notification-icon:hover:active {
3698   -moz-image-region: rect(0, 48px, 16px, 32px);
3699 }
3700
3701 #pointerLock-notification-icon {
3702   list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3703 }
3704
3705 .translate-notification-icon,
3706 #translate-notification-icon {
3707   list-style-image: url("chrome://browser/skin/translation-16.png");
3708   -moz-image-region: rect(0px, 16px, 16px, 0px);
3709 }
3710
3711 .translated-notification-icon,
3712 #translated-notification-icon {
3713   list-style-image: url("chrome://browser/skin/translation-16.png");
3714   -moz-image-region: rect(0px, 32px, 16px, 16px);
3715 }
3716
3717 .popup-notification-icon[popupid="servicesInstall"] {
3718   list-style-image: url("chrome://browser/skin/social/services-64.png");
3719 }
3720 #servicesInstall-notification-icon {
3721   list-style-image: url("chrome://browser/skin/social/services-16.png");
3722 }
3723
3724 /* EME notifications */
3725
3726 .popup-notification-icon[popupid="drmContentPlaying"],
3727 #eme-notification-icon {
3728   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3729 }
3730
3731 #eme-notification-icon:hover:active {
3732   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3733 }
3734
3735 #eme-notification-icon[firstplay=true] {
3736   animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3737 }
3738
3739 @keyframes emeTeachingMoment {
3740   0% {transform: translateX(0); }
3741   25% {transform: translateX(3px) }
3742   75% {transform: translateX(-3px) }
3743   100% { transform: translateX(0); }
3744 }
3745
3746 /* HiDPI notification icons */
3747 @media (min-resolution: 1.1dppx) {
3748 /*  #notification-popup-box {
3749     border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3750   }
3751 */
3752   .notification-anchor-icon {
3753     list-style-image: url(chrome://global/skin/icons/information-32.png);
3754   }
3755
3756   .webRTC-shareDevices-notification-icon,
3757   #webRTC-shareDevices-notification-icon {
3758     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3759   }
3760
3761   .webRTC-sharingDevices-notification-icon,
3762   #webRTC-sharingDevices-notification-icon {
3763     list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3764   }
3765
3766   .webRTC-shareMicrophone-notification-icon,
3767   #webRTC-shareMicrophone-notification-icon {
3768     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3769   }
3770
3771   .webRTC-sharingMicrophone-notification-icon,
3772   #webRTC-sharingMicrophone-notification-icon {
3773     list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3774   }
3775
3776   .webRTC-shareScreen-notification-icon,
3777   #webRTC-shareScreen-notification-icon {
3778     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3779   }
3780
3781   .webRTC-sharingScreen-notification-icon,
3782   #webRTC-sharingScreen-notification-icon {
3783     list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3784   }
3785
3786   .popup-notification-icon[popupid="webRTC-sharingDevices"],
3787   .popup-notification-icon[popupid="webRTC-shareDevices"] {
3788     list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3789   }
3790
3791   .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3792   .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3793     list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3794   }
3795
3796   .popup-notification-icon[popupid="webRTC-sharingScreen"],
3797   .popup-notification-icon[popupid="webRTC-shareScreen"] {
3798     list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3799   }
3800 }
3801
3802 /* === END notification-icons.inc.css === */
3803
3804 .popup-notification-body[popupid="addon-progress"],
3805 .popup-notification-body[popupid="addon-install-confirmation"] {
3806   width: 28em;
3807   max-width: 28em;
3808 }
3809
3810 /* Translation infobar */
3811
3812 /* === BEGIN infobar.inc.css === */
3813
3814 notification[value="translation"] .messageImage {
3815   list-style-image: url("chrome://browser/skin/translation-16.png");
3816   -moz-image-region: rect(0, 32px, 16px, 16px);
3817 }
3818
3819 @media (min-resolution: 1.25dppx) {
3820   notification[value="translation"] .messageImage {
3821     list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3822     -moz-image-region: rect(0, 64px, 32px, 32px);
3823   }
3824 }
3825
3826 notification[value="translation"][state="translating"] .messageImage {
3827   list-style-image: url("chrome://browser/skin/translating-16.png");
3828   -moz-image-region: auto;
3829 }
3830
3831 @media (min-resolution: 1.25dppx) {
3832   notification[value="translation"][state="translating"] .messageImage {
3833     list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3834   }
3835 }
3836
3837 notification[value="translation"] hbox[anonid="details"] {
3838   overflow: hidden;
3839 }
3840
3841 notification[value="translation"] button,
3842 notification[value="translation"] menulist {
3843   min-width: 0;
3844 }
3845
3846 notification[value="translation"] menulist > .menulist-dropmarker {
3847 }
3848
3849 .translation-menupopup arrowscrollbox {
3850   padding-bottom: 0;
3851 }
3852
3853 .translation-attribution {
3854   cursor: pointer;
3855   -moz-box-align: end;
3856   font-size: small;
3857 }
3858
3859 .translation-attribution > label {
3860   margin-bottom: 0;
3861 }
3862
3863 .translation-attribution > image {
3864   width: 70px;
3865 }
3866
3867 .translation-welcome-panel {
3868   width: 305px;
3869 }
3870
3871 .translation-welcome-logo {
3872   height: 32px;
3873   width: 32px;
3874   list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3875   -moz-image-region: rect(0, 64px, 32px, 32px);
3876 }
3877
3878 .translation-welcome-content {
3879   -moz-margin-start: 16px;
3880 }
3881
3882 .translation-welcome-headline {
3883   font-size: larger;
3884   font-weight: bold;
3885 }
3886
3887 .translation-welcome-body {
3888   padding: 1em 0;
3889   margin: 0 0;
3890 }
3891
3892 /* === END infobar.inc.css === */
3893
3894 notification[value="translation"] {
3895   min-height: 40px;
3896 }
3897
3898 .translation-menupopup {
3899   -moz-appearance: none;
3900 }
3901
3902 /* Loop/ Hello browser styles */
3903
3904 notification[value="loop-sharing-notification"] .button-menubutton-button {
3905   min-width: 0;
3906   border: 0;
3907   margin: 0;
3908 }
3909
3910 notification[value="loop-sharing-notification"] .messageImage {
3911   list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3912 }
3913
3914 /* Bookmarks roots menu-items */
3915 #subscribeToPageMenuitem:not([disabled]),
3916 #subscribeToPageMenupopup,
3917 #BMB_subscribeToPageMenuitem:not([disabled]),
3918 #BMB_subscribeToPageMenupopup {
3919   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3920 }
3921
3922 #bookmarksToolbarFolderMenu,
3923 #BMB_bookmarksToolbar,
3924 #panelMenu_bookmarksToolbar {
3925   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3926   -moz-image-region: auto;
3927 }
3928
3929 #BMB_unsortedBookmarks,
3930 #panelMenu_unsortedBookmarks {
3931   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3932   -moz-image-region: auto;
3933 }
3934
3935 #panelMenu_pocket,
3936 #menu_pocket,
3937 #BMB_pocket {
3938   list-style-image: url("chrome://browser/content/pocket/panels/img/pocketmenuitem16.png");
3939 }
3940
3941 /* ::::: Keyboard UI Panel ::::: */
3942
3943 .KUI-panel {
3944   color: #FF9F00;
3945   border-style: none;
3946   border-radius: 20px;
3947 }
3948
3949 .KUI-panel[level="top"] {
3950   /*background-color: rgba(27%,27%,27%,.65);*/
3951 }
3952
3953 /* Ctrl-Tab */
3954
3955 #ctrlTab-panel {
3956   padding: 20px 10px 10px;
3957   font-weight: bold;
3958 }
3959
3960 .ctrlTab-favicon[src] {
3961   background-color: #000000;
3962   width: 20px;
3963   height: 20px;
3964   padding: 2px;
3965 }
3966
3967 .ctrlTab-preview-inner > .tabPreview-canvas {
3968 }
3969
3970 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3971   margin-bottom: 2px;
3972 }
3973
3974 .ctrlTab-preview-inner {
3975   padding-bottom: 10px;
3976 }
3977
3978 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3979   padding: 10px;
3980   background-color: #000000;
3981   border-radius: .5em;
3982 }
3983
3984 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3985   color: white;
3986   background-color: #000000;
3987   text-shadow: none;
3988   padding: 8px;
3989   border: 2px solid #9C9CFF;
3990   border-radius: .5em;
3991 }
3992
3993 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3994   margin: -10px -10px 0;
3995 }
3996
3997 #ctrlTab-showAll {
3998   margin-top: .5em;
3999 }
4000
4001 /* Sync Panel */
4002
4003 .sync-panel-icon {
4004   height:32px;
4005   width: 32px;
4006   background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
4007 }
4008
4009 .sync-panel-inner {
4010   width: 0;
4011   padding-left: 10px;
4012 }
4013
4014 .sync-panel-button-box {
4015   margin-top: 1em;
4016 }
4017
4018 #sync-start-panel-title {
4019   font-size: 120%;
4020   font-weight: bold;
4021   margin-bottom: 5px;
4022 }
4023
4024 #sync-start-panel-subtitle {
4025   margin-bottom: 0;
4026 }
4027
4028 /* Status panel */
4029
4030 .statuspanel-label {
4031   margin: 0;
4032   padding: 2px 4px;
4033   background: #404000;
4034   border: 1px none #9C9CFF;
4035   border-top-style: solid;
4036   color: #FF9F00;
4037   text-shadow: none;
4038 }
4039
4040 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
4041 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
4042   border-right-style: solid;
4043   border-top-right-radius: .3em;
4044   margin-right: 1em;
4045 }
4046
4047 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
4048 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
4049   border-left-style: solid;
4050   border-top-left-radius: .3em;
4051   margin-left: 1em;
4052 }
4053
4054 /* HACK to abolish devily color on main content */
4055
4056 #content {
4057   background-color: transparent !important;
4058 }
4059
4060 /* === BEGIN fullscreen/warning.inc.css === */
4061
4062 html|*#fullscreen-warning {
4063   align-items: center;
4064   background: rgba(0, 0, 0, 0.9);
4065   border: 2px solid #A09090;
4066   box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
4067   border-radius: 8px;
4068   padding: 24px 16px;
4069   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4070 }
4071
4072 html|*#fullscreen-warning::before {
4073   margin: 0;
4074   width: 24px; height: 24px;
4075 }
4076
4077 html|*#fullscreen-warning.verifiedIdentity::before,
4078 html|*#fullscreen-warning.verifiedDomain::before {
4079   content: url("chrome://browser/skin/fullscreen/secure.svg");
4080 }
4081
4082 html|*#fullscreen-warning.unknownIdentity::before {
4083   content: url("chrome://browser/skin/fullscreen/insecure.svg");
4084 }
4085
4086 html|*#fullscreen-domain-text,
4087 html|*#fullscreen-generic-text {
4088   font-size: 21px;
4089   font-weight: lighter;
4090   color: #A09090;
4091   margin: 0 16px;
4092 }
4093
4094 html|*#fullscreen-domain {
4095   font-weight: bold;
4096   margin: 0;
4097 }
4098
4099 html|*#fullscreen-exit-button {
4100   padding: 5px 30px;
4101   font: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
4102   font-size: 14px;
4103   font-weight: lighter;
4104   margin: 0;
4105   box-sizing: content-box;
4106
4107   border-radius: 300px;
4108   border: none;
4109   background-color: #C09070;
4110   color: #000000;
4111 }
4112
4113 /* === END fullscreen/warning.inc.css === */
4114
4115 /* === BEGIN commandline.inc.css === */
4116
4117 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
4118    We are copy/pasting variables from light-theme and dark-theme,
4119    since they aren't loaded in this context (within browser.css). */
4120 :root #developer-toolbar {
4121   --gcli-background-color: #000000; /* --theme-toolbar-background */
4122   --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
4123   --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
4124   --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
4125   --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
4126   --selection-background: #008484; /* --theme-selection-background */
4127   --selection-color: #000000; /* --theme-selection-color */
4128 }
4129
4130 /* Developer toolbar */
4131
4132 #developer-toolbar {
4133   border-top: 3px solid var(--gcli-background-color);
4134   border-bottom: none;
4135 }
4136
4137 #developer-toolbar .toolbar-holder {
4138   background-color: #8050B0;
4139   color: #FFCF00;
4140 }
4141
4142 #developer-toolbar .toolbar-holder {
4143   background-color: #8050B0;
4144   color: #FFCF00;
4145 }
4146
4147 #developer-toolbar .toolbar-startcap,
4148 #developer-toolbar .toolbar-endcap{
4149   background-color: #6000CF;
4150 }
4151
4152 #developer-toolbar {
4153 /*  padding: 0;
4154   min-height: 32px; */
4155 }
4156
4157 #developer-toolbar > toolbarbutton {
4158 /*  margin: 0;
4159   padding: 0 10px;
4160   width: 32px; */
4161 }
4162
4163 .developer-toolbar-button > image {
4164 /*  margin: auto 10px; */
4165 }
4166
4167 #developer-toolbar-toolbox-button > label {
4168   display: none;
4169 }
4170
4171 .developer-toolbar-button > .toolbarbutton-icon,
4172 #developer-toolbar-closebutton > .toolbarbutton-icon {
4173   width: 16px;
4174   height: 16px;
4175 }
4176
4177 #developer-toolbar-toolbox-button {
4178   list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
4179   -moz-image-region: rect(0px, 16px, 16px, 0px);
4180 }
4181
4182 #developer-toolbar-toolbox-button > label {
4183   display: none;
4184 }
4185
4186 #developer-toolbar-toolbox-button:hover,
4187 #developer-toolbar-toolbox-button:hover:active,
4188 #developer-toolbar-toolbox-button[checked=true] {
4189   -moz-image-region: rect(0px, 32px, 16px, 16px);
4190 }
4191
4192 @media (min-resolution: 2dppx) {
4193   #developer-toolbar-toolbox-button {
4194     list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
4195     -moz-image-region: rect(0px, 32px, 32px, 0px);
4196   }
4197
4198   #developer-toolbar-toolbox-button:hover,
4199   #developer-toolbar-toolbox-button:hover:active,
4200   #developer-toolbar-toolbox-button[checked=true] {
4201     -moz-image-region: rect(0px, 64px, 32px, 32px);
4202   }
4203 }
4204
4205 #developer-toolbar-closebutton {
4206   list-style-image: url("chrome://browser/skin/devtools/close.png");
4207   -moz-image-region: rect(0px, 16px, 16px, 0px);
4208   min-width: 16px;
4209   width: 16px;
4210 }
4211
4212 #developer-toolbar-closebutton > .toolbarbutton-icon {
4213 }
4214
4215 #developer-toolbar-closebutton > .toolbarbutton-text {
4216   display: none;
4217 }
4218
4219 #developer-toolbar-closebutton:hover,
4220 #developer-toolbar-closebutton:hover:active {
4221   -moz-image-region: rect(0px, 32px, 16px, 16px);
4222 }
4223
4224 @media (min-resolution: 2dppx) {
4225   #developer-toolbar-closebutton {
4226     list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4227     -moz-image-region: rect(0px, 32px, 32px, 0px);
4228   }
4229
4230   #developer-toolbar-closebutton:hover,
4231   #developer-toolbar-closebutton:hover:active {
4232     -moz-image-region: rect(0px, 64px, 32px, 32px);
4233   }
4234 }
4235
4236 /* GCLI */
4237
4238 html|*#gcli-tooltip-frame,
4239 html|*#gcli-output-frame {
4240   padding: 0;
4241   border-width: 0;
4242   background-color: transparent;
4243 }
4244
4245 #gcli-output,
4246 #gcli-tooltip {
4247   border-width: 0;
4248   background-color: transparent;
4249 }
4250
4251 .gclitoolbar-input-node,
4252 .gclitoolbar-complete-node {
4253   margin: 1px 3px;
4254   -moz-box-align: center;
4255   padding-top: 0;
4256   padding-bottom: 0;
4257   padding-right: 8px;
4258   background-color: transparent;
4259 }
4260
4261 .gclitoolbar-input-node {
4262 /*  line-height: 32px;
4263   outline-style: none; */
4264   background-repeat: no-repeat;
4265   background-color: var(--gcli-input-background);
4266 }
4267
4268 .gclitoolbar-input-node[focused="true"] {
4269   background-color: var(--gcli-input-focused-background);
4270 }
4271
4272 .gclitoolbar-input-node::before {
4273   content: "";
4274   display: inline-block;
4275   -moz-box-ordinal-group: 0;
4276   width: 16px;
4277   height: 16px;
4278   margin: 0 2px;
4279   background-image: url("chrome://browser/skin/devtools/commandline-icon.png");
4280   background-position: 0 center;
4281   background-size: 32px 16px;
4282 }
4283
4284 .gclitoolbar-input-node[focused="true"]::before {
4285   background-position: -16px center;
4286 }
4287
4288 @media (min-resolution: 2dppx) {
4289   .gclitoolbar-input-node::before {
4290     background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png");
4291   }
4292 }
4293
4294 .gclitoolbar-input-node:not([focused="true"]) {
4295   border-color: transparent;
4296 }
4297
4298 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4299   background-color: var(--selection-background);
4300   color: var(--selection-color);
4301 }
4302
4303 .gclitoolbar-complete-node {
4304   padding-left: 21px;
4305   background-color: transparent;
4306   color: transparent;
4307   z-index: 100;
4308   pointer-events: none;
4309 }
4310
4311 .gcli-in-incomplete,
4312 .gcli-in-error,
4313 .gcli-in-ontab,
4314 .gcli-in-todo,
4315 .gcli-in-closebrace,
4316 .gcli-in-param,
4317 .gcli-in-valid {
4318   margin: 0;
4319   padding: 0;
4320 }
4321
4322 .gcli-in-incomplete {
4323   border-bottom: 2px dotted #8050B0;
4324 }
4325
4326 .gcli-in-error {
4327   border-bottom: 2px dotted #FF0000;
4328 }
4329
4330 .gcli-in-ontab {
4331   color: #9C9CFF;
4332 }
4333
4334 .gcli-in-todo {
4335   color: #795900;
4336 }
4337
4338 .gcli-in-closebrace {
4339   color: #8050B0;
4340 }
4341
4342 /* === END commandline.inc.css === */
4343
4344 /* === BEGIN responsivedesign.inc.css === */
4345
4346 /* Responsive Mode */
4347
4348 .browserContainer[responsivemode] {
4349   background-color: #221500;
4350   padding: 0 20px 20px 20px;
4351 }
4352
4353 .browserStack[responsivemode] {
4354   box-shadow: 0 0 7px #9C9CFF;
4355 }
4356
4357 .devtools-responsiveui-toolbar {
4358   background: transparent;
4359   /* text color is textColor from dark theme, since no theme is applied to
4360    * the responsive toolbar.
4361    */
4362   color: #FF9F00;
4363   margin: 10px 0;
4364   padding: 0;
4365   box-shadow: none;
4366   border-bottom-width: 0;
4367 }
4368
4369 .devtools-responsiveui-menulist,
4370 .devtools-responsiveui-toolbarbutton {
4371   -moz-box-align: center;
4372   min-width: 32px;
4373 /*  min-height: 22px;*/
4374 /*  margin: 0 3px; */
4375 }
4376
4377 .devtools-responsiveui-menulist .menulist-editable-box {
4378   background-color: transparent;
4379 }
4380
4381 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4382   color: inherit;
4383   text-align: center;
4384 }
4385
4386 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4387 /*  background: hsla(212,7%,57%,.35);*/
4388 }
4389
4390 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4391   width: 16px;
4392   height: 16px;
4393 }
4394
4395 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4396   -moz-box-orient: horizontal;
4397 }
4398
4399 .devtools-responsiveui-menulist:-moz-focusring,
4400 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4401 /*  outline: 1px dotted hsla(210,30%,85%,0.7);
4402   outline-offset: -4px;*/
4403 }
4404
4405 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4406   display: none;
4407 }
4408
4409 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4410 /*  border-color: hsla(210,8%,5%,.6);
4411   background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4412   box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4413 }
4414
4415 .devtools-responsiveui-menulist[open=true],
4416 .devtools-responsiveui-toolbarbutton[open=true],
4417 .devtools-responsiveui-toolbarbutton[checked=true] {
4418 /*  border-color: hsla(210,8%,5%,.6) !important;
4419   background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4420   box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4421 }
4422
4423 .devtools-responsiveui-toolbarbutton[checked=true] {
4424 /*  color: hsl(208,100%,60%); */
4425 }
4426
4427 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4428 /*  background-color: transparent !important;*/
4429 }
4430
4431 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4432 /*  background-color: hsla(210,8%,5%,.2) !important;*/
4433 }
4434
4435 .devtools-responsiveui-menulist > .menulist-label-box {
4436   text-align: center;
4437 }
4438
4439 .devtools-responsiveui-menulist > .menulist-dropmarker {
4440 /*  display: -moz-box;
4441   background-color: transparent;
4442   list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4443   -moz-box-align: center;
4444   border-width: 0;
4445   min-width: 16px;*/
4446 }
4447
4448 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4449 /*  color: inherit;
4450   border-width: 0;
4451   -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4452   box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4453 }
4454
4455 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4456 /*  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4457 }
4458
4459 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4460 /*  padding: 0 1px;*/
4461   -moz-box-align: stretch;
4462 }
4463
4464 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4465 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4466 /*  list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
4467   -moz-box-align: center;
4468   padding: 0 3px;*/
4469 }
4470
4471 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4472 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4473   margin-left: 3px;
4474 }
4475
4476 .devtools-responsiveui-close {
4477   list-style-image: url("chrome://browser/skin/devtools/close.png");
4478   -moz-image-region: rect(0px,16px,16px,0px);
4479 }
4480
4481 .devtools-responsiveui-close:hover {
4482   -moz-image-region: rect(0px,32px,16px,16px);
4483 }
4484
4485 .devtools-responsiveui-rotate {
4486   list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
4487   -moz-image-region: rect(0px,16px,16px,0px);
4488 }
4489
4490 .devtools-responsiveui-rotate:hover {
4491   -moz-image-region: rect(0px,32px,16px,16px);
4492 }
4493
4494 @media (min-resolution: 2dppx) {
4495   .devtools-responsiveui-close {
4496     list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
4497   }
4498
4499   .devtools-responsiveui-close:hover {
4500     -moz-image-region: rect(0px,64px,32px,32px);
4501   }
4502
4503   .devtools-responsiveui-rotate {
4504     list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png");
4505   }
4506
4507   .devtools-responsiveui-rotate:hover {
4508     -moz-image-region: rect(0px,64px,32px,32px);
4509   }
4510 }
4511
4512 .devtools-responsiveui-touch {
4513   list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
4514   -moz-image-region: rect(0px,16px,16px,0px);
4515 }
4516
4517 .devtools-responsiveui-touch:hover,
4518 .devtools-responsiveui-touch[checked],
4519 .devtools-responsiveui-touch[checked]:hover {
4520   -moz-image-region: rect(0px,32px,16px,16px);
4521 }
4522
4523 @media (min-resolution: 2dppx) {
4524   .devtools-responsiveui-touch {
4525     list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
4526     -moz-image-region: rect(0px,32px,32px,0px);
4527   }
4528
4529   .devtools-responsiveui-touch:hover,
4530   .devtools-responsiveui-touch[checked],
4531   .devtools-responsiveui-touch[checked]:hover {
4532     -moz-image-region: rect(0px,64px,32px,32px);
4533   }
4534 }
4535
4536 .devtools-responsiveui-screenshot {
4537   list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
4538   -moz-image-region: rect(0px,16px,16px,0px);
4539 }
4540
4541 .devtools-responsiveui-screenshot:hover {
4542   -moz-image-region: rect(0px,32px,16px,16px);
4543 }
4544
4545 @media (min-resolution: 2dppx) {
4546   .devtools-responsiveui-screenshot {
4547     list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png");
4548   }
4549
4550   .devtools-responsiveui-screenshot:hover {
4551     -moz-image-region: rect(0px,64px,32px,32px);
4552   }
4553 }
4554
4555 .devtools-responsiveui-resizebarV {
4556   width: 7px;
4557   height: 24px;
4558   cursor: ew-resize;
4559   transform: translate(12px, -12px);
4560   background-size: cover;
4561   background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
4562 }
4563
4564 .devtools-responsiveui-resizebarH {
4565   width: 24px;
4566   height: 7px;
4567   cursor: ns-resize;
4568   transform: translate(-12px, 12px);
4569   background-size: cover;
4570   background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
4571 }
4572
4573 .devtools-responsiveui-resizehandle {
4574   width: 16px;
4575   height: 16px;
4576   cursor: se-resize;
4577   transform: translate(12px, 12px);
4578   background-size: cover;
4579   background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
4580 }
4581
4582 /* FxOS custom mode with additional buttons and phone look'n feel */
4583
4584 /* Hide devtools manual resizer */
4585 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4586 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4587 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4588   display: none;
4589 }
4590
4591 /* Gives responsive mode a phone look'n feel */
4592 .browserStack[responsivemode].fxos-mode {
4593   padding: 60px 15px 0;
4594
4595   border-radius: 25px / 20px;
4596   border-bottom-left-radius: 0;
4597   border-bottom-right-radius: 0;
4598   border: 1px solid #FFFFFF;
4599   border-bottom-width: 0;
4600
4601   background-color: #353535;
4602
4603   box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4604
4605   background-image: linear-gradient(to right, #111 11%, #333 56%);
4606   min-width: 320px;
4607 }
4608
4609 .devtools-responsiveui-hardware-buttons {
4610   -moz-appearance: none;
4611   padding: 20px;
4612
4613   border: 1px solid #FFFFFF;
4614   border-bottom-left-radius: 25px;
4615   border-bottom-right-radius: 25px;
4616   border-top-width: 0;
4617
4618   box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4619
4620   background-image: linear-gradient(to right, #111 11%, #333 56%);
4621 }
4622
4623 .devtools-responsiveui-home-button {
4624   -moz-user-focus: ignore;
4625   width: 40px;
4626   height: 30px;
4627   list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
4628 }
4629
4630 .devtools-responsiveui-sleep-button {
4631   -moz-user-focus: ignore;
4632   -moz-appearance: none;
4633   /* compensate browserStack top padding */
4634   margin-top: -67px;
4635   margin-right: 10px;
4636
4637   min-width: 10px;
4638   width: 50px;
4639   height: 5px;
4640
4641   border: 1px solid #444;
4642   border-top-right-radius: 12px;
4643   border-top-left-radius: 12px;
4644   border-bottom-color: transparent;
4645
4646   background-image: linear-gradient(to top, #111 11%, #333 56%);
4647 }
4648
4649 .devtools-responsiveui-sleep-button:hover:active {
4650   background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4651 }
4652
4653 .devtools-responsiveui-volume-buttons {
4654   margin-left: -29px;
4655 }
4656
4657 .devtools-responsiveui-volume-up-button,
4658 .devtools-responsiveui-volume-down-button {
4659   -moz-user-focus: ignore;
4660   -moz-appearance: none;
4661   border: 1px solid red;
4662   min-width: 8px;
4663   height: 40px;
4664
4665   border: 1px solid #444;
4666   border-right-color: transparent;
4667
4668   background-image: linear-gradient(to right, #111 11%, #333 56%);
4669 }
4670
4671 .devtools-responsiveui-volume-up-button:hover:active,
4672 .devtools-responsiveui-volume-down-button:hover:active {
4673   background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4674 }
4675
4676 .devtools-responsiveui-volume-up-button {
4677   border-top-left-radius: 12px;
4678 }
4679
4680 .devtools-responsiveui-volume-down-button {
4681   border-bottom-left-radius: 12px;
4682 }
4683
4684 @media (min-resolution: 2dppx) {
4685   .devtools-responsiveui-resizebarV {
4686     background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
4687   }
4688
4689   .devtools-responsiveui-resizebarH {
4690     background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png");
4691   }
4692
4693   .devtools-responsiveui-resizehandle {
4694     background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png");
4695   }
4696 }
4697
4698 /* === END responsivedesign.inc.css === */
4699
4700 /* === including indicator.css is done at the start of the file === */
4701
4702 /* Error counter */
4703
4704 #developer-toolbar-toolbox-button[error-count]:before {
4705   color: #000000;
4706   min-width: 16px;
4707   text-shadow: none;
4708   background-color: #FF0000;
4709   border-radius: 1px;
4710   -moz-margin-end: 5px;
4711 }
4712
4713 /* Social toolbar item */
4714
4715 #social-notification-icon-mentions {
4716   background-color: #000000;
4717   border-radius: 3px;
4718   -moz-margin-start: 2px;
4719 }
4720
4721 #social-notification-icon-mentions:hover {
4722   background-color: #FFCF00;
4723 }
4724
4725 #social-notification-icon-mentions[open="true"] {
4726   background-color: #FF9F00;
4727 }
4728
4729 #social-sidebar-splitter {
4730   border: 0;
4731 }
4732
4733 #socialActivatedNotification .popup-notification-button-container {
4734   margin-left: 6px;
4735 }
4736
4737 .social-activation-icon {
4738   width: auto;
4739   height: auto;
4740   max-height: 64px;
4741   max-width: 64px;
4742 }
4743
4744 #social-activation-message {
4745   max-width: 250px;
4746 }
4747
4748 #social-activation-message > label {
4749   margin: 0;
4750 }
4751
4752 /* social toolbar provider menu */
4753 .social-statusarea-popup {
4754   margin-top: 0;
4755   margin-left: -12px;
4756   margin-right: -12px;
4757 }
4758
4759 .social-statusarea-user {
4760   border-bottom: 1px solid #9C9CFF;
4761   background-color: #000000;
4762   color: #FF9F00;
4763   position: relative;
4764   cursor: pointer;
4765 }
4766
4767 .social-statusarea-user-portrait {
4768   width: 32px;
4769   height: 32px;
4770   border-radius: 2px;
4771   margin: 10px;
4772 }
4773
4774 .social-statusarea-loggedInStatus {
4775   background: transparent;
4776   border: none;
4777   color: #3333FF;
4778   min-width: 0;
4779   margin: 0 6px;
4780   list-style-image: none;
4781 }
4782
4783 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4784   text-decoration: underline;
4785 }
4786
4787 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4788   padding: 0;
4789 }
4790
4791 .social-panel-frame {
4792   border-radius: inherit;
4793 }
4794
4795 /* === BEGIN chat.inc.css === */
4796
4797 #social-sidebar-header {
4798   padding: 3px;
4799 }
4800
4801 #manage-share-providers,
4802 #social-sidebar-button {
4803   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4804   -moz-image-region: rect(0, 468px, 18px, 450px);
4805 }
4806
4807 #social-sidebar-button {
4808   -moz-appearance: none;
4809   border: none;
4810   padding: 0;
4811   margin: 2px;
4812 }
4813 #manage-share-providers > .toolbarbutton-icon,
4814 #social-sidebar-button > .toolbarbutton-icon {
4815   min-height: 18px;
4816   min-width: 18px;
4817 }
4818 #manage-share-providers:hover,
4819 #manage-share-providers:hover:active,
4820 #social-sidebar-button:hover,
4821 #social-sidebar-button:hover:active {
4822   -moz-image-region: rect(18px, 468px, 36px, 450px);
4823 }
4824 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4825   display: none;
4826 }
4827
4828 #social-sidebar-button[loading="true"] {
4829   list-style-image: url("chrome://global/skin/icons/loading.gif");
4830 }
4831
4832 #social-sidebar-favico {
4833   max-height: 16px;
4834   max-width: 16px;
4835   padding: 0;
4836   margin: 2px;
4837 }
4838
4839 .chat-status-icon {
4840   max-height: 16px;
4841   max-width: 16px;
4842   padding: 0;
4843 }
4844
4845 .chat-toolbarbutton {
4846   -moz-appearance: none;
4847   border: none;
4848   padding: 0 3px;
4849   margin: 0;
4850   background: none;
4851 }
4852
4853 .chat-toolbarbutton > .toolbarbutton-text {
4854   display: none;
4855 }
4856
4857 .chat-toolbarbutton > .toolbarbutton-icon {
4858   width: 16px;
4859   height: 16px;
4860 }
4861
4862 .chat-close-button {
4863   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4864 }
4865
4866 .chat-close-button:hover {
4867   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4868 }
4869
4870 .chat-close-button:hover:active {
4871   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4872 }
4873
4874 .chat-minimize-button {
4875   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4876 }
4877
4878 .chat-minimize-button:hover {
4879   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4880 }
4881
4882 .chat-minimize-button:hover:active {
4883   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4884 }
4885
4886 .chat-swap-button {
4887   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4888   transform: rotate(180deg);
4889 }
4890
4891 .chat-swap-button:hover {
4892   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4893 }
4894
4895 .chat-swap-button:hover:active {
4896   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4897 }
4898
4899 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4900   transform: none;
4901 }
4902
4903 .chat-loop-hangup {
4904   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
4905   background-color: #FF0000;
4906   border: 1px solid #FFC000;
4907   border-top-right-radius: 4px;
4908   width: 32px;
4909   height: 26px;
4910   margin-top: -6px;
4911   margin-bottom: -5px;
4912   -moz-margin-start: 6px;
4913   -moz-margin-end: -5px;
4914 }
4915
4916 .chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
4917   background-color: #FFCF00;
4918   border-color: #FF0000;
4919 }
4920
4921 .chat-title {
4922   color: #000000;
4923   text-shadow: none;
4924   cursor: inherit;
4925 }
4926
4927 .chat-titlebar {
4928   background-color: #9C9CFF;
4929   color: #000000;
4930   height: 26px;
4931   min-height: 26px;
4932   width: 100%;
4933   margin: 0;
4934   padding: 5px 4px;
4935   border: 1px solid #008484;
4936   border-bottom: 0;
4937   border-top-left-radius: 4px;
4938   border-top-right-radius: 4px;
4939   cursor: pointer;
4940   background-color: #A09090;
4941 }
4942
4943 .chat-titlebar[selected] {
4944   background-color: #008484;
4945 }
4946
4947 .chat-titlebar > .notification-anchor-icon {
4948   margin-left: 2px;
4949   margin-right: 2px;
4950 }
4951
4952 .chat-titlebar[minimized="true"] {
4953   border-bottom: none;
4954 }
4955
4956 .chat-titlebar[selected] {
4957   background-color: #008484;
4958 }
4959
4960 .chat-titlebar[activity] {
4961   background-color: #E7ADE7;
4962 }
4963
4964 .chat-frame {
4965   padding: 0;
4966   margin: 0;
4967   overflow: hidden;
4968 }
4969
4970 .chatbar-button {
4971   list-style-image: url("chrome://browser/skin/social/services-16.png");
4972   background-color: #000000;
4973   border: none;
4974   margin: 0;
4975   padding: 2px;
4976   height: 21px;
4977   width: 21px;
4978   border-top: 1px solid #008484;
4979   -moz-border-end: 1px solid #008484;
4980 }
4981
4982 @media (min-resolution: 2dppx) {
4983   .chatbar-button {
4984     list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4985   }
4986 }
4987
4988 .chatbar-button:hover {
4989   background-color: #FFCF00;
4990 }
4991 .chatbar-button[open="true"] {
4992   background-color: #FF9F00;
4993 }
4994
4995 .chatbar-button[activity]:not([open]) {
4996   background-image: radial-gradient(circle farthest-corner at center 2px, rgb(160,144,144) 3%, rgba(160,144,144,0.9) 12%, rgba(156,156,255,0.6) 30%, rgba(156,156,255,0.2) 70%);
4997 }
4998
4999 .chatbar-button > .toolbarbutton-icon {
5000   width: 16px;
5001 }
5002
5003 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5004   width: auto;
5005   height: auto;
5006   max-height: 16px;
5007   max-width: 16px;
5008 }
5009
5010 .chatbar-button > .toolbarbutton-icon {
5011   opacity: .6;
5012   -moz-margin-end: 0;
5013 }
5014 .chatbar-button:hover > .toolbarbutton-icon,
5015 .chatbar-button[open="true"] > .toolbarbutton-icon {
5016   opacity: 1;
5017 }
5018
5019 .chatbar-button:hover,
5020 .chatbar-button[open="true"] {
5021 }
5022
5023 .chatbar-button > .toolbarbutton-text,
5024 .chatbar-button > .toolbarbutton-menu-dropmarker {
5025   display: none;
5026 }
5027
5028 .chatbar-button[activity]:not([open="true"]) {
5029   background-color: #E7ADE7;
5030 }
5031
5032 .chatbar-button > menupopup > menuitem[activity] {
5033   font-weight: bold;
5034 }
5035
5036 .chatbar-innerbox {
5037   background: transparent;
5038   overflow: hidden;
5039 }
5040
5041 chatbar {
5042   -moz-margin-end: 20px;
5043 }
5044
5045 chatbox {
5046   -moz-margin-start: 4px;
5047   background-color: transparent;
5048 }
5049
5050 chatbar > chatbox {
5051   /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
5052      go round nicely. */
5053 /*  border-top-left-radius: 4px;
5054   border-top-right-radius: 4px;*/
5055   /* Offset the chatbox the same amount as the box-shadows' spread, to make it
5056      visible. */
5057 /*  -moz-margin-end: 5px;*/
5058 }
5059
5060 chatbox[minimized="true"] {
5061   width: 160px;
5062   height: 20px;
5063 }
5064
5065 window > chatbox {
5066   -moz-margin-start: 0px;
5067   margin: 0px;
5068   border: none;
5069   padding: 0px;
5070 }
5071
5072 /* === END chat.inc.css === */
5073
5074 /* === BEGIN plugin-doorhanger.inc.css === */
5075
5076 /**
5077  * Plugin Doorhanger Styles
5078  */
5079
5080 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
5081   padding: 6px 1px 2px;
5082 }
5083
5084 .click-to-play-plugins-notification-center-box {
5085 }
5086
5087 .plugin-popupnotification-centeritem:nth-child(odd) {
5088 /*  background-color: rgba(0,0,0,0.1);*/
5089 }
5090
5091 .center-item-label {
5092   margin-bottom: 0;
5093   text-overflow: ellipsis;
5094 }
5095
5096 .center-item-warning-icon {
5097   background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5098   background-repeat: no-repeat;
5099   width: 16px;
5100   height: 15px;
5101   -moz-margin-start: 6px;
5102 }
5103
5104 .click-to-play-plugins-notification-button-container {
5105 }
5106
5107 .click-to-play-popup-button {
5108   width: 50%;
5109 }
5110
5111 .click-to-play-plugins-notification-description-box {
5112   margin-left: 5px;
5113   margin-right: 5px;
5114   margin-top: 0;
5115   padding-bottom: 3px;
5116 }
5117
5118 .click-to-play-plugins-outer-description {
5119   margin-top: 1px;
5120 }
5121
5122 .click-to-play-plugins-notification-link,
5123 .center-item-link {
5124   margin: 0;
5125 }
5126
5127 .messageImage[value="plugin-hidden"] {
5128   list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5129 }
5130
5131 /* Keep any changes to this style in sync with pluginProblem.css */
5132 notification.pluginVulnerable {
5133 }
5134
5135 notification.pluginVulnerable .messageImage {
5136   list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5137 }
5138
5139 /* === END plugin-doorhanger.inc.css === */
5140
5141 /* === BEGIN login-doorhanger.inc.css === */
5142
5143 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5144   /* Since we display a sliding subview that extends to the border, we cannot
5145    * keep the default padding of arrow panels. We use the same padding in the
5146    * individual content views instead. Since we removed the padding, we also
5147    * have to ensure the contents are clipped to the border box. */
5148   padding: 0;
5149   overflow: hidden;
5150 }
5151
5152 #login-fill-mainview,
5153 #login-fill-details {
5154   padding: var(--panel-arrowcontent-padding);
5155 }
5156
5157 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5158   transform: translateX(-14px);
5159 }
5160
5161 #login-fill-mainview,
5162 #login-fill-details {
5163   transition: transform 150ms;
5164 }
5165
5166 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5167   transform: translateX(105%);
5168 }
5169
5170 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5171   transform: translateX(-105%);
5172 }
5173
5174 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5175   background-color: hsla(240,39%,100%,.1);
5176 }
5177
5178 #login-fill-testing {
5179   color: #FF0000;
5180   font-weight: bold;
5181 }
5182
5183 #login-fill-list {
5184   border: 1px solid #9C9CFF;
5185   max-height: 20em;
5186 }
5187
5188 .login-fill-item[disabled] {
5189   color: #8050B0;
5190   background-color: #000000;
5191 }
5192
5193 .login-fill-item[disabled][selected] {
5194   background-color: #008484;
5195 }
5196
5197 .login-hostname {
5198   margin: 4px;
5199   font-weight: bold;
5200 }
5201
5202 .login-fill-item.different-hostname > .login-hostname {
5203   color: #A09090;
5204   font-style: italic;
5205 }
5206
5207 .login-username {
5208   margin: 4px;
5209   color: #A09090;
5210 }
5211
5212 #login-fill-details {
5213   padding: 4px;
5214   background: var(--panel-arrowcontent-background);
5215   color: var(--panel-arrowcontent-color);
5216   background-clip: padding-box;
5217   border-left: 1px solid #9C9CFF;
5218   -moz-margin-start: 38px;
5219 }
5220
5221 /* === END login-doorhanger.inc.css === */
5222
5223 /* === BEGIN customizeMode.inc.css === */
5224
5225 /* Customization mode */
5226
5227 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5228   margin-bottom: 1em;
5229 }
5230
5231 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5232 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5233 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5234   margin-left: 1em;
5235   margin-right: 1em;
5236 }
5237
5238 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5239   pointer-events: none;
5240 }
5241
5242 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5243 #PanelUI-contents > .panel-customization-placeholder {
5244   -moz-outline-radius: 2.5px;
5245   outline: 1px dashed transparent;
5246 }
5247
5248 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5249   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5250   -moz-box-ordinal-group: 0;
5251   content: "";
5252   display: -moz-box;
5253   height: 100%;
5254   left: 0;
5255   outline-offset: -2px;
5256   pointer-events: none;
5257   position: absolute;
5258   top: 0;
5259   width: 100%;
5260 }
5261
5262 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5263    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5264    offset from the bottom effectively the same as other targets (-2px). */
5265 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5266 /*  top: -2px;*/
5267 }
5268
5269 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5270 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5271 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5272 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5273   position: relative;
5274 }
5275
5276 /* Most target outlines are shown on hover and drag over but the panel menu uses
5277    placeholders instead. */
5278 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5279 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5280 /* nav-bar and panel outlines are always shown */
5281 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5282   outline-color: #A09090;
5283 }
5284
5285 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5286   transition: outline-color 250ms linear;
5287 }
5288
5289 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5290   transition: outline-color 250ms linear;
5291   outline-color: #9C9CFF;
5292 }
5293
5294 #PanelUI-contents > .panel-customization-placeholder {
5295   cursor: auto;
5296   outline-offset: -5px;
5297 }
5298
5299 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5300   min-width: 100px;
5301 /*  padding-left: 10px;
5302   padding-right: 10px;*/
5303 }
5304
5305 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5306   padding: 0 2em 2em;
5307 }
5308
5309 #customization-container {
5310   background-color: #000000;
5311   color: #FF9F00;
5312 }
5313
5314 #customization-palette,
5315 #customization-empty {
5316   padding: 0 15px 15px;
5317 }
5318
5319 #customization-header {
5320   font-size: 1.75em;
5321   line-height: 1.75em;
5322   color: #9C9CFF;
5323   font-weight: 200;
5324   margin: 25px 25px 12px;
5325   padding-bottom: 12px;
5326   border-bottom: 1px solid #A09090;
5327 }
5328
5329 #customization-panel-container {
5330   padding: 10px 10px 0px;
5331 }
5332
5333 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5334 #customization-footer {
5335   /*background-color: rgb(236,236,236);*/
5336 }
5337
5338 #customization-footer {
5339   border-top: 1px solid #9C9CFF;
5340   padding: 10px;
5341 }
5342
5343 .customizationmode-button {
5344   margin: 5px;
5345 }
5346
5347 .customizationmode-button:hover {
5348 }
5349
5350 #customization-titlebar-visibility-button[checked],
5351 #customization-devedition-theme-button[checked] {
5352   background-color: #008484;
5353 }
5354
5355 #customization-titlebar-visibility-button[checked]:hover,
5356 #customization-devedition-theme-button[checked]:hover {
5357   background-color: #FFCF00;
5358 }
5359
5360 #customization-titlebar-visibility-button[checked]:hover:active,
5361 #customization-devedition-theme-button[checked]:hover:active {
5362   background-color: #FF9F00;
5363 }
5364
5365 .customizationmode-button[disabled="true"] {
5366 }
5367
5368 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5369 .customizationmode-button > .button-box > .button-icon {
5370 /*  height: 24px;*/
5371 }
5372
5373 #customization-titlebar-visibility-button {
5374   list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5375   -moz-image-region: rect(0, 16px, 16px, 0);
5376 }
5377
5378 #customization-titlebar-visibility-button:hover {
5379   -moz-image-region: rect(16px, 16px, 32px, 0);
5380 }
5381
5382 #customization-lwtheme-button,
5383 #customization-titlebar-visibility-button  {
5384   padding: 0px 5px;
5385 }
5386
5387 #customization-titlebar-visibility-button > .button-box {
5388   padding-top: 0;
5389   padding-bottom: 1px;
5390 }
5391
5392 #customization-titlebar-visibility-button:hover:active > .button-box {
5393   padding-top: 1px;
5394   padding-bottom: 0;
5395 }
5396
5397 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5398 #customization-titlebar-visibility-button > .button-box > .button-text {
5399   /* Sadly, button.css thinks its margins are perfect for everyone. */
5400   -moz-margin-start: 5px !important;
5401 }
5402
5403 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5404   width: 20px;
5405   height: 20px;
5406   border-radius: 2px;
5407   background-size: contain;
5408 }
5409
5410 #customization-titlebar-visibility-button > .button-box > .button-icon {
5411   vertical-align: middle;
5412 }
5413
5414 #customization-titlebar-visibility-button[checked] {
5415   -moz-image-region: rect(0, 32px, 16px, 16px);
5416   background-color: #008484;
5417 }
5418
5419 #customization-titlebar-visibility-button[checked]:hover {
5420   -moz-image-region: rect(16px, 32px, 32px, 16px);
5421   background-color: #FFCF00;
5422 }
5423
5424 #customization-titlebar-visibility-button[checked]:hover:active {
5425   background-color: #FF9F00;
5426 }
5427
5428 @media (min-resolution: 1.1dppx) {
5429   #customization-titlebar-visibility-button {
5430     list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5431     -moz-image-region: rect(0, 48px, 48px, 0);
5432   }
5433
5434   #customization-titlebar-visibility-button:hover {
5435     -moz-image-region: rect(48px, 48px, 96px, 0);
5436   }
5437
5438   #customization-titlebar-visibility-button[checked] {
5439     -moz-image-region: rect(0, 96px, 48px, 48px);
5440   }
5441
5442   #customization-titlebar-visibility-button[checked]:hover {
5443     -moz-image-region: rect(48px, 96px, 96px, 48px);
5444   }
5445 }
5446
5447 #main-window[customize-entered] #customization-panel-container {
5448   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5449   background-position: left top;
5450   background-repeat: repeat;
5451   background-size: auto;
5452   background-attachment: fixed;
5453 }
5454
5455 toolbarpaletteitem[place="toolbar"] {
5456   transition: border-width 250ms ease-in-out;
5457 }
5458
5459 toolbarpaletteitem[mousedown] {
5460   outline: 1px solid #008484;
5461   cursor: -moz-grabbing;
5462   opacity: 0.8;
5463 }
5464
5465 .panel-customization-placeholder,
5466 toolbarpaletteitem[place="palette"],
5467 toolbarpaletteitem[place="panel"] {
5468   transition: transform .3s ease-in-out;
5469 }
5470
5471 #customization-palette {
5472   transition: opacity .3s ease-in-out;
5473   opacity: 0;
5474 }
5475
5476 #customization-palette[showing="true"] {
5477   opacity: 1;
5478 }
5479
5480 toolbarpaletteitem[notransition].panel-customization-placeholder,
5481 toolbarpaletteitem[notransition][place="toolbar"],
5482 toolbarpaletteitem[notransition][place="palette"],
5483 toolbarpaletteitem[notransition][place="panel"] {
5484   transition: none;
5485 }
5486
5487 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5488 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5489 toolbarpaletteitem > toolbaritem.panel-wide-item,
5490 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5491   transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5492 }
5493
5494 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5495 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5496   transform: scale(1.3);
5497 }
5498
5499 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5500 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5501   transform: scale(1.1);
5502 }
5503
5504 /* Override the toolkit styling for items being dragged over. */
5505 toolbarpaletteitem[place="toolbar"] {
5506   border-left-width: 0;
5507   border-right-width: 0;
5508   margin-right: 0;
5509   margin-left: 0;
5510 }
5511
5512 #customization-palette:not([hidden]) {
5513   margin-bottom: 25px;
5514 }
5515
5516 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5517 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5518 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5519 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5520   margin-top: 20px;
5521 }
5522
5523 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5524 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5525   margin-left: 0;
5526   margin-right: 0;
5527   max-width: 24px;
5528   min-width: 24px;
5529   max-height: 24px;
5530   min-height: 24px;
5531   padding: 4px;
5532 }
5533
5534 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5535 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5536   width: 16px;
5537 }
5538
5539 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5540   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5541 }
5542
5543 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5544 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5545   display: none;
5546 }
5547
5548 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5549   -moz-box-pack: center;
5550   min-height: 48px;
5551 }
5552
5553 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5554   -moz-margin-end: 5px;
5555 }
5556
5557 #customization-palette > toolbarpaletteitem > label {
5558   text-align: center;
5559   margin-left: 0;
5560   margin-right: 0;
5561 }
5562
5563 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5564   -moz-box-orient: vertical;
5565   /* Make the panel padding uniform across all platforms due to the
5566      styling of the section headers and footer. */
5567   padding: 10px;
5568 }
5569
5570 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5571   width: 32px;
5572   height: 32px;
5573 }
5574
5575 .customization-lwtheme-menu-theme {
5576   -moz-appearance: none;
5577   margin: 0 -5px 5px;
5578   padding-top: 0;
5579   -moz-padding-end: 5px;
5580   padding-bottom: 0;
5581   -moz-padding-start: 0;
5582 }
5583
5584 .customization-lwtheme-menu-theme[defaulttheme] {
5585   list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5586 }
5587
5588 .customization-lwtheme-menu-theme[active="true"] {
5589   background-color: #008484;
5590 }
5591
5592 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5593   margin: 5px;
5594 }
5595
5596 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5597   text-align: start;
5598 }
5599
5600 #customization-lwtheme-menu-header,
5601 #customization-lwtheme-menu-recommended {
5602   padding: 10px;
5603   margin-bottom: 5px;
5604 }
5605
5606 #customization-lwtheme-menu-header,
5607 #customization-lwtheme-menu-recommended,
5608 #customization-lwtheme-menu-footer {
5609   background-color: #A09090;
5610   color: #000000;
5611   margin-right: -10px;
5612   margin-left: -10px;
5613 }
5614
5615 #customization-lwtheme-menu-header {
5616   margin-top: -10px;
5617   border-top-right-radius: 3px;
5618   border-top-left-radius: 3px;
5619 }
5620
5621 #customization-lwtheme-menu-recommended {
5622 }
5623
5624 #customization-lwtheme-menu-footer {
5625   margin-bottom: -10px;
5626   border-bottom-right-radius: 3px;
5627   border-bottom-left-radius: 3px;
5628 }
5629
5630 .customization-lwtheme-menu-footeritem {
5631   -moz-appearance: none;
5632   -moz-box-flex: 1;
5633   background-color: #C09070;
5634   color: #000000;
5635   border: 1px solid transparent;
5636   padding: 10px;
5637   margin-left: 0;
5638   margin-right: 0;
5639 }
5640
5641 .customization-lwtheme-menu-footeritem:hover {
5642   background-color: #FFCF00;
5643 }
5644
5645 .customization-lwtheme-menu-footeritem:first-child {
5646 }
5647
5648 /* === END customizeMode.inc.css === */
5649
5650 /* === BEGIN customizeTip.inc.css === */
5651
5652 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5653   padding: 0;
5654   margin: 0;
5655   min-width: 400px;
5656   max-width: 1000px;
5657   min-height: 200px;
5658   border-radius: 3px;
5659 /*  background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5660   border: 1px solid #9C9CFF;
5661   color: #FF9F00;
5662 }
5663
5664 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5665 /*  background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5666 }
5667
5668 .customization-tipPanel-infoBox {
5669   margin: 20px 25px 25px;
5670   width: 25px;
5671   background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5672   background-repeat: no-repeat;
5673 }
5674
5675 .customization-tipPanel-content {
5676   margin: 25px 0;
5677   font-size: 12px;
5678   line-height: 18px;
5679 }
5680
5681 .customization-tipPanel-em {
5682   margin: 0;
5683   font-weight: bold;
5684 }
5685
5686 .customization-tipPanel-contentImage {
5687   margin-top: 25px;
5688   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5689   min-width: 300px;
5690   max-width: 300px;
5691   min-height: 190px;
5692   max-height: 190px;
5693   display: -moz-box;
5694 }
5695
5696 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5697   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5698 }
5699
5700 .customization-tipPanel-link {
5701   -moz-appearance: none;
5702   background: transparent;
5703   border: none;
5704   box-shadow: none;
5705   color: #3333FF;
5706   margin: 0;
5707   cursor: pointer;
5708 }
5709
5710 .customization-tipPanel-link > .button-box > .button-text {
5711   margin: 0 !important;
5712 }
5713
5714 .customization-tipPanel-closeBox > .close-icon {
5715   -moz-appearance: none;
5716   border: 0;
5717   -moz-margin-end: -25px;
5718 }
5719
5720 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5721 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5722   list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5723 }
5724
5725 /* === END customizeTip.inc.css === */
5726
5727 /**
5728  * This next rule is a hack to disable subpixel anti-aliasing on all
5729  * labels during the customize mode transition. Subpixel anti-aliasing
5730  * on Windows with Direct2D layers acceleration is particularly slow to
5731  * paint, so this hack is how we sidestep that performance bottleneck.
5732  */
5733 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5734   transform: perspective(0.01px);
5735 }
5736
5737 #main-window[customize-entered] > #tab-view-deck {
5738   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5739   background-attachment: fixed;
5740 }
5741
5742 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5743   background-repeat: no-repeat;
5744   background-position: right top;
5745   background-attachment: fixed;
5746   /* The image will get set from CustomizeMode.jsm */
5747   background-image: none;
5748   background-color: transparent;
5749 }
5750
5751 #main-window[customization-lwtheme]:-moz-lwtheme {
5752   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5753   background-repeat: repeat;
5754   background-attachment: fixed;
5755   background-position: left top;
5756 }
5757
5758 #main-window[customize-entered] #browser-bottombox,
5759 #main-window[customize-entered] #customization-container {
5760   border-left: 1px solid #9C9CFF;
5761   border-right: 1px solid #9C9CFF;
5762   background-clip: padding-box;
5763 }
5764
5765 #main-window[customize-entered] #browser-bottombox {
5766   border-bottom: 1px solid #9C9CFF;
5767 }
5768
5769 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5770   margin-right: -2px;
5771 }
5772
5773 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5774   margin-left: -2px;
5775 }
5776
5777 /* End customization mode */
5778
5779 /* Private browsing indicators */
5780
5781 /**
5782  * Currently, we have two places where we put private browsing indicators on
5783  * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5784  * When tabsintitlebar is disabled, we draw the indicator at the end of the
5785  * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5786  * want the bottom border of the image to line up with the bottom of the window
5787  * caption buttons. That's why there's so much special-casing going on in here.
5788  */
5789 .private-browsing-indicator {
5790   display: none;
5791   pointer-events: none;
5792 }
5793
5794 #private-browsing-indicator-titlebar {
5795   display: block;
5796   position: absolute;
5797 }
5798
5799 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5800   display: block;
5801 }
5802
5803 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5804   display: -moz-box;
5805 }
5806
5807 #TabsToolbar > .private-browsing-indicator {
5808   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5809   -moz-margin-start: 4px;
5810   width: 48px;
5811 }
5812
5813 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5814  * mode, since the tabstrip "mimics" the titlebar in that case with its own
5815  * min/max/close window buttons.
5816  */
5817 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5818 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5819   background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5820   -moz-margin-end: 4px;
5821   width: 40px;
5822   height: 20px;
5823   position: relative;
5824 }
5825
5826 /* This one is for Linux */
5827 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5828   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5829   width: 48px;
5830 }
5831
5832 /* End private browsing indicators */
5833
5834 /* === BEGIN UITour.inc.css === */
5835
5836 /* UI Tour */
5837
5838 #UITourHighlightContainer {
5839   -moz-appearance: none;
5840   border: none;
5841   background-color: transparent;
5842   /* This is a buffer to compensate for the movement in the "wobble" effect */
5843   padding: 4px;
5844 }
5845
5846 #UITourHighlight {
5847   background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5848   border-radius: 40px;
5849   border: 1px solid #9C9CFF;
5850   /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5851      on Linux without an X compositor where opacity is either 0 or 1. */
5852   box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5853   min-height: 32px;
5854   min-width: 32px;
5855 }
5856
5857 #UITourTooltipBody {
5858   -moz-margin-end: 14px;
5859 }
5860
5861 #UITourTooltipBody > vbox {
5862   padding-top: 4px;
5863 }
5864
5865 #UITourTooltipIconContainer {
5866   -moz-margin-start: -16px;
5867 }
5868
5869 #UITourTooltipIcon {
5870   width: 48px;
5871   height: 48px;
5872   -moz-margin-start: 28px;
5873   -moz-margin-end: 28px;
5874 }
5875
5876 #UITourTooltipTitle,
5877 #UITourTooltipDescription {
5878   max-width: 20rem;
5879 }
5880
5881 #UITourTooltipTitle {
5882   font-size: 1.45rem;
5883   font-weight: bold;
5884   -moz-margin-start: 0;
5885   -moz-margin-end: 0;
5886   margin: 0 0 9px 0;
5887 }
5888
5889 #UITourTooltipDescription {
5890   -moz-margin-start: 0;
5891   -moz-margin-end: 0;
5892   font-size: 1.15rem;
5893   line-height: 1.8rem;
5894   margin-bottom: 0; /* Override global.css */
5895 }
5896
5897 #UITourTooltipClose {
5898   -moz-appearance: none;
5899   border: none;
5900   background-color: transparent;
5901   min-width: 0;
5902   -moz-margin-start: 4px;
5903   margin-top: -2px;
5904 }
5905
5906 #UITourTooltipClose > .toolbarbutton-text {
5907   display: none;
5908 }
5909
5910 #UITourTooltipButtons {
5911   -moz-box-pack: end;
5912   background-color: rgba(0,0,0,.2);
5913   border-top: 1px solid rgba(0,0,0,.4);
5914   margin: 24px -16px -16px;
5915   padding: 2em 15px;
5916 }
5917
5918 #UITourTooltipButtons > label,
5919 #UITourTooltipButtons > button {
5920   margin: 0 15px;
5921 }
5922
5923 #UITourTooltipButtons > label:first-child,
5924 #UITourTooltipButtons > button:first-child {
5925   -moz-margin-start: 0;
5926 }
5927
5928 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5929   width: 16px;
5930   height: 16px;
5931   -moz-margin-end: 5px;
5932 }
5933
5934 #UITourTooltipButtons > label,
5935 #UITourTooltipButtons > button .button-text {
5936   font-size: 1.15rem;
5937 }
5938
5939 #UITourTooltipButtons > button:not(.button-link) {
5940   -moz-appearance: none;
5941   background-color: #C09070;
5942   border-radius: 3000px;
5943   border: none;
5944   color: #000000;
5945   padding: 4px 30px;
5946   transition-property: background-color, color;
5947   transition-duration: 150ms;
5948 }
5949
5950 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5951   background-color: #FFCF00;
5952   color: #000000;
5953 }
5954
5955 #UITourTooltipButtons > label,
5956 #UITourTooltipButtons > button.button-link {
5957   -moz-appearance: none;
5958   background: transparent;
5959   border: none;
5960   box-shadow: none;
5961   color: rgba(0,0,0,0.35);
5962   padding-left: 10px;
5963   padding-right: 10px;
5964 }
5965
5966 #UITourTooltipButtons > button.button-link:hover {
5967   color: black;
5968 }
5969
5970 /* The primary button gets the same color as the customize button. */
5971 #UITourTooltipButtons > button.button-primary {
5972   background-color: #A06060; /* LCARS default button background color */
5973   color: #000000;
5974   padding-left: 30px;
5975   padding-right: 30px;
5976 }
5977
5978 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5979   background-color: #FFCF00;
5980   color: #000000;
5981 }
5982
5983 /* Notification overrides for Heartbeat UI */
5984
5985 notification.heartbeat {
5986   background-color: #A09090;
5987 /*  height: 40px;*/
5988 }
5989
5990 @keyframes pulse-onshow {
5991  0% {
5992    opacity: 0;
5993    transform: scale(1.0);
5994  }
5995  25% {
5996    opacity: 1;
5997    transform: scale(1.1);
5998  }
5999  50% {
6000    transform: scale(1.0);
6001  }
6002  75% {
6003    transform: scale(1.1);
6004  }
6005  100% {
6006    transform: scale(1.0);
6007  }
6008 }
6009
6010 @keyframes pulse-twice {
6011  0% {
6012    transform: scale(1.1);
6013  }
6014  50% {
6015    transform: scale(0.8);
6016  }
6017  100% {
6018    transform: scale(1);
6019  }
6020 }
6021
6022 .messageText.heartbeat {
6023   color: #000000;
6024 /*  text-shadow: none; */
6025   -moz-margin-start: 0px;
6026 }
6027
6028 .messageImage.heartbeat {
6029   width: 24px;
6030   height: 24px;
6031   -moz-margin-start: 8px;
6032   -moz-margin-end: 8px;
6033 }
6034
6035 .messageImage.heartbeat.pulse-onshow {
6036   animation-name: pulse-onshow;
6037   animation-duration: 1.5s;
6038   animation-iteration-count: 1;
6039   animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
6040 }
6041
6042 .messageImage.heartbeat.pulse-twice {
6043   animation-name: pulse-twice;
6044   animation-duration: 1s;
6045   animation-iteration-count: 2;
6046   animation-timing-function: linear;
6047 }
6048
6049 /* Learn More link styles */
6050 .heartbeat > .text-link {
6051   color: #3333FF;
6052   -moz-margin-start: 0px;
6053 }
6054
6055 .heartbeat > .text-link:hover {
6056   color: #9C9CFF;
6057   text-decoration: none;
6058 }
6059
6060 .heartbeat > .text-link:hover:active {
6061   color: #FF9F00;
6062 }
6063
6064 /* Heartbeat UI Rating Star Classes */
6065 .heartbeat > #star-rating-container {
6066   display: -moz-box;
6067 /*  margin-bottom: 4px;*/
6068 }
6069
6070 .heartbeat > #star-rating-container > #star5 {
6071   -moz-box-ordinal-group: 5;
6072 }
6073
6074 .heartbeat > #star-rating-container > #star4 {
6075   -moz-box-ordinal-group: 4;
6076 }
6077
6078 .heartbeat > #star-rating-container > #star3 {
6079   -moz-box-ordinal-group: 3;
6080 }
6081
6082 .heartbeat > #star-rating-container > #star2 {
6083   -moz-box-ordinal-group: 2;
6084 }
6085
6086 .heartbeat > #star-rating-container > .star-x  {
6087   background: url("chrome://browser/skin/heartbeat-star-off.svg");
6088   cursor: pointer;
6089   /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6090   -moz-margin-end: 4px !important;
6091   width: 16px;
6092   height: 16px;
6093 }
6094
6095 .heartbeat > #star-rating-container > .star-x:hover,
6096 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6097   background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6098 }
6099
6100 /* === END UITour.inc.css === */
6101
6102 #UITourTooltipButtons {
6103   /**
6104    * Override the --panel-arrowcontent-padding so the background extends
6105    * to the sides and bottom of the panel.
6106    */
6107   margin-left: -10px;
6108   margin-right: -10px;
6109   margin-bottom: -10px;
6110 }
6111
6112 /* === BEGIN contextmenu.inc.css === */
6113
6114 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6115 }
6116
6117 #context-navigation > .menuitem-iconic {
6118   -moz-box-flex: 1;
6119   -moz-box-pack: center;
6120   -moz-box-align: center;
6121 }
6122
6123 #context-navigation > .menuitem-iconic[disabled="true"] {
6124   background-color: transparent;
6125 }
6126
6127 #context-navigation > .menuitem-iconic > .menu-iconic-left {
6128   -moz-appearance: none;
6129 }
6130
6131 #context-back > .menu-iconic-left {
6132   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6133   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6134   -moz-image-region: rect(0, 54px, 18px, 36px);
6135 }
6136
6137 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
6138   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6139   -moz-image-region: rect(18px, 54px, 36px, 36px);
6140 }
6141
6142 #context-back[disabled="true"] > .menu-iconic-left {
6143   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6144   -moz-image-region: rect(36px, 54px, 54px, 36px);
6145 }
6146
6147 #context-forward > .menu-iconic-left {
6148   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6149   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6150   -moz-image-region: rect(0, 72px, 18px, 54px);
6151 }
6152
6153 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6154   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6155   -moz-image-region: rect(18px, 72px, 36px, 54px);
6156 }
6157
6158 #context-forward[disabled="true"] > .menu-iconic-left {
6159   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6160   -moz-image-region: rect(36px, 72px, 54px, 54px);
6161 }
6162
6163 #context-reload > .menu-iconic-left {
6164   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6165   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6166   -moz-image-region: rect(0, 14px, 14px, 0);
6167 }
6168
6169 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6170   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6171   -moz-image-region: rect(14px, 14px, 28px, 0);
6172 }
6173
6174 #context-reload[disabled="true"] > .menu-iconic-left {
6175   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6176   -moz-image-region: rect(28px, 14px, 42px, 0);
6177 }
6178
6179 #context-stop > .menu-iconic-left {
6180   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6181   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6182   -moz-image-region: rect(0, 28px, 14px, 14px);
6183 }
6184
6185 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6186   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6187   -moz-image-region: rect(14px, 28px, 28px, 14px);
6188 }
6189
6190 #context-stop[disabled="true"] > .menu-iconic-left {
6191   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6192   -moz-image-region: rect(28px, 28px, 42px, 14px);
6193 }
6194
6195 #context-bookmarkpage > .menu-iconic-left {
6196   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6197   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6198   -moz-image-region: rect(0, 144px, 18px, 126px);
6199 }
6200
6201 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6202   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6203   -moz-image-region: rect(18px, 144px, 36px, 126px);
6204 }
6205
6206 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6207   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6208   -moz-image-region: rect(36px, 144px, 54px, 126px);
6209 }
6210
6211 #context-bookmarkpage[starred=true] {
6212   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6213   -moz-image-region: rect(0px, 162px, 18px, 144px);
6214 }
6215
6216 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6217   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6218   -moz-image-region: rect(18px, 162px, 36px, 144px);
6219 }
6220
6221 #context-bookmarkpage[starred=true][disabled=true] {
6222   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6223   -moz-image-region: rect(36px, 162px, 54px, 144px);
6224 }
6225
6226 #context-back:-moz-locale-dir(rtl),
6227 #context-forward:-moz-locale-dir(rtl),
6228 #context-reload:-moz-locale-dir(rtl) {
6229   transform: scaleX(-1);
6230 }
6231
6232 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6233   width: 18px; /*16px;*/
6234   height: 18px; /*16px;*/
6235   margin: 7px;
6236 }
6237
6238 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6239 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6240   width: 14px;
6241   height: 14px;
6242   margin: 9px;
6243 }
6244
6245 #context-media-eme-learnmore {
6246   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6247 }
6248
6249 #context-media-eme-learnmore {
6250   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6251 }
6252
6253 /* === END contextmenu.inc.css === */
6254
6255 #context-navigation {
6256 }
6257
6258 #context-sep-navigation {
6259 /*  margin-top: -4px; */
6260 }
6261
6262 .browser-action-panel > .panel-arrowcontainer > .panel-arrowcontent {
6263   padding: 0;
6264 }
6265
6266 /* === BEGIN usercontext.inc.css === */
6267
6268 /* User Context UI browser styles */
6269
6270 #menu_newUserContextTabPersonal {
6271   list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6272 }
6273
6274 #menu_newUserContextTabWork {
6275   list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6276 }
6277
6278 #menu_newUserContextTabBanking {
6279   list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6280 }
6281
6282 #menu_newUserContextTabShopping {
6283   list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6284 }
6285
6286 /* URL Bar Decoration */
6287
6288 #userContext-indicator {
6289   height: 16px;
6290   width: 16px;
6291 }
6292
6293 #userContext-label {
6294   margin-inline-end: 3px;
6295   color: #A09090;
6296 }
6297
6298 #userContext-icons:not([usercontextid]) {
6299   display: none;
6300 }
6301
6302 #userContext-icons {
6303   -moz-box-align: center;
6304 }
6305
6306 /* Personal User Context */
6307 #userContext-icons[usercontextid="1"] > #userContext-label {
6308   color: #9C9CFF;
6309 }
6310 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6311   list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6312 }
6313
6314 /* Work User Context */
6315 #userContext-icons[usercontextid="2"] > #userContext-label {
6316   color: #FF9F00;
6317 }
6318 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6319   list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6320 }
6321
6322 /* Banking User Context */
6323 #userContext-icons[usercontextid="3"] > #userContext-label {
6324   color: #008484;
6325 }
6326 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6327   list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6328 }
6329
6330 /* Shopping User Context */
6331 #userContext-icons[usercontextid="4"] > #userContext-label {
6332   color: #E7ADE7;
6333 }
6334 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6335   list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6336 }
6337
6338 /* === END usercontext.inc.css === */