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