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