eb176e002c18d841aa0e5516ebdd9576f838c9e9
[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 html {
31     height: 100%;
32 }
33
34 body {
35     cursor: default;
36     position: absolute;
37     top: 0;
38     bottom: 0;
39     left: 0;
40     right: 0;
41     overflow: hidden;
42     font-family: Lucida Grande, sans-serif;
43     font-size: 10px;
44     margin: 0;
45     -webkit-text-size-adjust: none;
46     -webkit-user-select: none;
47 }
48
49 * {
50     -webkit-box-sizing: border-box;
51 }
52
53 :focus {
54     outline: none;
55 }
56
57 input[type="search"]:focus, input[type="text"]:focus {
58     outline: auto 5px -webkit-focus-ring-color;
59 }
60
61 iframe, a img {
62     border: none;
63 }
64
65 img {
66     -webkit-user-drag: none;
67 }
68
69 .hidden {
70     display: none !important;
71 }
72
73 #toolbar {
74     position: absolute;
75     top: 0;
76     left: 0;
77     right: 0;
78     height: 56px;
79     padding: 0 5px;
80     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
81     border-bottom: 1px solid rgb(80, 80, 80);
82     -webkit-box-orient: horizontal;
83     -webkit-background-origin: padding;
84     -webkit-background-clip: padding;
85 }
86
87 body.inactive #toolbar {
88     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(207, 207, 207)));
89     border-bottom: 1px solid rgb(64%, 64%, 64%);
90 }
91
92 body.detached.platform-mac-leopard:not(.remote) #toolbar,
93 body.detached.platform-mac-snowleopard:not(.remote) #toolbar {
94     background: transparent;
95 }
96
97 body.attached #toolbar {
98     height: 34px;
99     border-top: 1px solid rgb(100, 100, 100);
100     cursor: ns-resize;
101     padding-left: 0;
102 }
103
104 body.attached.port-qt #toolbar {
105     cursor: auto;
106 }
107
108 body.attached.inactive #toolbar {
109     border-top: 1px solid rgb(64%, 64%, 64%);
110 }
111
112 .toolbar-item {
113     margin: 0;
114     padding: 0 6px;
115     background-color: transparent;
116     border-style: none;
117     border-color: transparent;
118 }
119
120 .toolbar-item.toggleable {
121     padding-top: 4px;
122 }
123
124 .toolbar-item.toggleable.toggled-on {
125     border-width: 0 2px 0 2px;
126     padding: 4px 4px 0 4px;
127     -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
128 }
129
130 .toolbar-icon {
131     display: inline-block;
132     width: 32px;
133     height: 32px;
134     background-image: url(Images/toolbarIcons.png);
135 }
136
137 .toolbar-small .toolbar-icon {
138     width: 24px;
139     height: 24px;
140     vertical-align: middle;
141     background-image: url(Images/toolbarIconsSmall.png);
142 }
143
144 .toolbar-item:active .toolbar-icon {
145     background-position-y: 32px;
146 }
147
148 .toolbar-small .toolbar-item:active .toolbar-icon {
149     background-position-y: 24px;
150 }
151
152 .toolbar-label {
153     font-size: 11px;
154     font-family: Lucida Grande, sans-serif;
155     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
156 }
157
158 .toolbar-item.toggleable:active .toolbar-label {
159     text-shadow: none;
160 }
161
162 .toolbar-small .toolbar-label {
163     display: inline-block;
164     margin-left: 3px;
165     position: relative;
166     top: 2px;
167 }
168
169 body.attached #search-toolbar-label {
170     display: none;
171 }
172
173 #toolbar-controls {
174     float: right;
175     display: -webkit-box;
176     -webkit-box-align: center;
177     height: 100%;
178 }
179
180 #toolbar-dropdown-arrow {
181     font-size: 16px;
182     font-weight: bold;
183     border: 0;
184     background-color: transparent;
185     -webkit-border-radius: 5px;
186     text-shadow: none;
187 }
188
189 body.attached #toolbar-dropdown-arrow {
190     font-size: 14px;
191     padding-bottom: 4px;
192 }
193
194 #toolbar-dropdown-arrow.dropdown-visible {
195     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 251, 0.9)), to(rgba(231, 231, 231, 0.9)));
196 }
197
198 #toolbar-dropdown-arrow:hover {
199     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(191, 191, 191, 0.7)), to(rgba(171, 171, 171, 0.5)));
200 }
201
202 #toolbar-dropdown-arrow:active {
203     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(111, 111, 111, 0.8)), to(rgba(91, 91, 91, 0.8)));
204 }
205
206 #toolbar-dropdown {
207     position: absolute;
208     z-index: 1000;
209     -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
210     border: 1px solid rgb(128, 128, 128);
211     padding: 4px;
212     background-color: inherit;
213     background-image: inherit;
214 }
215
216 body.detached.platform-mac-leopard #toolbar-dropdown,
217 body.detached.platform-mac-snowleopard #toolbar-dropdown {
218     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
219 }
220
221 #toolbar-dropdown .scrollable-content {
222     display: -webkit-box;
223     -webkit-box-orient: vertical;
224     -webkit-box-align: start;
225 }
226
227 #toolbar-dropdown .toolbar-item {
228     display: -webkit-box;
229     -webkit-box-orient: horizontal;
230     margin: 0px 2px;
231     padding: 4px;
232     width: 100%;
233     border: 1px solid rgba(0, 0, 0, 0);
234 }
235
236 #toolbar-dropdown .toolbar-item.toggleable.toggled-on {
237     border: 1px solid rgba(100, 100, 120, 0.4);
238     -webkit-border-image: none;
239     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)));
240 }
241
242 #toolbar-dropdown .toolbar-item:hover {
243     -webkit-border-image: none;
244     border: 1px solid rgba(100, 100, 120, 0.8);
245 }
246
247 #toolbar-dropdown .toolbar-item.toggleable.toggled-on:hover {
248     border: 1px solid rgba(100, 100, 120, 1);
249 }
250
251 #toolbar-dropdown .toolbar-icon {
252     margin-right: 0.5em;
253 }
254
255 .scrollable-content {
256     position: static;
257     height: 100%;
258     overflow-y: auto;
259     width: 100%;
260     margin-right: 12px;
261     padding-right: 3px;
262 }
263
264 .scrollable-content::-webkit-scrollbar {
265     width: 11px;
266 }
267
268 .scrollable-content::-webkit-scrollbar-corner,
269 .scrollable-content::-webkit-resizer {
270     display: none;
271 }
272
273 .scrollable-content::-webkit-scrollbar-thumb:vertical {
274     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)));
275     border-radius: 5px;
276     min-height: 20px;
277 }
278
279 .scrollable-content::-webkit-scrollbar-thumb:vertical:hover,
280 .scrollable-content::-webkit-scrollbar-thumb:vertical:active {
281     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)));
282 }
283
284 .scrollable-content::-webkit-scrollbar-track:vertical {
285     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)));
286     border-radius: 5px;
287 }
288
289 .toolbar-search-item {
290     display: -webkit-box;
291     -webkit-box-orient: vertical;
292     -webkit-box-align: center;
293     -webkit-box-pack: end;
294 }
295
296 #search {
297     width: 205px;
298     font-size: 16px;
299 }
300
301 body.attached #search {
302     font-size: 11px;
303 }
304
305 #search-results-matches {
306     font-size: 11px;
307     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
308 }
309
310 .toolbar-item.elements .toolbar-icon {
311     background-position-x: 0;
312 }
313
314 .toolbar-item.resources .toolbar-icon {
315     background-position-x: -32px;
316 }
317
318 .toolbar-small .toolbar-item.resources .toolbar-icon {
319     background-position-x: -24px;
320 }
321
322 .toolbar-item.network .toolbar-icon {
323     background-position-x: -64px;
324 }
325
326 .toolbar-small .toolbar-item.network .toolbar-icon {
327     background-position-x: -48px;
328 }
329
330 .toolbar-item.scripts .toolbar-icon {
331     background-position-x: -96px;
332 }
333
334 .toolbar-small .toolbar-item.scripts .toolbar-icon {
335     background-position-x: -72px;
336 }
337
338 .toolbar-item.timeline .toolbar-icon {
339     background-position-x: -128px;
340 }
341
342 .toolbar-small .toolbar-item.timeline .toolbar-icon {
343     background-position-x: -96px;
344 }
345
346 .toolbar-item.profiles .toolbar-icon {
347     background-position-x: -160px;
348 }
349
350 .toolbar-small .toolbar-item.profiles .toolbar-icon {
351     background-position-x: -120px;
352 }
353
354 .toolbar-item.audits .toolbar-icon {
355     background-position-x: -192px;
356 }
357
358 .toolbar-small .toolbar-item.audits .toolbar-icon {
359     background-position-x: -144px;
360 }
361
362 .toolbar-item.console .toolbar-icon {
363     background-position-x: -224px;
364 }
365
366 .toolbar-small .toolbar-item.console .toolbar-icon {
367     background-position-x: -168px;
368 }
369
370 #close-button-left, #close-button-right {
371     width: 14px;
372     height: 14px;
373     background-image: url(Images/closeButtons.png);
374     background-position: 0 0;
375     background-color: transparent;
376     border: 0 none transparent;
377     margin-top: 4px;
378 }
379
380 #close-button-left:hover, #close-button-right:hover {
381     background-position: 14px 0;
382 }
383
384 #close-button-left:active, #close-button-right:active {
385     background-position: 28px 0;
386 }
387
388 .close-left {
389     float: left;
390 }
391
392 body.detached .toolbar-item.close-left, body.detached .toolbar-item.close-right {
393     display: none;
394 }
395
396 body.attached.port-qt .toolbar-item.close-left, body.attached.port-qt .toolbar-item.close-right {
397     display: none;
398 }
399
400 body.platform-mac .toolbar-item.close-right {
401     display: none;
402 }
403
404 body:not(.platform-mac) .toolbar-item.close-left {
405     display: none;
406 }
407
408 .toolbar-item.close-left {
409     margin-top: 5px;
410 }
411
412 #main {
413     position: absolute;
414     z-index: 1;
415     top: 56px;
416     left: 0;
417     right: 0;
418     bottom: 0;
419     overflow: hidden;
420     background-color: white;
421 }
422
423 body.attached #main {
424     top: 34px;
425 }
426
427 #main-panels {
428     position: absolute;
429     top: 0;
430     left: 0;
431     right: 0;
432     bottom: 23px;
433     overflow: hidden;
434 }
435
436 #main-status-bar {
437     position: absolute;
438     bottom: 0;
439     left: 0;
440     right: 0;
441 }
442
443 body.drawer-visible #main-status-bar {
444     height: 24px;
445     background-image: url(Images/statusbarResizerVertical.png), url(Images/statusbarBackground.png);
446     background-repeat: no-repeat, repeat-x;
447     background-position: right center, center;
448     cursor: ns-resize;
449 }
450
451 body.drawer-visible #main-status-bar * {
452     cursor: default;
453 }
454
455 body.drawer-visible #main-panels {
456     bottom: 24px;
457 }
458
459 .status-bar {
460     background-color: rgb(235, 235, 235);
461     background-image: url(Images/statusbarBackground.png);
462     background-repeat: repeat-x;
463     white-space: nowrap;
464     height: 23px;
465     overflow: hidden;
466     z-index: 12;
467 }
468
469 .status-bar > div {
470     display: inline-block;
471     vertical-align: top;
472 }
473
474 .status-bar-item {
475     display: inline-block;
476     height: 24px;
477     padding: 0;
478     margin-left: -1px;
479     margin-right: 0;
480     vertical-align: top;
481     border: 0 transparent none;
482     background-color: transparent;
483 }
484
485 .status-bar-item:active {
486     position: relative;
487     z-index: 200;
488 }
489
490 .glyph {
491     position: absolute;
492     top: 0;
493     left: 0;
494     right: 0;
495     bottom: 0;
496     background-color: rgba(0, 0, 0, 0.75);
497     z-index: 1;
498 }
499
500 .glyph.shadow {
501     top: 1px;
502     background-color: white !important;
503     z-index: 0;
504 }
505
506 button.status-bar-item {
507     position: relative;
508     width: 32px;
509     background-image: url(Images/statusbarButtons.png);
510     background-position: 0 0;
511 }
512
513 button.status-bar-item:active {
514     background-position: 32px 0 !important;
515 }
516
517 button.status-bar-item .glyph.shadow {
518     background-color: rgba(255, 255, 255, 0.33) !important;
519 }
520
521 button.status-bar-item.toggled-on .glyph {
522     background-color: rgb(66, 129, 235);
523 }
524
525 button.status-bar-item:disabled {
526     opacity: 0.5;
527     background-position: 0 0 !important;
528 }
529
530 select.status-bar-item {
531     min-width: 48px;
532     border-width: 0 17px 0 2px;
533     padding: 0 2px 0 6px;
534     font-weight: bold;
535     color: rgb(48, 48, 48);
536     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
537     -webkit-border-image: url(Images/statusbarMenuButton.png) 0 17 0 2;
538     -webkit-border-radius: 0;
539     -webkit-appearance: none;
540 }
541
542 select.status-bar-item:active {
543     color: black;
544     -webkit-border-image: url(Images/statusbarMenuButtonSelected.png) 0 17 0 2;
545 }
546
547 .status-bar-item > .glyph {
548     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
549 }
550
551
552 button.dock-status-bar-item.status-bar-item .glyph {
553     -webkit-mask-position: 0 -48px;
554 }
555
556 button.dock-status-bar-item.status-bar-item.toggled-on .glyph {
557     -webkit-mask-position: -32px -24px;
558     background-color: rgba(0, 0, 0, 0.75);
559 }
560
561 body.port-qt #dock-status-bar-item {
562     display: none
563 }
564
565 .console-status-bar-item .glyph {
566     -webkit-mask-position: -64px -24px;
567 }
568
569 .clear-status-bar-item .glyph {
570     -webkit-mask-position: -64px 0;
571 }
572
573 #counters {
574     position: absolute;
575     right: 16px;
576     top: 0;
577     cursor: pointer;
578     padding: 6px 2px 6px 0px;
579     font-size: 10px;
580     height: 19px;
581 }
582
583 #error-warning-count {
584     display: inline;
585 }
586
587 #error-warning-count:hover {
588     border-bottom: 1px solid rgb(96, 96, 96);
589 }
590
591 #error-count::before {
592     content: url(Images/errorIcon.png);
593     width: 10px;
594     height: 10px;
595     vertical-align: -1px;
596     margin-right: 2px;
597 }
598     
599 #error-count + #warning-count {
600     margin-left: 6px;
601 }
602
603 #warning-count::before {
604     content: url(Images/warningIcon.png);
605     width: 10px;
606     height: 10px;
607     vertical-align: -1px;
608     margin-right: 2px;
609 }
610
611 #drawer {
612     display: none;
613     position: absolute;
614     bottom: 0;
615     left: 0;
616     right: 0;
617     height: 200px;
618     background-color: white;
619     background-image: url(Images/statusbarBottomBackground.png);
620     background-repeat: repeat-x;
621     background-position: bottom;
622 }
623
624 body.drawer-visible #drawer {
625     display: block;
626 }
627
628 #drawer-status-bar {
629     position: absolute;
630     bottom: 0;
631     left: 0;
632     right: 0;
633     background: none;
634 }
635
636 .monospace {
637     font-size: 10px !important;
638     font-family: monospace;
639 }
640
641 body.platform-mac .monospace, body.platform-mac .source-code {
642     font-family: Monaco, monospace;
643 }
644
645 /* Keep .platform-mac to make the rule more specific than the general one above. */
646 body.platform-mac.platform-mac-snowleopard .monospace,
647 body.platform-mac.platform-mac-snowleopard .source-code {
648     font-size: 11px !important;
649     font-family: Menlo, monospace;
650 }
651
652 body.platform-windows .monospace, body.platform-windows .source-code {
653     font-size: 12px !important;
654     font-family: Consolas, Lucida Console, monospace;
655 }
656
657 body.platform-linux .monospace, body.platform-linux .source-code {
658     font-size: 11px !important;
659     font-family: dejavu sans mono, monospace;
660 }
661
662 #console-messages {
663     position: absolute;
664     z-index: 0;
665     top: 0;
666     left: 0;
667     right: 0;
668     bottom: 23px;
669     padding: 2px 0;
670     overflow-y: overlay;
671     word-wrap: break-word;
672     -webkit-user-select: text;
673     -webkit-text-size-adjust: auto;
674 }
675
676 #console-prompt {
677     position: relative;
678     padding: 1px 22px 1px 0px;
679     margin-left: 24px;
680     min-height: 16px; 
681     white-space: pre-wrap;
682     -webkit-user-modify: read-write-plaintext-only;
683 }
684
685 #console-prompt::before {
686     background-image: url(Images/userInputIcon.png);
687 }
688
689 .console-user-command-result.console-log-level::before {
690     background-image: url(Images/userInputResultIcon.png);
691 }
692
693 .console-message, .console-user-command {
694     position: relative;
695     border-bottom: 1px solid rgb(240, 240, 240);
696     padding: 1px 22px 1px 0px;
697     margin-left: 24px;
698     min-height: 16px;
699 }
700
701 .console-adjacent-user-command-result {
702     border-bottom: none;
703 }
704
705 .console-adjacent-user-command-result + .console-user-command-result.console-log-level::before {
706     background-image: none;
707 }
708
709 .console-message::before, .console-user-command::before, #console-prompt::before, .console-group-title::before {
710     position: absolute;
711     display: block;
712     content: "";
713     left: -14px;
714     top: 0.8em;
715     width: 10px;
716     height: 10px;
717     margin-top: -5px;
718     -webkit-user-select: none;
719 }
720
721 .console-message .bubble {
722     display: inline-block;
723     height: 14px;
724     background-color: rgb(128, 151, 189);
725     vertical-align: middle;
726     white-space: nowrap;
727     padding: 1px 4px;
728     margin-top: -2px;
729     margin-right: 4px;
730     text-align: left;
731     font-size: 11px;
732     line-height: normal;
733     font-family: Helvetica, Arial, sans-serif;
734     font-weight: bold;
735     text-shadow: none;
736     color: white;
737     -webkit-border-radius: 7px;
738 }
739
740 .console-message-text {
741     white-space: pre-wrap;
742 }
743
744 .repeated-message {
745     padding-left: 6px;
746 }
747
748 .repeated-message.console-error-level::before, .repeated-message.console-warning-level:before, .repeated-message.console-debug-level:before {
749     visibility: hidden;
750 }
751
752 .console-group .console-group > .console-group-messages {
753     margin-left: 16px;
754 }
755
756 .console-group-title {
757     font-weight: bold;
758 }
759
760 .console-group-title::before {
761     background-image: url(Images/disclosureTriangleSmallDown.png);
762     top: 0.6em;
763     width: 11px;
764     height: 12px;
765     left: -16px;
766     position: absolute;
767 }
768
769 .console-group.collapsed .console-group-title::before {
770     background-image: url(Images/disclosureTriangleSmallRight.png);
771 }
772
773 .console-group.collapsed > .console-group-messages {
774     display: none;
775 }
776
777 .console-group {
778     position: relative;
779 }
780
781 .console-group-bracket {
782     position:absolute;
783     top: 15px;
784     left: 13px;
785     bottom: 5px;
786     width: 3px;
787     border-style: solid;
788     border-color: #A3A3A3;
789     border-width: 0px 0px 1px 1px;
790 }
791
792 .console-group.collapsed > .console-group-bracket {
793     display: none;
794 }
795
796 .console-error-level .console-message-text, .console-error-level .section .header .title {
797     color: red !important;
798 }
799
800 .console-debug-level .console-message-text {
801     color: blue;
802 }
803
804 .console-debug-level::before {
805     background-image: url(Images/searchSmallBrightBlue.png);
806 }
807
808 .console-error-level::before {
809     background-image: url(Images/errorIcon.png);
810 }
811
812 .console-warning-level::before {
813     background-image: url(Images/warningIcon.png);
814 }
815
816 .console-user-command .console-message {
817     margin-left: -24px;
818     padding-right: 0;
819     border-bottom: none;
820 }
821
822 .console-user-command::before {
823     background-image: url(Images/userInputPreviousIcon.png);
824 }
825
826 .console-user-command > .console-message-text {
827     color: rgb(0, 128, 255);
828 }
829
830 #console-messages a {
831     color: rgb(33%, 33%, 33%);
832     cursor: pointer;
833 }
834
835 #console-messages a:hover {
836     color: rgb(15%, 15%, 15%);
837 }
838
839 .console-message-url {
840     float: right;
841     margin-left: 4px;
842 }
843
844 .console-group-messages .section {
845     margin: 0 0 0 12px !important;
846 }
847
848 .console-group-messages .section .header {
849     padding: 0 8px 0 0;
850     background-image: none;
851     border: none;
852     min-height: 0;
853 }
854
855 .console-group-messages .section .header::before {
856     position: absolute;
857     top: 1px;
858     left: 1px;
859     width: 8px;
860     height: 8px;
861     content: url(Images/treeRightTriangleBlack.png);
862 }
863
864 .console-group-messages .section.expanded .header::before {
865     content: url(Images/treeDownTriangleBlack.png);
866 }
867
868 .console-group-messages .section .header .title {
869     color: black;
870     font-weight: normal;
871 }
872
873 .console-group-messages .section .properties li .info {
874     padding-top: 0;
875     padding-bottom: 0;
876     color: rgb(60%, 60%, 60%);
877 }
878
879 .console-group-messages .outline-disclosure {
880     padding-left: 0;
881 }
882
883 .console-group-messages .outline-disclosure > ol {
884     padding: 0 0 0 12px !important;
885 }
886
887 .console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol {
888     font-size: inherit;
889     line-height: 12px;
890 }
891
892 .console-group-messages .outline-disclosure.single-node li {
893     padding-left: 2px;
894 }
895
896 .console-group-messages .outline-disclosure li .selection {
897     margin-left: -6px;
898     margin-right: -6px;
899 }
900
901 .console-group-messages .add-attribute {
902     display: none;
903 }
904
905 .console-formatted-object, .console-formatted-node {
906     position: relative;
907     display: inline-block;
908     vertical-align: top;
909     color: black;
910 }
911
912 .console-formatted-object .section, .console-formatted-node .section {
913     position: static;
914 }
915
916 .console-formatted-object .properties, .console-formatted-node .properties {
917     padding-left: 0 !important;
918 }
919
920 .console-formatted-number {
921     color: rgb(28, 0, 207);
922 }
923
924 .console-formatted-string, .console-formatted-regexp {
925     color: rgb(196, 26, 22);
926     white-space: pre;
927 }
928
929 .console-formatted-null, .console-formatted-undefined {
930     color: rgb(128, 128, 128);
931 }
932
933 .error-message {
934     color: red;
935 }
936
937 .auto-complete-text, .editing .auto-complete-text {
938     color: rgb(128, 128, 128) !important;
939     -webkit-user-select: none;
940     -webkit-user-modify: read-only;
941 }
942
943 .panel {
944     display: none;
945     overflow: hidden;
946     position: absolute;
947     top: 0;
948     left: 0;
949     right: 0;
950     bottom: 0;
951 }
952
953 .panel.visible {
954     display: block;
955 }
956
957 iframe.extension {
958     width: 100%;
959 }
960
961 iframe.panel.extension {
962     display: block;
963     height: 100%;
964 }
965
966 .webkit-line-gutter-backdrop {
967     /* Keep this in sync with view-source.css (.webkit-line-gutter-backdrop) */
968     width: 31px;
969     background-color: rgb(240, 240, 240);
970     border-right: 1px solid rgb(187, 187, 187);
971     position: absolute;
972     z-index: -1;
973     left: 0;
974     top: 0;
975     height: 100%
976 }
977
978 .resource-view {
979     display: none;
980     position: absolute;
981     top: 0;
982     right: 0;
983     left: 0;
984     bottom: 0;
985     overflow: auto;
986 }
987
988 .resource-view.visible {
989     display: block;
990 }
991
992 .resource-view.font {
993     font-size: 60px;
994     white-space: pre-wrap;
995     word-wrap: break-word;
996     text-align: center;
997     padding: 15px;
998 }
999
1000 .resource-view.image > .image {
1001     padding: 20px 20px 10px 20px;
1002     text-align: center;
1003 }
1004
1005 .resource-view.image > .info {
1006     padding-bottom: 10px;
1007     font-size: 11px;
1008     -webkit-user-select: text;
1009 }
1010
1011 .resource-view.image img.resource-image-view {
1012     max-width: 100%;
1013     max-height: 1000px;
1014     background-image: url(Images/checker.png);
1015     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
1016     -webkit-user-select: text;
1017     -webkit-user-drag: auto;
1018 }
1019
1020 .resource-url {
1021     vertical-align: middle;
1022 }
1023
1024 .resource-status-image {
1025     margin-top: -3px;
1026     vertical-align: middle;
1027 }
1028
1029 .resource-view.image .title {
1030     text-align: center;
1031     font-size: 13px;
1032 }
1033
1034 .resource-view.image .infoList {
1035     margin: 0;
1036 }
1037
1038 .resource-view.image .infoList dt {
1039     font-weight: bold;
1040     display: inline-block;
1041     width: 50%;
1042     text-align: right;
1043     color: rgb(76, 76, 76);
1044 }
1045
1046 .resource-view.image .infoList dd {
1047     display: inline-block;
1048     padding-left: 8px;
1049     width: 50%;
1050     text-align: left;
1051     margin: 0;
1052 }
1053
1054 .resource-view.image .infoList dd::after {
1055     white-space: pre;
1056     content: "\A";
1057 }
1058
1059 .resource-timing-row {
1060     position: relative;
1061     height: 12px;
1062 }
1063
1064 .resource-timing-bar {
1065     position: absolute;
1066     background-color: red;
1067     border-left: 1px solid red;
1068     opacity: 0.4;
1069 }
1070
1071 .resource-timing-bar-title {
1072     position: absolute;
1073 }
1074
1075 #elements-content {
1076     display: block;
1077     overflow: auto;
1078     padding: 0;
1079     position: absolute;
1080     top: 0;
1081     left: 0;
1082     right: 325px;
1083     bottom: 0;
1084 }
1085
1086 #elements-content.nowrap {
1087     white-space: nowrap;
1088 }
1089
1090 #elements-content > ol {
1091     display: inline-block;
1092 }
1093
1094 #elements-sidebar {
1095     position: absolute;
1096     top: 0;
1097     right: 0;
1098     bottom: 0;
1099     width: 325px;
1100     border-left: 1px solid rgb(64%, 64%, 64%);
1101     cursor: default;
1102     overflow: auto;
1103 }
1104
1105 .crumbs {
1106     display: inline-block;
1107     font-size: 11px;
1108     line-height: 19px;
1109     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
1110     color: rgb(20, 20, 20);
1111     margin-left: -1px;
1112     padding-right: 12px;
1113 }
1114
1115 .crumbs .crumb {
1116     height: 24px;
1117     border-width: 0 12px 0 2px;
1118     -webkit-border-image: url(Images/segment.png) 0 12 0 2;
1119     margin-right: -12px;
1120     padding-left: 18px;
1121     padding-right: 2px;
1122     white-space: nowrap;
1123     line-height: 23px;
1124     float: right;
1125 }
1126
1127 .crumbs .crumb.collapsed > * {
1128     display: none;
1129 }
1130
1131 .crumbs .crumb.collapsed::before {
1132     content: "\2026";
1133     font-weight: bold;
1134 }
1135
1136 .crumbs .crumb.compact .extra {
1137     display: none;
1138 }
1139
1140 .crumbs .crumb.dimmed {
1141     color: rgba(0, 0, 0, 0.45);
1142 }
1143
1144 .crumbs .crumb.start {
1145     padding-left: 7px;
1146 }
1147
1148 .crumbs .crumb.end {
1149     border-width: 0 2px 0 2px;
1150     padding-right: 6px;
1151     -webkit-border-image: url(Images/segmentEnd.png) 0 2 0 2;
1152 }
1153
1154 .crumbs .crumb.selected {
1155     -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2;
1156     color: black;
1157     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
1158 }
1159
1160 .crumbs .crumb.selected:hover {
1161     -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2;
1162 }
1163
1164 .crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
1165     -webkit-border-image: url(Images/segmentSelectedEnd.png) 0 2 0 2;
1166 }
1167
1168 .crumbs .crumb:hover {
1169     -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2;
1170     color: black;
1171 }
1172
1173 .crumbs .crumb.dimmed:hover {
1174     -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2;
1175     color: rgba(0, 0, 0, 0.75);
1176 }
1177
1178 .crumbs .crumb.end:hover {
1179     -webkit-border-image: url(Images/segmentHoverEnd.png) 0 2 0 2;
1180 }
1181
1182 .outline-disclosure li.hovered:not(.selected) .selection {
1183     display: block;
1184     left: 3px;
1185     right: 3px;
1186     background-color: rgba(56, 121, 217, 0.1);
1187     -webkit-border-radius: 5px;
1188 }
1189
1190 .outline-disclosure li.highlighted .highlight {
1191     background-color: rgb(255, 230, 179);
1192     -webkit-border-radius: 4px;
1193     padding-bottom: 2px;
1194     margin-bottom: -2px;
1195 }
1196
1197 .outline-disclosure li.selected.highlighted .highlight {
1198     background-color: transparent;
1199     padding-bottom: 0;
1200     margin-bottom: 0;
1201 }
1202
1203 .outline-disclosure li .selection {
1204     display: none;
1205     position: absolute;
1206     left: 0;
1207     right: 0;
1208     height: 15px;
1209     z-index: -1;
1210 }
1211
1212 .outline-disclosure li.selected .selection {
1213     display: block;
1214     background-color: rgb(212, 212, 212);
1215 }
1216
1217 .outline-disclosure ol:focus li.selected .selection {
1218     background-color: rgb(56, 121, 217);
1219 }
1220
1221 .outline-disclosure {
1222     font-size: 11px;
1223 }
1224
1225 .outline-disclosure > ol {
1226     position: relative;
1227     padding: 2px 6px !important;
1228     margin: 0;
1229     color: black;
1230     cursor: default;
1231     min-width: 100%;
1232 }
1233
1234 .outline-disclosure, .outline-disclosure ol {
1235     list-style-type: none;
1236     -webkit-padding-start: 12px;
1237     margin: 0;
1238 }
1239
1240 .source-code {
1241     font-family: monospace;
1242     font-size: 10px !important;
1243     white-space: pre-wrap;
1244 }
1245
1246 .outline-disclosure li {
1247     padding: 0 0 0 14px;
1248     margin-top: 1px;
1249     margin-bottom: 1px;
1250     word-wrap: break-word;
1251     text-indent: -2px;
1252 }
1253
1254 .resources .outline-disclosure li {
1255     text-indent: -1px;
1256 }
1257
1258 .outline-disclosure ol:focus li.selected {
1259     color: white;
1260 }
1261
1262 .outline-disclosure ol:focus li.selected * {
1263     color: inherit;
1264 }
1265
1266 .outline-disclosure li.parent {
1267     text-indent: -12px
1268 }
1269
1270 .outline-disclosure li .webkit-html-tag.close {
1271     margin-left: -12px;
1272 }
1273
1274 .outline-disclosure li.parent::before {
1275     content: url(Images/treeRightTriangleBlack.png);
1276     float: left;
1277     width: 8px;
1278     height: 8px;
1279     margin-top: 1px;
1280     padding-right: 2px;
1281 }
1282
1283 .outline-disclosure li.parent::before {
1284     content: url(Images/treeRightTriangleBlack.png);
1285 }
1286
1287 .outline-disclosure ol:focus li.parent.selected::before {
1288     content: url(Images/treeRightTriangleWhite.png);
1289 }
1290
1291 .outline-disclosure li.parent.expanded::before {
1292     content: url(Images/treeDownTriangleBlack.png);
1293 }
1294
1295 .outline-disclosure ol:focus li.parent.expanded.selected::before {
1296     content: url(Images/treeDownTriangleWhite.png);
1297 }
1298
1299 .outline-disclosure ol.children {
1300     display: none;
1301 }
1302
1303 .outline-disclosure ol.children.expanded {
1304     display: block;
1305 }
1306
1307 .add-attribute {
1308     margin-left: 1px;
1309     margin-right: 1px;
1310     white-space: nowrap;
1311 }
1312
1313 .placard {
1314     position: relative;
1315     margin-top: 1px;
1316     padding: 3px 8px 4px 18px;
1317     min-height: 18px;
1318     white-space: nowrap;
1319 }
1320
1321 .placard:nth-of-type(2n) {
1322     background-color: rgb(234, 243, 255);
1323 }
1324
1325 .placard.selected {
1326     border-top: 1px solid rgb(145, 160, 192);
1327     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
1328     -webkit-background-origin: padding;
1329     -webkit-background-clip: padding;
1330 }
1331
1332 :focus .placard.selected {
1333     border-top: 1px solid rgb(68, 128, 200);
1334     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
1335 }
1336
1337 body.inactive .placard.selected {
1338     border-top: 1px solid rgb(151, 151, 151);
1339     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
1340 }
1341
1342 .placard .title {
1343     color: black;
1344     font-weight: normal;
1345     word-wrap: break-word;
1346     white-space: normal;
1347 }
1348
1349 .placard.selected .title {
1350     color: white;
1351     font-weight: bold;
1352 }
1353
1354 .placard .subtitle {
1355     float: right;
1356     font-size: 10px;
1357     margin-left: 5px;
1358     max-width: 55%;
1359     color: rgba(0, 0, 0, 0.7);
1360     text-overflow: ellipsis;
1361     overflow: hidden;
1362 }
1363
1364 .placard.selected .subtitle {
1365     color: rgba(255, 255, 255, 0.7);
1366 }
1367
1368 .placard .subtitle a {
1369     color: inherit;
1370 }
1371
1372 .section {
1373     position: relative;
1374     margin-top: 1px;
1375 }
1376
1377 .events-pane .section:not(:nth-of-type(1)) {
1378     border-top: 1px solid rgb(191, 191, 191);
1379 }
1380
1381 .event-bar:first-child {
1382     margin-top: 1px;
1383 }
1384
1385 .section .header {
1386     color: black;
1387     padding: 0 8px 0 18px;
1388     min-height: 18px;
1389     white-space: nowrap;
1390     -webkit-background-origin: padding;
1391     -webkit-background-clip: padding;
1392 }
1393
1394 .section .header::before {
1395     position: absolute;
1396     top: 2px;
1397     left: 7px;
1398     width: 8px;
1399     height: 8px;
1400     content: url(Images/treeRightTriangleBlack.png);
1401     opacity: 0.8;
1402 }
1403
1404 .section.expanded .header::before {
1405     content: url(Images/treeDownTriangleBlack.png);
1406 }
1407
1408 .section .header .title, .event-bar .header .title {
1409     font-weight: normal;
1410     word-wrap: break-word;
1411     white-space: normal;
1412     line-height: 18px;
1413 }
1414
1415 .section .header .title.blank-title {
1416     font-style: italic;
1417 }
1418
1419 .section .header label, .event-bar .header label {
1420     display: none;
1421 }
1422
1423 .section.expanded .header label, .event-bar.expanded .header label {
1424     display: inline;
1425 }
1426
1427 .section .header .subtitle, .event-bar .header .subtitle {
1428     float: right;
1429     margin-left: 5px;
1430     max-width: 55%;
1431     text-overflow: ellipsis;
1432     overflow: hidden;
1433 }
1434
1435 .section .header .subtitle a {
1436     color: inherit;
1437 }
1438
1439 .section .properties, .event-bar .event-properties {
1440     display: none;
1441 }
1442
1443 .section.expanded .properties, .event-bar.expanded .event-properties {
1444     display: block;
1445     padding-left: 16px;
1446 }
1447
1448 .section.no-affect .properties li {
1449     opacity: 0.5;
1450 }
1451
1452 .section.no-affect .properties li.editing {
1453     opacity: 1.0;
1454 }
1455
1456 .properties-tree {
1457     margin: 0;
1458     padding: 0 6px 2px;
1459     list-style: none;
1460     min-height: 18px;
1461 }
1462
1463 .properties-tree li {
1464     margin-left: 12px;
1465     white-space: nowrap;
1466     text-overflow: ellipsis;
1467     overflow: hidden;
1468     -webkit-user-select: text;
1469     cursor: auto;
1470 }
1471
1472 .properties-tree li.parent {
1473     margin-left: 1px;
1474 }
1475
1476 .properties-tree li.parent::before {
1477     content: url(Images/treeRightTriangleBlack.png);
1478     opacity: 0.75;
1479     float: left;
1480     width: 8px;
1481     height: 8px;
1482     margin-top: 0;
1483     padding-right: 3px;
1484     -webkit-user-select: none;
1485     cursor: default;
1486 }
1487
1488 .properties-tree li.parent.expanded::before {
1489     content: url(Images/treeDownTriangleBlack.png);
1490     margin-top: 1px;
1491 }
1492
1493 .properties-tree li .info {
1494     padding-top: 4px;
1495     padding-bottom: 3px;
1496 }
1497
1498 .properties-tree ol {
1499     display: none;
1500     margin: 0;
1501     -webkit-padding-start: 12px;
1502     list-style: none;
1503 }
1504
1505 .properties-tree ol.expanded {
1506     display: block;
1507 }
1508
1509 .event-listener-breakpoints .event-category {
1510     font-size: 11px;
1511     font-weight: bold;
1512     color: rgb(96, 96, 96);
1513     padding-top: 2px;
1514 }
1515
1516 .event-listener-breakpoints.properties-tree .children li {
1517     margin-left: 12px;
1518     height: 16px;
1519 }
1520
1521 .event-listener-breakpoints .checkbox-elem {
1522     font-size: 10px;
1523     float: left;
1524     top: -2px;
1525     position: relative;
1526     left: -1px;
1527 }
1528
1529 .section .event-bars {
1530     display: none;
1531 }
1532
1533 .section.expanded .event-bars {
1534     display: block;
1535 }
1536
1537 .event-bar {
1538     position: relative;
1539     margin-left: 10px;
1540 }
1541
1542 .event-bars .event-bar .header {
1543     padding: 0 8px 0 18px;
1544     min-height: 16px;
1545     opacity: 1.0;
1546     white-space: nowrap;
1547     -webkit-background-origin: padding;
1548     -webkit-background-clip: padding;
1549 }
1550
1551 .event-bars .event-bar .header .title {
1552     font-weight: normal;
1553     color: black;
1554     text-shadow: white 0 1px 0; 
1555 }
1556
1557 .event-bars .event-bar .header .subtitle {
1558     color: rgba(90, 90, 90, 0.75);
1559 }
1560
1561 .event-bars .event-bar .header::before {
1562     position: absolute;
1563     top: 2px;
1564     left: 7px;
1565     width: 8px;
1566     height: 8px;
1567     opacity: 0.75;
1568     content: url(Images/treeRightTriangleBlack.png);
1569 }
1570
1571 .event-bars .event-bar.expanded .header::before {
1572     content: url(Images/treeDownTriangleBlack.png);
1573 }
1574
1575 .editing {
1576     -webkit-user-select: text;
1577     -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
1578     outline: 1px solid rgb(66%, 66%, 66%) !important;
1579     background-color: white;
1580     -webkit-user-modify: read-write-plaintext-only;
1581     text-overflow: clip !important;
1582     padding-left: 2px;
1583     margin-left: -2px;
1584     padding-right: 2px;
1585     margin-right: -2px;
1586     margin-bottom: -1px;
1587     padding-bottom: 1px;
1588     opacity: 1.0 !important;
1589 }
1590
1591 .editing, .editing * {
1592     color: black !important;
1593     text-decoration: none !important;
1594 }
1595
1596 .child-editing {
1597     color: black !important;
1598     text-decoration: none !important;
1599     overflow: visible !important;
1600 }
1601
1602 .editing br {
1603     display: none;
1604 }
1605
1606 .elements-tree-editor {
1607     -webkit-user-select: text;
1608     -webkit-user-modify: read-write-plaintext-only;
1609 }
1610
1611 .section .properties li.editing {
1612     margin-left: 10px;
1613     text-overflow: clip;
1614 }
1615
1616 li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-button {
1617     display: none !important;
1618 }
1619
1620 .properties-tree.watch-expressions {
1621     padding-bottom: 8px;
1622 }
1623
1624 .properties-tree.watch-expressions li {
1625     padding-top: 2px;
1626 }
1627
1628 .watch-expressions > li.editing-sub-part .name {
1629     display: block; 
1630     width: 100%;
1631 }
1632
1633 .watch-expressions > li.editing-sub-part .value, .watch-expressions > li.editing-sub-part .separator  {
1634     display: none;
1635 }
1636
1637 .watch-expressions-error-level {
1638     color: red;
1639 }
1640
1641 .section .properties li.editing-sub-part {
1642     padding: 3px 6px 8px 18px;
1643     margin: -3px -6px -8px -6px;
1644     text-overflow: clip;
1645 }
1646
1647 .section .properties .delete-button {
1648     width: 10px;
1649     height: 10px;
1650     background-image: url(Images/deleteIcon.png);
1651     background-position: 0 0;
1652     background-color: transparent;
1653     background-repeat: no-repeat;
1654     border: 0 none transparent;
1655     position: absolute;
1656     margin-left: -25px;
1657     margin-top: 2px;
1658     display: none;
1659 }
1660
1661 .section .properties li.hovered .delete-button {
1662     display: inline;
1663 }
1664
1665 .section .properties .name, .event-properties .name {
1666     color: rgb(136, 19, 145);
1667 }
1668
1669 .section .properties .value.dimmed {
1670     color: rgb(100, 100, 100);
1671 }
1672
1673 .section .properties .value.error {
1674     color: red;
1675 }
1676
1677 .section .properties .number, .event-properties .number {
1678     color: blue;
1679 }
1680
1681 .section .properties .keyword, .event-properties .keyword {
1682     color: rgb(136, 19, 79);
1683 }
1684
1685 .section .properties .color, .event-properties .color {
1686     color: rgb(118, 15, 21);
1687 }
1688
1689 .swatch {
1690     display: inline-block;
1691     vertical-align: baseline;
1692     margin-left: 1px;
1693     margin-right: 2px;
1694     margin-bottom: -1px;
1695     width: 1em;
1696     height: 1em;
1697     border: 1px solid rgba(128, 128, 128, 0.6);
1698 }
1699
1700 .swatch:hover {
1701     border: 1px solid rgba(64, 64, 64, 0.8);
1702 }
1703
1704 .pane:not(.expanded) + .pane, .pane:first-of-type {
1705     margin-top: -1px;
1706 }
1707
1708 .pane > .title {
1709     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209)));
1710     height: 20px;
1711     padding: 0 5px;
1712     border-top: 1px solid rgb(189, 189, 189);
1713     border-bottom: 1px solid rgb(189, 189, 189);
1714     font-weight: bold;
1715     font-size: 12px;
1716     line-height: 18px;
1717     color: rgb(110, 110, 110);
1718     text-shadow: white 0 1px 0;
1719     -webkit-background-origin: padding;
1720     -webkit-background-clip: padding;
1721 }
1722
1723 .pane > .title:active {
1724     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(231, 231, 231)), color-stop(0.05, rgb(231, 231, 231)), color-stop(0.05, rgb(207, 207, 207)), to(rgb(186, 186, 186)));
1725     border-top: 1px solid rgb(178, 178, 178);
1726     border-bottom: 1px solid rgb(178, 178, 178);
1727 }
1728
1729 .pane > .title::before {
1730     content: url(Images/disclosureTriangleSmallRightBlack.png);
1731     float: left;
1732     width: 11px;
1733     height: 12px;
1734     margin-right: 2px;
1735     margin-top: 1px;
1736 }
1737
1738 .pane.expanded > .title::before {
1739     content: url(Images/disclosureTriangleSmallDownBlack.png);
1740 }
1741
1742 .pane > .title > select {
1743     float: right;
1744     width: 23px;
1745     height: 17px;
1746     color: transparent;
1747     background-color: transparent;
1748     border: none;
1749     background-image: url(Images/paneSettingsButtons.png);
1750     background-repeat: no-repeat;
1751     margin: 1px 0 0 0;
1752     padding: 0;
1753     -webkit-border-radius: 0;
1754     -webkit-appearance: none;
1755 }
1756
1757 .pane > .title > select:hover {
1758     background-position: -23px 0px;
1759 }
1760
1761 .pane > .title > select:active {
1762     background-position: -46px 0px;
1763 }
1764
1765 .pane > .title > select > option, .pane > .title > select > hr {
1766     color: black;
1767 }
1768
1769 .pane > .title > .pane-title-button {
1770     float: right;
1771     width: 23px;
1772     height: 17px;
1773     color: transparent;
1774     background-color: transparent;
1775     border: none;
1776     background-repeat: no-repeat;
1777     margin: 1px 0 0 0;
1778     padding: 0;
1779     -webkit-border-radius: 0;
1780     -webkit-appearance: none;
1781 }
1782
1783 .pane > .title > .pane-title-button:hover {
1784     background-position: -23px 0px;
1785 }
1786
1787 .pane > .title > .pane-title-button:active {
1788     background-position: -46px 0px;
1789 }
1790
1791 .pane > .title > .pane-title-button.add {
1792     background-image: url(Images/paneAddButtons.png);
1793 }
1794
1795 .pane > .title > .pane-title-button.refresh {
1796     background-image: url(Images/paneRefreshButtons.png);
1797 }
1798
1799 .pane > .body {
1800     position: relative;
1801     display: none;
1802     overflow-y: auto;
1803     overflow-x: hidden;
1804 }
1805
1806 .pane > .body .info {
1807     text-align: center;
1808     font-style: italic;
1809     font-size: 10px;
1810     padding: 6px;
1811     color: black;
1812 }
1813
1814 .pane > .body .placard + .info {
1815     border-top: 1px solid rgb(189, 189, 189);
1816     background-color: rgb(255, 255, 194);
1817 }
1818
1819 .pane.expanded > .body, .pane.expanded > .growbar {
1820     display: block;
1821 }
1822
1823 .pane > .body .breakpoint-condition {
1824     display: block;
1825     margin-top: 4px;
1826     margin-bottom: 4px;
1827     margin-left: 23px;
1828     margin-right: 8px;
1829 }
1830
1831 #breakpoint-condition-input {
1832     display: block;
1833     margin-left: 0;
1834     margin-right: 0;
1835     outline: none !important;
1836     border: 1px solid rgb(66%, 66%, 66%);
1837 }
1838
1839 .pane.expanded:nth-last-of-type(1) {
1840     border-bottom: 1px solid rgb(189, 189, 189);
1841 }
1842
1843 .pane > .growbar {
1844     display: none;
1845     background-image: url(Images/paneGrowHandleLine.png), url(Images/paneBottomGrow.png);
1846     background-repeat: no-repeat, repeat-x;
1847     background-position: center center, bottom;
1848     height: 5px;
1849 }
1850
1851 .sidebar-pane-subtitle {
1852     position: absolute;
1853     right: 0;
1854     font-weight: normal;
1855 }
1856
1857 body.platform-windows .sidebar-pane-subtitle {
1858     padding-top: 1px;
1859 }
1860
1861 .sidebar-pane-subtitle input, .section .header input[type=checkbox] {
1862     font-size: inherit;
1863     hight: 1em;
1864     width: 1em;
1865     margin-left: 0;
1866     margin-top: 0;
1867     margin-bottom: 0.25em;
1868     vertical-align: bottom;
1869 }
1870
1871 .metrics {
1872     padding: 8px;
1873     font-size: 10px;
1874     text-align: center;
1875     white-space: nowrap;
1876 }
1877
1878 .metrics .label {
1879     position: absolute;
1880     margin-top: -10px;
1881     font-size: 9px;
1882     color: grey;
1883     background-color: white;
1884     margin-left: 3px;
1885     padding-left: 2px;
1886     padding-right: 2px;
1887 }
1888
1889 .metrics .hovered > .label {
1890     border: 1px solid black;
1891 }
1892
1893 .metrics .position {
1894     border: 1px rgb(66%, 66%, 66%) dotted;
1895     background-color: white;
1896     display: inline-block;
1897     text-align: center;
1898     padding: 3px;
1899     margin: 3px;
1900 }
1901
1902 .metrics .margin {
1903     border: 1px dashed;
1904     background-color: white;
1905     display: inline-block;
1906     text-align: center;
1907     vertical-align: middle;
1908     padding: 3px;
1909     margin: 3px;
1910 }
1911
1912 .metrics .margin.hovered {
1913     background-color: rgb(139, 182, 221);
1914 }
1915
1916 .metrics .border {
1917     border: 1px black solid;
1918     background-color: white;
1919     display: inline-block;
1920     text-align: center;
1921     vertical-align: middle;
1922     padding: 3px;
1923     margin: 3px;
1924 }
1925
1926 .metrics .border.hovered {
1927     background-color: rgb(157, 193, 226);
1928 }
1929
1930 .metrics .padding {
1931     border: 1px grey dashed;
1932     background-color: white;
1933     display: inline-block;
1934     text-align: center;
1935     vertical-align: middle;
1936     padding: 3px;
1937     margin: 3px;
1938 }
1939
1940 .metrics .padding.hovered {
1941     background-color: rgb(173, 204, 231);
1942 }
1943
1944 .metrics .content {
1945     position: static;
1946     border: 1px grey solid;
1947     background-color: white;
1948     display: inline-block;
1949     text-align: center;
1950     vertical-align: middle;
1951     padding: 3px;
1952     margin: 3px;
1953     min-width: 80px;
1954     text-align: center;
1955     overflow: visible;
1956 }
1957
1958 .metrics .content.hovered {
1959     background-color: rgb(190, 214, 236);
1960 }
1961
1962 .metrics .content span {
1963     display: inline-block;
1964 }
1965
1966 .metrics .editing {
1967     position: relative;
1968     z-index: 100;
1969 }
1970
1971 .metrics .left {
1972     display: inline-block;
1973     vertical-align: middle;
1974 }
1975
1976 .metrics .right {
1977     display: inline-block;
1978     vertical-align: middle;
1979 }
1980
1981 .metrics .top {
1982     display: inline-block;
1983 }
1984
1985 .metrics .bottom {
1986     display: inline-block;
1987 }
1988
1989 .sidebar {
1990     position: absolute;
1991     top: 0;
1992     bottom: 0;
1993     left: 0;
1994     width: 200px;
1995     overflow-y: auto;
1996     overflow-x: hidden;
1997     background-color: rgb(214, 221, 229);
1998     border-right: 1px solid rgb(64%, 64%, 64%);
1999 }
2000
2001 body.inactive .sidebar {
2002     background-color: rgb(232, 232, 232);
2003 }
2004
2005 .frame-storage-tree-item .icon {
2006     content: url(Images/frame.png);
2007 }
2008
2009 .database-storage-tree-item .icon {
2010     content: url(Images/database.png);
2011 }
2012
2013 .database-table-storage-tree-item .icon {
2014     content: url(Images/databaseTable.png);
2015 }
2016
2017 .domstorage-storage-tree-item.local-storage .icon {
2018     content: url(Images/localStorage.png);
2019 }
2020
2021 .domstorage-storage-tree-item.session-storage .icon {
2022     content: url(Images/sessionStorage.png);
2023 }
2024
2025 .cookie-storage-tree-item .icon {
2026     content: url(Images/cookie.png);
2027 }
2028
2029 .application-cache-storage-tree-item .icon {
2030     content: url(Images/applicationCache.png);
2031 }
2032
2033 /* FIXME: Make separate png for file-system */
2034 .file-system-storage-tree-item .icon {
2035     content: url(Images/applicationCache.png);
2036 }
2037
2038 #storage-views {
2039     position: absolute;
2040     top: 0;
2041     right: 0;
2042     left: 200px;
2043     bottom: 0;
2044 }
2045
2046 .resources.panel .sidebar {
2047     padding-left: 0;
2048     z-index: 10;
2049 }
2050
2051 .resources.panel .sidebar li {
2052     height: 17px;
2053     white-space: nowrap;
2054     text-indent: 0;
2055     margin-left: -2px;
2056 }
2057
2058 .resources.panel .sidebar li.parent {
2059     text-indent: 0;
2060     margin-left: -12px;
2061 }
2062
2063 .resources.panel .sidebar li.selected {
2064     color: white;
2065     text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
2066     font-weight: bold;
2067 }
2068
2069 .resources.panel .sidebar li.selected .selection {
2070     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
2071     border-top: 1px solid #979797;
2072     height: 17px;
2073 }
2074
2075 .resources.panel .sidebar :focus li.selected .selection {
2076     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
2077     border-top: 1px solid rgb(68, 128, 200);
2078 }
2079
2080 body.inactive .resources.panel .sidebar li.selected .selection {
2081     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
2082     border-top: 1px solid rgb(151, 151, 151);
2083 }
2084
2085 .resources.panel .sidebar .icon {
2086     width: 16px;
2087     height: 16px;
2088     float: left;
2089 }
2090
2091 .resources.panel .base-storage-tree-element-title {
2092     overflow: hidden;
2093     position: relative;
2094     text-overflow: ellipsis;
2095     padding-left: 2px;
2096     top: 1px;
2097 }
2098
2099 li.selected .base-storage-tree-element-subtitle {
2100     color: white;
2101 }
2102
2103 .base-storage-tree-element-subtitle {
2104     padding-left: 2px;
2105     color: rgb(80, 80, 80);
2106     text-shadow: none;
2107 }
2108
2109 .resources.panel .status {
2110     float: right;
2111     height: 16px;
2112     margin-top: 1px;
2113     margin-left: 4px;
2114     line-height: 1em;
2115 }
2116
2117 .resources.panel li .status .bubble {
2118     height: 13px;
2119     padding-top: 0;
2120 }
2121
2122 .storage-view {
2123     display: none;
2124     overflow: hidden;
2125     position: absolute;
2126     top: 0;
2127     left: 0;
2128     right: 0;
2129     bottom: 0;
2130 }
2131
2132 .storage-view.visible {
2133     display: block;
2134 }
2135
2136 .storage-view {
2137     overflow: hidden;
2138 }
2139
2140 .storage-view .data-grid {
2141     border: none;
2142     height: 100%;
2143 }
2144
2145 .storage-empty-view, .storage-view .storage-table-error {
2146     position: absolute;
2147     top: 0;
2148     bottom: 25%;
2149     left: 0;
2150     right: 0;
2151     font-size: 24px;
2152     color: rgb(75%, 75%, 75%);
2153     margin-top: auto;
2154     margin-bottom: auto;
2155     height: 50px;
2156     line-height: 26px;
2157     text-align: center;
2158     font-weight: bold;
2159     padding: 10px;
2160     white-space: pre-wrap;
2161 }
2162
2163 .storage-view .storage-table-error {
2164     color: rgb(66%, 33%, 33%);
2165 }
2166
2167 .data-grid {
2168     position: relative;
2169     border: 1px solid #aaa;
2170 }
2171
2172 .data-grid .highlight {
2173     background-color: rgb(255, 230, 179);
2174 }
2175
2176 .data-grid tr.selected .highlight {
2177     background-color: transparent;
2178 }
2179
2180 .data-grid table {
2181     table-layout: fixed;
2182     border-spacing: 0;
2183     border-collapse: collapse;
2184     width: 100%;
2185     font-size: 10px;
2186     font-family: Lucida Grande, sans-serif;
2187 }
2188
2189 .data-grid .data-container {
2190     position: absolute;
2191     top: 16px;
2192     bottom: 0;
2193     left: 0;
2194     right: 0;
2195     padding-right: 14px;
2196     overflow-x: hidden;
2197     overflow-y: overlay;
2198 }
2199
2200 .data-grid.inline .data-container {
2201     position: static;
2202 }
2203
2204 .data-grid th {
2205     text-align: left;
2206     background-image: url(Images/glossyHeader.png);
2207     background-repeat: repeat-x;
2208     border-right: 1px solid rgb(179, 179, 179);
2209     border-bottom: 1px solid rgb(179, 179, 179);
2210     height: 15px;
2211     font-weight: normal;
2212     vertical-align: middle;
2213     padding: 0 4px;
2214     white-space: nowrap;
2215 }
2216
2217 .data-grid th.corner {
2218     width: 15px;
2219     border-right: 0 none transparent;
2220 }
2221
2222 .data-grid tr.filler {
2223     display: table-row !important;
2224     height: auto !important;
2225 }
2226
2227 .data-grid tr.filler td {
2228     height: auto !important;
2229     padding: 0 !important;
2230 }
2231
2232 .data-grid table.data {
2233     position: absolute;
2234     left: 0;
2235     top: 0;
2236     right: 16px;
2237     bottom: 0;
2238     height: 100%;
2239     border-top: 0 none transparent;
2240     background-image: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(0.5, white), color-stop(0.5, rgb(234, 243, 255)), to(rgb(234, 243, 255)));
2241     -webkit-background-size: 1px 32px;
2242 }
2243
2244 .data-grid.inline table.data {
2245     position: static;
2246 }
2247
2248 .data-grid table.data tr {
2249     display: none;
2250 }
2251
2252 .data-grid table.data tr.revealed {
2253     display: table-row;
2254 }
2255
2256 .data-grid td {
2257     vertical-align: top;
2258     height: 12px;
2259     line-height: 12px;
2260     padding: 2px 4px;
2261     white-space: nowrap;
2262     border-right: 1px solid #aaa;
2263     -webkit-user-select: text;
2264 }
2265
2266 .data-grid td > div, .data-grid th > div {
2267     white-space: nowrap;
2268     text-overflow: ellipsis;
2269     overflow: hidden;
2270 }
2271
2272 .data-grid .centered div {
2273     text-align: center;
2274 }
2275
2276 .data-grid .right div {
2277     text-align: right;
2278 }
2279
2280 .data-grid th.sortable div {
2281     position: relative;
2282 }
2283
2284 .data-grid th.sortable:active {
2285     background-image: url(Images/glossyHeaderPressed.png);
2286 }
2287
2288 .data-grid th.sort-ascending, .data-grid th.sort-descending {
2289     border-right: 1px solid rgb(107, 140, 196);
2290     border-bottom: 1px solid rgb(107, 140, 196);
2291     background-image: url(Images/glossyHeaderSelected.png);
2292     background-repeat: repeat-x;
2293 }
2294
2295 .data-grid th.sortable.sort-ascending:active, .data-grid th.sortable.sort-descending:active {
2296     background-image: url(Images/glossyHeaderSelectedPressed.png);
2297 }
2298
2299 .data-grid th.sort-ascending > div::after {
2300     position: absolute;
2301     top: 0;
2302     bottom: 0;
2303     right: 0;
2304     height: 12px;
2305     margin-bottom: auto;
2306     margin-top: auto;
2307     width: 8px;
2308     content: url(Images/treeUpTriangleBlack.png);
2309 }
2310
2311 .data-grid th.sort-descending > div::after {
2312     position: absolute;
2313     top: 0;
2314     bottom: 0;
2315     right: 0;
2316     height: 8px;
2317     margin-bottom: auto;
2318     margin-top: auto;
2319     width: 8px;
2320     content: url(Images/treeDownTriangleBlack.png);
2321 }
2322
2323 .data-grid button {
2324     line-height: 19px;
2325 }
2326
2327 body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-descending {
2328     background-image: url(Images/glossyHeader.png);
2329     border-right: 1px solid rgb(179, 179, 179);
2330     border-bottom: 1px solid rgb(179, 179, 179);
2331 }
2332
2333 .data-grid tr.parent td.disclosure::before {
2334     float: left;
2335     content: url(Images/treeRightTriangleBlack.png);
2336     width: 8px;
2337     height: 8px;
2338     margin-right: 2px;
2339     -webkit-user-select: none;
2340 }
2341
2342 .data-grid tr.expanded td.disclosure::before {
2343     content: url(Images/treeDownTriangleBlack.png);
2344     width: 8px;
2345     height: 8px;
2346     margin-top: 1px;
2347 }
2348
2349 .data-grid tr.selected {
2350     background-color: rgb(212, 212, 212);
2351     color: inherit;
2352 }
2353
2354 .data-grid:focus tr.selected {
2355     background-color: rgb(56, 121, 217);
2356     color: white;
2357 }
2358
2359 .data-grid:focus tr.parent.selected td.disclosure::before {
2360     content: url(Images/treeRightTriangleWhite.png);
2361 }
2362
2363 .data-grid:focus tr.expanded.selected td.disclosure::before {
2364     content: url(Images/treeDownTriangleWhite.png);
2365 }
2366
2367 .data-grid tr:not(.parent) td.disclosure {
2368     text-indent: 10px;
2369 }
2370
2371 .data-grid-resizer {
2372     position: absolute;
2373     top: 0;
2374     bottom: 0;
2375     width: 5px;
2376     z-index: 500;
2377     cursor: col-resize;
2378 }
2379
2380 .storage-view.query {
2381     padding: 2px 0;
2382     overflow-y: overlay;
2383     overflow-x: hidden;
2384     -webkit-text-size-adjust: auto;
2385 }
2386
2387 .database-query-prompt {
2388     position: relative;
2389     padding: 1px 22px 1px 24px;
2390     min-height: 16px; 
2391     white-space: pre-wrap;
2392     -webkit-user-modify: read-write-plaintext-only;
2393     -webkit-user-select: text;
2394 }
2395
2396 .database-user-query::before, .database-query-prompt::before, .database-query-result::before {
2397     position: absolute;
2398     display: block;
2399     content: "";
2400     left: 7px;
2401     top: 0.8em;
2402     width: 10px;
2403     height: 10px;
2404     margin-top: -5px;
2405     -webkit-user-select: none;
2406 }
2407
2408 .database-query-prompt::before {
2409     background-image: url(Images/userInputIcon.png);
2410 }
2411
2412 .database-user-query {
2413     position: relative;
2414     border-bottom: 1px solid rgb(245, 245, 245);
2415     padding: 1px 22px 1px 24px;
2416     min-height: 16px; 
2417 }
2418
2419 .database-user-query::before {
2420     background-image: url(Images/userInputPreviousIcon.png);
2421 }
2422
2423 .database-query-text {
2424     color: rgb(0, 128, 255);
2425     -webkit-user-select: text;
2426 }
2427
2428 .database-query-result {
2429     position: relative;
2430     padding: 1px 22px 1px 24px;
2431     min-height: 16px;
2432     margin-left: -24px;
2433     padding-right: 0;
2434 }
2435
2436 .database-query-result.error {
2437     color: red;
2438     -webkit-user-select: text;
2439 }
2440
2441 .database-query-result.error::before {
2442     background-image: url(Images/errorIcon.png);
2443 }
2444
2445 .panel-enabler-view {
2446     z-index: 1000;
2447     position: absolute;
2448     top: 0;
2449     left: 0;
2450     right: 0;
2451     bottom: 0;
2452     background-color: white;
2453     font-size: 13px;
2454     text-align: center;
2455     overflow-x: hidden;
2456     overflow-y: overlay;
2457     display: none;
2458 }
2459
2460 .panel-enabler-view.visible {
2461     display: block;
2462 }
2463
2464 .panel-enabler-view .panel-enabler-view-content {
2465     position: absolute;
2466     top: 0;
2467     left: 0;
2468     right: 0;
2469     bottom: 0;
2470     max-height: 390px;
2471     margin: auto;
2472     white-space: nowrap;
2473 }
2474
2475 .panel-enabler-view h1 {
2476     color: rgb(110, 116, 128);
2477     font-size: 16px;
2478     line-height: 20px;
2479     font-weight: normal;
2480     margin-top: 0;
2481 }
2482
2483 .panel-enabler-disclaimer {
2484     font-size: 10px;
2485     color: rgb(110, 116, 128);
2486     margin-bottom: 12px;
2487     margin-left: 20px;
2488 }
2489
2490 .panel-enabler-disclaimer:empty {
2491     display: none;
2492 }
2493
2494 .panel-enabler-view img, div.welcome-instructions-aligner {
2495     height: 100%;
2496     min-height: 200px;
2497     max-width: 100%;
2498     top: 0;
2499     bottom: 0;
2500     padding: 20px 0 20px 20px;
2501     margin: auto;
2502     vertical-align: middle;
2503 }
2504
2505 .panel-enabler-view img.hidden {
2506     display: initial !important;
2507     width: 0;
2508 }
2509
2510 .panel-enabler-view form {
2511     display: inline-block;
2512     vertical-align: middle;
2513     width: 330px;
2514     margin: 0;
2515     padding: 15px;
2516     white-space: normal;
2517 }
2518
2519 .panel-enabler-view label {
2520     position: relative;
2521     display: block;
2522     text-align: left;
2523     word-break: break-word;
2524     margin: 0 0 5px 20px;
2525 }
2526
2527 .panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes {
2528     color: rgb(6, 6, 6);
2529     background-color: transparent;
2530     border: 1px solid rgb(165, 165, 165);
2531     background-color: rgb(237, 237, 237);
2532     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
2533     -webkit-border-radius: 12px;
2534     -webkit-appearance: none;
2535 }
2536
2537 .panel-enabler-view button:not(.status-bar-item) {
2538     font-size: 13px;
2539     margin: 6px 0 0 0;
2540     padding: 3px 20px;
2541     height: 24px;
2542 }
2543
2544 button.show-all-nodes {
2545     font-size: 13px;
2546     margin: 0;
2547     padding: 0 20px;
2548     height: 20px;
2549 }
2550
2551 .panel-enabler-view.welcome {
2552     z-index: auto;
2553 }
2554
2555 .panel-enabler-view.welcome div.welcome-instructions-aligner {
2556     display: inline-block;
2557     width: 0;
2558 }
2559
2560 .panel-enabler-view.welcome .instructions {
2561     display: inline-block;
2562     vertical-align: middle;
2563     margin: 0;
2564     white-space: normal;
2565     line-height: 175%;
2566 }
2567
2568 .panel-enabler-view.welcome .message {
2569     margin-bottom: 2ex;
2570 }
2571
2572 .panel-enabler-view.welcome button.status-bar-item {
2573     background-image: none;
2574     vertical-align: top;
2575 }
2576
2577 .pane button {
2578     margin: 6px 0 6px 3px;
2579     padding: 2px 9px;
2580 }
2581
2582 .panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active {
2583     background-color: rgb(215, 215, 215);
2584     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
2585 }
2586
2587 body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive .pane button, .pane button:disabled, body.inactive button.show-all-nodes {
2588     color: rgb(130, 130, 130);
2589     border-color: rgb(212, 212, 212);
2590     background-color: rgb(239, 239, 239);
2591     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(235, 235, 235)));
2592 }
2593
2594 .panel-enabler-view input {
2595     height: 17px;
2596     width: 17px;
2597     border: 1px solid rgb(165, 165, 165);
2598     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
2599     -webkit-border-radius: 8px;
2600     -webkit-appearance: none;
2601     vertical-align: middle;
2602     margin: 0 5px 5px 0;
2603 }
2604
2605 .panel-enabler-view input:active {
2606     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
2607 }
2608
2609 .panel-enabler-view input:checked {
2610     background: url(Images/radioDot.png) center no-repeat,
2611                 -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
2612 }
2613
2614 .panel-enabler-view.scripts img {
2615     content: url(Images/scriptsSilhouette.png);
2616 }
2617
2618 .panel-enabler-view.profiles img {
2619     content: url(Images/profilesSilhouette.png);
2620 }
2621
2622 button.enable-toggle-status-bar-item .glyph {
2623     -webkit-mask-position: -192px 0;
2624 }
2625
2626 button.enable-toggle-status-bar-item.toggled-on .glyph {
2627     -webkit-mask-position: -96px -24px;
2628 }
2629
2630 .scripts-pause-on-exceptions-status-bar-item .glyph {
2631     -webkit-mask-position: -256px 0;
2632 }
2633
2634 .scripts-pause-on-exceptions-status-bar-item.toggled-all .glyph {
2635     background-color: rgb(66, 129, 235);
2636 }
2637
2638 .scripts-pause-on-exceptions-status-bar-item.toggled-uncaught .glyph {
2639     background-color: purple;   
2640 }
2641
2642 .scripts-toggle-pretty-print-status-bar-item .glyph {
2643     -webkit-mask-position: -256px -24px;
2644 }
2645
2646 .scripts-toggle-pretty-print-status-bar-item.toggled .glyph {
2647     background-color: rgb(66, 129, 235);
2648 }
2649
2650 #scripts-status-bar {
2651     position: absolute;
2652     top: -1px;
2653     left: 0;
2654     right: 0;
2655     height: 24px;
2656 }
2657
2658 #scripts-files {
2659     max-width: 250px;
2660 }
2661
2662 #scripts-files option.extension-script {
2663     color: rgb(70, 134, 240);
2664 }
2665
2666 #scripts-functions {
2667     max-width: 150px;
2668 }
2669
2670 #scripts-status-bar .status-bar-item img {
2671     margin-top: 2px;
2672 }
2673
2674 #scripts-back img {
2675     content: url(Images/back.png);
2676 }
2677
2678 #scripts-forward img {
2679     content: url(Images/forward.png);
2680 }
2681
2682 #scripts-pause img {
2683     content: url(Images/debuggerPause.png);
2684 }
2685
2686 #scripts-pause.paused img {
2687     content: url(Images/debuggerContinue.png);
2688 }
2689
2690 #scripts-step-over img {
2691     content: url(Images/debuggerStepOver.png);
2692 }
2693
2694 #scripts-step-into img {
2695     content: url(Images/debuggerStepInto.png);
2696 }
2697
2698 #scripts-step-out img {
2699     content: url(Images/debuggerStepOut.png);
2700 }
2701
2702 .toggle-breakpoints .glyph {
2703     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
2704     -webkit-mask-position: -32px 0;
2705     background-color: rgb(96, 96, 96) !important;
2706 }
2707
2708 .toggle-breakpoints.toggled-on .glyph {
2709     -webkit-mask-position: 0 -24px;
2710 }
2711
2712 #scripts-debugger-status {
2713     position: absolute;
2714     line-height: 24px;
2715     top: 0;
2716     right: 8px;
2717 }
2718
2719 #scripts-sidebar-resizer-widget {
2720     position: absolute;
2721     top: 0;
2722     bottom: 0;
2723     right: 225px;
2724     width: 16px;
2725     cursor: ew-resize;
2726     background-image: url(Images/statusbarResizerHorizontal.png);
2727     background-repeat: no-repeat;
2728     background-position: center;
2729 }
2730
2731 #scripts-sidebar-buttons {
2732     position: absolute;
2733     right: 0;
2734     top: 0;
2735     bottom: 0;
2736     width: 225px;
2737     overflow: hidden;
2738     border-left: 1px solid rgb(64%, 64%, 64%);
2739 }
2740
2741 #script-resource-views {
2742     display: block;
2743     padding: 0;
2744     position: absolute;
2745     top: 23px;
2746     left: 0;
2747     right: 225px;
2748     bottom: 0;
2749 }
2750
2751 .script-view {
2752     display: none;
2753     overflow: hidden;
2754     position: absolute;
2755     top: 0;
2756     left: 0;
2757     right: 0;
2758     bottom: 0;
2759 }
2760
2761 .script-view.visible {
2762     display: block;
2763 }
2764
2765 #scripts-sidebar {
2766     position: absolute;
2767     top: 23px;
2768     right: 0;
2769     bottom: 0;
2770     width: 225px;
2771     border-left: 1px solid rgb(64%, 64%, 64%);
2772     cursor: default;
2773     overflow: auto;
2774 }
2775
2776 .resources-larger-resources-status-bar-item .glyph {
2777     -webkit-mask-position: -224px 0;
2778 }
2779
2780 #resources-filter, #console-filter.console-filter-top {
2781     background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
2782     border-bottom: 1px solid rgb(64%, 64%, 64%);
2783     width: 100%;
2784 }
2785
2786 #console-messages.console-filter-top {
2787     margin-top: 23px;
2788 }
2789
2790 #console-filter {
2791     margin-top: 1px;
2792 }
2793
2794 .tabbed-pane {
2795     -webkit-box-orient: vertical;
2796     height: 100%;
2797 }
2798
2799 .tabbed-pane-content {
2800     -webkit-box-flex: 1;
2801     position: relative;
2802 }
2803
2804 .tabbed-pane-header {
2805     height: 23px;
2806     padding: 0 10px;
2807     border-bottom: 1px solid rgb(163, 163, 163);
2808 }
2809
2810 .tabbed-pane-header li {
2811     display: inline-block;
2812     margin-top: 2px;
2813     font-size: 11px;
2814     font-weight: bold;
2815     color: rgb(46, 46, 46);
2816     background: transparent;
2817     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
2818     vertical-align: middle;
2819     padding: 3px 7px 2px;
2820     height: 21px;
2821     border: 1px solid transparent;
2822     border-bottom: none;
2823 }
2824
2825 .tabbed-pane-header li.selected {
2826     background-color: white;
2827     border: 1px solid rgb(163, 163, 163);
2828     border-bottom: none;
2829 }
2830
2831 .scope-bar {
2832     height: 23px;
2833     padding: 2px 10px 0;
2834     overflow: hidden;
2835 }
2836
2837 .scope-bar li {
2838     display: inline-block;
2839     margin: 1px 2px 0 0;
2840     padding: 1px 7px 3px;
2841     font-size: 11px;
2842     line-height: 12px;
2843     font-weight: bold;
2844     color: rgb(46, 46, 46);
2845     background: transparent;
2846     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
2847     -webkit-border-radius: 8px;
2848     vertical-align: middle;
2849 }
2850
2851 .scope-bar-divider {
2852     margin: 1px 9px 0 8px;
2853     background-color: rgba(0, 0, 0, 0.4);
2854     height: 16px;
2855     width: 1px;
2856     vertical-align: middle;
2857     display: inline-block;
2858 }
2859
2860 .scope-bar li.selected, .scope-bar li:hover, .scope-bar li:active {
2861     color: white;
2862     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
2863 }
2864
2865 .scope-bar li:hover {
2866     background: rgba(0, 0, 0, 0.2);
2867 }
2868
2869 .scope-bar li.selected {
2870     background: rgba(0, 0, 0, 0.3);
2871     -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);
2872 }
2873
2874 .scope-bar li:active {
2875     background: rgba(0, 0, 0, 0.5);
2876     -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);
2877 }
2878
2879 #resources-container {
2880     position: absolute;
2881     top: 23px;
2882     left: 0;
2883     bottom: 0;
2884     right: 0;
2885     border-right: 0 none transparent;
2886     overflow-y: auto;
2887     overflow-x: hidden;
2888 }
2889
2890 #resources-container.viewing-resource {
2891     right: auto;
2892     width: 200px;
2893     border-right: 1px solid rgb(64%, 64%, 64%);
2894 }
2895
2896 #resources-container.viewing-resource #resources-sidebar {
2897     width: 100%;
2898     border-right: 0 none transparent;
2899 }
2900
2901 #resources-sidebar {
2902     min-height: 100%;
2903     bottom: auto;
2904     overflow: visible;
2905 }
2906
2907 #resources-container-content {
2908     position: absolute;
2909     top: 0;
2910     right: 0;
2911     left: 200px;
2912     min-height: 100%;
2913 }
2914
2915 #resources-container.viewing-resource #resources-container-content {
2916     display: none;
2917 }
2918
2919 #resources-summary {
2920     position: absolute;
2921     padding-top: 20px;
2922     top: 0;
2923     left: 0;
2924     right: 0;
2925     height: 93px;
2926     margin-left: -1px;
2927     border-left: 1px solid rgb(102, 102, 102);
2928     background-color: rgb(101, 111, 130);
2929     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
2930     background-repeat: repeat-x;
2931     background-position: bottom;
2932     text-align: center;
2933     text-shadow: black 0 1px 1px;
2934     white-space: nowrap;
2935     color: white;
2936     -webkit-background-size: 1px 6px;
2937     -webkit-background-origin: padding;
2938     -webkit-background-clip: padding;
2939     z-index: 400;
2940 }
2941
2942 .summary-graph-legend {
2943     margin-top: -10px;
2944     padding-left: 15px;
2945 }
2946
2947 .summary-graph-legend-item {
2948     display: inline-block;
2949     font-weight: bold;
2950     margin-right: 15px;
2951     vertical-align: top;
2952 }
2953
2954 .summary-graph-legend-item.total {
2955     margin-left: 10px;
2956 }
2957
2958 .summary-graph-legend-label {
2959     display: inline-block;
2960     text-align: left;
2961 }
2962
2963 .summary-graph-legend-header {
2964     font-size: 12px;
2965 }
2966
2967 .summary-graph-legend-value {
2968     font-size: 10px;
2969 }
2970
2971 .summary-graph-legend-swatch {
2972     vertical-align: top;
2973     margin-top: 1px;
2974     margin-right: 3px;
2975 }
2976
2977 .resources-dividers {
2978     position: absolute;
2979     left: 0;
2980     right: 0;
2981     height: 100%;
2982     top: 0;
2983     z-index: -100;
2984 }
2985
2986 .resources-event-dividers {
2987     position: absolute;
2988     left: 0;
2989     right: 5px;
2990     height: 100%;
2991     top: 0;
2992     z-index: 300;
2993     pointer-events: none;
2994 }
2995
2996 .timeline .resources-event-dividers {
2997     height: 19px;
2998 }
2999
3000 .resources-dividers-label-bar {
3001     position: absolute;
3002     top: 0;
3003     left: 0px;
3004     right: 0;
3005     background-color: rgba(255, 255, 255, 0.8);
3006     background-clip: padding;
3007     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
3008     height: 20px;
3009     z-index: 200;
3010 }
3011
3012 .resources-divider {
3013     position: absolute;
3014     width: 1px;
3015     top: 0;
3016     bottom: 0;
3017     background-color: rgba(0, 0, 0, 0.1);
3018 }
3019
3020 .resources-event-divider-padding {
3021     position: absolute;
3022     width: 8px;
3023     top: 0;
3024     bottom: 0;
3025     pointer-events: auto;
3026 }
3027
3028 .resources-event-divider {
3029     position: absolute;
3030     width: 2px;
3031     top: 0;
3032     bottom: 0;
3033     z-index: 300;
3034 }
3035
3036 .resources-red-divider {
3037     background-color: rgba(255, 0, 0, 0.5);
3038 }
3039
3040 .resources-blue-divider {
3041     background-color: rgba(0, 0, 255, 0.5);
3042 }
3043
3044 .resources-orange-divider {
3045     background-color: rgba(255, 178, 23, 0.5);
3046 }
3047
3048 .resources-divider.last {
3049     background-color: transparent;
3050 }
3051
3052 .resources-divider-label {
3053     position: absolute;
3054     top: 4px;
3055     right: 3px;
3056     font-size: 9px;
3057     color: rgb(50%, 50%, 50%);
3058     white-space: nowrap;
3059 }
3060
3061 .memory-graph-label {
3062     position: absolute;
3063     top: 5px;
3064     left: 5px;
3065     font-size: 9px;
3066     color: rgb(50%, 50%, 50%);
3067     white-space: nowrap;
3068 }
3069
3070 .resources-graph-label {
3071     position: absolute;
3072     top: 0;
3073     bottom: 0;
3074     margin: auto -7px;
3075     height: 13px;
3076     line-height: 13px;
3077     font-size: 9px;
3078     color: rgba(0, 0, 0, 0.75);
3079     text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
3080     z-index: 150;
3081     overflow: hidden;
3082     text-align: center;
3083     font-weight: bold;
3084     opacity: 0;
3085     -webkit-transition: opacity 250ms ease-in-out;
3086 }
3087
3088 .resources-graph-side:hover .resources-graph-label {
3089     opacity: 1;
3090 }
3091
3092 .resources-graph-label:empty {
3093     display: none;
3094 }
3095
3096 .resources-graph-label.waiting {
3097     margin-right: 5px;
3098 }
3099
3100 .resources-graph-label.waiting-right {
3101     margin-left: 5px;
3102 }
3103
3104 .resources-graph-label.before {
3105     color: rgba(0, 0, 0, 0.7);
3106     text-shadow: none;
3107     text-align: right;
3108     margin-right: 2px;
3109 }
3110
3111 .resources-graph-label.before::after {
3112     padding-left: 2px;
3113     height: 6px;
3114     content: url(Images/graphLabelCalloutLeft.png);
3115 }
3116
3117 .resources-graph-label.after {
3118     color: rgba(0, 0, 0, 0.7);
3119     text-shadow: none;
3120     text-align: left;
3121     margin-left: 2px;
3122 }
3123
3124 .resources-graph-label.after::before {
3125     padding-right: 2px;
3126     height: 6px;
3127     content: url(Images/graphLabelCalloutRight.png);
3128 }
3129
3130 .resources-graph-bar {
3131     position: absolute;
3132     top: 0;
3133     bottom: 0;
3134     margin: auto -7px;
3135     border-width: 6px 7px;
3136     height: 13px;
3137     min-width: 14px;
3138     opacity: 0.65;
3139     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
3140 }
3141
3142 .resources-category-documents, .resources-category-stylesheets, .resources-category-images,
3143 .resources-category-scripts, .resources-category-xhr, .resources-category-fonts,
3144 .resources-category-websockets, .resources-category-other {
3145     display: none;
3146 }
3147
3148 .filter-all .resources-category-documents, .filter-documents .resources-category-documents,
3149 .filter-all .resources-category-stylesheets, .filter-stylesheets .resources-category-stylesheets,
3150 .filter-all .resources-category-images, .filter-images .resources-category-images,
3151 .filter-all .resources-category-scripts, .filter-scripts .resources-category-scripts,
3152 .filter-all .resources-category-xhr, .filter-xhr .resources-category-xhr,
3153 .filter-all .resources-category-fonts, .filter-fonts .resources-category-fonts,
3154 .filter-all .resources-category-websockets, .filter-websockets .resources-category-websockets,
3155 .filter-all .resources-category-other, .filter-other .resources-category-other,
3156 .resource-sidebar-tree-item.selected {
3157     display: list-item;
3158 }
3159
3160 .console-warning-level, .console-error-level, .console-log-level {
3161     display: none;
3162 }
3163
3164 .filter-all .console-warning-level, .filter-warnings .console-warning-level,
3165 .filter-all .console-error-level, .filter-errors .console-error-level,
3166 .filter-all .console-log-level, .filter-logs .console-log-level {
3167     display: block;
3168 }
3169
3170 .console-user-command-result {
3171     display: block;
3172 }
3173
3174 .resources-graph-bar.waiting, .resources-graph-bar.waiting-right {
3175     opacity: 0.35;
3176 }
3177
3178 .resource-cached .resources-graph-bar {
3179     -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
3180 }
3181
3182 .resources-category-documents .resources-graph-bar {
3183     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
3184 }
3185
3186 .resources-category-documents.resource-cached .resources-graph-bar {
3187     -webkit-border-image: url(Images/timelineHollowPillBlue.png) 6 7 6 7;
3188 }
3189
3190 .resources-category-stylesheets .resources-graph-bar {
3191     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
3192 }
3193
3194 .resources-category-stylesheets.resource-cached .resources-graph-bar {
3195     -webkit-border-image: url(Images/timelineHollowPillGreen.png) 6 7 6 7;
3196 }
3197
3198 .resources-category-images .resources-graph-bar {
3199     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
3200 }
3201
3202 .resources-category-images.resource-cached .resources-graph-bar {
3203     -webkit-border-image: url(Images/timelineHollowPillPurple.png) 6 7 6 7;
3204 }
3205
3206 .resources-category-fonts .resources-graph-bar {
3207     -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7;
3208 }
3209
3210 .resources-category-fonts.resource-cached .resources-graph-bar {
3211     -webkit-border-image: url(Images/timelineHollowPillRed.png) 6 7 6 7;
3212 }
3213
3214 .resources-category-scripts .resources-graph-bar {
3215     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
3216 }
3217
3218 .resources-category-scripts.resource-cached .resources-graph-bar {
3219     -webkit-border-image: url(Images/timelineHollowPillOrange.png) 6 7 6 7;
3220 }
3221
3222 .resources-category-xhr .resources-graph-bar {
3223     -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
3224 }
3225
3226 .resources-category-xhr.resource-cached .resources-graph-bar {
3227     -webkit-border-image: url(Images/timelineHollowPillYellow.png) 6 7 6 7;
3228 }
3229
3230 /* FIXME: Create bar images for WebSocket. */
3231 .resources-category-websockets .resources-graph-bar {
3232     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
3233 }
3234
3235 .resources-category-websockets.resource-cached .resources-graph-bar {
3236    -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
3237 }
3238
3239 #resource-views {
3240     position: absolute;
3241     top: 23px;
3242     right: 0;
3243     left: 200px;
3244     bottom: 0;
3245 }
3246
3247 .source-view-frame {
3248     width: 100%;
3249     height: 100%;
3250 }
3251
3252 .sidebar-resizer-vertical {
3253     position: absolute;
3254     top: 0;
3255     bottom: 0;
3256     width: 5px;
3257     z-index: 500;
3258     cursor: ew-resize;
3259 }
3260
3261 .resources .sidebar-resizer-vertical {
3262     top: 23px;
3263 }
3264
3265 .sidebar-tree, .sidebar-tree .children {
3266     position: relative;
3267     padding: 0;
3268     margin: 0;
3269     list-style: none;
3270     font-size: 11px;
3271 }
3272
3273 .sidebar-tree-section {
3274     position: relative;
3275     height: 18px;
3276     padding: 4px 10px 6px 10px;
3277     white-space: nowrap;
3278     margin-top: 1px;
3279     color: rgb(92, 110, 129);
3280     font-weight: bold;
3281     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
3282 }
3283
3284 .sidebar-tree-item {
3285     position: relative;
3286     height: 36px;
3287     padding: 0 5px 0 5px;
3288     white-space: nowrap;
3289     margin-top: 1px;
3290     line-height: 34px;
3291     border-top: 1px solid transparent;
3292 }
3293
3294 .sidebar-tree .children {
3295     display: none;
3296 }
3297
3298 .sidebar-tree .children.expanded {
3299     display: block;
3300 }
3301
3302 .sidebar-tree-section + .children > .sidebar-tree-item {
3303     padding-left: 10px !important;
3304 }
3305
3306 .sidebar-tree-section + .children.small > .sidebar-tree-item {
3307     padding-left: 17px !important;
3308 }
3309
3310 .sidebar-tree > .children > .sidebar-tree-item {
3311     padding-left: 37px;
3312 }
3313
3314 .sidebar-tree > .children > .children > .sidebar-tree-item {
3315     padding-left: 37px;
3316 }
3317
3318 .sidebar-tree.hide-disclosure-buttons > .children {
3319     display: none;
3320 }
3321
3322 .sidebar-tree > .children.hide-disclosure-buttons > .children {
3323     display: none;
3324 }
3325
3326 .sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
3327     margin-left: 16px;
3328 }
3329
3330 .sidebar-tree-item .disclosure-button {
3331     float: left;
3332     width: 16px;
3333     height: 100%;
3334     border: 0;
3335     background-color: transparent;
3336     background-image: url(Images/disclosureTriangleSmallRight.png);
3337     background-repeat: no-repeat;
3338     background-position: center;
3339     -webkit-apearance: none;
3340 }
3341
3342 .sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
3343     display: none;
3344 }
3345
3346 body.inactive .sidebar-tree-item .disclosure-button {
3347     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
3348 }
3349
3350 body.inactive .sidebar-tree-item.expanded .disclosure-button {
3351     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
3352 }
3353
3354 body.inactive .sidebar-tree-item .disclosure-button:active {
3355     background-image: url(Images/disclosureTriangleSmallRightDownBlack.png);
3356 }
3357
3358 .sidebar-tree-item.selected .disclosure-button {
3359     background-image: url(Images/disclosureTriangleSmallRightWhite.png) !important;
3360 }
3361
3362 .sidebar-tree-item.expanded .disclosure-button {
3363     background-image: url(Images/disclosureTriangleSmallDown.png);
3364 }
3365
3366 .sidebar-tree-item.selected.expanded .disclosure-button {
3367     background-image: url(Images/disclosureTriangleSmallDownWhite.png) !important;
3368 }
3369
3370 .sidebar-tree-item.selected .disclosure-button:active {
3371     background-image: url(Images/disclosureTriangleSmallRightDownWhite.png) !important;
3372 }
3373
3374 .sidebar-tree-item .disclosure-button:active {
3375     background-image: url(Images/disclosureTriangleSmallRightDown.png);
3376 }
3377
3378 .sidebar-tree-item .icon {
3379     float: left;
3380     width: 32px;
3381     height: 32px;
3382     margin-top: 1px;
3383     margin-right: 3px;
3384 }
3385
3386 li .status {
3387     float: right;
3388     height: 16px;
3389     margin-top: 9px;
3390     margin-left: 4px;
3391     line-height: 1em;
3392 }
3393
3394 li .status:empty {
3395     display: none;
3396 }
3397
3398 li .status .bubble {
3399     display: inline-block;
3400     height: 14px;
3401     min-width: 16px;
3402     margin-top: 1px;
3403     background-color: rgb(128, 151, 189);
3404     vertical-align: middle;
3405     white-space: nowrap;
3406     padding: 1px 4px;
3407     text-align: center;
3408     font-size: 11px;
3409     line-height: normal;
3410     font-family: Helvetica, Arial, sans-serif;
3411     font-weight: bold;
3412     text-shadow: none;
3413     color: white;
3414     -webkit-border-radius: 7px;
3415 }
3416
3417 li .status .bubble:empty {
3418     display: none;
3419 }
3420
3421 li.selected .status .bubble {
3422     background-color: white !important;
3423     color: rgb(132, 154, 190) !important;
3424 }
3425
3426 :focus li.selected .status .bubble {
3427     color: rgb(36, 98, 172) !important;
3428 }
3429
3430 body.inactive li.selected .status .bubble {
3431     color: rgb(159, 159, 159) !important;
3432 }
3433
3434 .sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small, .small .resources-graph-side {
3435     height: 20px;
3436 }
3437
3438 .sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
3439     width: 16px;
3440     height: 16px;
3441 }
3442
3443 .sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status {
3444     margin-top: 1px;
3445 }
3446
3447 .sidebar-tree-item.selected {
3448     color: white;
3449     border-top: 1px solid rgb(145, 160, 192);
3450     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
3451     text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
3452     font-weight: bold;
3453     -webkit-background-origin: padding;
3454     -webkit-background-clip: padding;
3455 }
3456
3457 :focus .sidebar-tree-item.selected {
3458     border-top: 1px solid rgb(68, 128, 200);
3459     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
3460 }
3461
3462 body.inactive .sidebar-tree-item.selected {
3463     border-top: 1px solid rgb(151, 151, 151);
3464     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
3465 }
3466
3467 .sidebar-tree-item .titles {
3468     position: relative;
3469     top: 5px;
3470     line-height: 11px;
3471     padding-bottom: 1px;
3472     text-overflow: ellipsis;
3473     overflow: hidden;
3474     white-space: nowrap;
3475 }
3476
3477 .sidebar-tree-item .titles.no-subtitle {
3478     top: 10px;
3479 }
3480
3481 .sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
3482     top: 2px;
3483     line-height: normal;
3484 }
3485
3486 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
3487     content: "\A";
3488     white-space: pre;
3489 }
3490
3491 .sidebar-tree-item .subtitle {
3492     font-size: 9px;
3493     color: rgba(0, 0, 0, 0.7);
3494 }
3495
3496 .sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
3497     display: none;
3498 }
3499
3500 .sidebar-tree-item.selected .subtitle {
3501     color: rgba(255, 255, 255, 0.9);
3502 }
3503
3504 #resources-graphs {
3505     position: absolute;
3506     left: 0;
3507     right: 0;
3508     max-height: 100%;
3509     top: 112px;
3510 }
3511
3512 .resources-graph-side {
3513     position: relative;
3514     height: 36px;
3515     padding: 0 5px;
3516     white-space: nowrap;
3517     margin-top: 1px;
3518     border-top: 1px solid transparent;
3519     overflow: hidden;
3520 }
3521
3522 .resources-graph-bar-area {
3523     position: absolute;
3524     top: 0;
3525     bottom: 0;
3526     right: 8px;
3527     left: 9px;
3528 }
3529
3530 #resources-container:not(.viewing-resource) .resource-sidebar-tree-item:nth-of-type(2n) {
3531     background-color: rgba(0, 0, 0, 0.05);
3532 }
3533
3534 #resources-container:not(.viewing-resource) .resources-graph-side:nth-of-type(2n) {
3535     background-color: rgba(0, 0, 0, 0.05);
3536 }
3537
3538 .resources-time-graph-sidebar-item .icon {
3539     content: url(Images/resourcesTimeGraphIcon.png);
3540 }
3541
3542 .resources-size-graph-sidebar-item .icon {
3543     content: url(Images/resourcesSizeGraphIcon.png);
3544 }
3545
3546 .resources-size-graph-sidebar-item .icon {
3547     content: url(Images/resourcesSizeGraphIcon.png);
3548 }
3549
3550 .resource-sidebar-tree-item .icon {
3551     content: url(Images/resourcePlainIcon.png);
3552 }
3553
3554 .children.small .resource-sidebar-tree-item .icon {
3555     content: url(Images/resourcePlainIconSmall.png);
3556 }
3557
3558 .resource-sidebar-tree-item.resources-category-documents .icon {
3559     content: url(Images/resourceDocumentIcon.png);
3560 }
3561
3562 .children.small .resource-sidebar-tree-item.resources-category-documents .icon {
3563     content: url(Images/resourceDocumentIconSmall.png);
3564 }
3565
3566 .resource-sidebar-tree-item.resources-category-stylesheets .icon {
3567     content: url(Images/resourceCSSIcon.png);
3568 }
3569
3570 .children.small .resource-sidebar-tree-item.resources-category-stylesheets .icon {
3571     content: url(Images/resourceDocumentIconSmall.png);
3572 }
3573
3574 .resource-sidebar-tree-item.resources-category-images .icon {
3575     position: relative;
3576     background-image: url(Images/resourcePlainIcon.png);
3577     background-repeat: no-repeat;
3578     content: "";
3579 }
3580
3581 .resources-category-images .image-resource-icon-preview {
3582     position: absolute;
3583     margin: auto;
3584     top: 3px;
3585     bottom: 4px;
3586     left: 5px;
3587     right: 5px;
3588     max-width: 18px;
3589     max-height: 21px;
3590     min-width: 1px;
3591     min-height: 1px;
3592 }
3593
3594 .children.small .resource-sidebar-tree-item.resources-category-images .icon {
3595     background-image: url(Images/resourcePlainIconSmall.png);
3596     content: "";
3597 }
3598
3599 .children.small .resources-category-images .image-resource-icon-preview {
3600     top: 2px;
3601     bottom: 1px;
3602     left: 3px;
3603     right: 3px;
3604     max-width: 8px;
3605     max-height: 11px;
3606 }
3607
3608 .resource-sidebar-tree-item.resources-category-fonts .icon {
3609     content: url(Images/resourcePlainIcon.png);
3610 }
3611
3612 .children.small .resource-sidebar-tree-item.resources-category-fonts .icon {
3613     content: url(Images/resourcePlainIconSmall.png);
3614 }
3615
3616 .resource-sidebar-tree-item.resources-category-scripts .icon {
3617     content: url(Images/resourceJSIcon.png);
3618 }
3619
3620 .children.small .resource-sidebar-tree-item.resources-category-scripts .icon {
3621     content: url(Images/resourceDocumentIconSmall.png);
3622 }
3623
3624 .resource-sidebar-tree-item.resources-category-xhr .icon {
3625     content: url(Images/resourcePlainIcon.png);
3626 }
3627
3628 .children.small .resource-sidebar-tree-item.resources-category-xhr .icon {
3629     content: url(Images/resourceDocumentIconSmall.png);
3630 }
3631
3632 .bubble.debug, .console-debug-level .bubble {
3633     background-color: rgb(0, 0, 255) !important;
3634 }
3635
3636 .bubble.warning, .console-warning-level .bubble {
3637     background-color: rgb(232, 164, 0) !important;
3638 }
3639
3640 .bubble.error, .console-error-level .bubble {
3641     background-color: rgb(216, 35, 35) !important;
3642 }
3643
3644 .bubble.search-matches {
3645     background-image: url(Images/searchSmallWhite.png);
3646     background-repeat: no-repeat;
3647     background-position: 3px 2px;
3648     padding-left: 13px !important;
3649 }
3650
3651 li.selected .bubble.search-matches {
3652     background-image: url(Images/searchSmallBlue.png);
3653 }
3654
3655 :focus li.selected .bubble.search-matches {
3656     background-image: url(Images/searchSmallBrightBlue.png);
3657 }
3658
3659 body.inactive li.selected .bubble.search-matches {
3660     background-image: url(Images/searchSmallGray.png);
3661 }
3662
3663 /* Timeline Style */
3664
3665 #timeline-overview-panel {
3666     position: absolute;
3667     top: 0;
3668     left: 0;
3669     right: 0;
3670     height: 80px;
3671 }
3672
3673 #timeline-overview-panel .timeline-graph-bar {
3674     pointer-events: none;
3675 }
3676
3677 .timeline-sidebar-background {
3678     top: 90px;
3679     bottom: 0;
3680 }
3681
3682 .timeline .sidebar {
3683     overflow-y: hidden;
3684     z-index: 100;
3685     min-height: 100%;
3686     bottom: auto;
3687 }
3688
3689 #timeline-overview-separator {
3690     position: absolute;
3691     top: 80px;
3692     left: 0;
3693     right: 0;
3694     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
3695     border-top: 1px solid rgb(140, 140, 140);
3696     border-bottom: 1px solid rgb(115, 115, 115);
3697     height: 10px;
3698 }
3699
3700 #timeline-overview-sidebar {
3701     position: absolute;
3702     width: 200px;
3703     top: 0px;
3704     bottom: 0px;
3705     left: 0px;
3706     padding-top: 2px;
3707     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209)));
3708     border-right: 1px solid rgb(163, 163, 163);
3709 }
3710
3711 #timeline-overview-grid {
3712     position: absolute;
3713     top: 0px;
3714     bottom: 0px;
3715     left: 200px;
3716     right: 0px;
3717     background-color: rgb(255, 255, 255);
3718 }
3719
3720 .timeline-window-selector {
3721     position: absolute;
3722     top: 0;
3723     bottom: 0;
3724     background-color: rgba(125, 173, 217, 0.5);
3725     z-index: 250;
3726 }
3727
3728 #timeline-overview-window {
3729     background-color: white;
3730     position: absolute;
3731     left: 0;
3732     right: 0;
3733     top: 0;
3734     bottom: 60px;
3735     z-index: 150;
3736 }
3737
3738 .timeline-overview-dividers-background {
3739     left: 0%;
3740     right: 0%;
3741     top: 0px;
3742     bottom: 60px;
3743     background-color: black;
3744     position: absolute;
3745 }
3746
3747 .timeline-overview-window-rulers {
3748     top: 0;
3749     bottom: 0;
3750     position: absolute;
3751     opacity: 0.2;
3752     border-right: 1px solid black;
3753     border-left: 1px solid black;
3754     z-index: 150;
3755 }
3756
3757 .timeline-window-resizer {
3758     position: absolute;
3759     top: 0px;
3760     bottom: 60px;
3761     width: 5px;
3762     margin-left: -3px;
3763     margin-right: -2px;
3764     background-color: rgb(153, 153, 153);
3765     z-index: 500;
3766     cursor: ew-resize;
3767     -webkit-border-radius: 2px;
3768     -webkit-box-shadow: white 1px 0 0, white -1px 0 0, white 0 1px 0, white 0 -1px 0;
3769 }
3770
3771 #timeline-overview-grid #resources-graphs {
3772     position: absolute;
3773     top: 0;
3774     left: 0;
3775     right: 0;
3776     height: 80px;
3777 }
3778
3779 #timeline-container {
3780     position: absolute;
3781     top: 90px;
3782     left: 0;
3783     bottom: 0;
3784     right: 0;
3785     border-right: 0 none transparent;
3786     overflow-y: auto;
3787     overflow-x: hidden;
3788 }
3789
3790 .timeline-category-statusbar-item {
3791     height: 24px;
3792     line-height: 24px;
3793     padding-left: 6px;
3794     white-space: nowrap;
3795     text-overflow: ellipsis;
3796     overflow: hidden;
3797     font-weight: bold;
3798 }
3799
3800 .timeline-category-statusbar-item .timeline-category-checkbox {
3801     width: 10px;
3802     height: 11px;
3803     margin: 0 3px 0 5px;
3804     padding: 0;
3805     background-image: url(Images/timelineCheckmarks.png);
3806     background-repeat: no-repeat;
3807     background-position: 0 -66px;
3808     vertical-align: -1px;
3809     -webkit-appearance: none;
3810 }
3811
3812 .timeline-category-statusbar-item .timeline-category-checkbox:checked {
3813     background-position-x: -10px;
3814 }
3815
3816 .timeline-category-statusbar-item.timeline-category-loading .timeline-category-checkbox {
3817     background-position-y: 0;
3818 }
3819
3820 .timeline-category-statusbar-item.timeline-category-scripting .timeline-category-checkbox {
3821     background-position-y: -33px;
3822 }
3823
3824 .timeline-category-statusbar-item.timeline-category-rendering .timeline-category-checkbox {
3825     background-position-y: -11px;
3826 }
3827
3828 .timeline-tree-item {
3829     height: 18px;
3830     line-height: 15px;
3831     padding-right: 5px;
3832     padding-left: 10px;
3833     padding-top: 2px;
3834     white-space: nowrap;
3835     text-overflow: ellipsis;
3836     overflow: hidden;
3837 }
3838
3839 .timeline-expandable {
3840     position: absolute;
3841     border-left: 1px solid rgb(163, 163, 163);
3842 }
3843
3844 .timeline-expandable-left {
3845     position: absolute;
3846     top: 0;
3847     bottom: 0;
3848     left: 0;
3849     width: 3px;
3850     border-top: 1px solid rgb(163, 163, 163);
3851     border-bottom: 1px solid rgb(163, 163, 163);
3852 }
3853
3854 .timeline-expandable-collapsed {
3855     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
3856     background-position-x: 1px;
3857     background-position-y: 2px;
3858     background-repeat: no-repeat;
3859 }
3860
3861 .timeline-expandable-expanded {
3862     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
3863     background-position-x: 1px;
3864     background-position-y: 3px;
3865     background-repeat: no-repeat;
3866 }
3867
3868 .timeline-tree-item .type {
3869     padding-left: 14px;
3870 }
3871
3872 .timeline-tree-item .count {
3873     font-family: Helvetica, Arial, sans-serif;
3874     font-weight: bold;
3875 }
3876
3877 .timeline-tree-item .timeline-tree-icon {
3878     background-image: url(Images/timelineDots.png);
3879     margin-top: 2px;
3880     width: 12px;
3881     height: 12px;
3882     position: absolute;
3883 }
3884
3885 .timeline-tree-item.even {
3886     background-color: rgba(0, 0, 0, 0.05);
3887 }
3888
3889 .timeline-tree-item .data.dimmed {
3890     color: rgba(0, 0, 0, 0.7);
3891 }
3892
3893 #timeline-overview-timelines,
3894 #timeline-overview-memory {
3895     position: absolute;
3896     left: 0;
3897     right: 0;
3898     bottom: 0;
3899     top: 20px;
3900     z-index: 160;
3901 }
3902
3903 #timeline-overview-memory > canvas {
3904     position: absolute;
3905     left: 0;
3906     right: 0;
3907     bottom: 0;
3908     top: 5px;
3909 }
3910
3911
3912 #timeline-graphs {
3913     position: absolute;
3914     left: 0;
3915     right: 0;
3916     max-height: 100%;
3917     top: 19px;
3918 }
3919
3920 .timeline-graph-side {
3921     position: relative;
3922     height: 18px;
3923     padding: 0 5px;
3924     white-space: nowrap;
3925     margin-top: 0px;
3926     border-top: 1px solid transparent;
3927     overflow: hidden;
3928     pointer-events: none;
3929 }
3930
3931 .timeline-overview-graph-side {
3932     height: 20px;
3933     z-index: 170;
3934     pointer-events: none;
3935 }
3936
3937 .timeline-overview-graph-side .timeline-graph-bar {
3938     height: 13px;
3939 }
3940
3941 .timeline-graph-bar-area {
3942     position: absolute;
3943     top: 0;
3944     bottom: 0;
3945     right: 0;
3946     left: 3px;
3947     pointer-events: none;
3948 }
3949
3950 .timeline-graph-bar {
3951     position: absolute;
3952     top: 0;
3953     bottom: 0;
3954     margin: auto -2px;
3955     border-width: 4px 4px 5px;
3956     height: 9px;
3957     min-width: 5px;
3958     opacity: 0.8;
3959     -webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4;
3960     z-index: 180;
3961     pointer-events: visibleFill;
3962 }
3963
3964 .timeline-graph-bar.with-children {
3965     opacity: 0.2;
3966 }
3967
3968 .timeline-graph-bar.cpu {
3969     opacity: 0.6;
3970 }
3971
3972 .timeline-graph-side.even {
3973     background-color: rgba(0, 0, 0, 0.05);
3974 }
3975
3976 .timeline-category-loading .timeline-graph-bar {
3977     -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
3978 }
3979
3980 .timeline-category-scripting .timeline-graph-bar {
3981     -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
3982 }
3983
3984 .timeline-category-rendering .timeline-graph-bar {
3985     -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
3986 }
3987
3988 .timeline-aggregated-category {
3989     display: inline-block;
3990     height: 11px;
3991     margin-right: 2px;
3992     margin-left: 6px;
3993     position: relative;
3994     top: 2px;
3995     width: 10px;
3996 }
3997
3998 .timeline-loading {
3999     -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
4000 }
4001
4002 .timeline-scripting {
4003     -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
4004 }
4005
4006 .timeline-rendering {
4007     -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
4008 }
4009
4010 .popover .timeline-aggregated-category.timeline-loading {
4011     margin-left: 0px;
4012 }
4013
4014 .timeline-category-loading .timeline-tree-icon {
4015     background-position-y: 0px;
4016 }
4017
4018 .timeline-category-scripting .timeline-tree-icon {
4019     background-position-y: 48px;
4020 }
4021
4022 .timeline-category-rendering .timeline-tree-icon {
4023     background-position-y: 72px;
4024 }
4025
4026 .timeline-details {
4027     -webkit-user-select: text;
4028     vertical-align: top;
4029 }
4030
4031 .timeline-function-name {
4032     text-align: right;
4033 }
4034
4035 .timeline-stacktrace-title {
4036     padding-top: 4px;
4037 }
4038
4039 .timeline-details-row-title {
4040     font-weight: bold;
4041     text-align: right;
4042     white-space: nowrap;
4043 }
4044
4045 .timeline-details-row-data {
4046     white-space: nowrap;
4047 }
4048
4049 .timeline-details-title {
4050     border-bottom: 1px solid #B8B8B8;
4051     font-size: 11px;
4052     font-weight: bold;
4053     padding-bottom: 5px;
4054     padding-top: 0px;
4055     white-space: nowrap;
4056 }
4057
4058 .timeline-filter-status-bar-item .glyph {
4059     -webkit-mask-position: -224px 0;
4060 }
4061
4062 .timeline-filter-status-bar-item.toggled-on .glyph {
4063     background-color: rgb(66, 129, 235) !important;
4064 }
4065
4066 .garbage-collect-status-bar-item .glyph {
4067     -webkit-mask-position: -128px -24px;
4068 }
4069
4070 .timeline-records-counter, .storage-application-cache-status, .storage-application-cache-connectivity {
4071     font-size: 11px;
4072     text-shadow: white 0 1px 0;
4073 }
4074
4075 #main-status-bar > .timeline-records-counter {
4076     float: right;
4077     margin-top: 4px;
4078     margin-right: 25px;
4079 }
4080
4081 #counters > .timeline-records-counter {
4082     float: left;
4083     margin-top: -2px;
4084 }
4085
4086 .storage-application-cache-status-icon, .storage-application-cache-connectivity-icon {
4087     margin-bottom: -3px;
4088     margin-left: 5px;
4089     vertical-align: middle;
4090 }
4091
4092 .status-bar-divider {
4093     margin-left: 7px;
4094     border-right: 1px solid #CCC;
4095 }
4096
4097 .storage-application-cache-status, .storage-application-cache-connectivity {
4098     position: relative;
4099     top: 4px;
4100 }
4101
4102 /* Profiler Style */
4103
4104 #profile-views {
4105     position: absolute;
4106     top: 0;
4107     right: 0;
4108     left: 200px;
4109     bottom: 0;
4110 }
4111
4112 .status-bar-items {
4113     position: absolute;
4114     top: 0;
4115     bottom: 0;
4116     left: 200px;
4117     overflow: hidden;
4118     border-left: 1px solid rgb(184, 184, 184);
4119     margin-left: -1px;
4120 }
4121
4122 .profile-sidebar-tree-item .icon {
4123     content: url(Images/profileIcon.png);
4124 }
4125
4126 .profile-sidebar-tree-item.small .icon {
4127     content: url(Images/profileSmallIcon.png);
4128 }
4129
4130 .profile-group-sidebar-tree-item .icon {
4131     content: url(Images/profileGroupIcon.png);
4132 }
4133
4134 .profile-view {
4135     display: none;
4136     overflow: hidden;
4137     position: absolute;
4138     top: 0;
4139     left: 0;
4140     right: 0;
4141     bottom: 0;
4142 }
4143
4144 .profile-view.visible {
4145     display: block;
4146 }
4147
4148 .profile-view .data-grid {
4149     border: none;
4150     height: 100%;
4151 }
4152
4153 .profile-view .data-grid th.average-column {
4154     text-align: center;
4155 }
4156
4157 .profile-view .data-grid td.average-column {
4158     text-align: right;
4159 }
4160
4161 .profile-view .data-grid th.self-column {
4162     text-align: center;
4163 }
4164
4165 .profile-view .data-grid td.self-column {
4166     text-align: right;
4167 }
4168
4169 .profile-view .data-grid th.total-column {
4170     text-align: center;
4171 }
4172
4173 .profile-view .data-grid td.total-column {
4174     text-align: right;
4175 }
4176
4177 .profile-view .data-grid .calls-column {
4178     text-align: center;
4179 }
4180
4181 .profile-node-file {
4182     float: right;
4183     color: gray;
4184     margin-top: -1px;
4185 }
4186
4187 .data-grid tr.selected .profile-node-file {
4188     color: rgb(33%, 33%, 33%);
4189 }
4190
4191 .data-grid:focus tr.selected .profile-node-file {
4192     color: white;
4193 }
4194
4195 button.enable-toggle-status-bar-item .glyph {
4196 }
4197
4198 .record-profile-status-bar-item .glyph {
4199     -webkit-mask-position: -288px 0;
4200 }
4201
4202 .record-profile-status-bar-item.toggled-on .glyph {
4203     -webkit-mask-position: -288px -24px;
4204     background-color: rgb(216, 0, 0) !important;
4205 }
4206
4207 /* FIXME: should have its own glyph. */
4208 .heap-snapshot-status-bar-item .glyph {
4209     -webkit-mask-position: -96px 0;
4210 }
4211
4212 .node-search-status-bar-item .glyph {
4213     -webkit-mask-position: -224px -24px;
4214 }
4215
4216 .percent-time-status-bar-item .glyph {
4217     -webkit-mask-position: -192px -24px;
4218 }
4219
4220 .focus-profile-node-status-bar-item .glyph {
4221     -webkit-mask-position: -96px 0;
4222 }
4223
4224 .exclude-profile-node-status-bar-item .glyph {
4225     -webkit-mask-position: -128px 0;
4226 }
4227
4228 .reset-profile-status-bar-item .glyph {
4229     -webkit-mask-position: 0 0;
4230 }
4231
4232 .delete-storage-status-bar-item .glyph {
4233     -webkit-mask-position: -128px 0;
4234 }
4235
4236 .refresh-storage-status-bar-item .glyph {
4237     -webkit-mask-position: 0 0;
4238 }
4239
4240 ol.breakpoint-list {
4241     -webkit-padding-start: 0;
4242     list-style: none;
4243     margin: 0;
4244 }
4245
4246 .breakpoint-list li {
4247     white-space: nowrap;
4248     text-overflow: ellipsis;
4249     overflow: hidden;
4250     padding: 2px 0;
4251     color: black;
4252 }
4253
4254 .breakpoint-list li:hover {
4255     color: rgb(15%, 15%, 15%);
4256 }
4257
4258 .breakpoint-list .checkbox-elem {
4259     font-size: 10px;
4260     margin: 0 4px;
4261     vertical-align: top;
4262     position: relative;
4263     z-index: 1;
4264 }
4265
4266 .breakpoint-list .source-text {
4267     white-space: nowrap;
4268     text-overflow: ellipsis;
4269     overflow: hidden;
4270     margin: 2px 0 0px 20px;
4271 }
4272
4273 .pane .breakpoint-hit {
4274     background-color: rgb(255, 255, 194);
4275 }
4276
4277 li.breakpoint-hit .breakpoint-hit-marker {
4278     background-color: rgb(255, 255, 194);
4279     height: 18px;
4280     left: 0px;
4281     margin-top: -16px;
4282     position: absolute;
4283     right: 0px;
4284     z-index: -1;
4285 }
4286
4287 .webkit-html-js-node, .webkit-html-css-node {
4288     white-space: pre;
4289 }
4290
4291 .source-frame-breakpoint-condition {
4292     z-index: 30;
4293     padding: 4px;
4294     background-color: rgb(203, 226, 255);
4295     -webkit-border-radius: 7px;
4296     border: 2px solid rgb(169, 172, 203); 
4297     width: 90%; 
4298 }
4299
4300 .source-frame-breakpoint-message {
4301     background-color: transparent;
4302     font-family: Lucida Grande, sans-serif; 
4303     font-weight: normal;
4304     font-size: 11px;
4305     text-align: left;
4306     text-shadow: none;
4307     color: rgb(85, 85, 85);
4308     cursor: default;
4309     margin: 0 0 2px 0; 
4310 }
4311
4312 #source-frame-breakpoint-condition {
4313     margin: 0;
4314     border: 1px inset rgb(190, 190, 190) !important;
4315     width: 100%;
4316     box-shadow: none !important;
4317     outline: none !important;
4318     -webkit-user-modify: read-write;
4319 }
4320
4321 .source-frame-popover-title {
4322     text-overflow: ellipsis;
4323     overflow: hidden;
4324     white-space: nowrap;
4325     font-weight: bold;
4326     padding-left: 18px;
4327 }
4328
4329 .source-frame-popover-tree {
4330     border-top: 1px solid rgb(194, 194, 147);
4331     overflow: auto;
4332     position: absolute;
4333     top: 15px;
4334     bottom: 0;
4335     left: 0;
4336     right: 0;
4337 }
4338
4339 .source-frame-eval-expression {
4340     border: 1px solid rgb(163, 41, 34);
4341     margin: -1px;
4342     background-color: rgb(255, 255, 194);
4343 }
4344
4345 .styles-sidebar-separator {
4346     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(243, 243, 243)), color-stop(0.05, rgb(243, 243, 243)), color-stop(0.05, rgb(230, 230, 230)), to(rgb(209, 209, 209)));
4347     padding: 0 5px;
4348     border-top: 1px solid rgb(189, 189, 189);
4349     border-bottom: 1px solid rgb(189, 189, 189);
4350     color: rgb(110, 110, 110);
4351     text-shadow: white 0 1px 0;
4352     white-space: nowrap;
4353     text-overflow: ellipsis;
4354     overflow: hidden;
4355     font-size: 11px;
4356 }
4357
4358 .styles-selector {
4359     cursor: text;
4360 }
4361
4362 .workers-list {
4363     list-style: none;
4364     margin: 0;
4365     padding: 0;
4366 }
4367  
4368 .workers-list > li {
4369     overflow: hidden;
4370     text-overflow: ellipsis;
4371     white-space: nowrap;
4372     margin-left: 1em;
4373     font-size: 12px;
4374 }
4375
4376 a.worker-item {
4377     color: rgb(33%, 33%, 33%);
4378     cursor: pointer;
4379     text-decoration: none;
4380 }
4381
4382 .styles-section {
4383     padding: 2px 2px 4px 4px;
4384     min-height: 18px;
4385     white-space: nowrap;
4386     -webkit-background-origin: padding;
4387     -webkit-background-clip: padding;
4388     -webkit-user-select: text;
4389 }
4390
4391 .styles-section:not(.first-styles-section) {
4392     border-top: 1px solid rgb(191, 191, 191);
4393 }
4394
4395 .styles-section.read-only {
4396     background-color: rgb(240, 240, 240);
4397 }
4398
4399 .styles-section .properties li.not-parsed-ok {
4400     margin-left: 0px;
4401 }
4402
4403 .styles-section .properties li.not-parsed-ok::before {
4404     content: url(Images/warningIcon.png);
4405     opacity: 0.75;
4406     float: left;
4407     width: 8px;
4408     height: 8px;
4409     margin-top: 0;
4410     padding-right: 5px;
4411     vertical-align: sub;
4412     -webkit-user-select: none;
4413     cursor: default;
4414 }
4415
4416 .styles-section .header {
4417     white-space: nowrap;
4418     -webkit-background-origin: padding;
4419     -webkit-background-clip: padding;
4420 }
4421
4422 .styles-section .header .title {
4423     word-wrap: break-word;
4424     white-space: normal;
4425 }
4426
4427 .styles-section .header .subtitle {
4428     color: rgb(85, 85, 85);
4429     float: right;
4430     margin-left: 5px;
4431     max-width: 65%;
4432     text-overflow: ellipsis;
4433     overflow: hidden;
4434 }
4435
4436 .styles-section .header .subtitle a {
4437     color: inherit;
4438 }
4439
4440 .styles-section .properties {
4441     display: none;
4442     margin: 0;
4443     padding: 2px 4px 0 8px;
4444     list-style: none;
4445 }
4446
4447 .styles-section.no-affect .properties li {
4448     opacity: 0.5;
4449 }
4450
4451 .styles-section.no-affect .properties li.editing {
4452     opacity: 1.0;
4453 }
4454
4455 .styles-section.expanded .properties {
4456     display: block;
4457 }
4458
4459 .styles-section .properties li {
4460     margin-left: 12px;
4461     white-space: nowrap;
4462     text-overflow: ellipsis;
4463     overflow: hidden;
4464     cursor: auto;
4465 }
4466
4467 .styles-section .properties li.parent {
4468     margin-left: 1px;
4469 }
4470
4471 .styles-section .properties ol {
4472     display: none;
4473     margin: 0;
4474     -webkit-padding-start: 12px;
4475     list-style: none;
4476 }
4477