19b6ac8c5298e38c9daaf812fec7d8f4e963c351
[WebKit-https.git] / Source / WebCore / inspector / front-end / inspector.css
1 /*
2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
4  *
5  * Redistribution and use in source and binary forms, with or without
6  * modification, are permitted provided that the following conditions
7  * are met:
8  *
9  * 1.  Redistributions of source code must retain the above copyright
10  *     notice, this list of conditions and the following disclaimer.
11  * 2.  Redistributions in binary form must reproduce the above copyright
12  *     notice, this list of conditions and the following disclaimer in the
13  *     documentation and/or other materials provided with the distribution.
14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
15  *     its contributors may be used to endorse or promote products derived
16  *     from this software without specific prior written permission.
17  *
18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
28  */
29
30 input[type="search"]:focus, input[type="text"]:focus {
31     outline: auto 5px -webkit-focus-ring-color;
32 }
33
34 .fill {
35     position: absolute;
36     top: 0;
37     left: 0;
38     right: 0;
39     bottom: 0;
40 }
41
42 .hidden {
43     display: none;
44 }
45
46 .nowrap {
47     white-space: nowrap !important;
48 }
49
50 #toolbar {
51     position: absolute;
52     top: 0;
53     left: 0;
54     right: 0;
55     height: 26px;
56     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
57     padding-top: 1px;
58     padding-left: 5px;
59     border-bottom: 1px solid rgb(80, 80, 80);
60     -webkit-flex-direction: row;
61     -webkit-background-origin: padding;
62     -webkit-background-clip: padding;
63 }
64
65 body.show-toolbar-icons #toolbar {
66     height: 56px;
67 }
68
69 body.show-toolbar-icons.dock-to-bottom #toolbar {
70     height: 34px;
71 }
72
73 body.inactive #toolbar {
74     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(207, 207, 207)));
75     border-bottom: 1px solid rgb(64%, 64%, 64%);
76 }
77
78 body.undocked.platform-mac-leopard #toolbar,
79 body.undocked.platform-mac-snowleopard #toolbar {
80     background: transparent;
81 }
82
83 body.dock-to-bottom #toolbar {
84     padding-top: 0;
85     border-top: 1px solid rgb(100, 100, 100);
86     cursor: ns-resize;
87 }
88
89 body.dock-to-bottom.port-qt #toolbar {
90     cursor: auto;
91 }
92
93 body.dock-to-bottom.inactive #toolbar {
94     border-top: 1px solid rgb(64%, 64%, 64%);
95 }
96
97 .toolbar-item {
98     margin: 0;
99     padding-right: 6px;
100     background-color: transparent;
101     border-style: none;
102     border-color: transparent;
103 }
104
105 body:not(.show-toolbar-icons) .toolbar-item {
106     height: 24px;
107 }
108
109 body.dock-to-bottom:not(.show-toolbar-icons) .toolbar-item.toggleable {
110     padding: 0 11px;
111 }
112
113 body.dock-to-bottom:not(.show-toolbar-icons) .toolbar-item.toggleable.toggled-on {
114     padding: 0 9px;
115 }
116
117 body.show-toolbar-icons .toolbar-item.toggleable {
118     padding-top: 4px;
119     padding-bottom: 4px;
120 }
121
122 body.show-toolbar-icons.dock-to-bottom .toolbar-item.toggleable {
123     margin: 1px 0;
124     padding-bottom: 2px;
125 }
126
127 .toolbar-item.toggleable.toggled-on {
128     border-width: 0 2px 0 2px;
129     padding-left: 4px;
130     padding-right: 4px;
131     -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
132 }
133
134 .toolbar-icon {
135     display: none;
136     width: 32px;
137     height: 32px;
138     background-image: url(Images/toolbarIcons.png);
139     vertical-align: top;
140 }
141
142 body.dock-to-bottom .toolbar-icon {
143     width: 24px;
144     height: 24px;
145     vertical-align: middle;
146     background-image: url(Images/toolbarIconsSmall.png);
147 }
148
149 body.show-toolbar-icons .toolbar-icon {
150     display: inline-block;
151 }
152
153 body.dock-to-bottom .toolbar-icon.custom-toolbar-icon {
154     background-position-x: -32px;
155 }
156
157 .toolbar-item:active .toolbar-icon {
158     background-position-y: 32px;
159 }
160
161 body.dock-to-bottom .toolbar-item:active .toolbar-icon {
162     background-position-y: 24px;
163 }
164
165 .toolbar-label {
166     line-height: 22px;
167     font-size: 11px;
168     font-family: Lucida Grande, sans-serif;
169     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
170 }
171
172 body.show-toolbar-icons .toolbar-label {
173     line-height: 15px;
174 }
175 .toolbar-item.toggleable:active .toolbar-label {
176     text-shadow: none;
177 }
178
179 body.show-toolbar-icons.dock-to-bottom .toolbar-label {
180     display: inline-block;
181     margin-left: 3px;
182     top: 0;
183 }
184
185 body.dock-to-bottom #search-toolbar-label {
186     display: none;
187 }
188
189 #toolbar-controls {
190     float: right;
191     display: -webkit-flex;
192     -webkit-align-items: center;
193     height: 100%;
194 }
195
196 #toolbar-dropdown-arrow {
197     font-size: 14px;
198     font-weight: bold;
199     border: 0;
200     background-color: transparent;
201     -webkit-border-radius: 5px;
202     text-shadow: none;
203     cursor: default;
204     margin: 0;
205     /* A line height of 0 allows precise text positioning using padding. */
206     line-height: 0;
207     padding: 11px 6px 11px;
208 }
209
210 #toolbar-dropdown-arrow.dropdown-visible {
211     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 251, 0.9)), to(rgba(231, 231, 231, 0.9)));
212 }
213
214 #toolbar-dropdown-arrow:hover {
215     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(191, 191, 191, 0.7)), to(rgba(171, 171, 171, 0.5)));
216 }
217
218 #toolbar-dropdown-arrow:active {
219     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(111, 111, 111, 0.8)), to(rgba(91, 91, 91, 0.8)));
220 }
221
222 #toolbar-dropdown {
223     position: absolute;
224     z-index: 1000;
225     -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
226     border: 1px solid rgb(128, 128, 128);
227     background-color: inherit;
228     background-image: inherit;
229 }
230
231 body.show-toolbar-icons #toolbar-dropdown {
232     padding: 4px;
233 }
234
235 body.undocked.platform-mac-leopard #toolbar-dropdown,
236 body.undocked.platform-mac-snowleopard #toolbar-dropdown {
237     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
238 }
239
240 #toolbar-dropdown .scrollable-content {
241     display: -webkit-flex;
242     -webkit-flex-direction: column;
243     -webkit-align-items: flex-start;
244     padding-right: 0;
245 }
246
247 #toolbar-dropdown .toolbar-item {
248     display: -webkit-flex;
249     -webkit-flex-direction: row;
250     width: 100%;
251     border: 1px solid rgba(0, 0, 0, 0);
252 }
253
254 body.show-toolbar-icons #toolbar-dropdown .toolbar-item {
255     position: relative;
256     left: -2px;
257     margin: 0px 2px;
258     padding: 4px;
259 }
260
261 #toolbar-dropdown .toolbar-item.toggleable.toggled-on {
262     border: 1px solid rgba(100, 100, 120, 0.4);
263     -webkit-border-image: none;
264     background: -webkit-gradient(linear, left top, left bottom, from(rgba(128, 128, 128, 0.6)), to(rgba(128, 128, 128, 0.6)), color-stop(20%, rgba(158, 158, 158, 0.2)), color-stop(80%, rgba(158, 158, 158, 0.2)));
265 }
266
267 #toolbar-dropdown .toolbar-item.toggleable:hover {
268     background: -webkit-gradient(linear, left top, left bottom, from(rgba(128, 128, 128, 0.6)), to(rgba(128, 128, 128, 0.3)), color-stop(20%, rgba(158, 158, 158, 0.2)), color-stop(80%, rgba(158, 158, 158, 0.1)));
269 }
270
271 #toolbar-dropdown .toolbar-icon {
272     margin-right: 0.5em;
273 }
274
275 #toolbar-dropdown .toolbar-label {
276     line-height: 22px;
277     top: 0;
278 }
279
280 body.show-toolbar-icons #toolbar-dropdown .toolbar-label {
281     line-height: 32px;
282 }
283
284 #toolbar-panels-menu {
285     font-size: 17px;
286     font-weight: bold;
287     border: 0;
288     background-color: transparent;
289     -webkit-border-radius: 5px;
290     text-shadow: none;
291     cursor: default;
292     margin: 0;
293     /* A line height of 0 allows precise text positioning using padding. */
294     line-height: 0;
295     padding: 13px 6px 11px;
296 }
297
298 #toolbar-panels-menu:hover {
299     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(191, 191, 191, 0.7)), to(rgba(171, 171, 171, 0.5)));
300 }
301
302 #toolbar-panels-menu:active {
303     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(111, 111, 111, 0.8)), to(rgba(91, 91, 91, 0.8)));
304 }
305
306 .scrollable-content {
307     position: static;
308     height: 100%;
309     overflow-y: auto;
310     width: 100%;
311     margin-right: 12px;
312     padding-right: 3px;
313 }
314
315 .scrollable-content::-webkit-scrollbar {
316     width: 11px;
317 }
318
319 .scrollable-content::-webkit-scrollbar-corner,
320 .scrollable-content::-webkit-resizer {
321     display: none;
322 }
323
324 .scrollable-content::-webkit-scrollbar-thumb:vertical {
325     background: -webkit-gradient(linear, left top, right top, from(rgb(192, 192, 192)), to(rgb(192, 192, 192)), color-stop(40%, rgb(214, 214, 214)));
326     border-radius: 5px;
327     min-height: 20px;
328 }
329
330 .scrollable-content::-webkit-scrollbar-thumb:vertical:hover,
331 .scrollable-content::-webkit-scrollbar-thumb:vertical:active {
332     background: -webkit-gradient(linear, left top, right top, from(rgb(230, 230, 230)), to(rgb(230, 230, 230)), color-stop(40%, rgb(252, 252, 252)));
333 }
334
335 .scrollable-content::-webkit-scrollbar-track:vertical {
336     background: -webkit-gradient(linear, left top, right top, from(rgb(128, 128, 128)), to(rgb(164, 164, 164)), color-stop(25%, rgb(164, 164, 164)));
337     border-radius: 5px;
338 }
339
340 .search-replace {
341     -webkit-appearance: none;
342     border: 0;
343     padding: 0 2px;
344     margin: 0;
345     width: 165px;
346 }
347
348 .filter {
349     -webkit-appearance: none;
350     border: 0;
351     padding: 0 2px;
352     margin: 0;
353     width: 251px;
354 }
355
356 .search-replace:focus {
357     outline: none;
358 }
359
360 .toolbar-search {
361     border-spacing: 1px;
362 }
363
364 .toolbar-search td {
365     padding: 0 5px 0 0;
366 }
367
368 .toolbar-search-navigation-controls {
369     position: absolute;
370     top: 0;
371     right: 0;
372     height: 18px;
373     background-image: -webkit-linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206));
374 }
375
376 .toolbar-search-navigation {
377     display: inline-block;
378     width: 18px;
379     height: 18px;
380     background-repeat: no-repeat;
381     background-position: 4px 7px;
382     border-left: 1px solid rgb(170, 170, 170);
383     opacity: 0.3;
384 }
385
386 .toolbar-search-navigation.enabled {
387     opacity: 1.0;
388 }
389
390 .toolbar-search input[type="checkbox"] {
391     position: relative;
392     margin-top: -1px;
393     margin-left: 15px;
394     top: 2px;
395 }
396
397 .toolbar-search button {
398     border: 1px solid rgb(163, 163, 163);
399     border-radius: 8px;
400     margin: 0 0px;
401     font-size: 11px;
402     background-image: -webkit-linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220));
403     width: 100%;
404 }
405
406 .toolbar-search button:active {
407     background-image: -webkit-linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156));
408 }
409
410 .toolbar-search-control {
411     display: inline-block;
412     position: relative;
413     background-color: white;
414     border: 1px solid rgb(163, 163, 163);
415     height: 20px;
416     border-radius: 2px;
417     padding-top: 1px;
418 }
419
420 .toolbar-replace-control {
421     border: 1px solid rgb(163, 163, 163);
422     height: 20px;
423     border-radius: 2px;
424     width: 100%;
425 }
426
427 .toolbar-search-navigation.enabled:active {
428     background-position: 4px 7px, 0px 0px;
429 }
430
431 .toolbar-search-navigation.toolbar-search-navigation-prev {
432     background-image: url(Images/searchPrev.png);
433     border-left: 1px solid rgb(163, 163, 163);
434 }
435
436 .toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
437     background-image: url(Images/searchPrev.png), -webkit-linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
438 }
439
440 .toolbar-search-navigation.toolbar-search-navigation-next {
441     background-image: url(Images/searchNext.png);
442     border-left: 1px solid rgb(230, 230, 230);
443 }
444
445 .toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
446     background-image: url(Images/searchNext.png), -webkit-linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
447 }
448
449 .search-results-matches {
450     display: inline-block;
451     min-width: 50px;
452     min-height: 10px;
453     margin-right: 36px;
454     text-align: right;
455     font-size: 11px;
456     padding: 0 4px;
457     color: rgb(165, 165, 165);
458 }
459
460 .toolbar-item.elements .toolbar-icon {
461     background-position-x: 0;
462 }
463
464 .toolbar-item.resources .toolbar-icon {
465     background-position-x: -32px;
466 }
467
468 body.dock-to-bottom .toolbar-item.resources .toolbar-icon {
469     background-position-x: -24px;
470 }
471
472 .toolbar-item.network .toolbar-icon {
473     background-position-x: -64px;
474 }
475
476 body.dock-to-bottom .toolbar-item.network .toolbar-icon {
477     background-position-x: -48px;
478 }
479
480 .toolbar-item.scripts .toolbar-icon {
481     background-position-x: -96px;
482 }
483
484 body.dock-to-bottom .toolbar-item.scripts .toolbar-icon {
485     background-position-x: -72px;
486 }
487
488 .toolbar-item.timeline .toolbar-icon {
489     background-position-x: -128px;
490 }
491
492 body.dock-to-bottom .toolbar-item.timeline .toolbar-icon {
493     background-position-x: -96px;
494 }
495
496 .toolbar-item.profiles .toolbar-icon {
497     background-position-x: -160px;
498 }
499
500 .toolbar-item.cpu-profiler .toolbar-icon {
501     background-position-x: -160px;
502 }
503
504 .toolbar-item.css-profiler .toolbar-icon {
505     background-position-x: -160px;
506 }
507
508 .toolbar-item.heap-profiler .toolbar-icon {
509     background-position-x: -160px;
510 }
511
512 .toolbar-item.canvas-profiler .toolbar-icon {
513     background-position-x: -160px;
514 }
515
516 .toolbar-item.memory-chart-profiler .toolbar-icon {
517     background-position-x: -160px;
518 }
519
520 .toolbar-item.memory-snapshot-profiler .toolbar-icon {
521     background-position-x: -160px;
522 }
523
524 body.dock-to-bottom .toolbar-item.profiles .toolbar-icon {
525     background-position-x: -120px;
526 }
527
528 .toolbar-item.audits .toolbar-icon {
529     background-position-x: -192px;
530 }
531
532 body.dock-to-bottom .toolbar-item.audits .toolbar-icon {
533     background-position-x: -144px;
534 }
535
536 .toolbar-item.console .toolbar-icon {
537     background-position-x: -224px;
538 }
539
540 body.dock-to-bottom .toolbar-item.console .toolbar-icon {
541     background-position-x: -168px;
542 }
543
544 #close-button-left, #close-button-right {
545     width: 14px;
546     height: 14px;
547     background-image: url(Images/closeButtons.png);
548     background-position: 0 0;
549 }
550
551 #close-button-left:hover, #close-button-right:hover {
552     background-position: 14px 0;
553 }
554
555 #close-button-left:active, #close-button-right:active {
556     background-position: 28px 0;
557 }
558
559 .close-left {
560     float: left;
561 }
562
563 body.undocked .toolbar-item.close-left, body.undocked .toolbar-item.close-right {
564     display: none;
565 }
566
567 body.dock-to-bottom.port-qt .toolbar-item.close-left, body.dock-to-bottom.port-qt .toolbar-item.close-right {
568     display: none;
569 }
570
571 body.platform-mac .toolbar-item.close-right {
572     display: none;
573 }
574
575 body.remote .toolbar-item.close-left, body.remote .toolbar-item.close-right {
576     display: none;
577 }
578
579 body:not(.platform-mac) .toolbar-item.close-left {
580     display: none;
581 }
582
583 .toolbar-item.close-left, .toolbar-item.close-right {
584   display: -webkit-flex;
585   -webkit-align-items: center;
586   height: 100%;
587   cursor: default;
588 }
589
590 #main {
591     position: absolute;
592     z-index: 1;
593     top: 26px;
594     left: 0;
595     right: 0;
596     bottom: 0;
597     overflow: hidden;
598     background-color: white;
599 }
600
601 .animate-slow * {
602     -webkit-transition-duration: 2.5s !important;
603 }
604
605 .animate #main {
606     -webkit-transition: bottom 100ms linear;
607 }
608
609 body.show-toolbar-icons #main {
610     top: 56px;
611 }
612
613 body.show-toolbar-icons.dock-to-bottom #main {
614     top: 34px;
615 }
616
617 #main-panels {
618     position: absolute;
619     top: 0;
620     left: 0;
621     right: 0;
622     bottom: 23px;
623     overflow: hidden;
624 }
625
626 body.drawer-visible #main-panels {
627     bottom: 24px;
628 }
629
630 #main-status-bar {
631     position: absolute;
632     bottom: 0;
633     left: 0;
634     right: 0;
635 }
636
637 .status-bar {
638     white-space: nowrap;
639     height: 23px;
640     overflow: hidden;
641     z-index: 12;
642     background-image: -webkit-linear-gradient(rgb(253,253,253), rgb(230,230,230) 75%, rgb(230,230,230));
643     border-top: 1px solid rgb(202, 202, 202);
644     display: -webkit-flex;
645 }
646
647 .status-bar > div {
648     display: inline-block;
649     vertical-align: top;
650     overflow: visible;
651 }
652
653 .status-bar-item {
654     display: inline-block;
655     pointer-events: auto;
656     cursor: default;
657     height: 22px;
658     padding: 0;
659     margin-left: -1px;
660     margin-right: 0;
661     vertical-align: top;
662     border: 0 transparent none;
663     background-color: transparent;
664 }
665
666 #floating-status-bar-container {
667     position: absolute;
668     left: 0;
669     right: 0;
670     bottom: 0;
671     display: none;
672     border-bottom: 1px solid rgb(202, 202, 202);
673     cursor: ns-resize;
674     height: 24px;
675 }
676
677 .animate #floating-status-bar-container {
678     -webkit-transition: padding 100ms linear;
679 }
680
681 body.drawer-visible #floating-status-bar-container {
682     display: -webkit-flex;
683 }
684
685 #floating-status-bar-resizer {
686     content: url(Images/statusbarResizerVertical.png);
687     margin-top: 7px;
688     pointer-events: none;
689     height: 8px;
690 }
691
692 #panel-status-bar {
693     -webkit-flex: 1 0;
694     display: -webkit-flex;
695     pointer-events: none;
696 }
697
698 #drawer-view-anchor {
699     display: inline-block;
700 }
701
702 .status-bar-item:active {
703     position: relative;
704     z-index: 200;
705 }
706
707 .glyph {
708     position: absolute;
709     top: -1px;
710     bottom: 1px;
711     left: 0;
712     right: 0;
713     background-color: rgba(0, 0, 0, 0.75);
714     z-index: 1;
715 }
716
717 .glyph.shadow {
718     top: 0;
719     bottom: 0;
720     background-color: white !important;
721     z-index: 0;
722 }
723
724 .long-click-glyph {
725     background-color: rgba(0, 0, 0, 0.75);
726     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
727     -webkit-mask-position: -288px -48px;
728     -webkit-mask-size: 320px 72px;
729     z-index: 1;
730 }
731
732 @media (-webkit-min-device-pixel-ratio: 1.5) {
733 .long-click-glyph {
734     -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
735 }
736 }
737
738 .long-click-glyph.shadow {
739     top: 1px;
740     background-color: white !important;
741     z-index: 0;
742 }
743
744 button.status-bar-item {
745     position: relative;
746     width: 32px;
747     border-left: 1px solid rgb(202, 202, 202);
748     border-right: 1px solid rgb(202, 202, 202);
749 }
750
751 .status-bar button.status-bar-item .glyph {
752     margin: 0 -1px;
753 }
754
755 .status-bar button.status-bar-item img {
756     margin-top: 1px;
757 }
758
759 .status-bar select.status-bar-item:active,
760 .status-bar button.status-bar-item:active {
761     background-color: rgb(163,163,163);
762     border-left: 1px solid rgb(120, 120, 120);
763     border-right: 1px solid rgb(120, 120, 120);
764 }
765
766 button.status-bar-item .glyph.shadow {
767     background-color: rgba(255, 255, 255, 0.33) !important;
768 }
769
770 button.status-bar-item.toggled-on .glyph {
771     background-color: rgb(66, 129, 235);
772 }
773
774 button.status-bar-item:disabled {
775     opacity: 0.5;
776     background-position: 0 0 !important;
777 }
778
779 button.status-bar-item.extension {
780     background-image: none;
781     background-color: auto;
782 }
783
784 .status-bar-select-container {
785     display: inline-block;
786     background-image: url(Images/disclosureTriangleSmallDown.png);
787     background-repeat: no-repeat;
788     background-position-x: right;
789     background-position-y: 5px;
790     padding-right: 10px;
791     border-right: 5px solid transparent;
792 }
793
794 select.status-bar-item {
795     min-width: 48px;
796     font-weight: bold;
797     color: rgb(48, 48, 48);
798     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
799     -webkit-appearance: none;
800     border: 0;
801     border-radius: 0;
802     padding: 0 15px 0 5px;
803     margin-right: -15px;
804     position: relative;
805     top: -1px;
806 }
807
808 select.status-bar-item, select.status-bar-item:hover {
809     border-left: 1px solid rgb(202, 202, 202);
810     border-right: 1px solid rgb(202, 202, 202);
811 }
812
813 .status-bar-item > .glyph {
814     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
815     -webkit-mask-size: 320px 72px;
816 }
817
818 @media (-webkit-min-device-pixel-ratio: 1.5) {
819 .status-bar-item > .glyph {
820     -webkit-mask-image: url(Images/statusbarButtonGlyphs2x.png);
821 }
822 }
823
824 button.dock-status-bar-item.status-bar-item.toggled-undock .glyph {
825     -webkit-mask-position: 0 -48px;
826 }
827
828 button.dock-status-bar-item.status-bar-item.toggled-bottom .glyph {
829     -webkit-mask-position: -32px -24px;
830     background-color: rgba(0, 0, 0, 0.75);
831 }
832
833 button.dock-status-bar-item.status-bar-item.toggled-right .glyph {
834     -webkit-mask-position: -256px -48px;
835     background-color: rgba(0, 0, 0, 0.75);
836 }
837
838 body.undocked .alternate-status-bar-buttons-bar {
839     margin-left: 1px;
840 }
841
842 .alternate-status-bar-buttons-bar {
843     position: absolute;
844     width: 31px;
845     bottom: -3px;
846     background: white;
847 }
848
849 .alternate-status-bar-buttons-bar .status-bar-item {
850     height: 24px;
851     margin-top: -1px;
852     border: 1px solid rgb(202, 202, 202);
853     border-bottom: 1px solid transparent;
854 }
855
856 .alternate-status-bar-buttons-bar .status-bar-item.emulate-active {
857     background-color: rgb(163,163,163);
858     border: 1px solid rgb(120, 120, 120);
859     border-bottom: 1px solid transparent;
860 }
861
862 button.status-bar-item.settings-status-bar-item,
863 button.status-bar-item.settings-status-bar-item:active {
864     border-right: 0 transparent none;
865 }
866
867 .settings-status-bar-item .glyph {
868     -webkit-mask-position: -160px -24px;
869 }
870
871 body.remote .dock-status-bar-item,
872 body.port-qt .dock-status-bar-item {
873     display: none;
874 }
875
876 .console-status-bar-item .glyph {
877     -webkit-mask-position: -64px -24px;
878 }
879
880 .clear-status-bar-item .glyph {
881     -webkit-mask-position: -64px 0;
882 }
883
884 #error-warning-count {
885     padding: 5px 2px 6px 0px;
886     font-size: 10px;
887     height: 19px;
888     cursor: pointer;
889 }
890
891 #error-warning-count:hover {
892     border-bottom: 1px solid rgb(96, 96, 96);
893 }
894
895 #error-count-img {
896     content: url(Images/errorIcon.png);
897     width: 10px;
898     height: 10px;
899     vertical-align: -1px;
900     margin-right: 2px;
901 }
902
903 #error-count + #warning-count-img {
904     margin-left: 6px;
905 }
906
907 #warning-count-img {
908     content: url(Images/warningIcon.png);
909     width: 10px;
910     height: 10px;
911     vertical-align: -1px;
912     margin-right: 2px;
913 }
914
915 #drawer {
916     display: none;
917     position: absolute;
918     bottom: 0;
919     left: 0;
920     right: 0;
921     height: 200px;
922     background-color: white;
923 }
924
925 .animate #drawer {
926     -webkit-transition: height 100ms linear;
927 }
928
929 #drawer-contents {
930     position: absolute;
931     top: 0;
932     bottom: 24px;
933     left: 0;
934     right: 0;
935 }
936
937 body.drawer-visible #drawer {
938     display: block;
939 }
940
941 body.platform-mac .monospace, body.platform-mac .source-code {
942     font-size: 11px !important;
943     font-family: Menlo, monospace;
944 }
945
946 body.platform-mac.platform-mac-tiger .monospace,
947 body.platform-mac.platform-mac-tiger .source-code {
948     font-size: 10px !important;
949     font-family: Monaco, monospace;
950 }
951
952 body.platform-windows .monospace, body.platform-windows .source-code {
953     font-size: 12px !important;
954     font-family: Consolas, Lucida Console, monospace;
955 }
956
957 body.platform-linux .monospace, body.platform-linux .source-code {
958     font-size: 11px !important;
959     font-family: dejavu sans mono, monospace;
960 }
961
962 #console-view {
963     position: absolute;
964     top: 0;
965     bottom: 0;
966     left: 0;
967     right: 0;
968     overflow-y: auto;
969 }
970
971 #console-messages {
972     position: absolute;
973     z-index: 0;
974     top: 0;
975     left: 0;
976     right: 0;
977     bottom: 0;
978     padding: 2px 0;
979     overflow-y: overlay;
980     word-wrap: break-word;
981     -webkit-user-select: text;
982 }
983
984 #console-prompt {
985     clear: right;
986     position: relative;
987     border-top: 1px solid rgb(240, 240, 240);
988     padding: 1px 22px 1px 0px;
989     margin-left: 24px;
990     min-height: 16px;
991     white-space: pre-wrap;
992     -webkit-user-modify: read-write-plaintext-only;
993 }
994
995 #console-prompt::before {
996     background-image: url(Images/userInputIcon.png);
997 }
998
999 .console-user-command-result.console-log-level::before {
1000     background-image: url(Images/userInputResultIcon.png);
1001 }
1002
1003 .console-message, .console-user-command {
1004     clear: right;
1005     position: relative;
1006     border-top: 1px solid rgb(240, 240, 240);
1007     padding: 1px 22px 1px 0px;
1008     margin-left: 24px;
1009     min-height: 16px;
1010 }
1011
1012 .console-mesage:first-child {
1013     border-top: none;
1014 }
1015
1016 .console-adjacent-user-command-result {
1017     border-bottom: none;
1018 }
1019
1020 .console-adjacent-user-command-result + .console-user-command-result.console-log-level::before {
1021     background-image: none;
1022 }
1023
1024 .console-message::before, .console-user-command::before, #console-prompt::before, .console-group-title::before {
1025     position: absolute;
1026     display: block;
1027     content: "";
1028     left: -17px;
1029     top: 0.8em;
1030     width: 10px;
1031     height: 10px;
1032     margin-top: -6px;
1033     -webkit-user-select: none;
1034 }
1035
1036 .console-message .bubble {
1037     display: inline-block;
1038     height: 14px;
1039     background-color: rgb(128, 151, 189);
1040     vertical-align: middle;
1041     white-space: nowrap;
1042     padding: 1px 4px;
1043     margin-top: -1px;
1044     margin-right: 4px;
1045     margin-left: -18px;
1046     text-align: left;
1047     font-size: 11px;
1048     line-height: normal;
1049     font-family: Helvetica, Arial, sans-serif;
1050     font-weight: bold;
1051     text-shadow: none;
1052     color: white;
1053     -webkit-border-radius: 7px;
1054 }
1055
1056 .console-message-text {
1057     white-space: pre-wrap;
1058 }
1059
1060 .repeated-message.console-error-level::before, .repeated-message.console-warning-level:before, .repeated-message.console-debug-level:before {
1061     visibility: hidden;
1062 }
1063
1064 .repeated-message .outline-disclosure, .repeated-message > .console-message-text {
1065     -webkit-flex: 1;
1066 }
1067
1068 .console-info {
1069     color: rgb(128, 128, 128);
1070     font-style: italic;
1071 }
1072
1073 .console-group .console-group > .console-group-messages {
1074     margin-left: 16px;
1075 }
1076
1077 .console-group-title {
1078     font-weight: bold;
1079 }
1080
1081 .console-group-title::before {
1082     background-image: url(Images/disclosureTriangleSmallDown.png);
1083     top: 0.6em;
1084     width: 11px;
1085     height: 12px;
1086     left: -16px;
1087     position: absolute;
1088 }
1089
1090 .console-group.collapsed .console-group-title::before {
1091     background-image: url(Images/disclosureTriangleSmallRight.png);
1092 }
1093
1094 .console-group.collapsed > .console-group-messages {
1095     display: none;
1096 }
1097
1098 .console-group {
1099     position: relative;
1100 }
1101
1102 .console-group-bracket {
1103     position:absolute;
1104     top: 15px;
1105     left: 13px;
1106     bottom: 5px;
1107     width: 3px;
1108     border-style: solid;
1109     border-color: #A3A3A3;
1110     border-width: 0px 0px 1px 1px;
1111 }
1112
1113 .console-group.collapsed > .console-group-bracket {
1114     display: none;
1115 }
1116
1117 .console-error-level .console-message-text, .console-error-level .section .header .title {
1118     color: red !important;
1119 }
1120
1121 .console-debug-level .console-message-text {
1122     color: blue;
1123 }
1124
1125 .console-debug-level::before {
1126     background-image: url(Images/searchSmallBrightBlue.png);
1127 }
1128
1129 .console-error-level::before {
1130     background-image: url(Images/errorIcon.png);
1131 }
1132
1133 .console-warning-level::before {
1134     background-image: url(Images/warningIcon.png);
1135     margin-top: -7px;
1136 }
1137
1138 .console-user-command .console-message {
1139     margin-left: -24px;
1140     padding-right: 0;
1141     border-bottom: none;
1142 }
1143
1144 .console-user-command::before {
1145     background-image: url(Images/userInputPreviousIcon.png);
1146 }
1147
1148 .console-user-command > .console-message-text {
1149     color: rgb(0, 128, 255);
1150 }
1151
1152 #console-messages a {
1153     color: rgb(33%, 33%, 33%);
1154     cursor: pointer;
1155 }
1156
1157 #console-messages a:hover {
1158     color: rgb(15%, 15%, 15%);
1159 }
1160
1161 ol.watch-expressions > li.hovered {
1162     background-color: #F0F0F0;
1163 }
1164
1165 .console-message-url {
1166     float: right;
1167     text-align: right;
1168     max-width: 100%;
1169     margin-left: 4px;
1170 }
1171
1172 .console-group-messages .section {
1173     margin: 0 0 0 12px !important;
1174 }
1175
1176 .console-group-messages .section .header {
1177     padding: 0 8px 0 0;
1178     background-image: none;
1179     border: none;
1180     min-height: 0;
1181 }
1182
1183 .console-group-messages .section .header::before {
1184     position: absolute;
1185     top: 1px;
1186     left: 1px;
1187     width: 8px;
1188     height: 8px;
1189     content: url(Images/treeRightTriangleBlack.png);
1190 }
1191
1192 .console-group-messages .section.expanded .header::before {
1193     content: url(Images/treeDownTriangleBlack.png);
1194 }
1195
1196 .console-group-messages .section .header .title {
1197     color: black;
1198     font-weight: normal;
1199     line-height: 13px;
1200 }
1201
1202 .console-group-messages .section .properties li .info {
1203     padding-top: 0;
1204     padding-bottom: 0;
1205     color: rgb(60%, 60%, 60%);
1206 }
1207
1208 .console-group-messages .outline-disclosure {
1209     padding-left: 0;
1210 }
1211
1212 .console-group-messages .outline-disclosure > ol {
1213     padding: 0 0 0 12px !important;
1214 }
1215
1216 .console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol {
1217     font-size: inherit;
1218     line-height: 12px;
1219 }
1220
1221 .console-group-messages .outline-disclosure.single-node li {
1222     padding-left: 2px;
1223 }
1224
1225 .console-group-messages .outline-disclosure li .selection {
1226     margin-left: -6px;
1227     margin-right: -6px;
1228 }
1229
1230 .console-group-messages .add-attribute {
1231     display: none;
1232 }
1233
1234 .console-formatted-object, .console-formatted-node, .console-formatted-array {
1235     position: relative;
1236     display: inline-block;
1237     vertical-align: top;
1238     color: black;
1239 }
1240
1241 .console-formatted-node:hover {
1242     background-color: rgba(56, 121, 217, 0.1);
1243 }
1244
1245 .console-formatted-object .section, .console-formatted-node .section, .console-formatted-array .section {
1246     position: static;
1247 }
1248
1249 .console-formatted-object .properties, .console-formatted-node .properties {
1250     padding-left: 0 !important;
1251 }
1252
1253 .console-formatted-number {
1254     color: rgb(28, 0, 207);
1255 }
1256
1257 .console-formatted-string, .console-formatted-regexp {
1258     color: rgb(196, 26, 22);
1259     white-space: pre;
1260 }
1261
1262 .console-formatted-null, .console-formatted-undefined {
1263     color: rgb(128, 128, 128);
1264 }
1265
1266 .console-formatted-preview-node,
1267 .section .console-formatted-node {
1268     color: rgb(136, 18, 128);
1269 }
1270
1271 .console-object-preview {
1272     font-style: italic;
1273 }
1274
1275 .object-info-state-note {
1276     display: none;
1277     width: 11px;
1278     height: 11px;
1279     background-color: rgb(179, 203, 247);
1280     color: white;
1281     text-align: center;
1282     border-radius: 3px;
1283     line-height: 13px;
1284     margin: 0 6px;
1285     font-size: 9px;
1286 }
1287
1288 .object-info-state-note::before {
1289     content: "i";
1290 }
1291
1292 .section.expanded .object-info-state-note {
1293     display: inline-block;
1294 }
1295
1296 .error-message {
1297     color: red;
1298 }
1299
1300 .error-input {
1301     background-color: rgb(220, 130, 130);
1302 }
1303
1304 .auto-complete-text, .editing .auto-complete-text {
1305     color: rgb(128, 128, 128) !important;
1306     -webkit-user-select: none;
1307     -webkit-user-modify: read-only;
1308 }
1309
1310 .panel {
1311     display: none;
1312     overflow: hidden;
1313     position: absolute;
1314     top: 0;
1315     left: 0;
1316     right: 0;
1317     bottom: 0;
1318 }
1319
1320 .panel.visible {
1321     display: block;
1322 }
1323
1324 iframe.extension {
1325     width: 100%;
1326     height: 100%;
1327 }
1328
1329 iframe.panel.extension {
1330     display: block;
1331     height: 100%;
1332 }
1333
1334 .webkit-line-gutter-backdrop {
1335     /* Keep this in sync with view-source.css (.webkit-line-gutter-backdrop) */
1336     width: 31px;
1337     background-color: rgb(240, 240, 240);
1338     border-right: 1px solid rgb(187, 187, 187);
1339     position: absolute;
1340     z-index: -1;
1341     left: 0;
1342     top: 0;
1343     height: 100%
1344 }
1345
1346 .outline-disclosure li.hovered:not(.selected) .selection {
1347     display: block;
1348     left: 3px;
1349     right: 3px;
1350     background-color: rgba(56, 121, 217, 0.1);
1351     -webkit-border-radius: 5px;
1352 }
1353
1354 .outline-disclosure li.highlighted .highlight {
1355     background-color: rgb(255, 230, 179);
1356     -webkit-border-radius: 4px;
1357     padding-bottom: 2px;
1358     margin-bottom: -2px;
1359 }
1360
1361 .outline-disclosure li.selected.highlighted .highlight {
1362     background-color: transparent;
1363     padding-bottom: 0;
1364     margin-bottom: 0;
1365 }
1366
1367 .outline-disclosure li .selection {
1368     display: none;
1369     position: absolute;
1370     left: 0;
1371     right: 0;
1372     height: 15px;
1373     z-index: -1;
1374 }
1375
1376 .outline-disclosure li.selected .selection {
1377     display: block;
1378     background-color: rgb(212, 212, 212);
1379 }
1380
1381 .outline-disclosure li.elements-drag-over .selection {
1382     display: block;
1383     margin-top: -2px;
1384     border-top: 2px solid rgb(56, 121, 217);
1385 }
1386
1387 .outline-disclosure ol:focus li.selected .selection {
1388     background-color: rgb(56, 121, 217);
1389 }
1390
1391 .outline-disclosure ol.search-match-not-found li.selected .selection {
1392     border: 1px solid rgb(56, 121, 217);
1393     background-color: white;
1394 }
1395
1396 .outline-disclosure {
1397     font-size: 11px;
1398 }
1399
1400 .outline-disclosure > ol {
1401     position: relative;
1402     padding: 2px 6px !important;
1403     margin: 0;
1404     color: black;
1405     cursor: default;
1406     min-width: 100%;
1407 }
1408
1409 .outline-disclosure, .outline-disclosure ol {
1410     list-style-type: none;
1411     -webkit-padding-start: 12px;
1412     margin: 0;
1413 }
1414
1415 .source-code {
1416     font-family: monospace;
1417     font-size: 10px !important;
1418     white-space: pre-wrap;
1419 }
1420
1421 .outline-disclosure li {
1422     padding: 0 0 0 14px;
1423     margin-top: 1px;
1424     margin-left: -2px;
1425     word-wrap: break-word;
1426 }
1427
1428 .outline-disclosure ol:focus li.selected {
1429     color: white;
1430 }
1431
1432 .outline-disclosure ol.search-match-found li.selected {
1433     color: white;
1434 }
1435
1436 .outline-disclosure ol:focus li.selected * {
1437     color: inherit;
1438 }
1439
1440 .outline-disclosure ol.search-match-found li.selected * {
1441     color: inherit;
1442 }
1443
1444 .outline-disclosure li.parent {
1445     margin-left: -12px
1446 }
1447
1448 .outline-disclosure li .webkit-html-tag.close {
1449     margin-left: -12px;
1450 }
1451
1452 .webkit-html-tag.shadow, .webkit-html-fragment.shadow {
1453     opacity: 0.6;
1454 }
1455
1456 .outline-disclosure li.parent::before {
1457     content: url(Images/treeRightTriangleBlack.png);
1458     float: left;
1459     width: 8px;
1460     height: 8px;
1461     padding-right: 2px;
1462 }
1463
1464 .outline-disclosure li.parent::before {
1465     content: url(Images/treeRightTriangleBlack.png);
1466 }
1467
1468 .outline-disclosure ol:focus li.parent.selected::before {
1469     content: url(Images/treeRightTriangleWhite.png);
1470 }
1471
1472 .outline-disclosure ol.search-match-found li.parent.selected::before {
1473     content: url(Images/treeRightTriangleWhite.png);
1474 }
1475
1476 .outline-disclosure li.parent.expanded::before {
1477     content: url(Images/treeDownTriangleBlack.png);
1478 }
1479
1480 .outline-disclosure ol:focus li.parent.expanded.selected::before {
1481     content: url(Images/treeDownTriangleWhite.png);
1482 }
1483
1484 .outline-disclosure ol.search-match-found li.parent.expanded.selected::before {
1485     content: url(Images/treeDownTriangleWhite.png);
1486 }
1487
1488 .outline-disclosure ol.children {
1489     display: none;
1490 }
1491
1492 .outline-disclosure ol.children.expanded {
1493     display: block;
1494 }
1495
1496 .placard {
1497     position: relative;
1498     margin-top: 1px;
1499     padding: 3px 8px 4px 18px;
1500     min-height: 18px;
1501     white-space: nowrap;
1502 }
1503
1504 .placard:nth-of-type(2n) {
1505     background-color: rgb(234, 243, 255);
1506 }
1507
1508 .placard.selected {
1509     border-top: 1px solid rgb(172, 172, 172);
1510     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(182, 182, 182)), to(rgb(162, 162, 162)));
1511     -webkit-background-origin: padding;
1512     -webkit-background-clip: padding;
1513 }
1514
1515 :focus .placard.selected {
1516     border-top: 1px solid rgb(70, 103, 215);
1517     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(56, 121, 217)));
1518 }
1519
1520 .placard .title {
1521     color: black;
1522     font-weight: normal;
1523     word-wrap: break-word;
1524     white-space: normal;
1525 }
1526
1527 .placard.selected .title {
1528     color: white;
1529     font-weight: bold;
1530 }
1531
1532 .placard .subtitle {
1533     float: right;
1534     font-size: 10px;
1535     margin-left: 5px;
1536     color: rgba(0, 0, 0, 0.7);
1537     text-overflow: ellipsis;
1538     overflow: hidden;
1539 }
1540
1541 .placard.selected .subtitle {
1542     color: rgba(255, 255, 255, 0.7);
1543 }
1544
1545 .placard .subtitle a {
1546     color: inherit;
1547 }
1548
1549 .section {
1550     position: relative;
1551     margin-top: 1px;
1552 }
1553
1554 .events-pane .section {
1555     margin: 0;
1556 }
1557 .events-pane .section:not(:nth-of-type(1)) {
1558     border-top: 1px solid rgb(231, 231, 231);
1559 }
1560
1561 .section .header {
1562     color: black;
1563     padding: 0 8px 0 18px;
1564     min-height: 18px;
1565     white-space: nowrap;
1566     -webkit-background-origin: padding;
1567     -webkit-background-clip: padding;
1568 }
1569
1570 .section .header::before {
1571     position: absolute;
1572     top: 2px;
1573     left: 7px;
1574     width: 8px;
1575     height: 8px;
1576     content: url(Images/treeRightTriangleBlack.png);
1577     opacity: 0.8;
1578 }
1579
1580 .section.expanded .header::before {
1581     content: url(Images/treeDownTriangleBlack.png);
1582 }
1583
1584 .section .header .title, .event-bar .header .title {
1585     font-weight: normal;
1586     word-wrap: break-word;
1587     white-space: normal;
1588     line-height: 18px;
1589 }
1590
1591 .section .header .title.blank-title {
1592     font-style: italic;
1593 }
1594
1595 .section .header label, .event-bar .header label {
1596     display: none;
1597 }
1598
1599 .section.expanded .header label, .event-bar.expanded .header label {
1600     display: inline;
1601 }
1602
1603 .section .header .subtitle, .event-bar .header .subtitle {
1604     float: right;
1605     margin-left: 5px;
1606     max-width: 55%;
1607     text-overflow: ellipsis;
1608     overflow: hidden;
1609 }
1610
1611 .section .header .subtitle a {
1612     color: inherit;
1613 }
1614
1615 .section .properties, .event-bar .event-properties {
1616     display: none;
1617 }
1618
1619 .section.expanded .properties, .event-bar.expanded .event-properties {
1620     display: block;
1621 }
1622
1623 .event-bar .event-properties {
1624     padding-left: 16px;
1625 }
1626
1627 .section.no-affect .properties li {
1628     opacity: 0.5;
1629 }
1630
1631 .section.no-affect .properties li.editing {
1632     opacity: 1.0;
1633 }
1634
1635 .properties-tree {
1636     margin: 0;
1637     padding: 0 6px 2px;
1638     list-style: none;
1639     min-height: 18px;
1640 }
1641
1642 .properties-tree li {
1643     margin-left: 12px;
1644     white-space: nowrap;
1645     text-overflow: ellipsis;
1646     overflow: hidden;
1647     -webkit-user-select: text;
1648     cursor: default;
1649 }
1650
1651 .properties-tree li.parent {
1652     margin-left: 1px;
1653 }
1654
1655 .properties-tree li.parent::before {
1656     content: url(Images/treeRightTriangleBlack.png);
1657     opacity: 0.75;
1658     float: left;
1659     width: 8px;
1660     height: 8px;
1661     margin-top: 0;
1662     padding-right: 3px;
1663     -webkit-user-select: none;
1664 }
1665
1666 .properties-tree li.parent.expanded::before {
1667     content: url(Images/treeDownTriangleBlack.png);
1668     margin-top: 1px;
1669 }
1670
1671 .properties-tree li .info {
1672     padding-top: 4px;
1673     padding-bottom: 3px;
1674 }
1675
1676 .properties-tree ol {
1677     display: none;
1678     margin: 0;
1679     -webkit-padding-start: 12px;
1680     list-style: none;
1681 }
1682
1683 .properties-tree ol.expanded {
1684     display: block;
1685 }
1686
1687 .editing {
1688     -webkit-user-select: text;
1689     -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
1690     outline: 1px solid rgb(66%, 66%, 66%) !important;
1691     background-color: white;
1692     -webkit-user-modify: read-write-plaintext-only;
1693     text-overflow: clip !important;
1694     padding-left: 2px;
1695     margin-left: -2px;
1696     padding-right: 2px;
1697     margin-right: -2px;
1698     margin-bottom: -1px;
1699     padding-bottom: 1px;
1700     opacity: 1.0 !important;
1701 }
1702
1703 .editing, .editing * {
1704     color: black !important;
1705     text-decoration: none !important;
1706 }
1707
1708 .child-editing {
1709     color: black !important;
1710     text-decoration: none !important;
1711     overflow: visible !important;
1712 }
1713
1714 .editing br {
1715     display: none;
1716 }
1717
1718 .section .properties li.editing {
1719     margin-left: 10px;
1720     text-overflow: clip;
1721 }
1722
1723 li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-button {
1724     display: none !important;
1725 }
1726
1727 .properties-tree.watch-expressions {
1728     padding-bottom: 8px;
1729     padding-left: 4px !important;
1730 }
1731
1732 .properties-tree.watch-expressions > li {
1733     padding-top: 2px;
1734     padding-left: 4px;
1735 }
1736
1737 .properties-tree.watch-expressions > li > .value {
1738     display: inline;
1739     position: static;
1740 }
1741
1742 .properties-tree.watch-expressions > li:not(.parent) {
1743     margin-left: 1px;
1744     padding-left: 15px;
1745 }
1746
1747 .properties-tree.watch-expressions > li.hovered {
1748     padding-right: 14px;
1749 }
1750
1751 .watch-expressions > li.editing-sub-part .text-prompt {
1752     display: block;
1753     width: 100%;
1754 }
1755
1756 .watch-expressions > li.editing-sub-part .value, .watch-expressions > li.editing-sub-part .separator  {
1757     display: none;
1758 }
1759
1760 .section .properties li.editing-sub-part {
1761     padding: 3px 6px 8px 18px;
1762     margin: -3px -6px -8px -6px;
1763     text-overflow: clip;
1764 }
1765
1766 .section .properties .delete-button {
1767     width: 10px;
1768     height: 10px;
1769     background-image: url(Images/deleteIcon.png);
1770     background-position: 0 0;
1771     background-color: transparent;
1772     background-repeat: no-repeat;
1773     border: 0 none transparent;
1774     position: absolute;
1775     right: 8px;
1776     display: none;
1777 }
1778
1779 .section .properties li.hovered .delete-button {
1780     display: inline;
1781 }
1782
1783 .section .properties .name, .event-properties .name, .console-formatted-object .name {
1784     color: rgb(136, 19, 145);
1785 }
1786
1787 .section .properties .dimmed {
1788     opacity: 0.6;
1789 }
1790
1791 .section .properties .value.error {
1792     color: red;
1793 }
1794
1795 .section .properties .number, .event-properties .number {
1796     color: blue;
1797 }
1798
1799 .section .properties .keyword, .event-properties .keyword {
1800     color: rgb(136, 19, 79);
1801 }
1802
1803 .section .properties .color, .event-properties .color {
1804     color: rgb(118, 15, 21);
1805 }
1806
1807 .swatch {
1808     margin-left: 1px;
1809     margin-right: 2px;
1810     margin-bottom: -1px;
1811     width: 1em;
1812     height: 1em;
1813     display: inline-block;
1814     background-image: url(Images/checker.png);
1815 }
1816
1817 .swatch-inner {
1818     width: 100%;
1819     height: 100%;
1820     display: inline-block;
1821     border: 1px solid rgba(128, 128, 128, 0.6);
1822 }
1823
1824 .swatch-inner:hover {
1825     border: 1px solid rgba(64, 64, 64, 0.8);
1826 }
1827
1828 .sidebar {
1829     overflow-x: hidden;
1830     background-color: rgb(214, 221, 229);
1831 }
1832
1833 body.inactive .sidebar {
1834     background-color: rgb(232, 232, 232);
1835 }
1836
1837 .pane-title-button {
1838     color: rgb(6, 6, 6);
1839     background-color: transparent;
1840     border: 1px solid rgb(165, 165, 165);
1841     background-color: rgb(237, 237, 237);
1842     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
1843     -webkit-border-radius: 12px;
1844     -webkit-appearance: none;
1845 }
1846
1847 .pane-title-button:active {
1848     background-color: rgb(215, 215, 215);
1849     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
1850 }
1851
1852 button.show-all-nodes {
1853     font-size: 13px;
1854     margin: 0;
1855     padding: 0 20px;
1856     height: 20px;
1857     color: rgb(6, 6, 6);
1858     background-color: transparent;
1859     border: 1px solid rgb(165, 165, 165);
1860     background-color: rgb(237, 237, 237);
1861     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
1862     -webkit-border-radius: 12px;
1863     -webkit-appearance: none;
1864 }
1865
1866 body.inactive button.show-all-nodes {
1867     color: rgb(130, 130, 130);
1868     border-color: rgb(212, 212, 212);
1869     background-color: rgb(239, 239, 239);
1870     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(235, 235, 235)));
1871 }
1872
1873 button.show-all-nodes:active {
1874     background-color: rgb(215, 215, 215);
1875     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
1876 }
1877
1878 button.enable-toggle-status-bar-item .glyph {
1879     -webkit-mask-position: -192px 0;
1880 }
1881
1882 button.enable-toggle-status-bar-item.toggled-on .glyph {
1883     -webkit-mask-position: -96px -24px;
1884 }
1885
1886 #console-messages.console-filter-top {
1887     margin-top: 23px;
1888 }
1889
1890 .scope-bar {
1891     line-height: 19px;
1892     padding-right: 10px;
1893     overflow: hidden;
1894 }
1895
1896 .scope-bar li {
1897     display: inline-block;
1898     margin: 0 2px;
1899     padding: 2px 6px;
1900     font-size: 11px;
1901     line-height: 12px;
1902     font-weight: bold;
1903     color: rgb(46, 46, 46);
1904     background: transparent;
1905     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
1906     -webkit-border-radius: 8px;
1907     vertical-align: middle;
1908 }
1909
1910 .scope-bar-divider {
1911     background-color: rgba(0, 0, 0, 0.4);
1912     height: 16px;
1913     width: 1px;
1914     vertical-align: middle;
1915     display: inline-block;
1916 }
1917
1918 .scope-bar li.selected, .scope-bar li:hover, .scope-bar li:active {
1919     color: white;
1920     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
1921 }
1922
1923 .scope-bar li.all {
1924     margin: 0 8px;
1925 }
1926
1927 .scope-bar li:hover {
1928     background: rgba(0, 0, 0, 0.2);
1929 }
1930
1931 .scope-bar li.selected {
1932     background: rgba(0, 0, 0, 0.3);
1933     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
1934 }
1935
1936 .scope-bar li:active {
1937     background: rgba(0, 0, 0, 0.5);
1938     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 -1px 1px rgba(255, 255, 255, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 0.5);
1939 }
1940
1941 .console-warning-level, .console-error-level, .console-log-level, .console-debug-level {
1942     display: none;
1943 }
1944
1945 .filter-all .console-warning-level, .filter-warnings .console-warning-level,
1946 .filter-all .console-error-level, .filter-errors .console-error-level,
1947 .filter-all .console-log-level, .filter-logs .console-log-level,
1948 .filter-all .console-debug-level, .filter-debug .console-debug-level {
1949     display: block;
1950 }
1951
1952 .filter-all .console-warning-level.repeated-message, .filter-warnings .console-warning-level.repeated-message,
1953 .filter-all .console-error-level.repeated-message, .filter-errors .console-error-level.repeated-message,
1954 .filter-all .console-log-level.repeated-message, .filter-logs .console-log-level.repeated-message,
1955 .filter-all .console-debug-level.repeated-message, .filter-debug .console-debug-level.repeated-message {
1956     display: -webkit-flex;
1957 }
1958
1959 .console-user-command-result {
1960     display: block;
1961 }
1962
1963 .source-view-frame {
1964     width: 100%;
1965     height: 100%;
1966 }
1967
1968 .sidebar-resizer-vertical {
1969     position: absolute;
1970     top: 0;
1971     bottom: 0;
1972     width: 5px;
1973     z-index: 500;
1974     cursor: ew-resize;
1975 }
1976
1977 .sidebar-tree, .sidebar-tree .children {
1978     position: relative;
1979     padding: 0;
1980     margin: 0;
1981     list-style: none;
1982     font-size: 11px;
1983 }
1984
1985 .sidebar-tree-section {
1986     position: relative;
1987     height: 18px;
1988     padding: 1px 10px 6px 10px;
1989     white-space: nowrap;
1990     margin-top: 1px;
1991     color: rgb(92, 110, 129);
1992     font-weight: bold;
1993     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
1994 }
1995
1996 .sidebar-tree-item {
1997     position: relative;
1998     height: 36px;
1999     padding: 0 5px 0 5px;
2000     white-space: nowrap;
2001     overflow-x: hidden;
2002     overflow-y: hidden;
2003     margin-top: 1px;
2004     line-height: 34px;
2005     border-top: 1px solid transparent;
2006 }
2007
2008 .sidebar-tree .children {
2009     display: none;
2010 }
2011
2012 .sidebar-tree .children.expanded {
2013     display: block;
2014 }
2015
2016 .sidebar-tree-section + .children > .sidebar-tree-item {
2017     padding-left: 10px !important;
2018 }
2019
2020 .sidebar-tree-section + .children.small > .sidebar-tree-item {
2021     padding-left: 17px !important;
2022 }
2023
2024 .sidebar-tree > .children > .sidebar-tree-item {
2025     padding-left: 37px;
2026 }
2027
2028 .sidebar-tree > .children > .children > .sidebar-tree-item {
2029     padding-left: 37px;
2030 }
2031
2032 .sidebar-tree.hide-disclosure-buttons > .children {
2033     display: none;
2034 }
2035
2036 .sidebar-tree > .children.hide-disclosure-buttons > .children {
2037     display: none;
2038 }
2039
2040 .sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
2041     margin-left: 16px;
2042 }
2043
2044 .sidebar-tree-item .disclosure-button {
2045     float: left;
2046     width: 16px;
2047     height: 100%;
2048     border: 0;
2049     background-color: transparent;
2050     background-image: url(Images/disclosureTriangleSmallRight.png);
2051     background-repeat: no-repeat;
2052     background-position: center;
2053     -webkit-apearance: none;
2054 }
2055
2056 .sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
2057     display: none;
2058 }
2059
2060 body.inactive .sidebar-tree-item .disclosure-button {
2061     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
2062 }
2063
2064 body.inactive .sidebar-tree-item.expanded .disclosure-button {
2065     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
2066 }
2067
2068 body.inactive .sidebar-tree-item .disclosure-button:active {
2069     background-image: url(Images/disclosureTriangleSmallRightDownBlack.png);
2070 }
2071
2072 .sidebar-tree-item.selected .disclosure-button {
2073     background-image: url(Images/disclosureTriangleSmallRightWhite.png) !important;
2074 }
2075
2076 .sidebar-tree-item.expanded .disclosure-button {
2077     background-image: url(Images/disclosureTriangleSmallDown.png);
2078 }
2079
2080 .sidebar-tree-item.selected.expanded .disclosure-button {
2081     background-image: url(Images/disclosureTriangleSmallDownWhite.png) !important;
2082 }
2083
2084 .sidebar-tree-item.selected .disclosure-button:active {
2085     background-image: url(Images/disclosureTriangleSmallRightDownWhite.png) !important;
2086 }
2087
2088 .sidebar-tree-item .disclosure-button:active {
2089     background-image: url(Images/disclosureTriangleSmallRightDown.png);
2090 }
2091
2092 .sidebar-tree-item .icon {
2093     float: left;
2094     width: 32px;
2095     height: 32px;
2096     margin-top: 1px;
2097     margin-right: 3px;
2098 }
2099
2100 li .status {
2101     float: right;
2102     height: 16px;
2103     margin-top: 9px;
2104     margin-left: 4px;
2105     line-height: 1em;
2106 }
2107
2108 li .status:empty {
2109     display: none;
2110 }
2111
2112 li .status .bubble {
2113     display: inline-block;
2114     height: 14px;
2115     min-width: 16px;
2116     margin-top: 1px;
2117     background-color: rgb(128, 151, 189);
2118     vertical-align: middle;
2119     white-space: nowrap;
2120     padding: 1px 4px;
2121     text-align: center;
2122     font-size: 11px;
2123     line-height: normal;
2124     font-family: Helvetica, Arial, sans-serif;
2125     font-weight: bold;
2126     text-shadow: none;
2127     color: white;
2128     -webkit-border-radius: 7px;
2129 }
2130
2131 li .status .bubble:empty {
2132     display: none;
2133 }
2134
2135 li.selected .status .bubble {
2136     background-color: white !important;
2137     color: rgb(132, 154, 190) !important;
2138 }
2139
2140 :focus li.selected .status .bubble {
2141     color: rgb(36, 98, 172) !important;
2142 }
2143
2144 body.inactive li.selected .status .bubble {
2145     color: rgb(159, 159, 159) !important;
2146 }
2147
2148 .sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small, .small .resources-graph-side {
2149     height: 20px;
2150 }
2151
2152 .sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
2153     width: 16px;
2154     height: 16px;
2155 }
2156
2157 .sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status {
2158     margin-top: 1px;
2159 }
2160
2161 .sidebar-tree-item.selected {
2162     color: white;
2163     border-top: 1px solid rgb(145, 160, 192);
2164     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
2165     text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
2166     font-weight: bold;
2167     -webkit-background-origin: padding;
2168     -webkit-background-clip: padding;
2169 }
2170
2171 :focus .sidebar-tree-item.selected {
2172     border-top: 1px solid rgb(68, 128, 200);
2173     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
2174 }
2175
2176 body.inactive .sidebar-tree-item.selected {
2177     border-top: 1px solid rgb(151, 151, 151);
2178     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
2179 }
2180
2181 .sidebar-tree-item .titles {
2182     position: relative;
2183     top: 5px;
2184     line-height: 11px;
2185     padding-bottom: 1px;
2186     text-overflow: ellipsis;
2187     overflow: hidden;
2188     white-space: nowrap;
2189 }
2190
2191 .sidebar-tree-item .titles.no-subtitle {
2192     top: 10px;
2193 }
2194
2195 .sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
2196     top: 2px;
2197     line-height: normal;
2198 }
2199
2200 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
2201     content: "\A";
2202     white-space: pre;
2203 }
2204
2205 .sidebar-tree-item .subtitle {
2206     font-size: 9px;
2207     color: rgba(0, 0, 0, 0.7);
2208 }
2209
2210 .sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
2211     display: none;
2212 }
2213
2214 .sidebar-tree-item.selected .subtitle {
2215     color: rgba(255, 255, 255, 0.9);
2216 }
2217
2218 .bubble.debug, .console-debug-level .bubble {
2219     background-color: rgb(0, 0, 255) !important;
2220 }
2221
2222 .bubble.warning, .console-warning-level .bubble {
2223     background-color: rgb(232, 164, 0) !important;
2224 }
2225
2226 .bubble.error, .console-error-level .bubble {
2227     background-color: rgb(216, 35, 35) !important;
2228 }
2229
2230 .bubble.search-matches {
2231     background-image: url(Images/searchSmallWhite.png);
2232     background-repeat: no-repeat;
2233     background-position: 3px 2px;
2234     padding-left: 13px !important;
2235 }
2236
2237 li.selected .bubble.search-matches {
2238     background-image: url(Images/searchSmallBlue.png);
2239 }
2240
2241 :focus li.selected .bubble.search-matches {
2242     background-image: url(Images/searchSmallBrightBlue.png);
2243 }
2244
2245 body.inactive li.selected .bubble.search-matches {
2246     background-image: url(Images/searchSmallGray.png);
2247 }
2248
2249 .storage-application-cache-status-icon, .storage-application-cache-connectivity-icon {
2250     margin-bottom: -3px;
2251     margin-left: 5px;
2252     vertical-align: middle;
2253 }
2254
2255 .status-bar-divider {
2256     margin-left: 7px;
2257     border-right: 1px solid #CCC;
2258 }
2259
2260 .storage-application-cache-status, .storage-application-cache-connectivity {
2261     position: relative;
2262     top: 4px;
2263 }
2264
2265 .status-bar-items {
2266     position: absolute;
2267     top: 0;
2268     bottom: 0;
2269     left: 200px;
2270     overflow: hidden;
2271     border-left: 1px solid rgb(184, 184, 184);
2272     margin-left: -1px;
2273 }
2274
2275 .node-search-status-bar-item .glyph {
2276     -webkit-mask-position: -224px -24px;
2277 }
2278
2279 .delete-storage-status-bar-item .glyph {
2280     -webkit-mask-position: -128px 0;
2281 }
2282
2283 .clear-storage-status-bar-item .glyph {
2284     -webkit-mask-position: -64px 0;
2285 }
2286
2287 .refresh-storage-status-bar-item .glyph {
2288     -webkit-mask-position: 0 0;
2289 }
2290
2291 .webkit-html-js-node, .webkit-html-css-node {
2292     white-space: pre;
2293 }
2294
2295 .source-frame-breakpoint-condition {
2296     z-index: 30;
2297     padding: 4px;
2298     background-color: rgb(203, 226, 255);
2299     -webkit-border-radius: 7px;
2300     border: 2px solid rgb(169, 172, 203);
2301     width: 90%;
2302     pointer-events: auto;
2303 }
2304
2305 .source-frame-breakpoint-message {
2306     background-color: transparent;
2307     font-family: Lucida Grande, sans-serif;
2308     font-weight: normal;
2309     font-size: 11px;
2310     text-align: left;
2311     text-shadow: none;
2312     color: rgb(85, 85, 85);
2313     cursor: default;
2314     margin: 0 0 2px 0;
2315 }
2316
2317 #source-frame-breakpoint-condition {
2318     margin: 0;
2319     border: 1px inset rgb(190, 190, 190) !important;
2320     width: 100%;
2321     box-shadow: none !important;
2322     outline: none !important;
2323     -webkit-user-modify: read-write;
2324 }
2325
2326 .source-frame-popover-title {
2327     text-overflow: ellipsis;
2328     overflow: hidden;
2329     white-space: nowrap;
2330     font-weight: bold;
2331     padding-left: 18px;
2332 }
2333
2334 .source-frame-popover-tree {
2335     border-top: 1px solid rgb(194, 194, 147);
2336     overflow: auto;
2337     position: absolute;
2338     top: 15px;
2339     bottom: 0;
2340     left: 0;
2341     right: 0;
2342 }
2343
2344 .source-frame-eval-expression {
2345     border: 1px solid rgb(163, 41, 34);
2346     margin: -1px;
2347     background-color: rgb(255, 255, 194);
2348 }
2349
2350 .workers-list {
2351     list-style: none;
2352     margin: 0;
2353     padding: 0;
2354 }
2355
2356 .resource-content-unavailable {
2357     color: rgb(50%, 50%, 50%);
2358     font-style: italic;
2359     font-size: 14px;
2360     text-align: center;
2361     padding: 32px;
2362 }
2363
2364 .node-link {
2365     text-decoration: underline;
2366     cursor: pointer;
2367 }
2368
2369 .cursor-pointer {
2370     cursor: pointer;
2371 }
2372
2373 .cursor-auto {
2374     cursor: auto;
2375 }
2376
2377 .please-wait-msg {
2378     position: absolute;
2379     left: 0;
2380     top: 0;
2381     border: 4px black solid;
2382     border-radius: 4px;
2383     background-color: black;
2384     opacity: 0.85;
2385     color: white;
2386     font-size: 12px;
2387     font-weight: bold;
2388     z-index: 10000;
2389 }
2390
2391 .resource-view.json {
2392     padding: 5px;
2393 }
2394
2395 .resource-view.html iframe {
2396     width: 100%;
2397     height: 100%;
2398     position: absolute;
2399 }
2400
2401 .soft-context-menu-glass-pane {
2402     position: absolute;
2403     top: 0;
2404     bottom: 0;
2405     left: 0;
2406     right: 0;
2407     z-index: 20000;
2408 }
2409
2410 .soft-context-menu {
2411     position: absolute;
2412     font-family: 'Lucida Grande', 'Helvetica', 'sans-serif';
2413     border: 1px solid rgba(196, 196, 196, 0.9);
2414     border-top: 1px solid rgba(196, 196, 196, 0.5);
2415     border-bottom: 1px solid rgba(150, 150, 150, 0.9);
2416     padding: 4px 0 4px 0;
2417     border-radius: 4px;
2418     background-color: white;
2419     -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
2420 }
2421
2422 .soft-context-menu-item {
2423     width: 100%;
2424     line-height: 13px;
2425     font-size: 14px;
2426     border-top: 1px solid transparent;
2427     border-bottom: 1px solid transparent;
2428     padding: 2px 7px 2px 6px;
2429     margin: 0 13px 0 0;
2430     white-space: nowrap;
2431 }
2432
2433 .soft-context-menu-separator {
2434     height: 10px;
2435     margin: 0 1px;
2436 }
2437
2438 .soft-context-menu-separator > .separator-line {
2439     margin: 0;
2440     height: 5px;
2441     border-bottom: 1px solid rgb(227, 227, 227);
2442     pointer-events: none;
2443 }
2444
2445 .soft-context-menu-item-mouse-over {
2446     border-top: 1px solid rgb(56, 121, 217);
2447     border-bottom: 1px solid rgb(56, 121, 217);
2448     background-color: rgb(56, 121, 217);
2449     color: white;
2450 }
2451
2452 body.platform-mac .soft-context-menu-item-mouse-over {
2453     border-top: 1px solid rgb(90, 131, 236);
2454     border-bottom: 1px solid rgb(18, 88, 233);
2455     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(100, 140, 243)), to(rgb(36, 101, 243)));
2456 }
2457
2458 .soft-context-menu-item-checkmark {
2459     color: rgb(108, 108, 108);
2460     pointer-events: none;
2461 }
2462
2463 .soft-context-menu-item-submenu-arrow {
2464     color: black;
2465     float: right;
2466     pointer-events: none;
2467 }
2468
2469 .soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
2470     color: white;
2471 }
2472
2473 .search-view {
2474     position: absolute;
2475     top: 0;
2476     bottom: 0;
2477     left: 0;
2478     right: 0;
2479 }
2480
2481 .search-drawer-header input[type="search"].search-config-search {
2482     font-size: 11px;
2483     margin-left: 4px;
2484     color: #303030;
2485     position: relative;
2486 }
2487
2488 body.platform-mac .search-drawer-header input[type="search"].search-config-search {
2489     top: 1px;
2490 }
2491
2492 .search-drawer-header label.search-config-label {
2493     margin-left: 8px;
2494     color: #303030;
2495 }
2496
2497 .search-drawer-header input[type="checkbox"].search-config-checkbox {
2498     vertical-align: bottom;
2499 }
2500
2501 body:not(.platform-mac) .search-drawer-header input[type="checkbox"].search-config-checkbox {
2502     margin-bottom: 5px;
2503 }
2504
2505 body.platform-mac .search-drawer-header input[type="checkbox"].search-config-checkbox {
2506     margin-bottom: 4px;
2507 }
2508
2509 .drawer-header {
2510     font-size: 11px;
2511     border-right: 1px solid rgb(197, 197, 197);
2512     line-height: 21px;
2513     padding-left: 6px;
2514     display: inline-block;
2515 }
2516
2517 .drawer-header-close-button {
2518     font-family: Arial, monospace;
2519     padding: 3px 8px;
2520     font-size: 14px;
2521     color:rgb(80, 80, 80);
2522     opacity: 0.5;
2523     position: relative;
2524     top: 1px;
2525 }
2526
2527 .drawer-header-close-button:hover {
2528     opacity: 1;
2529 }
2530
2531 .drawer-header-close-button:active {
2532     opacity: 0.7;
2533 }
2534
2535 #bottom-status-bar-container {
2536     -webkit-flex: 1 1 0;
2537     width: 0;
2538     overflow: hidden;
2539 }
2540
2541 .animate #bottom-status-bar-container > * {
2542     -webkit-transition: opacity 100ms linear;
2543 }
2544
2545 .search-status-bar-item {
2546     display: inline-block;
2547     cursor: pointer;
2548     font-size: 11px;
2549     height: 23px;
2550 }
2551
2552 .search-status-bar-message {
2553     margin-left:5px;
2554     margin-right:5px;
2555     margin-top:5px;
2556     float:left;
2557 }
2558
2559 .progress-bar-stop-button-item {
2560     width: 19px;
2561     height: 24px;
2562     overflow: hidden;
2563 }
2564
2565 .progress-bar-stop-button .glyph {
2566     -webkit-mask-position: -96px -48px;
2567     background-color: rgb(216, 0, 0) !important;
2568 }
2569
2570 .search-results-status-bar-message {
2571     margin-right: 10px;
2572     cursor: default;
2573     font-size: 11px;
2574     float: right;
2575     margin-top: 5px;
2576 }
2577
2578 .search-view .search-results {
2579     position: absolute;
2580     top: 0;
2581     bottom: 0;
2582     left: 0;
2583     right: 0;
2584     overflow-y: auto;
2585 }
2586
2587 #search-results-pane-file-based li {
2588     list-style: none;
2589 }
2590
2591 #search-results-pane-file-based ol {
2592     -webkit-padding-start: 0;
2593     margin-top: 0;
2594 }
2595
2596 #search-results-pane-file-based ol.children {
2597     display: none;
2598 }
2599
2600 #search-results-pane-file-based ol.children.expanded {
2601     display: block;
2602 }
2603
2604 #search-results-pane-file-based li.parent::before {
2605     content: url(Images/treeRightTriangleBlack.png);
2606     position: relative;
2607     left: -4px;
2608 }
2609
2610 #search-results-pane-file-based li.parent.expanded::before {
2611     content: url(Images/treeDownTriangleBlack.png);
2612 }
2613
2614 #search-results-pane-file-based .search-result {
2615     font-size: 11px;
2616     padding: 2px 0 2px 10px;
2617     word-wrap: normal;
2618     white-space: pre;
2619     cursor: pointer;
2620 }
2621
2622 #search-results-pane-file-based .search-result:hover {
2623     background-color: rgba(121, 121, 121, 0.1);
2624 }
2625
2626 #search-results-pane-file-based .search-result .search-result-file-name {
2627     font-weight: bold;
2628     color: #222;
2629 }
2630
2631 #search-results-pane-file-based .search-result .search-result-matches-count {
2632     margin-left: 5px;
2633     color: #333;
2634 }
2635
2636 #search-results-pane-file-based .show-more-matches {
2637     padding: 4px 0;
2638     color: #333;
2639     cursor: pointer;
2640     font-size: 11px;
2641     margin-left: 20px;
2642 }
2643
2644 #search-results-pane-file-based .show-more-matches:hover {
2645     text-decoration: underline;
2646 }
2647
2648 #search-results-pane-file-based .search-match {
2649     word-wrap: normal;
2650     white-space: pre;
2651 }
2652
2653 #search-results-pane-file-based .search-match .webkit-line-number.search-match-line-number {
2654     margin-right: 5px;
2655     border-right: 1px solid #BBB;
2656 }
2657
2658 #search-results-pane-file-based .search-match:not(:hover) .webkit-line-number.search-match-line-number {
2659     background-color: #F0F0F0;
2660 }
2661
2662 #search-results-pane-file-based .search-match:hover {
2663     background-color: rgba(56, 121, 217, 0.1);
2664 }
2665
2666 #search-results-pane-file-based .search-match .highlighted-match {
2667     background-color: #F1EA00;
2668 }
2669
2670 #search-results-pane-file-based a {
2671     text-decoration: none;
2672     display: block;
2673 }
2674
2675 #search-results-pane-file-based .search-match .search-match-content {
2676     color: #000;
2677 }
2678
2679 .record-cpu-profile-status-bar-item .glyph, .record-profile-status-bar-item .glyph {
2680     -webkit-mask-position: -288px 0;
2681 }
2682
2683 .record-cpu-profile-status-bar-item.toggled-on .glyph, .record-profile-status-bar-item.toggled-on .glyph {
2684     -webkit-mask-position: -288px -24px;
2685     background-color: rgb(216, 0, 0) !important;
2686 }
2687
2688 .storage-empty-view, .storage-view .storage-table-error {
2689     position: absolute;
2690     top: 0;
2691     bottom: 25%;
2692     left: 0;
2693     right: 0;
2694     font-size: 24px;
2695     color: rgb(75%, 75%, 75%);
2696     margin-top: auto;
2697     margin-bottom: auto;
2698     height: 50px;
2699     line-height: 26px;
2700     text-align: center;
2701     font-weight: bold;
2702     padding: 10px;
2703     white-space: pre-wrap;
2704 }
2705
2706 /* Generic suggest box style */
2707
2708 .suggest-box.generic-suggest {
2709     margin-left: -1px;
2710     border-color: rgb(66%, 66%, 66%);
2711 }
2712
2713 .suggest-box.generic-suggest.above-anchor {
2714    border-radius: 5px 5px 5px 0;
2715 }
2716
2717 .suggest-box.generic-suggest.under-anchor {
2718    border-radius: 0 5px 5px 5px;
2719 }
2720
2721 /* Custom popup scrollers */
2722
2723 .custom-popup-horizontal-scroll ::-webkit-scrollbar, .custom-popup-vertical-scroll ::-webkit-scrollbar {
2724     width: 11px;
2725     height: 11px;
2726 }
2727
2728 .custom-popup-horizontal-scroll ::-webkit-scrollbar-corner, .custom-popup-vertical-scroll ::-webkit-scrollbar-corner {
2729     display: none;
2730 }
2731
2732 .custom-popup-horizontal-scroll ::-webkit-resizer, .custom-popup-vertical-scroll ::-webkit-resizer {
2733     display: none;
2734 }
2735
2736 .custom-popup-horizontal-scroll ::-webkit-scrollbar-button, .custom-popup-vertical-scroll ::-webkit-scrollbar-button {
2737     display: none;
2738 }
2739
2740 /* Custom Horizontal Scrollbar Styles */
2741
2742 .custom-popup-horizontal-scroll ::-webkit-scrollbar:horizontal:corner-present {
2743     border-right-width: 0;
2744 }
2745
2746 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal {
2747     -webkit-border-image: url(Images/thumbHoriz.png) 0 11 0 11;
2748     border-color: transparent;
2749     border-width: 0 11px;
2750     min-width: 20px;
2751 }
2752
2753 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:hover {
2754     -webkit-border-image: url(Images/thumbHoverHoriz.png) 0 11 0 11;
2755 }
2756
2757 .custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:active {
2758     -webkit-border-image: url(Images/thumbActiveHoriz.png) 0 11 0 11;
2759 }
2760
2761 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:start {
2762     margin-left: 5px;
2763 }
2764
2765 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end {
2766     margin-right: 5px;
2767 }
2768
2769 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end:corner-present {
2770     margin-right: 4px;
2771 }
2772
2773 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:decrement {
2774     -webkit-border-image: url(Images/trackHoriz.png) 0 11 0 11;
2775     border-color: transparent;
2776     border-width: 0 0 0 11px;
2777 }
2778
2779 .custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:increment {
2780     -webkit-border-image: url(Images/trackHoriz.png) 0 11 0 11;
2781     border-color: transparent;
2782     border-width: 0 11px 0 0;
2783 }
2784
2785 /* Custom Vertical Scrollbar Styles */
2786
2787 .custom-popup-vertical-scroll ::-webkit-scrollbar:vertical:corner-present {
2788     border-bottom-width: 0;
2789 }
2790
2791 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical {
2792     -webkit-border-image: url(Images/thumbVert.png) 11 0 11 0;
2793     border-color: transparent;
2794     border-width: 11px 0;
2795     min-height: 20px;
2796 }
2797
2798 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:hover {
2799     -webkit-border-image: url(Images/thumbHoverVert.png) 11 0 11 0;
2800 }
2801
2802 .custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:active {
2803     -webkit-border-image: url(Images/thumbActiveVert.png) 11 0 11 0;
2804 }
2805
2806 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:start {
2807     margin-top: 5px;
2808 }
2809
2810 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:end {
2811     margin-bottom: 5px;
2812 }
2813
2814 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:end:corner-present {
2815     margin-bottom: 4px;
2816 }
2817
2818 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:decrement {
2819     -webkit-border-image: url(Images/trackVert.png) 11 0 11 0;
2820     border-color: transparent;
2821     border-width: 11px 0 0 0;
2822 }
2823
2824 .custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:increment {
2825     -webkit-border-image: url(Images/trackVert.png) 11 0 11 0;
2826     border-color: transparent;
2827     border-width: 0 0 11px 0;
2828 }
2829
2830 .console-context {
2831     max-width: 200px;
2832 }
2833
2834 .inspector-footer {
2835     position: absolute;
2836     bottom: 0;
2837     left: 0;
2838     right: 0;
2839     font-size: 11px;
2840     height: auto;
2841 }
2842
2843 .progress-bar-container {
2844     display: -webkit-flex;
2845     margin: 0 8px;
2846     -webkit-flex: 1 0;
2847 }
2848
2849 .progress-bar-container span {
2850     padding: 6px;
2851 }
2852
2853 .progress-bar-container progress {
2854     margin-top: 7px;
2855     -webkit-flex: 1 0;
2856 }
2857
2858 body.platform-mac .progress-bar-container progress {
2859     margin-top: 6px;
2860 }
2861
2862 .progress-bar-container button.status-bar-item {
2863     border-left: none;
2864     margin-top: 1px;
2865 }
2866
2867 .source-frame-cursor-position {
2868     padding-left: 6px;
2869     padding-top: 5px;
2870     display: inline-block;
2871     pointer-events: auto;
2872     -webkit-user-select: text;
2873     font-size: 11px;
2874     cursor: text;
2875 }