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