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