Reviewed by Sam Weinig.
[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-color: 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.detached.platform-mac-leopard #toolbar {
72     background: transparent !important;
73 }
74
75 body.inactive #toolbar {
76     background-image: url(Images/toolbarBackgroundInactive.png);
77     border-bottom: 1px solid rgb(64%, 64%, 64%);
78 }
79
80 body.attached #toolbar {
81     border-top: 1px solid rgb(80, 80, 80);
82     background-image: url(Images/darkShadow.png), url(Images/toolbarBackground.png);
83     background-position: center -2px, top;
84     -webkit-background-size: auto auto, auto 135%;
85 }
86
87 body.attached.inactive #toolbar {
88     background-image: url(Images/darkShadow.png), url(Images/toolbarBackgroundInactive.png);
89     background-position: center -3px, top;
90     border-top: 1px solid rgb(100, 100, 100);
91     border-bottom: 1px solid rgb(64%, 64%, 64%);
92 }
93
94 #toolbar button, #toolbar button:disabled:active {
95     border-width: 3px 3px 4px 3px;
96     -webkit-border-image: url(Images/toolbarButton.png) 3 3 4 3;
97     height: 19px;
98     -webkit-box-sizing: border-box;
99     vertical-align: middle;
100 }
101
102 #toolbar button:focus {
103     outline: none;
104 }
105
106 #toolbar button:active, #toolbar button.selected {
107     -webkit-border-image: url(Images/toolbarButtonPressed.png) 3 3 4 3;
108 }
109
110 body.inactive #toolbar button:active, body.inactive #toolbar button.selected {
111     -webkit-border-image: url(Images/toolbarButtonPressedInactive.png) 3 3 4 3;
112 }
113
114 body.inactive #toolbar button, body.inactive #toolbar button:disabled:active {
115     -webkit-border-image: url(Images/toolbarButtonInactive.png) 3 3 4 3;
116 }
117
118 #toolbar select, #toolbar select:disabled:active {
119     background-color: transparent;
120     border-width: 3px 12px 4px 3px;
121     border-color: transparent;
122     -webkit-border-image: url(Images/toolbarPopup.png) 3 12 4 3;
123     height: 19px;
124     font-size: 10px;
125     padding-left: 8px;
126     padding-right: 4px;
127     -webkit-box-sizing: border-box;
128     -webkit-border-radius: 0;
129     -webkit-appearance: none;
130     vertical-align: middle;
131 }
132
133 #toolbar select:focus {
134     outline: none;
135 }
136
137 #toolbar select:active, #toolbar select.selected {
138     -webkit-border-image: url(Images/toolbarPopupPressed.png) 3 12 4 3;
139 }
140
141 body.inactive #toolbar select:active, body.inactive #toolbar select.selected {
142     -webkit-border-image: url(Images/toolbarPopupPressedInactive.png) 3 12 4 3;
143 }
144
145 body.inactive #toolbar select, body.inactive #toolbar select:disabled:active {
146     -webkit-border-image: url(Images/toolbarPopupInactive.png) 3 12 4 3;
147 }
148
149 #toolbar .split-button-divider {
150     width: 1px;
151     height: 19px;
152     content: url(Images/toolbarSplitButtonDivider.png);
153     vertical-align: middle;
154 }
155
156 body.inactive #toolbar .split-button-divider {
157     content: url(Images/toolbarSplitButtonDividerInactive.png);
158 }
159
160 #toolbar .split-button {
161     padding: 0;
162     width: 20px;
163 }
164
165 #toolbar .split-button.middle {
166     border-left: transparent none 0 !important;
167     border-right: transparent none 0 !important;
168 }
169
170 #toolbar .split-button.first {
171     border-right: transparent none 0 !important;
172 }
173
174 #toolbar .split-button.last {
175     border-left: transparent none 0 !important;
176 }
177
178 #back img {
179     content: url(Images/treeLeftTriangleBlack.png);
180     position: relative;
181     top: -1px;
182     left: -1px;
183     width: 8px;
184     height: 8px;
185 }
186
187 #back:disabled img, #forward:disabled img {
188     opacity: 0.5;
189 }
190
191 #forward img {
192     content: url(Images/treeRightTriangleBlack.png);
193     position: relative;
194     top: -1px;
195     left: 2px;
196     width: 8px;
197     height: 8px;
198 }
199
200 .view-button-source img {
201     content: url(Images/sourceViewButton.png);
202     position: relative;
203     top: -1px;
204     width: 8px;
205     height: 7px;
206     opacity: 0.66;
207 }
208
209 .view-button-source.selected img {
210     opacity: 1;
211 }
212
213 .view-button-dom img {
214     content: url(Images/domViewButton.png);
215     position: relative;
216     top: -1px;
217     left: 1px;
218     width: 10px;
219     height: 7px;
220     opacity: 0.66;
221 }
222
223 .view-button-dom.selected img {
224     opacity: 1;
225 }
226
227 #toolbarButtons {
228     position: absolute;
229     left: 200px;
230     padding-left: 8px;
231 }
232
233 #search {
234     float: right;
235     width: 200px;
236 }
237
238 #search:focus {
239     outline: 1px auto;
240 }
241
242 #searchResults {
243     position: absolute;
244     top: -100px;
245     left: 0;
246     right: 0;
247     height: 100px;
248     z-index: -1;
249     background-color: white;
250     border-bottom: 1px solid rgb(180, 180, 180);
251     overflow-y: auto;
252     overflow-x: hidden;
253     -webkit-box-sizing: border-box;
254 }
255
256 .search-results-section {
257     color: gray;
258     width: 28px;
259     float: left;
260     margin-left: -45px;
261     text-align: right;
262     font-size: 10px;
263     margin-top: 1px;
264     white-space: nowrap;
265 }
266
267 .selected .search-results-section {
268     color: rgba(255, 255, 255, 0.8);
269 }
270
271 body.inactive .focused .selected .search-results-section {
272     color: rgba(0, 0, 0, 0.5);
273 }
274
275 .blurred .selected .search-results-section {
276     color: rgba(0, 0, 0, 0.5);
277 }
278
279 #searchResults > ol > ol > li {
280     padding-left: 45px;
281     white-space: nowrap;
282 }
283
284 .search-matched-string {
285     background-color: #ff8;
286 }
287
288 .selected .search-matched-string {
289     background-color: transparent;
290 }
291
292 #sidebar {
293     position: absolute;
294     top: 28px;
295     left: 0;
296     bottom: 0;
297     width: 200px;
298     background-color: rgb(214, 221, 229);
299     border-right: 1px solid rgb(64%, 64%, 64%);
300     -webkit-box-sizing: border-box;
301 }
302
303 body.inactive #sidebar {
304     background-color: rgb(232, 232, 232);
305 }
306
307 #statusbar {
308     position: absolute;
309     padding: 0;
310     left: 0;
311     right: 0;
312     bottom: 0;
313     height: 21px;
314     border-top: 1px solid #bbb;
315     -webkit-box-sizing: border-box;
316     background-image: url(Images/sidebarStatusAreaBackground.png);
317     background-position: right, center;
318     background-repeat: no-repeat, repeat-x;
319 }
320
321 #statusbar #sidebarResizeWidget {
322     display: block;
323     float: right;
324     width: 17px;
325     height: 20px;
326     background: url(Images/sidebarResizeWidget.png) right no-repeat;
327     cursor: col-resize;
328 }
329
330 #statusbar button {
331     -webkit-apearance: none;
332     vertical-align: top;
333     border: 0;
334     width: 32px;
335     height: 20px;
336     margin: 0;
337     margin-left: -1px;
338     padding: 0;
339 }
340
341 #statusbar button:focus {
342     outline: none;
343 }
344
345 #statusbar button.action {
346     background-image: url(Images/sidebarActionWidget.png);
347 }
348
349 #statusbar button.action:active {
350     background-image: url(Images/sidebarActionWidgetPressed.png);
351 }
352
353 #statusbar #statusToggle {
354     background-image: url(Images/showStatusWidget.png);
355 }
356
357 #statusbar #statusToggle:active {
358     background-image: url(Images/showStatusWidgetPressed.png);
359 }
360
361 #statusbar #statusToggle.hide {
362     background-image: url(Images/hideStatusWidget.png);
363 }
364
365 #statusbar #statusToggle.hide:active {
366     background-image: url(Images/hideStatusWidgetPressed.png);
367 }
368
369 body.detached #attachToggle {
370     background-image: url(Images/sidebarAttachWidget.png);
371 }
372
373 body.detached #attachToggle:active {
374     background-image: url(Images/sidebarAttachWidgetPressed.png);
375 }
376
377 body.attached #attachToggle {
378     background-image: url(Images/sidebarDetachWidget.png);
379 }
380
381 body.attached #attachToggle:active {
382     background-image: url(Images/sidebarDetachWidgetPressed.png);
383 }
384
385 #status {
386     overflow: hidden;
387     position: absolute;
388     bottom: -57px;
389     left: 0;
390     width: 100%;
391     height: 78px;
392     padding: 2px 0;
393     margin: 0;
394     border-top: 1px solid rgb(64%, 64%, 64%);
395     -webkit-box-sizing: border-box;
396     list-style: none;
397     font-size: 11px;
398     -webkit-transition: bottom 250ms ease-in-out;
399 }
400
401 #status.visible {
402     bottom: 21px;
403 }
404
405 #status li {
406     position: relative;
407     height: 37px;
408     -webkit-box-sizing: border-box;
409 }
410
411 #status li.selected {
412     background-image: url(Images/sidebarSelectionTall.png);
413     background-repeat: repeat-x;
414     background-position: center;
415     background-color: transparent !important;
416     color: white;
417     font-weight: bold;
418     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
419 }
420
421 #status .icon {
422     position: absolute;
423     top: 2px;
424     left: 15px;
425     width: 32px;
426     height: 32px;
427     background-repeat: no-repeat;
428     background-position: center center;
429 }
430
431 #status .icon.console {
432     background-image: url(Images/console.png);
433 }
434
435 #status .icon.network {
436     background-image: url(Images/network.png);
437 }
438
439 #status .title {
440     -webkit-box-sizing: border-box;
441     position: relative;
442     top: 5px;
443     padding-left: 58px;
444     right: 5px;
445     display: block;
446     white-space: nowrap;
447     overflow: hidden;
448     text-overflow: ellipsis;
449 }
450
451 #status .title.only {
452     top: 10px;
453 }
454
455 #status .info {
456     -webkit-box-sizing: border-box;
457     position: relative;
458     margin-top: 6px;
459     padding-left: 58px;
460     right: 5px;
461     display: block;
462     font-size: 9px;
463     white-space: nowrap;
464     overflow: hidden;
465     text-overflow: ellipsis;
466 }
467
468 #list {
469     overflow-x: hidden;
470     overflow-y: auto;
471     position: absolute;
472     top: 0;
473     left: 0;
474     bottom: 21px;
475     width: 100%;
476     padding: 2px 0;
477     margin: 0;
478     -webkit-box-sizing: border-box;
479     list-style: none;
480     font-size: 11px;
481     -webkit-transition: bottom 250ms ease-in-out;
482 }
483
484 #list.status-visible {
485     bottom: 99px;
486 }
487
488 #list > li {
489     height: 26px;
490     color: rgb(96, 110, 128);
491     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
492     font-weight: bold;
493     line-height: 20px;
494     text-indent: 20px;
495     background-image: url(Images/rightTriangle.png);
496     background-repeat: no-repeat;
497     background-position: 10px 6px;
498     text-transform: uppercase;
499 }
500
501 #list > ol + li {
502     margin-top: 5px;
503 }
504
505 #list > li + li {
506     margin-top: 5px;
507 }
508
509 #list > li.expanded {
510     background-image: url(Images/downTriangle.png);
511     background-position: 10px 7px;
512 }
513
514 #list > ol {
515     display: none;
516     list-style: none;
517     padding: 0;
518     margin: 0;
519 }
520
521 #list > ol.expanded {
522     display: block;
523 }
524
525 #list > ol > li {
526     position: relative;
527     height: 37px;
528     -webkit-box-sizing: border-box;
529 }
530
531 #list .icon {
532     position: absolute;
533     top: 2px;
534     left: 15px;
535     width: 32px;
536     height: 32px;
537     background-image: url(Images/document.png);
538     background-repeat: no-repeat;
539     background-position: center center;
540 }
541
542 #list .icon.database {
543     background-image: url(Images/database.png);
544 }
545
546 #list .icon.plain {
547     background-image: url(Images/plainDocument.png);
548 }
549
550 #list .icon.font {
551     background-image: url(Images/plainDocument.png);
552 }
553
554 #list .icon.font .preview {
555     overflow: hidden;
556     text-align: center;
557     font-size: 14px;
558     line-height: 14px;
559     font-weight: normal;
560     color: black;
561     text-shadow: none;
562 }
563
564 #list .icon .preview {
565     margin: auto;
566     display: block;
567     position: absolute;
568     top: 0;
569     bottom: 0;
570     left: 0;
571     right: 0;
572     max-width: 20px;
573     max-height: 22px;
574     -webkit-user-drag: none;
575     -webkit-box-sizing: border-box;
576     border-top: 6px solid transparent;
577 }
578
579 #list .icon .progress {
580     margin: auto;
581     display: block;
582     position: absolute;
583     top: 0;
584     bottom: 0;
585     left: 0;
586     right: 0;
587 }
588
589 #list .title {
590     -webkit-box-sizing: border-box;
591     position: relative;
592     top: 5px;
593     padding-left: 58px;
594     right: 5px;
595     display: block;
596     white-space: nowrap;
597     overflow: hidden;
598     text-overflow: ellipsis;
599 }
600
601 #list .title.only {
602     top: 10px;
603 }
604
605 #sidebar li .count {
606     float: right;
607     margin-top: 11px;
608     margin-right: 6px;
609     font-family: Helvetica, sans-serif;
610     font-weight: bold;
611     font-size: 11px;
612     line-height: 10px;
613     -webkit-border-radius: 7px;
614     color: white;
615     text-shadow: none;
616     background-image: url(Images/gradientHighlight.png), url(Images/gradient.png);
617     -webkit-background-size: auto 100%, auto 100%;
618     background-position: center;
619     padding: 2px 4px;
620     text-align: center;
621     text-indent: 0;
622     min-width: 20px;
623     -webkit-box-sizing: border-box;
624 }
625
626 #sidebar li .count.warnings {
627     background-color: orange;
628 }
629
630 #sidebar li .count.errors {
631     background-color: red;
632 }
633
634 #list .info {
635     -webkit-box-sizing: border-box;
636     position: relative;
637     margin-top: 6px;
638     padding-left: 58px;
639     right: 5px;
640     display: block;
641     font-size: 9px;
642     white-space: nowrap;
643     overflow: hidden;
644     text-overflow: ellipsis;
645 }
646
647 #list li.selected {
648     background-image: url(Images/sidebarSelectionTall.png);
649     background-repeat: repeat-x;
650     background-position: center;
651     background-color: transparent !important;
652     color: white;
653     font-weight: bold;
654     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
655 }
656
657 #sidebar.blurred li.selected {
658     background-image: url(Images/sidebarSelectionBlurredTall.png);
659 }
660
661 body.inactive #sidebar li.selected {
662     background-image: url(Images/sidebarSelectionGrayTall.png);
663 }
664
665 #main {
666     position: absolute;
667     top: 28px;
668     left: 200px;
669     right: 0;
670     bottom: 0;
671     overflow: hidden;
672     background-color: white;
673     z-index: -100;
674 }
675
676 #panels {
677     position: absolute;
678     top: 0;
679     left: 0;
680     right: 0;
681     bottom: 0;
682     overflow: hidden;
683     z-index: -100;
684 }
685
686 .panel {
687     display: none;
688     overflow: hidden;
689     position: absolute;
690     top: 0;
691     left: 0;
692     right: 0;
693     bottom: 0;
694 }
695
696 .panel.selected {
697     display: block;
698     background-color: transparent !important;
699 }
700
701 .content {
702     display: none;
703     -webkit-user-select: text;
704     overflow: none;
705     position: absolute;
706     top: 0;
707     left: 0;
708     right: 0;
709     bottom: 0;
710 }
711
712 .content.selected {
713     display: block;
714     background-color: transparent !important;
715 }
716
717 .panel.font {
718     font-size: 60px;
719     white-space: pre-wrap;
720     word-wrap: break-word;
721     text-align: center;
722 }
723
724 .panel.font .preview {
725     position: absolute;
726     margin-top: auto;
727     margin-bottom: auto;
728     top: 0;
729     left: 0;
730     right: 0;
731     bottom: 0;
732 }
733
734 .panel.image {
735     position: relative;
736     width: 100%;
737     height: 100%;
738 }
739
740 .panel.image > .image {
741     position: relative;
742     -webkit-box-sizing: border-box;
743     height: 70%;
744     padding: 20px;
745 }
746
747 .panel.image > .info {
748     position: relative;
749     -webkit-box-sizing: border-box;
750     height: 30%;
751     padding-top: 10px;
752     overflow: auto;
753     font-size: 11px;
754 }
755
756 .panel.image img {
757     margin: auto;
758     position: absolute;
759     top: 0;
760     left: 0;
761     right: 0;
762     bottom: 0;
763     max-width: 80%;
764     max-height: 80%;
765     background-image: url(Images/checker.png);
766     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
767 }
768
769 .panel.image .title {
770     text-align: center;
771     font-size: 13px;
772 }
773
774 .panel.image .infoList {
775     margin: 0;
776 }
777
778 .panel.image .infoList dt {
779     font-weight: bold;
780     display: inline-block;
781     width: 50%;
782     text-align: right;
783 }
784
785 .panel.image .infoList dd {
786     -webkit-box-sizing: border-box;
787     display: inline-block;
788     padding-left: 10px;
789     width: 50%;
790     text-align: left;
791     margin: 0;
792 }
793
794 .panel.image .infoList dd::after {
795     white-space: pre;
796     content: "\A";
797 }
798
799 .content.network {
800 }
801
802 .content.other {
803     font-family: Monaco, monospace;
804     font-size: 10px;
805     white-space: pre-wrap;
806     padding: 6px;
807 }
808
809 .content.side {
810     display: block;
811     overflow: hidden;
812     position: absolute;
813     top: 0;
814     left: 0;
815     right: 225px;
816     bottom: 0;
817 }
818
819 .content.source iframe {
820     width: 100%;
821     height: 100%;
822 }
823
824 .content.tree {
825     display: block;
826     overflow: auto;
827     padding: 0;
828     position: absolute;
829     top: 0;
830     left: 0;
831     right: 0;
832     bottom: 21px;
833 }
834
835 .sidebar {
836     position: absolute;
837     top: 0;
838     right: 0;
839     bottom: 0;
840     width: 225px;
841     background-color: rgb(232, 232, 232);
842     border-left: 1px solid rgb(64%, 64%, 64%);
843     -webkit-box-sizing: border-box;
844     -webkit-user-select: none;
845     overflow: auto;
846     padding: 0;
847 }
848
849 .crumbs {
850     -webkit-user-select: none;
851     -webkit-box-sizing: border-box;
852     position: absolute;
853     left: 0;
854     right: 0;
855     bottom: 0;
856     height: 21px;
857     background-image: url(Images/breadcrumbBackground.png);
858     background-repeat: repeat-x;
859     border-top: 1px solid #bbb;
860     font-size: 11px;
861     line-height: 19px;
862     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
863     color: rgb(20, 20, 20);
864     overflow: hidden;
865 }
866
867 .crumbs > div {
868     position: absolute;
869 }
870
871 .crumbs .crumb {
872     -webkit-box-sizing: border-box;
873     height: 20px;
874     border-width: 0 11px 0 0;
875     -webkit-border-image: url(Images/segment.png) 0 11 0 0;
876     margin-right: -11px;
877     padding-left: 15px;
878     padding-right: 2px;
879     white-space: nowrap;
880     float: right;
881     cursor: default;
882 }
883
884 .crumbs .crumb.collapsed > * {
885     display: none;
886 }
887
888 .crumbs .crumb.collapsed::before {
889     content: "\2026"; /* ellipses */
890     font-weight: bold;
891 }
892
893 .crumbs .crumb.compact .extra {
894     display: none;
895 }
896
897 .crumbs .crumb.dimmed {
898     color: rgba(0, 0, 0, 0.45);
899 }
900
901 .crumbs .crumb.start {
902     padding-left: 7px;
903 }
904
905 .crumbs .crumb.end {
906     border-width: 0 2px 0 0;
907     padding-right: 6px;
908     -webkit-border-image: url(Images/segmentEnd.png) 0 2 0 0;
909 }
910
911 .crumbs .crumb.selected {
912     -webkit-border-image: url(Images/segmentSelected.png) 0 11 0 0;
913     background-color: transparent !important;
914     color: black;
915 }
916
917 .crumbs .crumb.selected:hover {
918     -webkit-border-image: url(Images/segmentSelected.png) 0 11 0 0;
919 }
920
921 .crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
922     -webkit-border-image: url(Images/segmentSelectedEnd.png) 0 2 0 0;
923 }
924
925 .crumbs .crumb:hover {
926     -webkit-border-image: url(Images/segmentHover.png) 0 11 0 0;
927     color: black;
928 }
929
930 .crumbs .crumb.dimmed:hover {
931     -webkit-border-image: url(Images/segmentHover.png) 0 11 0 0;
932     color: rgba(0, 0, 0, 0.75);
933 }
934
935 .crumbs .crumb.end:hover {
936     -webkit-border-image: url(Images/segmentHoverEnd.png) 0 2 0 0;
937 }
938
939 .outline-disclosure li .selection {
940     display: none;
941     position: absolute;
942     left: 0;
943     right: 0;
944     height: 15px;
945     z-index: -1;
946 }
947
948 .outline-disclosure li.selected .selection {
949     display: block;
950 }
951
952 .content.tree > ol, #searchResults > ol {
953     position: relative;
954     padding: 2px 6px !important;
955     margin: 0;
956     color: black;
957     -webkit-user-select: none;
958     min-width: 100%;
959     -webkit-box-sizing: border-box;
960 }
961
962 .outline-disclosure, .outline-disclosure ol {
963     list-style-type: none;
964     font-size: 11px;
965     -webkit-padding-start: 12px;
966     margin: 0;
967 }
968
969 .outline-disclosure li {
970     padding: 0 0 2px 14px;
971     -webkit-box-sizing: border-box;
972     margin-top: 1px;
973     margin-bottom: 1px;
974     word-wrap: break-word;
975     text-indent: -2px
976 }
977
978 .blurred .outline-disclosure li.selected, body.inactive .outline-disclosure li.selected {
979     background-color: transparent !important;
980     color: black;
981 }
982
983 .outline-disclosure li.selected {
984     background-color: transparent !important;
985     color: white;
986 }
987
988 .outline-disclosure li.parent {
989     text-indent: -12px
990 }
991
992 .content.tree li .webkit-html-tag.close {
993     margin-left: -12px;
994 }
995
996 .outline-disclosure li.parent::before {
997     content: url(Images/treeRightTriangleBlack.png);
998     float: left;
999     width: 8px;
1000     height: 8px;
1001     margin-top: 1px;
1002     padding-right: 2px;
1003 }
1004
1005 .blurred .outline-disclosure li.parent.selected::before, body.inactive .outline-disclosure li.parent.selected::before {
1006     content: url(Images/treeRightTriangleBlack.png);
1007 }
1008
1009 .outline-disclosure li.parent.selected::before {
1010     content: url(Images/treeRightTriangleWhite.png);
1011 }
1012
1013 .blurred .outline-disclosure li.parent.expanded.selected::before, body.inactive .outline-disclosure li.parent.expanded.selected::before {
1014     content: url(Images/treeDownTriangleBlack.png);
1015 }
1016
1017 .outline-disclosure li.parent.expanded:before {
1018     content: url(Images/treeDownTriangleBlack.png);
1019 }
1020
1021 .outline-disclosure li.parent.expanded.selected::before {
1022     content: url(Images/treeDownTriangleWhite.png);
1023 }
1024
1025 .outline-disclosure ol.children {
1026     display: none;
1027 }
1028
1029 .outline-disclosure ol.children.expanded {
1030     display: block;
1031 }
1032
1033 .webkit-html-comment {
1034     /* Keep this in sync with view-source.css (.webkit-html-comment) */
1035     color: rgb(35, 110, 37);
1036 }
1037
1038 .webkit-html-tag {
1039     /* Keep this in sync with view-source.css (.webkit-html-tag) */
1040     color: rgb(136, 18, 128);
1041 }
1042
1043 .webkit-html-attribute-name {
1044     /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
1045     color: rgb(153, 69, 0);
1046 }
1047
1048 .webkit-html-attribute-value {
1049     /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
1050     color: rgb(26, 26, 166);
1051 }
1052
1053 .webkit-html-external-link, .webkit-html-resource-link {
1054     /* Keep this in sync with view-source.css (.webkit-html-external-link, .webkit-html-resource-link) */
1055     color: #00e;
1056 }
1057
1058 .webkit-html-external-link {
1059     /* Keep this in sync with view-source.css (.webkit-html-external-link) */
1060     text-decoration: none;
1061 }
1062
1063 .webkit-html-external-link:hover {
1064     /* Keep this in sync with view-source.css (.webkit-html-external-link:hover) */
1065     text-decoration: underline;
1066 }
1067
1068 body:not(.inactive) .focused .outline-disclosure li.selected * {
1069     color: inherit;
1070 }
1071
1072 .section {
1073     display: block;
1074     -webkit-box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
1075     -webkit-border-radius: 8px;
1076     background-color: white;
1077     font-size: 11px;
1078     margin-bottom: 8px;
1079 }
1080
1081 .section .header {
1082     padding: 2px 8px 4px;
1083     border: 2px solid rgba(255, 255, 255, 0.5);
1084     background-color: rgb(214, 221, 229);
1085     background-image: url(Images/gradient.png);
1086     background-repeat: repeat-x;
1087     background-position: bottom;
1088     -webkit-background-size: auto 100%;
1089     -webkit-border-radius: 8px;
1090     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
1091 }
1092
1093 .section.expanded .header {
1094     border-bottom: 2px ridge rgba(214, 221, 229, 0.5);
1095     -webkit-border-top-right-radius: 8px;
1096     -webkit-border-top-left-radius: 8px;
1097     -webkit-border-bottom-right-radius: 0;
1098     -webkit-border-bottom-left-radius: 0;
1099 }
1100
1101 .section .header .title {
1102     font-weight: bold;
1103     word-wrap: break-word;
1104 }
1105
1106 .section .header label {
1107     display: none;
1108 }
1109
1110 .section.expanded .header label {
1111     display: inline;
1112 }
1113
1114 .section .header input[type=checkbox] {
1115     height: 1em;
1116     width: 1em;
1117     margin-left: 0;
1118     margin-top: 0;
1119     margin-bottom: 0;
1120     vertical-align: top;
1121 }
1122
1123 .section .header .subtitle {
1124     margin-top: 2px;
1125     font-size: 10px;
1126     word-wrap: break-word;
1127 }
1128
1129 .section .header .subtitle a {
1130     color: inherit;
1131 }
1132
1133 .section .properties {
1134     display: none;
1135     margin: 0;
1136     padding: 2px 6px 5px;
1137     list-style: none;
1138 }
1139
1140 .section.expanded .properties {
1141     display: block;
1142 }
1143
1144 .section .properties li {
1145     margin-left: 10px;
1146     white-space: nowrap;
1147     text-overflow: ellipsis;
1148     overflow: hidden;
1149     -webkit-user-select: text;
1150     outline: none;
1151 }
1152
1153 .section .properties li.parent {
1154     margin-left: 0;
1155 }
1156
1157 .section .properties li.selected {
1158     background-color: transparent !important;
1159 }
1160
1161 .section .properties ol {
1162     display: none;
1163     margin: 0;
1164     -webkit-padding-start: 12px;
1165     list-style: none;
1166 }
1167
1168 .section .properties ol.expanded {
1169     display: block;
1170 }
1171
1172 .section .properties li.parent::before {
1173     content: url(Images/treeRightTriangleBlack.png);
1174     opacity: 0.75;
1175     float: left;
1176     width: 8px;
1177     height: 8px;
1178     margin-top: 0;
1179     padding-right: 2px;
1180 }
1181
1182 .section .properties li.parent.expanded::before {
1183     content: url(Images/treeDownTriangleBlack.png);
1184     margin-top: 1px;
1185 }
1186
1187 .section .properties li.editing {
1188     -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
1189     outline: 1px solid rgb(66%, 66%, 66%);
1190     background-color: white;
1191     -webkit-user-modify: read-write-plaintext-only;
1192     text-overflow: clip;
1193     margin-left: 8px;
1194     padding-left: 2px;
1195     margin-bottom: -1px;
1196     padding-bottom: 1px;
1197     text-decoration: none !important;
1198     opacity: 1.0 !important;
1199 }
1200
1201 .section .properties li.editing.parent::before {
1202     display: none;
1203 }
1204
1205 .section .properties li.editing * {
1206     color: black !important;
1207 }
1208
1209 .section .properties .overloaded {
1210     text-decoration: line-through;
1211 }
1212
1213 .section .properties .implicit, .section .properties .inherited {
1214     opacity: 0.5;
1215 }
1216
1217 .section:not(.show-inherited) .properties .inherited {
1218     display: none;
1219 }
1220
1221 .section .properties .name {
1222     color: rgb(136, 19, 145);
1223 }
1224
1225 .section .properties .number {
1226     color: blue;
1227 }
1228
1229 .section .properties .priority {
1230     color: rgb(128, 0, 0);
1231 }
1232
1233 .section .properties .keyword {
1234     color: rgb(136, 19, 79);
1235 }
1236
1237 .section .properties .color {
1238     color: rgb(118, 15, 21);
1239 }
1240
1241 .swatch {
1242     display: inline-block;
1243     vertical-align: middle;
1244     margin-left: 4px;
1245     width: 0.75em;
1246     height: 0.75em;
1247     border: 1px solid rgb(180, 180, 180);
1248 }
1249
1250 .pane {
1251     margin-top: 1px;
1252 }
1253
1254 .pane > .title {
1255     background-image: url(Images/paneHeader.png);
1256     background-repeat: repeat-x;
1257     background-position: bottom;
1258     -webkit-background-size: auto 100%;
1259     height: 14px;
1260     padding: 0 6px;
1261     border-top: 1px solid rgb(129, 129, 129);
1262     border-bottom: 1px solid rgb(129, 129, 129);
1263     font-weight: bold;
1264     font-size: 11px;
1265     color: rgb(85, 85, 85);
1266 }
1267
1268 .pane > .title:active {
1269     background-image: url(Images/paneHeaderActive.png);
1270 }
1271
1272 .pane > .title::before {
1273     content: url(Images/treeRightTriangleBlack.png);
1274     opacity: 0.75;
1275     float: left;
1276     width: 8px;
1277     height: 8px;
1278     margin-right: 3px;
1279     margin-top: 0;
1280 }
1281
1282 .pane.expanded > .title::before {
1283     margin-top: 1px;
1284     content: url(Images/treeDownTriangleBlack.png);
1285 }
1286
1287 .pane > .body {
1288     position: relative;
1289     padding: 8px;
1290     display: none;
1291     overflow: auto;
1292 }
1293
1294 .pane.expanded > .body, .pane.expanded > .growbar {
1295     display: block;
1296 }
1297
1298 .pane > .growbar {
1299     display: none;
1300     background-image: url(Images/paneGrowHandleLine.png), url(Images/paneBottomGrow.png);
1301     background-repeat: no-repeat, repeat-x;
1302     background-position: center center, bottom;
1303     -webkit-background-size: auto 100%, auto 100%;
1304     height: 5px;
1305 }
1306
1307 .metrics {
1308     font-size: 10px;
1309     text-align: center;
1310     white-space: nowrap;
1311 }
1312
1313 .metrics .label {
1314     position: absolute;
1315     margin-top: -10px;
1316     font-size: 9px;
1317     color: grey;
1318     background-color: rgb(232, 232, 232);
1319     margin-left: 3px;
1320     padding-left: 2px;
1321     padding-right: 2px;
1322 }
1323
1324 .metrics .margin {
1325     border: 1px dashed;
1326     display: inline-block;
1327     -webkit-box-sizing: border-box;
1328     padding: 3px;
1329     margin: 3px;
1330 }
1331
1332 .metrics .border {
1333     border: 1px black solid;
1334     display: inline-block;
1335     vertical-align: middle;
1336     -webkit-box-sizing: border-box;
1337     padding: 3px;
1338     margin: 3px;
1339 }
1340
1341 .metrics .padding {
1342     border: 1px grey dashed;
1343     display: inline-block;
1344     vertical-align: middle;
1345     -webkit-box-sizing: border-box;
1346     padding: 3px;
1347     margin: 3px;
1348 }
1349
1350 .metrics .content {
1351     position: static;
1352     border: 1px grey solid;
1353     display: inline-block;
1354     vertical-align: middle;
1355     -webkit-box-sizing: border-box;
1356     padding: 3px;
1357     margin: 3px;
1358     min-width: 80px;
1359     text-align: center;
1360     overflow: visible;
1361 }
1362
1363 .metrics .left {
1364     display: inline-block;
1365     text-align: center;
1366     vertical-align: middle;
1367     -webkit-box-sizing: border-box;
1368 }
1369
1370 .metrics .right {
1371     display: inline-block;
1372     text-align: center;
1373     vertical-align: middle;
1374     -webkit-box-sizing: border-box;
1375 }
1376
1377 .metrics .top {
1378     text-align: center;
1379 }
1380
1381 .metrics .bottom {
1382     text-align: center;
1383 }
1384
1385 .console-message-list {
1386     list-style: none;
1387     margin: 0;
1388     padding: 0;
1389     position: absolute;
1390     top: 0;
1391     bottom: 20px;
1392     left: 0;
1393     right: 0;
1394     overflow: auto;
1395 }
1396
1397 .console-prompt {
1398     font-family: monospace;
1399     font-size: 11px;
1400     margin: 0;
1401     padding: 2px 0 0;
1402     position: absolute;
1403     bottom: 0;
1404     left: 0;
1405     right: 0;
1406     height: 18px;
1407     resize: none;
1408     outline: none;
1409     border: none;
1410     border-top: 1px solid rgb(64%, 64%, 64%);
1411 }
1412
1413 .console-message, .console-command {
1414     font-size: 10px;
1415     margin: 0;
1416     padding: 3px;
1417     border-bottom: 1px solid rgb(75%, 75%, 75%);
1418     word-break: break-word;
1419     position: relative;
1420     -webkit-user-select: text;
1421 }
1422
1423 .console-command a:hover {
1424     text-decoration: underline;
1425     cursor: pointer;
1426 }
1427
1428 .console-message-message {
1429     font-size: 11px;
1430     white-space: pre-wrap;
1431     margin-left: 22px;
1432 }
1433
1434 .console-message-url {
1435     margin-left: 22px;
1436 }
1437
1438 .console-message-line {
1439     margin-left: 22px;
1440 }
1441
1442 .console-message-line::before {
1443     content: "line ";
1444 }
1445
1446 .console-error-level::before {
1447     content: url(Images/errorMediumIcon.png);
1448     position: absolute;
1449     left: 4px;
1450     top: 3px;
1451 }
1452
1453 .console-warning-level::before {
1454     content: url(Images/warningMediumIcon.png);
1455     position: absolute;
1456     left: 4px;
1457     top: 3px;
1458 }
1459
1460 .console-command-input, .console-command-output {
1461     font-size: 11px;
1462     margin-left: 22px;
1463     white-space: pre-wrap;
1464 }
1465
1466 .console-command-input::before {
1467     content: ">";
1468     font-weight: bold;
1469     font-size: 15px;
1470     color: blue;
1471     position: absolute;
1472     left: 7px;
1473     top: 1px;
1474 }
1475
1476 .view-button-browse img {
1477     content: url(Images/databaseBrowserViewButton.png);
1478     position: relative;
1479     top: -1px;
1480     left: 1px;
1481     width: 11px;
1482     height: 7px;
1483     opacity: 0.66;
1484 }
1485
1486 .view-button-browse.selected img {
1487     opacity: 1;
1488 }
1489
1490 .view-button-query img {
1491     content: url(Images/databaseQueryViewButton.png);
1492     position: relative;
1493     top: -1px;
1494     left: 0px;
1495     width: 10px;
1496     height: 7px;
1497     opacity: 0.66;
1498 }
1499
1500 .view-button-query.selected img {
1501     opacity: 1;
1502 }
1503
1504 .database-table-reload {
1505     padding-left: 0;
1506     padding-right: 0;
1507     width: 20px;
1508     margin-left: 6px;
1509 }
1510
1511 .database-table-reload img {
1512     content: url(Images/reload.png);
1513     position: relative;
1514     top: -2px;
1515     left: 0px;
1516     width: 10px;
1517     height: 11px;
1518     opacity: 0.7;
1519 }
1520
1521 .query.content {
1522     bottom: 21px;
1523 }
1524
1525 .browse.content {
1526     font-size: 10px;
1527     overflow-y: auto;
1528     overflow-x: hidden;
1529     bottom: 21px;
1530 }
1531
1532 .browse.content .database-result-table {
1533     border: none;
1534 }
1535
1536 .browse.content .database-table-empty, .browse.content .database-table-error {
1537     position: absolute;
1538     top: 0;
1539     bottom: 25%;
1540     left: 0;
1541     right: 0;
1542     font-size: 24px;
1543     color: rgb(75%, 75%, 75%);
1544     margin-top: auto;
1545     margin-bottom: auto;
1546     height: 50px;
1547     line-height: 26px;
1548     text-align: center;
1549     font-weight: bold;
1550     padding: 10px;
1551     white-space: pre-wrap;
1552 }
1553
1554 .browse.content .database-table-error {
1555     color: rgb(66%, 33%, 33%);
1556 }
1557
1558 .database-browse-table {
1559     height: 100%;
1560 }
1561
1562 .database-result-table .database-result-filler-row {
1563     height: auto;
1564 }
1565
1566 .database-result-table .database-result-filler-row.alternate td {
1567     background-position-y: 16px;
1568 }
1569
1570 .database-result-filler-row td {
1571     background-image: url(Images/alternateTableRows.png);
1572 }
1573
1574 .database-table-select {
1575     margin-left: 6px;
1576     max-width: 150px;
1577     min-width: 75px;
1578 }
1579
1580 .database-command-list {
1581     list-style: none;
1582     margin: 0;
1583     padding: 0;
1584     position: absolute;
1585     top: 0;
1586     bottom: 0;
1587     left: 0;
1588     right: 0;
1589     overflow-y: auto;
1590     overflow-x: hidden;
1591 }
1592
1593 .database-prompt {
1594     font-family: monospace;
1595     font-size: 11px;
1596     margin: 0;
1597     padding: 2px 0 0;
1598     position: absolute;
1599     bottom: 0;
1600     left: 0;
1601     right: 0;
1602     height: 18px;
1603     resize: none;
1604     outline: none;
1605     border: none;
1606     border-top: 1px solid rgb(64%, 64%, 64%);
1607 }
1608
1609 .database-command {
1610     font-size: 10px;
1611     margin: 0;
1612     padding: 5px;
1613     border-bottom: 1px solid rgb(75%, 75%, 75%);
1614     word-break: break-word;
1615     position: relative;
1616 }
1617
1618 .database-command a:hover {
1619     text-decoration: underline;
1620     cursor: pointer;
1621 }
1622
1623 .database-command-query {
1624     font-family: monospace;
1625     font-size: 11px;
1626     white-space: pre-wrap;
1627 }
1628
1629 .database-command-result {
1630     margin-top: 3px;
1631 }
1632
1633 .database-command-result.error {
1634     color: red;
1635 }
1636
1637 .database-result-table {
1638     border: 1px solid #aaa;
1639     table-layout: fixed;
1640     border-spacing: 0;
1641     border-collapse: collapse;
1642     width: 100%;
1643     -webkit-box-sizing: border-box;
1644 }
1645
1646 .database-result-table th {
1647     text-align: left;
1648     background: url(Images/glossyHeader.png) repeat-x;
1649     border-right: 1px solid #aaa;
1650     height: 15px;
1651     -webkit-box-sizing: border-box;
1652     border-bottom: 1px solid #aaa;
1653     font-weight: normal;
1654     vertical-align: middle;
1655     padding: 0 4px;
1656     white-space: nowrap;
1657 }
1658
1659 .database-result-table tr {
1660     height: 16px;
1661 }
1662
1663 .database-result-table tr.alternate {
1664     background-color: rgb(236, 243, 254);
1665 }
1666
1667 .database-result-table td {
1668     vertical-align: top;
1669     padding: 2px 4px;
1670     -webkit-box-sizing: border-box;
1671     white-space: nowrap;
1672     border-right: 1px solid #aaa;
1673 }
1674
1675 .database-result-table td > div, .database-result-table th > div {
1676     white-space: nowrap;
1677     text-overflow: ellipsis;
1678     overflow: hidden;
1679 }
1680
1681 .network-timeline {
1682     position: absolute;
1683     top: 0;
1684     bottom: 99px;
1685     left: 0;
1686     right: 0;
1687     font-family: Lucida Grande, sans-serif;
1688     font-size: 11px;
1689 }
1690
1691 .network-divider {
1692     width: 1px;
1693     height: 100%;
1694     position: absolute;
1695     background-color: rgba(0, 0, 0, 0.1);
1696 }
1697
1698 .network-divider.last {
1699     background-color: rgb(66%, 66%, 66%);
1700 }
1701
1702 .network-divider-label {
1703     position: absolute;
1704     top: 2px;
1705     right: 3px;
1706     font-size: 9px;
1707     color: rgb(50%, 50%, 50%);
1708 }
1709
1710 .network-dividers {
1711     position: absolute;
1712     left: 153px;
1713     right: 20px;
1714     bottom: 0;
1715     top: 0;
1716     z-index: -100;
1717     border-left: 1px solid rgb(66%, 66%, 66%);
1718     -webkit-box-sizing: border-box;
1719 }
1720
1721 .network-resources {
1722     position: absolute;
1723     width: 100%;
1724     overflow-y: overlay;
1725     overflow-x: hidden;
1726     border-top: 1px solid rgb(66%, 66%, 66%);
1727     top: 15px;
1728     bottom: 0;
1729 }
1730
1731 .network-title {
1732     position: relative;
1733     height: 18px;
1734 }
1735
1736 .network-title:hover {
1737     background-color: rgba(0, 0, 200, 0.1);
1738 }
1739
1740 .network-info {
1741     background-color: rgb(225, 225, 235);
1742     background-image: url(Images/attachedShadow.png), url(Images/bottomShadow.png);
1743     background-repeat: repeat-x;
1744     background-position: top, bottom;
1745     overflow: hidden;
1746     -webkit-user-select: text;
1747 }
1748
1749 .network-info table {
1750     font-size: 11px;
1751     margin: 5px 15px 5px 5px;
1752 }
1753
1754 .network-info th {
1755     width: 145px;
1756 }
1757
1758 .network-info thead th {
1759     text-align: right;
1760 }
1761
1762 .network-info tbody th {
1763     white-space: nowrap;
1764     text-align: right;
1765     font-weight: bold;
1766     color: rgba(0, 0, 0, 0.5);
1767     vertical-align: top;
1768 }
1769
1770 .network-info td {
1771     word-break: break-word;
1772     white-space: normal;
1773 }
1774
1775 .network-file {
1776     position: absolute;
1777     left: 5px;
1778     height: 100%;
1779     width: 145px;
1780     overflow: hidden;
1781     white-space: nowrap;
1782     text-overflow: ellipsis;
1783     line-height: 18px;
1784 }
1785
1786 .network-file a {
1787     color: inherit;
1788     text-decoration: none;
1789 }
1790
1791 .network-file a:hover {
1792     text-decoration: underline;
1793 }
1794
1795 .network-area {
1796     position: absolute;
1797     left: 162px;
1798     right: 28px;
1799     height: 100%;
1800 }
1801
1802 .network-bar {
1803     position: absolute;
1804     top: 0;
1805     bottom: 0;
1806     margin: auto -7px;
1807     border-width: 6px 7px 6px 7px;
1808     height: 13px;
1809     min-width: 14px;
1810     -webkit-box-sizing: border-box;
1811     opacity: 0.8;
1812     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
1813 }
1814
1815 .network-bar.network-category-documents {
1816     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
1817 }
1818
1819 .network-bar.network-category-stylesheets {
1820     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
1821 }
1822
1823 .network-bar.network-category-images {
1824     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
1825 }
1826
1827 .network-bar.network-category-fonts {
1828     -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
1829 }
1830
1831 .network-bar.network-category-scripts {
1832     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
1833 }
1834
1835 .network-summary {
1836     position: absolute;
1837     bottom: 0;
1838     left: 0;
1839     right: 0;
1840     height: 99px;
1841     background-color: rgb(101, 111, 130);
1842     background-image: url(Images/darkShadow.png), url(Images/gradientHighlightBottom.png);
1843     background-repeat: repeat-x;
1844     background-position: top, bottom;
1845 }
1846
1847 .network-graph-area {
1848     padding-top: 20px;
1849     position: absolute;
1850     margin: auto;
1851     top: 0;
1852     bottom: 0;
1853     right: 0;
1854     left: 0;
1855     width: 575px;
1856     white-space: nowrap;
1857     color: white;
1858     text-shadow: black 0px 1px 1px;
1859 }
1860
1861 .network-graph-label {
1862     height: 38px;
1863     display: inline-block;
1864     vertical-align: top;
1865     margin-right: 5px;
1866     margin-top: -2px;
1867     text-align: right;
1868 }
1869
1870 .network-graph-side {
1871     position: relative;
1872     display: inline-block;
1873     vertical-align: top;
1874 }
1875
1876 .network-graph-legend-total {
1877     margin-top: 12px;
1878     padding-right: 5px;
1879 }
1880
1881 .network-graph-legend-total .network-graph-legend-label {
1882     text-align: right;
1883 }
1884
1885 .network-graph-mode {
1886     -webkit-appearance: none;
1887     background-color: transparent;
1888     border: none;
1889     font-weight: bold;
1890     font-size: 12px;
1891     height: 18px;
1892     line-height: 11px;
1893     text-align: right;
1894     vertical-align: middle;
1895     padding: 2px 16px 2px 8px;
1896     margin: 0;
1897     background-image: url(Images/popupArrows.png);
1898     background-position: right center;
1899     background-repeat: no-repeat;
1900     color: inherit;
1901     border: 1px solid transparent;
1902     text-shadow: black 0px 2px 2px;
1903 }
1904
1905 .network-graph-mode:focus {
1906     outline: none;
1907 }
1908
1909 .network-graph-mode:hover {
1910     -webkit-border-radius: 9px;
1911     background-color: rgba(0, 0, 0, 0.2);
1912     border: 1px solid white;
1913     -webkit-box-shadow: black 0px 1px 1px;
1914 }
1915
1916 .network-graph-legend {
1917     margin-top: -8px;
1918     text-align: center;
1919 }
1920
1921 .network-graph-legend-item {
1922     display: inline-block;
1923     font-weight: bold;
1924     margin-right: 15px;
1925     vertical-align: top;
1926 }
1927
1928 .network-graph-legend-label {
1929     display: inline-block;
1930     text-align: left;
1931 }
1932
1933 .network-graph-legend-header {
1934     font-size: 12px;
1935     text-transform: capitalize;
1936 }
1937
1938 .network-graph-legend-value {
1939     font-size: 10px;
1940 }
1941
1942 .network-graph-legend-swatch {
1943     vertical-align: top;
1944     margin-top: 1px;
1945     margin-right: 3px;
1946 }
1947
1948 .network-summary-graph {
1949     vertical-align: middle;
1950 }
1951
1952 .tip-button {
1953     background-image: url(Images/tipIcon.png);
1954     border: none;
1955     width: 16px;
1956     height: 16px;
1957     float: right;
1958     background-color: transparent;
1959     margin-top: 1px;
1960 }
1961
1962 .tip-button:active {
1963     background-image: url(Images/tipIconPressed.png);
1964 }
1965
1966 .tip-balloon {
1967     position: absolute;
1968     left: 145px;
1969     top: -5px;
1970     z-index: 1000;
1971     border-width: 51px 15px 18px 37px;
1972     -webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
1973     width: 265px;
1974 }
1975
1976 .tip-balloon.bottom {
1977     position: absolute;
1978     left: 145px;
1979     top: auto;
1980     bottom: -7px;
1981     z-index: 1000;
1982     border-width: 18px 15px 51px 37px;
1983     -webkit-border-image: url(Images/tipBalloonBottom.png) 18 15 51 37;
1984 }
1985
1986 .tip-balloon-content {
1987     margin-top: -40px;
1988     margin-bottom: -2px;
1989     margin-left: 2px;
1990 }
1991
1992 .tip-balloon.bottom .tip-balloon-content {
1993     margin-top: -10px;
1994     margin-bottom: -35px;
1995 }
1996
1997 .sidebar-resizer-vertical {
1998     position: absolute;
1999     top: 0;
2000     bottom: 0;
2001     width: 5px;
2002     z-index: 100;
2003     cursor: col-resize;
2004 }
2005
2006 .sidebar-resizer-vertical-left {
2007     left: 197px;
2008 }
2009
2010 .sidebar-resizer-vertical-right {
2011     right: 222px;
2012 }
2013
2014 #searchResultsResizer {
2015     position: absolute;
2016     height: 5px;
2017     left: 0;
2018     right: 0;
2019     cursor: row-resize;
2020 }