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