LCARStrek/browser/browser.css

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