LCARStrek/browser/browser.css

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