LCARStrek/browser/browser.css

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