Adds an overlay window that covers the scripts panel and
[WebKit-https.git] / WebCore / page / inspector / inspector.css
1 /*
2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  *
8  * 1.  Redistributions of source code must retain the above copyright
9  *     notice, this list of conditions and the following disclaimer. 
10  * 2.  Redistributions in binary form must reproduce the above copyright
11  *     notice, this list of conditions and the following disclaimer in the
12  *     documentation and/or other materials provided with the distribution. 
13  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
14  *     its contributors may be used to endorse or promote products derived
15  *     from this software without specific prior written permission. 
16  *
17  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
18  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
20  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
21  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
22  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
23  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
24  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
26  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27  */
28
29 body {
30     cursor: default;
31     height: 100%;
32     width: 100%;
33     overflow: hidden;
34     font-family: Lucida Grande, sans-serif;
35     font-size: 10px;
36     margin: 0;
37     -webkit-text-size-adjust: none;
38     -webkit-user-select: none;
39 }
40
41 * {
42     -webkit-box-sizing: border-box;
43 }
44
45 iframe, a img {
46     border: none;
47 }
48
49 img {
50     -webkit-user-drag: none;
51 }
52
53 .hidden {
54     display: none;
55 }
56
57 #toolbar {
58     position: absolute;
59     top: 0;
60     left: 0;
61     right: 0;
62     height: 56px;
63     display: -webkit-box;
64     padding: 0 5px;
65     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
66     border-bottom: 1px solid rgb(80, 80, 80);
67     -webkit-box-orient: horizontal;
68     -webkit-background-origin: padding;
69     -webkit-background-clip: padding;
70 }
71
72 body.inactive #toolbar {
73     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(207, 207, 207)));
74 }
75
76 body.detached.platform-mac-leopard #toolbar {
77     background: transparent !important;
78 }
79
80 .toolbar-item {
81     display: -webkit-box;
82     padding: 4px 6px;
83     margin: 0;
84     background-color: transparent;
85     border-style: none;
86     border-color: transparent;
87     outline: none;
88     -webkit-box-orient: vertical;
89     -webkit-box-align: center;
90     -webkit-box-pack: end;
91 }
92
93 .toolbar-item.toggleable.toggled-on {
94     border-width: 0 2px 0 2px;
95     padding: 4px 4px;
96     -webkit-border-image: url(Images/toolbarItemSelected.png) 0 2 0 2;
97 }
98
99 .toolbar-item.flexable-space {
100     -webkit-box-flex: 1;
101     visibility: hidden;
102 }
103
104 .toolbar-item input {
105     margin-bottom: 8px;
106 }
107
108 .toolbar-icon {
109     width: 32px;
110     height: 32px;
111 }
112
113 .toolbar-label {
114     font-size: 11px;
115     font-family: Lucida Grande, sans-serif;
116     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
117 }
118
119 .toolbar-item.elements .toolbar-icon {
120     content: url(Images/elementsIcon.png);
121 }
122
123 .toolbar-item.resources .toolbar-icon {
124     content: url(Images/resourcesIcon.png);
125 }
126
127 .toolbar-item.scripts .toolbar-icon {
128     content: url(Images/scriptsIcon.png);
129 }
130
131 .toolbar-item.databases .toolbar-icon {
132     content: url(Images/databasesIcon.png);
133 }
134
135 .toolbar-item.profiles .toolbar-icon {
136     content: url(Images/profilesIcon.png);
137 }
138
139 #searchResults {
140     position: absolute;
141     top: -100px;
142     left: 0;
143     right: 0;
144     height: 100px;
145     z-index: -1;
146     background-color: white;
147     border-bottom: 1px solid rgb(180, 180, 180);
148     overflow-y: auto;
149     overflow-x: hidden;
150     -webkit-box-sizing: border-box;
151 }
152
153 .search-results-section {
154     color: gray;
155     width: 28px;
156     float: left;
157     margin-left: -45px;
158     text-align: right;
159     font-size: 10px;
160     margin-top: 1px;
161     white-space: nowrap;
162 }
163
164 .selected .search-results-section {
165     color: rgba(255, 255, 255, 0.8);
166 }
167
168 body.inactive .focused .selected .search-results-section {
169     color: rgba(0, 0, 0, 0.5);
170 }
171
172 .blurred .selected .search-results-section {
173     color: rgba(0, 0, 0, 0.5);
174 }
175
176 #searchResults > ol > ol > li {
177     padding-left: 45px;
178     white-space: nowrap;
179 }
180
181 .search-matched-string {
182     background-color: #ff8;
183 }
184
185 .selected .search-matched-string {
186     background-color: transparent;
187 }
188
189 #searchResultsResizer {
190     position: absolute;
191     height: 5px;
192     left: 0;
193     right: 0;
194     cursor: row-resize;
195 }
196
197 #main {
198     position: absolute;
199     z-index: 1;
200     top: 56px;
201     left: 0;
202     right: 0;
203     bottom: 0;
204     overflow: hidden;
205     background-color: white;
206 }
207
208 #main-panels {
209     position: absolute;
210     top: 0;
211     left: 0;
212     right: 0;
213     bottom: 23px;
214     overflow: hidden;
215 }
216
217 #main-status-bar {
218     position: absolute;
219     bottom: 0;
220     left: 0;
221     right: 0;
222 }
223
224 body.console-visible #main-status-bar {
225     height: 24px;
226     background-image: url(Images/statusbarResizerVertical.png), url(Images/statusbarBackground.png);
227     background-repeat: no-repeat, repeat-x;
228     background-position: right center, center;
229     cursor: row-resize;
230 }
231
232 body.console-visible #main-status-bar * {
233     cursor: default;
234 }
235
236 body.console-visible #main-panels {
237     bottom: 24px;
238 }
239
240 .status-bar {
241     background-color: rgb(235, 235, 235);
242     background-image: url(Images/statusbarBackground.png);
243     background-repeat: repeat-x;
244     white-space: nowrap;
245     height: 23px;
246     overflow: hidden;
247     z-index: 12;
248 }
249
250 .status-bar > div {
251     display: inline-block;
252     vertical-align: top;
253 }
254
255 .status-bar-item {
256     display: inline-block;
257     height: 24px;
258     padding: 0;
259     margin-left: -1px;
260     margin-right: 0;
261     vertical-align: top;
262     border: 0 transparent none;
263     background-color: transparent;
264 }
265
266 .status-bar-item:active {
267     position: relative;
268     z-index: 200;
269 }
270
271 button.status-bar-item {
272     width: 32px;
273     background-image: url(Images/statusbarButtons.png);
274     background-position: 0 0;
275     outline: none;
276 }
277
278 button.status-bar-item:active {
279     background-position: 32px 0;
280 }
281
282 button.status-bar-item:disabled {
283     background-position: 0 0 !important;
284 }
285
286 select.status-bar-item {
287     min-width: 48px;
288     border-width: 0 17px 0 2px;
289     outline: none;
290     padding: 0 2px 0 6px;
291     font-weight: bold;
292     color: rgb(48, 48, 48);
293     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
294     -webkit-border-image: url(Images/statusbarMenuButton.png) 0 17 0 2;
295     -webkit-border-radius: 0;
296     -webkit-appearance: none;
297 }
298
299 select.status-bar-item:active {
300     color: black;
301     -webkit-border-image: url(Images/statusbarMenuButtonSelected.png) 0 17 0 2;
302 }
303
304 #dock-status-bar-item {
305     background-image: url(Images/dockButtons.png);
306 }
307
308 body.attached #dock-status-bar-item:active {
309     background-position: 32px 0;
310 }
311
312 body.detached #dock-status-bar-item {
313     background-position: 0 24px;
314 }
315
316 body.detached #dock-status-bar-item.toggled-on:active {
317     background-position: 32px 24px;
318 }
319
320 #console-status-bar-item {
321     background-image: url(Images/consoleButtons.png);
322 }
323
324 #console-status-bar-item:active {
325     background-position: 32px 0;
326 }
327
328 #console-status-bar-item.toggled-on {
329     background-position: 0 24px;
330 }
331
332 #console-status-bar-item.toggled-on:active {
333     background-position: 32px 24px;
334 }
335
336 #clear-console-status-bar-item {
337     background-image: url(Images/clearConsoleButtons.png);
338 }
339
340 #clear-console-status-bar-item:active {
341     background-position: 32px 0;
342 }
343
344 #console {
345     display: none;
346     position: absolute;
347     bottom: 0;
348     left: 0;
349     right: 0;
350     height: 200px;
351     background-color: white;
352     background-image: url(Images/statusbarBottomBackground.png);
353     background-repeat: repeat-x;
354     background-position: bottom;
355 }
356
357 body.console-visible #console {
358     display: block;
359 }
360
361 #console-status-bar {
362     position: absolute;
363     bottom: 0;
364     left: 0;
365     right: 0;
366     background: none;
367 }
368
369 #console-messages {
370     position: absolute;
371     top: 0;
372     left: 0;
373     right: 0;
374     bottom: 23px;
375     font-size: 10px;
376     font-family: Monaco, Lucida Console, monospace;
377     padding: 2px 0;
378     overflow-y: overlay;
379     -webkit-user-select: text;
380     -webkit-text-size-adjust: auto;
381 }
382
383 #console-prompt {
384     position: relative;
385     outline: none;
386     padding: 1px 22px 1px 24px;
387     min-height: 16px; 
388     white-space: pre-wrap;
389     -webkit-user-modify: read-write-plaintext-only;
390 }
391
392 #console-prompt::before {
393     background-image: url(Images/userInputIcon.png);
394 }
395
396 .console-message, .console-user-command {
397     position: relative;
398     border-bottom: 1px solid rgb(240, 240, 240);
399     padding: 1px 22px 1px 24px;
400     min-height: 16px; 
401 }
402
403 .console-message::before, .console-user-command::before, #console-prompt::before {
404     position: absolute;
405     display: block;
406     content: "";
407     left: 7px;
408     top: 0.8em;
409     width: 10px;
410     height: 10px;
411     margin-top: -5px;
412     -webkit-user-select: none;
413 }
414
415 .console-message-text {
416     white-space: pre-wrap;
417 }
418
419 .console-error-level .console-message-text {
420     color: red;
421 }
422
423 .console-error-level::before {
424     background-image: url(Images/errorIcon.png);
425 }
426
427 .console-warning-level::before {
428     background-image: url(Images/warningIcon.png);
429 }
430
431 .console-user-command .console-message {
432     margin-left: -24px;
433     padding-right: 0;
434     border-bottom: none;
435 }
436
437 .console-user-command::before {
438     background-image: url(Images/userInputPreviousIcon.png);
439 }
440
441 .console-user-command > .console-message-text {
442     color: rgb(0, 128, 255);
443 }
444
445 .console-message-url {
446     color: rgb(33%, 33%, 33%) !important;
447     cursor: pointer;
448 }
449
450 .console-message-url::after {
451     display: inline-block;
452     content: url(Images/goArrow.png);
453     margin-left: 3px;
454     width: 12px;
455     height: 12px;
456     vertical-align: top;
457     opacity: 0.75;
458     -webkit-user-select: none;
459 }
460
461 .console-message-url:hover {
462     color: rgb(15%, 15%, 15%);
463 }
464
465 .console-message-url:hover::after {
466     opacity: 1;
467 }
468
469 .auto-complete-text {
470     color: rgb(128, 128, 128);
471     -webkit-user-select: none;
472     -webkit-user-modify: read-only;
473 }
474
475 .panel {
476     display: none;
477     overflow: hidden;
478     position: absolute;
479     top: 0;
480     left: 0;
481     right: 0;
482     bottom: 0;
483 }
484
485 .panel.visible {
486     display: block;
487 }
488
489 .resource-view {
490     display: none;
491     overflow: hidden;
492     position: absolute;
493     top: 0;
494     left: 0;
495     right: 0;
496     bottom: 0;
497 }
498
499 .resource-view.visible {
500     display: block;
501 }
502
503 .resource-view .resource-view-content {
504     position: absolute;
505     top: 0;
506     right: 0;
507     left: 0;
508     bottom: 0;
509 }
510
511 .resource-view.font {
512     font-size: 60px;
513     white-space: pre-wrap;
514     word-wrap: break-word;
515     text-align: center;
516 }
517
518 .resource-view.font .preview {
519     position: absolute;
520     margin-top: auto;
521     margin-bottom: auto;
522     top: 0;
523     left: 0;
524     right: 0;
525     bottom: 0;
526 }
527
528 .resource-view.image .resource-view-content > .image {
529     position: relative;
530     height: 70%;
531     padding: 20px;
532 }
533
534 .resource-view.image .resource-view-content > .info {
535     position: relative;
536     height: 30%;
537     padding-top: 10px;
538     overflow: auto;
539     font-size: 11px;
540 }
541
542 .resource-view.image img {
543     margin: auto;
544     position: absolute;
545     top: 0;
546     left: 0;
547     right: 0;
548     bottom: 0;
549     max-width: 80%;
550     max-height: 80%;
551     background-image: url(Images/checker.png);
552     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
553 }
554
555 .resource-view.image .title {
556     text-align: center;
557     font-size: 13px;
558 }
559
560 .resource-view.image .infoList {
561     margin: 0;
562 }
563
564 .resource-view.image .infoList dt {
565     font-weight: bold;
566     display: inline-block;
567     width: 50%;
568     text-align: right;
569 }
570
571 .resource-view.image .infoList dd {
572     display: inline-block;
573     padding-left: 10px;
574     width: 50%;
575     text-align: left;
576     margin: 0;
577 }
578
579 .resource-view.image .infoList dd::after {
580     white-space: pre;
581     content: "\A";
582 }
583
584 #elements-content {
585     display: block;
586     overflow: auto;
587     padding: 0;
588     position: absolute;
589     top: 0;
590     left: 0;
591     right: 225px;
592     bottom: 0;
593 }
594
595 #elements-sidebar {
596     position: absolute;
597     top: 0;
598     right: 0;
599     bottom: 0;
600     width: 225px;
601     background-color: rgb(245, 245, 245);
602     border-left: 1px solid rgb(64%, 64%, 64%);
603     cursor: default;
604     overflow: auto;
605 }
606
607 .crumbs {
608     font-size: 11px;
609     line-height: 19px;
610     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
611     color: rgb(20, 20, 20);
612     margin-left: -1px;
613     padding-right: 12px;
614 }
615
616 .crumbs .crumb {
617     height: 24px;
618     border-width: 0 12px 0 2px;
619     -webkit-border-image: url(Images/segment.png) 0 12 0 2;
620     margin-right: -12px;
621     padding-left: 18px;
622     padding-right: 2px;
623     white-space: nowrap;
624     line-height: 23px;
625     float: right;
626 }
627
628 .crumbs .crumb.collapsed > * {
629     display: none;
630 }
631
632 .crumbs .crumb.collapsed::before {
633     content: "\2026";
634     font-weight: bold;
635 }
636
637 .crumbs .crumb.compact .extra {
638     display: none;
639 }
640
641 .crumbs .crumb.dimmed {
642     color: rgba(0, 0, 0, 0.45);
643 }
644
645 .crumbs .crumb.start {
646     padding-left: 7px;
647 }
648
649 .crumbs .crumb.end {
650     border-width: 0 2px 0 2px;
651     padding-right: 6px;
652     -webkit-border-image: url(Images/segmentEnd.png) 0 2 0 2;
653 }
654
655 .crumbs .crumb.selected {
656     -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2;
657     color: black;
658     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
659 }
660
661 .crumbs .crumb.selected:hover {
662     -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2;
663 }
664
665 .crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
666     -webkit-border-image: url(Images/segmentSelectedEnd.png) 0 2 0 2;
667 }
668
669 .crumbs .crumb:hover {
670     -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2;
671     color: black;
672 }
673
674 .crumbs .crumb.dimmed:hover {
675     -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2;
676     color: rgba(0, 0, 0, 0.75);
677 }
678
679 .crumbs .crumb.end:hover {
680     -webkit-border-image: url(Images/segmentHoverEnd.png) 0 2 0 2;
681 }
682
683 .outline-disclosure li .selection {
684     display: none;
685     position: absolute;
686     left: 0;
687     right: 0;
688     height: 15px;
689     z-index: -1;
690 }
691
692 .outline-disclosure li.selected .selection {
693     display: block;
694 }
695
696 .focused .outline-disclosure li.selected .selection {
697     background-color: rgb(56, 121, 217);
698 }
699
700 .blurred .outline-disclosure li.selected .selection, body.inactive .outline-disclosure li.selected .selection {
701     background-color: rgb(212, 212, 212);
702 }
703
704 .outline-disclosure > ol {
705     position: relative;
706     padding: 2px 6px !important;
707     margin: 0;
708     color: black;
709     cursor: default;
710     min-width: 100%;
711 }
712
713 .outline-disclosure, .outline-disclosure ol {
714     list-style-type: none;
715     font-size: 11px;
716     -webkit-padding-start: 12px;
717     margin: 0;
718 }
719
720 .outline-disclosure li {
721     padding: 0 0 2px 14px;
722     margin-top: 1px;
723     margin-bottom: 1px;
724     word-wrap: break-word;
725     text-indent: -2px
726 }
727
728 .blurred .outline-disclosure li.selected, body.inactive .outline-disclosure li.selected {
729     color: black;
730 }
731
732 .outline-disclosure li.selected {
733     color: white;
734 }
735
736 .outline-disclosure li.parent {
737     text-indent: -12px
738 }
739
740 .elements.panel .outline-disclosure li .webkit-html-tag.close {
741     margin-left: -12px;
742 }
743
744 .outline-disclosure li.parent::before {
745     content: url(Images/treeRightTriangleBlack.png);
746     float: left;
747     width: 8px;
748     height: 8px;
749     margin-top: 1px;
750     padding-right: 2px;
751 }
752
753 .blurred .outline-disclosure li.parent.selected::before, body.inactive .outline-disclosure li.parent.selected::before {
754     content: url(Images/treeRightTriangleBlack.png);
755 }
756
757 .outline-disclosure li.parent.selected::before {
758     content: url(Images/treeRightTriangleWhite.png);
759 }
760
761 .blurred .outline-disclosure li.parent.expanded.selected::before, body.inactive .outline-disclosure li.parent.expanded.selected::before {
762     content: url(Images/treeDownTriangleBlack.png);
763 }
764
765 .outline-disclosure li.parent.expanded::before {
766     content: url(Images/treeDownTriangleBlack.png);
767 }
768
769 .outline-disclosure li.parent.expanded.selected::before {
770     content: url(Images/treeDownTriangleWhite.png);
771 }
772
773 .outline-disclosure ol.children {
774     display: none;
775 }
776
777 .outline-disclosure ol.children.expanded {
778     display: block;
779 }
780
781 .webkit-html-comment {
782     /* Keep this in sync with view-source.css (.webkit-html-comment) */
783     color: rgb(35, 110, 37);
784 }
785
786 .webkit-html-tag {
787     /* Keep this in sync with view-source.css (.webkit-html-tag) */
788     color: rgb(136, 18, 128);
789 }
790
791 .webkit-html-doctype {
792     /* Keep this in sync with view-source.css (.webkit-html-doctype) */
793     color: rgb(192, 192, 192);
794 }
795
796 .webkit-html-attribute-name {
797     /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
798     color: rgb(153, 69, 0);
799 }
800
801 .webkit-html-attribute-value {
802     /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
803     color: rgb(26, 26, 166);
804 }
805
806 .webkit-html-external-link, .webkit-html-resource-link {
807     /* Keep this in sync with view-source.css (.webkit-html-external-link, .webkit-html-resource-link) */
808     color: #00e;
809 }
810
811 .webkit-html-external-link {
812     /* Keep this in sync with view-source.css (.webkit-html-external-link) */
813     text-decoration: none;
814 }
815
816 .webkit-html-external-link:hover {
817     /* Keep this in sync with view-source.css (.webkit-html-external-link:hover) */
818     text-decoration: underline;
819 }
820
821 body:not(.inactive) .focused .outline-disclosure li.selected * {
822     color: inherit;
823 }
824
825 .placard {
826     position: relative;
827     margin-top: 1px;
828     padding: 3px 8px 4px 18px;
829     min-height: 18px;
830     white-space: nowrap;
831 }
832
833 .placard:nth-of-type(2n) {
834     background-color: rgb(234, 243, 255);
835 }
836
837 .placard.selected {
838     border-top: 1px solid rgb(145, 160, 192);
839     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
840     -webkit-background-origin: padding;
841     -webkit-background-clip: padding;
842 }
843
844 .focused .placard.selected {
845     border-top: 1px solid rgb(68, 128, 200);
846     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
847 }
848
849 body.inactive .placard.selected {
850     border-top: 1px solid rgb(151, 151, 151);
851     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
852 }
853
854 .placard .title {
855     color: black;
856     font-weight: normal;
857     word-wrap: break-word;
858     white-space: normal;
859 }
860
861 .placard.selected .title {
862     color: white;
863     font-weight: bold;
864 }
865
866 .placard .subtitle {
867     float: right;
868     font-size: 10px;
869     margin-left: 5px;
870     max-width: 55%;
871     color: rgba(0, 0, 0, 0.7);
872     text-overflow: ellipsis;
873     overflow: hidden;
874 }
875
876 .placard.selected .subtitle {
877     color: rgba(255, 255, 255, 0.7);
878 }
879
880 .placard .subtitle a {
881     color: inherit;
882 }
883
884 .section {
885     position: relative;
886     margin-top: 1px;
887 }
888
889 .section:nth-last-of-type(1) {
890     margin-bottom: 1px;
891 }
892
893 .section .header {
894     padding: 2px 8px 4px 18px;
895     border-top: 1px solid rgb(145, 160, 192);
896     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
897     min-height: 18px;
898     white-space: nowrap;
899     -webkit-background-origin: padding;
900     -webkit-background-clip: padding;
901 }
902
903 .section .header::before {
904     position: absolute;
905     top: 4px;
906     left: 7px;
907     width: 8px;
908     height: 8px;
909     content: url(Images/treeRightTriangleWhite.png);
910 }
911
912 .section.expanded .header::before {
913     content: url(Images/treeDownTriangleWhite.png);
914 }
915
916 .section .header .title {
917     color: white;
918     font-weight: bold;
919     word-wrap: break-word;
920     white-space: normal;
921 }
922
923 .section .header label {
924     display: none;
925 }
926
927 .section.expanded .header label {
928     display: inline;
929 }
930
931 .section .header input[type=checkbox] {
932     height: 10px;
933     width: 10px;
934     margin-left: 0;
935     margin-top: 0;
936     margin-bottom: 0;
937     vertical-align: 2px;
938 }
939
940 .section .header .subtitle {
941     float: right;
942     font-size: 10px;
943     margin-left: 5px;
944     max-width: 55%;
945     color: rgba(255, 255, 255, 0.7);
946     text-overflow: ellipsis;
947     overflow: hidden;
948 }
949
950 .section .header .subtitle a {
951     color: inherit;
952 }
953
954 .section .properties {
955     display: none;
956     margin: 0;
957     padding: 2px 6px 3px;
958     list-style: none;
959     background-color: white;
960 }
961
962 .section.expanded .properties {
963     display: block;
964 }
965
966 .section .properties li {
967     margin-left: 12px;
968     white-space: nowrap;
969     text-overflow: ellipsis;
970     overflow: hidden;
971     -webkit-user-select: text;
972     cursor: auto;
973     outline: none;
974 }
975
976 .section .properties li.parent {
977     margin-left: 1px;
978 }
979
980 .section .properties ol {
981     display: none;
982     margin: 0;
983     -webkit-padding-start: 12px;
984     list-style: none;
985 }
986
987 .section .properties ol.expanded {
988     display: block;
989 }
990
991 .section .properties li.parent::before {
992     content: url(Images/treeRightTriangleBlack.png);
993     opacity: 0.75;
994     float: left;
995     width: 8px;
996     height: 8px;
997     margin-top: 0;
998     padding-right: 3px;
999     -webkit-user-select: none;
1000     cursor: default;
1001 }
1002
1003 .section .properties li.parent.expanded::before {
1004     content: url(Images/treeDownTriangleBlack.png);
1005     margin-top: 1px;
1006 }
1007
1008 .section .properties li .info {
1009     padding-top: 4px;
1010     padding-bottom: 3px;
1011 }
1012
1013 .editing {
1014     -webkit-user-select: text;
1015     -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
1016     outline: 1px solid rgb(66%, 66%, 66%) !important;
1017     background-color: white;
1018     -webkit-user-modify: read-write-plaintext-only;
1019     text-overflow: clip;
1020     padding-left: 2px;
1021     margin-bottom: -1px;
1022     padding-bottom: 1px;
1023     text-decoration: none !important;
1024     opacity: 1.0 !important;
1025 }
1026
1027 .editing, .editing * {
1028     color: black !important;
1029 }
1030
1031 .section .properties li.editing {
1032     margin-left: 8px;
1033     text-overflow: clip;
1034 }
1035
1036 .section .properties li.editing.parent::before {
1037     display: none;
1038 }
1039
1040 .section .properties .overloaded {
1041     text-decoration: line-through;
1042 }
1043
1044 .section .properties .implicit, .section .properties .inherited {
1045     opacity: 0.5;
1046 }
1047
1048 .section:not(.show-inherited) .properties .inherited {
1049     display: none;
1050 }
1051
1052 .section .properties .name {
1053     color: rgb(136, 19, 145);
1054 }
1055
1056 .section .properties .value.dimmed {
1057     color: rgb(100, 100, 100);
1058 }
1059
1060 .section .properties .number {
1061     color: blue;
1062 }
1063
1064 .section .properties .priority {
1065     color: rgb(128, 0, 0);
1066 }
1067
1068 .section .properties .keyword {
1069     color: rgb(136, 19, 79);
1070 }
1071
1072 .section .properties .color {
1073     color: rgb(118, 15, 21);
1074 }
1075
1076 .swatch {
1077     display: inline-block;
1078     vertical-align: baseline;
1079     margin-left: 4px;
1080     margin-bottom: -1px;
1081     width: 1em;
1082     height: 1em;
1083     border: 1px solid rgb(180, 180, 180);
1084 }
1085
1086 .pane:not(.expanded) + .pane, .pane:first-of-type {
1087     margin-top: -1px;
1088 }
1089
1090 .pane > .title {
1091     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)));
1092     height: 20px;
1093     padding: 0 5px;
1094     border-top: 1px solid rgb(189, 189, 189);
1095     border-bottom: 1px solid rgb(189, 189, 189);
1096     font-weight: bold;
1097     font-size: 12px;
1098     line-height: 18px;
1099     color: rgb(110, 110, 110);
1100     text-shadow: white 0 1px 0;
1101     -webkit-background-origin: padding;
1102     -webkit-background-clip: padding;
1103 }
1104
1105 .pane > .title:active {
1106     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)));
1107     border-top: 1px solid rgb(178, 178, 178);
1108     border-bottom: 1px solid rgb(178, 178, 178);
1109 }
1110
1111 .pane > .title::before {
1112     content: url(Images/disclosureTriangleSmallRightBlack.png);
1113     float: left;
1114     width: 11px;
1115     height: 12px;
1116     margin-right: 2px;
1117     margin-top: 1px;
1118 }
1119
1120 .pane.expanded > .title::before {
1121     content: url(Images/disclosureTriangleSmallDownBlack.png);
1122 }
1123
1124 .pane > .body {
1125     position: relative;
1126     display: none;
1127     background-color: white;
1128     overflow-y: auto;
1129     overflow-x: hidden;
1130 }
1131
1132 .pane > .body .info {
1133     text-align: center;
1134     font-style: italic;
1135     font-size: 10px;
1136     padding: 6px;
1137     color: gray;
1138 }
1139
1140 .pane.expanded > .body, .pane.expanded > .growbar {
1141     display: block;
1142 }
1143
1144 .pane.expanded:nth-last-of-type(1) {
1145     border-bottom: 1px solid rgb(189, 189, 189);
1146 }
1147
1148 .pane > .growbar {
1149     display: none;
1150     background-image: url(Images/paneGrowHandleLine.png), url(Images/paneBottomGrow.png);
1151     background-repeat: no-repeat, repeat-x;
1152     background-position: center center, bottom;
1153     height: 5px;
1154 }
1155
1156 .metrics {
1157     padding: 8px;
1158     font-size: 10px;
1159     text-align: center;
1160     white-space: nowrap;
1161 }
1162
1163 .metrics .label {
1164     position: absolute;
1165     margin-top: -10px;
1166     font-size: 9px;
1167     color: grey;
1168     background-color: white;
1169     margin-left: 3px;
1170     padding-left: 2px;
1171     padding-right: 2px;
1172 }
1173
1174 .metrics .margin {
1175     border: 1px dashed;
1176     display: inline-block;
1177     padding: 3px;
1178     margin: 3px;
1179 }
1180
1181 .metrics .border {
1182     border: 1px black solid;
1183     display: inline-block;
1184     vertical-align: middle;
1185     padding: 3px;
1186     margin: 3px;
1187 }
1188
1189 .metrics .padding {
1190     border: 1px grey dashed;
1191     display: inline-block;
1192     vertical-align: middle;
1193     padding: 3px;
1194     margin: 3px;
1195 }
1196
1197 .metrics .content {
1198     position: static;
1199     border: 1px grey solid;
1200     display: inline-block;
1201     vertical-align: middle;
1202     padding: 3px;
1203     margin: 3px;
1204     min-width: 80px;
1205     text-align: center;
1206     overflow: visible;
1207 }
1208
1209 .metrics .left {
1210     display: inline-block;
1211     text-align: center;
1212     vertical-align: middle;
1213 }
1214
1215 .metrics .right {
1216     display: inline-block;
1217     text-align: center;
1218     vertical-align: middle;
1219 }
1220
1221 .metrics .top {
1222     text-align: center;
1223 }
1224
1225 .metrics .bottom {
1226     text-align: center;
1227 }
1228
1229 .sidebar {
1230     position: absolute;
1231     top: 0;
1232     left: 0;
1233     bottom: 0;
1234     width: 200px;
1235     overflow-y: auto;
1236     overflow-x: hidden;
1237     background-color: rgb(214, 221, 229);
1238     border-right: 1px solid rgb(64%, 64%, 64%);
1239 }
1240
1241 body.inactive .sidebar {
1242     background-color: rgb(232, 232, 232);
1243 }
1244
1245 .database-sidebar-tree-item .icon {
1246     content: url(Images/database.png);
1247 }
1248
1249 .database-table-sidebar-tree-item .icon {
1250     content: url(Images/databaseTable.png);
1251 }
1252
1253 #database-views {
1254     position: absolute;
1255     top: 0;
1256     right: 0;
1257     left: 200px;
1258     bottom: 0;
1259 }
1260
1261 .database-view {
1262     display: none;
1263     overflow: hidden;
1264     position: absolute;
1265     top: 0;
1266     left: 0;
1267     right: 0;
1268     bottom: 0;
1269 }
1270
1271 .database-view.visible {
1272     display: block;
1273 }
1274
1275 .database-view.table {
1276     font-size: 10px;
1277     overflow-y: auto;
1278     overflow-x: hidden;
1279 }
1280
1281 .database-view.table .data-grid {
1282     border: none;
1283     height: 100%;
1284 }
1285
1286 .database-view.table .database-table-empty, .database-view.table .database-table-error {
1287     position: absolute;
1288     top: 0;
1289     bottom: 25%;
1290     left: 0;
1291     right: 0;
1292     font-size: 24px;
1293     color: rgb(75%, 75%, 75%);
1294     margin-top: auto;
1295     margin-bottom: auto;
1296     height: 50px;
1297     line-height: 26px;
1298     text-align: center;
1299     font-weight: bold;
1300     padding: 10px;
1301     white-space: pre-wrap;
1302 }
1303
1304 .database-view.table .database-table-error {
1305     color: rgb(66%, 33%, 33%);
1306 }
1307
1308 .data-grid .database-result-filler-row {
1309     height: auto;
1310 }
1311
1312 .data-grid .database-result-filler-row.alternate td {
1313     background-position-y: 16px;
1314 }
1315
1316 .database-result-filler-row td {
1317     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)));
1318     -webkit-background-size: auto 32px;
1319     -webkit-background-origin: padding;
1320     -webkit-background-clip: padding;
1321 }
1322
1323 .data-grid {
1324     border: 1px solid #aaa;
1325     table-layout: fixed;
1326     border-spacing: 0;
1327     border-collapse: collapse;
1328     width: 100%;
1329 }
1330
1331 .data-grid th {
1332     text-align: left;
1333     background: url(Images/glossyHeader.png) repeat-x;
1334     border-right: 1px solid #aaa;
1335     height: 15px;
1336     border-bottom: 1px solid #aaa;
1337     font-weight: normal;
1338     vertical-align: middle;
1339     padding: 0 4px;
1340     white-space: nowrap;
1341 }
1342
1343 .data-grid tr {
1344     height: 16px;
1345 }
1346
1347 .data-grid tr.alternate {
1348     background-color: rgb(236, 243, 254);
1349 }
1350
1351 .data-grid td {
1352     vertical-align: top;
1353     padding: 2px 4px;
1354     white-space: nowrap;
1355     border-right: 1px solid #aaa;
1356     -webkit-user-select: text;
1357 }
1358
1359 .data-grid td > div, .data-grid th > div {
1360     white-space: nowrap;
1361     text-overflow: ellipsis;
1362     overflow: hidden;
1363 }
1364
1365 .data-grid th.narrow {
1366     width: 75px;
1367 }
1368
1369 .data-grid th.selected {
1370     border-top: 1px solid rgb(156, 168, 207);
1371     border-bottom: 1px solid rgb(107, 139, 195);
1372     border-left: url(Images/glossySelected.png);
1373     border-right: url(Images/glossySelected.png);
1374     background: url(Images/glossySelected.png) repeat-x;
1375 }
1376
1377 .data-grid th.sort-ascending::before {
1378     float: right;
1379     display: inline-block;
1380     margin-bottom: 2px;
1381     margin-right: 3px;
1382     width: 8px;
1383     height: 8px;
1384     content: url(Images/treeUpTriangleBlack.png);
1385 }
1386
1387 .data-grid th.sort-descending::before {
1388     float: right;
1389     display: inline-block;
1390     margin-top: 2px;
1391     margin-right: 3px;
1392     width: 8px;
1393     height: 8px;
1394     content: url(Images/treeDownTriangleBlack.png);
1395 }
1396
1397 body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-descending {
1398     background: url(Images/glossyHeader.png) repeat-x;
1399 }
1400
1401 .database-view.query {
1402     font-size: 10px;
1403     font-family: Monaco, Lucida Console, monospace;
1404     padding: 2px 0;
1405     overflow-y: overlay;
1406     overflow-x: hidden;
1407     -webkit-text-size-adjust: auto;
1408 }
1409
1410 .database-query-prompt {
1411     position: relative;
1412     outline: none;
1413     padding: 1px 22px 1px 24px;
1414     min-height: 16px; 
1415     white-space: pre-wrap;
1416     -webkit-user-modify: read-write-plaintext-only;
1417     -webkit-user-select: text;
1418 }
1419
1420 .database-user-query::before, .database-query-prompt::before, .database-query-result::before {
1421     position: absolute;
1422     display: block;
1423     content: "";
1424     left: 7px;
1425     top: 0.8em;
1426     width: 10px;
1427     height: 10px;
1428     margin-top: -5px;
1429     -webkit-user-select: none;
1430 }
1431
1432 .database-query-prompt::before {
1433     background-image: url(Images/userInputIcon.png);
1434 }
1435
1436 .database-user-query {
1437     position: relative;
1438     border-bottom: 1px solid rgb(245, 245, 245);
1439     padding: 1px 22px 1px 24px;
1440     min-height: 16px; 
1441 }
1442
1443 .database-user-query::before {
1444     background-image: url(Images/userInputPreviousIcon.png);
1445 }
1446
1447 .database-query-text {
1448     color: rgb(0, 128, 255);
1449     -webkit-user-select: text;
1450 }
1451
1452 .database-query-result {
1453     position: relative;
1454     padding: 1px 22px 1px 24px;
1455     min-height: 16px;
1456     margin-left: -24px;
1457     padding-right: 0;
1458 }
1459
1460 .database-query-result.error {
1461     color: red;
1462     -webkit-user-select: text;
1463 }
1464
1465 .database-query-result.error::before {
1466     background-image: url(Images/errorIcon.png);
1467 }
1468
1469 #scripts-attach-overlay {
1470     z-index: 1000;
1471     position: absolute;
1472     top: 0;
1473     left: 0;
1474     right: 0;
1475     bottom: 0;
1476     background-color: white;
1477     color: rgb(96, 96, 96);
1478     padding: 75px 50px;
1479     text-align: center;
1480     font-size: 16px;
1481 }
1482
1483 #scripts-attach-overlay h1 {
1484     font-size: 18px;
1485 }
1486
1487 #scripts-attach-overlay button {
1488     padding-left: 15px;
1489     padding-right: 15px;
1490 }
1491
1492 #scripts-debugging-status-bar-item {
1493     background-image: url(Images/debuggingButtons.png);
1494 }
1495
1496 #scripts-debugging-status-bar-item:active {
1497     background-position: 32px 0;
1498 }
1499
1500 #scripts-debugging-status-bar-item.toggled-on {
1501     background-position: 0 24px;
1502 }
1503
1504 #scripts-debugging-status-bar-item.toggled-on:active {
1505     background-position: 32px 24px;
1506 }
1507
1508 #scripts-status-bar {
1509     position: absolute;
1510     top: -1px;
1511     left: 0;
1512     right: 0;
1513     height: 24px;
1514 }
1515
1516 #scripts-files {
1517     max-width: 150px;
1518 }
1519
1520 #scripts-functions {
1521     max-width: 150px;
1522 }
1523
1524 #scripts-status-bar .status-bar-item img {
1525     margin-top: 2px;
1526 }
1527
1528 #scripts-status-bar .status-bar-item:disabled img {
1529     opacity: 0.5;
1530 }
1531
1532 #scripts-back img {
1533     content: url(Images/back.png);
1534 }
1535
1536 #scripts-forward img {
1537     content: url(Images/forward.png);
1538 }
1539
1540 #scripts-pause img {
1541     content: url(Images/debuggerPause.png);
1542 }
1543
1544 #scripts-pause.paused img {
1545     content: url(Images/debuggerContinue.png);
1546 }
1547
1548 #scripts-step-over img {
1549     content: url(Images/debuggerStepOver.png);
1550 }
1551
1552 #scripts-step-into img {
1553     content: url(Images/debuggerStepInto.png);
1554 }
1555
1556 #scripts-step-out img {
1557     content: url(Images/debuggerStepOut.png);
1558 }
1559
1560 #scripts-debugger-status {
1561     position: absolute;
1562     line-height: 24px;
1563     top: 0;
1564     right: 8px;
1565 }
1566
1567 #scripts-sidebar-resizer-widget {
1568     position: absolute;
1569     top: 0;
1570     bottom: 0;
1571     right: 225px;
1572     width: 16px;
1573     cursor: col-resize;
1574     background-image: url(Images/statusbarResizerHorizontal.png);
1575     background-repeat: no-repeat;
1576     background-position: center;
1577 }
1578
1579 #scripts-sidebar-buttons {
1580     position: absolute;
1581     right: 0;
1582     top: 0;
1583     bottom: 0;
1584     width: 225px;
1585     overflow: hidden;
1586     border-left: 1px solid rgb(64%, 64%, 64%);
1587 }
1588
1589 #script-resource-views {
1590     display: block;
1591     overflow: auto;
1592     padding: 0;
1593     position: absolute;
1594     top: 23px;
1595     left: 0;
1596     right: 225px;
1597     bottom: 0;
1598 }
1599
1600 .script-view {
1601     display: none;
1602     overflow: hidden;
1603     position: absolute;
1604     top: 0;
1605     left: 0;
1606     right: 0;
1607     bottom: 0;
1608 }
1609
1610 .script-view.visible {
1611     display: block;
1612 }
1613
1614 #scripts-sidebar {
1615     position: absolute;
1616     top: 23px;
1617     right: 0;
1618     bottom: 0;
1619     width: 225px;
1620     background-color: rgb(245, 245, 245);
1621     border-left: 1px solid rgb(64%, 64%, 64%);
1622     cursor: default;
1623     overflow: auto;
1624 }
1625
1626 #resources-larger-resources-status-bar-item {
1627     background-image: url(Images/largerResourcesButtons.png);
1628 }
1629
1630 #resources-larger-resources-status-bar-item:active {
1631     background-position: 32px 0;
1632 }
1633
1634 #resources-larger-resources-status-bar-item.toggled-on {
1635     background-position: 0 24px;
1636 }
1637
1638 #resources-larger-resources-status-bar-item.toggled-on:active {
1639     background-position: 32px 24px;
1640 }
1641
1642 #resources-container {
1643     position: absolute;
1644     top: 0;
1645     left: 0;
1646     bottom: 0;
1647     right: 0;
1648     border-right: 0 none transparent;
1649     overflow-y: auto;
1650     overflow-x: hidden;
1651 }
1652
1653 #resources-container.viewing-resource {
1654     right: auto;
1655     width: 200px;
1656     border-right: 1px solid rgb(64%, 64%, 64%);
1657 }
1658
1659 #resources-container.viewing-resource #resources-sidebar {
1660     width: 100%;
1661     border-right: 0 none transparent;
1662 }
1663
1664 #resources-sidebar {
1665     min-height: 100%;
1666     bottom: auto;
1667     overflow: visible;
1668 }
1669
1670 #resources-container-content {
1671     position: absolute;
1672     top: 0;
1673     right: 0;
1674     left: 200px;
1675     min-height: 100%;
1676 }
1677
1678 #resources-container.viewing-resource #resources-container-content {
1679     display: none;
1680 }
1681
1682 #resources-summary {
1683     position: absolute;
1684     padding-top: 20px;
1685     top: 0;
1686     left: 0;
1687     right: 0;
1688     height: 93px;
1689     margin-left: -1px;
1690     border-left: 1px solid rgb(102, 102, 102);
1691     background-color: rgb(101, 111, 130);
1692     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
1693     background-repeat: repeat-x;
1694     background-position: bottom;
1695     text-align: center;
1696     text-shadow: black 0 1px 1px;
1697     white-space: nowrap;
1698     color: white;
1699     -webkit-background-size: 1px 6px;
1700     -webkit-background-origin: padding;
1701     -webkit-background-clip: padding;
1702 }
1703
1704 #resources-graph-legend {
1705     margin-top: -10px;
1706     padding-left: 15px;
1707 }
1708
1709 .resources-graph-legend-item {
1710     display: inline-block;
1711     font-weight: bold;
1712     margin-right: 15px;
1713     vertical-align: top;
1714 }
1715
1716 .resources-graph-legend-item.total {
1717     margin-left: 10px;
1718 }
1719
1720 .resources-graph-legend-label {
1721     display: inline-block;
1722     text-align: left;
1723 }
1724
1725 .resources-graph-legend-header {
1726     font-size: 12px;
1727 }
1728
1729 .resources-graph-legend-value {
1730     font-size: 10px;
1731 }
1732
1733 .resources-graph-legend-swatch {
1734     vertical-align: top;
1735     margin-top: 1px;
1736     margin-right: 3px;
1737 }
1738
1739 .resources-summary-graph {
1740     vertical-align: middle;
1741 }
1742
1743 #resources-dividers {
1744     position: absolute;
1745     left: 0;
1746     right: 0;
1747     height: 100%;
1748     top: 0;
1749     z-index: -100;
1750 }
1751
1752 #resources-dividers-label-bar {
1753     position: absolute;
1754     top: 93px;
1755     left: 0px;
1756     right: 0;
1757     background-color: rgba(255, 255, 255, 0.8);
1758     background-clip: padding;
1759     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
1760     height: 20px;
1761     z-index: 200;
1762 }
1763
1764 .resources-divider {
1765     position: absolute;
1766     width: 1px;
1767     top: 0;
1768     bottom: 0;
1769     background-color: rgba(0, 0, 0, 0.1);
1770 }
1771
1772 .resources-divider.last {
1773     background-color: transparent;
1774 }
1775
1776 .resources-divider-label {
1777     position: absolute;
1778     top: 4px;
1779     right: 3px;
1780     font-size: 9px;
1781     color: rgb(50%, 50%, 50%);
1782     white-space: nowrap;
1783 }
1784
1785 .resources-graph-bar {
1786     position: absolute;
1787     top: 0;
1788     bottom: 0;
1789     margin: auto -7px;
1790     border-width: 6px 7px 6px 7px;
1791     height: 13px;
1792     min-width: 14px;
1793     opacity: 0.65;
1794     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
1795 }
1796
1797 .resources-graph-bar.waiting {
1798     opacity: 0.35;
1799 }
1800
1801 .resource-sidebar-tree-item.resources-category-documents .resources-graph-bar {
1802     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
1803 }
1804
1805 .resource-sidebar-tree-item.resources-category-stylesheets .resources-graph-bar {
1806     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
1807 }
1808
1809 .resource-sidebar-tree-item.resources-category-images .resources-graph-bar {
1810     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
1811 }
1812
1813 .resource-sidebar-tree-item.resources-category-fonts .resources-graph-bar {
1814     -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7;
1815 }
1816
1817 .resource-sidebar-tree-item.resources-category-scripts .resources-graph-bar {
1818     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
1819 }
1820
1821 .resource-sidebar-tree-item.resources-category-xhr .resources-graph-bar {
1822     -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
1823 }
1824
1825 .tip-button {
1826     background-image: url(Images/tipIcon.png);
1827     border: none;
1828     width: 16px;
1829     height: 16px;
1830     float: right;
1831     background-color: transparent;
1832     margin-top: 1px;
1833 }
1834
1835 .tip-button:active {
1836     background-image: url(Images/tipIconPressed.png);
1837 }
1838
1839 .tip-balloon {
1840     position: absolute;
1841     left: 145px;
1842     top: -5px;
1843     z-index: 1000;
1844     border-width: 51px 15px 18px 37px;
1845     -webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
1846     width: 265px;
1847 }
1848
1849 .tip-balloon.bottom {
1850     position: absolute;
1851     left: 145px;
1852     top: auto;
1853     bottom: -7px;
1854     z-index: 1000;
1855     border-width: 18px 15px 51px 37px;
1856     -webkit-border-image: url(Images/tipBalloonBottom.png) 18 15 51 37;
1857 }
1858
1859 .tip-balloon-content {
1860     margin-top: -40px;
1861     margin-bottom: -2px;
1862     margin-left: 2px;
1863 }
1864
1865 .tip-balloon.bottom .tip-balloon-content {
1866     margin-top: -10px;
1867     margin-bottom: -35px;
1868 }
1869
1870 #resource-views {
1871     position: absolute;
1872     top: 0;
1873     right: 0;
1874     left: 200px;
1875     bottom: 0;
1876 }
1877
1878 .source-view-frame {
1879     width: 100%;
1880     height: 100%;
1881 }
1882
1883 .sidebar-resizer-vertical {
1884     position: absolute;
1885     top: 0;
1886     bottom: 0;
1887     width: 5px;
1888     z-index: 500;
1889     cursor: col-resize;
1890 }
1891
1892 .sidebar-tree, .sidebar-tree .children {
1893     position: relative;
1894     padding: 0;
1895     margin: 0;
1896     list-style: none;
1897     font-size: 11px;
1898 }
1899
1900 .sidebar-tree-section {
1901     position: relative;
1902     height: 18px;
1903     padding: 4px 10px 6px 10px;
1904     white-space: nowrap;
1905     margin-top: 1px;
1906     color: rgb(92, 110, 129);
1907     font-weight: bold;
1908     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
1909 }
1910
1911 .sidebar-tree-item {
1912     position: relative;
1913     height: 36px;
1914     padding: 0 5px 0 5px;
1915     white-space: nowrap;
1916     margin-top: 1px;
1917     line-height: 34px;
1918     border-top: 1px solid transparent;
1919 }
1920
1921 .sidebar-tree .children {
1922     display: none;
1923 }
1924
1925 .sidebar-tree .children.expanded {
1926     display: block;
1927 }
1928
1929 .sidebar-tree-section + .children > .sidebar-tree-item {
1930     padding-left: 10px !important;
1931 }
1932
1933 .sidebar-tree-section + .children.small > .sidebar-tree-item {
1934     padding-left: 17px !important;
1935 }
1936
1937 .sidebar-tree > .children > .sidebar-tree-item {
1938     padding-left: 37px;
1939 }
1940
1941 .sidebar-tree.hide-disclosure-buttons > .children {
1942     display: none;
1943 }
1944
1945 .sidebar-tree > .children.hide-disclosure-buttons > .children {
1946     display: none;
1947 }
1948
1949 .sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
1950     margin-left: 16px;
1951 }
1952
1953 .sidebar-tree-item .disclosure-button {
1954     float: left;
1955     width: 16px;
1956     height: 100%;
1957     border: 0;
1958     background-color: transparent;
1959     background-image: url(Images/disclosureTriangleSmallRight.png);
1960     background-repeat: no-repeat;
1961     background-position: center;
1962     -webkit-apearance: none;
1963 }
1964
1965 .sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
1966     display: none;
1967 }
1968
1969 body.inactive .sidebar-tree-item .disclosure-button {
1970     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
1971 }
1972
1973 body.inactive .sidebar-tree-item.expanded .disclosure-button {
1974     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
1975 }
1976
1977 body.inactive .sidebar-tree-item .disclosure-button:active {
1978     background-image: url(Images/disclosureTriangleSmallRightDownBlack.png);
1979 }
1980
1981 .sidebar-tree-item.selected .disclosure-button {
1982     background-image: url(Images/disclosureTriangleSmallRightWhite.png) !important;
1983 }
1984
1985 .sidebar-tree-item.expanded .disclosure-button {
1986     background-image: url(Images/disclosureTriangleSmallDown.png);
1987 }
1988
1989 .sidebar-tree-item.selected.expanded .disclosure-button {
1990     background-image: url(Images/disclosureTriangleSmallDownWhite.png) !important;
1991 }
1992
1993 .sidebar-tree-item.selected .disclosure-button:active {
1994     background-image: url(Images/disclosureTriangleSmallRightDownWhite.png) !important;
1995 }
1996
1997 .sidebar-tree-item .disclosure-button:active {
1998     background-image: url(Images/disclosureTriangleSmallRightDown.png);
1999 }
2000
2001 .sidebar-tree-item .icon {
2002     float: left;
2003     width: 32px;
2004     height: 32px;
2005     margin-top: 1px;
2006     margin-right: 3px;
2007 }
2008
2009 .sidebar-tree-item .status {
2010     float: right;
2011     height: 16px;
2012     margin-top: 9px;
2013     margin-left: 4px;
2014     line-height: 1em;
2015 }
2016
2017 .sidebar-tree-item .status:empty {
2018     display: none;
2019 }
2020
2021 .sidebar-tree-item .status .bubble {
2022     display: inline-block;
2023     height: 14px;
2024     min-width: 16px;
2025     margin-top: 1px;
2026     background-color: rgb(128, 151, 189);
2027     vertical-align: middle;
2028     white-space: nowrap;
2029     padding: 1px 4px;
2030     text-align: center;
2031     font-size: 11px;
2032     font-family: Helvetia, Arial, sans-serif;
2033     font-weight: bold;
2034     text-shadow: none;
2035     color: white;
2036     -webkit-border-radius: 7px;
2037 }
2038
2039 .sidebar-tree-item .status .bubble:empty {
2040     display: none;
2041 }
2042
2043 .sidebar-tree-item.selected .status .bubble {
2044     background-color: white !important;
2045     color: rgb(132, 154, 190) !important;
2046 }
2047
2048 .focused .sidebar-tree-item.selected .status .bubble {
2049     color: rgb(36, 98, 172) !important;
2050 }
2051
2052 body.inactive .sidebar-tree-item.selected .status .bubble {
2053     color: rgb(159, 159, 159) !important;
2054 }
2055
2056 .sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small {
2057     height: 20px;
2058     line-height: 18px;
2059 }
2060
2061 .sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
2062     width: 16px;
2063     height: 16px;
2064 }
2065
2066 .sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status {
2067     margin-top: 1px;
2068 }
2069
2070 .sidebar-tree-item.selected {
2071     color: white;
2072     border-top: 1px solid rgb(145, 160, 192);
2073     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
2074     text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
2075     font-weight: bold;
2076     -webkit-background-origin: padding;
2077     -webkit-background-clip: padding;
2078 }
2079
2080 .focused .sidebar-tree-item.selected {
2081     border-top: 1px solid rgb(68, 128, 200);
2082     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
2083 }
2084
2085 body.inactive .sidebar-tree-item.selected {
2086     border-top: 1px solid rgb(151, 151, 151);
2087     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
2088 }
2089
2090 .sidebar-tree-item .titles {
2091     position: relative;
2092     top: 5px;
2093     line-height: 11px;
2094     padding-bottom: 1px;
2095     text-overflow: ellipsis;
2096     overflow: hidden;
2097     white-space: nowrap;
2098 }
2099
2100 .sidebar-tree-item .titles.no-subtitle {
2101     top: 10px;
2102 }
2103
2104 .sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
2105     top: 2px;
2106     line-height: normal;
2107 }
2108
2109 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
2110     content: "\A";
2111     white-space: pre;
2112 }
2113
2114 .sidebar-tree-item .subtitle {
2115     font-size: 9px;
2116     color: rgba(0, 0, 0, 0.7);
2117 }
2118
2119 .sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
2120     display: none;
2121 }
2122
2123 .sidebar-tree-item.selected .subtitle {
2124     color: rgba(255, 255, 255, 0.9);
2125 }
2126
2127 .sidebar-tree-item .resources-graph-side {
2128     position: absolute;
2129     height: 100%;
2130     top: 0;
2131     right: 0;
2132 }
2133
2134 .sidebar-tree-item .resources-graph-bar-area {
2135     position: absolute;
2136     top: 0;
2137     bottom: 0;
2138     right: 8px;
2139     left: 9px;
2140 }
2141
2142 #resources-container:not(.viewing-resource) .resource-sidebar-tree-item:nth-of-type(2n) {
2143     background-color: rgba(0, 0, 0, 0.05);
2144 }
2145
2146 #resources-container:not(.viewing-resource) .resource-sidebar-tree-item:nth-of-type(2n) .resources-graph-side {
2147     background-color: rgba(0, 0, 0, 0.05);
2148 }
2149
2150 #resources-container.viewing-resource #resources-sidebar .sidebar-tree-item .resources-graph-side {
2151     display: none;
2152 }
2153
2154 .resources-time-graph-sidebar-item .icon {
2155     content: url(Images/resourcesTimeGraphIcon.png);
2156 }
2157
2158 .resources-size-graph-sidebar-item .icon {
2159     content: url(Images/resourcesSizeGraphIcon.png);
2160 }
2161
2162 .resources-size-graph-sidebar-item .icon {
2163     content: url(Images/resourcesSizeGraphIcon.png);
2164 }
2165
2166 .resource-sidebar-tree-item .icon {
2167     content: url(Images/resourcePlainIcon.png);
2168 }
2169
2170 .children.small .resource-sidebar-tree-item .icon {
2171     content: url(Images/resourcePlainIconSmall.png);
2172 }
2173
2174 .resource-sidebar-tree-item.resources-category-documents .icon {
2175     content: url(Images/resourceDocumentIcon.png);
2176 }
2177
2178 .children.small .resource-sidebar-tree-item.resources-category-documents .icon {
2179     content: url(Images/resourceDocumentIconSmall.png);
2180 }
2181
2182 .resource-sidebar-tree-item.resources-category-stylesheets .icon {
2183     content: url(Images/resourceCSSIcon.png);
2184 }
2185
2186 .children.small .resource-sidebar-tree-item.resources-category-stylesheets .icon {
2187     content: url(Images/resourceDocumentIconSmall.png);
2188 }
2189
2190 .resource-sidebar-tree-item.resources-category-images .icon {
2191     content: url(Images/resourcePlainIcon.png);
2192 }
2193
2194 .children.small .resource-sidebar-tree-item.resources-category-images .icon {
2195     content: url(Images/resourcePlainIconSmall.png);
2196 }
2197
2198 .resource-sidebar-tree-item.resources-category-fonts .icon {
2199     content: url(Images/resourcePlainIcon.png);
2200 }
2201
2202 .children.small .resource-sidebar-tree-item.resources-category-fonts .icon {
2203     content: url(Images/resourcePlainIconSmall.png);
2204 }
2205
2206 .resource-sidebar-tree-item.resources-category-scripts .icon {
2207     content: url(Images/resourceJSIcon.png);
2208 }
2209
2210 .children.small .resource-sidebar-tree-item.resources-category-scripts .icon {
2211     content: url(Images/resourceDocumentIconSmall.png);
2212 }
2213
2214 .resource-sidebar-tree-item.resources-category-xhr .icon {
2215     content: url(Images/resourcePlainIcon.png);
2216 }
2217
2218 .children.small .resource-sidebar-tree-item.resources-category-xhr .icon {
2219     content: url(Images/resourceDocumentIconSmall.png);
2220 }
2221
2222 .resource-sidebar-tree-item .bubble.warning {
2223     background-color: rgb(232, 164, 0);
2224 }
2225
2226 .resource-sidebar-tree-item .bubble.error {
2227     background-color: rgb(216, 35, 35);
2228 }
2229
2230 /* Profiler Style */
2231
2232 #profile-views {
2233     position: absolute;
2234     top: 0;
2235     right: 0;
2236     left: 200px;
2237     bottom: 0;
2238 }
2239
2240 .profile-view {
2241     display: none;
2242     overflow: hidden;
2243     position: absolute;
2244     top: 0;
2245     left: 0;
2246     right: 0;
2247     bottom: 0;
2248 }
2249
2250 .profile-view.visible {
2251     display: block;
2252 }
2253
2254 .profile-view .data-grid {
2255     border: none;
2256 }