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