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