LCARStrek/browser/browser.css

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