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: -4px;
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 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1393   transition: opacity 150ms ease-out;
1394 }
1395
1396 window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true],
1397 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled=true] {
1398   opacity: 0;
1399 }
1400
1401 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar],
1402 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[occluded-by-urlbar] {
1403   visibility: hidden;
1404 }
1405
1406 #back-button {
1407 /*  padding-top: 3px !important;
1408   padding-bottom: 3px !important;
1409   -moz-padding-start: 5px !important;
1410   -moz-padding-end: 0 !important;*/
1411   position: relative;
1412   z-index: 1;
1413   border-radius: 10000px;
1414   width: 30px;
1415   height: 30px;
1416   margin-top: -2px;
1417   margin-bottom: -2px;
1418 }
1419
1420 #back-button:-moz-locale-dir(rtl) {
1421 }
1422
1423 #back-button > menupopup {
1424   margin-top: -1px !important;
1425 }
1426
1427 #back-button > .toolbarbutton-icon {
1428   border-radius: 10000px !important;
1429   background-clip: padding-box !important;
1430 /*  background-color: hsla(210,25%,98%,.08) !important;
1431   padding: 6px !important;
1432   border-color: hsla(210,4%,10%,.25) !important;*/
1433   transition-property: background-color, border-color !important;
1434   transition-duration: 250ms !important;
1435 }
1436
1437 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1438 /*  background-color: hsla(210,4%,10%,.08) !important;
1439   box-shadow: none !important;*/
1440 }
1441
1442 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1443 #back-button[open="true"] > .toolbarbutton-icon {
1444 /*  background-color: hsla(210,4%,10%,.12) !important;
1445   box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1446 }
1447
1448 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1449 #forward-button:-moz-locale-dir(rtl) {
1450   transform: scaleX(-1);
1451 }
1452 /*
1453 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1454 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1455   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1456 }
1457
1458 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1459 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1460   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1461 }
1462
1463 #home-button.bookmark-item {
1464   list-style-image: url("chrome://browser/skin/Toolbar.png");
1465 }
1466
1467 #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),
1468 #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),
1469 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1470 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1471 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1472 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1473 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1474   position: relative;
1475   z-index: 1;
1476   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1477 }
1478
1479 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1480 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1481   list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1482 }
1483 */
1484
1485 #downloads-button > .toolbarbutton-icon {
1486   margin: 0;
1487 }
1488
1489 /* tabview button & menu item */
1490
1491 #menu_tabview {
1492   list-style-image: url("chrome://browser/skin/tabview/tabview.png");
1493   -moz-image-region: rect(1px, 89px, 17px, 73px);
1494 }
1495
1496 #menu_tabview[groups="0"] {
1497   -moz-image-region: rect(1px, 17px, 17px, 1px);
1498 }
1499
1500 #menu_tabview[groups="1"] {
1501   -moz-image-region: rect(1px, 35px, 17px, 19px);
1502 }
1503
1504 #menu_tabview[groups="2"] {
1505   -moz-image-region: rect(1px, 53px, 17px, 37px);
1506 }
1507
1508 #menu_tabview[groups="3"] {
1509   -moz-image-region: rect(1px, 71px, 17px, 55px);
1510 }
1511
1512 /* zoom control text (reset) button special case: */
1513
1514 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1515   /* To make this line up with the icons, it needs the same height (18px) +
1516    * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1517    * increase in text sizes would break things...
1518    */
1519   min-height: 20px;
1520 }
1521
1522 /* ::::: fullscreen window controls ::::: */
1523
1524 #window-controls {
1525   -moz-margin-start: 4px;
1526 }
1527
1528 #minimize-button,
1529 #restore-button,
1530 #close-button {
1531 /*  list-style-image: url("chrome://global/skin/icons/windowControls.png");
1532   padding: 0; */
1533 }
1534
1535 #minimize-button {
1536   list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1537 }
1538
1539 #minimize-button:hover {
1540   list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1541 }
1542
1543 #restore-button {
1544   list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1545 }
1546
1547 #restore-button:hover {
1548   list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1549 }
1550
1551 #close-button {
1552   list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1553 }
1554
1555 #close-button:hover {
1556   list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1557 }
1558
1559 /* ::::: Location Bar ::::: */
1560
1561 #urlbar,
1562 .searchbar-textbox {
1563   border-radius: 5px;
1564   margin: 0;
1565   -moz-margin-start: 3px;
1566 }
1567
1568 #urlbar {
1569   /* make color as light as possible to deal with dark non-domain parts */
1570   color: #FFBFFF;
1571 }
1572
1573 #urlbar:-moz-lwtheme,
1574 .searchbar-textbox:-moz-lwtheme {
1575   /* background-color: rgba(255,255,255,.8);
1576   @navbarTextboxCustomBorder@
1577   color: black; */
1578 }
1579
1580 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1581 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1582 /*  background-color: rgba(255,255,255,.9);*/
1583 }
1584
1585 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1586 .searchbar-textbox:-moz-lwtheme[focused] {
1587 /*  background-color: white;*/
1588 }
1589
1590 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper,
1591 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1592   padding-left: 22px;
1593   -moz-margin-start: -22px;
1594   position: relative;
1595   pointer-events: none;
1596 }
1597
1598 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar,
1599 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1600 /*  -moz-border-start: none;
1601   margin-left: 0; */
1602   pointer-events: all;
1603 }
1604
1605 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar,
1606 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar {
1607   transition: margin-left 150ms ease-out;
1608 }
1609
1610 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr),
1611 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1612 /*  border-top-left-radius: 0;
1613   border-bottom-left-radius: 0; */
1614 }
1615
1616 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl),
1617 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1618 /*  border-top-right-radius: 0;
1619   border-bottom-right-radius: 0; */
1620 }
1621
1622 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper,
1623 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] {
1624 /*  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1625 }
1626
1627 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar,
1628 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar {
1629   margin-left: -22px;
1630 }
1631
1632 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar,
1633 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar {
1634   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1635   transition-delay: 100s;
1636 }
1637
1638 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar,
1639 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar {
1640   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1641   margin-left: -22.01px;
1642 }
1643
1644 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
1645 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl),
1646 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1647 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1648   /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
1649   transform: scaleX(-1);
1650 }
1651
1652 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1653 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1654   color: #E7ADE7;
1655 }
1656
1657 #urlbar-container {
1658   -moz-box-orient: horizontal;
1659   -moz-box-align: stretch;
1660 }
1661
1662 .urlbar-textbox-container {
1663   -moz-box-align: stretch;
1664 }
1665
1666 .urlbar-input-box {
1667   -moz-margin-start: 0;
1668 }
1669
1670 #urlbar-icons {
1671   -moz-box-align: center;
1672 }
1673
1674 .urlbar-icon {
1675   padding: 0 2px;
1676 }
1677
1678 .searchbar-engine-button,
1679 .search-go-container {
1680   padding: 2px;
1681 }
1682
1683 .search-go-container > .search-go-button {
1684   padding: 0;
1685 }
1686
1687 .urlbar-icon:hover {
1688 }
1689
1690 .urlbar-icon[open="true"],
1691 .urlbar-icon:hover:active {
1692 }
1693
1694 #urlbar-search-splitter {
1695   min-width: 6px;
1696   -moz-margin-start: -3px;
1697   border: none;
1698   background: transparent;
1699 }
1700
1701 #urlbar-search-splitter + #urlbar-container > #urlbar,
1702 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1703   -moz-margin-start: 0;
1704 }
1705
1706 #urlbar-display-box {
1707 }
1708
1709 #urlbar-display {
1710   -moz-border-end: 1px solid #9C9CFF;
1711   -moz-margin-end: 3px;
1712   margin-top: 0;
1713   margin-bottom: 0;
1714   -moz-margin-start: 0;
1715   color: #8050B0;
1716 }
1717
1718 #search-container {
1719   min-width: calc(54px + 11ch);
1720 }
1721
1722 /* identity box */
1723
1724 #identity-box {
1725   border-radius: 2px;
1726   font-size: .9em;
1727 }
1728
1729 #identity-box:-moz-locale-dir(ltr) {
1730 /*  border-top-left-radius: 1.5px;
1731   border-bottom-left-radius: 1.5px;*/
1732 }
1733
1734 #identity-box:-moz-locale-dir(rtl) {
1735 /*  border-top-right-radius: 1.5px;
1736   border-bottom-right-radius: 1.5px;*/
1737 }
1738
1739 #notification-popup-box:not([hidden]) + #identity-box {
1740   -moz-padding-start: 10px !important;
1741   border-radius: 0;
1742 }
1743
1744 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box,
1745 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
1746 /*   border-radius: 0; */
1747   -moz-padding-start: 2px;
1748   -moz-padding-end: 2px;
1749   -moz-margin-end: 1px;
1750 }
1751
1752 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1753     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
1754 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar >
1755     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1756   padding-left: 2px;
1757   transition: padding-left;
1758 }
1759
1760 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1761     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl),
1762 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar >
1763     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1764   padding-right: 2px;
1765   transition: padding-right;
1766 }
1767
1768 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
1769     #notification-popup-box[hidden] + #identity-box,
1770 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar >
1771     #notification-popup-box[hidden] + #identity-box {
1772   /* forward button hiding is delayed when hovered */
1773   transition-delay: 100s;
1774 }
1775
1776 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1777     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
1778 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar >
1779     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1780   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1781   padding-left: 2.01px;
1782 }
1783
1784 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1785     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl),
1786 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar >
1787     #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1788   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1789   padding-right: 2.01px;
1790 }
1791
1792 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1793 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1794   -moz-margin-end: 3px;
1795 }
1796
1797 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr),
1798 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) {
1799   border-top-right-radius: 0;
1800   border-bottom-right-radius: 0;
1801 }
1802
1803 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
1804 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1805   border-top-left-radius: 0;
1806   border-bottom-left-radius: 0;
1807 }
1808
1809 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1810   background-color: #000000;
1811 }
1812
1813 #identity-box:-moz-focusring {
1814   outline: 1px dotted #008484;
1815   outline-offset: -1px;
1816 }
1817
1818 #identity-box.verifiedDomain:-moz-focusring,
1819 #identity-box.verifiedIdentity:-moz-focusring {
1820   outline-color: #000000;
1821 }
1822
1823 #identity-icon-labels {
1824   -moz-margin-start: 1px;
1825   -moz-margin-end: 3px;
1826 }
1827
1828 /* Location bar dropmarker */
1829
1830 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1831   background-color: transparent;
1832 }
1833
1834 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1835 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker {
1836   border: none;
1837   border-radius: 0px;
1838 }
1839
1840 .urlbar-history-dropmarker:hover {
1841 }
1842
1843 .urlbar-history-dropmarker:hover:active,
1844 .urlbar-history-dropmarker[open="true"] {
1845 }
1846
1847 /* page proxy icon */
1848
1849 /* === BEGIN identity-block.inc.css === */
1850
1851 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1852   /* Default theme does different color per channel, we can't as they do it build-time. */
1853   color: #9C9CFF;
1854   -moz-border-end: 1px solid #9C9CFF;
1855 }
1856
1857 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1858   color: #008484;
1859   -moz-border-end: 1px solid #008484;
1860 }
1861
1862 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1863 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1864   background-position: right;
1865   background-size: 1px;
1866   background-repeat: no-repeat;
1867 }
1868
1869 /* page proxy icon */
1870
1871 #page-proxy-favicon {
1872   width: 16px;
1873   height: 16px;
1874   list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
1875   margin: 2px;
1876 }
1877
1878 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1879   list-style-image: url("chrome://branding/content/identity-icons-brand.png");
1880 }
1881
1882 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1883   list-style-image: url("chrome://browser/skin/identity-icons-https.png");
1884 }
1885
1886 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1887   list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png");
1888 }
1889
1890 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1891   list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
1892 }
1893
1894 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1895   list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1896 }
1897
1898 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1899   list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1900 }
1901
1902 #page-proxy-favicon[pageproxystate="invalid"] {
1903   opacity: 0.3;
1904 }
1905
1906 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
1907   list-style-image: url("chrome://branding/content/icon64.png");
1908 }
1909
1910 #identity-popup-brandName {
1911   font-weight: bold;
1912   font-size: 1.25em;
1913   margin-top: .5em;
1914   margin-bottom: .5em;
1915 }
1916
1917 #identity-popup-content-box {
1918   max-width: 50ch;
1919 }
1920
1921 /* === END identity-block.inc.css === */
1922
1923 #page-proxy-favicon {
1924   -moz-image-region: rect(0, 16px, 16px, 0);
1925 }
1926
1927 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon,
1928 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
1929 /*  -moz-margin-end: 1px;*/
1930 }
1931
1932 #identity-box:hover > #page-proxy-favicon {
1933   -moz-image-region: rect(0, 32px, 16px, 16px);
1934 }
1935
1936 #identity-box:hover:active > #page-proxy-favicon,
1937 #identity-box[open=true] > #page-proxy-favicon {
1938   -moz-image-region: rect(0, 48px, 16px, 32px);
1939 }
1940
1941 #identity-box:hover {
1942   background-color: #FFCF00;
1943   color: #000000;
1944 }
1945
1946 #identity-box:hover:active,
1947 #identity-box[open=true] {
1948   background-color: #FF9F00;
1949   color: #000000;
1950 }
1951
1952 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
1953 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
1954 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
1955   background-color: #9C9CFF;
1956   color: #000000;
1957 }
1958
1959 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
1960 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
1961 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
1962   background-color: #008484;
1963   color: #000000;
1964 }
1965
1966 /* autocomplete */
1967
1968 #treecolAutoCompleteImage {
1969   max-width: 36px;
1970 }
1971
1972 .ac-result-type-bookmark,
1973 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1974   list-style-image: url("chrome://browser/skin/places/bookmark.png");
1975   -moz-image-region: rect(0px 16px 16px 0px);
1976   width: 16px;
1977   height: 16px;
1978 }
1979
1980 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1981 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1982 /*  -moz-image-region: rect(0px 48px 16px 32px);*/
1983 }
1984
1985 .ac-result-type-keyword,
1986 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1987   list-style-image: url("chrome://global/skin/icons/Search-glass.png");
1988   -moz-image-region: rect(0px 32px 16px 16px);
1989   width: 16px;
1990   height: 16px;
1991 }
1992
1993 .ac-result-type-tag,
1994 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1995   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
1996   width: 16px;
1997   height: 16px;
1998 }
1999
2000 .ac-comment {
2001   font-size: 1.06em;
2002 }
2003
2004 .ac-extra > .ac-comment {
2005   font-size: 1em;
2006 }
2007
2008 .ac-url-text,
2009 .ac-action-text {
2010   font-size: 1em;
2011   color: #9C9CFF;
2012 }
2013
2014 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2015   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2016   -moz-image-region: rect(0, 16px, 16px, 0);
2017   padding: 0 3px;
2018 }
2019
2020 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2021   -moz-image-region: rect(16px, 16px, 32px, 0);
2022 }
2023
2024 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2025   color: #8050B0;
2026 }
2027
2028 .ac-comment[selected="true"],
2029 .ac-url-text[selected="true"],
2030 .ac-action-text[selected="true"] {
2031   color: inherit !important;
2032 }
2033
2034 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2035 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2036 {
2037   color: #8050B0;
2038   font-size: smaller;
2039 }
2040
2041 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2042   border-top: 1px solid #9C9CFF;
2043 }
2044
2045 /* combined go/reload/stop button in location bar */
2046
2047 #urlbar > toolbarbutton {
2048   -moz-margin-start: 0;
2049   padding: 0 2px;
2050   background-origin: border-box;
2051   border: none;
2052   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
2053   -moz-border-start: 1px solid #9C9CFF;
2054 }
2055
2056 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2057   border-top-left-radius: 0px;
2058   border-bottom-left-radius: 0px;
2059 }
2060
2061 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2062   border-top-right-radius: 0px;
2063   border-bottom-right-radius: 0px;
2064 }
2065
2066 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2067 #urlbar-reload-button:not(:hover) {
2068   -moz-border-start-style: none;
2069   -moz-padding-start: 3px;
2070 }
2071
2072 #urlbar-reload-button {
2073   -moz-image-region: rect(0px, 14px, 14px, 0px);
2074 }
2075
2076 #urlbar-reload-button[disabled=true] {
2077   -moz-image-region: rect(28px, 14px, 42px, 0px);
2078 }
2079
2080 #urlbar-reload-button:not([disabled=true]):hover {
2081   -moz-image-region: rect(14px, 14px, 28px, 0px);
2082 }
2083
2084 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2085   transform: scaleX(-1);
2086 }
2087
2088 #urlbar-go-button {
2089   -moz-image-region: rect(0, 42px, 14px, 28px);
2090 }
2091
2092 #urlbar-go-button:hover {
2093   -moz-image-region: rect(14px, 42px, 28px, 28px);
2094 }
2095
2096 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2097   transform: scaleX(-1);
2098 }
2099
2100 #urlbar-stop-button {
2101   -moz-image-region: rect(0px, 28px, 14px, 14px);
2102 }
2103
2104 #urlbar-stop-button:hover {
2105   -moz-image-region: rect(14px, 28px, 28px, 14px);
2106 }
2107
2108 /* popup blocker button */
2109
2110 #page-report-button {
2111   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2112   -moz-image-region: rect(0, 16px, 16px, 0);
2113 }
2114
2115 #page-report-button:hover ,
2116 #page-report-button:hover:active,
2117 #page-report-button[open="true"] {
2118   -moz-image-region: rect(0, 32px, 16px, 16px);
2119 }
2120
2121 /* social share panel */
2122
2123 #social-share-panel > iframe {
2124 /*  background: linear-gradient(to bottom, #f0f4f7, #fafbfc);*/
2125   width: 300px;
2126   height: 150px;
2127 }
2128
2129 .social-share-toolbar {
2130   border-right: 1px solid #9C9CFF;
2131 /*  background-color: #000000; */
2132 }
2133
2134 #social-share-provider-buttons {
2135   padding: 6px;
2136 }
2137
2138 #social-share-provider-buttons > .share-provider-button {
2139   -moz-appearance: none;
2140   padding: 5px;
2141   margin: 1px;
2142   border: none;
2143   background: none;
2144   border-radius: 2px;
2145 }
2146
2147 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
2148 #social-share-provider-buttons > .share-provider-button:hover,
2149 #social-share-provider-buttons > .share-provider-button:active {
2150   padding: 4px;
2151 }
2152
2153 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
2154 }
2155
2156 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2157   display: none;
2158 }
2159 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2160   width: 16px;
2161   min-height: 16px;
2162   max-height: 16px;
2163 }
2164
2165 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
2166   width: auto;
2167   height: auto;
2168   max-width: 32px;
2169   max-height: 24px;
2170 }
2171
2172 /* fixup corners for share panel */
2173 .social-panel > .social-panel-frame {
2174   border-radius: inherit;
2175 }
2176
2177 #social-share-panel {
2178   max-height: 600px;
2179   min-height: 100px;
2180   max-width: 800px;
2181   min-width: 300px;
2182 }
2183
2184 .social-share-frame {
2185 /*  background: linear-gradient(to bottom, #f0f4f7, #fafbfc); */
2186   width: 330px;
2187   height: 150px;
2188   /* we resize our panels dynamically, make it look nice */
2189   transition: height 100ms ease-out, width 100ms ease-out;
2190 }
2191
2192 .social-share-frame:-moz-locale-dir(ltr) {
2193   border-top-left-radius: 0;
2194   border-bottom-left-radius: 0;
2195   border-top-right-radius: inherit;
2196   border-bottom-right-radius: inherit;
2197 }
2198
2199 .social-share-frame:-moz-locale-dir(rtl) {
2200   border-top-left-radius: inherit;
2201   border-bottom-left-radius: inherit;
2202   border-top-right-radius: 0;
2203   border-bottom-right-radius: 0;
2204 }
2205
2206 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
2207   border-top-left-radius: inherit;
2208   border-bottom-left-radius: inherit;
2209 }
2210
2211 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
2212   border-top-right-radius: inherit;
2213   border-bottom-right-radius: inherit;
2214 }
2215
2216 #social-share-provider-buttons:-moz-locale-dir(ltr) {
2217   border-top-left-radius: inherit;
2218   border-bottom-left-radius: inherit;
2219 }
2220
2221 #social-share-provider-buttons:-moz-locale-dir(rtl) {
2222   border-top-right-radius: inherit;
2223   border-bottom-right-radius: inherit;
2224 }
2225
2226 /* social recommending panel */
2227
2228 #social-mark-button {
2229   -moz-image-region: rect(0, 16px, 16px, 0);
2230 }
2231
2232 /* bookmarks menu-button */
2233
2234 #bookmarks-menu-button.bookmark-item {
2235   list-style-image: url("chrome://browser/skin/places/bookmark.png");
2236   -moz-image-region: rect(0px 16px 16px 0px);
2237 }
2238
2239 #bookmarks-menu-button.bookmark-item[starred] {
2240   -moz-image-region: rect(0px 32px 16px 16px);
2241 }
2242
2243 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2244   -moz-margin-start: 5px;
2245 }
2246
2247 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2248   padding-top: 2px;
2249   padding-bottom: 2px;
2250 }
2251
2252 #BMB_bookmarksPopup[side="top"],
2253 #BMB_bookmarksPopup[side="bottom"] {
2254   margin-left: -20px;
2255   margin-right: -20px;
2256 }
2257
2258 #BMB_bookmarksPopup[side="left"],
2259 #BMB_bookmarksPopup[side="right"] {
2260   margin-top: -20px;
2261   margin-bottom: -20px;
2262 }
2263
2264 /* bookmarking panel */
2265
2266 #editBookmarkPanelStarIcon {
2267   list-style-image: url("chrome://browser/skin/places/starred48.png");
2268   width: 48px;
2269   height: 48px;
2270 }
2271
2272 #editBookmarkPanelStarIcon[unstarred] {
2273   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2274 }
2275
2276 #editBookmarkPanelTitle {
2277   font-size: 130%;
2278 }
2279
2280 #editBookmarkPanelHeader,
2281 #editBookmarkPanelContent {
2282   margin-bottom: .5em;
2283 }
2284
2285 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2286 #editBMPanel_folderTree {
2287   min-width: 27em;
2288 }
2289
2290 .panel-promo-box {
2291   margin: 5px 0 -6px;
2292   padding: 5px 0;
2293   border-top: 1px solid #9C9CFF;
2294   border-bottom-left-radius: 5px;
2295   border-bottom-right-radius: 5px;
2296 }
2297
2298 .panel-promo-icon {
2299   list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2300   -moz-margin-end: 10px;
2301   vertical-align: middle;
2302 }
2303
2304 .panel-promo-closebutton {
2305   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2306   -moz-margin-end: -3px;
2307   margin-top: -3px;
2308 }
2309
2310 .panel-promo-closebutton:hover {
2311   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2312 }
2313
2314 .panel-promo-closebutton:hover:active {
2315   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2316 }
2317
2318 .panel-promo-closebutton > .toolbarbutton-text {
2319   padding: 0;
2320   margin: 0;
2321 }
2322
2323 /* ::::: content area ::::: */
2324
2325 #sidebar {
2326   background-color: Window;
2327 }
2328
2329 #sidebar-title {
2330   -moz-padding-start: 0px;
2331 }
2332
2333 .browserContainer > findbar {
2334 /*
2335   background-color: -moz-dialog;
2336   color: -moz-DialogText;
2337 */
2338 }
2339
2340 /* Tabstrip */
2341
2342 #TabsToolbar {
2343   min-height: 0;
2344   padding: 0;
2345   -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2346 }
2347
2348 #TabsToolbar .toolbar-holder {
2349   background-color: #000000; /* correct effect of being an actual toolbar */
2350 }
2351
2352 #main-window[disablechrome] #TabsToolbar,
2353 #TabsToolbar[tabsontop="false"] {
2354   border-bottom: 1px solid #008484;
2355 }
2356
2357 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
2358 }
2359
2360 #main-window[tabsintitlebar] #TabsToolbar {
2361   background-color: transparent;
2362 }
2363
2364 /* === BEGIN tabs.inc.css === */
2365
2366 .tabbrowser-tab,
2367 .tabs-newtab-button,
2368 #TabsToolbar > #new-tab-button {
2369   margin-top: 0px;
2370 }
2371
2372 .tabbrowser-tab {
2373   padding: 1px 4px 2px;
2374 }
2375
2376 .tabbrowser-tab:first-of-type {
2377   -moz-margin-start: 2px;
2378 }
2379
2380 .tabs-newtab-button,
2381 #TabsToolbar > #new-tab-button {
2382   border-radius: 8px 8px 0px 0px;
2383   -moz-margin-start: 0;
2384 }
2385
2386 .tabs-newtab-button:not(:hover),
2387 #TabsToolbar > #new-tab-button:not(:hover) {
2388   background-color: #C09070;
2389 }
2390
2391 .tabbrowser-tab[remote] {
2392   text-decoration: underline;
2393 }
2394
2395 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2396 .tabbrowser-tab[selected=true] {
2397 /*  position: relative;
2398   z-index: 2;*/
2399 }
2400
2401 .tab-background-middle {
2402 }
2403
2404 .tab-content {
2405 }
2406
2407 .tab-/*throbber*/,
2408 .tab-icon-image,
2409 .tab-close-button {
2410 }
2411
2412 .tab-throbber,
2413 .tab-icon-image {
2414   height: 16px;
2415   width: 16px;
2416 }
2417
2418 .tab-icon-image {
2419   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2420 }
2421
2422 .tab-throbber {
2423   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2424 }
2425
2426 .tab-throbber[progress] {
2427   list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2428 }
2429
2430 .tab-throbber:not([pinned]),
2431 .tab-icon-image:not([pinned]) {
2432   -moz-margin-end: 3px;
2433 }
2434
2435 .tab-throbber[pinned],
2436 .tab-icon-image[pinned] {
2437   -moz-margin-start: 2px;
2438   -moz-margin-end: 2px;
2439 }
2440
2441 .tab-label {
2442 }
2443
2444 .tab-close-button {
2445   margin-top: 1px;
2446   padding: 0;
2447 }
2448
2449 .tab-background,
2450 .tabs-newtab-button {
2451   /* overlap the tab curves */
2452 }
2453
2454 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2455 }
2456
2457 .tab-background-start[selected=true]::after,
2458 .tab-background-start[selected=true]::before,
2459 .tab-background-start,
2460 .tab-background-end,
2461 .tab-background-end[selected=true]::after,
2462 .tab-background-end[selected=true]::before {
2463 }
2464
2465 .tabbrowser-tab:not([selected=true]),
2466 .tabbrowser-tab:-moz-lwtheme {
2467 }
2468
2469 /* tabbrowser-tab focus ring */
2470 .tabbrowser-tab:focus {
2471   outline: 1px dotted;
2472 }
2473
2474 /* Selected tab */
2475
2476 .tabbrowser-tab[selected="true"] {
2477 }
2478
2479 /* End selected tab */
2480
2481 /* Background tabs */
2482
2483 /* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2484    of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2485    the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */
2486 #main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) {
2487 }
2488
2489 /* End background tabs */
2490
2491 /* Tab pointer-events */
2492 /*
2493 .tabbrowser-tab {
2494   pointer-events: none;
2495 }
2496
2497 .tab-background-middle,
2498 .tabs-newtab-button,
2499 .tab-close-button {
2500   pointer-events: auto;
2501 }
2502 */
2503 /* Pinned tabs */
2504
2505 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
2506   background-color: #E7ADE7;
2507 }
2508
2509 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
2510   background-color: #3333FF;
2511   color: #000000;
2512 }
2513
2514 /* New tab button */
2515
2516 .tabs-newtab-button {
2517   width: 28px;
2518 }
2519
2520 /* === END tabs.inc.css === */
2521
2522 /* Tab DnD indicator */
2523 .tab-drop-indicator {
2524   list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
2525   margin-bottom: -11px;
2526 }
2527
2528 /* Tab close button */
2529 .tab-close-button {
2530   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2531 }
2532
2533 .tab-close-button:hover,
2534 .tab-close-button:hover[selected="true"] {
2535   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2536 }
2537
2538 .tab-close-button:hover:active,
2539 .tab-close-button:hover:active[selected="true"] {
2540   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2541 }
2542
2543 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
2544
2545 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2546 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2547   margin: 0;
2548   padding-top: 0;
2549   padding-bottom: 0;
2550   background-origin: border-box;
2551 }
2552
2553 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2554 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2555 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
2556 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
2557  }
2558
2559 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
2560 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
2561  }
2562
2563 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
2564 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
2565 /*  transform: scaleX(-1);*/
2566 }
2567
2568 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2569   transition: 1s background-color ease-out;
2570 }
2571
2572 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2573   background-color: #008484;
2574 }
2575
2576 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
2577 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
2578 /*  border-width: 0 2px 0 0;
2579   border-style: solid;
2580   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
2581 }
2582
2583 .tabs-newtab-button > .toolbarbutton-icon {
2584   margin-top: -1px;
2585   margin-bottom: -1px;
2586 }
2587
2588 .tabs-newtab-button,
2589 #TabsToolbar > #new-tab-button,
2590 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2591 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2592   list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png");
2593   -moz-image-region: rect(0, 16px, 18px, 0);
2594 }
2595
2596 .tabs-newtab-button,
2597 .tabs-newtab-button:hover,
2598 #TabsToolbar > #new-tab-button,
2599 #TabsToolbar > #new-tab-button:hover {
2600   -moz-image-region: rect(0, 32px, 18px, 16px);
2601 }
2602
2603 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2604 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2605 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2606 .tabs-newtab-button:-moz-lwtheme-brighttext,
2607 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
2608 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
2609 }
2610
2611 #TabsToolbar > #new-tab-button {
2612   width: 26px;
2613 }
2614
2615 #alltabs-button {
2616   list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
2617 }
2618
2619 #alltabs-button:hover,
2620 #alltabs-button:hover:active,
2621 #alltabs-button[open="true"] {
2622   list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
2623 }
2624
2625 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2626 #alltabs-button:-moz-lwtheme-brighttext {
2627 }
2628
2629 #alltabs-button > .toolbarbutton-icon {
2630 /*  margin: 0 2px;*/
2631 }
2632
2633 #alltabs-button > .toolbarbutton-menu-dropmarker {
2634   display: none;
2635 }
2636
2637 /* All tabs menupopup */
2638 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2639   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2640   -moz-image-region: auto;
2641 }
2642
2643 .alltabs-item[selected="true"] {
2644   font-weight: bold;
2645 }
2646
2647 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2648   list-style-image: url("chrome://global/skin/icons/loading.gif");
2649 }
2650
2651 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
2652   background-color: #402800;
2653 }
2654
2655 /* Tabstrip close button */
2656 .tabs-closebutton {
2657   -moz-box-flex: 1;
2658   margin: 0px;
2659   padding: 2px;
2660   list-style-image: url("chrome://global/skin/icons/close-button.gif");
2661 }
2662
2663 .tabs-closebutton > .toolbarbutton-icon {
2664 }
2665
2666 .tabs-closebutton > .toolbarbutton-text {
2667   display: none;
2668 }
2669
2670 .tabs-closebutton:hover,
2671 .tabs-closebutton:hover:active {
2672   list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2673 }
2674
2675 toolbarbutton.chevron {
2676   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
2677 }
2678
2679 toolbarbutton.chevron:hover {
2680   list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
2681 }
2682
2683 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2684 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
2685   transform: scaleX(-1);
2686 }
2687
2688 toolbarbutton.chevron > .toolbarbutton-text,
2689 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2690   display: none;
2691 }
2692
2693 toolbarbutton.chevron > .toolbarbutton-icon {
2694   margin: 0;
2695 }
2696
2697 #sidebar-throbber[loading="true"] {
2698   list-style-image: url("chrome://global/skin/icons/loading.gif");
2699   -moz-margin-end: 4px;
2700 }
2701
2702 /* Bookmarks toolbar */
2703 #PlacesToolbarDropIndicator {
2704   list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
2705 }
2706
2707 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
2708   background-color: #008484 !important;
2709   color: #FFCF00 !important;
2710 }
2711
2712 /* rules for menupopup drop indicators */
2713 .menupopup-drop-indicator-bar {
2714   position: relative;
2715   /* these two margins must together compensate the indicator's height */
2716   margin-top: -1px;
2717   margin-bottom: -1px;
2718 }
2719
2720 .menupopup-drop-indicator {
2721   list-style-image: none;
2722   height: 2px;
2723   -moz-margin-end: -4em;
2724   background-color: #008484;
2725 }
2726
2727 /* ::::: Identity Indicator Styling ::::: */
2728
2729 /* Popup Icons */
2730 #identity-popup-icon {
2731   height: 64px;
2732   width: 64px;
2733   padding: 0;
2734   list-style-image: url("chrome://browser/skin/identity.png");
2735   -moz-image-region: rect(0px, 64px, 64px, 0px);
2736 }
2737
2738 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2739   -moz-image-region: rect(64px, 64px, 128px, 0px);
2740 }
2741
2742 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2743   -moz-image-region: rect(128px, 64px, 192px, 0px);
2744 }
2745
2746 /* Popup Body Text */
2747 .identity-popup-description {
2748   white-space: pre-wrap;
2749   -moz-padding-start: 15px;
2750   margin: 2px 0 4px;
2751 }
2752
2753 .identity-popup-label {
2754   white-space: pre-wrap;
2755   -moz-padding-start: 15px;
2756   margin: 0;
2757 }
2758
2759 #identity-popup-content-host,
2760 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2761   font-size: 1.2em;
2762 }
2763
2764 #identity-popup-content-host {
2765   margin-top: 3px;
2766   margin-bottom: 5px;
2767   font-weight: bold;
2768   max-width: 300px;
2769 }
2770
2771 #identity-popup-content-owner {
2772   margin-top: 4px;
2773   margin-bottom: 0 !important;
2774   font-weight: bold;
2775   max-width: 300px;
2776 }
2777
2778 .verifiedDomain > #identity-popup-content-owner {
2779   font-weight: normal;
2780 }
2781
2782 #identity-popup-content-verifier {
2783   margin: 4px 0 2px;
2784 }
2785
2786 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2787 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2788   margin-top: 10px;
2789   -moz-margin-start: -24px;
2790 }
2791
2792 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2793 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2794   list-style-image: url("chrome://browser/skin/Secure24.png");
2795 }
2796
2797 #identity-popup-help-icon {
2798   border: none;
2799   margin: 7px 0 0 -3px;
2800   background: none;
2801   min-width: 0;
2802   list-style-image: url("chrome://global/skin/icons/question-16.png");
2803   cursor: pointer;
2804 }
2805
2806 #identity-popup-help-icon > .button-box > .button-text {
2807   display: none;
2808 }
2809
2810 #identity-popup-help-icon > .button-box > .button-icon {
2811   height: 16px;
2812   width: 16px;
2813 }
2814
2815 #identity-popup-more-info-button {
2816   margin-top: 6px;
2817   margin-bottom: 0;
2818   -moz-margin-end: 0;
2819 }
2820
2821 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
2822   padding: 0;
2823 }
2824
2825 #identity-popup-container {
2826   min-width: 280px;
2827   padding: 10px;
2828 }
2829
2830 #identity-popup-button-container {
2831 /*  background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/
2832   padding: 10px;
2833   margin-top: 5px;
2834 }
2835
2836 .popup-notification-icon {
2837   width: 64px;
2838   height: 64px;
2839   -moz-margin-end: 10px;
2840 }
2841
2842 .popup-notification-icon[popupid="geolocation"] {
2843   list-style-image: url("chrome://browser/skin/Geolocation-64.png");
2844 }
2845
2846 .popup-notification-icon[popupid="xpinstall-disabled"],
2847 .popup-notification-icon[popupid="addon-progress"],
2848 .popup-notification-icon[popupid="addon-install-cancelled"],
2849 .popup-notification-icon[popupid="addon-install-blocked"],
2850 .popup-notification-icon[popupid="addon-install-failed"],
2851 .popup-notification-icon[popupid="addon-install-complete"] {
2852   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
2853   width: 32px;
2854   height: 32px;
2855 }
2856
2857 .popup-notification-icon[popupid="click-to-play-plugins"] {
2858   list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
2859 }
2860
2861 .popup-notification-icon[popupid="plugins-not-found"] {
2862   list-style-image: url("chrome://browser/skin/pluginInstall-64.png");
2863 }
2864
2865 .popup-notification-icon[popupid="web-notifications"] {
2866   list-style-image: url("chrome://browser/skin/notification-64.png");
2867 }
2868
2869 .addon-progress-description {
2870   width: 350px;
2871   max-width: 350px;
2872 }
2873
2874 .popup-progress-label,
2875 .popup-progress-meter {
2876   -moz-margin-start: 0;
2877   -moz-margin-end: 0;
2878 }
2879
2880 .popup-progress-cancel {
2881   -moz-appearance: none;
2882   background: transparent;
2883   border: none;
2884   padding: 0;
2885   margin: 0;
2886   min-height: 0;
2887   min-width: 0;
2888   list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
2889   -moz-image-region: rect(0px, 32px, 16px, 16px);
2890 }
2891
2892 .popup-progress-cancel:hover {
2893   -moz-image-region: rect(16px, 32px, 32px, 16px);
2894 }
2895
2896 .popup-progress-cancel:active {
2897   -moz-image-region: rect(32px, 32px, 48px, 16px);
2898 }
2899
2900 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
2901 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
2902 .popup-notification-icon[popupid*="offline-app-requested"],
2903 .popup-notification-icon[popupid="offline-app-usage"] {
2904   list-style-image: url("chrome://global/skin/icons/alert-question.gif");
2905 }
2906
2907 .popup-notification-icon[popupid="password-save"],
2908 .popup-notification-icon[popupid="password-change"] {
2909   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
2910 }
2911
2912 .popup-notification-icon[popupid="webapps-install-progress"],
2913 .popup-notification-icon[popupid="webapps-install"] {
2914   list-style-image: url("chrome://global/skin/icons/webapps-64.png");
2915 }
2916
2917 .popup-notification-icon[popupid="mixed-content-blocked"] {
2918   list-style-image: url("chrome://browser/skin/mixed-content-blocked-64.png");
2919 }
2920
2921 .popup-notification-icon[popupid="webRTC-sharingDevices"],
2922 .popup-notification-icon[popupid="webRTC-shareDevices"] {
2923   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
2924 }
2925
2926 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
2927 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
2928   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
2929 }
2930
2931 .popup-notification-icon[popupid="pointerLock"] {
2932   list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2933 }
2934
2935 /* Notification icon box */
2936 #notification-popup-box {
2937   position: relative;
2938   background-color: #000000;
2939   background-clip: padding-box;
2940   padding-left: 3px;
2941   padding-right: 8px;
2942   border-radius: 3px 0 0 3px;
2943   border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2944   -moz-margin-end: -8px;
2945   border-right-width: 8px;
2946 }
2947
2948 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box,
2949 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar > #notification-popup-box {
2950 /*  padding-left: 5px; */
2951 }
2952
2953 #notification-popup-box:-moz-locale-dir(rtl),
2954 .notification-anchor-icon:-moz-locale-dir(rtl) {
2955   transform: scaleX(-1);
2956 }
2957
2958 .notification-anchor-icon {
2959   width: 16px;
2960   height: 16px;
2961   margin: 0 2px;
2962 }
2963
2964 .notification-anchor-icon:-moz-focusring {
2965   outline: 1px dotted #008484;
2966 /*  outline-offset: -3px; */
2967 }
2968
2969 .default-notification-icon,
2970 #default-notification-icon {
2971   list-style-image: url("chrome://global/skin/icons/information-16.png");
2972 }
2973
2974 .identity-notification-icon,
2975 #identity-notification-icon {
2976   list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2977 }
2978
2979 .geo-notification-icon,
2980 #geo-notification-icon {
2981   list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2982 }
2983
2984 #addons-notification-icon {
2985   list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2986 }
2987
2988 .indexedDB-notification-icon,
2989 #indexedDB-notification-icon {
2990   list-style-image: url("chrome://global/skin/icons/question-16.png");
2991 }
2992
2993 #password-notification-icon {
2994   list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
2995 }
2996
2997 #webapps-notification-icon {
2998   list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
2999 }
3000
3001 #plugins-notification-icon {
3002   list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3003 }
3004
3005 #plugins-notification-icon.plugin-hidden {
3006   list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3007 }
3008
3009 #plugins-notification-icon.plugin-blocked {
3010   list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3011 }
3012
3013 #plugins-notification-icon {
3014 /*  -moz-image-region: rect(0, 16px, 16px, 0);*/
3015 }
3016
3017 #plugins-notification-icon:hover {
3018 /*  -moz-image-region: rect(0, 32px, 16px, 16px);*/
3019 }
3020
3021 #plugin-install-notification-icon {
3022   list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
3023 }
3024
3025 #notification-popup-box[hidden] {
3026   /* Override display:none to make the pluginBlockedNotification animation work
3027      when showing the notification repeatedly. */
3028   display: -moz-box;
3029   visibility: collapse;
3030 }
3031
3032 #plugins-notification-icon.plugin-blocked[showing] {
3033   animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3034 }
3035
3036 @keyframes pluginBlockedNotification {
3037   from {
3038     opacity: 0;
3039   }
3040   to {
3041     opacity: 1;
3042   }
3043 }
3044
3045 .mixed-content-blocked-notification-icon,
3046 #mixed-content-blocked-notification-icon {
3047   list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
3048 }
3049
3050 .webRTC-shareDevices-notification-icon,
3051 #webRTC-shareDevices-notification-icon {
3052   list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3053 }
3054
3055 .webRTC-sharingDevices-notification-icon,
3056 #webRTC-sharingDevices-notification-icon {
3057   list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3058 }
3059
3060 .webRTC-shareMicrophone-notification-icon,
3061 #webRTC-shareMicrophone-notification-icon {
3062   list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3063 }
3064
3065 .webRTC-sharingMicrophone-notification-icon,
3066 #webRTC-sharingMicrophone-notification-icon {
3067   list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3068 }
3069
3070 .web-notifications-notification-icon,
3071 #web-notifications-notification-icon {
3072   list-style-image: url("chrome://browser/skin/notification-16.png");
3073 }
3074
3075 #pointerLock-notification-icon {
3076   list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3077 }
3078 #pointerLock-cancel {
3079   margin: 0px;
3080 }
3081
3082 /* Bookmarks roots menu-items */
3083 #subscribeToPageMenuitem:not([disabled]),
3084 #subscribeToPageMenupopup,
3085 #BMB_subscribeToPageMenuitem:not([disabled]),
3086 #BMB_subscribeToPageMenupopup {
3087   list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3088 }
3089
3090 #bookmarksToolbarFolderMenu,
3091 #BMB_bookmarksToolbar,
3092 #panelMenu_bookmarksToolbar {
3093   list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3094   -moz-image-region: auto;
3095 }
3096
3097 #BMB_unsortedBookmarks,
3098 #panelMenu_unsortedBookmarks {
3099   list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3100   -moz-image-region: auto;
3101 }
3102
3103 /* ::::: Keyboard UI Panel ::::: */
3104
3105 .KUI-panel {
3106   color: #FF9F00;
3107   border-style: none;
3108   border-radius: 20px;
3109 }
3110
3111 .KUI-panel[level="top"] {
3112   /*background-color: rgba(27%,27%,27%,.65);*/
3113 }
3114
3115 /* Ctrl-Tab */
3116
3117 #ctrlTab-panel {
3118   padding: 20px 10px 10px;
3119   font-weight: bold;
3120 }
3121
3122 .ctrlTab-favicon[src] {
3123   background-color: #000000;
3124   width: 20px;
3125   height: 20px;
3126   padding: 2px;
3127 }
3128
3129 .ctrlTab-preview-inner > .tabPreview-canvas {
3130 }
3131
3132 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3133   margin-bottom: 2px;
3134 }
3135
3136 .ctrlTab-preview-inner {
3137   padding-bottom: 10px;
3138 }
3139
3140 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3141   padding: 10px;
3142   background-color: #000000;
3143   border-radius: .5em;
3144 }
3145
3146 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3147   color: white;
3148   background-color: #000000;
3149   text-shadow: none;
3150   padding: 8px;
3151   border: 2px solid #9C9CFF;
3152   border-radius: .5em;
3153 }
3154
3155 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3156   margin: -10px -10px 0;
3157 }
3158
3159 #ctrlTab-showAll {
3160   margin-top: .5em;
3161 }
3162
3163 /* Sync Panel */
3164
3165 .sync-panel-icon {
3166   width: 32px;
3167   background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3168 }
3169
3170 .sync-panel-inner {
3171   width: 0;
3172   padding-left: 10px;
3173 }
3174
3175 .sync-panel-button-box {
3176   margin-top: 1em;
3177 }
3178
3179 #sync-error-panel-title,
3180 #sync-start-panel-title {
3181   font-weight: bold;
3182 }
3183
3184 #sync-start-panel-subtitle,
3185 #sync-error-panel-subtitle {
3186   margin: 0;
3187 }
3188
3189 /* Status panel */
3190
3191 .statuspanel-label {
3192   margin: 0;
3193   padding: 2px 4px;
3194   background: #404000;
3195   border: 1px none #9C9CFF;
3196   border-top-style: solid;
3197   color: #FF9F00;
3198   text-shadow: none;
3199 }
3200
3201 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3202 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3203   border-right-style: solid;
3204   border-top-right-radius: .3em;
3205   margin-right: 1em;
3206 }
3207
3208 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3209 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3210   border-left-style: solid;
3211   border-top-left-radius: .3em;
3212   margin-left: 1em;
3213 }
3214
3215 /* HACK to abolish devily color on main content */
3216
3217 #content {
3218   background-color: transparent !important;
3219 }
3220
3221 /* === BEGIN highlighter.inc.css === */
3222
3223 /* Highlighter */
3224
3225 .highlighter-outline {
3226   box-shadow: 0 0 0 1px black;
3227   outline: 1px dashed #A09090;
3228 }
3229
3230 /* Highlighter - Node Infobar */
3231
3232 .highlighter-nodeinfobar {
3233   color: #FF9F00;
3234   border-radius: 3px;
3235   background-color: #000000;
3236   background-clip: padding-box;
3237   border: 1px solid #008484;
3238   padding: 5px;
3239   /* Avoid cases where the infobar is smaller than the arrow, when the text is
3240   short */
3241   min-width: 75px;
3242 }
3243
3244 /* Highlighter - Node Infobar - text */
3245
3246 .highlighter-nodeinfobar-text {
3247   text-align: center;
3248   /* 100% - size of the buttons and margins */
3249   max-width: calc(100% - 2 * (26px + 6px));
3250   padding-bottom: 1px;
3251 }
3252
3253 html|*.highlighter-nodeinfobar-tagname {
3254   color: #FFCF00;
3255 }
3256
3257 html|*.highlighter-nodeinfobar-id {
3258   color: #9C9CFF;
3259 }
3260
3261 html|*.highlighter-nodeinfobar-pseudo-classes {
3262   color: #FF9F00;
3263 }
3264
3265 /* Highlighter - Node Infobar - box & arrow */
3266
3267 .highlighter-nodeinfobar-arrow {
3268   width: 14px;
3269   height: 14px;
3270   -moz-margin-start: calc(50% - 7px);
3271   transform: rotate(-45deg);
3272   background-clip: padding-box;
3273   background-repeat: no-repeat;
3274 }
3275
3276 .highlighter-nodeinfobar-arrow-top {
3277   margin-bottom: -8px;
3278   margin-top: 8px;
3279   background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3280 }
3281
3282 .highlighter-nodeinfobar-arrow-bottom {
3283   margin-top: -8px;
3284   margin-bottom: 8px;
3285   background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3286 }
3287
3288 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3289   margin: 7px 0;
3290 }
3291
3292 /* === END highlighter.inc.css === */
3293
3294 #full-screen-warning-message {
3295   background-color: #000000;
3296   color: #FF9F00;
3297   border-radius: 8px;
3298   margin-top: 30px;
3299   padding: 30px 50px;
3300   box-shadow: 0 0 2px #9C9CFF;
3301 }
3302
3303 #full-screen-warning-container[obscure-browser] {
3304   background-color: rgba(0,0,0,0.3);
3305 }
3306
3307 .full-screen-description {
3308   font-size: 150%;
3309 }
3310
3311 #full-screen-domain-text {
3312   font-size: 300%;
3313 }
3314
3315 .full-screen-approval-button,
3316 #full-screen-remember-decision {
3317   font-size: 120%;
3318 }
3319
3320 /* === BEGIN commandline.inc.css === */
3321
3322 /* Developer toolbar */
3323
3324 #developer-toolbar {
3325   border-top: 3px solid #000000;
3326   border-bottom: none;
3327 }
3328
3329 #developer-toolbar .toolbar-holder {
3330   background-color: #8050B0;
3331   color: #FFCF00;
3332 }
3333
3334 #developer-toolbar .toolbar-holder {
3335   background-color: #8050B0;
3336   color: #FFCF00;
3337 }
3338
3339 #developer-toolbar .toolbar-startcap,
3340 #developer-toolbar .toolbar-endcap{
3341   background-color: #6000CF;
3342 }
3343
3344 #developer-toolbar {
3345 /*  padding: 0;
3346   min-height: 32px; */
3347 }
3348
3349 #developer-toolbar > toolbarbutton {
3350 /*  margin: 0;
3351   padding: 0 10px;
3352   width: 32px; */
3353 }
3354
3355 .developer-toolbar-button > image {
3356 /*  margin: auto 10px; */
3357 }
3358
3359 #developer-toolbar-toolbox-button > label {
3360   display: none;
3361 }
3362
3363 #developer-toolbar-toolbox-button {
3364   list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3365   -moz-image-region: rect(0px, 16px, 16px, 0px);
3366 }
3367
3368 #developer-toolbar-toolbox-button > label {
3369   display: none;
3370 }
3371
3372 #developer-toolbar-toolbox-button:hover,
3373 #developer-toolbar-toolbox-button:hover:active,
3374 #developer-toolbar-toolbox-button[checked=true] {
3375   -moz-image-region: rect(0px, 32px, 16px, 16px);
3376 }
3377
3378 #developer-toolbar-closebutton {
3379   list-style-image: url("chrome://browser/skin/devtools/close.png");
3380   -moz-image-region: rect(0px, 16px, 16px, 0px);
3381   min-width: 16px;
3382   width: 16px;
3383 }
3384
3385 #developer-toolbar-closebutton > .toolbarbutton-icon {
3386 }
3387
3388 #developer-toolbar-closebutton > .toolbarbutton-text {
3389   display: none;
3390 }
3391
3392 #developer-toolbar-closebutton:hover,
3393 #developer-toolbar-closebutton:hover:active {
3394   -moz-image-region: rect(0px, 32px, 16px, 16px);
3395 }
3396
3397 /* GCLI */
3398
3399 html|*#gcli-tooltip-frame,
3400 html|*#gcli-output-frame {
3401   padding: 0;
3402   border-width: 0;
3403   background-color: transparent;
3404 }
3405
3406 #gcli-output,
3407 #gcli-tooltip {
3408   border-width: 0;
3409   background-color: transparent;
3410 }
3411
3412 .gclitoolbar-input-node,
3413 .gclitoolbar-complete-node {
3414   margin: 1px 3px;
3415   -moz-box-align: center;
3416   padding-top: 0;
3417   padding-bottom: 0;
3418   padding-right: 8px;
3419   background-color: transparent;
3420 }
3421
3422 .gclitoolbar-input-node {
3423   padding-left: 20px;
3424 /*  line-height: 32px;
3425   outline-style: none; */
3426   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3427   background-repeat: no-repeat;
3428   background-color: rgba(0, 0, 0, .75);
3429 }
3430
3431 .gclitoolbar-input-node[focused="true"] {
3432   background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3433   background-color: #000000;
3434 }
3435
3436 .gclitoolbar-input-node:not([focused="true"]) {
3437   border-color: transparent;
3438 }
3439
3440 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3441   background-color: #008484;
3442   color: #000000;
3443   text-shadow: none;
3444 }
3445
3446 .gclitoolbar-complete-node {
3447   padding-left: 21px;
3448   background-color: transparent;
3449   color: transparent;
3450   z-index: 100;
3451   pointer-events: none;
3452 }
3453
3454 .gcli-in-incomplete,
3455 .gcli-in-error,
3456 .gcli-in-ontab,
3457 .gcli-in-todo,
3458 .gcli-in-closebrace,
3459 .gcli-in-param,
3460 .gcli-in-valid {
3461   margin: 0;
3462   padding: 0;
3463 }
3464
3465 .gcli-in-incomplete {
3466   border-bottom: 2px dotted #8050B0;
3467 }
3468
3469 .gcli-in-error {
3470   border-bottom: 2px dotted #FF0000;
3471 }
3472
3473 .gcli-in-ontab {
3474   color: #9C9CFF;
3475 }
3476
3477 .gcli-in-todo {
3478   color: #795900;
3479 }
3480
3481 .gcli-in-closebrace {
3482   color: #8050B0;
3483 }
3484
3485 /* === END commandline.inc.css === */
3486
3487 /* === BEGIN responsivedesign.inc.css === */
3488
3489 /* Responsive Mode */
3490
3491 .browserContainer[responsivemode] {
3492   background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3493   padding: 0 20px 20px 20px;
3494 }
3495
3496 .browserStack[responsivemode] {
3497   box-shadow: 0 0 7px #9C9CFF;
3498 }
3499
3500 .devtools-responsiveui-toolbar {
3501   background: transparent;
3502   /* text color is textColor from dark theme, since no theme is applied to
3503    * the responsive toolbar.
3504    */
3505   color: #FF9F00;
3506   margin: 10px 0;
3507   padding: 0;
3508   box-shadow: none;
3509   border-bottom-width: 0;
3510 }
3511
3512 .devtools-responsiveui-menulist,
3513 .devtools-responsiveui-toolbarbutton {
3514   -moz-box-align: center;
3515   min-width: 32px;
3516 /*  min-height: 22px;*/
3517 /*  margin: 0 3px; */
3518 }
3519
3520 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3521   -moz-box-orient: horizontal;
3522 }
3523
3524 .devtools-responsiveui-menulist:-moz-focusring,
3525 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3526 /*  outline: 1px dotted hsla(210,30%,85%,0.7);
3527   outline-offset: -4px;*/
3528 }
3529
3530 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3531   display: none;
3532 }
3533
3534 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3535 /*  border-color: hsla(210,8%,5%,.6);
3536   background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3537   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); */
3538 }
3539
3540 .devtools-responsiveui-menulist[open=true],
3541 .devtools-responsiveui-toolbarbutton[open=true],
3542 .devtools-responsiveui-toolbarbutton[checked=true] {
3543 /*  border-color: hsla(210,8%,5%,.6) !important;
3544   background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3545   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); */
3546 }
3547
3548 .devtools-responsiveui-toolbarbutton[checked=true] {
3549 /*  color: hsl(208,100%,60%); */
3550 }
3551
3552 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3553 /*  background-color: transparent !important;*/
3554 }
3555
3556 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3557 /*  background-color: hsla(210,8%,5%,.2) !important;*/
3558 }
3559
3560 .devtools-responsiveui-menulist > .menulist-label-box {
3561   text-align: center;
3562 }
3563
3564 .devtools-responsiveui-menulist > .menulist-dropmarker {
3565 /*  display: -moz-box;
3566   background-color: transparent;
3567   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3568   -moz-box-align: center;
3569   border-width: 0;
3570   min-width: 16px;*/
3571 }
3572
3573 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3574 /*  color: inherit;
3575   border-width: 0;
3576   -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3577   box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3578 }
3579
3580 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3581 /*  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3582 }
3583
3584 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3585 /*  padding: 0 1px;*/
3586   -moz-box-align: stretch;
3587 }
3588
3589 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3590 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3591 /*  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3592   -moz-box-align: center;
3593   padding: 0 3px;*/
3594 }
3595
3596 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3597 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3598   margin-left: 3px;
3599 }
3600
3601 .devtools-responsiveui-close {
3602   list-style-image: url("chrome://browser/skin/devtools/close.png");
3603   -moz-image-region: rect(0px,16px,16px,0px);
3604 }
3605
3606 .devtools-responsiveui-close:hover {
3607   -moz-image-region: rect(0px,32px,16px,16px);
3608 }
3609
3610 .devtools-responsiveui-rotate {
3611   list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3612   -moz-image-region: rect(0px,16px,16px,0px);
3613 }
3614
3615 .devtools-responsiveui-rotate:hover {
3616   -moz-image-region: rect(0px,32px,16px,16px);
3617 }
3618
3619 .devtools-responsiveui-touch {
3620   list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3621   -moz-image-region: rect(0px,16px,16px,0px);
3622 }
3623
3624 .devtools-responsiveui-touch:hover,
3625 .devtools-responsiveui-touch[checked],
3626 .devtools-responsiveui-touch[checked]:hover {
3627   -moz-image-region: rect(0px,32px,16px,16px);
3628 }
3629
3630 .devtools-responsiveui-screenshot {
3631   list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3632   -moz-image-region: rect(0px,16px,16px,0px);
3633 }
3634
3635 .devtools-responsiveui-screenshot:hover {
3636   -moz-image-region: rect(0px,32px,16px,16px);
3637 }
3638
3639 .devtools-responsiveui-resizebarV {
3640   width: 7px;
3641   height: 24px;
3642   cursor: ew-resize;
3643   transform: translate(12px, -12px);
3644   background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3645 }
3646
3647 .devtools-responsiveui-resizebarH {
3648   width: 24px;
3649   height: 7px;
3650   cursor: ns-resize;
3651   transform: translate(-12px, 12px);
3652   background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3653 }
3654
3655 .devtools-responsiveui-resizehandle {
3656   width: 16px;
3657   height: 16px;
3658   cursor: se-resize;
3659   transform: translate(12px, 12px);
3660   background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3661 }
3662
3663 /* === END responsivedesign.inc.css === */
3664
3665 /* === including indicator.css is done at the start of the file === */
3666
3667 /* Error counter */
3668
3669 #developer-toolbar-toolbox-button[error-count]:before {
3670   color: #000000;
3671   min-width: 16px;
3672   text-shadow: none;
3673   background-color: #FF0000;
3674   border-radius: 1px;
3675   -moz-margin-end: 5px;
3676 }
3677
3678 /* Social toolbar item */
3679
3680 #social-provider-button {
3681   -moz-image-region: rect(0, 16px, 16px, 0);
3682   list-style-image: url("chrome://browser/skin/social/services-16.png");
3683 }
3684
3685 #social-provider-button > .toolbarbutton-menu-dropmarker {
3686   display: none;
3687 }
3688
3689 .toolbarbutton-badge-container {
3690   margin: 0;
3691   padding: 0;
3692   position: relative;
3693 }
3694
3695 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3696   padding: 2px 2px;
3697 }
3698
3699 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3700   position: absolute;
3701   top: 2px;
3702   right: 2px;
3703 }
3704
3705 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3706   -moz-margin-end: 0;
3707 }
3708
3709 .toolbarbutton-badge[badge=""] {
3710   display: none;
3711 }
3712 .toolbarbutton-badge[badge]:not([badge=""])::after {
3713   /* The |content| property is set in the content stylesheet. */
3714   font-size: 9px;
3715   font-weight: bold;
3716   padding: 0 1px;
3717   color: #FF9F00;
3718   background-color: #000000;
3719   border: 1px solid #9C9CFF;
3720   border-radius: 2px;
3721   position: absolute;
3722   top: 0;
3723   right: 0;
3724 }
3725
3726 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3727   top: 1px;
3728   right: 1px;
3729 }
3730
3731 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3732   left: 0;
3733   right: auto;
3734 }
3735
3736 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3737   left: 1px;
3738   right: auto;
3739 }
3740
3741 #social-notification-icon-mentions {
3742   background-color: #000000;
3743   border-radius: 3px;
3744   -moz-margin-start: 2px;
3745 }
3746
3747 #social-notification-icon-mentions:hover {
3748   background-color: #FFCF00;
3749 }
3750
3751 #social-notification-icon-mentions[open="true"] {
3752   background-color: #FF9F00;
3753 }
3754
3755 #social-sidebar-splitter {
3756   border: 0;
3757 }
3758
3759 .popup-notification-icon[popupid="servicesInstall"] {
3760   list-style-image: url("chrome://browser/skin/social/services-64.png");
3761 }
3762 #servicesInstall-notification-icon {
3763   list-style-image: url("chrome://browser/skin/social/services-16.png");
3764 }
3765 #social-undoactivation-button {
3766   -moz-margin-start: 0; /* override default label margin to match description margin */
3767 }
3768
3769 #socialActivatedNotification .popup-notification-button-container {
3770   margin-left: 6px;
3771 }
3772
3773 .social-activation-icon {
3774   width: auto;
3775   height: auto;
3776   max-height: 64px;
3777   max-width: 64px;
3778 }
3779
3780 #social-activation-message {
3781   max-width: 250px;
3782 }
3783
3784 #social-activation-message > label {
3785   margin: 0;
3786 }
3787
3788 /* social toolbar provider menu */
3789 .social-statusarea-popup {
3790   margin-top: 0;
3791   margin-left: -12px;
3792   margin-right: -12px;
3793 }
3794
3795 .social-statusarea-user {
3796   border-bottom: 1px solid #9C9CFF;
3797   background-color: #000000;
3798   color: #FF9F00;
3799   position: relative;
3800   cursor: pointer;
3801 }
3802
3803 .social-statusarea-user-portrait {
3804   width: 32px;
3805   height: 32px;
3806   border-radius: 2px;
3807   margin: 10px;
3808 }
3809
3810 .social-statusarea-loggedInStatus {
3811   background: transparent;
3812   border: none;
3813   color: #3333FF;
3814   min-width: 0;
3815   margin: 0 6px;
3816   list-style-image: none;
3817 }
3818
3819 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3820   text-decoration: underline;
3821 }
3822
3823 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3824   padding: 0;
3825 }
3826
3827 .social-panel-frame {
3828   border-radius: inherit;
3829 }
3830
3831 /* === BEGIN chat.inc.css === */
3832
3833 #social-sidebar-header {
3834   padding: 3px;
3835 }
3836
3837 #social-sidebar-button {
3838   -moz-appearance: none;
3839   list-style-image: url("chrome://browser/skin/social/gear_default.png");
3840   border: none;
3841   padding: 0;
3842   margin: 2px;
3843 }
3844 #social-sidebar-button > .toolbarbutton-icon {
3845   min-height: 16px;
3846   min-width: 16px;
3847 }
3848 #social-sidebar-button:hover,
3849 #social-sidebar-button:hover:active {
3850   list-style-image: url("chrome://browser/skin/social/gear_clicked.png");
3851 }
3852 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
3853   display: none;
3854 }
3855
3856 #social-sidebar-button[loading="true"] {
3857   list-style-image: url("chrome://global/skin/icons/loading.gif");
3858 }
3859
3860 #social-sidebar-favico {
3861   max-height: 16px;
3862   max-width: 16px;
3863   padding: 0;
3864   margin: 2px;
3865 }
3866
3867 .chat-status-icon {
3868   max-height: 16px;
3869   max-width: 16px;
3870   padding: 0;
3871 }
3872
3873 .chat-toolbarbutton {
3874   -moz-appearance: none;
3875   border: none;
3876   padding: 0;
3877   margin: 0;
3878   background: none;
3879   width: 16px;
3880 }
3881
3882 .chat-toolbarbutton > .toolbarbutton-text {
3883   display: none;
3884 }
3885
3886 .chat-toolbarbutton > .toolbarbutton-icon {
3887   width: inherit;
3888 }
3889
3890 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3891   width: inherit;
3892   margin-top: -2px;
3893 }
3894
3895 .chat-close-button {
3896   list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3897   -moz-image-region: rect(0, 16px, 16px, 0);
3898 }
3899
3900 .chat-close-button:hover,
3901 .chat-close-button:hover:active {
3902   -moz-image-region: rect(0, 32px, 16px, 16px);
3903 }
3904
3905 .chat-minimize-button {
3906   list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3907   -moz-image-region: rect(16px, 16px, 32px, 0);
3908 }
3909
3910 .chat-minimize-button:hover:active,
3911 .chat-minimize-button:hover {
3912   -moz-image-region: rect(16px, 32px, 32px, 16px);
3913 }
3914
3915 .chat-swap-button {
3916   list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3917   -moz-image-region: rect(48px, 16px, 64px, 0);
3918 }
3919
3920 .chat-swap-button:hover:active,
3921 .chat-swap-button:hover {
3922   -moz-image-region: rect(48px, 32px, 64px, 16px);
3923 }
3924
3925 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3926   list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3927   -moz-image-region: rect(32px, 16px, 48px, 0);
3928 }
3929
3930 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3931 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3932   -moz-image-region: rect(32px, 32px, 48px, 16px);
3933 }
3934
3935 .chat-title {
3936   font-weight: bold;
3937   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3938   text-shadow: none;
3939   cursor: inherit;
3940 }
3941
3942 .chat-titlebar {
3943   background-color: #9C9CFF;
3944   color: #000000;
3945   height: 20px;
3946   min-height: 16px;
3947   width: 100%;
3948   margin: 0;
3949   padding: 2px;
3950   -moz-padding-start: 6px;
3951   border: none;
3952   border-bottom: 1px solid #008484;
3953   cursor: pointer;
3954 }
3955
3956 .chat-titlebar > .notification-anchor-icon {
3957   margin-left: 2px;
3958   margin-right: 2px;
3959 }
3960
3961 .chat-titlebar[minimized="true"] {
3962   border-bottom: none;
3963 }
3964
3965 .chat-titlebar[selected] {
3966   background-color: #008484;
3967 }
3968
3969 .chat-titlebar[activity] {
3970   background-color: #E7ADE7;
3971 }
3972
3973 .chat-frame {
3974   padding: 0;
3975   margin: 0;
3976   overflow: hidden;
3977 }
3978
3979 .chatbar-button {
3980   list-style-image: url("chrome://browser/skin/social/services-16.png");
3981   background-color: #000000;
3982   border: none;
3983   margin: 0;
3984   padding: 2px;
3985   height: 21px;
3986   width: 21px;
3987   border-top: 1px solid #008484;
3988   -moz-border-end: 1px solid #008484;
3989 }
3990
3991 @media (min-resolution: 2dppx) {
3992   .chatbar-button {
3993     list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
3994   }
3995 }
3996
3997 .chatbar-button > .toolbarbutton-icon {
3998   width: 16px;
3999 }
4000
4001 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4002   width: auto;
4003   height: auto;
4004   max-height: 16px;
4005   max-width: 16px;
4006 }
4007
4008 .chatbar-button > .toolbarbutton-icon {
4009   opacity: .6;
4010   -moz-margin-end: 0;
4011 }
4012 .chatbar-button:hover > .toolbarbutton-icon,
4013 .chatbar-button[open="true"] > .toolbarbutton-icon {
4014   opacity: 1;
4015 }
4016
4017 .chatbar-button:hover,
4018 .chatbar-button[open="true"] {
4019 }
4020
4021 .chatbar-button > .toolbarbutton-text,
4022 .chatbar-button > .toolbarbutton-menu-dropmarker {
4023   display: none;
4024 }
4025
4026 .chatbar-button[activity]:not([open="true"]) {
4027   background-color: #E7ADE7;
4028 }
4029
4030 .chatbar-button > menupopup > menuitem[activity] {
4031   font-weight: bold;
4032 }
4033
4034 .chatbar-innerbox {
4035   background: transparent;
4036   margin: -285px 0 0;
4037   overflow: hidden;
4038 }
4039
4040 chatbar {
4041   -moz-margin-end: 20px;
4042 }
4043
4044 chatbar > chatbox {
4045   height: 285px;
4046   width: 260px;
4047   -moz-margin-start: 4px;
4048   background-color: #000000;
4049   border: 1px solid #9C9CFF;
4050   border-bottom: none;
4051   border-top-left-radius: 2.5px;
4052   border-top-right-radius: 2.5px;
4053 }
4054
4055 chatbox[minimized="true"] {
4056   width: 160px;
4057   height: 20px;
4058 }
4059
4060 window > chatbox {
4061   -moz-margin-start: 0px;
4062   margin: 0px;
4063   border: none;
4064   padding: 0px;
4065 }
4066
4067 /* === END chat.inc.css === */
4068
4069 .chat-titlebar {
4070 /*  background-color: #c4cfde; */
4071 }
4072
4073 .chat-titlebar[selected] {
4074 /*  background-color: #dae3f0; */
4075 }
4076
4077 .chatbar-button {
4078   -moz-appearance: none;
4079 /*  background-color: #c4cfde; */
4080 }
4081
4082 .chatbar-button > .toolbarbutton-icon {
4083 /*  -moz-margin-end: 0; */
4084 }
4085
4086 .chatbar-button:hover,
4087 .chatbar-button[open="true"] {
4088 /*  background-color: #dae3f0; */
4089 }
4090
4091 .chatbar-button[activity]:not([open="true"]) {
4092 }
4093
4094 chatbox {
4095 /*  border-top-left-radius: 2.5px;
4096   border-top-right-radius: 2.5px; */
4097 }
4098
4099 /* === BEGIN plugin-doorhanger.inc.css === */
4100
4101 /**
4102  * Plugin Doorhanger Styles
4103  */
4104
4105 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4106   padding: 6px 1px 2px;
4107 }
4108
4109 .click-to-play-plugins-notification-center-box {
4110 }
4111
4112 .plugin-popupnotification-centeritem:nth-child(odd) {
4113 /*  background-color: rgba(0,0,0,0.1);*/
4114 }
4115
4116 .center-item-label {
4117   margin-bottom: 0;
4118   text-overflow: ellipsis;
4119 }
4120
4121 .center-item-warning-icon {
4122   background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4123   background-repeat: no-repeat;
4124   width: 16px;
4125   height: 15px;
4126   -moz-margin-start: 6px;
4127 }
4128
4129 .click-to-play-plugins-notification-button-container {
4130 }
4131
4132 .click-to-play-popup-button {
4133   width: 50%;
4134 }
4135
4136 .click-to-play-plugins-notification-description-box {
4137   margin-left: 5px;
4138   margin-right: 5px;
4139   margin-top: 0;
4140   padding-bottom: 3px;
4141 }
4142
4143 .click-to-play-plugins-outer-description {
4144   margin-top: 1px;
4145 }
4146
4147 .click-to-play-plugins-notification-link,
4148 .center-item-link {
4149   margin: 0;
4150 }
4151
4152 .messageImage[value="plugin-hidden"] {
4153   list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4154 }
4155
4156 /* Keep any changes to this style in sync with pluginProblem.css */
4157 notification.pluginVulnerable {
4158 }
4159
4160 notification.pluginVulnerable .messageImage {
4161   list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4162 }
4163
4164 /* === END plugin-doorhanger.inc.css === */
4165
4166 /* === BEGIN customizeMode.inc.css === */
4167
4168 /* Customization mode */
4169
4170 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4171   margin-bottom: 1em;
4172 }
4173
4174 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4175 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4176 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4177   margin-left: 1em;
4178   margin-right: 1em;
4179 }
4180
4181 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4182   pointer-events: none;
4183 }
4184
4185 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4186 #PanelUI-contents > .panel-customization-placeholder {
4187   -moz-outline-radius: 2.5px;
4188   outline: 1px dashed transparent;
4189 }
4190
4191 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4192   /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4193   -moz-box-ordinal-group: 0;
4194   content: "";
4195   display: -moz-box;
4196   height: 100%;
4197   left: 0;
4198   outline-offset: -2px;
4199   pointer-events: none;
4200   position: absolute;
4201   top: 0;
4202   width: 100%;
4203 }
4204
4205 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4206    #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4207    offset from the bottom effectively the same as other targets (-2px). */
4208 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4209 /*  top: -2px;*/
4210 }
4211
4212 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4213 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4214 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4215 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4216   position: relative;
4217 }
4218
4219 /* Most target outlines are shown on hover and drag over but the panel menu uses
4220    placeholders instead. */
4221 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4222 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4223 /* nav-bar and panel outlines are always shown */
4224 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4225   outline-color: #A09090;
4226 }
4227
4228 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4229   transition: outline-color 250ms linear;
4230 }
4231
4232 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4233   transition: outline-color 250ms linear;
4234   outline-color: #9C9CFF;
4235 }
4236
4237 #PanelUI-contents > .panel-customization-placeholder {
4238   cursor: auto;
4239   outline-offset: -5px;
4240 }
4241
4242 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4243   min-width: 100px;
4244 /*  padding-left: 10px;
4245   padding-right: 10px;*/
4246 }
4247
4248 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4249   padding: 0 2em 2em;
4250 }
4251
4252 #customization-container {
4253   background-color: #000000;
4254 }
4255
4256 #customization-palette,
4257 #customization-empty {
4258   padding: 0 15px 15px;
4259 }
4260
4261 #customization-header {
4262   font-size: 1.5em;
4263   line-height: 1.5em;
4264   color: #9C9CFF;
4265   font-weight: lighter;
4266   margin-bottom: 1em;
4267   padding: 15px 15px 0;
4268 }
4269
4270 #customization-panel-container {
4271   padding: 10px 10px 0px;
4272 }
4273
4274 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4275 #customization-footer {
4276   /*background-color: rgb(236,236,236);*/
4277 }
4278
4279 #customization-footer {
4280   border-top: 1px solid #9C9CFF;
4281   padding: 15px;
4282 }
4283
4284 .customizationmode-button {
4285   margin: 0;
4286 }
4287
4288 .customizationmode-button:hover {
4289 }
4290
4291 .customizationmode-button[disabled="true"] {
4292 }
4293
4294 #customization-titlebar-visibility-button {
4295   list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4296   -moz-image-region: rect(0, 16px, 16px, 0);
4297   padding: 0px 5px;
4298   -moz-margin-end: 10px;
4299 }
4300
4301 #customization-titlebar-visibility-button:hover {
4302   -moz-image-region: rect(16px, 16px, 32px, 0);
4303 }
4304
4305 #customization-titlebar-visibility-button > .button-box {
4306   padding-top: 0;
4307   padding-bottom: 1px;
4308 }
4309
4310 #customization-titlebar-visibility-button:hover:active > .button-box {
4311   padding-top: 1px;
4312   padding-bottom: 0;
4313 }
4314
4315 #customization-titlebar-visibility-button > .button-box > .button-text {
4316   /* Sadly, button.css thinks its margins are perfect for everyone. */
4317   -moz-margin-start: 5px !important;
4318 }
4319
4320 #customization-titlebar-visibility-button[checked] {
4321   -moz-image-region: rect(0, 32px, 16px, 16px);
4322   background-color: #008484;
4323 }
4324
4325 #customization-titlebar-visibility-button[checked]:hover {
4326   -moz-image-region: rect(16px, 32px, 32px, 16px);
4327   background-color: #FFCF00;
4328 }
4329
4330 #customization-titlebar-visibility-button[checked]:hover:active {
4331   background-color: #FF9F00;
4332 }
4333
4334 #customization-undo-reset-button {
4335   -moz-margin-end: 10px;
4336 }
4337
4338 #main-window[customize-entered] #customization-panel-container {
4339   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4340   background-position: left top;
4341   background-repeat: repeat;
4342   background-size: auto;
4343   background-attachment: fixed;
4344 }
4345
4346 toolbarpaletteitem[place="toolbar"] {
4347   transition: border-width 250ms ease-in-out;
4348 }
4349
4350 toolbarpaletteitem[mousedown] {
4351   outline: 1px solid #008484;
4352   cursor: -moz-grabbing;
4353   opacity: 0.8;
4354 }
4355
4356 .panel-customization-placeholder,
4357 toolbarpaletteitem[place="palette"],
4358 toolbarpaletteitem[place="panel"] {
4359   transition: transform .3s ease-in-out;
4360 }
4361
4362 #customization-palette {
4363   transition: opacity .3s ease-in-out;
4364   opacity: 0;
4365 }
4366
4367 #customization-palette[showing="true"] {
4368   opacity: 1;
4369 }
4370
4371 toolbarpaletteitem[notransition].panel-customization-placeholder,
4372 toolbarpaletteitem[notransition][place="toolbar"],
4373 toolbarpaletteitem[notransition][place="palette"],
4374 toolbarpaletteitem[notransition][place="panel"] {
4375   transition: none;
4376 }
4377
4378 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4379 toolbarpaletteitem > toolbaritem.panel-wide-item,
4380 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4381   transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4382 }
4383
4384 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4385   transform: scale(1.3);
4386 }
4387
4388 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4389 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4390   transform: scale(1.1);
4391 }
4392
4393 /* Override the toolkit styling for items being dragged over. */
4394 toolbarpaletteitem[place="toolbar"] {
4395   border-left-width: 0;
4396   border-right-width: 0;
4397   margin-right: 0;
4398   margin-left: 0;
4399 }
4400
4401 #customization-palette:not([hidden]) {
4402   margin-bottom: 25px;
4403 }
4404
4405 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4406 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4407 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4408 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4409   margin-top: 20px;
4410 }
4411
4412 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4413 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4414   margin-left: 0;
4415   margin-right: 0;
4416   max-width: 24px;
4417   min-width: 24px;
4418   max-height: 24px;
4419   min-height: 24px;
4420   padding: 4px;
4421 }
4422
4423 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4424 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4425   width: 16px;
4426 }
4427
4428 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4429   opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4430 }
4431
4432 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4433 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4434   display: none;
4435 }
4436
4437 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4438   -moz-box-pack: center;
4439   min-height: 48px;
4440 }
4441
4442 #customization-palette > toolbarpaletteitem > label {
4443   text-align: center;
4444   margin-left: 0;
4445   margin-right: 0;
4446 }
4447
4448 /* === END customizeMode.inc.css === */
4449
4450 /* === BEGIN customizeTip.inc.css === */
4451
4452 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4453   padding: 0;
4454   margin: 0;
4455   min-width: 400px;
4456   max-width: 1000px;
4457   min-height: 200px;
4458   border-radius: 3px;
4459 /*  background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4460   border: 1px solid #9C9CFF;
4461 }
4462
4463 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4464 /*  background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4465 }
4466
4467 .customization-tipPanel-infoBox {
4468   margin: 20px 25px 25px;
4469   width: 25px;
4470   background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4471   background-repeat: no-repeat;
4472 }
4473
4474 .customization-tipPanel-content {
4475   margin: 25px 0;
4476   font-size: 12px;
4477   line-height: 18px;
4478 }
4479
4480 .customization-tipPanel-em {
4481   margin: 0;
4482   font-weight: bold;
4483 }
4484
4485 .customization-tipPanel-contentImage {
4486   margin-top: 25px;
4487   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4488   min-width: 300px;
4489   max-width: 300px;
4490   min-height: 190px;
4491   max-height: 190px;
4492   display: -moz-box;
4493 }
4494
4495 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4496   list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4497 }
4498
4499 .customization-tipPanel-link {
4500   -moz-appearance: none;
4501   background: transparent;
4502   border: none;
4503   box-shadow: none;
4504   color: #3333FF;
4505   margin: 0;
4506   cursor: pointer;
4507 }
4508
4509 .customization-tipPanel-link > .button-box > .button-text {
4510   margin: 0 !important;
4511 }
4512
4513 .customization-tipPanel-closeBox > .close-icon {
4514   -moz-appearance: none;
4515   border: 0;
4516   -moz-margin-end: -25px;
4517 }
4518
4519 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4520 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4521   list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4522 }
4523
4524 /* === END customizeTip.inc.css === */
4525
4526 /**
4527  * This next rule is a hack to disable subpixel anti-aliasing on all
4528  * labels during the customize mode transition. Subpixel anti-aliasing
4529  * on Windows with Direct2D layers acceleration is particularly slow to
4530  * paint, so this hack is how we sidestep that performance bottleneck.
4531  */
4532 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4533   transform: perspective(0.01px);
4534 }
4535
4536 #main-window[customize-entered] {
4537   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4538   background-attachment: fixed;
4539 }
4540
4541 #main-window[customize-entered] #browser-bottombox,
4542 #main-window[customize-entered] #customization-container {
4543   border-left: 1px solid #9C9CFF;
4544   border-right: 1px solid #9C9CFF;
4545   background-clip: padding-box;
4546 }
4547
4548 #main-window[customize-entered] #browser-bottombox {
4549   border-bottom: 1px solid #9C9CFF;
4550 }
4551
4552 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4553   margin-right: -2px;
4554 }
4555
4556 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4557   margin-left: -2px;
4558 }
4559
4560 /* End customization mode */
4561
4562 /* Private browsing indicators */
4563
4564 /**
4565  * Currently, we have two places where we put private browsing indicators on
4566  * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4567  * When tabsintitlebar is disabled, we draw the indicator at the end of the
4568  * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4569  * want the bottom border of the image to line up with the bottom of the window
4570  * caption buttons. That's why there's so much special-casing going on in here.
4571  */
4572 .private-browsing-indicator {
4573   display: none;
4574   pointer-events: none;
4575 }
4576
4577 #private-browsing-indicator-titlebar {
4578   display: block;
4579   position: absolute;
4580 }
4581
4582 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4583   display: block;
4584 }
4585
4586 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
4587   display: -moz-box;
4588 }
4589
4590 #TabsToolbar > .private-browsing-indicator {
4591   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
4592   -moz-margin-start: 4px;
4593   width: 48px;
4594 }
4595
4596 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
4597  * mode, since the tabstrip "mimics" the titlebar in that case with its own
4598  * min/max/close window buttons.
4599  */
4600 #private-browsing-indicator-titlebar > .private-browsing-indicator,
4601 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
4602   background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
4603   -moz-margin-end: 4px;
4604   width: 40px;
4605   height: 20px;
4606   position: relative;
4607 }
4608
4609 /* This one is for Linux */
4610 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
4611   background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
4612   width: 48px;
4613 }
4614
4615 /* End private browsing indicators */
4616
4617 /* === BEGIN UITour.inc.css === */
4618
4619 /* UI Tour */
4620
4621 #UITourHighlightContainer {
4622   -moz-appearance: none;
4623   border: none;
4624   background-color: transparent;
4625   /* This is a buffer to compensate for the movement in the "wobble" effect */
4626   padding: 4px;
4627 }
4628
4629 #UITourHighlight {
4630   background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4631   border-radius: 40px;
4632   border: 1px solid #9C9CFF;
4633   /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4634      on Linux without an X compositor where opacity is either 0 or 1. */
4635   box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4636   min-height: 32px;
4637   min-width: 32px;
4638 }
4639
4640 #UITourTooltipBody {
4641   -moz-margin-end: 14px;
4642 }
4643
4644 #UITourTooltipBody > vbox {
4645   padding-top: 4px;
4646 }
4647
4648 #UITourTooltipIconContainer {
4649   -moz-margin-start: -16px;
4650 }
4651
4652 #UITourTooltipIcon {
4653   width: 48px;
4654   height: 48px;
4655   -moz-margin-start: 28px;
4656   -moz-margin-end: 28px;
4657 }
4658
4659 #UITourTooltipTitle,
4660 #UITourTooltipDescription {
4661   max-width: 20rem;
4662 }
4663
4664 #UITourTooltipTitle {
4665   font-size: 1.45rem;
4666   font-weight: bold;
4667   -moz-margin-start: 0;
4668   -moz-margin-end: 0;
4669   margin: 0 0 9px 0;
4670 }
4671
4672 #UITourTooltipDescription {
4673   -moz-margin-start: 0;
4674   -moz-margin-end: 0;
4675   font-size: 1.15rem;
4676   line-height: 1.8rem;
4677   margin-bottom: 0; /* Override global.css */
4678 }
4679
4680 #UITourTooltipClose {
4681   -moz-appearance: none;
4682   border: none;
4683   background-color: transparent;
4684   min-width: 0;
4685   -moz-margin-start: 4px;
4686   margin-top: -2px;
4687 }
4688
4689 #UITourTooltipClose > .toolbarbutton-text {
4690   display: none;
4691 }
4692
4693 #UITourTooltipButtons {
4694   -moz-box-pack: end;
4695   background-color: rgba(0,0,0,.2);
4696   border-top: 1px solid rgba(0,0,0,.4);
4697   margin: 24px -16px -16px;
4698   padding: 2em 15px;
4699 }
4700
4701 #UITourTooltipButtons > button {
4702   margin: 0 15px;
4703 }
4704
4705 #UITourTooltipButtons > button:first-child {
4706   -moz-margin-start: 0;
4707 }
4708
4709 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
4710   width: 16px;
4711   height: 16px;
4712   -moz-margin-end: 5px;
4713 }
4714
4715 #UITourTooltipButtons > button .button-text {
4716   font-size: 1.15rem;
4717 }
4718
4719 #UITourTooltipButtons > button:not(.button-link) {
4720   -moz-appearance: none;
4721   background-color: #C09070;
4722   border-radius: 3000px;
4723   border: none;
4724   color: #000000;
4725   padding: 4px 30px;
4726   transition-property: background-color, color;
4727   transition-duration: 150ms;
4728 }
4729
4730 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
4731   background-color: #FFCF00;
4732   color: #000000;
4733 }
4734
4735 #UITourTooltipButtons > button.button-link {
4736   -moz-appearance: none;
4737   background: transparent;
4738   border: none;
4739   box-shadow: none;
4740   color: rgba(0,0,0,0.35);
4741   padding-left: 10px;
4742   padding-right: 10px;
4743 }
4744
4745 #UITourTooltipButtons > button.button-link:hover {
4746   color: black;
4747 }
4748
4749 /* The primary button gets the same color as the customize button. */
4750 #UITourTooltipButtons > button.button-primary {
4751   background-color: #A06060; /* LCARS default button background color */
4752   color: #000000;
4753   padding-left: 30px;
4754   padding-right: 30px;
4755 }
4756
4757 #UITourTooltipButtons > button.button-primary:not(:active):hover {
4758   background-color: #FFCF00;
4759   color: #000000;
4760 }
4761
4762 /* === END UITour.inc.css === */
4763
4764 #UITourTooltipButtons {
4765   margin: 24px -4px -4px;
4766 }
4767
4768 /* === BEGIN contextmenu.inc.css === */
4769
4770 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
4771 }
4772
4773 #context-navigation > .menuitem-iconic {
4774   -moz-box-flex: 1;
4775   -moz-box-pack: center;
4776   -moz-box-align: center;
4777 }
4778
4779 #context-navigation > .menuitem-iconic[disabled="true"] {
4780   background-color: transparent;
4781 }
4782
4783 #context-navigation > .menuitem-iconic > .menu-iconic-left {
4784   -moz-appearance: none;
4785 }
4786
4787 #context-navigation > #context-back > .menu-iconic-left {
4788   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4789   -moz-image-region: rect(0, 54px, 18px, 36px);
4790 }
4791
4792 #context-navigation > #context-back:not([disabled="true"]):hover > .menu-iconic-left {
4793   -moz-image-region: rect(18px, 54px, 36px, 36px);
4794 }
4795
4796 #context-navigation > #context-back[disabled="true"] > .menu-iconic-left {
4797   -moz-image-region: rect(36px, 54px, 54px, 36px);
4798 }
4799
4800 #context-navigation > #context-forward > .menu-iconic-left {
4801   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4802   -moz-image-region: rect(0, 72px, 18px, 54px);
4803 }
4804
4805 #context-navigation > #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
4806   -moz-image-region: rect(18px, 72px, 36px, 54px);
4807 }
4808
4809 #context-navigation > #context-forward[disabled="true"] > .menu-iconic-left {
4810   -moz-image-region: rect(36px, 72px, 54px, 54px);
4811 }
4812
4813 #context-navigation > #context-reload > .menu-iconic-left {
4814   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
4815   -moz-image-region: rect(0, 14px, 14px, 0);
4816 }
4817
4818 #context-navigation > #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
4819   -moz-image-region: rect(14px, 14px, 28px, 0);
4820 }
4821
4822 #context-navigation > #context-reload[disabled="true"] > .menu-iconic-left {
4823   -moz-image-region: rect(28px, 14px, 42px, 0);
4824 }
4825
4826 #context-navigation > #context-stop > .menu-iconic-left {
4827   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
4828   -moz-image-region: rect(0, 28px, 14px, 14px);
4829 }
4830
4831 #context-navigation > #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
4832   -moz-image-region: rect(14px, 28px, 28px, 14px);
4833 }
4834
4835 #context-navigation > #context-stop[disabled="true"] > .menu-iconic-left {
4836   -moz-image-region: rect(28px, 28px, 42px, 14px);
4837 }
4838
4839 #context-navigation > #context-bookmarkpage > .menu-iconic-left {
4840   list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4841   -moz-image-region: rect(0, 144px, 18px, 126px);
4842 }
4843
4844 #context-navigation > #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
4845   -moz-image-region: rect(18px, 144px, 36px, 126px);
4846 }
4847
4848 #context-navigation > #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
4849   -moz-image-region: rect(36px, 144px, 54px, 126px);
4850 }
4851
4852 #context-back:-moz-locale-dir(rtl),
4853 #context-forward:-moz-locale-dir(rtl),
4854 #context-reload:-moz-locale-dir(rtl) {
4855   transform: scaleX(-1);
4856 }
4857
4858 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4859   width: 18px;
4860   height: 18px;
4861   margin: 7px;
4862 }
4863
4864 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
4865 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
4866   width: 14px;
4867   height: 14px;
4868   margin: 9px;
4869 }
4870
4871 /* === END contextmenu.inc.css === */