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