9c19c381572cc52261716f6949991ec3ec2a4a8a
[WebKit-https.git] / WebCore / page / inspector / inspector.css
1 /*
2  * Copyright (C) 2006, 2007 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     -webkit-user-select: none;
31     height: 100%;
32     width: 100%;
33     overflow: hidden;
34     font-family: Lucida Grande, sans-serif;
35     margin: 0;
36     -webkit-text-size-adjust: none;
37 }
38
39 iframe, a img {
40     border: none;
41 }
42
43 .focused .selected {
44     background-color: rgb(56, 121, 217);
45 }
46
47 .blurred .selected, body.inactive .selected {
48     background-color: rgb(212, 212, 212);
49 }
50
51 .hidden {
52     display: none;
53 }
54
55 #toolbar {
56     position: absolute;
57     top: 0;
58     left: 0;
59     right: 0;
60     height: 28px;
61     background: rgb(245, 245, 250);
62     background-image: url(Images/toolbarBackground.png);
63     background-repeat: repeat-x;
64     background-position: top;
65     border-bottom: 1px solid rgb(80, 80, 80);
66     padding: 2px 8px;
67     -webkit-box-sizing: border-box;
68     -webkit-background-size: auto 135%;
69 }
70
71 body.inactive #toolbar {
72     background-image: url(Images/toolbarBackgroundInactive.png);
73     border-bottom: 1px solid rgb(64%, 64%, 64%);
74 }
75
76 body.attached #toolbar {
77     border-top: 1px solid rgb(80, 80, 80);
78     background-image: url(Images/darkShadow.png), url(Images/toolbarBackground.png);
79     background-position: center -2px, top;
80     -webkit-background-size: auto auto, auto 135%;
81 }
82
83 body.attached.inactive #toolbar {
84     background-image: url(Images/darkShadow.png), url(Images/toolbarBackgroundInactive.png);
85     background-position: center -3px, top;
86     border-top: 1px solid rgb(100, 100, 100);
87     border-bottom: 1px solid rgb(64%, 64%, 64%);
88 }
89
90 #toolbar button, #toolbar button:disabled:active {
91     border-width: 3px 3px 4px 3px;
92     -webkit-border-image: url(Images/toolbarButton.png) 3 3 4 3;
93     height: 19px;
94     -webkit-box-sizing: border-box;
95     vertical-align: middle;
96 }
97
98 #toolbar button:focus {
99     outline: none;
100 }
101
102 #toolbar button:active, #toolbar button.selected {
103     -webkit-border-image: url(Images/toolbarButtonPressed.png) 3 3 4 3;
104 }
105
106 body.inactive #toolbar button:active, body.inactive #toolbar button.selected {
107     -webkit-border-image: url(Images/toolbarButtonPressedInactive.png) 3 3 4 3;
108 }
109
110 body.inactive #toolbar button, body.inactive #toolbar button:disabled:active {
111     -webkit-border-image: url(Images/toolbarButtonInactive.png) 3 3 4 3;
112 }
113
114 #toolbar .split-button-divider {
115     width: 1px;
116     height: 19px;
117     content: url(Images/toolbarSplitButtonDivider.png);
118     vertical-align: middle;
119 }
120
121 body.inactive #toolbar .split-button-divider {
122     content: url(Images/toolbarSplitButtonDividerInactive.png);
123 }
124
125 #toolbar .split-button {
126     padding: 0;
127     width: 20px;
128 }
129
130 #toolbar .split-button.middle {
131     border-left: transparent none 0 !important;
132     border-right: transparent none 0 !important;
133 }
134
135 #toolbar .split-button.first {
136     border-right: transparent none 0 !important;
137 }
138
139 #toolbar .split-button.last {
140     border-left: transparent none 0 !important;
141 }
142
143 #back img {
144     content: url(Images/treeLeftTriangleBlack.png);
145     position: relative;
146     top: -1px;
147     left: -1px;
148     width: 8px;
149     height: 8px;
150 }
151
152 #back:disabled img, #forward:disabled img {
153     opacity: 0.5;
154 }
155
156 #forward img {
157     content: url(Images/treeRightTriangleBlack.png);
158     position: relative;
159     top: -1px;
160     left: 2px;
161     width: 8px;
162     height: 8px;
163 }
164
165 .view-button-source img {
166     content: url(Images/sourceViewButton.png);
167     position: relative;
168     top: -1px;
169     width: 8px;
170     height: 7px;
171 }
172
173 .view-button-source.selected img {
174     content: url(Images/sourceViewButtonSelected.png);
175 }
176
177 .view-button-dom img {
178     content: url(Images/domViewButton.png);
179     position: relative;
180     top: -1px;
181     left: 1px;
182     width: 10px;
183     height: 7px;
184 }
185
186 .view-button-dom.selected img {
187     content: url(Images/domViewButtonSelected.png);
188 }
189
190 #viewbuttons {
191     position: absolute;
192     left: 200px;
193     padding-left: 8px;
194 }
195
196 #viewbuttons .selected {
197     font-weight: bold;
198 }
199
200 #search {
201     float: right;
202     width: 200px;
203 }
204
205 #search:focus {
206     outline: 1px auto;
207 }
208
209 #searchResults {
210     position: absolute;
211     top: -73px;
212     left: 200px;
213     right: 0;
214     height: 100px;
215     z-index: -1;
216     background-color: white;
217     border-bottom: 1px solid rgb(180, 180, 180);
218     overflow-y: auto;
219     overflow-x: hidden;
220 }
221
222 .search-results-section {
223     color: gray;
224     width: 28px;
225     float: left;
226     margin-left: -45px;
227     text-align: right;
228     font-size: 10px;
229     margin-top: 1px;
230     white-space: nowrap;
231 }
232
233 .selected .search-results-section {
234     color: rgba(255, 255, 255, 0.8);
235 }
236
237 .blurred .selected .search-results-section {
238     color: rgba(0, 0, 0, 0.5);
239 }
240
241 #searchResults > ol > ol > li {
242     padding-left: 45px;
243     white-space: nowrap;
244 }
245
246 .search-matched-string {
247     background-color: #ff8;
248 }
249
250 .selected .search-matched-string {
251     background-color: transparent;
252 }
253
254 #sidebar {
255     position: absolute;
256     top: 28px;
257     left: 0;
258     bottom: 0;
259     width: 200px;
260     background-color: rgb(214, 221, 229);
261     border-right: 1px solid rgb(64%, 64%, 64%);
262     -webkit-box-sizing: border-box;
263 }
264
265 body.inactive #sidebar {
266     background-color: rgb(232, 232, 232);
267 }
268
269 #statusbar {
270     position: absolute;
271     padding: 0;
272     left: 0;
273     right: 0;
274     bottom: 0;
275     height: 21px;
276     border-top: 1px solid #bbb;
277     -webkit-box-sizing: border-box;
278     background-image: url(Images/sidebarStatusAreaBackground.png);
279     background-position: right, center;
280     background-repeat: no-repeat, repeat-x;
281 }
282
283 #statusbar #sidebarResizeWidget {
284     display: block;
285     float: right;
286     width: 17px;
287     height: 20px;
288     background: url(Images/sidebarResizeWidget.png) right no-repeat;
289     cursor: col-resize;
290 }
291
292 #statusbar button {
293     -webkit-apearance: none;
294     vertical-align: top;
295     border: 0;
296     width: 32px;
297     height: 20px;
298     margin: 0;
299     margin-left: -1px;
300     padding: 0;
301 }
302
303 #statusbar button:focus {
304     outline: none;
305 }
306
307 #statusbar button.action {
308     background-image: url(Images/sidebarActionWidget.png);
309 }
310
311 #statusbar button.action:active {
312     background-image: url(Images/sidebarActionWidgetPressed.png);
313 }
314
315 #statusbar #statusToggle {
316     background-image: url(Images/showStatusWidget.png);
317 }
318
319 #statusbar #statusToggle:active {
320     background-image: url(Images/showStatusWidgetPressed.png);
321 }
322
323 #statusbar #statusToggle.hide {
324     background-image: url(Images/hideStatusWidget.png);
325 }
326
327 #statusbar #statusToggle.hide:active {
328     background-image: url(Images/hideStatusWidgetPressed.png);
329 }
330
331 body.detached #attachToggle {
332     background-image: url(Images/sidebarAttachWidget.png);
333 }
334
335 body.detached #attachToggle:active {
336     background-image: url(Images/sidebarAttachWidgetPressed.png);
337 }
338
339 body.attached #attachToggle {
340     background-image: url(Images/sidebarDetachWidget.png);
341 }
342
343 body.attached #attachToggle:active {
344     background-image: url(Images/sidebarDetachWidgetPressed.png);
345 }
346
347 #status {
348     overflow: hidden;
349     position: absolute;
350     bottom: -57px;
351     left: 0;
352     width: 100%;
353     height: 78px;
354     padding: 2px 0;
355     margin: 0;
356     border-top: 1px solid rgb(64%, 64%, 64%);
357     -webkit-box-sizing: border-box;
358     list-style: none;
359     font-size: 11px;
360 }
361
362 #status li {
363     position: relative;
364     height: 37px;
365     -webkit-box-sizing: border-box;
366 }
367
368 #status li.selected {
369     background-image: url(Images/sidebarSelectionTall.png);
370     background-repeat: repeat-x;
371     background-position: center;
372     background-color: transparent !important;
373     color: white;
374     font-weight: bold;
375     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
376 }
377
378 #status .icon {
379     position: absolute;
380     top: 2px;
381     left: 15px;
382     width: 32px;
383     height: 32px;
384     background-repeat: no-repeat;
385     background-position: center center;
386 }
387
388 #status .icon.console {
389     background-image: url(Images/console.png);
390 }
391
392 #status .icon.network {
393     background-image: url(Images/network.png);
394 }
395
396 #status .title {
397     -webkit-box-sizing: border-box;
398     position: relative;
399     top: 5px;
400     padding-left: 58px;
401     right: 5px;
402     display: block;
403     white-space: nowrap;
404     overflow: hidden;
405     text-overflow: ellipsis;
406 }
407
408 #status .title.only {
409     top: 10px;
410 }
411
412 #status .info {
413     -webkit-box-sizing: border-box;
414     position: relative;
415     margin-top: 6px;
416     padding-left: 58px;
417     right: 5px;
418     display: block;
419     font-size: 9px;
420     white-space: nowrap;
421     overflow: hidden;
422     text-overflow: ellipsis;
423 }
424
425 #list {
426     overflow-x: hidden;
427     overflow-y: auto;
428     position: absolute;
429     top: 0;
430     left: 0;
431     bottom: 21px;
432     width: 100%;
433     padding: 2px 0;
434     margin: 0;
435     -webkit-box-sizing: border-box;
436     list-style: none;
437     font-size: 11px;
438 }
439
440 #list > li {
441     height: 26px;
442     color: rgb(96, 110, 128);
443     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
444     font-weight: bold;
445     line-height: 20px;
446     text-indent: 20px;
447     background-image: url(Images/rightTriangle.png);
448     background-repeat: no-repeat;
449     background-position: 10px 6px;
450     text-transform: uppercase;
451 }
452
453 #list > ol + li {
454     margin-top: 5px;
455 }
456
457 #list > li + li {
458     margin-top: 5px;
459 }
460
461 #list > li.expanded {
462     background-image: url(Images/downTriangle.png);
463     background-position: 10px 7px;
464 }
465
466 #list > ol {
467     display: none;
468     list-style: none;
469     padding: 0;
470     margin: 0;
471 }
472
473 #list > ol.expanded {
474     display: block;
475 }
476
477 #list > ol > li {
478     position: relative;
479     height: 37px;
480     -webkit-box-sizing: border-box;
481 }
482
483 #list .icon {
484     position: absolute;
485     top: 2px;
486     left: 15px;
487     width: 32px;
488     height: 32px;
489     background-image: url(Images/document.png);
490     background-repeat: no-repeat;
491     background-position: center center;
492 }
493
494 #list .icon.plain {
495     background-image: url(Images/plainDocument.png);
496 }
497
498 #list .icon .preview {
499     margin: auto;
500     display: block;
501     position: absolute;
502     top: 0;
503     bottom: 0;
504     left: 0;
505     right: 0;
506     max-width: 20px;
507     max-height: 22px;
508     -webkit-user-drag: none;
509     -webkit-box-sizing: border-box;
510     border-top: 6px solid transparent;
511 }
512
513 #list .icon .progress {
514     margin: auto;
515     display: block;
516     position: absolute;
517     top: 0;
518     bottom: 0;
519     left: 0;
520     right: 0;
521 }
522
523 #list .title {
524     -webkit-box-sizing: border-box;
525     position: relative;
526     top: 5px;
527     padding-left: 58px;
528     right: 5px;
529     display: block;
530     white-space: nowrap;
531     overflow: hidden;
532     text-overflow: ellipsis;
533 }
534
535 #list .title.only {
536     top: 10px;
537 }
538
539 #sidebar li .count {
540     float: right;
541     margin-top: 11px;
542     margin-right: 6px;
543     font-family: Helvetica, sans-serif;
544     font-weight: bold;
545     font-size: 11px;
546     line-height: 10px;
547     -webkit-border-radius: 7px;
548     color: white;
549     text-shadow: none;
550     background-image: url(Images/gradientHighlight.png), url(Images/gradient.png);
551     -webkit-background-size: 100%, 100%;
552     background-position: center;
553     padding: 2px 4px;
554     text-align: center;
555     text-indent: 0;
556     min-width: 20px;
557     -webkit-box-sizing: border-box;
558 }
559
560 #sidebar li .count.warnings {
561     background-color: orange;
562 }
563
564 #sidebar li .count.errors {
565     background-color: red;
566 }
567
568 #list .info {
569     -webkit-box-sizing: border-box;
570     position: relative;
571     margin-top: 6px;
572     padding-left: 58px;
573     right: 5px;
574     display: block;
575     font-size: 9px;
576     white-space: nowrap;
577     overflow: hidden;
578     text-overflow: ellipsis;
579 }
580
581 #list li.selected {
582     background-image: url(Images/sidebarSelectionTall.png);
583     background-repeat: repeat-x;
584     background-position: center;
585     background-color: transparent !important;
586     color: white;
587     font-weight: bold;
588     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
589 }
590
591 #sidebar.blurred li.selected {
592     background-image: url(Images/sidebarSelectionBlurredTall.png);
593 }
594
595 body.inactive #sidebar li.selected {
596     background-image: url(Images/sidebarSelectionGrayTall.png);
597 }
598
599 #main {
600     position: absolute;
601     top: 28px;
602     left: 200px;
603     right: 0;
604     bottom: 0;
605     overflow: hidden;
606     background-color: white;
607     z-index: -100;
608 }
609
610 .panel {
611     display: none;
612     overflow: hidden;
613     position: absolute;
614     top: 0;
615     left: 0;
616     right: 0;
617     bottom: 0;
618 }
619
620 .panel.selected {
621     display: block;
622     background-color: transparent !important;
623 }
624
625 .content {
626     display: none;
627     -webkit-user-select: text;
628     overflow: none;
629     position: absolute;
630     top: 0;
631     left: 0;
632     right: 0;
633     bottom: 0;
634 }
635
636 .content.selected {
637     display: block;
638     background-color: transparent !important;
639 }
640
641 .content.image {
642     position: relative;
643     width: 100%;
644     height: 100%;
645 }
646
647 .content.image > .image {
648     position: relative;
649     -webkit-box-sizing: border-box;
650     height: 70%;
651     padding: 20px;
652 }
653
654 .content.image > .info {
655     position: relative;
656     -webkit-box-sizing: border-box;
657     height: 30%;
658     padding-top: 10px;
659     overflow: auto;
660     font-size: 11px;
661 }
662
663 .content.image img {
664     margin: auto;
665     position: absolute;
666     top: 0;
667     left: 0;
668     right: 0;
669     bottom: 0;
670     max-width: 80%;
671     max-height: 80%;
672     background-image: url(Images/checker.png);
673     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
674 }
675
676 .content.image .title {
677     text-align: center;
678     font-size: 13px;
679 }
680
681 .content.image .infoList {
682     margin: 0;
683 }
684
685 .content.image .infoList dt {
686     font-weight: bold;
687     display: inline-block;
688     width: 50%;
689     text-align: right;
690 }
691
692 .content.image .infoList dd {
693     -webkit-box-sizing: border-box;
694     display: inline-block;
695     padding-left: 10px;
696     width: 50%;
697     text-align: left;
698     margin: 0;
699 }
700
701 .content.image .infoList dd::after {
702     white-space: pre;
703     content: "\A";
704 }
705
706 .content.network {
707 }
708
709 .content.other {
710     font-family: Monaco, monospace;
711     font-size: 10px;
712     white-space: pre-wrap;
713     padding: 6px;
714 }
715
716 .content.side {
717     display: block;
718     overflow: hidden;
719     position: absolute;
720     top: 0;
721     left: 0;
722     right: 225px;
723     bottom: 0;
724 }
725
726 .content.source iframe {
727     width: 100%;
728     height: 100%;
729 }
730
731 .content.tree {
732     display: block;
733     overflow: auto;
734     padding: 0;
735     position: absolute;
736     top: 0;
737     left: 0;
738     right: 0;
739     bottom: 21px;
740 }
741
742 .sidebar {
743     position: absolute;
744     top: 0;
745     right: 0;
746     bottom: 0;
747     width: 225px;
748     background-color: rgb(232, 232, 232);
749     border-left: 1px solid rgb(64%, 64%, 64%);
750     -webkit-box-sizing: border-box;
751     -webkit-user-select: none;
752     overflow: auto;
753     padding: 0;
754 }
755
756 .crumbs {
757     -webkit-box-sizing: border-box;
758     position: absolute;
759     left: 0;
760     right: 0;
761     bottom: 0;
762     height: 21px;
763     background-image: url(Images/breadcrumbBackground.png);
764     background-repeat: repeat-x;
765     border-top: 1px solid #bbb;
766     font-size: 11px;
767     line-height: 19px;
768     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
769     color: rgb(20, 20, 20);
770 }
771
772 .crumbs > div {
773     position: absolute;
774 }
775
776 .crumbs .crumb {
777     height: 20px;
778     border-width: 0 11px 0 0;
779     -webkit-border-image: url(Images/segment.png) 0 11 0 0;
780     margin-right: -11px;
781     padding-left: 15px;
782     padding-right: 2px;
783     white-space: nowrap;
784     float: right;
785     cursor: default;
786 }
787
788 .crumbs .crumb.hidden {
789     display: block;
790     color: rgba(0, 0, 0, 0.45);
791 }
792
793 .crumbs .crumb.start {
794     padding-left: 7px;
795 }
796
797 .crumbs .crumb.end {
798     border-width: 0 2px 0 0;
799     padding-right: 6px;
800     -webkit-border-image: url(Images/segmentEnd.png) 0 2 0 0;
801 }
802
803 .crumbs .crumb.selected {
804     -webkit-border-image: url(Images/segmentSelected.png) 0 11 0 0;
805     color: black;
806     background-color: transparent !important;
807 }
808
809 .crumbs .crumb.selected:hover {
810     -webkit-border-image: url(Images/segmentSelected.png) 0 11 0 0;
811 }
812
813 .crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
814     -webkit-border-image: url(Images/segmentSelectedEnd.png) 0 2 0 0;
815 }
816
817 .crumbs .crumb:hover {
818     -webkit-border-image: url(Images/segmentHover.png) 0 11 0 0;
819     color: black;
820 }
821
822 .crumbs .crumb.hidden:hover {
823     -webkit-border-image: url(Images/segmentHover.png) 0 11 0 0;
824     color: rgba(0, 0, 0, 0.75);
825 }
826
827 .crumbs .crumb.end:hover {
828     -webkit-border-image: url(Images/segmentHoverEnd.png) 0 2 0 0;
829 }
830
831 .outline-disclosure li .selection {
832     display: none;
833     position: absolute;
834     left: 0;
835     right: 0;
836     height: 15px;
837     z-index: -1;
838 }
839
840 .outline-disclosure li.selected .selection {
841     display: block;
842 }
843
844 .content.tree > ol, #searchResults > ol {
845     position: relative;
846     padding: 2px 6px !important;
847     margin: 0;
848     color: black;
849     -webkit-user-select: none;
850     min-width: 100%;
851     -webkit-box-sizing: border-box;
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     -webkit-box-sizing: border-box;
864     margin-top: 1px;
865     margin-bottom: 1px;
866     word-wrap: break-word;
867     text-indent: -2px
868 }
869
870 .blurred .outline-disclosure li.selected, body.inactive .outline-disclosure li.selected {
871     background-color: transparent !important;
872     color: black;
873 }
874
875 .outline-disclosure li.selected {
876     background-color: transparent !important;
877     color: white;
878 }
879
880 .outline-disclosure li.parent {
881     text-indent: -12px
882 }
883
884 .content.tree li .webkit-html-tag.close {
885     margin-left: -12px;
886 }
887
888 .outline-disclosure li.parent:before {
889     content: url(Images/treeRightTriangleBlack.png);
890     float: left;
891     width: 8px;
892     height: 8px;
893     margin-top: 1px;
894     padding-right: 2px;
895 }
896
897 .outline-disclosure li.parent.expanded:before {
898     content: url(Images/treeDownTriangleBlack.png);
899 }
900
901 .outline-disclosure ol.children {
902     display: none;
903 }
904
905 .outline-disclosure ol.children.expanded {
906     display: block;
907 }
908
909 .webkit-html-comment {
910     /* Keep this in sync with view-source.css (.webkit-html-comment) */
911     color: rgb(35, 110, 37);
912 }
913
914 .webkit-html-tag {
915     /* Keep this in sync with view-source.css (.webkit-html-tag) */
916     color: rgb(136, 18, 128);
917 }
918
919 .webkit-html-attribute-name {
920     /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
921     color: rgb(153, 69, 0);
922 }
923
924 .webkit-html-attribute-value {
925     /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
926     color: rgb(26, 26, 166);
927 }
928
929 .webkit-html-external-link, .webkit-html-resource-link {
930     /* Keep this in sync with view-source.css (.webkit-html-external-link, .webkit-html-resource-link) */
931     color: #00e;
932 }
933
934 .webkit-html-external-link {
935     /* Keep this in sync with view-source.css (.webkit-html-external-link) */
936     text-decoration: none;
937 }
938
939 .webkit-html-external-link:hover {
940     /* Keep this in sync with view-source.css (.webkit-html-external-link:hover) */
941     text-decoration: underline;
942 }
943
944 .focused .content.tree li.selected * {
945     color: inherit;
946 }
947
948 .section {
949     display: block;
950     -webkit-box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
951     -webkit-border-radius: 8px;
952     background-color: white;
953     font-size: 11px;
954     margin-bottom: 8px;
955 }
956
957 .section .header {
958     padding: 2px 8px 4px;
959     border: 2px solid rgba(255, 255, 255, 0.5);
960     background-color: rgb(214, 221, 229);
961     background-image: url(Images/gradient.png);
962     background-repeat: repeat-x;
963     background-position: bottom;
964     -webkit-background-size: 100%;
965     -webkit-border-radius: 8px;
966     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
967 }
968
969 .section.expanded .header {
970     border-bottom: 2px ridge rgba(214, 221, 229, 0.5);
971     -webkit-border-top-right-radius: 8px;
972     -webkit-border-top-left-radius: 8px;
973     -webkit-border-bottom-right-radius: 0;
974     -webkit-border-bottom-left-radius: 0;
975 }
976
977 .section .header .title {
978     font-weight: bold;
979     word-wrap: break-word;
980 }
981
982 .section .header label {
983     display: none;
984 }
985
986 .section.expanded .header label {
987     display: inline;
988 }
989
990 .section .header input[type=checkbox] {
991     height: 1em;
992     width: 1em;
993     margin-left: 0;
994     margin-top: 0;
995     margin-bottom: 0;
996     vertical-align: top;
997 }
998
999 .section .header .subtitle {
1000     margin-top: 2px;
1001     font-size: 10px;
1002     word-wrap: break-word;
1003 }
1004
1005 .section .header .subtitle a {
1006     color: inherit;
1007 }
1008
1009 .section .properties {
1010     display: none;
1011     margin: 0;
1012     padding: 2px 6px 5px;
1013     list-style: none;
1014 }
1015
1016 .section.expanded .properties {
1017     display: block;
1018 }
1019
1020 .section .properties li {
1021     margin-left: 10px;
1022     white-space: nowrap;
1023     text-overflow: ellipsis;
1024     overflow: hidden;
1025 }
1026
1027 .section .properties li.parent {
1028     margin-left: 0;
1029 }
1030
1031 .section .properties li.selected {
1032     background-color: transparent !important;
1033 }
1034
1035 .section .properties ol {
1036     display: none;
1037     margin: 0;
1038     -webkit-padding-start: 12px;
1039     list-style: none;
1040 }
1041
1042 .section .properties ol.expanded {
1043     display: block;
1044 }
1045
1046 .section .properties li.parent::before {
1047     content: url(Images/treeRightTriangleBlack.png);
1048     opacity: 0.75;
1049     float: left;
1050     width: 8px;
1051     height: 8px;
1052     margin-top: 0;
1053     padding-right: 2px;
1054 }
1055
1056 .section .properties li.parent.expanded::before {
1057     content: url(Images/treeDownTriangleBlack.png);
1058     margin-top: 1px;
1059 }
1060
1061 .section .properties .overloaded {
1062     text-decoration: line-through;
1063 }
1064
1065 .section .properties .implicit {
1066     opacity: 0.5;
1067 }
1068
1069 .section .properties .inherited {
1070     display: none;
1071     opacity: 0.5;
1072 }
1073
1074 .section.show-inherited .properties .inherited {
1075     display: inline;
1076 }
1077
1078 .section .properties .name {
1079     color: rgb(136, 19, 145);
1080 }
1081
1082 .section .properties .number {
1083     color: blue;
1084 }
1085
1086 .section .properties .keyword {
1087     color: rgb(136, 19, 79);
1088 }
1089
1090 .section .properties .color {
1091     color: rgb(118, 15, 21);
1092 }
1093
1094 .swatch {
1095     display: inline-block;
1096     vertical-align: middle;
1097     margin-left: 4px;
1098     width: 0.75em;
1099     height: 0.75em;
1100     border: 1px solid rgb(180, 180, 180);
1101 }
1102
1103 .pane {
1104     margin-top: 1px;
1105 }
1106
1107 .pane > .title {
1108     background-image: url(Images/paneHeader.png);
1109     background-repeat: repeat-x;
1110     background-position: bottom;
1111     -webkit-background-size: 100%;
1112     height: 14px;
1113     padding: 0 6px;
1114     border-top: 1px solid rgb(129, 129, 129);
1115     border-bottom: 1px solid rgb(129, 129, 129);
1116     font-weight: bold;
1117     font-size: 11px;
1118     color: rgb(85, 85, 85);
1119 }
1120
1121 .pane > .title:active {
1122     background-image: url(Images/paneHeaderActive.png);
1123 }
1124
1125 .pane > .title::before {
1126     content: url(Images/treeRightTriangleBlack.png);
1127     opacity: 0.75;
1128     float: left;
1129     width: 8px;
1130     height: 8px;
1131     margin-right: 3px;
1132     margin-top: 0;
1133 }
1134
1135 .pane.expanded > .title::before {
1136     margin-top: 1px;
1137     content: url(Images/treeDownTriangleBlack.png);
1138 }
1139
1140 .pane > .body {
1141     position: relative;
1142     padding: 8px;
1143     display: none;
1144     overflow: auto;
1145 }
1146
1147 .pane.expanded > .body, .pane.expanded > .growbar {
1148     display: block;
1149 }
1150
1151 .pane > .growbar {
1152     display: none;
1153     background-image: url(Images/paneGrowHandleLine.png), url(Images/paneBottomGrow.png);
1154     background-repeat: no-repeat, repeat-x;
1155     background-position: center center, bottom;
1156     -webkit-background-size: 100%, 100%;;
1157     height: 5px;
1158 }
1159
1160 .metrics {
1161     font-size: 10px;
1162     text-align: center;
1163     white-space: nowrap;
1164 }
1165
1166 .metrics .label {
1167     position: absolute;
1168     margin-top: -10px;
1169     font-size: 9px;
1170     color: grey;
1171     background-color: rgb(232, 232, 232);
1172     margin-left: 3px;
1173     padding-left: 2px;
1174     padding-right: 2px;
1175 }
1176
1177 .metrics .margin {
1178     border: 1px dashed;
1179     display: inline-block;
1180     -webkit-box-sizing: border-box;
1181     padding: 3px;
1182     margin: 3px;
1183 }
1184
1185 .metrics .border {
1186     border: 1px black solid;
1187     display: inline-block;
1188     vertical-align: middle;
1189     -webkit-box-sizing: border-box;
1190     padding: 3px;
1191     margin: 3px;
1192 }
1193
1194 .metrics .padding {
1195     border: 1px grey dashed;
1196     display: inline-block;
1197     vertical-align: middle;
1198     -webkit-box-sizing: border-box;
1199     padding: 3px;
1200     margin: 3px;
1201 }
1202
1203 .metrics .content {
1204     position: static;
1205     border: 1px grey solid;
1206     display: inline-block;
1207     vertical-align: middle;
1208     -webkit-box-sizing: border-box;
1209     padding: 3px;
1210     margin: 3px;
1211     min-width: 80px;
1212     text-align: center;
1213     overflow: visible;
1214 }
1215
1216 .metrics .left {
1217     display: inline-block;
1218     text-align: center;
1219     vertical-align: middle;
1220     -webkit-box-sizing: border-box;
1221 }
1222
1223 .metrics .right {
1224     display: inline-block;
1225     text-align: center;
1226     vertical-align: middle;
1227     -webkit-box-sizing: border-box;
1228 }
1229
1230 .metrics .top {
1231     text-align: center;
1232 }
1233
1234 .metrics .bottom {
1235     text-align: center;
1236 }
1237
1238 .console-message-list {
1239     list-style: none;
1240     margin: 0;
1241     padding: 0;
1242     position: absolute;
1243     top: 0;
1244     bottom: 20px;
1245     left: 0;
1246     right: 0;
1247     overflow: auto;
1248 }
1249
1250 .console-prompt {
1251     font-family: monospace;
1252     font-size: 11px;
1253     margin: 0;
1254     padding: 2px 0 0;
1255     position: absolute;
1256     bottom: 0;
1257     left: 0;
1258     right: 0;
1259     height: 18px;
1260     resize: none;
1261     outline: none;
1262     border: none;
1263     border-top: 1px solid rgb(64%, 64%, 64%);
1264 }
1265
1266 .console-message, .console-command {
1267     font-size: 10px;
1268     margin: 0;
1269     padding: 3px;
1270     border-bottom: 1px solid rgb(75%, 75%, 75%);
1271     word-break: break-word;
1272     position: relative;
1273 }
1274
1275 .console-command a:hover {
1276     text-decoration: underline;
1277     cursor: pointer;
1278 }
1279
1280 .console-message-message {
1281     font-size: 11px;
1282     whitespace: pre-wrap;
1283     margin-left: 22px;
1284 }
1285
1286 .console-message-url {
1287     margin-left: 22px;
1288 }
1289
1290 .console-message-line {
1291     margin-left: 22px;
1292 }
1293
1294 .console-message-line::before {
1295     content: "line ";
1296 }
1297
1298 .console-error-level::before {
1299     content: url(Images/errorMediumIcon.png);
1300     position: absolute;
1301     left: 4px;
1302     top: 3px;
1303 }
1304
1305 .console-warning-level::before {
1306     content: url(Images/warningMediumIcon.png);
1307     position: absolute;
1308     left: 4px;
1309     top: 3px;
1310 }
1311
1312 .console-command-input, .console-command-output {
1313     font-size: 11px;
1314     margin-left: 22px;
1315     whitespace: pre-wrap;
1316 }
1317
1318 .console-command-input::before {
1319     content: ">";
1320     font-weight: bold;
1321     font-size: 15px;
1322     color: blue;
1323     position: absolute;
1324     left: 7px;
1325     top: 1px;
1326 }
1327
1328 .network-timeline {
1329     position: absolute;
1330     top: 0;
1331     bottom: 99px;
1332     left: 0;
1333     right: 0;
1334     font-family: Lucida Grande, sans-serif;
1335     font-size: 11px;
1336 }
1337
1338 .network-divider {
1339     width: 1px;
1340     height: 100%;
1341     position: absolute;
1342     background-color: rgba(0, 0, 0, 0.1);
1343 }
1344
1345 .network-divider.last {
1346     background-color: rgb(66%, 66%, 66%);
1347 }
1348
1349 .network-divider-label {
1350     position: absolute;
1351     top: 2px;
1352     right: 3px;
1353     font-size: 9px;
1354     color: rgb(50%, 50%, 50%);
1355 }
1356
1357 .network-dividers {
1358     position: absolute;
1359     left: 153px;
1360     right: 20px;
1361     bottom: 0;
1362     top: 0;
1363     z-index: -100;
1364     border-left: 1px solid rgb(66%, 66%, 66%);
1365     -webkit-box-sizing: border-box;
1366 }
1367
1368 .network-resources {
1369     position: absolute;
1370     width: 100%;
1371     overflow-y: overlay;
1372     overflow-x: hidden;
1373     border-top: 1px solid rgb(66%, 66%, 66%);
1374     top: 15px;
1375     bottom: 0;
1376 }
1377
1378 .network-title {
1379     position: relative;
1380     height: 18px;
1381 }
1382
1383 .network-title:hover {
1384     background-color: rgba(0, 0, 200, 0.1);
1385 }
1386
1387 .network-info {
1388     background-color: rgb(225, 225, 235);
1389     background-image: url(Images/attachedShadow.png), url(Images/bottomShadow.png);
1390     background-repeat: repeat-x;
1391     background-position: top, bottom;
1392     overflow: hidden;
1393 }
1394
1395 .network-info table {
1396     font-size: 11px;
1397     margin: 5px 15px 5px 5px;
1398 }
1399
1400 .network-info th {
1401     width: 145px;
1402 }
1403
1404 .network-info thead th {
1405     text-align: right;
1406 }
1407
1408 .network-info tbody th {
1409     white-space: nowrap;
1410     text-align: right;
1411     font-weight: bold;
1412     color: rgba(0, 0, 0, 0.5);
1413     vertical-align: top;
1414 }
1415
1416 .network-info td {
1417     word-break: break-word;
1418     white-space: normal;
1419 }
1420
1421 .network-file {
1422     position: absolute;
1423     left: 5px;
1424     height: 100%;
1425     width: 145px;
1426     overflow: hidden;
1427     white-space: nowrap;
1428     text-overflow: ellipsis;
1429     line-height: 18px;
1430 }
1431
1432 .network-file a {
1433     color: inherit;
1434     text-decoration: none;
1435 }
1436
1437 .network-file a:hover {
1438     text-decoration: underline;
1439 }
1440
1441 .network-area {
1442     position: absolute;
1443     left: 162px;
1444     right: 28px;
1445     height: 100%;
1446 }
1447
1448 .network-bar {
1449     position: absolute;
1450     top: 0;
1451     bottom: 0;
1452     margin: auto -7px;
1453     border-width: 6px 7px 6px 7px;
1454     height: 13px;
1455     min-width: 14px;
1456     -webkit-box-sizing: border-box;
1457     opacity: 0.8;
1458     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
1459 }
1460
1461 .network-bar.network-category-documents {
1462     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
1463 }
1464
1465 .network-bar.network-category-stylesheets {
1466     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
1467 }
1468
1469 .network-bar.network-category-images {
1470     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
1471 }
1472
1473 .network-bar.network-category-scripts {
1474     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
1475 }
1476
1477 .network-summary {
1478     position: absolute;
1479     bottom: 0;
1480     left: 0;
1481     right: 0;
1482     height: 99px;
1483     background-color: rgb(101, 111, 130);
1484     background-image: url(Images/darkShadow.png), url(Images/gradientHighlightBottom.png);
1485     background-repeat: repeat-x;
1486     background-position: top, bottom;
1487 }
1488
1489 .network-graph-area {
1490     padding-top: 20px;
1491     position: absolute;
1492     margin: auto;
1493     top: 0;
1494     bottom: 0;
1495     right: 0;
1496     left: 0;
1497     width: 575px;
1498     white-space: nowrap;
1499     color: white;
1500     text-shadow: black 0px 1px 1px;
1501 }
1502
1503 .network-graph-label {
1504     height: 38px;
1505     display: inline-block;
1506     vertical-align: top;
1507     margin-right: 5px;
1508     margin-top: -2px;
1509     text-align: right;
1510 }
1511
1512 .network-graph-side {
1513     position: relative;
1514     display: inline-block;
1515     vertical-align: top;
1516 }
1517
1518 .network-graph-legend-total {
1519     margin-top: 12px;
1520     padding-right: 5px;
1521 }
1522
1523 .network-graph-legend-total .network-graph-legend-label {
1524     text-align: right;
1525 }
1526
1527 .network-graph-mode {
1528     -webkit-appearance: none;
1529     background-color: transparent;
1530     border: none;
1531     font-weight: bold;
1532     font-size: 12px;
1533     height: 18px;
1534     line-height: 11px;
1535     text-align: right;
1536     vertical-align: middle;
1537     padding: 2px 16px 2px 8px;
1538     margin: 0;
1539     background-image: url(Images/popupArrows.png);
1540     background-position: right center;
1541     background-repeat: no-repeat;
1542     color: inherit;
1543     border: 1px solid transparent;
1544 }
1545
1546 .network-graph-mode:focus {
1547     outline: none;
1548 }
1549
1550 .network-graph-mode:hover {
1551     -webkit-border-radius: 9px;
1552     background-color: rgba(0, 0, 0, 0.2);
1553     border: 1px solid white;
1554     -webkit-box-shadow: black 0px 1px 1px;
1555 }
1556
1557 .network-graph-legend {
1558     margin-top: -8px;
1559     text-align: center;
1560 }
1561
1562 .network-graph-legend-item {
1563     display: inline-block;
1564     font-weight: bold;
1565     margin-right: 15px;
1566     vertical-align: top;
1567 }
1568
1569 .network-graph-legend-label {
1570     display: inline-block;
1571     text-align: left;
1572 }
1573
1574 .network-graph-legend-header {
1575     font-size: 12px;
1576     text-transform: capitalize;
1577 }
1578
1579 .network-graph-legend-value {
1580     font-weight: normal;
1581     font-size: 10px;
1582 }
1583
1584 .network-graph-legend-swatch {
1585     vertical-align: top;
1586     margin-top: 1px;
1587     margin-right: 3px;
1588 }
1589
1590 .network-summary-graph {
1591     vertical-align: middle;
1592 }
1593
1594 .tip-button {
1595     background-image: url(Images/tipIcon.png);
1596     border: none;
1597     width: 16px;
1598     height: 16px;
1599     float: right;
1600     background-color: transparent;
1601     margin-top: 1px;
1602 }
1603
1604 .tip-button:active {
1605     background-image: url(Images/tipIconPressed.png);
1606 }
1607
1608 .tip-balloon {
1609     position: absolute;
1610     left: 145px;
1611     top: -5px;
1612     z-index: 1000;
1613     border-width: 51px 15px 18px 37px;
1614     -webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
1615     width: 265px;
1616 }
1617
1618 .tip-balloon.bottom {
1619     position: absolute;
1620     left: 145px;
1621     top: auto;
1622     bottom: -7px;
1623     z-index: 1000;
1624     border-width: 18px 15px 51px 37px;
1625     -webkit-border-image: url(Images/tipBalloonBottom.png) 18 15 51 37;
1626 }
1627
1628 .tip-balloon-content {
1629     margin-top: -40px;
1630     margin-bottom: -2px;
1631     margin-left: 2px;
1632 }
1633
1634 .tip-balloon.bottom .tip-balloon-content {
1635     margin-top: -10px;
1636     margin-bottom: -35px;
1637 }