LCARStrek/browser/browser.css

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