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