LCARStrek/browser/browser.css

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