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