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