Adds a debugger toggle button to the scripts status bar that will start
[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-debugging-status-bar-item {
1344     background-image: url(Images/debuggingButtons.png);
1345 }
1346
1347 #scripts-debugging-status-bar-item:active {
1348     background-position: 32px 0;
1349 }
1350
1351 #scripts-debugging-status-bar-item.toggled-on {
1352     background-position: 0 24px;
1353 }
1354
1355 #scripts-debugging-status-bar-item.toggled-on:active {
1356     background-position: 32px 24px;
1357 }
1358
1359 #scripts-status-bar {
1360     position: absolute;
1361     top: -1px;
1362     left: 0;
1363     right: 0;
1364     height: 24px;
1365 }
1366
1367 #scripts-status-bar .status-bar-item img {
1368     margin-top: 2px;
1369 }
1370
1371 #scripts-status-bar .status-bar-item:disabled img {
1372     opacity: 0.5;
1373 }
1374
1375 #scripts-back img {
1376     content: url(Images/back.png);
1377 }
1378
1379 #scripts-forward img {
1380     content: url(Images/forward.png);
1381 }
1382
1383 #scripts-pause img {
1384     content: url(Images/debuggerPause.png);
1385 }
1386
1387 #scripts-step-over img {
1388     content: url(Images/debuggerStepOver.png);
1389 }
1390
1391 #scripts-step-into img {
1392     content: url(Images/debuggerStepInto.png);
1393 }
1394
1395 #scripts-step-out img {
1396     content: url(Images/debuggerStepOut.png);
1397 }
1398
1399 #scripts-debugger-status {
1400     position: absolute;
1401     line-height: 24px;
1402     top: 0;
1403     right: 8px;
1404 }
1405
1406 #scripts-debugger-status:empty {
1407     display: none;
1408 }
1409
1410 #scripts-sidebar-resizer-widget {
1411     position: absolute;
1412     top: 0;
1413     bottom: 0;
1414     right: 225px;
1415     width: 16px;
1416     cursor: col-resize;
1417     background-image: url(Images/statusbarResizerHorizontal.png);
1418     background-repeat: no-repeat;
1419     background-position: center;
1420 }
1421
1422 #scripts-sidebar-buttons {
1423     position: absolute;
1424     right: 0;
1425     top: 0;
1426     bottom: 0;
1427     width: 225px;
1428     overflow: hidden;
1429     border-left: 1px solid rgb(64%, 64%, 64%);
1430 }
1431
1432 #script-resource-views {
1433     display: block;
1434     overflow: auto;
1435     padding: 0;
1436     position: absolute;
1437     top: 23px;
1438     left: 0;
1439     right: 225px;
1440     bottom: 0;
1441 }
1442
1443 #scripts-sidebar {
1444     position: absolute;
1445     top: 23px;
1446     right: 0;
1447     bottom: 0;
1448     width: 225px;
1449     background-color: rgb(232, 232, 232);
1450     border-left: 1px solid rgb(64%, 64%, 64%);
1451     cursor: default;
1452     overflow: auto;
1453 }
1454
1455 #resources-larger-resources-status-bar-item {
1456     background-image: url(Images/largerResourcesButtons.png);
1457 }
1458
1459 #resources-larger-resources-status-bar-item:active {
1460     background-position: 32px 0;
1461 }
1462
1463 #resources-larger-resources-status-bar-item.toggled-on {
1464     background-position: 0 24px;
1465 }
1466
1467 #resources-larger-resources-status-bar-item.toggled-on:active {
1468     background-position: 32px 24px;
1469 }
1470
1471 #resources-container {
1472     position: absolute;
1473     top: 0;
1474     left: 0;
1475     bottom: 0;
1476     right: 0;
1477     border-right: 0 none transparent;
1478     overflow-y: auto;
1479     overflow-x: hidden;
1480 }
1481
1482 #resources-container.viewing-resource {
1483     right: auto;
1484     width: 200px;
1485     border-right: 1px solid rgb(64%, 64%, 64%);
1486 }
1487
1488 #resources-container.viewing-resource #resources-sidebar {
1489     width: 100%;
1490     border-right: 0 none transparent;
1491 }
1492
1493 #resources-sidebar {
1494     min-height: 100%;
1495     bottom: auto;
1496     overflow: visible;
1497 }
1498
1499 #resources-container-content {
1500     position: absolute;
1501     top: 0;
1502     right: 0;
1503     left: 200px;
1504     min-height: 100%;
1505 }
1506
1507 #resources-container.viewing-resource #resources-container-content {
1508     display: none;
1509 }
1510
1511 #resources-summary {
1512     position: absolute;
1513     padding-top: 20px;
1514     top: 0;
1515     left: 0;
1516     right: 0;
1517     height: 93px;
1518     margin-left: -1px;
1519     border-left: 1px solid rgb(102, 102, 102);
1520     background-color: rgb(101, 111, 130);
1521     background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.5)));
1522     background-repeat: repeat-x;
1523     background-position: bottom;
1524     text-align: center;
1525     text-shadow: black 0 1px 1px;
1526     white-space: nowrap;
1527     color: white;
1528     -webkit-background-size: 1px 6px;
1529     -webkit-background-origin: padding;
1530     -webkit-background-clip: padding;
1531 }
1532
1533 #resources-graph-legend {
1534     margin-top: -10px;
1535     padding-left: 15px;
1536 }
1537
1538 .resources-graph-legend-item {
1539     display: inline-block;
1540     font-weight: bold;
1541     margin-right: 15px;
1542     vertical-align: top;
1543 }
1544
1545 .resources-graph-legend-item.total {
1546     margin-left: 10px;
1547 }
1548
1549 .resources-graph-legend-label {
1550     display: inline-block;
1551     text-align: left;
1552 }
1553
1554 .resources-graph-legend-header {
1555     font-size: 12px;
1556 }
1557
1558 .resources-graph-legend-value {
1559     font-size: 10px;
1560 }
1561
1562 .resources-graph-legend-swatch {
1563     vertical-align: top;
1564     margin-top: 1px;
1565     margin-right: 3px;
1566 }
1567
1568 .resources-summary-graph {
1569     vertical-align: middle;
1570 }
1571
1572 #resources-dividers {
1573     position: absolute;
1574     left: 0;
1575     right: 0;
1576     height: 100%;
1577     top: 0;
1578     z-index: -100;
1579 }
1580
1581 #resources-dividers-label-bar {
1582     position: absolute;
1583     top: 93px;
1584     left: 0px;
1585     right: 0;
1586     background-color: rgba(255, 255, 255, 0.8);
1587     background-clip: padding;
1588     border-bottom: 1px solid rgba(0, 0, 0, 0.3);
1589     height: 20px;
1590     z-index: 200;
1591 }
1592
1593 .resources-divider {
1594     position: absolute;
1595     width: 1px;
1596     top: 0;
1597     bottom: 0;
1598     background-color: rgba(0, 0, 0, 0.1);
1599 }
1600
1601 .resources-divider.last {
1602     background-color: transparent;
1603 }
1604
1605 .resources-divider-label {
1606     position: absolute;
1607     top: 4px;
1608     right: 3px;
1609     font-size: 9px;
1610     color: rgb(50%, 50%, 50%);
1611     white-space: nowrap;
1612 }
1613
1614 .resources-graph-bar {
1615     position: absolute;
1616     top: 0;
1617     bottom: 0;
1618     margin: auto -7px;
1619     border-width: 6px 7px 6px 7px;
1620     height: 13px;
1621     min-width: 14px;
1622     opacity: 0.65;
1623     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
1624 }
1625
1626 .resources-graph-bar.waiting {
1627     opacity: 0.35;
1628 }
1629
1630 .resource-sidebar-tree-item.resources-category-documents .resources-graph-bar {
1631     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
1632 }
1633
1634 .resource-sidebar-tree-item.resources-category-stylesheets .resources-graph-bar {
1635     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
1636 }
1637
1638 .resource-sidebar-tree-item.resources-category-images .resources-graph-bar {
1639     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
1640 }
1641
1642 .resource-sidebar-tree-item.resources-category-fonts .resources-graph-bar {
1643     -webkit-border-image: url(Images/timelinePillRed.png) 6 7 6 7;
1644 }
1645
1646 .resource-sidebar-tree-item.resources-category-scripts .resources-graph-bar {
1647     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
1648 }
1649
1650 .resource-sidebar-tree-item.resources-category-xhr .resources-graph-bar {
1651     -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
1652 }
1653
1654 .tip-button {
1655     background-image: url(Images/tipIcon.png);
1656     border: none;
1657     width: 16px;
1658     height: 16px;
1659     float: right;
1660     background-color: transparent;
1661     margin-top: 1px;
1662 }
1663
1664 .tip-button:active {
1665     background-image: url(Images/tipIconPressed.png);
1666 }
1667
1668 .tip-balloon {
1669     position: absolute;
1670     left: 145px;
1671     top: -5px;
1672     z-index: 1000;
1673     border-width: 51px 15px 18px 37px;
1674     -webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
1675     width: 265px;
1676 }
1677
1678 .tip-balloon.bottom {
1679     position: absolute;
1680     left: 145px;
1681     top: auto;
1682     bottom: -7px;
1683     z-index: 1000;
1684     border-width: 18px 15px 51px 37px;
1685     -webkit-border-image: url(Images/tipBalloonBottom.png) 18 15 51 37;
1686 }
1687
1688 .tip-balloon-content {
1689     margin-top: -40px;
1690     margin-bottom: -2px;
1691     margin-left: 2px;
1692 }
1693
1694 .tip-balloon.bottom .tip-balloon-content {
1695     margin-top: -10px;
1696     margin-bottom: -35px;
1697 }
1698
1699 #resource-views {
1700     position: absolute;
1701     top: 0;
1702     right: 0;
1703     left: 200px;
1704     bottom: 0;
1705 }
1706
1707 .source-view-frame {
1708     width: 100%;
1709     height: 100%;
1710 }
1711
1712 .sidebar-resizer-vertical {
1713     position: absolute;
1714     top: 0;
1715     bottom: 0;
1716     width: 5px;
1717     z-index: 500;
1718     cursor: col-resize;
1719 }
1720
1721 .sidebar-tree, .sidebar-tree .children {
1722     position: relative;
1723     padding: 0;
1724     margin: 0;
1725     list-style: none;
1726     font-size: 11px;
1727 }
1728
1729 .sidebar-tree-section {
1730     position: relative;
1731     height: 18px;
1732     padding: 4px 10px 6px 10px;
1733     white-space: nowrap;
1734     margin-top: 1px;
1735     color: rgb(92, 110, 129);
1736     font-weight: bold;
1737     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
1738 }
1739
1740 .sidebar-tree-item {
1741     position: relative;
1742     height: 36px;
1743     padding: 0 5px 0 5px;
1744     white-space: nowrap;
1745     margin-top: 1px;
1746     line-height: 34px;
1747     border-top: 1px solid transparent;
1748 }
1749
1750 .sidebar-tree .children {
1751     display: none;
1752 }
1753
1754 .sidebar-tree .children.expanded {
1755     display: block;
1756 }
1757
1758 .sidebar-tree-section + .children > .sidebar-tree-item {
1759     padding-left: 10px !important;
1760 }
1761
1762 .sidebar-tree-section + .children.small > .sidebar-tree-item {
1763     padding-left: 17px !important;
1764 }
1765
1766 .sidebar-tree > .children > .sidebar-tree-item {
1767     padding-left: 37px;
1768 }
1769
1770 .sidebar-tree.hide-disclosure-buttons > .children {
1771     display: none;
1772 }
1773
1774 .sidebar-tree > .children.hide-disclosure-buttons > .children {
1775     display: none;
1776 }
1777
1778 .sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
1779     margin-left: 16px;
1780 }
1781
1782 .sidebar-tree-item .disclosure-button {
1783     float: left;
1784     width: 16px;
1785     height: 100%;
1786     border: 0;
1787     background-color: transparent;
1788     background-image: url(Images/disclosureTriangleSmallRight.png);
1789     background-repeat: no-repeat;
1790     background-position: center;
1791     -webkit-apearance: none;
1792 }
1793
1794 .sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
1795     display: none;
1796 }
1797
1798 body.inactive .sidebar-tree-item .disclosure-button {
1799     background-image: url(Images/disclosureTriangleSmallRightBlack.png);
1800 }
1801
1802 body.inactive .sidebar-tree-item.expanded .disclosure-button {
1803     background-image: url(Images/disclosureTriangleSmallDownBlack.png);
1804 }
1805
1806 body.inactive .sidebar-tree-item .disclosure-button:active {
1807     background-image: url(Images/disclosureTriangleSmallRightDownBlack.png);
1808 }
1809
1810 .sidebar-tree-item.selected .disclosure-button {
1811     background-image: url(Images/disclosureTriangleSmallRightWhite.png) !important;
1812 }
1813
1814 .sidebar-tree-item.expanded .disclosure-button {
1815     background-image: url(Images/disclosureTriangleSmallDown.png);
1816 }
1817
1818 .sidebar-tree-item.selected.expanded .disclosure-button {
1819     background-image: url(Images/disclosureTriangleSmallDownWhite.png) !important;
1820 }
1821
1822 .sidebar-tree-item.selected .disclosure-button:active {
1823     background-image: url(Images/disclosureTriangleSmallRightDownWhite.png) !important;
1824 }
1825
1826 .sidebar-tree-item .disclosure-button:active {
1827     background-image: url(Images/disclosureTriangleSmallRightDown.png);
1828 }
1829
1830 .sidebar-tree-item .icon {
1831     float: left;
1832     width: 32px;
1833     height: 32px;
1834     margin-top: 1px;
1835     margin-right: 3px;
1836 }
1837
1838 .sidebar-tree-item .status {
1839     float: right;
1840     height: 16px;
1841     margin-top: 9px;
1842     margin-left: 4px;
1843     line-height: 1em;
1844 }
1845
1846 .sidebar-tree-item .status:empty {
1847     display: none;
1848 }
1849
1850 .sidebar-tree-item .status .bubble {
1851     display: inline-block;
1852     height: 14px;
1853     min-width: 16px;
1854     margin-top: 1px;
1855     background-color: rgb(128, 151, 189);
1856     vertical-align: middle;
1857     white-space: nowrap;
1858     padding: 1px 4px;
1859     text-align: center;
1860     font-size: 11px;
1861     font-family: Helvetia, Arial, sans-serif;
1862     font-weight: bold;
1863     text-shadow: none;
1864     color: white;
1865     -webkit-border-radius: 7px;
1866 }
1867
1868 .sidebar-tree-item .status .bubble:empty {
1869     display: none;
1870 }
1871
1872 .sidebar-tree-item.selected .status .bubble {
1873     background-color: white !important;
1874     color: rgb(132, 154, 190) !important;
1875 }
1876
1877 .focused .sidebar-tree-item.selected .status .bubble {
1878     color: rgb(36, 98, 172) !important;
1879 }
1880
1881 body.inactive .sidebar-tree-item.selected .status .bubble {
1882     color: rgb(159, 159, 159) !important;
1883 }
1884
1885 .sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small {
1886     height: 20px;
1887     line-height: 18px;
1888 }
1889
1890 .sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
1891     width: 16px;
1892     height: 16px;
1893 }
1894
1895 .sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status {
1896     margin-top: 1px;
1897 }
1898
1899 .sidebar-tree-item.selected {
1900     color: white;
1901     border-top: 1px solid rgb(145, 160, 192);
1902     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
1903     text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
1904     font-weight: bold;
1905     -webkit-background-origin: padding;
1906     -webkit-background-clip: padding;
1907 }
1908
1909 .focused .sidebar-tree-item.selected {
1910     border-top: 1px solid rgb(68, 128, 200);
1911     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
1912 }
1913
1914 body.inactive .sidebar-tree-item.selected {
1915     border-top: 1px solid rgb(151, 151, 151);
1916     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
1917 }
1918
1919 .sidebar-tree-item .titles {
1920     position: relative;
1921     top: 5px;
1922     line-height: 11px;
1923     padding-bottom: 1px;
1924     text-overflow: ellipsis;
1925     overflow: hidden;
1926     white-space: nowrap;
1927 }
1928
1929 .sidebar-tree-item .titles.no-subtitle {
1930     top: 10px;
1931 }
1932
1933 .sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
1934     top: 2px;
1935     line-height: normal;
1936 }
1937
1938 .sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
1939     content: "\A";
1940     white-space: pre;
1941 }
1942
1943 .sidebar-tree-item .subtitle {
1944     font-size: 9px;
1945     color: rgba(0, 0, 0, 0.7);
1946 }
1947
1948 .sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
1949     display: none;
1950 }
1951
1952 .sidebar-tree-item.selected .subtitle {
1953     color: rgba(255, 255, 255, 0.9);
1954 }
1955
1956 .sidebar-tree-item .resources-graph-side {
1957     position: absolute;
1958     height: 100%;
1959     top: 0;
1960     right: 0;
1961 }
1962
1963 .sidebar-tree-item .resources-graph-bar-area {
1964     position: absolute;
1965     top: 0;
1966     bottom: 0;
1967     right: 8px;
1968     left: 9px;
1969 }
1970
1971 #resources-container:not(.viewing-resource) .resource-sidebar-tree-item:nth-of-type(2n) {
1972     background-color: rgba(0, 0, 0, 0.05);
1973 }
1974
1975 #resources-container:not(.viewing-resource) .resource-sidebar-tree-item:nth-of-type(2n) .resources-graph-side {
1976     background-color: rgba(0, 0, 0, 0.05);
1977 }
1978
1979 #resources-container.viewing-resource #resources-sidebar .sidebar-tree-item .resources-graph-side {
1980     display: none;
1981 }
1982
1983 .resources-time-graph-sidebar-item .icon {
1984     content: url(Images/resourcesTimeGraphIcon.png);
1985 }
1986
1987 .resources-size-graph-sidebar-item .icon {
1988     content: url(Images/resourcesSizeGraphIcon.png);
1989 }
1990
1991 .resources-size-graph-sidebar-item .icon {
1992     content: url(Images/resourcesSizeGraphIcon.png);
1993 }
1994
1995 .resource-sidebar-tree-item .icon {
1996     content: url(Images/resourcePlainIcon.png);
1997 }
1998
1999 .children.small .resource-sidebar-tree-item .icon {
2000     content: url(Images/resourcePlainIconSmall.png);
2001 }
2002
2003 .resource-sidebar-tree-item.resources-category-documents .icon {
2004     content: url(Images/resourceDocumentIcon.png);
2005 }
2006
2007 .children.small .resource-sidebar-tree-item.resources-category-documents .icon {
2008     content: url(Images/resourceDocumentIconSmall.png);
2009 }
2010
2011 .resource-sidebar-tree-item.resources-category-stylesheets .icon {
2012     content: url(Images/resourceCSSIcon.png);
2013 }
2014
2015 .children.small .resource-sidebar-tree-item.resources-category-stylesheets .icon {
2016     content: url(Images/resourceDocumentIconSmall.png);
2017 }
2018
2019 .resource-sidebar-tree-item.resources-category-images .icon {
2020     content: url(Images/resourcePlainIcon.png);
2021 }
2022
2023 .children.small .resource-sidebar-tree-item.resources-category-images .icon {
2024     content: url(Images/resourcePlainIconSmall.png);
2025 }
2026
2027 .resource-sidebar-tree-item.resources-category-fonts .icon {
2028     content: url(Images/resourcePlainIcon.png);
2029 }
2030
2031 .children.small .resource-sidebar-tree-item.resources-category-fonts .icon {
2032     content: url(Images/resourcePlainIconSmall.png);
2033 }
2034
2035 .resource-sidebar-tree-item.resources-category-scripts .icon {
2036     content: url(Images/resourceJSIcon.png);
2037 }
2038
2039 .children.small .resource-sidebar-tree-item.resources-category-scripts .icon {
2040     content: url(Images/resourceDocumentIconSmall.png);
2041 }
2042
2043 .resource-sidebar-tree-item.resources-category-xhr .icon {
2044     content: url(Images/resourcePlainIcon.png);
2045 }
2046
2047 .children.small .resource-sidebar-tree-item.resources-category-xhr .icon {
2048     content: url(Images/resourceDocumentIconSmall.png);
2049 }
2050
2051 .resource-sidebar-tree-item .bubble.warning {
2052     background-color: rgb(232, 164, 0);
2053 }
2054
2055 .resource-sidebar-tree-item .bubble.error {
2056     background-color: rgb(216, 35, 35);
2057 }