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