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