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