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