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