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, #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 #loop-button,
 914 #loop-button > .toolbarbutton-badge-stack {
 915   list-style-image: url("chrome://browser/skin/loop/toolbarfx.png");
 916   -moz-image-region: rect(0, 18px, 18px, 0);
 917 }
 918
 919 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]),
 920 #loop-button:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
 921   -moz-image-region: rect(0, 90px, 18px, 72px);
 922 }
 923
 924 #loop-button[state="disabled"],
 925 #loop-button[disabled="true"],
 926 #loop-button[state="disabled"] > .toolbarbutton-badge-stack,
 927 #loop-button[disabled="true"] > .toolbarbutton-badge-stack {
 928   -moz-image-region: rect(0, 36px, 18px, 18px);
 929 }
 930
 931 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]),
 932 #loop-button[disabled="true"]:-moz-any(:hover,:hover:active,[open]) > .toolbarbutton-badge-stack {
 933   -moz-image-region: rect(0, 126px, 18px, 108px);
 934 }
 935
 936 #loop-button:not([disabled="true"])[state="error"],
 937 #loop-button:not([disabled="true"])[state="error"] > .toolbarbutton-badge-stack {
 938   -moz-image-region: rect(0, 54px, 18px, 36px);
 939 }
 940
 941 #loop-button:not([disabled="true"])[state="action"],
 942 #loop-button:not([disabled="true"])[state="action"] > .toolbarbutton-badge-stack {
 943   -moz-image-region: rect(0, 72px, 18px, 54px);
 944 }
 945
 946 #loop-button:not([disabled="true"])[state="active"],
 947 #loop-button:not([disabled="true"])[state="active"] > .toolbarbutton-badge-stack {
 948   -moz-image-region: rect(0, 108px, 18px, 90px);
 949 }
 950
 951 #webide-button[cui-areatype="toolbar"] {
 952   -moz-image-region: rect(0, 738px, 18px, 720px);
 953 }
 954
 955 #webide-button[cui-areatype="toolbar"]:hover {
 956   -moz-image-region: rect(18px, 738px, 36px, 720px);
 957 }
 958
 959 #pocket-button[cui-areatype="toolbar"] {
 960   -moz-image-region: rect(0, 774px, 18px, 756px);
 961 }
 962
 963 #pocket-button[cui-areatype="toolbar"]:hover,
 964 #pocket-button[cui-areatype="toolbar"][open] {
 965   -moz-image-region: rect(18px, 774px, 36px, 756px);
 966 }
 967
 968 /* === END toolbarbuttons.inc.css === */
 969
 970 /* === BEGIN menupanel.inc.css === */
 971
 972 /* Menu panel and palette styles */
 973
 974 :root {
 975    /* avoid aero overrides with changed filenames */
 976   --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
 977   --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
 978 }
 979
 980 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
 981 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
 982           #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
 983           #social-share-button, #open-file-button, #find-button, #developer-button,
 984           #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
 985           #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
 986           #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
 987           #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #loop-button,
 988           #pocket-button)[cui-areatype="menu-panel"],
 989 toolbarpaletteitem[place="palette"] > :-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, #webide-button, #loop-button,
 996                                                 #pocket-button) {
 997   list-style-image: var(--menupanel-list-style-image);
 998 }
 999
1000 #home-button[cui-areatype="menu-panel"],
1001 toolbarpaletteitem[place="palette"] > #home-button {
1002   -moz-image-region: rect(0px, 128px, 32px, 96px);
1003 }
1004
1005 #home-button[cui-areatype="menu-panel"]:hover,
1006 toolbarpaletteitem[place="palette"] > #home-button:hover {
1007   -moz-image-region: rect(32px, 128px, 64px, 96px);
1008 }
1009
1010 #bookmarks-menu-button[cui-areatype="menu-panel"],
1011 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1012   -moz-image-region: rect(0px, 192px, 32px, 160px);
1013 }
1014
1015 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
1016 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
1017   -moz-image-region: rect(32px, 192px, 64px, 160px);
1018 }
1019
1020 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1021   -moz-image-region: rect(32px, 192px, 64px, 160px);
1022 }
1023
1024 #history-panelmenu[cui-areatype="menu-panel"],
1025 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1026   -moz-image-region: rect(0px, 224px, 32px, 192px);
1027 }
1028
1029 #history-panelmenu[cui-areatype="menu-panel"]:hover,
1030 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
1031   -moz-image-region: rect(32px, 224px, 64px, 192px);
1032 }
1033
1034 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1035   -moz-image-region: rect(32px, 224px, 64px, 192px);
1036 }
1037
1038 #downloads-button[cui-areatype="menu-panel"],
1039 toolbarpaletteitem[place="palette"] > #downloads-button {
1040   -moz-image-region: rect(0px, 256px, 32px, 224px);
1041 }
1042
1043 #downloads-button[cui-areatype="menu-panel"]:hover,
1044 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
1045   -moz-image-region: rect(32px, 256px, 64px, 224px);
1046 }
1047
1048 #add-ons-button[cui-areatype="menu-panel"],
1049 toolbarpaletteitem[place="palette"] > #add-ons-button {
1050   -moz-image-region: rect(0px, 288px, 32px, 256px);
1051 }
1052
1053 #add-ons-button[cui-areatype="menu-panel"]:hover,
1054 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
1055   -moz-image-region: rect(32px, 288px, 64px, 256px);
1056 }
1057
1058 #open-file-button[cui-areatype="menu-panel"],
1059 toolbarpaletteitem[place="palette"] > #open-file-button {
1060   -moz-image-region: rect(0px, 320px, 32px, 288px);
1061 }
1062
1063 #open-file-button[cui-areatype="menu-panel"]:hover,
1064 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
1065   -moz-image-region: rect(32px, 320px, 64px, 288px);
1066 }
1067
1068 #save-page-button[cui-areatype="menu-panel"],
1069 toolbarpaletteitem[place="palette"] > #save-page-button {
1070   -moz-image-region: rect(0px, 352px, 32px, 320px);
1071 }
1072
1073 #save-page-button[cui-areatype="menu-panel"]:hover,
1074 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1075   -moz-image-region: rect(32px, 352px, 64px, 320px);
1076 }
1077
1078 #sync-button[cui-areatype="menu-panel"],
1079 toolbarpaletteitem[place="palette"] > #sync-button {
1080   -moz-image-region: rect(0px, 384px, 32px, 352px);
1081 }
1082
1083 #sync-button[cui-areatype="menu-panel"]:hover,
1084 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1085   -moz-image-region: rect(32px, 384px, 64px, 352px);
1086 }
1087
1088 #sync-button[cui-areatype="menu-panel"][status="active"] {
1089   list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
1090   -moz-image-region: rect(0px, 32px, 32px, 0px);
1091 }
1092
1093 #feed-button[cui-areatype="menu-panel"],
1094 toolbarpaletteitem[place="palette"] > #feed-button {
1095   -moz-image-region: rect(0px, 416px, 32px, 384px);
1096 }
1097
1098 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1099 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1100   -moz-image-region: rect(32px, 416px, 64px, 384px);
1101 }
1102
1103 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1104 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1105   -moz-image-region: rect(64px, 416px, 96px, 384px);
1106 }
1107
1108 #social-share-button[cui-areatype="menu-panel"],
1109 toolbarpaletteitem[place="palette"] > #social-share-button {
1110   -moz-image-region: rect(0px, 448px, 32px, 416px);
1111 }
1112
1113 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1114 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1115   -moz-image-region: rect(32px, 448px, 64px, 416px);
1116 }
1117
1118 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1119 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1120   -moz-image-region: rect(64px, 448px, 96px, 416px);
1121 }
1122
1123 #characterencoding-button[cui-areatype="menu-panel"],
1124 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1125   -moz-image-region: rect(0px, 480px, 32px, 448px);
1126 }
1127
1128 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1129 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1130   -moz-image-region: rect(32px, 480px, 64px, 448px);
1131 }
1132
1133 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1134 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1135   -moz-image-region: rect(64px, 480px, 96px, 448px);
1136 }
1137
1138 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1139   -moz-image-region: rect(32px, 480px, 64px, 448px);
1140 }
1141
1142 #new-window-button[cui-areatype="menu-panel"],
1143 toolbarpaletteitem[place="palette"] > #new-window-button {
1144   -moz-image-region: rect(0px, 512px, 32px, 480px);
1145 }
1146
1147 #new-window-button[cui-areatype="menu-panel"]:hover,
1148 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1149   -moz-image-region: rect(32px, 512px, 64px, 480px);
1150 }
1151
1152 #e10s-button[cui-areatype="menu-panel"],
1153 toolbarpaletteitem[place="palette"] > #e10s-button {
1154   -moz-image-region: rect(0px, 512px, 32px, 480px);
1155 }
1156
1157 #e10s-button[cui-areatype="menu-panel"]:hover,
1158 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1159   -moz-image-region: rect(32px, 512px, 64px, 480px);
1160 }
1161
1162 #new-tab-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #new-tab-button {
1164   -moz-image-region: rect(0px, 544px, 32px, 512px);
1165 }
1166
1167 #new-tab-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1169   -moz-image-region: rect(32px, 544px, 64px, 512px);
1170 }
1171
1172 #privatebrowsing-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1174   -moz-image-region: rect(0px, 576px, 32px, 544px);
1175 }
1176
1177 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1178 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1179   -moz-image-region: rect(32px, 576px, 64px, 544px);
1180 }
1181
1182 #tabview-button[cui-areatype="menu-panel"],
1183 toolbarpaletteitem[place="palette"] > #tabview-button {
1184   -moz-image-region: rect(0px, 608px, 32px, 576px);
1185 }
1186
1187 #tabview-button[cui-areatype="menu-panel"]:hover,
1188 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1189   -moz-image-region: rect(32px, 608px, 64px, 576px);
1190 }
1191
1192 #find-button[cui-areatype="menu-panel"],
1193 toolbarpaletteitem[place="palette"] > #find-button {
1194   -moz-image-region: rect(0px, 640px, 32px, 608px);
1195 }
1196
1197 #find-button[cui-areatype="menu-panel"]:hover,
1198 toolbarpaletteitem[place="palette"] > #find-button:hover {
1199   -moz-image-region: rect(32px, 640px, 64px, 608px);
1200 }
1201
1202 #print-button[cui-areatype="menu-panel"],
1203 toolbarpaletteitem[place="palette"] > #print-button {
1204   -moz-image-region: rect(0px, 672px, 32px, 640px);
1205 }
1206
1207 #print-button[cui-areatype="menu-panel"]:hover,
1208 toolbarpaletteitem[place="palette"] > #print-button:hover {
1209   -moz-image-region: rect(32px, 672px, 64px, 640px);
1210 }
1211
1212 #fullscreen-button[cui-areatype="menu-panel"],
1213 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1214   -moz-image-region: rect(0px, 704px, 32px, 672px);
1215 }
1216
1217 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1218 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1219   -moz-image-region: rect(32px, 704px, 64px, 672px);
1220 }
1221
1222 #developer-button[cui-areatype="menu-panel"],
1223 toolbarpaletteitem[place="palette"] > #developer-button {
1224   -moz-image-region: rect(0px, 736px, 32px, 704px);
1225 }
1226
1227 #developer-button[cui-areatype="menu-panel"]:hover,
1228 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1229   -moz-image-region: rect(32px, 736px, 64px, 704px);
1230 }
1231
1232 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1233   -moz-image-region: rect(32px, 736px, 64px, 704px);
1234 }
1235
1236 #preferences-button[cui-areatype="menu-panel"],
1237 toolbarpaletteitem[place="palette"] > #preferences-button {
1238   -moz-image-region: rect(0px, 768px, 32px, 736px);
1239 }
1240
1241 #preferences-button[cui-areatype="menu-panel"]:hover,
1242 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1243   -moz-image-region: rect(32px, 768px, 64px, 736px);
1244 }
1245
1246 #email-link-button[cui-areatype="menu-panel"],
1247 toolbarpaletteitem[place="palette"] > #email-link-button {
1248   -moz-image-region: rect(0, 800px, 32px, 768px);
1249 }
1250
1251 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1252 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1253   -moz-image-region: rect(32px, 800px, 64px, 768px);
1254 }
1255
1256 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1257 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1258   -moz-image-region: rect(64px, 800px, 96px, 768px);
1259 }
1260
1261 #sidebar-button[cui-areatype="menu-panel"],
1262 toolbarpaletteitem[place="palette"] > #sidebar-button {
1263   -moz-image-region: rect(0, 864px, 32px, 832px);
1264 }
1265
1266 #sidebar-button[cui-areatype="menu-panel"]:hover,
1267 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1268 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1269   -moz-image-region: rect(32px, 864px, 64px, 832px);
1270 }
1271
1272 #panic-button[cui-areatype="menu-panel"],
1273 toolbarpaletteitem[place="palette"] > #panic-button {
1274   -moz-image-region: rect(0, 896px, 32px, 864px);
1275 }
1276
1277 #panic-button[cui-areatype="menu-panel"]:hover,
1278 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1279 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1280   -moz-image-region: rect(32px, 896px, 64px, 864px);
1281 }
1282
1283 #webide-button[cui-areatype="menu-panel"],
1284 toolbarpaletteitem[place="palette"] > #webide-button {
1285   -moz-image-region: rect(0px, 960px, 32px, 928px);
1286 }
1287
1288 #webide-button[cui-areatype="menu-panel"]:hover,
1289 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1290   -moz-image-region: rect(32px, 960px, 64px, 928px);
1291 }
1292
1293 #pocket-button[cui-areatype="menu-panel"],
1294 toolbarpaletteitem[place="palette"] > #pocket-button {
1295   -moz-image-region: rect(0px, 992px, 32px, 960px);
1296 }
1297
1298 #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1299   -moz-image-region: rect(32px, 992px, 64px, 960px);
1300 }
1301
1302 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1303   -moz-image-region: rect(0, 832px, 32px, 800px);
1304 }
1305
1306 #loop-button[cui-areatype="menu-panel"],
1307 toolbarpaletteitem[place="palette"] > #loop-button {
1308   list-style-image: url("chrome://browser/skin/loop/menuPanel.png");
1309   -moz-image-region: rect(0, 32px, 32px, 0);
1310 }
1311
1312 /* Make sure that the state icons are not shown in the customization palette. */
1313 toolbarpaletteitem[place="palette"] > #loop-button {
1314   -moz-image-region: rect(0, 32px, 32px, 0) !important;
1315 }
1316
1317 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"]):-moz-any(:hover,:hover:active,[open]) {
1318   -moz-image-region: rect(0, 160px, 32px, 128px);
1319 }
1320
1321 #loop-button[cui-areatype="menu-panel"][state="disabled"],
1322 #loop-button[cui-areatype="menu-panel"][disabled="true"] {
1323   -moz-image-region: rect(0, 64px, 32px, 32px);
1324 }
1325
1326 #loop-button[cui-areatype="menu-panel"][disabled="true"]:-moz-any(:hover,:hover:active,[open]) {
1327   -moz-image-region: rect(0, 224px, 32px, 192px);
1328 }
1329
1330 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="error"] {
1331   -moz-image-region: rect(0, 96px, 32px, 64px);
1332 }
1333
1334 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="action"] {
1335   -moz-image-region: rect(0, 128px, 32px, 96px);
1336 }
1337
1338 #loop-button[cui-areatype="menu-panel"]:not([disabled="true"])[state="active"] {
1339   -moz-image-region: rect(0, 192px, 32px, 160px);
1340 }
1341
1342 /* Wide panel control icons */
1343
1344 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1345 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1346 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1347 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1348   list-style-image: var(--menupanel-small-list-style-image);
1349 }
1350
1351 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1352 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1353   -moz-image-region: rect(0px, 32px, 16px, 16px);
1354 }
1355
1356 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1357 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1358   -moz-image-region: rect(16px, 32px, 32px, 16px);
1359 }
1360
1361 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1362 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1363   -moz-image-region: rect(32px, 32px, 48px, 16px);
1364 }
1365
1366 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1367 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1368   -moz-image-region: rect(0px, 48px, 16px, 32px);
1369 }
1370
1371 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1372 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1373   -moz-image-region: rect(16px, 48px, 32px, 32px);
1374 }
1375
1376 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1377 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1378   -moz-image-region: rect(32px, 48px, 48px, 32px);
1379 }
1380
1381 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1382 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1383   -moz-image-region: rect(0px, 64px, 16px, 48px);
1384 }
1385
1386 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1387 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1388   -moz-image-region: rect(16px, 64px, 32px, 48px);
1389 }
1390
1391 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1392 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1393   -moz-image-region: rect(32px, 64px, 48px, 48px);
1394 }
1395
1396 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1397 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1398   -moz-image-region: rect(0px, 80px, 16px, 64px);
1399 }
1400
1401 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1402 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1403   -moz-image-region: rect(16px, 80px, 32px, 64px);
1404 }
1405
1406 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1407 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1408   -moz-image-region: rect(32px, 80px, 48px, 64px);
1409 }
1410
1411 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1412 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1413   -moz-image-region: rect(0px, 96px, 16px, 80px);
1414 }
1415
1416 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1417 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1418   -moz-image-region: rect(16px, 96px, 32px, 80px);
1419 }
1420
1421 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1422 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1423   -moz-image-region: rect(32px, 96px, 48px, 80px);
1424 }
1425
1426 #add-share-provider {
1427   list-style-image: var(--menupanel-small-list-style-image);
1428   -moz-image-region: rect(0px, 96px, 16px, 80px);
1429 }
1430
1431 /* === END menupanel.inc.css === */
1432
1433 .toolbarbutton-1:not([type="menu-button"]) {
1434   -moz-box-orient: vertical;
1435 }
1436
1437 .toolbarbutton-1,
1438 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1439 /*  min-width: 36px;
1440   min-height: 36px;*/
1441 }
1442
1443 .toolbarbutton-1,
1444 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1445 .toolbarbutton-1[disabled="true"]:hover:active,
1446 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1447   padding: 1px 2px;
1448 }
1449
1450 .toolbarbutton-1:hover:active,
1451 .toolbarbutton-1[open="true"],
1452 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1453   padding-top: 2px;
1454   padding-bottom: 0px;
1455   -moz-padding-start: 3px;
1456   -moz-padding-end: 1px;
1457 }
1458
1459 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1460 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1461 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1462 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1463 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1464 }
1465
1466 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1467 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1468 }
1469
1470 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1471 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1472 }
1473
1474 .toolbarbutton-1 > .toolbarbutton-icon,
1475 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1476 }
1477
1478 .findbar-button,
1479 #nav-bar .toolbarbutton-1,
1480 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1481 }
1482
1483 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1484 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1485 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1486 }
1487
1488 #nav-bar #PanelUI-menu-button {
1489 /*  -moz-padding-start: 7px;
1490   -moz-padding-end: 5px;*/
1491 }
1492
1493 #nav-bar .toolbarbutton-1[type=panel],
1494 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1495 /*  padding-left: 5px;
1496   padding-right: 5px;*/
1497 }
1498
1499 #nav-bar .toolbarbutton-1 > menupopup {
1500 /*  margin-top: -3px;*/
1501 }
1502
1503 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1504   margin-top: -4px;
1505 }
1506
1507 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1508 /*  -moz-padding-end: 0;*/
1509 }
1510
1511 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1512 /*  -moz-padding-start: 0;
1513   -moz-box-align: center;*/
1514 }
1515
1516 .findbar-button > .toolbarbutton-text,
1517 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1518 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1519 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1520 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1521 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1522 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1523 /*  padding: 2px 6px;
1524   border: 1px solid;
1525   border-color: transparent;
1526   transition-property: background-color, border-color;
1527   transition-duration: 150ms;*/
1528 }
1529 /*
1530 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1531 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1532 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1533   padding: 3px 7px;
1534 }
1535 */
1536
1537 /* Help SDK icons fit: */
1538 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1539 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1540   width: 16px;
1541 }
1542
1543 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1544   /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1545   width: 32px;
1546 }
1547
1548 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1549 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1550 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1551 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1552 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1553 /*  -moz-padding-end: 17px;*/
1554 }
1555
1556 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1557 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1558   /* horizontal padding + border + icon width */
1559 /*  max-width: 43px;*/
1560 }
1561
1562 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1563 }
1564
1565 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1566 }
1567
1568 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1569 }
1570
1571 #nav-bar .toolbaritem-combined-buttons {
1572 /*  margin-left: 2px;
1573   margin-right: 2px;*/
1574 }
1575
1576 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1577 /*  padding-left: 0;
1578   padding-right: 0;*/
1579 }
1580
1581 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1582 #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 {
1583 /*
1584   content: "";
1585   display: -moz-box;
1586   width: 1px;
1587   height: 16px;
1588   -moz-margin-end: -1px;
1589 */
1590 }
1591
1592 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1593 }
1594
1595 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1596 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1597 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1598 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1599 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1600 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1601 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1602 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1603 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1604 }
1605
1606 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1607 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1608 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1609 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1610 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1611 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1612 }
1613
1614 #TabsToolbar .toolbarbutton-1,
1615 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1616 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1617 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1618 }
1619
1620 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1621 #TabsToolbar .toolbarbutton-1[open],
1622 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1623 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1624 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1625 }
1626
1627 /* unified back/forward button */
1628
1629 #forward-button {
1630   -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1631 }
1632
1633 #forward-button > menupopup {
1634   margin-top: 1px !important;
1635 }
1636
1637 #forward-button > .toolbarbutton-icon {
1638   background-clip: padding-box !important;
1639   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1640   /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1641 }
1642
1643 #forward-button {
1644   -moz-margin-start: -4px !important;
1645   padding-left: 5px;
1646   padding-right: 5px;
1647   margin-top: 3px;
1648   margin-bottom: 3px;
1649   border-radius: 0 10000px 10000px 0;
1650 }
1651
1652 #forward-button:-moz-locale-dir(rtl) {
1653   border-radius: 10000px 0 0 10000px;
1654 }
1655
1656 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1657   transition: margin-left 150ms ease-out;
1658 }
1659
1660 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1661   margin-left: -27px !important;
1662 }
1663
1664 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1665   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1666   transition-delay: 100s;
1667 }
1668
1669 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1670   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1671   margin-left: -27.01px !important;
1672 }
1673
1674 #back-button {
1675 /*  padding-top: 3px !important;
1676   padding-bottom: 3px !important;
1677   -moz-padding-start: 5px !important;
1678   -moz-padding-end: 0 !important;*/
1679   position: relative;
1680   z-index: 1;
1681   border-radius: 10000px;
1682   width: 30px;
1683   height: 30px;
1684   margin-top: -2px;
1685   margin-bottom: -2px;
1686 }
1687
1688 #back-button:-moz-locale-dir(rtl) {
1689 }
1690
1691 #back-button > menupopup {
1692   margin-top: -1px !important;
1693 }
1694
1695 #back-button > .toolbarbutton-icon {
1696   border-radius: 10000px !important;
1697   background-clip: padding-box !important;
1698 /*  background-color: hsla(210,25%,98%,.08) !important;
1699   padding: 6px !important;
1700   border-style: none !important;
1701   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1702               0 0 0 1px hsla(210,4%,10%,.25);*/
1703   transition-property: background-color, box-shadow !important;
1704   transition-duration: 250ms !important;
1705 }
1706
1707 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1708 /*  background-color: hsla(210,4%,10%,.08) !important;*/
1709 }
1710
1711 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1712 #back-button[open="true"] > .toolbarbutton-icon {
1713 /*  background-color: hsla(210,4%,10%,.12) !important;
1714   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1715               0 0 0 1px hsla(210,4%,10%,.25),
1716               0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1717 }
1718
1719 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1720   transform: scaleX(-1);
1721 }
1722 /*
1723 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1724 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1725   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1726 }
1727
1728 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1729 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1730   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1731 }
1732
1733 #home-button.bookmark-item {
1734   list-style-image: url("chrome://browser/skin/Toolbar.png");
1735 }
1736
1737 #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),
1738 #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),
1739 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1740 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1741 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1742 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1743 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1744   position: relative;
1745   z-index: 1;
1746   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1747 }
1748
1749 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1750 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1751   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1752 }
1753 */
1754
1755 #downloads-button > .toolbarbutton-icon {
1756   margin: 0;
1757 }
1758
1759 /* tabview menu item */
1760
1761 #menu_tabview {
1762   list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1763   -moz-image-region: rect(1px, 89px, 17px, 73px);
1764 }
1765
1766 #menu_tabview[groups="0"] {
1767   -moz-image-region: rect(1px, 17px, 17px, 1px);
1768 }
1769
1770 #menu_tabview[groups="1"] {
1771   -moz-image-region: rect(1px, 35px, 17px, 19px);
1772 }
1773
1774 #menu_tabview[groups="2"] {
1775   -moz-image-region: rect(1px, 53px, 17px, 37px);
1776 }
1777
1778 #menu_tabview[groups="3"] {
1779   -moz-image-region: rect(1px, 71px, 17px, 55px);
1780 }
1781
1782 /* undo close tab menu item */
1783 #alltabs_undoCloseTab {
1784   list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1785 }
1786
1787 @media (min-resolution: 1.1dppx) {
1788   #alltabs_undoCloseTab {
1789     list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1790   }
1791   #alltabs_undoCloseTab > .toolbarbutton-icon {
1792     width: 16px;
1793   }
1794 }
1795
1796 /* zoom control text (reset) button special case: */
1797
1798 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1799   /* To make this line up with the icons, it needs the same height (18px) +
1800    * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1801    * increase in text sizes would break things...
1802    */
1803   min-height: 20px;
1804 }
1805
1806 /* ::::: fullscreen window controls ::::: */
1807
1808 #window-controls {
1809   -moz-margin-start: 4px;
1810 }
1811
1812 #minimize-button,
1813 #restore-button,
1814 #close-button {
1815 /*  list-style-image: url("chrome://global/skin/icons/windowControls.png");
1816   padding: 0; */
1817 }
1818
1819 #minimize-button {
1820   list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1821 }
1822
1823 #minimize-button:hover {
1824   list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1825 }
1826
1827 #restore-button {
1828   list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1829 }
1830
1831 #restore-button:hover {
1832   list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1833 }
1834
1835 #close-button {
1836   list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1837 }
1838
1839 #close-button:hover {
1840   list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1841 }
1842
1843 /* ::::: Location Bar ::::: */
1844
1845 #urlbar,
1846 .searchbar-textbox {
1847   border-radius: 5px;
1848   margin: 2px 0;
1849   -moz-margin-start: 3px;
1850 }
1851
1852 #urlbar {
1853   /* make color as light as possible to deal with dark non-domain parts */
1854   color: #FFBFFF;
1855 }
1856
1857 /* overlap the urlbar's border */
1858 #PopupAutoCompleteRichResult {
1859   margin-top: -1px;
1860 }
1861
1862 #urlbar:-moz-lwtheme,
1863 .searchbar-textbox:-moz-lwtheme {
1864   /* background-color: rgba(255,255,255,.8);
1865   @navbarTextboxCustomBorder@
1866   color: black; */
1867 }
1868
1869 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1870 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1871 /*  background-color: rgba(255,255,255,.9);*/
1872 }
1873
1874 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1875 .searchbar-textbox:-moz-lwtheme[focused] {
1876 /*  background-color: white;*/
1877 }
1878
1879 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1880 /*  -moz-border-start: none;
1881   margin-left: 0;*/
1882 }
1883
1884 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1885 /*  border-top-left-radius: 0;
1886   border-bottom-left-radius: 0; */
1887 }
1888
1889 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1890 /*  border-top-right-radius: 0;
1891   border-bottom-right-radius: 0; */
1892 }
1893
1894 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1895 /*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1896 /*  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1897 }
1898
1899 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1900 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1901   /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1902   transform: scaleX(-1);
1903 }
1904
1905 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1906   -moz-box-direction: reverse;
1907 }
1908
1909 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1910 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1911   color: #E7ADE7;
1912 }
1913
1914 #urlbar-container {
1915   -moz-box-orient: horizontal;
1916   -moz-box-align: stretch;
1917 }
1918
1919 .urlbar-textbox-container {
1920   -moz-box-align: stretch;
1921 }
1922
1923 .urlbar-input-box {
1924   -moz-margin-start: 0;
1925 }
1926
1927 #urlbar-icons {
1928   -moz-box-align: center;
1929 }
1930
1931 .urlbar-icon {
1932   padding: 0 2px;
1933   /* 16x16 icon with border-box sizing */
1934   width: 20px;
1935   height: 16px;
1936 }
1937
1938 .search-go-container {
1939   padding: 2px;
1940 }
1941
1942 .search-go-container > .search-go-button {
1943   padding: 0;
1944 }
1945
1946 #urlbar-search-footer {
1947   border-top: 1px solid #A09090;
1948 }
1949
1950 #urlbar-search-settings {
1951 }
1952
1953 #urlbar-search-settings:hover {
1954 }
1955
1956 #urlbar-search-settings:hover:active {
1957 }
1958
1959 #urlbar-search-splitter {
1960   min-width: 6px;
1961   -moz-margin-start: -3px;
1962   border: none;
1963   background: transparent;
1964 }
1965
1966 #urlbar-search-splitter + #urlbar-container > #urlbar,
1967 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1968   -moz-margin-start: 0;
1969 }
1970
1971 #urlbar-display-box {
1972 }
1973
1974 .urlbar-display {
1975   -moz-border-end: 1px solid #9C9CFF;
1976   -moz-margin-end: 3px;
1977   margin-top: 0;
1978   margin-bottom: 0;
1979   -moz-margin-start: 0;
1980   color: #8050B0;
1981 }
1982
1983 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1984
1985 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1986   border-bottom: 1px solid #A09090;
1987   background-color: #000000;
1988   padding: 6px 0;
1989   -moz-padding-start: 44px;
1990   -moz-padding-end: 6px;
1991   background-image: url("chrome://browser/skin/info.svg");
1992   background-clip: padding-box;
1993   background-position: 20px center;
1994   background-repeat: no-repeat;
1995   background-size: 16px 16px;
1996 }
1997
1998 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1999   background-position: right 20px center;
2000 }
2001
2002 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
2003   margin: 0;
2004   padding: 0;
2005 }
2006
2007 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
2008   -moz-margin-start: 0;
2009 }
2010
2011 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2012   -moz-appearance: none;
2013   min-width: 80px;
2014   border-radius: 3px;
2015   padding: 4px 16px;
2016   margin: 0;
2017   -moz-margin-start: 10px;
2018 }
2019
2020 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
2021 }
2022
2023 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
2024 }
2025
2026 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
2027 }
2028
2029 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
2030 }
2031
2032 /* === END urlbarSearchSuggestionsNotification.inc.css === */
2033
2034 #search-container {
2035   min-width: calc(54px + 11ch);
2036 }
2037
2038 /* identity box */
2039
2040 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
2041   var(--identity-box-verified-background-color);
2042 }
2043
2044 #identity-box:-moz-focusring {
2045   outline: 1px dotted #008484;
2046   outline-offset: -1px;
2047 }
2048
2049 #identity-box.verifiedDomain:-moz-focusring,
2050 #identity-box.verifiedIdentity:-moz-focusring {
2051   outline-color: #000000;
2052 }
2053
2054 /* Location bar dropmarker */
2055
2056 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
2057   background-color: transparent;
2058 }
2059
2060 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
2061 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
2062 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
2063   border: none;
2064   border-radius: 0px;
2065   transition: opacity 0.15s ease;
2066 }
2067
2068 #navigator-toolbox:not(:hover) .urlbar-history-dropmarker {
2069   opacity: 0;
2070 }
2071
2072 .urlbar-history-dropmarker:hover {
2073 }
2074
2075 .urlbar-history-dropmarker:hover:active,
2076 .urlbar-history-dropmarker[open="true"] {
2077 }
2078
2079 /* page proxy icon */
2080
2081 /* === BEGIN identity-block.inc.css === */
2082
2083 #identity-box {
2084   --identity-box-verified-color: #008484;
2085   /* Default theme does different color per channel, we can't as they do it build-time. */
2086   --identity-box-chrome-color: #9C9CFF;
2087
2088   border-inline-end: 1px solid --urlbar-separator-color);
2089   font-size: .9em;
2090   border-radius: 2px;
2091   padding: 3px 5px;
2092   margin-inline-end: 4px;
2093   overflow: hidden;
2094   /* The latter two properties have a transition to handle the delayed hiding of
2095      the forward button when hovered. */
2096   transition: background-color 150ms ease, padding-left, padding-right;
2097 }
2098
2099 #identity-box:-moz-locale-dir(ltr) {
2100   border-top-right-radius: 0;
2101   border-bottom-right-radius: 0;
2102 }
2103
2104 #identity-box:-moz-locale-dir(rtl) {
2105   border-top-left-radius: 0;
2106   border-bottom-left-radius: 0;
2107 }
2108
2109 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
2110   color: var(--identity-box-chrome-color);
2111   -moz-border-end: 1px solid var(--identity-box-chrome-color);
2112 }
2113
2114 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2115   color: var(--identity-box-verified-color);
2116   -moz-border-end: 1px solid var(--identity-box-verified-color);
2117 }
2118
2119 #notification-popup-box:not([hidden]) + #identity-box {
2120   padding-inline-start: 10px !important;
2121   border-radius: 0;
2122 }
2123
2124 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2125 /*   border-radius: 0; */
2126   -moz-padding-start: 2px;
2127   -moz-padding-end: 2px;
2128   -moz-margin-end: 1px;
2129 }
2130
2131 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2132     #notification-popup-box[hidden] + #identity-box {
2133   padding-inline-start: 2px;
2134 }
2135
2136 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2137     #notification-popup-box[hidden] + #identity-box {
2138   /* Forward button hiding is delayed when hovered, so we should use the same
2139      delay for the identity box. We handle both horizontal paddings (for LTR and
2140      RTL), the latter two delays here are for padding-left and padding-right. */
2141   transition-delay: 0s, 100s, 100s;
2142 }
2143
2144 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2145     #notification-popup-box[hidden] + #identity-box {
2146   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2147   padding-inline-start: 2.01px;
2148 }
2149
2150 /* TRACKING PROTECTION ICON */
2151
2152 #tracking-protection-icon {
2153   width: 16px;
2154   height: 16px;
2155   margin-inline-start: 0;
2156   list-style-image: url("chrome://browser/skin/tracking-protection-16.svg");
2157   opacity: 1;
2158 }
2159
2160 #tracking-protection-icon[state="loaded-tracking-content"] {
2161   list-style-image: url("chrome://browser/skin/tracking-protection-disabled-16.svg");
2162 }
2163
2164 #tracking-protection-icon[animate] {
2165   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2166 }
2167
2168 #tracking-protection-icon:not([state]) {
2169   margin-inline-start: -18px;
2170   pointer-events: none;
2171   opacity: 0;
2172   /* Only animate the shield in, when it disappears hide it immediately. */
2173   transition: none;
2174 }
2175
2176 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
2177   visibility: collapse;
2178 }
2179
2180 /* MAIN IDENTITY ICON */
2181
2182 #page-proxy-favicon {
2183   width: 16px;
2184   height: 16px;
2185   list-style-image: url("chrome://browser/skin/identity-not-secure.svg");
2186   margin: 2px;
2187 }
2188
2189 .chromeUI > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2190   list-style-image: url("chrome://branding/content/identity-icons-brand.svg");
2191 }
2192
2193 .verifiedDomain > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2194 .verifiedIdentity > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2195   list-style-image: url("chrome://browser/skin/identity-secure.svg");
2196 }
2197
2198 .insecureLoginForms > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2199 .mixedActiveContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2200   list-style-image: url("chrome://browser/skin/identity-mixed-active-loaded.svg");
2201 }
2202
2203 .weakCipher > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2204 .mixedDisplayContent > #identity-icons > #page-proxy-favicon[pageproxystate="valid"],
2205 .mixedDisplayContentLoadedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2206   list-style-image: url("chrome://browser/skin/identity-mixed-passive-loaded.svg");
2207 }
2208
2209 .mixedActiveBlocked > #identity-icons > #page-proxy-favicon[pageproxystate="valid"] {
2210   list-style-image: url("chrome://browser/skin/identity-mixed-active-blocked.svg");
2211 }
2212
2213 #page-proxy-favicon[pageproxystate="invalid"] {
2214   opacity: 0.3;
2215 }
2216
2217 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
2218   list-style-image: url("chrome://branding/content/icon64.png");
2219 }
2220
2221 #identity-popup-brandName {
2222   font-weight: bold;
2223   font-size: 1.25em;
2224   margin-top: .5em;
2225   margin-bottom: .5em;
2226 }
2227
2228 #identity-popup-content-box {
2229   max-width: 50ch;
2230 }
2231
2232 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icons > #page-proxy-favicon {
2233   -moz-image-region: inherit;
2234   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2235   width: 16px;
2236   height: 16px;
2237   opacity: 1;
2238 }
2239
2240 /* MAIN IDENTITY ICON */
2241
2242 #identity-icon {
2243   width: 16px;
2244   height: 16px;
2245   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2246 }
2247
2248 #identity-box:hover > #identity-icon,
2249 #identity-box[open=true] > #identity-icon {
2250   list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2251 }
2252
2253 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2254   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2255 }
2256
2257 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2258   opacity: 0.3;
2259 }
2260
2261 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2262   -moz-image-region: inherit;
2263   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2264   width: 16px;
2265   height: 16px;
2266   opacity: 1;
2267 }
2268
2269 /* TRACKING PROTECTION ICON */
2270
2271 #tracking-protection-icon {
2272   width: 16px;
2273   height: 16px;
2274   margin-inline-start: 2px;
2275   margin-inline-end: 0;
2276   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2277   opacity: 1;
2278 }
2279
2280 #tracking-protection-icon[state="loaded-tracking-content"] {
2281   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2282 }
2283
2284 #tracking-protection-icon[animate] {
2285   transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2286 }
2287
2288 #tracking-protection-icon:not([state]) {
2289   margin-inline-end: -18px;
2290   pointer-events: none;
2291   opacity: 0;
2292   /* Only animate the shield in, when it disappears hide it immediately. */
2293   transition: none;
2294 }
2295
2296 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2297   visibility: collapse;
2298 }
2299
2300 /* CONNECTION ICON */
2301
2302 #connection-icon {
2303   width: 16px;
2304   height: 16px;
2305   margin-inline-start: 2px;
2306   visibility: collapse;
2307 }
2308
2309 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2310 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2311   list-style-image: url(chrome://browser/skin/identity-secure.svg);
2312   visibility: visible;
2313 }
2314
2315 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2316 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2317   list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2318   visibility: visible;
2319 }
2320
2321 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2322 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2323 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2324   list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2325   visibility: visible;
2326 }
2327
2328 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2329   list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2330   visibility: visible;
2331 }
2332
2333 /* === END identity-block.inc.css === */
2334
2335 #page-proxy-favicon {
2336   -moz-image-region: rect(0, 16px, 16px, 0);
2337 }
2338
2339 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2340 /*  -moz-margin-end: 1px;*/
2341 }
2342
2343 #identity-box:hover > #page-proxy-favicon {
2344   -moz-image-region: rect(0, 32px, 16px, 16px);
2345 }
2346
2347 #identity-box:hover:active > #page-proxy-favicon,
2348 #identity-box[open=true] > #page-proxy-favicon {
2349   -moz-image-region: rect(0, 48px, 16px, 32px);
2350 }
2351
2352 #identity-box:hover {
2353   background-color: #FFCF00;
2354   color: #000000;
2355 }
2356
2357 #identity-box:hover:active,
2358 #identity-box[open=true] {
2359   background-color: #FF9F00;
2360   color: #000000;
2361 }
2362
2363 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2364 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2365 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2366   background-color: #9C9CFF;
2367   color: #000000;
2368 }
2369
2370 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2371 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2372 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2373   background-color: #008484;
2374   color: #000000;
2375 }
2376
2377 /* autocomplete */
2378
2379 #treecolAutoCompleteImage {
2380   max-width: 36px;
2381 }
2382
2383 .ac-result-type-bookmark,
2384 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2385   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2386   -moz-image-region: rect(0px 16px 16px 0px);
2387   width: 16px;
2388   height: 16px;
2389 }
2390
2391 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2392 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2393 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
2394 }
2395
2396 .ac-result-type-keyword,
2397 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2398 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2399   list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2400   width: 16px;
2401   height: 16px;
2402 }
2403
2404   .ac-result-type-keyword[selected="true"],
2405   .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2406   richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2407     list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2408   }
2409
2410 .ac-result-type-tag,
2411 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2412   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2413   width: 16px;
2414   height: 16px;
2415 }
2416
2417 .ac-comment,
2418 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2419 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2420   font-size: 1.05em;
2421 }
2422
2423 .ac-extra > .ac-comment,
2424 .ac-url-text,
2425 .ac-action-text {
2426   font-size: 1em;
2427 }
2428
2429 .ac-url-text,
2430 .ac-action-text {
2431   color: #9C9CFF;
2432 }
2433
2434 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2435   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2436   -moz-image-region: rect(0, 16px, 16px, 0);
2437   padding: 0 3px;
2438   width: 22px;
2439   height: 16px;
2440 }
2441
2442 @media (min-resolution: 1.1dppx) {
2443   richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2444     list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2445     -moz-image-region: rect(0, 32px, 32px, 0);
2446   }
2447 }
2448
2449 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2450   -moz-image-region: rect(16px, 16px, 32px, 0);
2451 }
2452
2453 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2454   color: #8050B0;
2455 }
2456
2457 .ac-comment[selected="true"],
2458 .ac-url-text[selected="true"],
2459 .ac-action-text[selected="true"] {
2460   color: inherit !important;
2461 }
2462
2463 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2464 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2465 {
2466   color: #8050B0;
2467   font-size: smaller;
2468 }
2469
2470 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2471   border-top: 1px solid #9C9CFF;
2472 }
2473
2474 /* combined go/reload/stop button in location bar */
2475
2476 #urlbar-go-button,
2477 #urlbar-reload-button,
2478 #urlbar-stop-button {
2479   border-style: none;
2480   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2481 /*  padding: 0 9px;*/
2482   margin-inline-start: 0px;
2483   border-inline-start: 1px solid var(--urlbar-separator-color);
2484   border-image: linear-gradient(transparent 15%,
2485                                 var(--urlbar-separator-color) 15%,
2486                                 var(--urlbar-separator-color) 85%,
2487                                 transparent 85%);
2488   border-image-slice: 1;
2489 }
2490
2491 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2492   border-top-left-radius: 0px;
2493   border-bottom-left-radius: 0px;
2494 }
2495
2496 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2497   border-top-right-radius: 0px;
2498   border-bottom-right-radius: 0px;
2499 }
2500
2501 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2502 #urlbar-reload-button:not(:hover) {
2503   -moz-border-start-style: none;
2504   -moz-padding-start: 3px;
2505 }
2506
2507 #urlbar-reload-button {
2508   -moz-image-region: rect(0px, 14px, 14px, 0px);
2509 }
2510
2511 #urlbar-reload-button[disabled=true] {
2512   -moz-image-region: rect(28px, 14px, 42px, 0px);
2513 }
2514
2515 #urlbar-reload-button:not([disabled=true]):hover {
2516   -moz-image-region: rect(14px, 14px, 28px, 0px);
2517 }
2518
2519 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2520   transform: scaleX(-1);
2521 }
2522
2523 #urlbar-go-button {
2524   -moz-image-region: rect(0, 42px, 14px, 28px);
2525 }
2526
2527 #urlbar-go-button:hover {
2528   -moz-image-region: rect(14px, 42px, 28px, 28px);
2529 }
2530
2531 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2532   transform: scaleX(-1);
2533 }
2534
2535 #urlbar-stop-button {
2536   -moz-image-region: rect(0px, 28px, 14px, 14px);
2537 }
2538
2539 #urlbar-stop-button:hover {
2540   -moz-image-region: rect(14px, 28px, 28px, 14px);
2541 }
2542
2543 @media (min-resolution: 1.1dppx) {
2544   #urlbar-go-button,
2545   #urlbar-reload-button,
2546   #urlbar-stop-button {
2547     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2548   }
2549
2550   #urlbar-go-button > .toolbarbutton-icon,
2551   #urlbar-reload-button > .toolbarbutton-icon,
2552   #urlbar-stop-button > .toolbarbutton-icon {
2553     width: 14px;
2554   }
2555
2556   #urlbar-go-button {
2557     -moz-image-region: rect(0, 84px, 28px, 56px);
2558   }
2559
2560   #urlbar-go-button:hover {
2561     -moz-image-region: rect(28px, 84px, 56px, 56px);
2562   }
2563
2564   #urlbar-go-button:hover:active {
2565     -moz-image-region: rect(56px, 84px, 84px, 56px);
2566   }
2567
2568   #urlbar-reload-button {
2569     -moz-image-region: rect(0, 28px, 28px, 0);
2570   }
2571
2572   #urlbar-reload-button:not([disabled]):hover {
2573     -moz-image-region: rect(28px, 28px, 56px, 0);
2574   }
2575
2576   #urlbar-reload-button:not([disabled]):hover:active {
2577     -moz-image-region: rect(56px, 28px, 84px, 0);
2578   }
2579
2580   #urlbar-stop-button {
2581     -moz-image-region: rect(0, 56px, 28px, 28px);
2582   }
2583
2584   #urlbar-stop-button:not([disabled]):hover {
2585     -moz-image-region: rect(28px, 56px, 56px, 28px);
2586   }
2587
2588   #urlbar-stop-button:hover:active {
2589     -moz-image-region: rect(56px, 56px, 84px, 28px);
2590   }
2591 }
2592
2593 /* popup blocker button */
2594
2595 #page-report-button {
2596   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2597   -moz-image-region: rect(0, 16px, 16px, 0);
2598 }
2599
2600 #page-report-button:hover ,
2601 #page-report-button:hover:active,
2602 #page-report-button[open="true"] {
2603   -moz-image-region: rect(0, 32px, 16px, 16px);
2604 }
2605
2606 /* Reader mode button */
2607
2608 #reader-mode-button {
2609   list-style-image: url("chrome://browser/skin/readerMode.svg");
2610   -moz-image-region: rect(0, 16px, 16px, 0);
2611 }
2612
2613 #reader-mode-button:hover,
2614 #reader-mode-button[readeractive]:hover {
2615   -moz-image-region: rect(0, 32px, 16px, 16px);
2616 }
2617
2618 #reader-mode-button:hover:active,
2619 #reader-mode-button[readeractive] {
2620   -moz-image-region: rect(0, 48px, 16px, 32px);
2621 }
2622
2623 /* social share panel */
2624
2625 .social-share-frame {
2626   min-width: 756px;
2627   height: 150px;
2628 }
2629
2630 #share-container {
2631   min-width: 756px;
2632   background-color: white;
2633   background-repeat: no-repeat;
2634   background-position: center center;
2635 }
2636 #share-container[loading] {
2637   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2638 }
2639 #share-container > browser {
2640   transition: opacity 150ms ease-in-out;
2641   opacity: 1;
2642 }
2643 #share-container[loading] > browser {
2644   opacity: 0;
2645 }
2646
2647 .social-share-toolbar {
2648   border-bottom: 1px solid #9C9CFF;
2649   padding: 2px;
2650 }
2651
2652 #social-share-provider-buttons {
2653   padding: 0;
2654   margin: 0;
2655 }
2656
2657 .share-provider-button {
2658   padding: 5px;
2659   margin: 2px;
2660 }
2661
2662 .share-provider-button > .toolbarbutton-text {
2663   display: none;
2664 }
2665 .share-provider-button > .toolbarbutton-icon {
2666   width: 16px;
2667   min-height: 16px;
2668   max-height: 16px;
2669 }
2670
2671 /* fixup corners for share panel */
2672 .social-panel > .social-panel-frame {
2673   border-radius: inherit;
2674 }
2675
2676 #social-share-panel {
2677   min-height: 100px;
2678   min-width: 766px;
2679 }
2680
2681 #share-container,
2682 .social-share-frame {
2683   border-top-left-radius: 0;
2684   border-bottom-left-radius: inherit;
2685   border-top-right-radius: 0;
2686   border-bottom-right-radius: inherit;
2687 }
2688
2689 #social-share-panel > .social-share-toolbar {
2690   border-top-left-radius: inherit;
2691   border-top-right-radius: inherit;
2692 }
2693
2694 #social-share-provider-buttons {
2695   border-top-left-radius: inherit;
2696   border-top-right-radius: inherit;
2697 }
2698
2699 /* social recommending panel */
2700
2701 #social-mark-button {
2702   -moz-image-region: rect(0, 16px, 16px, 0);
2703 }
2704
2705 /* bookmarks menu-button */
2706
2707 #bookmarks-menu-button.bookmark-item {
2708   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2709   -moz-image-region: rect(0px 16px 16px 0px);
2710 }
2711
2712 #bookmarks-menu-button.bookmark-item[starred] {
2713   -moz-image-region: rect(0px 32px 16px 16px);
2714 }
2715
2716 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2717   padding-top: 2px;
2718   padding-bottom: 2px;
2719 }
2720
2721 #BMB_bookmarksPopup[side="top"],
2722 #BMB_bookmarksPopup[side="bottom"] {
2723   margin-left: -20px;
2724   margin-right: -20px;
2725 }
2726
2727 #BMB_bookmarksPopup[side="left"],
2728 #BMB_bookmarksPopup[side="right"] {
2729   margin-top: -20px;
2730   margin-bottom: -20px;
2731 }
2732
2733 /* bookmarking panel */
2734
2735 #editBookmarkPanelStarIcon {
2736   list-style-image: url("chrome://browser/skin/places/starred48.png");
2737   width: 48px;
2738   height: 48px;
2739 }
2740
2741 #editBookmarkPanelStarIcon[unstarred] {
2742   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2743 }
2744
2745 #editBookmarkPanelTitle {
2746   font-size: 130%;
2747 }
2748
2749 #editBookmarkPanelHeader,
2750 #editBookmarkPanelContent {
2751   margin-bottom: .5em;
2752 }
2753
2754 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2755 #editBMPanel_folderTree {
2756   min-width: 27em;
2757 }
2758
2759 .panel-promo-box {
2760   margin: 5px 0 -6px;
2761   padding: 5px 0;
2762   border-top: 1px solid #9C9CFF;
2763   border-bottom-left-radius: 5px;
2764   border-bottom-right-radius: 5px;
2765 }
2766
2767 .panel-promo-icon {
2768   list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2769   -moz-margin-end: 10px;
2770   vertical-align: middle;
2771 }
2772
2773 .panel-promo-closebutton {
2774   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2775   -moz-margin-end: -3px;
2776   margin-top: -3px;
2777 }
2778
2779 .panel-promo-closebutton:hover {
2780   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2781 }
2782
2783 .panel-promo-closebutton:hover:active {
2784   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2785 }
2786
2787 .panel-promo-closebutton > .toolbarbutton-text {
2788   padding: 0;
2789 }
2790
2791 /* ::::: content area ::::: */
2792
2793 #sidebar-box {
2794   background-color: #9C9CFF;
2795   color: #000000;
2796 }
2797
2798 #sidebar {
2799   background-color: #000000;
2800 }
2801
2802 #sidebar-splitter {
2803   -moz-margin-start: 0;
2804 }
2805
2806 #sidebar-header {
2807   color: #000000;
2808   padding: 2px;
2809 }
2810
2811 #sidebar-title {
2812   -moz-padding-start: 0px;
2813 }
2814
2815 #sidebar-header > .close-icon {
2816 /*  padding: 4px 2px;
2817   margin: 0;
2818   border: none;*/
2819   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2820 }
2821
2822 #sidebar-header > .close-icon:hover,
2823 #sidebar-header > .close-icon:hover:active {
2824   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2825 }
2826
2827 #sidebar-splitter:-moz-locale-dir(ltr),
2828 #sidebar:-moz-locale-dir(ltr) {
2829   border-radius: 0 5px 0 0;
2830 }
2831
2832 #sidebar-splitter:-moz-locale-dir(rtl),
2833 #sidebar:-moz-locale-dir(rtl) {
2834   border-radius: 5px 0 0 0;
2835 }
2836
2837 .browserContainer > findbar {
2838 /*
2839   background-color: -moz-dialog;
2840   color: -moz-DialogText;
2841 */
2842 }
2843
2844 /* Tabstrip */
2845
2846 #TabsToolbar {
2847   min-height: 0;
2848   padding: 0;
2849   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2850 }
2851
2852 #TabsToolbar .toolbar-holder {
2853   background-color: #000000; /* correct effect of being an actual toolbar */
2854 }
2855
2856 #main-window[disablechrome] #TabsToolbar,
2857 #TabsToolbar[tabsontop="false"] {
2858   border-bottom: 1px solid #008484;
2859 }
2860
2861 /* === BEGIN tabs.inc.css === */
2862
2863 :root {
2864   /* --tab-toolbar-navbar-overlap: 1px; */
2865   /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2866   /* --tab-min-height: 31px; */
2867 }
2868 #TabsToolbar {
2869   /* --tab-stroke-background-size: auto 100%; */
2870 }
2871
2872 .tabbrowser-tab,
2873 .tabs-newtab-button,
2874 #TabsToolbar > #new-tab-button {
2875   margin-top: 0px;
2876 }
2877
2878 .tabbrowser-tab {
2879   padding: 1px 4px 2px;
2880 }
2881
2882 .tabbrowser-tab:first-of-type {
2883   -moz-margin-start: 2px;
2884 }
2885
2886 .tabs-newtab-button,
2887 #TabsToolbar > #new-tab-button {
2888   border-radius: 8px 8px 0px 0px;
2889   -moz-margin-start: 0;
2890 }
2891
2892 .tabs-newtab-button:not(:hover),
2893 #TabsToolbar > #new-tab-button:not(:hover) {
2894   background-color: #C09070;
2895 }
2896
2897 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2898 .tabbrowser-tab[visuallyselected=true] {
2899 /*  position: relative;
2900   z-index: 2;*/
2901 }
2902
2903 .tab-background-middle {
2904 }
2905
2906 .tab-content {
2907 }
2908
2909 .tab-content[pinned] {
2910 }
2911
2912 .tab-throbber,
2913 .tab-icon-image,
2914 .tab-icon-sound,
2915 .tab-close-button {
2916 }
2917
2918 .tab-throbber,
2919 .tab-icon-image {
2920   height: 16px;
2921   width: 16px;
2922   -moz-margin-end: 3px;
2923 }
2924
2925 .tab-icon-image {
2926   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2927 }
2928
2929 .tab-icon-overlay {
2930   width: 16px;
2931   height: 16px;
2932   margin-top: -8px;
2933   -moz-margin-start: -15px;
2934   position: relative;
2935 }
2936
2937 .tab-icon-overlay[crashed] {
2938   list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2939 }
2940
2941 .tab-icon-overlay[soundplaying],
2942 .tab-icon-overlay[muted]:not([crashed]) {
2943   border-radius: 10px;
2944 }
2945
2946 .tab-icon-overlay[soundplaying]:hover,
2947 .tab-icon-overlay[muted]:hover {
2948   background-color: #FFCF00;
2949 }
2950
2951 .tab-icon-overlay[soundplaying] {
2952   display: -moz-box;
2953   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2954 }
2955
2956 .tab-icon-overlay[muted]:not([crashed]) {
2957   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2958 }
2959
2960 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2961   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2962 }
2963
2964
2965 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2966   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2967 }
2968
2969 .tab-throbber[busy] {
2970   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2971 }
2972
2973 .tab-throbber[progress] {
2974   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2975 }
2976
2977 .tab-throbber[pinned],
2978 .tab-icon-image[pinned] {
2979   -moz-margin-start: 2px;
2980   -moz-margin-end: 2px;
2981 }
2982
2983 .tab-label {
2984   /* this needs to add up to the 16px of the icon image */
2985   height: 12px;
2986   margin-top: 2px !important;
2987   margin-bottom: 2px !important;
2988 }
2989
2990 .tab-icon-sound {
2991   -moz-margin-start: 4px;
2992   width: 16px;
2993   height: 16px;
2994   padding: 0;
2995 }
2996
2997 .tab-icon-sound[muted] {
2998   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2999 }
3000
3001 .tab-icon-sound[muted]:hover {
3002   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3003 }
3004
3005 .tab-icon-sound[muted]:hover:active {
3006   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3007 }
3008
3009 .tab-icon-sound[soundplaying] {
3010   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
3011 }
3012
3013 .tab-icon-sound[soundplaying]:hover {
3014   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
3015 }
3016
3017 .tab-icon-sound[soundplaying]:hover:active {
3018   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
3019 }
3020
3021 .tab-icon-sound[muted] {
3022   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
3023 }
3024
3025 .tab-icon-sound[muted]:hover {
3026   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
3027 }
3028
3029 .tab-icon-sound[muted]:hover:active {
3030   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
3031 }
3032
3033 .tab-icon-sound[visuallyselected=true][soundplaying] {
3034   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3035 }
3036
3037 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
3038   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
3039 }
3040
3041 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
3042   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
3043 }
3044
3045 .tab-icon-sound[visuallyselected=true][muted] {
3046   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3047 }
3048
3049 .tab-icon-sound[visuallyselected=true][muted]:hover {
3050   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
3051 }
3052
3053 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
3054   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
3055 }
3056
3057 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
3058   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
3059 }
3060
3061 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
3062   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
3063 }
3064
3065 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
3066   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
3067 }
3068
3069 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
3070   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
3071 }
3072
3073 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
3074   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
3075 }
3076
3077 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
3078   list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
3079 }
3080
3081 .tab-close-button {
3082   margin-top: 1px;
3083   padding: 0;
3084 }
3085
3086 .tab-background,
3087 .tabs-newtab-button {
3088   /* overlap the tab curves */
3089 }
3090
3091 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
3092 }
3093
3094 /* Tab Overflow */
3095 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
3096 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3097 }
3098
3099 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
3100 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
3101 }
3102
3103 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
3104 }
3105
3106 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
3107 }
3108
3109 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
3110 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
3111 }
3112
3113 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
3114 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
3115 }
3116
3117 .tab-background-start[visuallyselected=true]::after,
3118 .tab-background-start[visuallyselected=true]::before,
3119 .tab-background-start,
3120 .tab-background-end,
3121 .tab-background-end[visuallyselected=true]::after,
3122 .tab-background-end[visuallyselected=true]::before {
3123 }
3124
3125 .tabbrowser-tab:not([visuallyselected=true]),
3126 .tabbrowser-tab:-moz-lwtheme {
3127 }
3128
3129 /* tabbrowser-tab focus ring */
3130 .tabbrowser-tab:focus {
3131   outline: 1px dotted;
3132 }
3133
3134 /* Selected tab */
3135
3136 .tabbrowser-tab[visuallyselected="true"] {
3137 }
3138
3139 /* End selected tab */
3140
3141 /* User Context UI - change tab decoration depending on userContextId.
3142    Defaults to gray for unknown usercontextids. */
3143 .tabbrowser-tab[usercontextid] {
3144   background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3145   background-size: auto 2px;
3146   background-repeat: no-repeat;
3147 }
3148
3149 /* Personal User Context */
3150 .tabbrowser-tab[usercontextid="1"] {
3151   background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3152 }
3153 /* Work User Context */
3154 .tabbrowser-tab[usercontextid="2"] {
3155   background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3156 }
3157 /* Banking User Context */
3158 .tabbrowser-tab[usercontextid="3"] {
3159   background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3160 }
3161 /* Shopping User Context */
3162 .tabbrowser-tab[usercontextid="4"] {
3163   background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3164 }
3165
3166 /* Tab pointer-events */
3167 /*
3168 .tabbrowser-tab {
3169   pointer-events: none;
3170 }
3171
3172 .tab-background-middle,
3173 .tabs-newtab-button,
3174 .tab-icon-overlay[soundplaying],
3175 .tab-icon-overlay[muted]:not([crashed]),
3176 .tab-icon-sound,
3177 .tab-close-button {
3178   pointer-events: auto;
3179 }
3180 */
3181 /* Pinned tabs */
3182
3183 /*
3184 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3185 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3186 */
3187 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3188   background-color: #E7ADE7;
3189 }
3190
3191 .tab-label[attention]:not([visuallyselected="true"]) {
3192   font-weight: bold;
3193 }
3194
3195 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="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 chatbox[src^="about:loopconversation#"] .chat-minimize-button {
4904   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-white");
4905 }
4906
4907 chatbox[src^="about:loopconversation#"] .chat-swap-button {
4908   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-white");
4909 }
4910
4911 .chat-loop-hangup {
4912   list-style-image: url("chrome://browser/skin/social/chat-icons.svg#exit-white");
4913   background-color: #FF0000;
4914   border: 1px solid #FFC000;
4915   border-top-right-radius: 4px;
4916   width: 32px;
4917   height: 26px;
4918   margin-top: -6px;
4919   margin-bottom: -5px;
4920   -moz-margin-start: 6px;
4921   -moz-margin-end: -5px;
4922 }
4923
4924 .chat-toolbarbutton.chat-loop-hangup:-moz-any(:hover,:hover:active) {
4925   background-color: #FFCF00;
4926   border-color: #FF0000;
4927 }
4928
4929 .chat-title {
4930   color: #000000;
4931   text-shadow: none;
4932   cursor: inherit;
4933 }
4934
4935 chatbox[src^="about:loopconversation#"] .chat-title {
4936 /*  color: white;*/
4937 }
4938
4939 .chat-titlebar {
4940   background-color: #9C9CFF;
4941   color: #000000;
4942   height: 26px;
4943   min-height: 26px;
4944   width: 100%;
4945   margin: 0;
4946   padding: 5px 4px;
4947   border: 1px solid #008484;
4948   border-bottom: 0;
4949   border-top-left-radius: 4px;
4950   border-top-right-radius: 4px;
4951   cursor: pointer;
4952   background-color: #A09090;
4953 }
4954
4955 .chat-titlebar[selected] {
4956   background-color: #008484;
4957 }
4958
4959 chatbox[src^="about:loopconversation#"] > .chat-titlebar {
4960   background-color: #008484;
4961   border-color: #008484;
4962 }
4963
4964 .chat-titlebar > .notification-anchor-icon {
4965   margin-left: 2px;
4966   margin-right: 2px;
4967 }
4968
4969 .chat-titlebar[minimized="true"] {
4970   border-bottom: none;
4971 }
4972
4973 .chat-titlebar[selected] {
4974   background-color: #008484;
4975 }
4976
4977 .chat-titlebar[activity] {
4978   background-color: #E7ADE7;
4979 }
4980
4981 .chat-frame {
4982   padding: 0;
4983   margin: 0;
4984   overflow: hidden;
4985 }
4986
4987 .chatbar-button {
4988   list-style-image: url("chrome://browser/skin/social/services-16.png");
4989   background-color: #000000;
4990   border: none;
4991   margin: 0;
4992   padding: 2px;
4993   height: 21px;
4994   width: 21px;
4995   border-top: 1px solid #008484;
4996   -moz-border-end: 1px solid #008484;
4997 }
4998
4999 @media (min-resolution: 2dppx) {
5000   .chatbar-button {
5001     list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
5002   }
5003 }
5004
5005 .chatbar-button:hover {
5006   background-color: #FFCF00;
5007 }
5008 .chatbar-button[open="true"] {
5009   background-color: #FF9F00;
5010 }
5011
5012 .chatbar-button[activity]:not([open]) {
5013   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%);
5014 }
5015
5016 .chatbar-button > .toolbarbutton-icon {
5017   width: 16px;
5018 }
5019
5020 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5021   width: auto;
5022   height: auto;
5023   max-height: 16px;
5024   max-width: 16px;
5025 }
5026
5027 .chatbar-button > .toolbarbutton-icon {
5028   opacity: .6;
5029   -moz-margin-end: 0;
5030 }
5031 .chatbar-button:hover > .toolbarbutton-icon,
5032 .chatbar-button[open="true"] > .toolbarbutton-icon {
5033   opacity: 1;
5034 }
5035
5036 .chatbar-button:hover,
5037 .chatbar-button[open="true"] {
5038 }
5039
5040 .chatbar-button > .toolbarbutton-text,
5041 .chatbar-button > .toolbarbutton-menu-dropmarker {
5042   display: none;
5043 }
5044
5045 .chatbar-button[activity]:not([open="true"]) {
5046   background-color: #E7ADE7;
5047 }
5048
5049 .chatbar-button > menupopup > menuitem[activity] {
5050   font-weight: bold;
5051 }
5052
5053 .chatbar-innerbox {
5054   background: transparent;
5055   overflow: hidden;
5056 }
5057
5058 chatbar {
5059   -moz-margin-end: 20px;
5060 }
5061
5062 chatbox {
5063   -moz-margin-start: 4px;
5064   background-color: transparent;
5065 }
5066
5067 chatbar > chatbox {
5068   /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
5069      go round nicely. */
5070 /*  border-top-left-radius: 4px;
5071   border-top-right-radius: 4px;*/
5072   /* Offset the chatbox the same amount as the box-shadows' spread, to make it
5073      visible. */
5074 /*  -moz-margin-end: 5px;*/
5075 }
5076
5077 chatbox[minimized="true"] {
5078   width: 160px;
5079   height: 20px;
5080 }
5081
5082 window > chatbox {
5083   -moz-margin-start: 0px;
5084   margin: 0px;
5085   border: none;
5086   padding: 0px;
5087 }
5088
5089 /* === END chat.inc.css === */
5090
5091 /* === BEGIN plugin-doorhanger.inc.css === */
5092
5093 /**
5094  * Plugin Doorhanger Styles
5095  */
5096
5097 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
5098   padding: 6px 1px 2px;
5099 }
5100
5101 .click-to-play-plugins-notification-center-box {
5102 }
5103
5104 .plugin-popupnotification-centeritem:nth-child(odd) {
5105 /*  background-color: rgba(0,0,0,0.1);*/
5106 }
5107
5108 .center-item-label {
5109   margin-bottom: 0;
5110   text-overflow: ellipsis;
5111 }
5112
5113 .center-item-warning-icon {
5114   background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
5115   background-repeat: no-repeat;
5116   width: 16px;
5117   height: 15px;
5118   -moz-margin-start: 6px;
5119 }
5120
5121 .click-to-play-plugins-notification-button-container {
5122 }
5123
5124 .click-to-play-popup-button {
5125   width: 50%;
5126 }
5127
5128 .click-to-play-plugins-notification-description-box {
5129   margin-left: 5px;
5130   margin-right: 5px;
5131   margin-top: 0;
5132   padding-bottom: 3px;
5133 }
5134
5135 .click-to-play-plugins-outer-description {
5136   margin-top: 1px;
5137 }
5138
5139 .click-to-play-plugins-notification-link,
5140 .center-item-link {
5141   margin: 0;
5142 }
5143
5144 .messageImage[value="plugin-hidden"] {
5145   list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
5146 }
5147
5148 /* Keep any changes to this style in sync with pluginProblem.css */
5149 notification.pluginVulnerable {
5150 }
5151
5152 notification.pluginVulnerable .messageImage {
5153   list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
5154 }
5155
5156 /* === END plugin-doorhanger.inc.css === */
5157
5158 /* === BEGIN login-doorhanger.inc.css === */
5159
5160 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
5161   /* Since we display a sliding subview that extends to the border, we cannot
5162    * keep the default padding of arrow panels. We use the same padding in the
5163    * individual content views instead. Since we removed the padding, we also
5164    * have to ensure the contents are clipped to the border box. */
5165   padding: 0;
5166   overflow: hidden;
5167 }
5168
5169 #login-fill-mainview,
5170 #login-fill-details {
5171   padding: var(--panel-arrowcontent-padding);
5172 }
5173
5174 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
5175   transform: translateX(-14px);
5176 }
5177
5178 #login-fill-mainview,
5179 #login-fill-details {
5180   transition: transform 150ms;
5181 }
5182
5183 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
5184   transform: translateX(105%);
5185 }
5186
5187 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
5188   transform: translateX(-105%);
5189 }
5190
5191 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
5192   background-color: hsla(240,39%,100%,.1);
5193 }
5194
5195 #login-fill-testing {
5196   color: #FF0000;
5197   font-weight: bold;
5198 }
5199
5200 #login-fill-list {
5201   border: 1px solid #9C9CFF;
5202   max-height: 20em;
5203 }
5204
5205 .login-fill-item[disabled] {
5206   color: #8050B0;
5207   background-color: #000000;
5208 }
5209
5210 .login-fill-item[disabled][selected] {
5211   background-color: #008484;
5212 }
5213
5214 .login-hostname {
5215   margin: 4px;
5216   font-weight: bold;
5217 }
5218
5219 .login-fill-item.different-hostname > .login-hostname {
5220   color: #A09090;
5221   font-style: italic;
5222 }
5223
5224 .login-username {
5225   margin: 4px;
5226   color: #A09090;
5227 }
5228
5229 #login-fill-details {
5230   padding: 4px;
5231   background: var(--panel-arrowcontent-background);
5232   color: var(--panel-arrowcontent-color);
5233   background-clip: padding-box;
5234   border-left: 1px solid #9C9CFF;
5235   -moz-margin-start: 38px;
5236 }
5237
5238 /* === END login-doorhanger.inc.css === */
5239
5240 /* === BEGIN customizeMode.inc.css === */
5241
5242 /* Customization mode */
5243
5244 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5245   margin-bottom: 1em;
5246 }
5247
5248 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5249 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5250 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5251   margin-left: 1em;
5252   margin-right: 1em;
5253 }
5254
5255 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5256   pointer-events: none;
5257 }
5258
5259 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5260 #PanelUI-contents > .panel-customization-placeholder {
5261   -moz-outline-radius: 2.5px;
5262   outline: 1px dashed transparent;
5263 }
5264
5265 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5266   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5267   -moz-box-ordinal-group: 0;
5268   content: "";
5269   display: -moz-box;
5270   height: 100%;
5271   left: 0;
5272   outline-offset: -2px;
5273   pointer-events: none;
5274   position: absolute;
5275   top: 0;
5276   width: 100%;
5277 }
5278
5279 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5280    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5281    offset from the bottom effectively the same as other targets (-2px). */
5282 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5283 /*  top: -2px;*/
5284 }
5285
5286 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5287 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5288 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5289 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5290   position: relative;
5291 }
5292
5293 /* Most target outlines are shown on hover and drag over but the panel menu uses
5294    placeholders instead. */
5295 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5296 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5297 /* nav-bar and panel outlines are always shown */
5298 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5299   outline-color: #A09090;
5300 }
5301
5302 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5303   transition: outline-color 250ms linear;
5304 }
5305
5306 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5307   transition: outline-color 250ms linear;
5308   outline-color: #9C9CFF;
5309 }
5310
5311 #PanelUI-contents > .panel-customization-placeholder {
5312   cursor: auto;
5313   outline-offset: -5px;
5314 }
5315
5316 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5317   min-width: 100px;
5318 /*  padding-left: 10px;
5319   padding-right: 10px;*/
5320 }
5321
5322 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5323   padding: 0 2em 2em;
5324 }
5325
5326 #customization-container {
5327   background-color: #000000;
5328   color: #FF9F00;
5329 }
5330
5331 #customization-palette,
5332 #customization-empty {
5333   padding: 0 15px 15px;
5334 }
5335
5336 #customization-header {
5337   font-size: 1.75em;
5338   line-height: 1.75em;
5339   color: #9C9CFF;
5340   font-weight: 200;
5341   margin: 25px 25px 12px;
5342   padding-bottom: 12px;
5343   border-bottom: 1px solid #A09090;
5344 }
5345
5346 #customization-panel-container {
5347   padding: 10px 10px 0px;
5348 }
5349
5350 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5351 #customization-footer {
5352   /*background-color: rgb(236,236,236);*/
5353 }
5354
5355 #customization-footer {
5356   border-top: 1px solid #9C9CFF;
5357   padding: 10px;
5358 }
5359
5360 .customizationmode-button {
5361   margin: 5px;
5362 }
5363
5364 .customizationmode-button:hover {
5365 }
5366
5367 #customization-titlebar-visibility-button[checked],
5368 #customization-devedition-theme-button[checked] {
5369   background-color: #008484;
5370 }
5371
5372 #customization-titlebar-visibility-button[checked]:hover,
5373 #customization-devedition-theme-button[checked]:hover {
5374   background-color: #FFCF00;
5375 }
5376
5377 #customization-titlebar-visibility-button[checked]:hover:active,
5378 #customization-devedition-theme-button[checked]:hover:active {
5379   background-color: #FF9F00;
5380 }
5381
5382 .customizationmode-button[disabled="true"] {
5383 }
5384
5385 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5386 .customizationmode-button > .button-box > .button-icon {
5387 /*  height: 24px;*/
5388 }
5389
5390 #customization-titlebar-visibility-button {
5391   list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5392   -moz-image-region: rect(0, 16px, 16px, 0);
5393 }
5394
5395 #customization-titlebar-visibility-button:hover {
5396   -moz-image-region: rect(16px, 16px, 32px, 0);
5397 }
5398
5399 #customization-lwtheme-button,
5400 #customization-titlebar-visibility-button  {
5401   padding: 0px 5px;
5402 }
5403
5404 #customization-titlebar-visibility-button > .button-box {
5405   padding-top: 0;
5406   padding-bottom: 1px;
5407 }
5408
5409 #customization-titlebar-visibility-button:hover:active > .button-box {
5410   padding-top: 1px;
5411   padding-bottom: 0;
5412 }
5413
5414 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5415 #customization-titlebar-visibility-button > .button-box > .button-text {
5416   /* Sadly, button.css thinks its margins are perfect for everyone. */
5417   -moz-margin-start: 5px !important;
5418 }
5419
5420 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5421   width: 20px;
5422   height: 20px;
5423   border-radius: 2px;
5424   background-size: contain;
5425 }
5426
5427 #customization-titlebar-visibility-button > .button-box > .button-icon {
5428   vertical-align: middle;
5429 }
5430
5431 #customization-titlebar-visibility-button[checked] {
5432   -moz-image-region: rect(0, 32px, 16px, 16px);
5433   background-color: #008484;
5434 }
5435
5436 #customization-titlebar-visibility-button[checked]:hover {
5437   -moz-image-region: rect(16px, 32px, 32px, 16px);
5438   background-color: #FFCF00;
5439 }
5440
5441 #customization-titlebar-visibility-button[checked]:hover:active {
5442   background-color: #FF9F00;
5443 }
5444
5445 @media (min-resolution: 1.1dppx) {
5446   #customization-titlebar-visibility-button {
5447     list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5448     -moz-image-region: rect(0, 48px, 48px, 0);
5449   }
5450
5451   #customization-titlebar-visibility-button:hover {
5452     -moz-image-region: rect(48px, 48px, 96px, 0);
5453   }
5454
5455   #customization-titlebar-visibility-button[checked] {
5456     -moz-image-region: rect(0, 96px, 48px, 48px);
5457   }
5458
5459   #customization-titlebar-visibility-button[checked]:hover {
5460     -moz-image-region: rect(48px, 96px, 96px, 48px);
5461   }
5462 }
5463
5464 #main-window[customize-entered] #customization-panel-container {
5465   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5466   background-position: left top;
5467   background-repeat: repeat;
5468   background-size: auto;
5469   background-attachment: fixed;
5470 }
5471
5472 toolbarpaletteitem[place="toolbar"] {
5473   transition: border-width 250ms ease-in-out;
5474 }
5475
5476 toolbarpaletteitem[mousedown] {
5477   outline: 1px solid #008484;
5478   cursor: -moz-grabbing;
5479   opacity: 0.8;
5480 }
5481
5482 .panel-customization-placeholder,
5483 toolbarpaletteitem[place="palette"],
5484 toolbarpaletteitem[place="panel"] {
5485   transition: transform .3s ease-in-out;
5486 }
5487
5488 #customization-palette {
5489   transition: opacity .3s ease-in-out;
5490   opacity: 0;
5491 }
5492
5493 #customization-palette[showing="true"] {
5494   opacity: 1;
5495 }
5496
5497 toolbarpaletteitem[notransition].panel-customization-placeholder,
5498 toolbarpaletteitem[notransition][place="toolbar"],
5499 toolbarpaletteitem[notransition][place="palette"],
5500 toolbarpaletteitem[notransition][place="panel"] {
5501   transition: none;
5502 }
5503
5504 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5505 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5506 toolbarpaletteitem > toolbaritem.panel-wide-item,
5507 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5508   transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5509 }
5510
5511 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5512 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5513   transform: scale(1.3);
5514 }
5515
5516 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5517 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5518   transform: scale(1.1);
5519 }
5520
5521 /* Override the toolkit styling for items being dragged over. */
5522 toolbarpaletteitem[place="toolbar"] {
5523   border-left-width: 0;
5524   border-right-width: 0;
5525   margin-right: 0;
5526   margin-left: 0;
5527 }
5528
5529 #customization-palette:not([hidden]) {
5530   margin-bottom: 25px;
5531 }
5532
5533 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5534 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5535 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5536 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5537   margin-top: 20px;
5538 }
5539
5540 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5541 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5542   margin-left: 0;
5543   margin-right: 0;
5544   max-width: 24px;
5545   min-width: 24px;
5546   max-height: 24px;
5547   min-height: 24px;
5548   padding: 4px;
5549 }
5550
5551 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5552 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5553   width: 16px;
5554 }
5555
5556 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5557   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5558 }
5559
5560 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5561 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5562   display: none;
5563 }
5564
5565 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5566   -moz-box-pack: center;
5567   min-height: 48px;
5568 }
5569
5570 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5571   -moz-margin-end: 5px;
5572 }
5573
5574 #customization-palette > toolbarpaletteitem > label {
5575   text-align: center;
5576   margin-left: 0;
5577   margin-right: 0;
5578 }
5579
5580 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5581   -moz-box-orient: vertical;
5582   /* Make the panel padding uniform across all platforms due to the
5583      styling of the section headers and footer. */
5584   padding: 10px;
5585 }
5586
5587 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5588   width: 32px;
5589   height: 32px;
5590 }
5591
5592 .customization-lwtheme-menu-theme {
5593   -moz-appearance: none;
5594   margin: 0 -5px 5px;
5595   padding-top: 0;
5596   -moz-padding-end: 5px;
5597   padding-bottom: 0;
5598   -moz-padding-start: 0;
5599 }
5600
5601 .customization-lwtheme-menu-theme[defaulttheme] {
5602   list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5603 }
5604
5605 .customization-lwtheme-menu-theme[active="true"] {
5606   background-color: #008484;
5607 }
5608
5609 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5610   margin: 5px;
5611 }
5612
5613 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5614   text-align: start;
5615 }
5616
5617 #customization-lwtheme-menu-header,
5618 #customization-lwtheme-menu-recommended {
5619   padding: 10px;
5620   margin-bottom: 5px;
5621 }
5622
5623 #customization-lwtheme-menu-header,
5624 #customization-lwtheme-menu-recommended,
5625 #customization-lwtheme-menu-footer {
5626   background-color: #A09090;
5627   color: #000000;
5628   margin-right: -10px;
5629   margin-left: -10px;
5630 }
5631
5632 #customization-lwtheme-menu-header {
5633   margin-top: -10px;
5634   border-top-right-radius: 3px;
5635   border-top-left-radius: 3px;
5636 }
5637
5638 #customization-lwtheme-menu-recommended {
5639 }
5640
5641 #customization-lwtheme-menu-footer {
5642   margin-bottom: -10px;
5643   border-bottom-right-radius: 3px;
5644   border-bottom-left-radius: 3px;
5645 }
5646
5647 .customization-lwtheme-menu-footeritem {
5648   -moz-appearance: none;
5649   -moz-box-flex: 1;
5650   background-color: #C09070;
5651   color: #000000;
5652   border: 1px solid transparent;
5653   padding: 10px;
5654   margin-left: 0;
5655   margin-right: 0;
5656 }
5657
5658 .customization-lwtheme-menu-footeritem:hover {
5659   background-color: #FFCF00;
5660 }
5661
5662 .customization-lwtheme-menu-footeritem:first-child {
5663 }
5664
5665 /* === END customizeMode.inc.css === */
5666
5667 /* === BEGIN customizeTip.inc.css === */
5668
5669 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5670   padding: 0;
5671   margin: 0;
5672   min-width: 400px;
5673   max-width: 1000px;
5674   min-height: 200px;
5675   border-radius: 3px;
5676 /*  background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5677   border: 1px solid #9C9CFF;
5678   color: #FF9F00;
5679 }
5680
5681 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5682 /*  background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5683 }
5684
5685 .customization-tipPanel-infoBox {
5686   margin: 20px 25px 25px;
5687   width: 25px;
5688   background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5689   background-repeat: no-repeat;
5690 }
5691
5692 .customization-tipPanel-content {
5693   margin: 25px 0;
5694   font-size: 12px;
5695   line-height: 18px;
5696 }
5697
5698 .customization-tipPanel-em {
5699   margin: 0;
5700   font-weight: bold;
5701 }
5702
5703 .customization-tipPanel-contentImage {
5704   margin-top: 25px;
5705   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5706   min-width: 300px;
5707   max-width: 300px;
5708   min-height: 190px;
5709   max-height: 190px;
5710   display: -moz-box;
5711 }
5712
5713 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5714   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5715 }
5716
5717 .customization-tipPanel-link {
5718   -moz-appearance: none;
5719   background: transparent;
5720   border: none;
5721   box-shadow: none;
5722   color: #3333FF;
5723   margin: 0;
5724   cursor: pointer;
5725 }
5726
5727 .customization-tipPanel-link > .button-box > .button-text {
5728   margin: 0 !important;
5729 }
5730
5731 .customization-tipPanel-closeBox > .close-icon {
5732   -moz-appearance: none;
5733   border: 0;
5734   -moz-margin-end: -25px;
5735 }
5736
5737 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5738 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5739   list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5740 }
5741
5742 /* === END customizeTip.inc.css === */
5743
5744 /**
5745  * This next rule is a hack to disable subpixel anti-aliasing on all
5746  * labels during the customize mode transition. Subpixel anti-aliasing
5747  * on Windows with Direct2D layers acceleration is particularly slow to
5748  * paint, so this hack is how we sidestep that performance bottleneck.
5749  */
5750 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5751   transform: perspective(0.01px);
5752 }
5753
5754 #main-window[customize-entered] > #tab-view-deck {
5755   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5756   background-attachment: fixed;
5757 }
5758
5759 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5760   background-repeat: no-repeat;
5761   background-position: right top;
5762   background-attachment: fixed;
5763   /* The image will get set from CustomizeMode.jsm */
5764   background-image: none;
5765   background-color: transparent;
5766 }
5767
5768 #main-window[customization-lwtheme]:-moz-lwtheme {
5769   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5770   background-repeat: repeat;
5771   background-attachment: fixed;
5772   background-position: left top;
5773 }
5774
5775 #main-window[customize-entered] #browser-bottombox,
5776 #main-window[customize-entered] #customization-container {
5777   border-left: 1px solid #9C9CFF;
5778   border-right: 1px solid #9C9CFF;
5779   background-clip: padding-box;
5780 }
5781
5782 #main-window[customize-entered] #browser-bottombox {
5783   border-bottom: 1px solid #9C9CFF;
5784 }
5785
5786 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5787   margin-right: -2px;
5788 }
5789
5790 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5791   margin-left: -2px;
5792 }
5793
5794 /* End customization mode */
5795
5796 /* Private browsing indicators */
5797
5798 /**
5799  * Currently, we have two places where we put private browsing indicators on
5800  * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5801  * When tabsintitlebar is disabled, we draw the indicator at the end of the
5802  * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5803  * want the bottom border of the image to line up with the bottom of the window
5804  * caption buttons. That's why there's so much special-casing going on in here.
5805  */
5806 .private-browsing-indicator {
5807   display: none;
5808   pointer-events: none;
5809 }
5810
5811 #private-browsing-indicator-titlebar {
5812   display: block;
5813   position: absolute;
5814 }
5815
5816 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5817   display: block;
5818 }
5819
5820 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5821   display: -moz-box;
5822 }
5823
5824 #TabsToolbar > .private-browsing-indicator {
5825   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5826   -moz-margin-start: 4px;
5827   width: 48px;
5828 }
5829
5830 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5831  * mode, since the tabstrip "mimics" the titlebar in that case with its own
5832  * min/max/close window buttons.
5833  */
5834 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5835 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5836   background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5837   -moz-margin-end: 4px;
5838   width: 40px;
5839   height: 20px;
5840   position: relative;
5841 }
5842
5843 /* This one is for Linux */
5844 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5845   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5846   width: 48px;
5847 }
5848
5849 /* End private browsing indicators */
5850
5851 /* === BEGIN UITour.inc.css === */
5852
5853 /* UI Tour */
5854
5855 #UITourHighlightContainer {
5856   -moz-appearance: none;
5857   border: none;
5858   background-color: transparent;
5859   /* This is a buffer to compensate for the movement in the "wobble" effect */
5860   padding: 4px;
5861 }
5862
5863 #UITourHighlight {
5864   background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5865   border-radius: 40px;
5866   border: 1px solid #9C9CFF;
5867   /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5868      on Linux without an X compositor where opacity is either 0 or 1. */
5869   box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5870   min-height: 32px;
5871   min-width: 32px;
5872 }
5873
5874 #UITourTooltipBody {
5875   -moz-margin-end: 14px;
5876 }
5877
5878 #UITourTooltipBody > vbox {
5879   padding-top: 4px;
5880 }
5881
5882 #UITourTooltipIconContainer {
5883   -moz-margin-start: -16px;
5884 }
5885
5886 #UITourTooltipIcon {
5887   width: 48px;
5888   height: 48px;
5889   -moz-margin-start: 28px;
5890   -moz-margin-end: 28px;
5891 }
5892
5893 #UITourTooltipTitle,
5894 #UITourTooltipDescription {
5895   max-width: 20rem;
5896 }
5897
5898 #UITourTooltipTitle {
5899   font-size: 1.45rem;
5900   font-weight: bold;
5901   -moz-margin-start: 0;
5902   -moz-margin-end: 0;
5903   margin: 0 0 9px 0;
5904 }
5905
5906 #UITourTooltipDescription {
5907   -moz-margin-start: 0;
5908   -moz-margin-end: 0;
5909   font-size: 1.15rem;
5910   line-height: 1.8rem;
5911   margin-bottom: 0; /* Override global.css */
5912 }
5913
5914 #UITourTooltipClose {
5915   -moz-appearance: none;
5916   border: none;
5917   background-color: transparent;
5918   min-width: 0;
5919   -moz-margin-start: 4px;
5920   margin-top: -2px;
5921 }
5922
5923 #UITourTooltipClose > .toolbarbutton-text {
5924   display: none;
5925 }
5926
5927 #UITourTooltipButtons {
5928   -moz-box-pack: end;
5929   background-color: rgba(0,0,0,.2);
5930   border-top: 1px solid rgba(0,0,0,.4);
5931   margin: 24px -16px -16px;
5932   padding: 2em 15px;
5933 }
5934
5935 #UITourTooltipButtons > label,
5936 #UITourTooltipButtons > button {
5937   margin: 0 15px;
5938 }
5939
5940 #UITourTooltipButtons > label:first-child,
5941 #UITourTooltipButtons > button:first-child {
5942   -moz-margin-start: 0;
5943 }
5944
5945 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5946   width: 16px;
5947   height: 16px;
5948   -moz-margin-end: 5px;
5949 }
5950
5951 #UITourTooltipButtons > label,
5952 #UITourTooltipButtons > button .button-text {
5953   font-size: 1.15rem;
5954 }
5955
5956 #UITourTooltipButtons > button:not(.button-link) {
5957   -moz-appearance: none;
5958   background-color: #C09070;
5959   border-radius: 3000px;
5960   border: none;
5961   color: #000000;
5962   padding: 4px 30px;
5963   transition-property: background-color, color;
5964   transition-duration: 150ms;
5965 }
5966
5967 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5968   background-color: #FFCF00;
5969   color: #000000;
5970 }
5971
5972 #UITourTooltipButtons > label,
5973 #UITourTooltipButtons > button.button-link {
5974   -moz-appearance: none;
5975   background: transparent;
5976   border: none;
5977   box-shadow: none;
5978   color: rgba(0,0,0,0.35);
5979   padding-left: 10px;
5980   padding-right: 10px;
5981 }
5982
5983 #UITourTooltipButtons > button.button-link:hover {
5984   color: black;
5985 }
5986
5987 /* The primary button gets the same color as the customize button. */
5988 #UITourTooltipButtons > button.button-primary {
5989   background-color: #A06060; /* LCARS default button background color */
5990   color: #000000;
5991   padding-left: 30px;
5992   padding-right: 30px;
5993 }
5994
5995 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5996   background-color: #FFCF00;
5997   color: #000000;
5998 }
5999
6000 /* Notification overrides for Heartbeat UI */
6001
6002 notification.heartbeat {
6003   background-color: #A09090;
6004 /*  height: 40px;*/
6005 }
6006
6007 @keyframes pulse-onshow {
6008  0% {
6009    opacity: 0;
6010    transform: scale(1.0);
6011  }
6012  25% {
6013    opacity: 1;
6014    transform: scale(1.1);
6015  }
6016  50% {
6017    transform: scale(1.0);
6018  }
6019  75% {
6020    transform: scale(1.1);
6021  }
6022  100% {
6023    transform: scale(1.0);
6024  }
6025 }
6026
6027 @keyframes pulse-twice {
6028  0% {
6029    transform: scale(1.1);
6030  }
6031  50% {
6032    transform: scale(0.8);
6033  }
6034  100% {
6035    transform: scale(1);
6036  }
6037 }
6038
6039 .messageText.heartbeat {
6040   color: #000000;
6041 /*  text-shadow: none; */
6042   -moz-margin-start: 0px;
6043 }
6044
6045 .messageImage.heartbeat {
6046   width: 24px;
6047   height: 24px;
6048   -moz-margin-start: 8px;
6049   -moz-margin-end: 8px;
6050 }
6051
6052 .messageImage.heartbeat.pulse-onshow {
6053   animation-name: pulse-onshow;
6054   animation-duration: 1.5s;
6055   animation-iteration-count: 1;
6056   animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
6057 }
6058
6059 .messageImage.heartbeat.pulse-twice {
6060   animation-name: pulse-twice;
6061   animation-duration: 1s;
6062   animation-iteration-count: 2;
6063   animation-timing-function: linear;
6064 }
6065
6066 /* Learn More link styles */
6067 .heartbeat > .text-link {
6068   color: #3333FF;
6069   -moz-margin-start: 0px;
6070 }
6071
6072 .heartbeat > .text-link:hover {
6073   color: #9C9CFF;
6074   text-decoration: none;
6075 }
6076
6077 .heartbeat > .text-link:hover:active {
6078   color: #FF9F00;
6079 }
6080
6081 /* Heartbeat UI Rating Star Classes */
6082 .heartbeat > #star-rating-container {
6083   display: -moz-box;
6084 /*  margin-bottom: 4px;*/
6085 }
6086
6087 .heartbeat > #star-rating-container > #star5 {
6088   -moz-box-ordinal-group: 5;
6089 }
6090
6091 .heartbeat > #star-rating-container > #star4 {
6092   -moz-box-ordinal-group: 4;
6093 }
6094
6095 .heartbeat > #star-rating-container > #star3 {
6096   -moz-box-ordinal-group: 3;
6097 }
6098
6099 .heartbeat > #star-rating-container > #star2 {
6100   -moz-box-ordinal-group: 2;
6101 }
6102
6103 .heartbeat > #star-rating-container > .star-x  {
6104   background: url("chrome://browser/skin/heartbeat-star-off.svg");
6105   cursor: pointer;
6106   /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
6107   -moz-margin-end: 4px !important;
6108   width: 16px;
6109   height: 16px;
6110 }
6111
6112 .heartbeat > #star-rating-container > .star-x:hover,
6113 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
6114   background: url("chrome://browser/skin/heartbeat-star-lit.svg");
6115 }
6116
6117 /* === END UITour.inc.css === */
6118
6119 #UITourTooltipButtons {
6120   /**
6121    * Override the --panel-arrowcontent-padding so the background extends
6122    * to the sides and bottom of the panel.
6123    */
6124   margin-left: -10px;
6125   margin-right: -10px;
6126   margin-bottom: -10px;
6127 }
6128
6129 /* === BEGIN contextmenu.inc.css === */
6130
6131 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
6132 }
6133
6134 #context-navigation > .menuitem-iconic {
6135   -moz-box-flex: 1;
6136   -moz-box-pack: center;
6137   -moz-box-align: center;
6138 }
6139
6140 #context-navigation > .menuitem-iconic[disabled="true"] {
6141   background-color: transparent;
6142 }
6143
6144 #context-navigation > .menuitem-iconic > .menu-iconic-left {
6145   -moz-appearance: none;
6146 }
6147
6148 #context-back > .menu-iconic-left {
6149   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
6150   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6151   -moz-image-region: rect(0, 54px, 18px, 36px);
6152 }
6153
6154 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
6155   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
6156   -moz-image-region: rect(18px, 54px, 36px, 36px);
6157 }
6158
6159 #context-back[disabled="true"] > .menu-iconic-left {
6160   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
6161   -moz-image-region: rect(36px, 54px, 54px, 36px);
6162 }
6163
6164 #context-forward > .menu-iconic-left {
6165   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
6166   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6167   -moz-image-region: rect(0, 72px, 18px, 54px);
6168 }
6169
6170 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
6171   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
6172   -moz-image-region: rect(18px, 72px, 36px, 54px);
6173 }
6174
6175 #context-forward[disabled="true"] > .menu-iconic-left {
6176   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
6177   -moz-image-region: rect(36px, 72px, 54px, 54px);
6178 }
6179
6180 #context-reload > .menu-iconic-left {
6181   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
6182   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6183   -moz-image-region: rect(0, 14px, 14px, 0);
6184 }
6185
6186 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
6187   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
6188   -moz-image-region: rect(14px, 14px, 28px, 0);
6189 }
6190
6191 #context-reload[disabled="true"] > .menu-iconic-left {
6192   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
6193   -moz-image-region: rect(28px, 14px, 42px, 0);
6194 }
6195
6196 #context-stop > .menu-iconic-left {
6197   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
6198   list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
6199   -moz-image-region: rect(0, 28px, 14px, 14px);
6200 }
6201
6202 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
6203   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
6204   -moz-image-region: rect(14px, 28px, 28px, 14px);
6205 }
6206
6207 #context-stop[disabled="true"] > .menu-iconic-left {
6208   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6209   -moz-image-region: rect(28px, 28px, 42px, 14px);
6210 }
6211
6212 #context-bookmarkpage > .menu-iconic-left {
6213   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6214   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6215   -moz-image-region: rect(0, 144px, 18px, 126px);
6216 }
6217
6218 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6219   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6220   -moz-image-region: rect(18px, 144px, 36px, 126px);
6221 }
6222
6223 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6224   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6225   -moz-image-region: rect(36px, 144px, 54px, 126px);
6226 }
6227
6228 #context-bookmarkpage[starred=true] {
6229   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6230   -moz-image-region: rect(0px, 162px, 18px, 144px);
6231 }
6232
6233 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6234   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6235   -moz-image-region: rect(18px, 162px, 36px, 144px);
6236 }
6237
6238 #context-bookmarkpage[starred=true][disabled=true] {
6239   /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6240   -moz-image-region: rect(36px, 162px, 54px, 144px);
6241 }
6242
6243 #context-back:-moz-locale-dir(rtl),
6244 #context-forward:-moz-locale-dir(rtl),
6245 #context-reload:-moz-locale-dir(rtl) {
6246   transform: scaleX(-1);
6247 }
6248
6249 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6250   width: 18px; /*16px;*/
6251   height: 18px; /*16px;*/
6252   margin: 7px;
6253 }
6254
6255 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6256 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6257   width: 14px;
6258   height: 14px;
6259   margin: 9px;
6260 }
6261
6262 #context-media-eme-learnmore {
6263   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6264 }
6265
6266 #context-media-eme-learnmore {
6267   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6268 }
6269
6270 /* === END contextmenu.inc.css === */
6271
6272 #context-navigation {
6273 }
6274
6275 #context-sep-navigation {
6276 /*  margin-top: -4px; */
6277 }
6278
6279 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6280   padding: 0;
6281   overflow: hidden;
6282 }
6283
6284 /* === BEGIN usercontext.inc.css === */
6285
6286 /* User Context UI browser styles */
6287
6288 #menu_newUserContextTabPersonal {
6289   list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6290 }
6291
6292 #menu_newUserContextTabWork {
6293   list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6294 }
6295
6296 #menu_newUserContextTabBanking {
6297   list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6298 }
6299
6300 #menu_newUserContextTabShopping {
6301   list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6302 }
6303
6304 /* URL Bar Decoration */
6305
6306 #userContext-indicator {
6307   height: 16px;
6308   width: 16px;
6309 }
6310
6311 #userContext-label {
6312   margin-inline-end: 3px;
6313   color: #A09090;
6314 }
6315
6316 #userContext-icons:not([usercontextid]) {
6317   display: none;
6318 }
6319
6320 #userContext-icons {
6321   -moz-box-align: center;
6322 }
6323
6324 /* Personal User Context */
6325 #userContext-icons[usercontextid="1"] > #userContext-label {
6326   color: #9C9CFF;
6327 }
6328 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6329   list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6330 }
6331
6332 /* Work User Context */
6333 #userContext-icons[usercontextid="2"] > #userContext-label {
6334   color: #FF9F00;
6335 }
6336 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6337   list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6338 }
6339
6340 /* Banking User Context */
6341 #userContext-icons[usercontextid="3"] > #userContext-label {
6342   color: #008484;
6343 }
6344 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6345   list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6346 }
6347
6348 /* Shopping User Context */
6349 #userContext-icons[usercontextid="4"] > #userContext-label {
6350   color: #E7ADE7;
6351 }
6352 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6353   list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6354 }
6355
6356 /* === END usercontext.inc.css === */