LCARStrek/browser/browser.css

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