WebCore/page/inspector/inspector.css

   1 /*
   2  * Copyright (C) 2006, 2007 Apple Inc.  All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions
   6  * are met:
   7  *
   8  * 1.  Redistributions of source code must retain the above copyright
   9  *     notice, this list of conditions and the following disclaimer.
  10  * 2.  Redistributions in binary form must reproduce the above copyright
  11  *     notice, this list of conditions and the following disclaimer in the
  12  *     documentation and/or other materials provided with the distribution.
  13  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  14  *     its contributors may be used to endorse or promote products derived
  15  *     from this software without specific prior written permission.
  16  *
  17  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  18  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  19  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  20  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  21  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  22  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  23  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  24  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  25  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  26  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  27  */
  28
  29 body {
  30     -webkit-user-select: none;
  31     height: 100%;
  32     width: 100%;
  33     overflow: hidden;
  34     font-family: Lucida Grande, sans-serif;
  35     margin: 0;
  36 }
  37
  38 iframe, a img {
  39     border: none;
  40 }
  41
  42 .focused .selected {
  43     background-color: rgb(56, 121, 217);
  44 }
  45
  46 .blurred .selected, body.inactive .selected {
  47     background-color: rgb(212, 212, 212);
  48 }
  49
  50 .hidden {
  51     display: none;
  52 }
  53
  54 #toolbar {
  55     position: absolute;
  56     top: 0;
  57     left: 0;
  58     right: 0;
  59     height: 28px;
  60     background: rgb(245, 245, 250);
  61     background-image: url(Images/toolbarBackground.png);
  62     background-repeat: repeat-x;
  63     background-position: top;
  64     border-bottom: 1px solid rgb(80, 80, 80);
  65     padding: 2px 8px;
  66     -webkit-box-sizing: border-box;
  67     -webkit-background-size: auto 135%;
  68 }
  69
  70 body.inactive #toolbar {
  71     background-image: url(Images/toolbarBackgroundInactive.png);
  72     border-bottom: 1px solid rgb(64%, 64%, 64%);
  73 }
  74
  75 body.attached #toolbar {
  76     border-top: 1px solid rgb(80, 80, 80);
  77     background-image: url(Images/darkShadow.png), url(Images/toolbarBackground.png);
  78     background-position: center -2px, top;
  79     -webkit-background-size: auto auto, auto 135%;
  80 }
  81
  82 body.attached.inactive #toolbar {
  83     background-image: url(Images/darkShadow.png), url(Images/toolbarBackgroundInactive.png);
  84     background-position: center -3px, top;
  85     border-top: 1px solid rgb(100, 100, 100);
  86     border-bottom: 1px solid rgb(64%, 64%, 64%);
  87 }
  88
  89 #toolbar button, #toolbar button:disabled:active {
  90     border-width: 3px 3px 4px 3px;
  91     -webkit-border-image: url(Images/toolbarButton.png) 3 3 4 3;
  92     height: 19px;
  93     -webkit-box-sizing: border-box;
  94     vertical-align: middle;
  95 }
  96
  97 #toolbar button:focus {
  98     outline: none;
  99 }
 100
 101 #toolbar button:active, #toolbar button.selected {
 102     -webkit-border-image: url(Images/toolbarButtonPressed.png) 3 3 4 3;
 103 }
 104
 105 body.inactive #toolbar button:active, body.inactive #toolbar button.selected {
 106     -webkit-border-image: url(Images/toolbarButtonPressedInactive.png) 3 3 4 3;
 107 }
 108
 109 body.inactive #toolbar button, body.inactive #toolbar button:disabled:active {
 110     -webkit-border-image: url(Images/toolbarButtonInactive.png) 3 3 4 3;
 111 }
 112
 113 #toolbar .split-button-divider {
 114     width: 1px;
 115     height: 19px;
 116     content: url(Images/toolbarSplitButtonDivider.png);
 117     vertical-align: middle;
 118 }
 119
 120 body.inactive #toolbar .split-button-divider {
 121     content: url(Images/toolbarSplitButtonDividerInactive.png);
 122 }
 123
 124 #toolbar .split-button {
 125     padding: 0;
 126     width: 20px;
 127 }
 128
 129 #toolbar .split-button.middle {
 130     border-left: transparent none 0 !important;
 131     border-right: transparent none 0 !important;
 132 }
 133
 134 #toolbar .split-button.first {
 135     border-right: transparent none 0 !important;
 136 }
 137
 138 #toolbar .split-button.last {
 139     border-left: transparent none 0 !important;
 140 }
 141
 142 #back img {
 143     content: url(Images/treeLeftTriangleBlack.png);
 144     position: relative;
 145     top: -1px;
 146     left: -1px;
 147     width: 8px;
 148     height: 8px;
 149 }
 150
 151 #back:disabled img, #forward:disabled img {
 152     opacity: 0.5;
 153 }
 154
 155 #forward img {
 156     content: url(Images/treeRightTriangleBlack.png);
 157     position: relative;
 158     top: -1px;
 159     left: 2px;
 160     width: 8px;
 161     height: 8px;
 162 }
 163
 164 .view-button-source img {
 165     content: url(Images/sourceViewButton.png);
 166     position: relative;
 167     top: -1px;
 168     width: 8px;
 169     height: 7px;
 170 }
 171
 172 .view-button-source.selected img {
 173     content: url(Images/sourceViewButtonSelected.png);
 174 }
 175
 176 .view-button-dom img {
 177     content: url(Images/domViewButton.png);
 178     position: relative;
 179     top: -1px;
 180     left: 1px;
 181     width: 10px;
 182     height: 7px;
 183 }
 184
 185 .view-button-dom.selected img {
 186     content: url(Images/domViewButtonSelected.png);
 187 }
 188
 189 #viewbuttons {
 190     position: absolute;
 191     left: 200px;
 192     padding-left: 8px;
 193 }
 194
 195 #viewbuttons .selected {
 196     font-weight: bold;
 197 }
 198
 199 #search {
 200     float: right;
 201     width: 200px;
 202 }
 203
 204 #search:focus {
 205     outline: 1px auto;
 206 }
 207
 208 #searchResults {
 209     position: absolute;
 210     top: -73px;
 211     left: 200px;
 212     right: 0;
 213     height: 100px;
 214     z-index: -1;
 215     background-color: white;
 216     border-bottom: 1px solid rgb(180, 180, 180);
 217     overflow-y: auto;
 218     overflow-x: hidden;
 219 }
 220
 221 .search-results-section {
 222     color: gray;
 223     width: 28px;
 224     float: left;
 225     margin-left: -45px;
 226     text-align: right;
 227     font-size: 10px;
 228     margin-top: 1px;
 229     white-space: nowrap;
 230 }
 231
 232 .selected .search-results-section {
 233     color: rgba(255, 255, 255, 0.8);
 234 }
 235
 236 .blurred .selected .search-results-section {
 237     color: rgba(0, 0, 0, 0.5);
 238 }
 239
 240 #searchResults > ol > ol > li {
 241     padding-left: 45px;
 242     white-space: nowrap;
 243 }
 244
 245 .search-matched-string {
 246     background-color: #ff8;
 247 }
 248
 249 .selected .search-matched-string {
 250     background-color: transparent;
 251 }
 252
 253 #sidebar {
 254     position: absolute;
 255     top: 28px;
 256     left: 0;
 257     bottom: 0;
 258     width: 200px;
 259     background-color: rgb(214, 221, 229);
 260     border-right: 1px solid rgb(64%, 64%, 64%);
 261     -webkit-box-sizing: border-box;
 262 }
 263
 264 body.inactive #sidebar {
 265     background-color: rgb(232, 232, 232);
 266 }
 267
 268 #statusbar {
 269     position: absolute;
 270     padding: 0;
 271     left: 0;
 272     right: 0;
 273     bottom: 0;
 274     height: 21px;
 275     border-top: 1px solid #bbb;
 276     -webkit-box-sizing: border-box;
 277     background-image: url(Images/sidebarStatusAreaBackground.png);
 278     background-position: right, center;
 279     background-repeat: no-repeat, repeat-x;
 280 }
 281
 282 #statusbar #sidebarResizeWidget {
 283     display: block;
 284     float: right;
 285     width: 17px;
 286     height: 20px;
 287     background: url(Images/sidebarResizeWidget.png) right no-repeat;
 288     cursor: col-resize;
 289 }
 290
 291 #statusbar button {
 292     -webkit-apearance: none;
 293     vertical-align: top;
 294     border: 0;
 295     width: 32px;
 296     height: 20px;
 297     margin: 0;
 298     margin-left: -1px;
 299     padding: 0;
 300 }
 301
 302 #statusbar button:focus {
 303     outline: none;
 304 }
 305
 306 #statusbar button.action {
 307     background-image: url(Images/sidebarActionWidget.png);
 308 }
 309
 310 #statusbar button.action:active {
 311     background-image: url(Images/sidebarActionWidgetPressed.png);
 312 }
 313
 314 #statusbar #statusToggle {
 315     background-image: url(Images/showStatusWidget.png);
 316 }
 317
 318 #statusbar #statusToggle:active {
 319     background-image: url(Images/showStatusWidgetPressed.png);
 320 }
 321
 322 #statusbar #statusToggle.hide {
 323     background-image: url(Images/hideStatusWidget.png);
 324 }
 325
 326 #statusbar #statusToggle.hide:active {
 327     background-image: url(Images/hideStatusWidgetPressed.png);
 328 }
 329
 330 body.detached #attachToggle {
 331     background-image: url(Images/sidebarAttachWidget.png);
 332 }
 333
 334 body.detached #attachToggle:active {
 335     background-image: url(Images/sidebarAttachWidgetPressed.png);
 336 }
 337
 338 body.attached #attachToggle {
 339     background-image: url(Images/sidebarDetachWidget.png);
 340 }
 341
 342 body.attached #attachToggle:active {
 343     background-image: url(Images/sidebarDetachWidgetPressed.png);
 344 }
 345
 346 #status {
 347     overflow: hidden;
 348     position: absolute;
 349     bottom: -57px;
 350     left: 0;
 351     width: 100%;
 352     height: 78px;
 353     padding: 2px 0;
 354     margin: 0;
 355     border-top: 1px solid rgb(64%, 64%, 64%);
 356     -webkit-box-sizing: border-box;
 357     list-style: none;
 358     font-size: 11px;
 359 }
 360
 361 #status li {
 362     position: relative;
 363     height: 37px;
 364     -webkit-box-sizing: border-box;
 365 }
 366
 367 #status li.selected {
 368     background-image: url(Images/sidebarSelectionTall.png);
 369     background-repeat: repeat-x;
 370     background-position: center;
 371     background-color: transparent !important;
 372     color: white;
 373     font-weight: bold;
 374     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
 375 }
 376
 377 #status .icon {
 378     position: absolute;
 379     top: 2px;
 380     left: 15px;
 381     width: 32px;
 382     height: 32px;
 383     background-repeat: no-repeat;
 384     background-position: center center;
 385 }
 386
 387 #status .icon.console {
 388     background-image: url(Images/console.png);
 389 }
 390
 391 #status .icon.network {
 392     background-image: url(Images/network.png);
 393 }
 394
 395 #status .title {
 396     -webkit-box-sizing: border-box;
 397     position: relative;
 398     top: 5px;
 399     padding-left: 58px;
 400     right: 5px;
 401     display: block;
 402     white-space: nowrap;
 403     overflow: hidden;
 404     text-overflow: ellipsis;
 405 }
 406
 407 #status .title.only {
 408     top: 10px;
 409 }
 410
 411 #status .info {
 412     -webkit-box-sizing: border-box;
 413     position: relative;
 414     margin-top: 6px;
 415     padding-left: 58px;
 416     right: 5px;
 417     display: block;
 418     font-size: 9px;
 419     white-space: nowrap;
 420     overflow: hidden;
 421     text-overflow: ellipsis;
 422 }
 423
 424 #list {
 425     overflow-x: hidden;
 426     overflow-y: auto;
 427     position: absolute;
 428     top: 0;
 429     left: 0;
 430     bottom: 21px;
 431     width: 100%;
 432     padding: 2px 0;
 433     margin: 0;
 434     -webkit-box-sizing: border-box;
 435     list-style: none;
 436     font-size: 11px;
 437 }
 438
 439 #list > li {
 440     height: 26px;
 441     color: rgb(96, 110, 128);
 442     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 443     font-weight: bold;
 444     line-height: 20px;
 445     text-indent: 20px;
 446     background-image: url(Images/rightTriangle.png);
 447     background-repeat: no-repeat;
 448     background-position: 10px 6px;
 449     text-transform: uppercase;
 450 }
 451
 452 #list > ol + li {
 453     margin-top: 5px;
 454 }
 455
 456 #list > li + li {
 457     margin-top: 5px;
 458 }
 459
 460 #list > li.expanded {
 461     background-image: url(Images/downTriangle.png);
 462     background-position: 10px 7px;
 463 }
 464
 465 #list > ol {
 466     display: none;
 467     list-style: none;
 468     padding: 0;
 469     margin: 0;
 470 }
 471
 472 #list > ol.expanded {
 473     display: block;
 474 }
 475
 476 #list > ol > li {
 477     position: relative;
 478     height: 37px;
 479     -webkit-box-sizing: border-box;
 480 }
 481
 482 #list .icon {
 483     position: absolute;
 484     top: 2px;
 485     left: 15px;
 486     width: 32px;
 487     height: 32px;
 488     background-image: url(Images/document.png);
 489     background-repeat: no-repeat;
 490     background-position: center center;
 491 }
 492
 493 #list .icon.plain {
 494     background-image: url(Images/plainDocument.png);
 495 }
 496
 497 #list .icon .preview {
 498     margin: auto;
 499     display: block;
 500     position: absolute;
 501     top: 0;
 502     bottom: 0;
 503     left: 0;
 504     right: 0;
 505     max-width: 20px;
 506     max-height: 22px;
 507     -webkit-user-drag: none;
 508     -webkit-box-sizing: border-box;
 509     border-top: 6px solid transparent;
 510 }
 511
 512 #list .icon .progress {
 513     margin: auto;
 514     display: block;
 515     position: absolute;
 516     top: 0;
 517     bottom: 0;
 518     left: 0;
 519     right: 0;
 520 }
 521
 522 #list .title {
 523     -webkit-box-sizing: border-box;
 524     position: relative;
 525     top: 5px;
 526     padding-left: 58px;
 527     right: 5px;
 528     display: block;
 529     white-space: nowrap;
 530     overflow: hidden;
 531     text-overflow: ellipsis;
 532 }
 533
 534 #list .title.only {
 535     top: 10px;
 536 }
 537
 538 #sidebar li .count {
 539     float: right;
 540     margin-top: 11px;
 541     margin-right: 6px;
 542     font-family: Helvetica, sans-serif;
 543     font-weight: bold;
 544     font-size: 11px;
 545     line-height: 10px;
 546     -webkit-border-radius: 7px;
 547     color: white;
 548     text-shadow: none;
 549     background-image: url(Images/gradientHighlight.png), url(Images/gradient.png);
 550     -webkit-background-size: 100%, 100%;
 551     background-position: center;
 552     padding: 2px 4px;
 553     text-align: center;
 554     text-indent: 0;
 555     min-width: 20px;
 556     -webkit-box-sizing: border-box;
 557 }
 558
 559 #sidebar li .count.warnings {
 560     background-color: orange;
 561 }
 562
 563 #sidebar li .count.errors {
 564     background-color: red;
 565 }
 566
 567 #list .info {
 568     -webkit-box-sizing: border-box;
 569     position: relative;
 570     margin-top: 6px;
 571     padding-left: 58px;
 572     right: 5px;
 573     display: block;
 574     font-size: 9px;
 575     white-space: nowrap;
 576     overflow: hidden;
 577     text-overflow: ellipsis;
 578 }
 579
 580 #list li.selected {
 581     background-image: url(Images/sidebarSelectionTall.png);
 582     background-repeat: repeat-x;
 583     background-position: center;
 584     background-color: transparent !important;
 585     color: white;
 586     font-weight: bold;
 587     text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
 588 }
 589
 590 #sidebar.blurred li.selected {
 591     background-image: url(Images/sidebarSelectionBlurredTall.png);
 592 }
 593
 594 body.inactive #sidebar li.selected {
 595     background-image: url(Images/sidebarSelectionGrayTall.png);
 596 }
 597
 598 #main {
 599     position: absolute;
 600     top: 28px;
 601     left: 200px;
 602     right: 0;
 603     bottom: 0;
 604     overflow: hidden;
 605     background-color: white;
 606     z-index: -100;
 607 }
 608
 609 .panel {
 610     display: none;
 611     overflow: hidden;
 612     position: absolute;
 613     top: 0;
 614     left: 0;
 615     right: 0;
 616     bottom: 0;
 617 }
 618
 619 .panel.selected {
 620     display: block;
 621     background-color: transparent !important;
 622 }
 623
 624 .content {
 625     display: none;
 626     -webkit-user-select: text;
 627     overflow: none;
 628     position: absolute;
 629     top: 0;
 630     left: 0;
 631     right: 0;
 632     bottom: 0;
 633 }
 634
 635 .content.selected {
 636     display: block;
 637     background-color: transparent !important;
 638 }
 639
 640 .content.image {
 641     position: relative;
 642     width: 100%;
 643     height: 100%;
 644 }
 645
 646 .content.image > .image {
 647     position: relative;
 648     -webkit-box-sizing: border-box;
 649     height: 70%;
 650     padding: 20px;
 651 }
 652
 653 .content.image > .info {
 654     position: relative;
 655     -webkit-box-sizing: border-box;
 656     height: 30%;
 657     padding-top: 10px;
 658     overflow: auto;
 659     font-size: 11px;
 660 }
 661
 662 .content.image img {
 663     margin: auto;
 664     position: absolute;
 665     top: 0;
 666     left: 0;
 667     right: 0;
 668     bottom: 0;
 669     max-width: 80%;
 670     max-height: 80%;
 671     background-image: url(Images/checker.png);
 672     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
 673 }
 674
 675 .content.image .title {
 676     text-align: center;
 677     font-size: 13px;
 678 }
 679
 680 .content.image .infoList {
 681     margin: 0;
 682 }
 683
 684 .content.image .infoList dt {
 685     font-weight: bold;
 686     display: inline-block;
 687     width: 50%;
 688     text-align: right;
 689 }
 690
 691 .content.image .infoList dd {
 692     -webkit-box-sizing: border-box;
 693     display: inline-block;
 694     padding-left: 10px;
 695     width: 50%;
 696     text-align: left;
 697     margin: 0;
 698 }
 699
 700 .content.image .infoList dd::after {
 701     white-space: pre;
 702     content: "\A";
 703 }
 704
 705 .content.network {
 706 }
 707
 708 .content.other {
 709     font-family: Monaco, monospace;
 710     font-size: 10px;
 711     white-space: pre-wrap;
 712     padding: 6px;
 713 }
 714
 715 .content.side {
 716     display: block;
 717     overflow: hidden;
 718     position: absolute;
 719     top: 0;
 720     left: 0;
 721     right: 225px;
 722     bottom: 0;
 723 }
 724
 725 .content.source iframe {
 726     width: 100%;
 727     height: 100%;
 728 }
 729
 730 .content.tree {
 731     display: block;
 732     overflow: auto;
 733     padding: 0;
 734     position: absolute;
 735     top: 0;
 736     left: 0;
 737     right: 0;
 738     bottom: 21px;
 739 }
 740
 741 .sidebar {
 742     position: absolute;
 743     top: 0;
 744     right: 0;
 745     bottom: 0;
 746     width: 225px;
 747     background-color: rgb(232, 232, 232);
 748     border-left: 1px solid rgb(64%, 64%, 64%);
 749     -webkit-box-sizing: border-box;
 750     -webkit-user-select: none;
 751     overflow: auto;
 752     padding: 0;
 753 }
 754
 755 .crumbs {
 756     -webkit-box-sizing: border-box;
 757     position: absolute;
 758     left: 0;
 759     right: 0;
 760     bottom: 0;
 761     height: 21px;
 762     background-image: url(Images/breadcrumbBackground.png);
 763     background-repeat: repeat-x;
 764     border-top: 1px solid #bbb;
 765     font-size: 11px;
 766     line-height: 19px;
 767     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 768     color: rgb(20, 20, 20);
 769 }
 770
 771 .crumbs > div {
 772     position: absolute;
 773 }
 774
 775 .crumbs .crumb {
 776     height: 20px;
 777     border-width: 0 11px 0 0;
 778     -webkit-border-image: url(Images/segment.png) 0 11 0 0;
 779     margin-right: -11px;
 780     padding-left: 15px;
 781     padding-right: 2px;
 782     white-space: nowrap;
 783     float: right;
 784     cursor: default;
 785 }
 786
 787 .crumbs .crumb.hidden {
 788     display: block;
 789     color: rgba(0, 0, 0, 0.45);
 790 }
 791
 792 .crumbs .crumb.start {
 793     padding-left: 7px;
 794 }
 795
 796 .crumbs .crumb.end {
 797     border-width: 0 2px 0 0;
 798     padding-right: 6px;
 799     -webkit-border-image: url(Images/segmentEnd.png) 0 2 0 0;
 800 }
 801
 802 .crumbs .crumb.selected {
 803     -webkit-border-image: url(Images/segmentSelected.png) 0 11 0 0;
 804     color: black;
 805     background-color: transparent !important;
 806 }
 807
 808 .crumbs .crumb.selected:hover {
 809     -webkit-border-image: url(Images/segmentSelected.png) 0 11 0 0;
 810 }
 811
 812 .crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
 813     -webkit-border-image: url(Images/segmentSelectedEnd.png) 0 2 0 0;
 814 }
 815
 816 .crumbs .crumb:hover {
 817     -webkit-border-image: url(Images/segmentHover.png) 0 11 0 0;
 818     color: black;
 819 }
 820
 821 .crumbs .crumb.hidden:hover {
 822     -webkit-border-image: url(Images/segmentHover.png) 0 11 0 0;
 823     color: rgba(0, 0, 0, 0.75);
 824 }
 825
 826 .crumbs .crumb.end:hover {
 827     -webkit-border-image: url(Images/segmentHoverEnd.png) 0 2 0 0;
 828 }
 829
 830 .outline-disclosure li .selection {
 831     display: none;
 832     position: absolute;
 833     left: 0;
 834     right: 0;
 835     height: 15px;
 836     z-index: -1;
 837 }
 838
 839 .outline-disclosure li.selected .selection {
 840     display: block;
 841 }
 842
 843 .content.tree > ol, #searchResults > ol {
 844     position: relative;
 845     padding: 2px 6px !important;
 846     margin: 0;
 847     color: black;
 848     -webkit-user-select: none;
 849     min-width: 100%;
 850     -webkit-box-sizing: border-box;
 851 }
 852
 853 .outline-disclosure, .outline-disclosure ol {
 854     list-style-type: none;
 855     font-size: 11px;
 856     -webkit-padding-start: 12px;
 857     margin: 0;
 858 }
 859
 860 .outline-disclosure li {
 861     padding: 0 0 2px 14px;
 862     -webkit-box-sizing: border-box;
 863     margin-top: 1px;
 864     margin-bottom: 1px;
 865     word-wrap: break-word;
 866     text-indent: -2px
 867 }
 868
 869 .blurred .outline-disclosure li.selected, body.inactive .outline-disclosure li.selected {
 870     background-color: transparent !important;
 871     color: black;
 872 }
 873
 874 .outline-disclosure li.selected {
 875     background-color: transparent !important;
 876     color: white;
 877 }
 878
 879 .outline-disclosure li.parent {
 880     text-indent: -12px
 881 }
 882
 883 .content.tree li .tag.close {
 884     margin-left: -12px;
 885 }
 886
 887 .outline-disclosure li.parent:before {
 888     content: url(Images/treeRightTriangleBlack.png);
 889     float: left;
 890     width: 8px;
 891     height: 8px;
 892     margin-top: 1px;
 893     padding-right: 2px;
 894 }
 895
 896 .outline-disclosure li.parent.expanded:before {
 897     content: url(Images/treeDownTriangleBlack.png);
 898 }
 899
 900 .outline-disclosure ol.children {
 901     display: none;
 902 }
 903
 904 .outline-disclosure ol.children.expanded {
 905     display: block;
 906 }
 907
 908 .content.tree li .comment, body.inactive .content.tree li .comment {
 909     color: rgb(0, 116, 0);
 910 }
 911
 912 .content.tree li .tag, body.inactive .content.tree li .tag {
 913     color: rgb(170, 13, 145);
 914 }
 915
 916 .content.tree li .attr, body.inactive .content.tree li .attr {
 917     color: rgb(131, 108, 40);
 918 }
 919
 920 .content.tree li .value, body.inactive .content.tree li .value {
 921     color: rgb(196, 26, 22);
 922 }
 923
 924 .webkit-html-external-link, -webkit-html-resource-link {
 925     color: #00e;
 926 }
 927
 928 .webkit-html-external-link {
 929     text-decoration: none;
 930 }
 931
 932 .webkit-html-external-link:hover {
 933     text-decoration: underline;
 934 }
 935
 936 .focused .content.tree li.selected * {
 937     color: inherit;
 938 }
 939
 940 .section {
 941     display: block;
 942     -webkit-box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
 943     -webkit-border-radius: 8px;
 944     background-color: white;
 945     font-size: 11px;
 946     margin-bottom: 8px;
 947 }
 948
 949 .section .header {
 950     padding: 2px 8px 4px;
 951     border: 2px solid rgba(255, 255, 255, 0.5);
 952     background-color: rgb(214, 221, 229);
 953     background-image: url(Images/gradient.png);
 954     background-repeat: repeat-x;
 955     background-position: bottom;
 956     -webkit-background-size: 100%;
 957     -webkit-border-radius: 8px;
 958     text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
 959 }
 960
 961 .section.expanded .header {
 962     border-bottom: 2px ridge rgba(214, 221, 229, 0.5);
 963     -webkit-border-top-right-radius: 8px;
 964     -webkit-border-top-left-radius: 8px;
 965     -webkit-border-bottom-right-radius: 0;
 966     -webkit-border-bottom-left-radius: 0;
 967 }
 968
 969 .section .header .title {
 970     font-weight: bold;
 971     word-wrap: break-word;
 972 }
 973
 974 .section .header .subtitle {
 975     margin-top: 2px;
 976     font-size: 10px;
 977     word-wrap: break-word;
 978 }
 979
 980 .section .header .subtitle a {
 981     color: inherit;
 982 }
 983
 984 .section .properties {
 985     display: none;
 986     margin: 0;
 987     padding: 2px 6px 5px;
 988     list-style: none;
 989 }
 990
 991 .section.expanded .properties {
 992     display: block;
 993 }
 994
 995 .section .properties li {
 996     margin-left: 10px;
 997     white-space: nowrap;
 998     text-overflow: ellipsis;
 999     overflow: hidden;
1000 }
1001
1002 .section .properties li.parent {
1003     margin-left: 0;
1004 }
1005
1006 .section .properties li.selected {
1007     background-color: transparent !important;
1008 }
1009
1010 .section .properties ol {
1011     display: none;
1012     margin: 0;
1013     -webkit-padding-start: 12px;
1014     list-style: none;
1015 }
1016
1017 .section .properties ol.expanded {
1018     display: block;
1019 }
1020
1021 .section .properties li.parent::before {
1022     content: url(Images/treeRightTriangleBlack.png);
1023     opacity: 0.75;
1024     float: left;
1025     width: 8px;
1026     height: 8px;
1027     margin-top: 0;
1028     padding-right: 2px;
1029 }
1030
1031 .section .properties li.parent.expanded::before {
1032     content: url(Images/treeDownTriangleBlack.png);
1033     margin-top: 1px;
1034 }
1035
1036 .section .properties .overloaded {
1037     text-decoration: line-through;
1038 }
1039
1040 .section .properties .implicit {
1041     opacity: 0.5;
1042 }
1043
1044 .section .properties .name {
1045     color: rgb(136, 19, 145);
1046 }
1047
1048 .section .properties .number {
1049     color: blue;
1050 }
1051
1052 .section .properties .keyword {
1053     color: rgb(136, 19, 79);
1054 }
1055
1056 .section .properties .color {
1057     color: rgb(118, 15, 21);
1058 }
1059
1060 .swatch {
1061     display: inline-block;
1062     vertical-align: middle;
1063     margin-left: 4px;
1064     width: 0.75em;
1065     height: 0.75em;
1066     border: 1px solid rgb(180, 180, 180);
1067 }
1068
1069 .pane {
1070     margin-top: 1px;
1071 }
1072
1073 .pane > .title {
1074     background-image: url(Images/paneHeader.png);
1075     background-repeat: repeat-x;
1076     background-position: bottom;
1077     -webkit-background-size: 100%;
1078     height: 14px;
1079     padding: 0 6px;
1080     border-top: 1px solid rgb(129, 129, 129);
1081     border-bottom: 1px solid rgb(129, 129, 129);
1082     font-weight: bold;
1083     font-size: 11px;
1084     color: rgb(85, 85, 85);
1085 }
1086
1087 .pane > .title:active {
1088     background-image: url(Images/paneHeaderActive.png);
1089 }
1090
1091 .pane > .title::before {
1092     content: url(Images/treeRightTriangleBlack.png);
1093     opacity: 0.75;
1094     float: left;
1095     width: 8px;
1096     height: 8px;
1097     margin-right: 3px;
1098     margin-top: 0;
1099 }
1100
1101 .pane.expanded > .title::before {
1102     margin-top: 1px;
1103     content: url(Images/treeDownTriangleBlack.png);
1104 }
1105
1106 .pane > .body {
1107     position: relative;
1108     padding: 8px;
1109     display: none;
1110     overflow: auto;
1111 }
1112
1113 .pane.expanded > .body, .pane.expanded > .growbar {
1114     display: block;
1115 }
1116
1117 .pane > .growbar {
1118     display: none;
1119     background-image: url(Images/paneGrowHandleLine.png), url(Images/paneBottomGrow.png);
1120     background-repeat: no-repeat, repeat-x;
1121     background-position: center center, bottom;
1122     -webkit-background-size: 100%, 100%;;
1123     height: 5px;
1124 }
1125
1126 .metrics {
1127     font-size: 10px;
1128     text-align: center;
1129     white-space: nowrap;
1130 }
1131
1132 .metrics .label {
1133     position: absolute;
1134     margin-top: -10px;
1135     font-size: 9px;
1136     color: grey;
1137     background-color: rgb(232, 232, 232);
1138     margin-left: 3px;
1139     padding-left: 2px;
1140     padding-right: 2px;
1141 }
1142
1143 .metrics .margin {
1144     border: 1px dashed;
1145     display: inline-block;
1146     -webkit-box-sizing: border-box;
1147     padding: 3px;
1148     margin: 3px;
1149 }
1150
1151 .metrics .border {
1152     border: 1px black solid;
1153     display: inline-block;
1154     vertical-align: middle;
1155     -webkit-box-sizing: border-box;
1156     padding: 3px;
1157     margin: 3px;
1158 }
1159
1160 .metrics .padding {
1161     border: 1px grey dashed;
1162     display: inline-block;
1163     vertical-align: middle;
1164     -webkit-box-sizing: border-box;
1165     padding: 3px;
1166     margin: 3px;
1167 }
1168
1169 .metrics .content {
1170     position: static;
1171     border: 1px grey solid;
1172     display: inline-block;
1173     vertical-align: middle;
1174     -webkit-box-sizing: border-box;
1175     padding: 3px;
1176     margin: 3px;
1177     min-width: 80px;
1178     text-align: center;
1179     overflow: visible;
1180 }
1181
1182 .metrics .left {
1183     display: inline-block;
1184     text-align: center;
1185     vertical-align: middle;
1186     -webkit-box-sizing: border-box;
1187 }
1188
1189 .metrics .right {
1190     display: inline-block;
1191     text-align: center;
1192     vertical-align: middle;
1193     -webkit-box-sizing: border-box;
1194 }
1195
1196 .metrics .top {
1197     text-align: center;
1198 }
1199
1200 .metrics .bottom {
1201     text-align: center;
1202 }
1203
1204 .console-message-list {
1205     list-style: none;
1206     margin: 0;
1207     padding: 0;
1208     position: absolute;
1209     top: 0;
1210     bottom: 20px;
1211     left: 0;
1212     right: 0;
1213     overflow: auto;
1214 }
1215
1216 .console-prompt {
1217     font-family: monospace;
1218     font-size: 11px;
1219     margin: 0;
1220     padding: 2px 0 0;
1221     position: absolute;
1222     bottom: 0;
1223     left: 0;
1224     right: 0;
1225     height: 18px;
1226     resize: none;
1227     outline: none;
1228     border: none;
1229     border-top: 1px solid rgb(64%, 64%, 64%);
1230 }
1231
1232 .console-message, .console-command {
1233     font-size: 10px;
1234     margin: 0;
1235     padding: 3px;
1236     border-bottom: 1px solid rgb(75%, 75%, 75%);
1237     word-break: break-word;
1238     position: relative;
1239 }
1240
1241 .console-command a:hover {
1242     text-decoration: underline;
1243     cursor: pointer;
1244 }
1245
1246 .console-message-message {
1247     font-size: 11px;
1248     whitespace: pre-wrap;
1249     margin-left: 22px;
1250 }
1251
1252 .console-message-url {
1253     margin-left: 22px;
1254 }
1255
1256 .console-message-line {
1257     margin-left: 22px;
1258 }
1259
1260 .console-message-line::before {
1261     content: "line ";
1262 }
1263
1264 .console-error-level::before {
1265         content: url(Images/errorMediumIcon.png);
1266         position: absolute;
1267         left: 4px;
1268         top: 3px;
1269 }
1270
1271 .console-warning-level::before {
1272         content: url(Images/warningMediumIcon.png);
1273         position: absolute;
1274         left: 4px;
1275         top: 3px;
1276 }
1277
1278 .console-command-input, .console-command-output {
1279     font-size: 11px;
1280     margin-left: 22px;
1281     whitespace: pre-wrap;
1282 }
1283
1284 .console-command-input::before {
1285     content: ">";
1286     font-weight: bold;
1287     font-size: 15px;
1288     color: blue;
1289         position: absolute;
1290         left: 7px;
1291         top: 1px;
1292 }
1293
1294 .network-timeline {
1295     position: absolute;
1296     top: 0;
1297     bottom: 99px;
1298     left: 0;
1299     right: 0;
1300     font-family: Lucida Grande, sans-serif;
1301     font-size: 11px;
1302 }
1303
1304 .network-divider {
1305     width: 1px;
1306     height: 100%;
1307     position: absolute;
1308     background-color: rgba(0, 0, 0, 0.1);
1309 }
1310
1311 .network-divider.last {
1312     background-color: rgb(66%, 66%, 66%);
1313 }
1314
1315 .network-divider-label {
1316     position: absolute;
1317     top: 2px;
1318     right: 3px;
1319     font-size: 9px;
1320     color: rgb(50%, 50%, 50%);
1321 }
1322
1323 .network-dividers {
1324     position: absolute;
1325     left: 153px;
1326     right: 20px;
1327     bottom: 0;
1328     top: 0;
1329     z-index: -100;
1330     border-left: 1px solid rgb(66%, 66%, 66%);
1331     -webkit-box-sizing: border-box;
1332 }
1333
1334 .network-resources {
1335     position: absolute;
1336     width: 100%;
1337     overflow-y: overlay;
1338     overflow-x: hidden;
1339     border-top: 1px solid rgb(66%, 66%, 66%);
1340     top: 15px;
1341     bottom: 0;
1342 }
1343
1344 .network-title {
1345     position: relative;
1346     height: 18px;
1347 }
1348
1349 .network-title:hover {
1350     background-color: rgba(0, 0, 200, 0.1);
1351 }
1352
1353 .network-info {
1354     background-color: rgb(225, 225, 235);
1355     background-image: url(Images/attachedShadow.png), url(Images/bottomShadow.png);
1356     background-repeat: repeat-x;
1357     background-position: top, bottom;
1358     overflow: hidden;
1359 }
1360
1361 .network-info table {
1362     font-size: 11px;
1363     margin: 5px 15px 5px 5px;
1364 }
1365
1366 .network-info th {
1367     width: 145px;
1368 }
1369
1370 .network-info thead th {
1371     text-align: right;
1372 }
1373
1374 .network-info tbody th {
1375     white-space: nowrap;
1376     text-align: right;
1377     font-weight: bold;
1378     color: rgba(0, 0, 0, 0.5);
1379     vertical-align: top;
1380 }
1381
1382 .network-info td {
1383     word-break: break-word;
1384     white-space: normal;
1385 }
1386
1387 .network-file {
1388     position: absolute;
1389     left: 5px;
1390     height: 100%;
1391     width: 145px;
1392     overflow: hidden;
1393     white-space: nowrap;
1394     text-overflow: ellipsis;
1395     line-height: 18px;
1396 }
1397
1398 .network-file a {
1399     color: inherit;
1400     text-decoration: none;
1401 }
1402
1403 .network-file a:hover {
1404     text-decoration: underline;
1405 }
1406
1407 .network-area {
1408     position: absolute;
1409     left: 162px;
1410     right: 28px;
1411     height: 100%;
1412 }
1413
1414 .network-bar {
1415     position: absolute;
1416     top: 0;
1417     bottom: 0;
1418     margin: auto -7px;
1419     border-width: 6px 7px 6px 7px;
1420     height: 13px;
1421     min-width: 14px;
1422     -webkit-box-sizing: border-box;
1423     opacity: 0.8;
1424     -webkit-border-image: url(Images/timelinePillGray.png) 6 7 6 7;
1425 }
1426
1427 .network-bar.network-category-documents {
1428     -webkit-border-image: url(Images/timelinePillBlue.png) 6 7 6 7;
1429 }
1430
1431 .network-bar.network-category-stylesheets {
1432     -webkit-border-image: url(Images/timelinePillGreen.png) 6 7 6 7;
1433 }
1434
1435 .network-bar.network-category-images {
1436     -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7;
1437 }
1438
1439 .network-bar.network-category-scripts {
1440     -webkit-border-image: url(Images/timelinePillOrange.png) 6 7 6 7;
1441 }
1442
1443 .network-summary {
1444     position: absolute;
1445     bottom: 0;
1446     left: 0;
1447     right: 0;
1448     height: 99px;
1449     background-color: rgb(101, 111, 130);
1450     background-image: url(Images/darkShadow.png), url(Images/gradientHighlightBottom.png);
1451     background-repeat: repeat-x;
1452     background-position: top, bottom;
1453 }
1454
1455 .network-graph-area {
1456     padding-top: 20px;
1457     position: absolute;
1458     margin: auto;
1459     top: 0;
1460     bottom: 0;
1461     right: 0;
1462     left: 0;
1463     width: 575px;
1464     white-space: nowrap;
1465     color: white;
1466     text-shadow: black 0px 1px 1px;
1467 }
1468
1469 .network-graph-label {
1470     height: 38px;
1471     display: inline-block;
1472     vertical-align: top;
1473     margin-right: 5px;
1474     margin-top: -2px;
1475     text-align: right;
1476 }
1477
1478 .network-graph-side {
1479     position: relative;
1480     display: inline-block;
1481     vertical-align: top;
1482 }
1483
1484 .network-graph-legend-total {
1485     margin-top: 12px;
1486     padding-right: 5px;
1487 }
1488
1489 .network-graph-legend-total .network-graph-legend-label {
1490     text-align: right;
1491 }
1492
1493 .network-graph-mode {
1494     -webkit-appearance: none;
1495     background-color: transparent;
1496     border: none;
1497     font-weight: bold;
1498     font-size: 12px;
1499     height: 18px;
1500     line-height: 11px;
1501     text-align: right;
1502     vertical-align: middle;
1503     padding: 2px 16px 2px 8px;
1504     margin: 0;
1505     background-image: url(Images/popupArrows.png);
1506     background-position: right center;
1507     background-repeat: no-repeat;
1508     color: inherit;
1509     border: 1px solid transparent;
1510 }
1511
1512 .network-graph-mode:focus {
1513     outline: none;
1514 }
1515
1516 .network-graph-mode:hover {
1517     -webkit-border-radius: 9px;
1518     background-color: rgba(0, 0, 0, 0.2);
1519     border: 1px solid white;
1520     -webkit-box-shadow: black 0px 1px 1px;
1521 }
1522
1523 .network-graph-legend {
1524     margin-top: -8px;
1525     text-align: center;
1526 }
1527
1528 .network-graph-legend-item {
1529     display: inline-block;
1530     font-weight: bold;
1531     margin-right: 15px;
1532     vertical-align: top;
1533 }
1534
1535 .network-graph-legend-label {
1536     display: inline-block;
1537     text-align: left;
1538 }
1539
1540 .network-graph-legend-header {
1541     font-size: 12px;
1542     text-transform: capitalize;
1543 }
1544
1545 .network-graph-legend-value {
1546     font-weight: normal;
1547     font-size: 10px;
1548 }
1549
1550 .network-graph-legend-swatch {
1551     vertical-align: top;
1552     margin-top: 1px;
1553     margin-right: 3px;
1554 }
1555
1556 .network-summary-graph {
1557     vertical-align: middle;
1558 }
1559
1560 .tip-button {
1561     background-image: url(Images/tipIcon.png);
1562     border: none;
1563     width: 16px;
1564     height: 16px;
1565     float: right;
1566     background-color: transparent;
1567     margin-top: 1px;
1568 }
1569
1570 .tip-button:active {
1571     background-image: url(Images/tipIconPressed.png);
1572 }
1573
1574 .tip-balloon {
1575     position: absolute;
1576     left: 145px;
1577     top: -5px;
1578     z-index: 1000;
1579     border-width: 51px 15px 18px 37px;
1580     -webkit-border-image: url(Images/tipBalloon.png) 51 15 18 37;
1581     width: 265px;
1582 }
1583
1584 .tip-balloon.bottom {
1585     position: absolute;
1586     left: 145px;
1587     top: auto;
1588     bottom: -7px;
1589     z-index: 1000;
1590     border-width: 18px 15px 51px 37px;
1591     -webkit-border-image: url(Images/tipBalloonBottom.png) 18 15 51 37;
1592 }
1593
1594 .tip-balloon-content {
1595     margin-top: -40px;
1596     margin-bottom: -2px;
1597     margin-left: 2px;
1598 }
1599
1600 .tip-balloon.bottom .tip-balloon-content {
1601     margin-top: -10px;
1602     margin-bottom: -35px;
1603 }