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