Reviewed by Adam Roben.
[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-messages {
1505     position: absolute;
1506     top: 0;
1507     left: 0;
1508     right: 0;
1509     bottom: 0;
1510     font-size: 10px;
1511     font-family: Monaco, Lucida Console, monospace;
1512     padding: 2px 0;
1513     overflow-y: overlay;
1514     -webkit-user-select: text;
1515     -webkit-text-size-adjust: auto;
1516 }
1517
1518 #console-prompt {
1519     position: relative;
1520     outline: none;
1521     padding: 1px 22px 1px 24px;
1522     min-height: 16px; 
1523     white-space: pre-wrap;
1524     -webkit-user-modify: read-write-plaintext-only;
1525 }
1526
1527 #console-prompt::before {
1528     background-image: url(Images/userInputIcon.png);
1529 }
1530
1531 .console-message, .console-user-command {
1532     position: relative;
1533     border-bottom: 1px solid rgb(240, 240, 240);
1534     padding: 1px 22px 1px 24px;
1535     min-height: 16px; 
1536     white-space: pre-wrap;
1537 }
1538
1539 .console-message::before, .console-user-command::before, #console-prompt::before {
1540     position: absolute;
1541     display: block;
1542     content: "";
1543     left: 7px;
1544     top: 0.8em;
1545     width: 10px;
1546     height: 10px;
1547     margin-top: -5px;
1548     -webkit-user-select: none;
1549 }
1550
1551 .console-message-text {
1552 //    vertical-align: middle;
1553 }
1554
1555 .console-error-level .console-message-text {
1556     color: red;
1557 }
1558
1559 .console-error-level::before {
1560     background-image: url(Images/errorIcon.png);
1561 }
1562
1563 .console-warning-level::before {
1564     background-image: url(Images/warningIcon.png);
1565 }
1566
1567 .console-user-command .console-message {
1568     margin-left: -24px;
1569     padding-right: 0;
1570     border-bottom: none;
1571 }
1572
1573 .console-user-command::before {
1574     background-image: url(Images/userInputPreviousIcon.png);
1575 }
1576
1577 .console-user-command > .console-message-text {
1578     color: rgb(0, 128, 255);
1579 }
1580
1581 .console-message-url {
1582     color: rgb(33%, 33%, 33%);
1583     cursor: pointer;
1584 }
1585
1586 .console-message-url::after {
1587     display: inline-block;
1588     content: url(Images/goArrow.png);
1589     margin-left: 3px;
1590     width: 12px;
1591     height: 12px;
1592     opacity: 0.75;
1593     vertical-align: top;
1594     -webkit-user-select: none;
1595 }
1596
1597 .console-message-url:hover {
1598     color: rgb(15%, 15%, 15%);
1599 }
1600
1601 .console-message-url:hover::after {
1602     opacity: 1;
1603 }
1604
1605 .auto-complete-text {
1606     color: rgb(128, 128, 128);
1607     -webkit-user-select: none;
1608     -webkit-user-modify: read-only;
1609 }
1610
1611 .view-button-browse img {
1612     content: url(Images/databaseBrowserViewNormal.png);
1613     vertical-align: middle;
1614     margin-top: -1px;
1615     margin-left: 1px;
1616     width: 11px;
1617     height: 11px;
1618 }
1619
1620 .view-button-browse.selected img {
1621     content: url(Images/databaseBrowserViewNormalSelected.png);
1622 }
1623
1624 body.attached .view-button-browse img {
1625     content: url(Images/databaseBrowserViewSmall.png);
1626     width: 11px;
1627     height: 8px;
1628     margin-top: 1px;
1629     margin-left: 2px;
1630 }
1631
1632 body.attached .view-button-browse.selected img {
1633     content: url(Images/databaseBrowserViewSmallSelected.png);
1634 }
1635
1636 .view-button-query img {
1637     content: url(Images/databaseQueryViewNormal.png);
1638     vertical-align: middle;
1639     margin-top: -1px;
1640     margin-left: -1px;
1641     width: 11px;
1642     height: 11px;
1643 }
1644
1645 .view-button-query.selected img {
1646     content: url(Images/databaseQueryViewNormalSelected.png);
1647 }
1648
1649 body.attached .view-button-query img {
1650     content: url(Images/databaseQueryViewSmall.png);
1651     width: 10px;
1652     height: 8px;
1653     margin-top: 1px;
1654 }
1655
1656 body.attached .view-button-query.selected img {
1657     content: url(Images/databaseQueryViewSmallSelected.png);
1658 }
1659
1660 .database-table-reload {
1661     padding-left: 0;
1662     padding-right: 0;
1663     width: 28px;
1664     margin-left: 6px;
1665 }
1666
1667 body.attached .database-table-reload {
1668     width: 20px;
1669 }
1670
1671 .database-table-reload img {
1672     content: url(Images/reload.png);
1673     vertical-align: middle;
1674     margin-top: -2px;
1675     width: 10px;
1676     height: 13px;
1677 }
1678
1679 .query.content {
1680     bottom: 21px;
1681 }
1682
1683 .browse.content {
1684     font-size: 10px;
1685     overflow-y: auto;
1686     overflow-x: hidden;
1687     bottom: 21px;
1688 }
1689
1690 .browse.content .database-result-table {
1691     border: none;
1692 }
1693
1694 .browse.content .database-table-empty, .browse.content .database-table-error {
1695     position: absolute;
1696     top: 0;
1697     bottom: 25%;
1698     left: 0;
1699     right: 0;
1700     font-size: 24px;
1701     color: rgb(75%, 75%, 75%);
1702     margin-top: auto;
1703     margin-bottom: auto;
1704     height: 50px;
1705     line-height: 26px;
1706     text-align: center;
1707     font-weight: bold;
1708     padding: 10px;
1709     white-space: pre-wrap;
1710 }
1711
1712 .browse.content .database-table-error {
1713     color: rgb(66%, 33%, 33%);
1714 }
1715
1716 .database-browse-table {
1717     height: 100%;
1718 }
1719
1720 .database-result-table .database-result-filler-row {
1721     height: auto;
1722 }
1723
1724 .database-result-table .database-result-filler-row.alternate td {
1725     background-position-y: 16px;
1726 }
1727
1728 .database-result-filler-row td {
1729     background-image: url(Images/alternateTableRows.png);
1730 }
1731
1732 .database-table-select {
1733     margin-left: 6px;
1734     max-width: 150px;
1735     min-width: 75px;
1736 }
1737
1738 .database-command-list {
1739     list-style: none;
1740     margin: 0;
1741     padding: 0;
1742     position: absolute;
1743     top: 0;
1744     bottom: 0;
1745     left: 0;
1746     right: 0;
1747     overflow-y: auto;
1748     overflow-x: hidden;
1749 }
1750
1751 .database-prompt {
1752     font-family: monospace;
1753     font-size: 11px;
1754     margin: 0;
1755     padding: 2px 0 0;
1756     position: absolute;
1757     bottom: 0;
1758     left: 0;
1759     right: 0;
1760     height: 18px;
1761     resize: none;
1762     outline: none;
1763     border: none;
1764     border-top: 1px solid rgb(64%, 64%, 64%);
1765 }
1766
1767 .database-command {
1768     font-size: 10px;
1769     margin: 0;
1770     padding: 5px;
1771     border-bottom: 1px solid rgb(75%, 75%, 75%);
1772     word-break: break-word;
1773     position: relative;
1774 }
1775
1776 .database-command a:hover {
1777     text-decoration: underline;
1778     cursor: pointer;
1779 }
1780
1781 .database-command-query {
1782     font-family: monospace;
1783     font-size: 11px;
1784     white-space: pre-wrap;
1785 }
1786
1787 .database-command-result {
1788     margin-top: 3px;
1789 }
1790
1791 .database-command-result.error {
1792     color: red;
1793 }
1794
1795 .database-result-table {
1796     border: 1px solid #aaa;
1797     table-layout: fixed;
1798     border-spacing: 0;
1799     border-collapse: collapse;
1800     width: 100%;
1801     -webkit-box-sizing: border-box;
1802 }
1803
1804 .database-result-table th {
1805     text-align: left;
1806     background: url(Images/glossyHeader.png) repeat-x;
1807     border-right: 1px solid #aaa;
1808     height: 15px;
1809     -webkit-box-sizing: border-box;
1810     border-bottom: 1px solid #aaa;
1811     font-weight: normal;
1812     vertical-align: middle;
1813     padding: 0 4px;
1814     white-space: nowrap;
1815 }
1816
1817 .database-result-table tr {
1818     height: 16px;
1819 }
1820
1821 .database-result-table tr.alternate {
1822     background-color: rgb(236, 243, 254);
1823 }
1824
1825 .database-result-table td {
1826     vertical-align: top;
1827     padding: 2px 4px;
1828     -webkit-box-sizing: border-box;
1829     white-space: nowrap;
1830     border-right: 1px solid #aaa;
1831 }
1832
1833 .database-result-table td > div, .database-result-table th > div {
1834     white-space: nowrap;
1835     text-overflow: ellipsis;
1836     overflow: hidden;
1837 }
1838
1839 .network-timeline {
1840     position: absolute;
1841     top: 0;
1842     bottom: 99px;
1843     left: 0;
1844     right: 0;
1845     font-family: Lucida Grande, sans-serif;
1846     font-size: 11px;
1847 }
1848
1849 .network-divider {
1850     width: 1px;
1851     height: 100%;
1852     position: absolute;
1853     background-color: rgba(0, 0, 0, 0.1);
1854 }
1855
1856 .network-divider.last {
1857     background-color: rgb(66%, 66%, 66%);
1858 }
1859
1860 .network-divider-label {
1861     position: absolute;
1862     top: 2px;
1863     right: 3px;
1864     font-size: 9px;
1865     color: rgb(50%, 50%, 50%);
1866 }
1867
1868 .network-dividers {
1869     position: absolute;
1870     left: 153px;
1871     right: 20px;
1872     bottom: 0;
1873     top: 0;
1874     z-index: -100;
1875     border-left: 1px solid rgb(66%, 66%, 66%);
1876     -webkit-box-sizing: border-box;
1877 }
1878
1879 .network-resources {
1880     position: absolute;
1881     width: 100%;
1882     overflow-y: overlay;
1883     overflow-x: hidden;
1884     border-top: 1px solid rgb(66%, 66%, 66%);
1885     top: 15px;
1886     bottom: 0;
1887 }
1888
1889 .network-title {
1890     position: relative;
1891     height: 18px;
1892 }
1893
1894 .network-title:hover {
1895     background-color: rgba(0, 0, 200, 0.1);
1896 }
1897
1898 .network-info {
1899     background-color: rgb(225, 225, 235);
1900     background-image: url(Images/attachedShadow.png), url(Images/bottomShadow.png);
1901     background-repeat: repeat-x;
1902     background-position: top, bottom;
1903     overflow: hidden;
1904     -webkit-user-select: text;
1905     cursor: auto;
1906 }
1907
1908 .network-info table {
1909     font-size: 11px;
1910     margin: 5px 15px 5px 5px;
1911 }
1912
1913 .network-info th {
1914     width: 145px;
1915 }
1916
1917 .network-info thead th {
1918     text-align: right;
1919 }
1920
1921 .network-info tbody th {
1922     white-space: nowrap;
1923     text-align: right;
1924     font-weight: bold;
1925     color: rgba(0, 0, 0, 0.5);
1926     vertical-align: top;
1927 }
1928
1929 .network-info td {
1930     word-break: break-word;
1931     white-space: normal;
1932 }
1933
1934 .network-file {
1935     position: absolute;
1936     left: 5px;
1937     height: 100%;
1938     width: 145px;
1939     overflow: hidden;
1940     white-space: nowrap;
1941     text-overflow: ellipsis;
1942     line-height: 18px;
1943     -webkit-user-select: text;
1944 }
1945
1946 .network-file a {
1947     color: inherit;
1948     text-decoration: none;
1949 }
1950
1951 .network-file a:hover {
1952     text-decoration: underline;
1953 }
1954
1955 .network-area {
1956     position: absolute;
1957     left: 162px;
1958     right: 28px;
1959     height: 100%;
1960 }
1961
1962 .network-bar {
1963     position: absolute;
1964     top: 0;
1965     bottom: 0;
1966     margin: auto -7px;
1967     border-width: 6px 7px 6px 7px;
1968     height: 13px;
1969     min-width: 14px;
1970     -webkit-box-sizing: border-box;
1971     opacity: 0.8;
1972     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
1973 }
1974
1975 .network-bar.network-category-documents {
1976     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
1977 }
1978
1979 .network-bar.network-category-stylesheets {
1980     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
1981 }
1982
1983 .network-bar.network-category-images {
1984     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
1985 }
1986
1987 .network-bar.network-category-fonts {
1988     -webkit-border-image: url(Images/timelinePillYellow.png) 6 7 6 7;
1989 }
1990
1991 .network-bar.network-category-scripts {
1992     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
1993 }
1994
1995 .network-summary {
1996     position: absolute;
1997     bottom: 0;
1998     left: 0;
1999     right: 0;
2000     height: 99px;
2001     background-color: rgb(101, 111, 130);
2002     background-image: url(Images/darkShadow.png), url(Images/gradientHighlightBottom.png);
2003     background-repeat: repeat-x;
2004     background-position: top, bottom;
2005 }
2006
2007 .network-graph-area {
2008     padding-top: 20px;
2009     position: absolute;
2010     margin: auto;
2011     top: 0;
2012     bottom: 0;
2013     right: 0;
2014     left: 0;
2015     width: 575px;
2016     white-space: nowrap;
2017     color: white;
2018     text-shadow: black 0px 1px 1px;
2019 }
2020
2021 .network-graph-label {
2022     height: 38px;
2023     display: inline-block;
2024     vertical-align: top;
2025     margin-right: 5px;
2026     margin-top: -2px;
2027     text-align: right;
2028 }
2029
2030 .network-graph-side {
2031     position: relative;
2032     display: inline-block;
2033     vertical-align: top;
2034 }
2035
2036 .network-graph-legend-total {
2037     margin-top: 12px;
2038     padding-right: 5px;
2039 }
2040
2041 .network-graph-legend-total .network-graph-legend-label {
2042     text-align: right;
2043 }
2044
2045 .network-graph-mode {
2046     -webkit-appearance: none;
2047     background-color: transparent;
2048     border: none;
2049     font-weight: bold;
2050     font-size: 12px;
2051     height: 18px;
2052     line-height: 11px;
2053     text-align: right;
2054     vertical-align: middle;
2055     padding: 2px 16px 2px 8px;
2056     margin: 0;
2057     background-image: url(Images/popupArrows.png);
2058     background-position: right center;
2059     background-repeat: no-repeat;
2060     color: inherit;
2061     border: 1px solid transparent;
2062     text-shadow: black 0px 2px 2px;
2063 }
2064
2065 .network-graph-mode:focus {
2066     outline: none;
2067 }
2068
2069 .network-graph-mode:hover {
2070     -webkit-border-radius: 9px;
2071     background-color: rgba(0, 0, 0, 0.2);
2072     border: 1px solid white;
2073     -webkit-box-shadow: black 0px 1px 1px;
2074 }
2075
2076 .network-graph-legend {
2077     margin-top: -8px;
2078     text-align: center;
2079 }
2080
2081 .network-graph-legend-item {
2082     display: inline-block;
2083     font-weight: bold;
2084     margin-right: 15px;
2085     vertical-align: top;
2086 }
2087
2088 .network-graph-legend-label {
2089     display: inline-block;
2090     text-align: left;
2091 }
2092
2093 .network-graph-legend-header {
2094     font-size: 12px;
2095     text-transform: capitalize;
2096 }
2097
2098 .network-graph-legend-value {
2099     font-size: 10px;
2100 }
2101
2102 .network-graph-legend-swatch {
2103     vertical-align: top;
2104     margin-top: 1px;
2105     margin-right: 3px;
2106 }
2107
2108 .network-summary-graph {
2109     vertical-align: middle;
2110 }
2111
2112 .tip-button {
2113     background-image: url(Images/tipIcon.png);
2114     border: none;
2115     width: 16px;
2116     height: 16px;
2117     float: right;
2118     background-color: transparent;
2119     margin-top: 1px;
2120 }
2121
2122 .tip-button:active {
2123     background-image: url(Images/tipIconPressed.png);
2124 }
2125
2126 .tip-balloon {
2127     position: absolute;
2128     left: 145px;
2129     top: -5px;
2130     z-index: 1000;
2131     border-width: 51px 15px 18px 37px;
2132     -webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
2133     width: 265px;
2134 }
2135
2136 .tip-balloon.bottom {
2137     position: absolute;
2138     left: 145px;
2139     top: auto;
2140     bottom: -7px;
2141     z-index: 1000;
2142     border-width: 18px 15px 51px 37px;
2143     -webkit-border-image: url(Images/tipBalloonBottom.png) 18 15 51 37;
2144 }
2145
2146 .tip-balloon-content {
2147     margin-top: -40px;
2148     margin-bottom: -2px;
2149     margin-left: 2px;
2150 }
2151
2152 .tip-balloon.bottom .tip-balloon-content {
2153     margin-top: -10px;
2154     margin-bottom: -35px;
2155 }
2156
2157 .sidebar-resizer-vertical {
2158     position: absolute;
2159     top: 0;
2160     bottom: 0;
2161     width: 5px;
2162     z-index: 100;
2163     cursor: col-resize;
2164 }
2165
2166 .sidebar-resizer-vertical-left {
2167     left: 197px;
2168 }
2169
2170 .sidebar-resizer-vertical-right {
2171     right: 222px;
2172 }
2173
2174 #searchResultsResizer {
2175     position: absolute;
2176     height: 5px;
2177     left: 0;
2178     right: 0;
2179     cursor: row-resize;
2180 }