LCARStrek/browser/browser.css

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