2011-02-04 Mikhail Naganov <mnaganov@chromium.org>
[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 .data-grid button {
2089     line-height: 19px;
2090 }
2091
2092 body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-descending {
2093     background-image: url(Images/glossyHeader.png);
2094     border-right: 1px solid rgb(179, 179, 179);
2095     border-bottom: 1px solid rgb(179, 179, 179);
2096 }
2097
2098 .data-grid tr.parent td.disclosure::before {
2099     float: left;
2100     content: url(Images/treeRightTriangleBlack.png);
2101     width: 8px;
2102     height: 8px;
2103     margin-right: 2px;
2104     -webkit-user-select: none;
2105 }
2106
2107 .data-grid tr.expanded td.disclosure::before {
2108     content: url(Images/treeDownTriangleBlack.png);
2109     width: 8px;
2110     height: 8px;
2111     margin-top: 1px;
2112 }
2113
2114 .data-grid tr.selected {
2115     background-color: rgb(212, 212, 212);
2116     color: inherit;
2117 }
2118
2119 .data-grid:focus tr.selected {
2120     background-color: rgb(56, 121, 217);
2121     color: white;
2122 }
2123
2124 .data-grid:focus tr.parent.selected td.disclosure::before {
2125     content: url(Images/treeRightTriangleWhite.png);
2126 }
2127
2128 .data-grid:focus tr.expanded.selected td.disclosure::before {
2129     content: url(Images/treeDownTriangleWhite.png);
2130 }
2131
2132 .data-grid tr:not(.parent) td.disclosure {
2133     text-indent: 10px;
2134 }
2135
2136 .data-grid-resizer {
2137     position: absolute;
2138     top: 0;
2139     bottom: 0;
2140     width: 5px;
2141     z-index: 500;
2142     cursor: col-resize;
2143 }
2144
2145 .storage-view.query {
2146     padding: 2px 0;
2147     overflow-y: overlay;
2148     overflow-x: hidden;
2149     -webkit-text-size-adjust: auto;
2150 }
2151
2152 .database-query-prompt {
2153     position: relative;
2154     padding: 1px 22px 1px 24px;
2155     min-height: 16px; 
2156     white-space: pre-wrap;
2157     -webkit-user-modify: read-write-plaintext-only;
2158     -webkit-user-select: text;
2159 }
2160
2161 .database-user-query::before, .database-query-prompt::before, .database-query-result::before {
2162     position: absolute;
2163     display: block;
2164     content: "";
2165     left: 7px;
2166     top: 0.8em;
2167     width: 10px;
2168     height: 10px;
2169     margin-top: -5px;
2170     -webkit-user-select: none;
2171 }
2172
2173 .database-query-prompt::before {
2174     background-image: url(Images/userInputIcon.png);
2175 }
2176
2177 .database-user-query {
2178     position: relative;
2179     border-bottom: 1px solid rgb(245, 245, 245);
2180     padding: 1px 22px 1px 24px;
2181     min-height: 16px; 
2182 }
2183
2184 .database-user-query::before {
2185     background-image: url(Images/userInputPreviousIcon.png);
2186 }
2187
2188 .database-query-text {
2189     color: rgb(0, 128, 255);
2190     -webkit-user-select: text;
2191 }
2192
2193 .database-query-result {
2194     position: relative;
2195     padding: 1px 22px 1px 24px;
2196     min-height: 16px;
2197     margin-left: -24px;
2198     padding-right: 0;
2199 }
2200
2201 .database-query-result.error {
2202     color: red;
2203     -webkit-user-select: text;
2204 }
2205
2206 .database-query-result.error::before {
2207     background-image: url(Images/errorIcon.png);
2208 }
2209
2210 .panel-enabler-view {
2211     z-index: 1000;
2212     position: absolute;
2213     top: 0;
2214     left: 0;
2215     right: 0;
2216     bottom: 0;
2217     background-color: white;
2218     font-size: 13px;
2219     text-align: center;
2220     overflow-x: hidden;
2221     overflow-y: overlay;
2222     display: none;
2223 }
2224
2225 .panel-enabler-view.visible {
2226     display: block;
2227 }
2228
2229 .panel-enabler-view .panel-enabler-view-content {
2230     position: absolute;
2231     top: 0;
2232     left: 0;
2233     right: 0;
2234     bottom: 0;
2235     max-height: 390px;
2236     margin: auto;
2237     white-space: nowrap;
2238 }
2239
2240 .panel-enabler-view h1 {
2241     color: rgb(110, 116, 128);
2242     font-size: 16px;
2243     line-height: 20px;
2244     font-weight: normal;
2245     margin-top: 0;
2246 }
2247
2248 .panel-enabler-disclaimer {
2249     font-size: 10px;
2250     color: rgb(110, 116, 128);
2251     margin-bottom: 12px;
2252     margin-left: 20px;
2253 }
2254
2255 .panel-enabler-disclaimer:empty {
2256     display: none;
2257 }
2258
2259 .panel-enabler-view img, div.welcome-instructions-aligner {
2260     height: 100%;
2261     min-height: 200px;
2262     max-width: 100%;
2263     top: 0;
2264     bottom: 0;
2265     padding: 20px 0 20px 20px;
2266     margin: auto;
2267     vertical-align: middle;
2268 }
2269
2270 .panel-enabler-view img.hidden {
2271     display: initial !important;
2272     width: 0;
2273 }
2274
2275 .panel-enabler-view form {
2276     display: inline-block;
2277     vertical-align: middle;
2278     width: 330px;
2279     margin: 0;
2280     padding: 15px;
2281     white-space: normal;
2282 }
2283
2284 .panel-enabler-view label {
2285     position: relative;
2286     display: block;
2287     text-align: left;
2288     word-break: break-word;
2289     margin: 0 0 5px 20px;
2290 }
2291
2292 .panel-enabler-view button:not(.status-bar-item), .pane button, button.show-all-nodes {
2293     color: rgb(6, 6, 6);
2294     background-color: transparent;
2295     border: 1px solid rgb(165, 165, 165);
2296     background-color: rgb(237, 237, 237);
2297     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
2298     -webkit-border-radius: 12px;
2299     -webkit-appearance: none;
2300 }
2301
2302 .panel-enabler-view button:not(.status-bar-item) {
2303     font-size: 13px;
2304     margin: 6px 0 0 0;
2305     padding: 3px 20px;
2306     height: 24px;
2307 }
2308
2309 button.show-all-nodes {
2310     font-size: 13px;
2311     margin: 0;
2312     padding: 0 20px;
2313     height: 20px;
2314 }
2315
2316 .panel-enabler-view.welcome {
2317     z-index: auto;
2318 }
2319
2320 .panel-enabler-view.welcome div.welcome-instructions-aligner {
2321     display: inline-block;
2322     width: 0;
2323 }
2324
2325 .panel-enabler-view.welcome .instructions {
2326     display: inline-block;
2327     vertical-align: middle;
2328     margin: 0;
2329     white-space: normal;
2330     line-height: 175%;
2331 }
2332
2333 .panel-enabler-view.welcome .message {
2334     margin-bottom: 2ex;
2335 }
2336
2337 .panel-enabler-view.welcome button.status-bar-item {
2338     background-image: none;
2339     vertical-align: top;
2340 }
2341
2342 .pane button {
2343     margin: 6px 0 6px 3px;
2344     padding: 2px 9px;
2345 }
2346
2347 .panel-enabler-view button:active:not(.status-bar-item), .pane button:active, button.show-all-nodes:active {
2348     background-color: rgb(215, 215, 215);
2349     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
2350 }
2351
2352 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 {
2353     color: rgb(130, 130, 130);
2354     border-color: rgb(212, 212, 212);
2355     background-color: rgb(239, 239, 239);
2356     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(235, 235, 235)));
2357 }
2358
2359 .panel-enabler-view input {
2360     height: 17px;
2361     width: 17px;
2362     border: 1px solid rgb(165, 165, 165);
2363     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
2364     -webkit-border-radius: 8px;
2365     -webkit-appearance: none;
2366     vertical-align: middle;
2367     margin: 0 5px 5px 0;
2368 }
2369
2370 .panel-enabler-view input:active {
2371     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
2372 }
2373
2374 .panel-enabler-view input:checked {
2375     background: url(Images/radioDot.png) center no-repeat,
2376                 -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
2377 }
2378
2379 .panel-enabler-view.scripts img {
2380     content: url(Images/scriptsSilhouette.png);
2381 }
2382
2383 .panel-enabler-view.profiles img {
2384     content: url(Images/profilesSilhouette.png);
2385 }
2386
2387 button.enable-toggle-status-bar-item .glyph {
2388     -webkit-mask-image: url(Images/enableOutlineButtonGlyph.png);
2389 }
2390
2391 button.enable-toggle-status-bar-item.toggled-on .glyph {
2392     -webkit-mask-image: url(Images/enableSolidButtonGlyph.png);
2393 }
2394
2395 .scripts-pause-on-exceptions-status-bar-item .glyph {
2396     -webkit-mask-image: url(Images/pauseOnExceptionButtonGlyph.png);
2397 }
2398
2399 #scripts-status-bar {
2400     position: absolute;
2401     top: -1px;
2402     left: 0;
2403     right: 0;
2404     height: 24px;
2405 }
2406
2407 #scripts-files {
2408     max-width: 250px;
2409 }
2410
2411 #scripts-files option.extension-script {
2412     color: rgb(70, 134, 240);
2413 }
2414
2415 #scripts-functions {
2416     max-width: 150px;
2417 }
2418
2419 #scripts-status-bar .status-bar-item img {
2420     margin-top: 2px;
2421 }
2422
2423 #scripts-back img {
2424     content: url(Images/back.png);
2425 }
2426
2427 #scripts-forward img {
2428     content: url(Images/forward.png);
2429 }
2430
2431 #scripts-pause img {
2432     content: url(Images/debuggerPause.png);
2433 }
2434
2435 #scripts-pause.paused img {
2436     content: url(Images/debuggerContinue.png);
2437 }
2438
2439 #scripts-step-over img {
2440     content: url(Images/debuggerStepOver.png);
2441 }
2442
2443 #scripts-step-into img {
2444     content: url(Images/debuggerStepInto.png);
2445 }
2446
2447 #scripts-step-out img {
2448     content: url(Images/debuggerStepOut.png);
2449 }
2450
2451 .toggle-breakpoints .glyph {
2452     -webkit-mask-image: url(Images/breakpointsActivateButtonGlyph.png);
2453     background-color: rgb(96, 96, 96) !important;
2454 }
2455
2456 .toggle-breakpoints.toggled-on .glyph {
2457     -webkit-mask-image: url(Images/breakpointsDeactivateButtonGlyph.png);
2458 }
2459
2460 #scripts-debugger-status {
2461     position: absolute;
2462     line-height: 24px;
2463     top: 0;
2464     right: 8px;
2465 }
2466
2467 #scripts-sidebar-resizer-widget {
2468     position: absolute;
2469     top: 0;
2470     bottom: 0;
2471     right: 225px;
2472     width: 16px;
2473     cursor: col-resize;
2474     background-image: url(Images/statusbarResizerHorizontal.png);
2475     background-repeat: no-repeat;
2476     background-position: center;
2477 }
2478
2479 #scripts-sidebar-buttons {
2480     position: absolute;
2481     right: 0;
2482     top: 0;
2483     bottom: 0;
2484     width: 225px;
2485     overflow: hidden;
2486     border-left: 1px solid rgb(64%, 64%, 64%);
2487 }
2488
2489 #script-resource-views {
2490     display: block;
2491     padding: 0;
2492     position: absolute;
2493     top: 23px;
2494     left: 0;
2495     right: 225px;
2496     bottom: 0;
2497 }
2498
2499 .script-view {
2500     display: none;
2501     overflow: hidden;
2502     position: absolute;
2503     top: 0;
2504     left: 0;
2505     right: 0;
2506     bottom: 0;
2507 }
2508
2509 .script-view.visible {
2510     display: block;
2511 }
2512
2513 #scripts-sidebar {
2514     position: absolute;
2515     top: 23px;
2516     right: 0;
2517     bottom: 0;
2518     width: 225px;
2519     border-left: 1px solid rgb(64%, 64%, 64%);
2520     cursor: default;
2521     overflow: auto;
2522 }
2523
2524 .resources-larger-resources-status-bar-item .glyph {
2525     -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png);
2526 }
2527
2528 #resources-filter, #console-filter.console-filter-top {
2529     background: -webkit-gradient(linear, left top, left bottom, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
2530     border-bottom: 1px solid rgb(64%, 64%, 64%);
2531     width: 100%;
2532 }
2533
2534 #console-messages.console-filter-top {
2535     margin-top: 23px;
2536 }
2537
2538 #console-filter {
2539     margin-top: 1px;
2540 }
2541
2542 .tabbed-pane {
2543     -webkit-box-orient: vertical;
2544     height: 100%;
2545 }
2546
2547 .tabbed-pane-content {
2548     -webkit-box-flex: 1;
2549     position: relative;
2550 }
2551
2552 .tabbed-pane-header {
2553     height: 23px;
2554     padding: 0 10px;
2555     border-bottom: 1px solid rgb(163, 163, 163);
2556 }
2557
2558 .tabbed-pane-header li {
2559     display: inline-block;
2560     margin-top: 2px;
2561     font-size: 11px;
2562     font-weight: bold;
2563     color: rgb(46, 46, 46);
2564     background: transparent;
2565     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
2566     vertical-align: middle;
2567     padding: 3px 7px 2px;
2568     height: 21px;
2569     border: 1px solid transparent;
2570     border-bottom: none;
2571 }
2572
2573 .tabbed-pane-header li.selected {
2574     background-color: white;
2575     border: 1px solid rgb(163, 163, 163);
2576     border-bottom: none;
2577 }
2578
2579 .scope-bar {
2580     height: 23px;
2581     padding: 2px 10px 0;
2582     overflow: hidden;
2583 }
2584
2585 .scope-bar li {
2586     display: inline-block;
2587     margin: 1px 2px 0 0;
2588     padding: 1px 7px 3px;
2589     font-size: 11px;
2590     line-height: 12px;
2591     font-weight: bold;
2592     color: rgb(46, 46, 46);
2593     background: transparent;
2594     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
2595     -webkit-border-radius: 8px;
2596     vertical-align: middle;
2597 }
2598
2599 .scope-bar-divider {
2600     margin: 1px 9px 0 8px;
2601     background-color: rgba(0, 0, 0, 0.4);
2602     height: 16px;
2603     width: 1px;
2604     vertical-align: middle;
2605     display: inline-block;
2606 }
2607
2608 .scope-bar li.selected, .scope-bar li:hover, .scope-bar li:active {
2609     color: white;
2610     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
2611 }
2612
2613 .scope-bar li:hover {
2614     background: rgba(0, 0, 0, 0.2);
2615 }
2616
2617 .scope-bar li.selected {
2618     background: rgba(0, 0, 0, 0.3);
2619     -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);
2620 }
2621
2622 .scope-bar li:active {
2623     background: rgba(0, 0, 0, 0.5);
2624     -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);
2625 }
2626
2627 #resources-container {
2628     position: absolute;
2629     top: 23px;
2630     left: 0;
2631     bottom: 0;
2632     right: 0;
2633     border-right: 0 none transparent;
2634     overflow-y: auto;
2635     overflow-x: hidden;
2636 }
2637
2638 #resources-container.viewing-resource {
2639     right: auto;
2640     width: 200px;
2641     border-right: 1px solid rgb(64%, 64%, 64%);
2642 }
2643
2644 #resources-container.viewing-resource #resources-sidebar {
2645     width: 100%;
2646     border-right: 0 none transparent;
2647 }
2648
2649 #resources-sidebar {
2650     min-height: 100%;
2651     bottom: auto;
2652     overflow: visible;
2653 }
2654
2655 #resources-container-content {
2656     position: absolute;
2657     top: 0;
2658     right: 0;
2659     left: 200px;
2660     min-height: 100%;
2661 }
2662
2663 #resources-container.viewing-resource #resources-container-content {
2664     display: none;
2665 }
2666
2667 #resources-summary {
2668     position: absolute;
2669     padding-top: 20px;
2670     top: 0;
2671     left: 0;
2672     right: 0;
2673     height: 93px;
2674     margin-left: -1px;
2675     border-left: 1px solid rgb(102, 102, 102);
2676     background-color: rgb(101, 111, 130);
2677     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
2678     background-repeat: repeat-x;
2679     background-position: bottom;
2680     text-align: center;
2681     text-shadow: black 0 1px 1px;
2682     white-space: nowrap;
2683     color: white;
2684     -webkit-background-size: 1px 6px;
2685     -webkit-background-origin: padding;
2686     -webkit-background-clip: padding;
2687     z-index: 400;
2688 }
2689
2690 .summary-graph-legend {
2691     margin-top: -10px;
2692     padding-left: 15px;
2693 }
2694
2695 .summary-graph-legend-item {
2696     display: inline-block;
2697     font-weight: bold;
2698     margin-right: 15px;
2699     vertical-align: top;
2700 }
2701
2702 .summary-graph-legend-item.total {
2703     margin-left: 10px;
2704 }
2705
2706 .summary-graph-legend-label {
2707     display: inline-block;
2708     text-align: left;
2709 }
2710
2711 .summary-graph-legend-header {
2712     font-size: 12px;
2713 }
2714
2715 .summary-graph-legend-value {
2716     font-size: 10px;
2717 }
2718
2719 .summary-graph-legend-swatch {
2720     vertical-align: top;
2721     margin-top: 1px;
2722     margin-right: 3px;
2723 }
2724
2725 .resources-dividers {
2726     position: absolute;
2727     left: 0;
2728     right: 0;
2729     height: 100%;
2730     top: 0;
2731     z-index: -100;
2732 }
2733
2734 .resources-event-dividers {
2735     position: absolute;
2736     left: 0;
2737     right: 5px;
2738     height: 100%;
2739     top: 0;
2740     z-index: 300;
2741     pointer-events: none;
2742 }
2743
2744 .timeline .resources-event-dividers {
2745     height: 19px;
2746 }
2747
2748 .resources-dividers-label-bar {
2749     position: absolute;
2750     top: 0;
2751     left: 0px;
2752     right: 0;
2753     background-color: rgba(255, 255, 255, 0.8);
2754     background-clip: padding;
2755     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
2756     height: 20px;
2757     z-index: 200;
2758 }
2759
2760 .resources-divider {
2761     position: absolute;
2762     width: 1px;
2763     top: 0;
2764     bottom: 0;
2765     background-color: rgba(0, 0, 0, 0.1);
2766 }
2767
2768 .resources-event-divider-padding {
2769     position: absolute;
2770     width: 8px;
2771     top: 0;
2772     bottom: 0;
2773     pointer-events: auto;
2774 }
2775
2776 .resources-event-divider {
2777     position: absolute;
2778     width: 2px;
2779     top: 0;
2780     bottom: 0;
2781     z-index: 300;
2782 }
2783
2784 .resources-red-divider {
2785     background-color: rgba(255, 0, 0, 0.5);
2786 }
2787
2788 .resources-blue-divider {
2789     background-color: rgba(0, 0, 255, 0.5);
2790 }
2791
2792 .resources-orange-divider {
2793     background-color: rgba(255, 178, 23, 0.5);
2794 }
2795
2796 .resources-divider.last {
2797     background-color: transparent;
2798 }
2799
2800 .resources-divider-label {
2801     position: absolute;
2802     top: 4px;
2803     right: 3px;
2804     font-size: 9px;
2805     color: rgb(50%, 50%, 50%);
2806     white-space: nowrap;
2807 }
2808
2809 .memory-graph-label {
2810     position: absolute;
2811     top: 5px;
2812     left: 5px;
2813     font-size: 9px;
2814     color: rgb(50%, 50%, 50%);
2815     white-space: nowrap;
2816 }
2817
2818 .resources-graph-label {
2819     position: absolute;
2820     top: 0;
2821     bottom: 0;
2822     margin: auto -7px;
2823     height: 13px;
2824     line-height: 13px;
2825     font-size: 9px;
2826     color: rgba(0, 0, 0, 0.75);
2827     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;
2828     z-index: 150;
2829     overflow: hidden;
2830     text-align: center;
2831     font-weight: bold;
2832     opacity: 0;
2833     -webkit-transition: opacity 250ms ease-in-out;
2834 }
2835
2836 .resources-graph-side:hover .resources-graph-label {
2837     opacity: 1;
2838 }
2839
2840 .resources-graph-label:empty {
2841     display: none;
2842 }
2843
2844 .resources-graph-label.waiting {
2845     margin-right: 5px;
2846 }
2847
2848 .resources-graph-label.waiting-right {
2849     margin-left: 5px;
2850 }
2851
2852 .resources-graph-label.before {
2853     color: rgba(0, 0, 0, 0.7);
2854     text-shadow: none;
2855     text-align: right;
2856     margin-right: 2px;
2857 }
2858
2859 .resources-graph-label.before::after {
2860     padding-left: 2px;
2861     height: 6px;
2862     content: url(Images/graphLabelCalloutLeft.png);
2863 }
2864
2865 .resources-graph-label.after {
2866     color: rgba(0, 0, 0, 0.7);
2867     text-shadow: none;
2868     text-align: left;
2869     margin-left: 2px;
2870 }
2871
2872 .resources-graph-label.after::before {
2873     padding-right: 2px;
2874     height: 6px;
2875     content: url(Images/graphLabelCalloutRight.png);
2876 }
2877
2878 .resources-graph-bar {
2879     position: absolute;
2880     top: 0;
2881     bottom: 0;
2882     margin: auto -7px;
2883     border-width: 6px 7px;
2884     height: 13px;
2885     min-width: 14px;
2886     opacity: 0.65;
2887     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
2888 }
2889
2890 .resources-category-documents, .resources-category-stylesheets, .resources-category-images,
2891 .resources-category-scripts, .resources-category-xhr, .resources-category-fonts,
2892 .resources-category-websockets, .resources-category-other {
2893     display: none;
2894 }
2895
2896 .filter-all .resources-category-documents, .filter-documents .resources-category-documents,
2897 .filter-all .resources-category-stylesheets, .filter-stylesheets .resources-category-stylesheets,
2898 .filter-all .resources-category-images, .filter-images .resources-category-images,
2899 .filter-all .resources-category-scripts, .filter-scripts .resources-category-scripts,
2900 .filter-all .resources-category-xhr, .filter-xhr .resources-category-xhr,
2901 .filter-all .resources-category-fonts, .filter-fonts .resources-category-fonts,
2902 .filter-all .resources-category-websockets, .filter-websockets .resources-category-websockets,
2903 .filter-all .resources-category-other, .filter-other .resources-category-other,
2904 .resource-sidebar-tree-item.selected {
2905     display: list-item;
2906 }
2907
2908 .console-warning-level, .console-error-level, .console-log-level {
2909     display: none;
2910 }
2911
2912 .filter-all .console-warning-level, .filter-warnings .console-warning-level,
2913 .filter-all .console-error-level, .filter-errors .console-error-level,
2914 .filter-all .console-log-level, .filter-logs .console-log-level {
2915     display: block;
2916 }
2917
2918 .console-user-command-result {
2919     display: block;
2920 }
2921
2922 .resources-graph-bar.waiting, .resources-graph-bar.waiting-right {
2923     opacity: 0.35;
2924 }
2925
2926 .resource-cached .resources-graph-bar {
2927     -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
2928 }
2929
2930 .resources-category-documents .resources-graph-bar {
2931     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
2932 }
2933
2934 .resources-category-documents.resource-cached .resources-graph-bar {
2935     -webkit-border-image: url(Images/timelineHollowPillBlue.png) 6 7 6 7;
2936 }
2937
2938 .resources-category-stylesheets .resources-graph-bar {
2939     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
2940 }
2941
2942 .resources-category-stylesheets.resource-cached .resources-graph-bar {
2943     -webkit-border-image: url(Images/timelineHollowPillGreen.png) 6 7 6 7;
2944 }
2945
2946 .resources-category-images .resources-graph-bar {
2947     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
2948 }
2949
2950 .resources-category-images.resource-cached .resources-graph-bar {
2951     -webkit-border-image: url(Images/timelineHollowPillPurple.png) 6 7 6 7;
2952 }
2953
2954 .resources-category-fonts .resources-graph-bar {
2955     -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7;
2956 }
2957
2958 .resources-category-fonts.resource-cached .resources-graph-bar {
2959     -webkit-border-image: url(Images/timelineHollowPillRed.png) 6 7 6 7;
2960 }
2961
2962 .resources-category-scripts .resources-graph-bar {
2963     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
2964 }
2965
2966 .resources-category-scripts.resource-cached .resources-graph-bar {
2967     -webkit-border-image: url(Images/timelineHollowPillOrange.png) 6 7 6 7;
2968 }
2969
2970 .resources-category-xhr .resources-graph-bar {
2971     -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
2972 }
2973
2974 .resources-category-xhr.resource-cached .resources-graph-bar {
2975     -webkit-border-image: url(Images/timelineHollowPillYellow.png) 6 7 6 7;
2976 }
2977
2978 /* FIXME: Create bar images for WebSocket. */
2979 .resources-category-websockets .resources-graph-bar {
2980     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
2981 }
2982
2983 .resources-category-websockets.resource-cached .resources-graph-bar {
2984    -webkit-border-image: url(Images/timelineHollowPillGray.png) 6 7 6 7;
2985 }
2986
2987 #resource-views {
2988     position: absolute;
2989     top: 23px;
2990     right: 0;
2991     left: 200px;
2992     bottom: 0;
2993 }
2994
2995 .source-view-frame {
2996     width: 100%;
2997     height: 100%;
2998 }
2999
3000 .sidebar-resizer-vertical {
3001     position: absolute;
3002     top: 0;
3003     bottom: 0;
3004     width: 5px;
3005     z-index: 500;
3006     cursor: col-resize;
3007 }
3008
3009 .resources .sidebar-resizer-vertical {
3010     top: 23px;
3011 }
3012
3013 .sidebar-tree, .sidebar-tree .children {
3014     position: relative;
3015     padding: 0;
3016     margin: 0;
3017     list-style: none;
3018     font-size: 11px;
3019 }
3020
3021 .sidebar-tree-section {
3022     position: relative;
3023     height: 18px;
3024     padding: 4px 10px 6px 10px;
3025     white-space: nowrap;
3026     margin-top: 1px;
3027     color: rgb(92, 110, 129);
3028     font-weight: bold;
3029     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
3030 }
3031
3032 .sidebar-tree-item {
3033     position: relative;
3034     height: 36px;
3035     padding: 0 5px 0 5px;
3036     white-space: nowrap;
3037     margin-top: 1px;
3038     line-height: 34px;
3039     border-top: 1px solid transparent;
3040 }
3041
3042 .sidebar-tree .children {
3043     display: none;
3044 }
3045
3046 .sidebar-tree .children.expanded {
3047     display: block;
3048 }
3049
3050 .sidebar-tree-section + .children > .sidebar-tree-item {
3051     padding-left: 10px !important;
3052 }
3053
3054 .sidebar-tree-section + .children.small > .sidebar-tree-item {
3055     padding-left: 17px !important;
3056 }
3057
3058 .sidebar-tree > .children > .sidebar-tree-item {
3059     padding-left: 37px;
3060 }
3061
3062 .sidebar-tree > .children > .children > .sidebar-tree-item {
3063     padding-left: 37px;
3064 }
3065
3066 .sidebar-tree.hide-disclosure-buttons > .children {
3067     display: none;
3068 }
3069
3070 .sidebar-tree > .children.hide-disclosure-buttons > .children {
3071     display: none;
3072 }
3073
3074 .sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
3075     margin-left: 16px;
3076 }
3077
3078 .sidebar-tree-item .disclosure-button {
3079     float: left;
3080     width: 16px;
3081     height: 100%;
3082     border: 0;
3083     background-color: transparent;
3084     background-image: url(Images/disclosureTriangleSmallRight.png);
3085     background-repeat: no-repeat;
3086     background-position: center;
3087     -webkit-apearance: none;
3088 }
3089
3090 .sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
3091     display: none;
3092 }
3093
3094 body.inactive .sidebar-tree-item .disclosure-button {
3095     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
3096 }
3097
3098 body.inactive .sidebar-tree-item.expanded .disclosure-button {
3099     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
3100 }
3101
3102 body.inactive .sidebar-tree-item .disclosure-button:active {
3103     background-image: url(Images/disclosureTriangleSmallRightDownBlack.png);
3104 }
3105
3106 .sidebar-tree-item.selected .disclosure-button {
3107     background-image: url(Images/disclosureTriangleSmallRightWhite.png) !important;
3108 }
3109
3110 .sidebar-tree-item.expanded .disclosure-button {
3111     background-image: url(Images/disclosureTriangleSmallDown.png);
3112 }
3113
3114 .sidebar-tree-item.selected.expanded .disclosure-button {
3115     background-image: url(Images/disclosureTriangleSmallDownWhite.png) !important;
3116 }
3117
3118 .sidebar-tree-item.selected .disclosure-button:active {
3119     background-image: url(Images/disclosureTriangleSmallRightDownWhite.png) !important;
3120 }
3121
3122 .sidebar-tree-item .disclosure-button:active {
3123     background-image: url(Images/disclosureTriangleSmallRightDown.png);
3124 }
3125
3126 .sidebar-tree-item .icon {
3127     float: left;
3128     width: 32px;
3129     height: 32px;
3130     margin-top: 1px;
3131     margin-right: 3px;
3132 }
3133
3134 li .status {
3135     float: right;
3136     height: 16px;
3137     margin-top: 9px;
3138     margin-left: 4px;
3139     line-height: 1em;
3140 }
3141
3142 li .status:empty {
3143     display: none;
3144 }
3145
3146 li .status .bubble {
3147     display: inline-block;
3148     height: 14px;
3149     min-width: 16px;
3150     margin-top: 1px;
3151     background-color: rgb(128, 151, 189);
3152     vertical-align: middle;
3153     white-space: nowrap;
3154     padding: 1px 4px;
3155     text-align: center;
3156     font-size: 11px;
3157     line-height: normal;
3158     font-family: Helvetica, Arial, sans-serif;
3159     font-weight: bold;
3160     text-shadow: none;
3161     color: white;
3162     -webkit-border-radius: 7px;
3163 }
3164
3165 li .status .bubble:empty {
3166     display: none;
3167 }
3168
3169 li.selected .status .bubble {
3170     background-color: white !important;
3171     color: rgb(132, 154, 190) !important;
3172 }
3173
3174 :focus li.selected .status .bubble {
3175     color: rgb(36, 98, 172) !important;
3176 }
3177
3178 body.inactive li.selected .status .bubble {
3179     color: rgb(159, 159, 159) !important;
3180 }
3181
3182 .sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small, .small .resources-graph-side {
3183     height: 20px;
3184 }
3185
3186 .sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
3187     width: 16px;
3188     height: 16px;
3189 }
3190
3191 .sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status {
3192     margin-top: 1px;
3193 }
3194
3195 .sidebar-tree-item.selected {
3196     color: white;
3197     border-top: 1px solid rgb(145, 160, 192);
3198     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
3199     text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
3200     font-weight: bold;
3201     -webkit-background-origin: padding;
3202     -webkit-background-clip: padding;
3203 }
3204
3205 :focus .sidebar-tree-item.selected {
3206     border-top: 1px solid rgb(68, 128, 200);
3207     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
3208 }
3209
3210 body.inactive .sidebar-tree-item.selected {
3211     border-top: 1px solid rgb(151, 151, 151);
3212     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
3213 }
3214
3215 .sidebar-tree-item .titles {
3216     position: relative;
3217     top: 5px;
3218     line-height: 11px;
3219     padding-bottom: 1px;
3220     text-overflow: ellipsis;
3221     overflow: hidden;
3222     white-space: nowrap;
3223 }
3224
3225 .sidebar-tree-item .titles.no-subtitle {
3226     top: 10px;
3227 }
3228
3229 .sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
3230     top: 2px;
3231     line-height: normal;
3232 }
3233
3234 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
3235     content: "\A";
3236     white-space: pre;
3237 }
3238
3239 .sidebar-tree-item .subtitle {
3240     font-size: 9px;
3241     color: rgba(0, 0, 0, 0.7);
3242 }
3243
3244 .sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
3245     display: none;
3246 }
3247
3248 .sidebar-tree-item.selected .subtitle {
3249     color: rgba(255, 255, 255, 0.9);
3250 }
3251
3252 #resources-graphs {
3253     position: absolute;
3254     left: 0;
3255     right: 0;
3256     max-height: 100%;
3257     top: 112px;
3258 }
3259
3260 .resources-graph-side {
3261     position: relative;
3262     height: 36px;
3263     padding: 0 5px;
3264     white-space: nowrap;
3265     margin-top: 1px;
3266     border-top: 1px solid transparent;
3267     overflow: hidden;
3268 }
3269
3270 .resources-graph-bar-area {
3271     position: absolute;
3272     top: 0;
3273     bottom: 0;
3274     right: 8px;
3275     left: 9px;
3276 }
3277
3278 #resources-container:not(.viewing-resource) .resource-sidebar-tree-item:nth-of-type(2n) {
3279     background-color: rgba(0, 0, 0, 0.05);
3280 }
3281
3282 #resources-container:not(.viewing-resource) .resources-graph-side:nth-of-type(2n) {
3283     background-color: rgba(0, 0, 0, 0.05);
3284 }
3285
3286 .resources-time-graph-sidebar-item .icon {
3287     content: url(Images/resourcesTimeGraphIcon.png);
3288 }
3289
3290 .resources-size-graph-sidebar-item .icon {
3291     content: url(Images/resourcesSizeGraphIcon.png);
3292 }
3293
3294 .resources-size-graph-sidebar-item .icon {
3295     content: url(Images/resourcesSizeGraphIcon.png);
3296 }
3297
3298 .resource-sidebar-tree-item .icon {
3299     content: url(Images/resourcePlainIcon.png);
3300 }
3301
3302 .children.small .resource-sidebar-tree-item .icon {
3303     content: url(Images/resourcePlainIconSmall.png);
3304 }
3305
3306 .resource-sidebar-tree-item.resources-category-documents .icon {
3307     content: url(Images/resourceDocumentIcon.png);
3308 }
3309
3310 .children.small .resource-sidebar-tree-item.resources-category-documents .icon {
3311     content: url(Images/resourceDocumentIconSmall.png);
3312 }
3313
3314 .resource-sidebar-tree-item.resources-category-stylesheets .icon {
3315     content: url(Images/resourceCSSIcon.png);
3316 }
3317
3318 .children.small .resource-sidebar-tree-item.resources-category-stylesheets .icon {
3319     content: url(Images/resourceDocumentIconSmall.png);
3320 }
3321
3322 .resource-sidebar-tree-item.resources-category-images .icon {
3323     position: relative;
3324     background-image: url(Images/resourcePlainIcon.png);
3325     background-repeat: no-repeat;
3326     content: "";
3327 }
3328
3329 .resources-category-images .image-resource-icon-preview {
3330     position: absolute;
3331     margin: auto;
3332     top: 3px;
3333     bottom: 4px;
3334     left: 5px;
3335     right: 5px;
3336     max-width: 18px;
3337     max-height: 21px;
3338     min-width: 1px;
3339     min-height: 1px;
3340 }
3341
3342 .children.small .resource-sidebar-tree-item.resources-category-images .icon {
3343     background-image: url(Images/resourcePlainIconSmall.png);
3344     content: "";
3345 }
3346
3347 .children.small .resources-category-images .image-resource-icon-preview {
3348     top: 2px;
3349     bottom: 1px;
3350     left: 3px;
3351     right: 3px;
3352     max-width: 8px;
3353     max-height: 11px;
3354 }
3355
3356 .resource-sidebar-tree-item.resources-category-fonts .icon {
3357     content: url(Images/resourcePlainIcon.png);
3358 }
3359
3360 .children.small .resource-sidebar-tree-item.resources-category-fonts .icon {
3361     content: url(Images/resourcePlainIconSmall.png);
3362 }
3363
3364 .resource-sidebar-tree-item.resources-category-scripts .icon {
3365     content: url(Images/resourceJSIcon.png);
3366 }
3367
3368 .children.small .resource-sidebar-tree-item.resources-category-scripts .icon {
3369     content: url(Images/resourceDocumentIconSmall.png);
3370 }
3371
3372 .resource-sidebar-tree-item.resources-category-xhr .icon {
3373     content: url(Images/resourcePlainIcon.png);
3374 }
3375
3376 .children.small .resource-sidebar-tree-item.resources-category-xhr .icon {
3377     content: url(Images/resourceDocumentIconSmall.png);
3378 }
3379
3380 .bubble.debug, .console-debug-level .bubble {
3381     background-color: rgb(0, 0, 255) !important;
3382 }
3383
3384 .bubble.warning, .console-warning-level .bubble {
3385     background-color: rgb(232, 164, 0) !important;
3386 }
3387
3388 .bubble.error, .console-error-level .bubble {
3389     background-color: rgb(216, 35, 35) !important;
3390 }
3391
3392 .bubble.search-matches {
3393     background-image: url(Images/searchSmallWhite.png);
3394     background-repeat: no-repeat;
3395     background-position: 3px 2px;
3396     padding-left: 13px !important;
3397 }
3398
3399 li.selected .bubble.search-matches {
3400     background-image: url(Images/searchSmallBlue.png);
3401 }
3402
3403 :focus li.selected .bubble.search-matches {
3404     background-image: url(Images/searchSmallBrightBlue.png);
3405 }
3406
3407 body.inactive li.selected .bubble.search-matches {
3408     background-image: url(Images/searchSmallGray.png);
3409 }
3410
3411 /* Timeline Style */
3412
3413 #timeline-overview-panel {
3414     position: absolute;
3415     top: 0;
3416     left: 0;
3417     right: 0;
3418     height: 80px;
3419 }
3420
3421 #timeline-overview-panel .timeline-graph-bar {
3422     pointer-events: none;
3423 }
3424
3425 .timeline-sidebar-background {
3426     top: 90px;
3427     bottom: 0;
3428 }
3429
3430 .timeline .sidebar {
3431     overflow-y: hidden;
3432     z-index: 100;
3433     min-height: 100%;
3434     bottom: auto;
3435 }
3436
3437 #timeline-overview-separator {
3438     position: absolute;
3439     top: 80px;
3440     left: 0;
3441     right: 0;
3442     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(253, 253, 253)), to(rgb(213, 213, 213)));
3443     border-top: 1px solid rgb(140, 140, 140);
3444     border-bottom: 1px solid rgb(115, 115, 115);
3445     height: 10px;
3446 }
3447
3448 #timeline-overview-sidebar {
3449     position: absolute;
3450     width: 200px;
3451     top: 0px;
3452     bottom: 0px;
3453     left: 0px;
3454     padding-top: 2px;
3455     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(242, 242, 242)), to(rgb(209, 209, 209)));
3456     border-right: 1px solid rgb(163, 163, 163);
3457 }
3458
3459 #timeline-overview-grid {
3460     position: absolute;
3461     top: 0px;
3462     bottom: 0px;
3463     left: 200px;
3464     right: 0px;
3465     background-color: rgb(255, 255, 255);
3466 }
3467
3468 .timeline-window-selector {
3469     position: absolute;
3470     top: 0;
3471     bottom: 0;
3472     background-color: rgba(125, 173, 217, 0.5);
3473     z-index: 250;
3474 }
3475
3476 #timeline-overview-window {
3477     background-color: white;
3478     position: absolute;
3479     left: 0;
3480     right: 0;
3481     top: 0;
3482     bottom: 60px;
3483     z-index: 150;
3484 }
3485
3486 .timeline-overview-dividers-background {
3487     left: 0%;
3488     right: 0%;
3489     top: 0px;
3490     bottom: 60px;
3491     background-color: black;
3492     position: absolute;
3493 }
3494
3495 .timeline-overview-window-rulers {
3496     top: 0;
3497     bottom: 0;
3498     position: absolute;
3499     opacity: 0.2;
3500     border-right: 1px solid black;
3501     border-left: 1px solid black;
3502     z-index: 150;
3503 }
3504
3505 .timeline-window-resizer {
3506     position: absolute;
3507     top: 0px;
3508     bottom: 60px;
3509     width: 5px;
3510     margin-left: -3px;
3511     margin-right: -2px;
3512     background-color: rgb(153, 153, 153);
3513     z-index: 500;
3514     cursor: col-resize;
3515     -webkit-border-radius: 2px;
3516     -webkit-box-shadow: white 1px 0 0, white -1px 0 0, white 0 1px 0, white 0 -1px 0;
3517 }
3518
3519 #timeline-overview-grid #resources-graphs {
3520     position: absolute;
3521     top: 0;
3522     left: 0;
3523     right: 0;
3524     height: 80px;
3525 }
3526
3527 #timeline-container {
3528     position: absolute;
3529     top: 90px;
3530     left: 0;
3531     bottom: 0;
3532     right: 0;
3533     border-right: 0 none transparent;
3534     overflow-y: auto;
3535     overflow-x: hidden;
3536 }
3537
3538 .timeline-category-statusbar-item {
3539     height: 24px;
3540     line-height: 24px;
3541     padding-left: 6px;
3542     white-space: nowrap;
3543     text-overflow: ellipsis;
3544     overflow: hidden;
3545     font-weight: bold;
3546 }
3547
3548 .timeline-category-statusbar-item .timeline-category-checkbox {
3549     width: 10px;
3550     height: 11px;
3551     margin: 0 3px 0 5px;
3552     padding: 0;
3553     background-image: url(Images/timelineCheckmarks.png);
3554     background-repeat: no-repeat;
3555     background-position: 0 -66px;
3556     vertical-align: -1px;
3557     -webkit-appearance: none;
3558 }
3559
3560 .timeline-category-statusbar-item .timeline-category-checkbox:checked {
3561     background-position-x: -10px;
3562 }
3563
3564 .timeline-category-statusbar-item.timeline-category-loading .timeline-category-checkbox {
3565     background-position-y: 0;
3566 }
3567
3568 .timeline-category-statusbar-item.timeline-category-scripting .timeline-category-checkbox {
3569     background-position-y: -33px;
3570 }
3571
3572 .timeline-category-statusbar-item.timeline-category-rendering .timeline-category-checkbox {
3573     background-position-y: -11px;
3574 }
3575
3576 .timeline-tree-item {
3577     height: 18px;
3578     line-height: 15px;
3579     padding-right: 5px;
3580     padding-left: 10px;
3581     padding-top: 2px;
3582     white-space: nowrap;
3583     text-overflow: ellipsis;
3584     overflow: hidden;
3585 }
3586
3587 .timeline-expandable {
3588     position: absolute;
3589     border-left: 1px solid rgb(163, 163, 163);
3590 }
3591
3592 .timeline-expandable-left {
3593     position: absolute;
3594     top: 0;
3595     bottom: 0;
3596     left: 0;
3597     width: 3px;
3598     border-top: 1px solid rgb(163, 163, 163);
3599     border-bottom: 1px solid rgb(163, 163, 163);
3600 }
3601
3602 .timeline-expandable-collapsed {
3603     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
3604     background-position-x: 1px;
3605     background-position-y: 2px;
3606     background-repeat: no-repeat;
3607 }
3608
3609 .timeline-expandable-expanded {
3610     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
3611     background-position-x: 1px;
3612     background-position-y: 3px;
3613     background-repeat: no-repeat;
3614 }
3615
3616 .timeline-tree-item .type {
3617     padding-left: 14px;
3618 }
3619
3620 .timeline-tree-item .count {
3621     font-family: Helvetica, Arial, sans-serif;
3622     font-weight: bold;
3623 }
3624
3625 .timeline-tree-item .timeline-tree-icon {
3626     background-image: url(Images/timelineDots.png);
3627     margin-top: 2px;
3628     width: 12px;
3629     height: 12px;
3630     position: absolute;
3631 }
3632
3633 .timeline-tree-item.even {
3634     background-color: rgba(0, 0, 0, 0.05);
3635 }
3636
3637 .timeline-tree-item .data.dimmed {
3638     color: rgba(0, 0, 0, 0.7);
3639 }
3640
3641 #timeline-overview-timelines,
3642 #timeline-overview-memory {
3643     position: absolute;
3644     left: 0;
3645     right: 0;
3646     bottom: 0;
3647     top: 20px;
3648     z-index: 160;
3649 }
3650
3651 #timeline-overview-memory > canvas {
3652     position: absolute;
3653     left: 0;
3654     right: 0;
3655     bottom: 0;
3656     top: 5px;
3657 }
3658
3659
3660 #timeline-graphs {
3661     position: absolute;
3662     left: 0;
3663     right: 0;
3664     max-height: 100%;
3665     top: 19px;
3666 }
3667
3668 .timeline-graph-side {
3669     position: relative;
3670     height: 18px;
3671     padding: 0 5px;
3672     white-space: nowrap;
3673     margin-top: 0px;
3674     border-top: 1px solid transparent;
3675     overflow: hidden;
3676     pointer-events: none;
3677 }
3678
3679 .timeline-overview-graph-side {
3680     height: 20px;
3681     z-index: 170;
3682     pointer-events: none;
3683 }
3684
3685 .timeline-overview-graph-side .timeline-graph-bar {
3686     height: 13px;
3687 }
3688
3689 .timeline-graph-bar-area {
3690     position: absolute;
3691     top: 0;
3692     bottom: 0;
3693     right: 0;
3694     left: 3px;
3695     pointer-events: none;
3696 }
3697
3698 .timeline-graph-bar {
3699     position: absolute;
3700     top: 0;
3701     bottom: 0;
3702     margin: auto -2px;
3703     border-width: 4px 4px 5px;
3704     height: 9px;
3705     min-width: 5px;
3706     opacity: 0.8;
3707     -webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4;
3708     z-index: 180;
3709     pointer-events: visibleFill;
3710 }
3711
3712 .timeline-graph-bar.with-children {
3713     opacity: 0.2;
3714 }
3715
3716 .timeline-graph-bar.cpu {
3717     opacity: 0.6;
3718 }
3719
3720 .timeline-graph-side.even {
3721     background-color: rgba(0, 0, 0, 0.05);
3722 }
3723
3724 .timeline-category-loading .timeline-graph-bar {
3725     -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
3726 }
3727
3728 .timeline-category-scripting .timeline-graph-bar {
3729     -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
3730 }
3731
3732 .timeline-category-rendering .timeline-graph-bar {
3733     -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
3734 }
3735
3736 .timeline-aggregated-category {
3737     display: inline-block;
3738     height: 11px;
3739     margin-right: 2px;
3740     margin-left: 6px;
3741     position: relative;
3742     top: 2px;
3743     width: 10px;
3744 }
3745
3746 .timeline-loading {
3747     -webkit-border-image: url(Images/timelineBarBlue.png) 4 4 5 4;
3748 }
3749
3750 .timeline-scripting {
3751     -webkit-border-image: url(Images/timelineBarOrange.png) 4 4 5 4;
3752 }
3753
3754 .timeline-rendering {
3755     -webkit-border-image: url(Images/timelineBarPurple.png) 4 4 5 4;
3756 }
3757
3758 .popover .timeline-aggregated-category.timeline-loading {
3759     margin-left: 0px;
3760 }
3761
3762 .timeline-category-loading .timeline-tree-icon {
3763     background-position-y: 0px;
3764 }
3765
3766 .timeline-category-scripting .timeline-tree-icon {
3767     background-position-y: 48px;
3768 }
3769
3770 .timeline-category-rendering .timeline-tree-icon {
3771     background-position-y: 72px;
3772 }
3773
3774 .timeline-details {
3775     -webkit-user-select: text;
3776     vertical-align: top;
3777 }
3778
3779 .timeline-function-name {
3780     text-align: right;
3781 }
3782
3783 .timeline-stacktrace-title {
3784     padding-top: 4px;
3785 }
3786
3787 .timeline-details-row-title {
3788     font-weight: bold;
3789     text-align: right;
3790     white-space: nowrap;
3791 }
3792
3793 .timeline-details-row-data {
3794     white-space: nowrap;
3795 }
3796
3797 .timeline-details-title {
3798     border-bottom: 1px solid #B8B8B8;
3799     font-size: 11px;
3800     font-weight: bold;
3801     padding-bottom: 5px;
3802     padding-top: 0px;
3803     white-space: nowrap;
3804 }
3805
3806 .timeline-filter-status-bar-item .glyph {
3807     -webkit-mask-image: url(Images/largerResourcesButtonGlyph.png);
3808 }
3809
3810 .timeline-filter-status-bar-item.toggled-on .glyph {
3811     background-color: rgb(66, 129, 235) !important;
3812 }
3813
3814 .timeline-records-counter, .storage-application-cache-status, .storage-application-cache-connectivity {
3815     font-size: 11px;
3816     text-shadow: white 0 1px 0;
3817 }
3818
3819 #main-status-bar > .timeline-records-counter {
3820     float: right;
3821     margin-top: 4px;
3822     margin-right: 25px;
3823 }
3824
3825 #counters > .timeline-records-counter {
3826     float: left;
3827     margin-top: -2px;
3828 }
3829
3830 .storage-application-cache-status-icon, .storage-application-cache-connectivity-icon {
3831     margin-bottom: -3px;
3832     margin-left: 5px;
3833     vertical-align: middle;
3834 }
3835
3836 .status-bar-divider {
3837     margin-left: 7px;
3838     border-right: 1px solid #CCC;
3839 }
3840
3841 .storage-application-cache-status, .storage-application-cache-connectivity {
3842     position: relative;
3843     top: 4px;