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