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