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