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