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