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