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