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