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