64fbcd2dcfe7f23b181f08ca7d297ac8503edf88
[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 .outline-disclosure li.parent.selected::before {
962     content: url(Images/treeRightTriangleWhite.png);
963 }
964
965 .outline-disclosure li.parent.expanded:before {
966     content: url(Images/treeDownTriangleBlack.png);
967 }
968
969 .outline-disclosure li.parent.expanded.selected::before {
970     content: url(Images/treeDownTriangleWhite.png);
971 }
972
973 .outline-disclosure ol.children {
974     display: none;
975 }
976
977 .outline-disclosure ol.children.expanded {
978     display: block;
979 }
980
981 .webkit-html-comment {
982     /* Keep this in sync with view-source.css (.webkit-html-comment) */
983     color: rgb(35, 110, 37);
984 }
985
986 .webkit-html-tag {
987     /* Keep this in sync with view-source.css (.webkit-html-tag) */
988     color: rgb(136, 18, 128);
989 }
990
991 .webkit-html-attribute-name {
992     /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
993     color: rgb(153, 69, 0);
994 }
995
996 .webkit-html-attribute-value {
997     /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
998     color: rgb(26, 26, 166);
999 }
1000
1001 .webkit-html-external-link, .webkit-html-resource-link {
1002     /* Keep this in sync with view-source.css (.webkit-html-external-link, .webkit-html-resource-link) */
1003     color: #00e;
1004 }
1005
1006 .webkit-html-external-link {
1007     /* Keep this in sync with view-source.css (.webkit-html-external-link) */
1008     text-decoration: none;
1009 }
1010
1011 .webkit-html-external-link:hover {
1012     /* Keep this in sync with view-source.css (.webkit-html-external-link:hover) */
1013     text-decoration: underline;
1014 }
1015
1016 .focused .content.tree li.selected * {
1017     color: inherit;
1018 }
1019
1020 .section {
1021     display: block;
1022     -webkit-box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
1023     -webkit-border-radius: 8px;
1024     background-color: white;
1025     font-size: 11px;
1026     margin-bottom: 8px;
1027 }
1028
1029 .section .header {
1030     padding: 2px 8px 4px;
1031     border: 2px solid rgba(255, 255, 255, 0.5);
1032     background-color: rgb(214, 221, 229);
1033     background-image: url(Images/gradient.png);
1034     background-repeat: repeat-x;
1035     background-position: bottom;
1036     -webkit-background-size: auto 100%;
1037     -webkit-border-radius: 8px;
1038     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
1039 }
1040
1041 .section.expanded .header {
1042     border-bottom: 2px ridge rgba(214, 221, 229, 0.5);
1043     -webkit-border-top-right-radius: 8px;
1044     -webkit-border-top-left-radius: 8px;
1045     -webkit-border-bottom-right-radius: 0;
1046     -webkit-border-bottom-left-radius: 0;
1047 }
1048
1049 .section .header .title {
1050     font-weight: bold;
1051     word-wrap: break-word;
1052 }
1053
1054 .section .header label {
1055     display: none;
1056 }
1057
1058 .section.expanded .header label {
1059     display: inline;
1060 }
1061
1062 .section .header input[type=checkbox] {
1063     height: 1em;
1064     width: 1em;
1065     margin-left: 0;
1066     margin-top: 0;
1067     margin-bottom: 0;
1068     vertical-align: top;
1069 }
1070
1071 .section .header .subtitle {
1072     margin-top: 2px;
1073     font-size: 10px;
1074     word-wrap: break-word;
1075 }
1076
1077 .section .header .subtitle a {
1078     color: inherit;
1079 }
1080
1081 .section .properties {
1082     display: none;
1083     margin: 0;
1084     padding: 2px 6px 5px;
1085     list-style: none;
1086 }
1087
1088 .section.expanded .properties {
1089     display: block;
1090 }
1091
1092 .section .properties li {
1093     margin-left: 10px;
1094     white-space: nowrap;
1095     text-overflow: ellipsis;
1096     overflow: hidden;
1097     -webkit-user-select: text;
1098 }
1099
1100 .section .properties li.parent {
1101     margin-left: 0;
1102 }
1103
1104 .section .properties li.selected {
1105     background-color: transparent !important;
1106 }
1107
1108 .section .properties ol {
1109     display: none;
1110     margin: 0;
1111     -webkit-padding-start: 12px;
1112     list-style: none;
1113 }
1114
1115 .section .properties ol.expanded {
1116     display: block;
1117 }
1118
1119 .section .properties li.parent::before {
1120     content: url(Images/treeRightTriangleBlack.png);
1121     opacity: 0.75;
1122     float: left;
1123     width: 8px;
1124     height: 8px;
1125     margin-top: 0;
1126     padding-right: 2px;
1127 }
1128
1129 .section .properties li.parent.expanded::before {
1130     content: url(Images/treeDownTriangleBlack.png);
1131     margin-top: 1px;
1132 }
1133
1134 .section .properties .overloaded {
1135     text-decoration: line-through;
1136 }
1137
1138 .section .properties .implicit {
1139     opacity: 0.5;
1140 }
1141
1142 .section .properties .inherited {
1143     display: none;
1144     opacity: 0.5;
1145 }
1146
1147 .section.show-inherited .properties .inherited {
1148     display: inline;
1149 }
1150
1151 .section .properties .name {
1152     color: rgb(136, 19, 145);
1153 }
1154
1155 .section .properties .number {
1156     color: blue;
1157 }
1158
1159 .section .properties .keyword {
1160     color: rgb(136, 19, 79);
1161 }
1162
1163 .section .properties .color {
1164     color: rgb(118, 15, 21);
1165 }
1166
1167 .swatch {
1168     display: inline-block;
1169     vertical-align: middle;
1170     margin-left: 4px;
1171     width: 0.75em;
1172     height: 0.75em;
1173     border: 1px solid rgb(180, 180, 180);
1174 }
1175
1176 .pane {
1177     margin-top: 1px;
1178 }
1179
1180 .pane > .title {
1181     background-image: url(Images/paneHeader.png);
1182     background-repeat: repeat-x;
1183     background-position: bottom;
1184     -webkit-background-size: auto 100%;
1185     height: 14px;
1186     padding: 0 6px;
1187     border-top: 1px solid rgb(129, 129, 129);
1188     border-bottom: 1px solid rgb(129, 129, 129);
1189     font-weight: bold;
1190     font-size: 11px;
1191     color: rgb(85, 85, 85);
1192 }
1193
1194 .pane > .title:active {
1195     background-image: url(Images/paneHeaderActive.png);
1196 }
1197
1198 .pane > .title::before {
1199     content: url(Images/treeRightTriangleBlack.png);
1200     opacity: 0.75;
1201     float: left;
1202     width: 8px;
1203     height: 8px;
1204     margin-right: 3px;
1205     margin-top: 0;
1206 }
1207
1208 .pane.expanded > .title::before {
1209     margin-top: 1px;
1210     content: url(Images/treeDownTriangleBlack.png);
1211 }
1212
1213 .pane > .body {
1214     position: relative;
1215     padding: 8px;
1216     display: none;
1217     overflow: auto;
1218 }
1219
1220 .pane.expanded > .body, .pane.expanded > .growbar {
1221     display: block;
1222 }
1223
1224 .pane > .growbar {
1225     display: none;
1226     background-image: url(Images/paneGrowHandleLine.png), url(Images/paneBottomGrow.png);
1227     background-repeat: no-repeat, repeat-x;
1228     background-position: center center, bottom;
1229     -webkit-background-size: auto 100%, auto 100%;
1230     height: 5px;
1231 }
1232
1233 .metrics {
1234     font-size: 10px;
1235     text-align: center;
1236     white-space: nowrap;
1237 }
1238
1239 .metrics .label {
1240     position: absolute;
1241     margin-top: -10px;
1242     font-size: 9px;
1243     color: grey;
1244     background-color: rgb(232, 232, 232);
1245     margin-left: 3px;
1246     padding-left: 2px;
1247     padding-right: 2px;
1248 }
1249
1250 .metrics .margin {
1251     border: 1px dashed;
1252     display: inline-block;
1253     -webkit-box-sizing: border-box;
1254     padding: 3px;
1255     margin: 3px;
1256 }
1257
1258 .metrics .border {
1259     border: 1px black solid;
1260     display: inline-block;
1261     vertical-align: middle;
1262     -webkit-box-sizing: border-box;
1263     padding: 3px;
1264     margin: 3px;
1265 }
1266
1267 .metrics .padding {
1268     border: 1px grey dashed;
1269     display: inline-block;
1270     vertical-align: middle;
1271     -webkit-box-sizing: border-box;
1272     padding: 3px;
1273     margin: 3px;
1274 }
1275
1276 .metrics .content {
1277     position: static;
1278     border: 1px grey solid;
1279     display: inline-block;
1280     vertical-align: middle;
1281     -webkit-box-sizing: border-box;
1282     padding: 3px;
1283     margin: 3px;
1284     min-width: 80px;
1285     text-align: center;
1286     overflow: visible;
1287 }
1288
1289 .metrics .left {
1290     display: inline-block;
1291     text-align: center;
1292     vertical-align: middle;
1293     -webkit-box-sizing: border-box;
1294 }
1295
1296 .metrics .right {
1297     display: inline-block;
1298     text-align: center;
1299     vertical-align: middle;
1300     -webkit-box-sizing: border-box;
1301 }
1302
1303 .metrics .top {
1304     text-align: center;
1305 }
1306
1307 .metrics .bottom {
1308     text-align: center;
1309 }
1310
1311 .console-message-list {
1312     list-style: none;
1313     margin: 0;
1314     padding: 0;
1315     position: absolute;
1316     top: 0;
1317     bottom: 20px;
1318     left: 0;
1319     right: 0;
1320     overflow: auto;
1321 }
1322
1323 .console-prompt {
1324     font-family: monospace;
1325     font-size: 11px;
1326     margin: 0;
1327     padding: 2px 0 0;
1328     position: absolute;
1329     bottom: 0;
1330     left: 0;
1331     right: 0;
1332     height: 18px;
1333     resize: none;
1334     outline: none;
1335     border: none;
1336     border-top: 1px solid rgb(64%, 64%, 64%);
1337 }
1338
1339 .console-message, .console-command {
1340     font-size: 10px;
1341     margin: 0;
1342     padding: 3px;
1343     border-bottom: 1px solid rgb(75%, 75%, 75%);
1344     word-break: break-word;
1345     position: relative;
1346     -webkit-user-select: text;
1347 }
1348
1349 .console-command a:hover {
1350     text-decoration: underline;
1351     cursor: pointer;
1352 }
1353
1354 .console-message-message {
1355     font-size: 11px;
1356     white-space: pre-wrap;
1357     margin-left: 22px;
1358 }
1359
1360 .console-message-url {
1361     margin-left: 22px;
1362 }
1363
1364 .console-message-line {
1365     margin-left: 22px;
1366 }
1367
1368 .console-message-line::before {
1369     content: "line ";
1370 }
1371
1372 .console-error-level::before {
1373     content: url(Images/errorMediumIcon.png);
1374     position: absolute;
1375     left: 4px;
1376     top: 3px;
1377 }
1378
1379 .console-warning-level::before {
1380     content: url(Images/warningMediumIcon.png);
1381     position: absolute;
1382     left: 4px;
1383     top: 3px;
1384 }
1385
1386 .console-command-input, .console-command-output {
1387     font-size: 11px;
1388     margin-left: 22px;
1389     white-space: pre-wrap;
1390 }
1391
1392 .console-command-input::before {
1393     content: ">";
1394     font-weight: bold;
1395     font-size: 15px;
1396     color: blue;
1397     position: absolute;
1398     left: 7px;
1399     top: 1px;
1400 }
1401
1402 .view-button-browse img {
1403     content: url(Images/databaseBrowserViewButton.png);
1404     position: relative;
1405     top: -1px;
1406     left: 1px;
1407     width: 11px;
1408     height: 7px;
1409     opacity: 0.66;
1410 }
1411
1412 .view-button-browse.selected img {
1413     opacity: 1;
1414 }
1415
1416 .view-button-query img {
1417     content: url(Images/databaseQueryViewButton.png);
1418     position: relative;
1419     top: -1px;
1420     left: 0px;
1421     width: 10px;
1422     height: 7px;
1423     opacity: 0.66;
1424 }
1425
1426 .view-button-query.selected img {
1427     opacity: 1;
1428 }
1429
1430 .database-table-reload {
1431     padding-left: 0;
1432     padding-right: 0;
1433     width: 20px;
1434     margin-left: 6px;
1435 }
1436
1437 .database-table-reload img {
1438     content: url(Images/reload.png);
1439     position: relative;
1440     top: -2px;
1441     left: 0px;
1442     width: 10px;
1443     height: 11px;
1444     opacity: 0.7;
1445 }
1446
1447 .query.content {
1448     bottom: 21px;
1449 }
1450
1451 .browse.content {
1452     font-size: 10px;
1453     overflow-y: auto;
1454     overflow-x: hidden;
1455     bottom: 21px;
1456 }
1457
1458 .browse.content .database-result-table {
1459     border: none;
1460 }
1461
1462 .browse.content .database-table-empty {
1463     position: absolute;
1464     top: 0;
1465     bottom: 25%;
1466     left: 0;
1467     right: 0;
1468     font-size: 24px;
1469     color: rgb(75%, 75%, 75%);
1470     margin-top: auto;
1471     margin-bottom: auto;
1472     height: 50px;
1473     line-height: 26px;
1474     text-align: center;
1475     font-weight: bold;
1476     padding: 10px;
1477 }
1478
1479 .browse.content .database-table-error {
1480     position: absolute;
1481     top: 0;
1482     bottom: 25%;
1483     left: 0;
1484     right: 0;
1485     font-size: 24px;
1486     color: rgb(66%, 33%, 33%);
1487     margin-top: auto;
1488     margin-bottom: auto;
1489     height: 50px;
1490     line-height: 26px;
1491     text-align: center;
1492     padding: 10px;
1493 }
1494
1495 .database-browse-table {
1496     height: 100%;
1497 }
1498
1499 .database-result-table .database-result-filler-row {
1500     height: auto;
1501 }
1502
1503 .database-result-table .database-result-filler-row.alternate td {
1504     background-position-y: 16px;
1505 }
1506
1507 .database-result-filler-row td {
1508     background-image: url(Images/alternateTableRows.png);
1509 }
1510
1511 .database-table-select {
1512     margin-left: 6px;
1513     max-width: 150px;
1514     min-width: 75px;
1515 }
1516
1517 .database-command-list {
1518     list-style: none;
1519     margin: 0;
1520     padding: 0;
1521     position: absolute;
1522     top: 0;
1523     bottom: 0;
1524     left: 0;
1525     right: 0;
1526     overflow-y: auto;
1527     overflow-x: hidden;
1528 }
1529
1530 .database-prompt {
1531     font-family: monospace;
1532     font-size: 11px;
1533     margin: 0;
1534     padding: 2px 0 0;
1535     position: absolute;
1536     bottom: 0;
1537     left: 0;
1538     right: 0;
1539     height: 18px;
1540     resize: none;
1541     outline: none;
1542     border: none;
1543     border-top: 1px solid rgb(64%, 64%, 64%);
1544 }
1545
1546 .database-command {
1547     font-size: 10px;
1548     margin: 0;
1549     padding: 5px;
1550     border-bottom: 1px solid rgb(75%, 75%, 75%);
1551     word-break: break-word;
1552     position: relative;
1553 }
1554
1555 .database-command a:hover {
1556     text-decoration: underline;
1557     cursor: pointer;
1558 }
1559
1560 .database-command-query {
1561     font-family: monospace;
1562     font-size: 11px;
1563     white-space: pre-wrap;
1564 }
1565
1566 .database-command-result {
1567     margin-top: 3px;
1568 }
1569
1570 .database-command-result.error {
1571     color: red;
1572 }
1573
1574 .database-result-table {
1575     border: 1px solid #aaa;
1576     table-layout: fixed;
1577     border-spacing: 0;
1578     border-collapse: collapse;
1579     width: 100%;
1580     -webkit-box-sizing: border-box;
1581 }
1582
1583 .database-result-table th {
1584     text-align: left;
1585     background: url(Images/glossyHeader.png) repeat-x;
1586     border-right: 1px solid #aaa;
1587     height: 15px;
1588     -webkit-box-sizing: border-box;
1589     border-bottom: 1px solid #aaa;
1590     font-weight: normal;
1591     vertical-align: middle;
1592     padding: 0 4px;
1593     white-space: nowrap;
1594 }
1595
1596 .database-result-table tr {
1597     height: 16px;
1598 }
1599
1600 .database-result-table tr.alternate {
1601     background-color: rgb(236, 243, 254);
1602 }
1603
1604 .database-result-table td {
1605     vertical-align: top;
1606     padding: 2px 4px;
1607     -webkit-box-sizing: border-box;
1608     white-space: nowrap;
1609     border-right: 1px solid #aaa;
1610 }
1611
1612 .database-result-table td > div, .database-result-table th > div {
1613     white-space: nowrap;
1614     text-overflow: ellipsis;
1615     overflow: hidden;
1616 }
1617
1618 .network-timeline {
1619     position: absolute;
1620     top: 0;
1621     bottom: 99px;
1622     left: 0;
1623     right: 0;
1624     font-family: Lucida Grande, sans-serif;
1625     font-size: 11px;
1626 }
1627
1628 .network-divider {
1629     width: 1px;
1630     height: 100%;
1631     position: absolute;
1632     background-color: rgba(0, 0, 0, 0.1);
1633 }
1634
1635 .network-divider.last {
1636     background-color: rgb(66%, 66%, 66%);
1637 }
1638
1639 .network-divider-label {
1640     position: absolute;
1641     top: 2px;
1642     right: 3px;
1643     font-size: 9px;
1644     color: rgb(50%, 50%, 50%);
1645 }
1646
1647 .network-dividers {
1648     position: absolute;
1649     left: 153px;
1650     right: 20px;
1651     bottom: 0;
1652     top: 0;
1653     z-index: -100;
1654     border-left: 1px solid rgb(66%, 66%, 66%);
1655     -webkit-box-sizing: border-box;
1656 }
1657
1658 .network-resources {
1659     position: absolute;
1660     width: 100%;
1661     overflow-y: overlay;
1662     overflow-x: hidden;
1663     border-top: 1px solid rgb(66%, 66%, 66%);
1664     top: 15px;
1665     bottom: 0;
1666 }
1667
1668 .network-title {
1669     position: relative;
1670     height: 18px;
1671 }
1672
1673 .network-title:hover {
1674     background-color: rgba(0, 0, 200, 0.1);
1675 }
1676
1677 .network-info {
1678     background-color: rgb(225, 225, 235);
1679     background-image: url(Images/attachedShadow.png), url(Images/bottomShadow.png);
1680     background-repeat: repeat-x;
1681     background-position: top, bottom;
1682     overflow: hidden;
1683     -webkit-user-select: text;
1684 }
1685
1686 .network-info table {
1687     font-size: 11px;
1688     margin: 5px 15px 5px 5px;
1689 }
1690
1691 .network-info th {
1692     width: 145px;
1693 }
1694
1695 .network-info thead th {
1696     text-align: right;
1697 }
1698
1699 .network-info tbody th {
1700     white-space: nowrap;
1701     text-align: right;
1702     font-weight: bold;
1703     color: rgba(0, 0, 0, 0.5);
1704     vertical-align: top;
1705 }
1706
1707 .network-info td {
1708     word-break: break-word;
1709     white-space: normal;
1710 }
1711
1712 .network-file {
1713     position: absolute;
1714     left: 5px;
1715     height: 100%;
1716     width: 145px;
1717     overflow: hidden;
1718     white-space: nowrap;
1719     text-overflow: ellipsis;
1720     line-height: 18px;
1721 }
1722
1723 .network-file a {
1724     color: inherit;
1725     text-decoration: none;
1726 }
1727
1728 .network-file a:hover {
1729     text-decoration: underline;
1730 }
1731
1732 .network-area {
1733     position: absolute;
1734     left: 162px;
1735     right: 28px;
1736     height: 100%;
1737 }
1738
1739 .network-bar {
1740     position: absolute;
1741     top: 0;
1742     bottom: 0;
1743     margin: auto -7px;
1744     border-width: 6px 7px 6px 7px;
1745     height: 13px;
1746     min-width: 14px;
1747     -webkit-box-sizing: border-box;
1748     opacity: 0.8;
1749     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
1750 }
1751
1752 .network-bar.network-category-documents {
1753     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
1754 }
1755
1756 .network-bar.network-category-stylesheets {
1757     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
1758 }
1759
1760 .network-bar.network-category-images {
1761     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
1762 }
1763
1764 .network-bar.network-category-scripts {
1765     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
1766 }
1767
1768 .network-summary {
1769     position: absolute;
1770     bottom: 0;
1771     left: 0;
1772     right: 0;
1773     height: 99px;
1774     background-color: rgb(101, 111, 130);
1775     background-image: url(Images/darkShadow.png), url(Images/gradientHighlightBottom.png);
1776     background-repeat: repeat-x;
1777     background-position: top, bottom;
1778 }
1779
1780 .network-graph-area {
1781     padding-top: 20px;
1782     position: absolute;
1783     margin: auto;
1784     top: 0;
1785     bottom: 0;
1786     right: 0;
1787     left: 0;
1788     width: 575px;
1789     white-space: nowrap;
1790     color: white;
1791     text-shadow: black 0px 1px 1px;
1792 }
1793
1794 .network-graph-label {
1795     height: 38px;
1796     display: inline-block;
1797     vertical-align: top;
1798     margin-right: 5px;
1799     margin-top: -2px;
1800     text-align: right;
1801 }
1802
1803 .network-graph-side {
1804     position: relative;
1805     display: inline-block;
1806     vertical-align: top;
1807 }
1808
1809 .network-graph-legend-total {
1810     margin-top: 12px;
1811     padding-right: 5px;
1812 }
1813
1814 .network-graph-legend-total .network-graph-legend-label {
1815     text-align: right;
1816 }
1817
1818 .network-graph-mode {
1819     -webkit-appearance: none;
1820     background-color: transparent;
1821     border: none;
1822     font-weight: bold;
1823     font-size: 12px;
1824     height: 18px;
1825     line-height: 11px;
1826     text-align: right;
1827     vertical-align: middle;
1828     padding: 2px 16px 2px 8px;
1829     margin: 0;
1830     background-image: url(Images/popupArrows.png);
1831     background-position: right center;
1832     background-repeat: no-repeat;
1833     color: inherit;
1834     border: 1px solid transparent;
1835 }
1836
1837 .network-graph-mode:focus {
1838     outline: none;
1839 }
1840
1841 .network-graph-mode:hover {
1842     -webkit-border-radius: 9px;
1843     background-color: rgba(0, 0, 0, 0.2);
1844     border: 1px solid white;
1845     -webkit-box-shadow: black 0px 1px 1px;
1846 }
1847
1848 .network-graph-legend {
1849     margin-top: -8px;
1850     text-align: center;
1851 }
1852
1853 .network-graph-legend-item {
1854     display: inline-block;
1855     font-weight: bold;
1856     margin-right: 15px;
1857     vertical-align: top;
1858 }
1859
1860 .network-graph-legend-label {
1861     display: inline-block;
1862     text-align: left;
1863 }
1864
1865 .network-graph-legend-header {
1866     font-size: 12px;
1867     text-transform: capitalize;
1868 }
1869
1870 .network-graph-legend-value {
1871     font-weight: normal;
1872     font-size: 10px;
1873 }
1874
1875 .network-graph-legend-swatch {
1876     vertical-align: top;
1877     margin-top: 1px;
1878     margin-right: 3px;
1879 }
1880
1881 .network-summary-graph {
1882     vertical-align: middle;
1883 }
1884
1885 .tip-button {
1886     background-image: url(Images/tipIcon.png);
1887     border: none;
1888     width: 16px;
1889     height: 16px;
1890     float: right;
1891     background-color: transparent;
1892     margin-top: 1px;
1893 }
1894
1895 .tip-button:active {
1896     background-image: url(Images/tipIconPressed.png);
1897 }
1898
1899 .tip-balloon {
1900     position: absolute;
1901     left: 145px;
1902     top: -5px;
1903     z-index: 1000;
1904     border-width: 51px 15px 18px 37px;
1905     -webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
1906     width: 265px;
1907 }
1908
1909 .tip-balloon.bottom {
1910     position: absolute;
1911     left: 145px;
1912     top: auto;
1913     bottom: -7px;
1914     z-index: 1000;
1915     border-width: 18px 15px 51px 37px;
1916     -webkit-border-image: url(Images/tipBalloonBottom.png) 18 15 51 37;
1917 }
1918
1919 .tip-balloon-content {
1920     margin-top: -40px;
1921     margin-bottom: -2px;
1922     margin-left: 2px;
1923 }
1924
1925 .tip-balloon.bottom .tip-balloon-content {
1926     margin-top: -10px;
1927     margin-bottom: -35px;
1928 }
1929
1930 .sidebar-resizer-vertical {
1931     position: absolute;
1932     top: 0;
1933     bottom: 0;
1934     width: 5px;
1935     z-index: 100;
1936     cursor: col-resize;
1937 }
1938
1939 .sidebar-resizer-vertical-left {
1940     left: 197px;
1941 }
1942
1943 .sidebar-resizer-vertical-right {
1944     right: 222px;
1945 }
1946
1947 #searchResultsResizer {
1948     position: absolute;
1949     height: 5px;
1950     left: 200px;
1951     right: 0;
1952     cursor: row-resize;
1953 }