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