LCARStrek/browser/browser.css

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