Source/WebCore/inspector/front-end/inspector.css

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