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