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