LCARStrek/browser/browser.css

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