Reviewed by Tim Hatcher.
[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     -webkit-user-select: text;
1026 }
1027
1028 .section .properties li.parent {
1029     margin-left: 0;
1030 }
1031
1032 .section .properties li.selected {
1033     background-color: transparent !important;
1034 }
1035
1036 .section .properties ol {
1037     display: none;
1038     margin: 0;
1039     -webkit-padding-start: 12px;
1040     list-style: none;
1041 }
1042
1043 .section .properties ol.expanded {
1044     display: block;
1045 }
1046
1047 .section .properties li.parent::before {
1048     content: url(Images/treeRightTriangleBlack.png);
1049     opacity: 0.75;
1050     float: left;
1051     width: 8px;
1052     height: 8px;
1053     margin-top: 0;
1054     padding-right: 2px;
1055 }
1056
1057 .section .properties li.parent.expanded::before {
1058     content: url(Images/treeDownTriangleBlack.png);
1059     margin-top: 1px;
1060 }
1061
1062 .section .properties .overloaded {
1063     text-decoration: line-through;
1064 }
1065
1066 .section .properties .implicit {
1067     opacity: 0.5;
1068 }
1069
1070 .section .properties .inherited {
1071     display: none;
1072     opacity: 0.5;
1073 }
1074
1075 .section.show-inherited .properties .inherited {
1076     display: inline;
1077 }
1078
1079 .section .properties .name {
1080     color: rgb(136, 19, 145);
1081 }
1082
1083 .section .properties .number {
1084     color: blue;
1085 }
1086
1087 .section .properties .keyword {
1088     color: rgb(136, 19, 79);
1089 }
1090
1091 .section .properties .color {
1092     color: rgb(118, 15, 21);
1093 }
1094
1095 .swatch {
1096     display: inline-block;
1097     vertical-align: middle;
1098     margin-left: 4px;
1099     width: 0.75em;
1100     height: 0.75em;
1101     border: 1px solid rgb(180, 180, 180);
1102 }
1103
1104 .pane {
1105     margin-top: 1px;
1106 }
1107
1108 .pane > .title {
1109     background-image: url(Images/paneHeader.png);
1110     background-repeat: repeat-x;
1111     background-position: bottom;
1112     -webkit-background-size: 100%;
1113     height: 14px;
1114     padding: 0 6px;
1115     border-top: 1px solid rgb(129, 129, 129);
1116     border-bottom: 1px solid rgb(129, 129, 129);
1117     font-weight: bold;
1118     font-size: 11px;
1119     color: rgb(85, 85, 85);
1120 }
1121
1122 .pane > .title:active {
1123     background-image: url(Images/paneHeaderActive.png);
1124 }
1125
1126 .pane > .title::before {
1127     content: url(Images/treeRightTriangleBlack.png);
1128     opacity: 0.75;
1129     float: left;
1130     width: 8px;
1131     height: 8px;
1132     margin-right: 3px;
1133     margin-top: 0;
1134 }
1135
1136 .pane.expanded > .title::before {
1137     margin-top: 1px;
1138     content: url(Images/treeDownTriangleBlack.png);
1139 }
1140
1141 .pane > .body {
1142     position: relative;
1143     padding: 8px;
1144     display: none;
1145     overflow: auto;
1146 }
1147
1148 .pane.expanded > .body, .pane.expanded > .growbar {
1149     display: block;
1150 }
1151
1152 .pane > .growbar {
1153     display: none;
1154     background-image: url(Images/paneGrowHandleLine.png), url(Images/paneBottomGrow.png);
1155     background-repeat: no-repeat, repeat-x;
1156     background-position: center center, bottom;
1157     -webkit-background-size: 100%, 100%;;
1158     height: 5px;
1159 }
1160
1161 .metrics {
1162     font-size: 10px;
1163     text-align: center;
1164     white-space: nowrap;
1165 }
1166
1167 .metrics .label {
1168     position: absolute;
1169     margin-top: -10px;
1170     font-size: 9px;
1171     color: grey;
1172     background-color: rgb(232, 232, 232);
1173     margin-left: 3px;
1174     padding-left: 2px;
1175     padding-right: 2px;
1176 }
1177
1178 .metrics .margin {
1179     border: 1px dashed;
1180     display: inline-block;
1181     -webkit-box-sizing: border-box;
1182     padding: 3px;
1183     margin: 3px;
1184 }
1185
1186 .metrics .border {
1187     border: 1px black solid;
1188     display: inline-block;
1189     vertical-align: middle;
1190     -webkit-box-sizing: border-box;
1191     padding: 3px;
1192     margin: 3px;
1193 }
1194
1195 .metrics .padding {
1196     border: 1px grey dashed;
1197     display: inline-block;
1198     vertical-align: middle;
1199     -webkit-box-sizing: border-box;
1200     padding: 3px;
1201     margin: 3px;
1202 }
1203
1204 .metrics .content {
1205     position: static;
1206     border: 1px grey solid;
1207     display: inline-block;
1208     vertical-align: middle;
1209     -webkit-box-sizing: border-box;
1210     padding: 3px;
1211     margin: 3px;
1212     min-width: 80px;
1213     text-align: center;
1214     overflow: visible;
1215 }
1216
1217 .metrics .left {
1218     display: inline-block;
1219     text-align: center;
1220     vertical-align: middle;
1221     -webkit-box-sizing: border-box;
1222 }
1223
1224 .metrics .right {
1225     display: inline-block;
1226     text-align: center;
1227     vertical-align: middle;
1228     -webkit-box-sizing: border-box;
1229 }
1230
1231 .metrics .top {
1232     text-align: center;
1233 }
1234
1235 .metrics .bottom {
1236     text-align: center;
1237 }
1238
1239 .console-message-list {
1240     list-style: none;
1241     margin: 0;
1242     padding: 0;
1243     position: absolute;
1244     top: 0;
1245     bottom: 20px;
1246     left: 0;
1247     right: 0;
1248     overflow: auto;
1249 }
1250
1251 .console-prompt {
1252     font-family: monospace;
1253     font-size: 11px;
1254     margin: 0;
1255     padding: 2px 0 0;
1256     position: absolute;
1257     bottom: 0;
1258     left: 0;
1259     right: 0;
1260     height: 18px;
1261     resize: none;
1262     outline: none;
1263     border: none;
1264     border-top: 1px solid rgb(64%, 64%, 64%);
1265 }
1266
1267 .console-message, .console-command {
1268     font-size: 10px;
1269     margin: 0;
1270     padding: 3px;
1271     border-bottom: 1px solid rgb(75%, 75%, 75%);
1272     word-break: break-word;
1273     position: relative;
1274 }
1275
1276 .console-command a:hover {
1277     text-decoration: underline;
1278     cursor: pointer;
1279 }
1280
1281 .console-message-message {
1282     font-size: 11px;
1283     whitespace: pre-wrap;
1284     margin-left: 22px;
1285 }
1286
1287 .console-message-url {
1288     margin-left: 22px;
1289 }
1290
1291 .console-message-line {
1292     margin-left: 22px;
1293 }
1294
1295 .console-message-line::before {
1296     content: "line ";
1297 }
1298
1299 .console-error-level::before {
1300     content: url(Images/errorMediumIcon.png);
1301     position: absolute;
1302     left: 4px;
1303     top: 3px;
1304 }
1305
1306 .console-warning-level::before {
1307     content: url(Images/warningMediumIcon.png);
1308     position: absolute;
1309     left: 4px;
1310     top: 3px;
1311 }
1312
1313 .console-command-input, .console-command-output {
1314     font-size: 11px;
1315     margin-left: 22px;
1316     whitespace: pre-wrap;
1317 }
1318
1319 .console-command-input::before {
1320     content: ">";
1321     font-weight: bold;
1322     font-size: 15px;
1323     color: blue;
1324     position: absolute;
1325     left: 7px;
1326     top: 1px;
1327 }
1328
1329 .network-timeline {
1330     position: absolute;
1331     top: 0;
1332     bottom: 99px;
1333     left: 0;
1334     right: 0;
1335     font-family: Lucida Grande, sans-serif;
1336     font-size: 11px;
1337 }
1338
1339 .network-divider {
1340     width: 1px;
1341     height: 100%;
1342     position: absolute;
1343     background-color: rgba(0, 0, 0, 0.1);
1344 }
1345
1346 .network-divider.last {
1347     background-color: rgb(66%, 66%, 66%);
1348 }
1349
1350 .network-divider-label {
1351     position: absolute;
1352     top: 2px;
1353     right: 3px;
1354     font-size: 9px;
1355     color: rgb(50%, 50%, 50%);
1356 }
1357
1358 .network-dividers {
1359     position: absolute;
1360     left: 153px;
1361     right: 20px;
1362     bottom: 0;
1363     top: 0;
1364     z-index: -100;
1365     border-left: 1px solid rgb(66%, 66%, 66%);
1366     -webkit-box-sizing: border-box;
1367 }
1368
1369 .network-resources {
1370     position: absolute;
1371     width: 100%;
1372     overflow-y: overlay;
1373     overflow-x: hidden;
1374     border-top: 1px solid rgb(66%, 66%, 66%);
1375     top: 15px;
1376     bottom: 0;
1377 }
1378
1379 .network-title {
1380     position: relative;
1381     height: 18px;
1382 }
1383
1384 .network-title:hover {
1385     background-color: rgba(0, 0, 200, 0.1);
1386 }
1387
1388 .network-info {
1389     background-color: rgb(225, 225, 235);
1390     background-image: url(Images/attachedShadow.png), url(Images/bottomShadow.png);
1391     background-repeat: repeat-x;
1392     background-position: top, bottom;
1393     overflow: hidden;
1394     -webkit-user-select: text;
1395 }
1396
1397 .network-info table {
1398     font-size: 11px;
1399     margin: 5px 15px 5px 5px;
1400 }
1401
1402 .network-info th {
1403     width: 145px;
1404 }
1405
1406 .network-info thead th {
1407     text-align: right;
1408 }
1409
1410 .network-info tbody th {
1411     white-space: nowrap;
1412     text-align: right;
1413     font-weight: bold;
1414     color: rgba(0, 0, 0, 0.5);
1415     vertical-align: top;
1416 }
1417
1418 .network-info td {
1419     word-break: break-word;
1420     white-space: normal;
1421 }
1422
1423 .network-file {
1424     position: absolute;
1425     left: 5px;
1426     height: 100%;
1427     width: 145px;
1428     overflow: hidden;
1429     white-space: nowrap;
1430     text-overflow: ellipsis;
1431     line-height: 18px;
1432 }
1433
1434 .network-file a {
1435     color: inherit;
1436     text-decoration: none;
1437 }
1438
1439 .network-file a:hover {
1440     text-decoration: underline;
1441 }
1442
1443 .network-area {
1444     position: absolute;
1445     left: 162px;
1446     right: 28px;
1447     height: 100%;
1448 }
1449
1450 .network-bar {
1451     position: absolute;
1452     top: 0;
1453     bottom: 0;
1454     margin: auto -7px;
1455     border-width: 6px 7px 6px 7px;
1456     height: 13px;
1457     min-width: 14px;
1458     -webkit-box-sizing: border-box;
1459     opacity: 0.8;
1460     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
1461 }
1462
1463 .network-bar.network-category-documents {
1464     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
1465 }
1466
1467 .network-bar.network-category-stylesheets {
1468     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
1469 }
1470
1471 .network-bar.network-category-images {
1472     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
1473 }
1474
1475 .network-bar.network-category-scripts {
1476     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
1477 }
1478
1479 .network-summary {
1480     position: absolute;
1481     bottom: 0;
1482     left: 0;
1483     right: 0;
1484     height: 99px;
1485     background-color: rgb(101, 111, 130);
1486     background-image: url(Images/darkShadow.png), url(Images/gradientHighlightBottom.png);
1487     background-repeat: repeat-x;
1488     background-position: top, bottom;
1489 }
1490
1491 .network-graph-area {
1492     padding-top: 20px;
1493     position: absolute;
1494     margin: auto;
1495     top: 0;
1496     bottom: 0;
1497     right: 0;
1498     left: 0;
1499     width: 575px;
1500     white-space: nowrap;
1501     color: white;
1502     text-shadow: black 0px 1px 1px;
1503 }
1504
1505 .network-graph-label {
1506     height: 38px;
1507     display: inline-block;
1508     vertical-align: top;
1509     margin-right: 5px;
1510     margin-top: -2px;
1511     text-align: right;
1512 }
1513
1514 .network-graph-side {
1515     position: relative;
1516     display: inline-block;
1517     vertical-align: top;
1518 }
1519
1520 .network-graph-legend-total {
1521     margin-top: 12px;
1522     padding-right: 5px;
1523 }
1524
1525 .network-graph-legend-total .network-graph-legend-label {
1526     text-align: right;
1527 }
1528
1529 .network-graph-mode {
1530     -webkit-appearance: none;
1531     background-color: transparent;
1532     border: none;
1533     font-weight: bold;
1534     font-size: 12px;
1535     height: 18px;
1536     line-height: 11px;
1537     text-align: right;
1538     vertical-align: middle;
1539     padding: 2px 16px 2px 8px;
1540     margin: 0;
1541     background-image: url(Images/popupArrows.png);
1542     background-position: right center;
1543     background-repeat: no-repeat;
1544     color: inherit;
1545     border: 1px solid transparent;
1546 }
1547
1548 .network-graph-mode:focus {
1549     outline: none;
1550 }
1551
1552 .network-graph-mode:hover {
1553     -webkit-border-radius: 9px;
1554     background-color: rgba(0, 0, 0, 0.2);
1555     border: 1px solid white;
1556     -webkit-box-shadow: black 0px 1px 1px;
1557 }
1558
1559 .network-graph-legend {
1560     margin-top: -8px;
1561     text-align: center;
1562 }
1563
1564 .network-graph-legend-item {
1565     display: inline-block;
1566     font-weight: bold;
1567     margin-right: 15px;
1568     vertical-align: top;
1569 }
1570
1571 .network-graph-legend-label {
1572     display: inline-block;
1573     text-align: left;
1574 }
1575
1576 .network-graph-legend-header {
1577     font-size: 12px;
1578     text-transform: capitalize;
1579 }
1580
1581 .network-graph-legend-value {
1582     font-weight: normal;
1583     font-size: 10px;
1584 }
1585
1586 .network-graph-legend-swatch {
1587     vertical-align: top;
1588     margin-top: 1px;
1589     margin-right: 3px;
1590 }
1591
1592 .network-summary-graph {
1593     vertical-align: middle;
1594 }
1595
1596 .tip-button {
1597     background-image: url(Images/tipIcon.png);
1598     border: none;
1599     width: 16px;
1600     height: 16px;
1601     float: right;
1602     background-color: transparent;
1603     margin-top: 1px;
1604 }
1605
1606 .tip-button:active {
1607     background-image: url(Images/tipIconPressed.png);
1608 }
1609
1610 .tip-balloon {
1611     position: absolute;
1612     left: 145px;
1613     top: -5px;
1614     z-index: 1000;
1615     border-width: 51px 15px 18px 37px;
1616     -webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
1617     width: 265px;
1618 }
1619
1620 .tip-balloon.bottom {
1621     position: absolute;
1622     left: 145px;
1623     top: auto;
1624     bottom: -7px;
1625     z-index: 1000;
1626     border-width: 18px 15px 51px 37px;
1627     -webkit-border-image: url(Images/tipBalloonBottom.png) 18 15 51 37;
1628 }
1629
1630 .tip-balloon-content {
1631     margin-top: -40px;
1632     margin-bottom: -2px;
1633     margin-left: 2px;
1634 }
1635
1636 .tip-balloon.bottom .tip-balloon-content {
1637     margin-top: -10px;
1638     margin-bottom: -35px;
1639 }