All examples By author By category About

esironal

Full window Github gist

ChromeDevTools Theme

<!--
Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions
are met:

1.  Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
2.  Redistributions in binary form must reproduce the above copyright
notice, this list of conditions and the following disclaimer in the
documentation and/or other materials provided with the distribution.
3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
its contributors may be used to endorse or promote products derived
from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<style type="text/css">
/*
 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.
 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
 * Copyright (C) 2011 Google Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 * 1. Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
 * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 
 .tabbed-pane {
 -webkit-box-orient: vertical;
 display: -webkit-box;
 height: 100%;
}

.tabbed-pane-content {
    -webkit-box-flex: 1;
    position: relative;
    overflow: auto;
}

.tabbed-pane-content.has-no-tabs {
    background-color: lightgray;
}

.tabbed-pane-header {
    height: 23px;
    border-bottom: 1px solid rgb(163, 163, 163);
    overflow: hidden;
    width: 100%;
}

.tabbed-pane-header-contents {
    margin: 0 10px;
}

.tabbed-pane-header-tabs {
    float: left;
}

.tabbed-pane-header-tab {
    float: left;
    margin-top: 2px;
    font-size: 11px;
    font-weight: bold;
    color: rgb(46, 46, 46);
    background: transparent;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
    vertical-align: middle;
    padding: 3px 4px 2px 4px;
    height: 21px;
    border: 1px solid transparent;
    border-bottom: none;
    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tabbed-pane-header-tab.measuring {
    visibility: hidden;
}

.tabbed-pane-header-tab.selected {
    background-color: white;
    border: 1px solid rgb(163, 163, 163);
    border-bottom: none;
}

.tabbed-pane-header .tabbed-pane-header-tab-title {
    vertical-align: top;
}

.tabbed-pane-header-tab-close-button {
    font-family: Arial, monospace;
    position: relative;
    bottom: 1px;
    opacity: 0;
    padding-left: 3px;
    font-size: 14px;
    color: rgb(80, 80, 80);
}

.tabbed-pane-header-tab:hover .tabbed-pane-header-tab-close-button {
    opacity: 0.5;
}

.tabbed-pane-header-tab:hover .tabbed-pane-header-tab-close-button:hover {
    opacity: 1.0;
}

.tabbed-pane-header-tab:hover .tabbed-pane-header-tab-close-button:active {
    opacity: 0.7;
}

.tabbed-pane-header-tab.selected .tabbed-pane-header-tab-close-button {
    opacity: 0.5;
}

.tabbed-pane-header-tab.selected .tabbed-pane-header-tab-close-button:hover {
    opacity: 1.0;
}

.tabbed-pane-header-tab.selected .tabbed-pane-header-tab-close-button:active {
    opacity: 0.7;
}

.tabbed-pane-header-tabs-drop-down-container {
    float: left;
    position: relative;
    font-size: 16px;
    vertical-align: bottom;
    top: 3px;
    padding-left: 3px;
}

.tabbed-pane-header-tabs-drop-down-container.measuring {
    visibility: hidden;
}

.tabbed-pane-header-tabs-drop-down {
    position: relative;
    opacity: 0.7;
    color: rgb(30, 30, 30);
}

.tabbed-pane-header-tabs-drop-down:hover {
    opacity: 1.0;
}

.tabbed-pane-header-tabs-drop-down:active {
    opacity: 0.8;
}

select.tabbed-pane-header-tabs-drop-down-select {
 position: absolute;
 top: 0px;
 right: 0px;
 bottom: 0px;
 left: 0px;
 opacity: 0;
 border: none;
 margin: 0;
 -webkit-appearance: none;
}
 </style><style type="text/css">.help-window-outer {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 2000;
}

.help-window-main {
    max-height: 100%;
    color: white;
    background-color: rgba(17, 17, 17, 0.85);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    border-top-width: 0;
    border-radius: 10px;
}

.help-window-caption {
    border-bottom: solid 1px rgb(153, 153, 153);
    margin: 0 8px;
    padding: 0 2px;
    line-height: 28px;
}

.help-window-title {
    font-size: 16px;
    margin: 0;
    padding-top: 1px;
    margin-bottom: -1px;
}

.help-content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: 11px;
    -webkit-box-flex: 1;
    margin: 8px;
    padding: 0 4px;
    font-size: 13px;
}

.help-window-main ::-webkit-scrollbar {
    width: 11px;
}

.help-window-main ::-webkit-scrollbar-corner,
.help-window-main ::-webkit-resizer {
    display: none;
}

.help-window-main ::-webkit-scrollbar-thumb:vertical {
    background: -webkit-gradient(linear, left top, right top, from(rgb(128, 128, 128)), to(rgb(128, 128, 128)), color-stop(40%, rgb(96, 96, 96)));
    border-radius: 5px;
    min-height: 20px;
}

.help-window-main ::-webkit-scrollbar-thumb:vertical:hover,
.help-window-main ::-webkit-scrollbar-thumb:vertical:active {
    background: -webkit-gradient(linear, left top, right top, from(rgb(176, 176, 176)), to(rgb(176, 176, 176)), color-stop(40%, rgb(144, 144, 144)));
}

.help-window-main ::-webkit-scrollbar-track:vertical {
    background: -webkit-gradient(linear, left top, right top, from(rgb(10, 10, 10)), to(rgb(32, 32, 32)), color-stop(25%, rgb(32, 32, 32)));
    border-radius: 5px;
}

.help-close-button {
    border: 0;
    padding: 0;
    font-size: 14px;
    color: rgb(222, 222, 222);
    background: -webkit-gradient(radial, 30% 30%, 1, 50% 50%, 8, from(rgb(144, 144, 144)), to(rgb(96, 96, 96)));
    border-radius: 8px;
    height: 16px;
    width: 16px;
    line-height: 12px;
    position: absolute;
    top: 6px;
    right: 6px;
}

#settings-screen .help-close-button {
    top: 8px;
    right: 8px;
}

body.dock-to-bottom .help-content {
    margin-bottom: 8px;
}

.help-close-button:hover {
    color: white;
}

body.platform-mac .help-window-main .tabbed-pane-header-contents {
    margin-left: 27px;
}

body.platform-mac .help-window-main .help-window-title {
    margin-left: 18px;
}

.help-container {
    width: 100%;
    -webkit-user-select: auto;
    -webkit-column-width: 470px;
}

body.platform-mac .settings-tab.help-container {
    -webkit-column-width: 430px;
}

body.platform-mac .help-container {
    -webkit-column-width: 330px;
}

.help-block {
    display: block;
    padding-bottom: 9px;
    width: 470px;
    -webkit-column-break-inside: avoid;
}

body.platform-mac .settings-tab .help-block {
    width: 430px;
}

#drawer-contents .settings-tab {
    padding-left: 12px;
}

.settings-tab.help-container {
    -webkit-column-width: 410px;
}

.settings-tab .help-block {
    width: 410px;
}

.help-line {
    padding-bottom: 3px;
}

.help-key-cell {
    display: inline-block;
    width: 270px;
    text-align: right;
}

body.platform-mac .help-key-cell {
    width: 120px;
}

.help-cell {
    display: inline;
}

.help-section-title {
    font-weight: bold;
    color: inherit;
}

.help-key {
    color: black;
    font-weight: bold;
}

body.platform-mac .help-key {
    font-family: Lucida Grande, sans-serif;
}

.help-combine-keys, .help-key-delimiter {
    color: black;
    font-size: 9px;
}

.help-combine-keys {
    margin: 0 0.3em;
}

.help-key-delimiter {
    margin: 0 0.5em;
}

.help-content p {
    margin: 3px 0;
}

.help-content fieldset {
    border: none;
    margin-left: 7px;
}

body.platform-mac .settings-tab.help-content fieldset {
    margin-left: 10px;
}

.help-content fieldset p {
    border-left: 1px solid rgb(128,128,128);
    margin: 0 0 0 6px;
    padding-left: 3px;
}

.help-content fieldset label {
    padding-right: 4px;
}

.help-content p.help-section {
    margin: 0 0 15px 0;
}

.settings-experiments-warning-subsection-warning {
    color: rgb(200, 0, 0);
}

.settings-experiments-warning-subsection-message {
    color: inherit;
}

#resolution-override-section {
    margin-left: 13px;
}

.help-content input[type=checkbox] {
    height: 13px;
    width: 13px;
    margin: 0 7px 0 0;
    vertical-align: -2px;
}

body.platform-mac .help-content input[type=checkbox] {
    vertical-align: -1px;
}

.help-content input[type=radio] {
    vertical-align: -2px;
}

body.platform-mac .help-content input[type=radio] {
    vertical-align: -1px;
}

.help-content select {
    background-color: rgb(64, 64, 64);
    color: white;
    border-color: black;
    padding: 0 4px;
}

.help-content select:disabled {
    background-color: rgb(32, 32, 32);
    color: graytext;
}

.help-content option {
    background-color: #EEEEEE;
    color: black;
}

#settings-screen .help-window-main,
#drawer-contents .help-window-main {
    color: rgb(48, 57, 66);
    background-color: white;
    border-radius: 0;
}

#settings-screen .help-window-main {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    height: initial;
    padding: 21px 0 0 21px;
    box-shadow: 1px 1px 5px 2px rgba(128, 128, 128, 0.7);
}

#settings-screen .help-window-label {
    font-size: 18px;
    color: inherit;
    padding-top: 1px;
}

#drawer-contents .help-container-wrapper {
    top: 32px;
}

.help-container-wrapper {
    position: absolute;
    top: 60px;
    left: 5px;
    right: 0;
    bottom: 0;
    overflow: auto;
}

#settings-screen .tabbed-pane-header {
    border: none transparent;
    height: auto;
    width: 110px;
    position: relative;
    top: 14px;
}

#settings-screen .tabbed-pane-header-contents {
    margin: 0;
}

#settings-screen .tabbed-pane-header-tabs {
    padding-top: 5px;
    width: 100px;
}

#settings-screen .tabbed-pane-header-tab {
    background-color: transparent;
    border: none transparent;
    cursor: pointer;
    font-weight: normal;
    text-shadow: none;
    color: #999999;
    height: 22px;
    font-size: 13px;
    padding-left: 0;
}

#settings-screen .tabbed-pane-header-tab.selected {
    color: inherit;
}

#settings-screen .tabbed-pane-content,
#drawer-contents .tabbed-pane-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 8px;
}

#drawer-contents .tabbed-pane-content {
    padding: 0 4px;
}

#settings-screen .tabbed-pane-content {
    left: 120px;
}

#drawer-contents .tabbed-pane-content {
    left: 0;
}

.settings-tab.help-content {
    margin: 0;
    padding: 0;
}

.settings-tab input:not([type]), .settings-tab input[type="text"] {
    border: 1px solid rgb(213, 213, 213);
    border-radius: 2px;
    color: #444444;
    font: inherit;
    padding: 3px;
}

.settings-tab input.numeric {
    text-align: right;
}

.settings-tab-container header {
    padding: 14px 0;
    border-bottom: 1px solid #EEEEEE;
}

#drawer-contents .settings-tab-container header {
    padding: 0;
}

#tab-shortcuts {
    margin-top: 25px !important;
}

#experiments-tab-content .help-container {
    -webkit-column-width: 470px;
}

#experiments-tab-content .help-block {
    width: 470px;
}

.settings-tab-container header > h3 {
    font-size: 18px;
    font-weight: normal;
    margin: 0;
    padding-bottom: 3px;
}

.settings-tab .help-section-title {
    color: black;
}

.settings-tab .help-block label {
    font-size: 14px;
}

.settings-tab .help-block fieldset:not(.toplevel) label {
    font-size: 13px;
}

.settings-tab .help-block fieldset:disabled label:hover,
.settings-tab .help-block fieldset.toplevel label:hover {
    color: inherit;
}

.settings-tab .help-block label:hover {
    color: black;
}

.settings-tab p {
    margin: 10px 0;
}

.settings-tab fieldset p {
    border-left: none transparent;
    padding: 2px 0 2px 3px;
}

.settings-tab select {
    background-color: #FAFAFA;
    border-color: rgb(213, 213, 213);
    border-radius: 2px;
    color: inherit;
    padding: 0 4px;
}

.settings-tab select:disabled {
    background-color: rgb(221, 221, 221);
}

.settings-tab .file-systems-editor input.file-system-path {
    width: 383px;
}

.settings-tab .file-mappings-editor .workspace-settings-row input {
    width: 190px;
}

.settings-tab .file-mappings-editor .workspace-settings-row input.file-mapping-url {
    margin-right: 3px;
}

#workspace-tab-content .button:hover {
    opacity: 1.0 !important;
}

#workspace-tab-content .workspace-settings-row:hover .button {
    visibility: visible;
    opacity: 0.4;
}

#workspace-tab-content .workspace-settings-row .button {
    width: 10px;
    height: 10px;
    border: none;
    -webkit-appearance: none;
    background-color: transparent;
    visibility: hidden;
    background-position: center;
    margin: 0 0 0 4px;
}

#workspace-tab-content .workspace-settings-row .remove-button {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/deleteIcon.png);
}

#workspace-tab-content .workspace-settings-row .add-button {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/addIcon.png);
}

#workspace-tab-content .workspace-settings-row .file-system-add-button {
    color: gray;
    border: none;
    border-bottom: 1px transparent solid;
    -webkit-appearance: none;
    background: transparent;
}

#workspace-tab-content .workspace-settings-row .file-system-add-button:hover {
    border-bottom: 1px gray dashed;
}

/*
 * Copyright (C) 2011 Google Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 * 1. Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *
 * 2. Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY GOOGLE INC. AND ITS CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL GOOGLE INC.
 * OR ITS CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

.split-view {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.split-view-contents {
    position: absolute;
    overflow: auto;
    cursor: default;
}

.split-view-contents.split-view-contents-vertical {
    top: 0;
    bottom: 0;
}

.split-view-contents.split-view-contents-horizontal {
    left: 0;
    right: 0;
}

.split-view-sidebar-left {
    border-right: 1px solid rgb(64%, 64%, 64%);
}

.split-view-sidebar-left.maximized {
    border-right: none;
}

.split-view-sidebar-right {
    border-left: 1px solid rgb(64%, 64%, 64%);
}

.split-view-sidebar-right.maximized {
    border-right: none;
}

.split-view-sidebar-top {
    border-bottom: 1px solid rgb(64%, 64%, 64%);
}

.split-view-sidebar-top.maximized {
    border-bottom: none;
}

.split-view-sidebar-bottom {
    border-top: 1px solid rgb(64%, 64%, 64%);
}

.split-view-sidebar-bottom.maximized {
    border-top: none;
}

.split-view-resizer.split-view-resizer-vertical {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 1500;
    cursor: ew-resize;
}

.split-view-resizer.split-view-resizer-horizontal {
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 1500;
    cursor: ns-resize;
}

.sidebar-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: white;
    border-right: 1px solid gray;
    -webkit-box-shadow: rgb(90,90,90) 20px 0px 50px -25px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.sidebar-overlay-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 500;
    cursor: ew-resize;
}

/*
 * Copyright (C) 2011 Google Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Google Inc. nor the names of its
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

.suggest-box {
    position: absolute;
    background-color: #FFFFFF;
    display: block;
    border: 1px solid black;
    padding: 2px;
    z-index: 100;
}

.suggest-box .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.suggest-box-content-item {
    padding: 1px;
    margin: 0;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid transparent;
}

.suggest-box-content-item .prefix {
    font-weight: bold;
}

.suggest-box-content-item.selected {
    background-color: rgb(212, 212, 212);
}

.suggest-box-content-item:hover:not(.selected) {
    border: 1px solid rgb(204, 204, 204);
}

/*
 * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.
 * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 * 1. Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 * notice, this list of conditions and the following disclaimer in the
 * documentation and/or other materials provided with the distribution.
 * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of
 * its contributors may be used to endorse or promote products derived
 * from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

#elements-content {
    padding-left: 0;
}

#elements-content > ol {
    display: inline-block;
    min-height: 100%;
}

#elements-content .editing {
    margin-left: 8px;
}

#elements-content .elements-gutter-decoration {
    position: absolute;
    left: 1px;
    margin-top: 2px;
    height: 8px;
    width: 8px;
    border-radius: 4px;
    border: 1px solid orange;
    background-color: orange;
}

#elements-content .elements-gutter-decoration.elements-has-decorated-children {
    opacity: 0.5;
}

.elements-tree-editor {
    -webkit-user-select: text;
    -webkit-user-modify: read-write-plaintext-only;
}

.metrics {
    padding: 8px;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}

.metrics .label {
    position: absolute;
    font-size: 10px;
    color: black;
    margin-left: 3px;
    padding-left: 2px;
    padding-right: 2px;
}

.metrics .position {
    border: 1px rgb(66%, 66%, 66%) dotted;
    background-color: white;
    display: inline-block;
    text-align: center;
    padding: 3px;
    margin: 3px;
}

.metrics .margin {
    border: 1px dashed;
    background-color: white;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
    margin: 3px;
}

.metrics .border {
    border: 1px black solid;
    background-color: white;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
    margin: 3px;
}

.metrics .padding {
    border: 1px grey dashed;
    background-color: white;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
    margin: 3px;
}

.metrics .content {
    position: static;
    border: 1px gray solid;
    background-color: white;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
    margin: 3px;
    min-width: 80px;
    text-align: center;
    overflow: visible;
}

.metrics .content span {
    display: inline-block;
}

.metrics .editing {
    position: relative;
    z-index: 100;
}

.metrics .left {
    display: inline-block;
    vertical-align: middle;
}

.metrics .right {
    display: inline-block;
    vertical-align: middle;
}

.metrics .top {
    display: inline-block;
}

.metrics .bottom {
    display: inline-block;
}

.styles-section {
    padding: 2px 2px 4px 4px;
    min-height: 18px;
    white-space: nowrap;
    -webkit-background-origin: padding;
    -webkit-background-clip: padding;
    -webkit-user-select: text;
}

.styles-section:not(.first-styles-section) {
    border-top: 1px solid rgb(191, 191, 191);
}

.styles-section.read-only {
    background-color: rgb(240, 240, 240);
}

.styles-section .properties li.not-parsed-ok {
    margin-left: 0px;
}

.styles-section.computed-style .properties li.not-parsed-ok {
    margin-left: -6px;
}

.styles-section .properties li.not-parsed-ok img.exclamation-mark {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/warningIcon.png);
    opacity: 0.75;
    position: relative;
    float: left;
    width: 12px;
    height: 10px;
    margin: 0 6px 0 0;
    left: -38px; /* outdent to compensate for the top-level property indent */
    padding-left: 2px;
    vertical-align: baseline;
    -webkit-user-select: none;
    cursor: default;
    z-index: 1;
}

.styles-section.computed-style .properties li.not-parsed-ok img.exclamation-mark {
    left: 0;
}

.styles-section .header {
    white-space: nowrap;
    -webkit-background-origin: padding;
    -webkit-background-clip: padding;
}

.styles-section .header .title {
    word-wrap: break-word;
    white-space: normal;
}

.styles-section .header .title .media, .styles-section .header .title .media .subtitle {
    color: rgb(128, 128, 128);
    overflow: hidden;
}

.styles-section .header .subtitle {
    color: rgb(85, 85, 85);
    float: right;
    margin-left: 5px;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.styles-section .header .subtitle a {
    color: inherit;
}

.styles-section .selector {
    color: #777;
}

.styles-section .selector-matches {
    color: black;
}

.styles-section a[data-uncopyable] {
    display: inline-block;
}

.styles-section a[data-uncopyable]::before {
    content: attr(data-uncopyable);
    text-decoration: underline;
}

.styles-section .properties {
    display: none;
    margin: 0;
    padding: 2px 4px 0 6px;
    list-style: none;
    clear: both;
}

.styles-section.matched-styles .properties {
    padding-left: 0;
}

.styles-section.no-affect .properties li {
    opacity: 0.5;
}

.styles-section.no-affect .properties li.editing {
    opacity: 1.0;
}

.styles-section.expanded .properties {
    display: block;
}

.styles-section .properties li {
    margin-left: 12px;
    padding-left: 22px;
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: auto;
}

.styles-section.computed-style.expanded .properties > li {
    padding-left: 0;
}

.styles-section.computed-style.expanded .properties > li .webkit-css-property {
    margin-left: 0;
}

.styles-section .properties li .webkit-css-property {
    margin-left: -22px; /* outdent the first line of longhand properties (in an expanded shorthand) to compensate for the "padding-left" shift in .styles-section .properties li */
}

.styles-section.expanded .properties > li {
    padding-left: 38px;
}

.styles-section .properties > li .webkit-css-property {
    margin-left: -38px; /* outdent the first line of the top-level properties to compensate for the "padding-left" shift in .styles-section .properties > li */
}

.styles-section .properties > li.child-editing {
    padding-left: 8px;
}

.styles-section .properties > li.child-editing .webkit-css-property {
    margin-left: 0;
}

.styles-section.matched-styles .properties li {
    margin-left: 0 !important;
}

.styles-section .properties li.child-editing {
    word-wrap: break-word !important;
    white-space: normal !important;
    padding-left: 0;
}

.styles-section .properties ol {
    display: none;
    margin: 0;
    -webkit-padding-start: 12px;
    list-style: none;
}

.styles-section .properties ol.expanded {
    display: block;
}

.styles-section .properties li.parent::before {
    content: none;
}

.styles-section .properties li.parent.expanded::before {
    content: none;
}

.styles-section.matched-styles .properties li.parent .expand-element {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
    margin-right: 1px;
    margin-left: -5px;
    opacity: 0.6;
}

.styles-section.matched-styles .properties li.parent.expanded .expand-element {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png);
}

.styles-section.computed-style .properties li.parent::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
    opacity: 0.75;
    float: left;
    width: 8px;
    height: 8px;
    margin-top: 0;
    padding-right: 3px;
    -webkit-user-select: none;
    cursor: default;
}

.styles-section.computed-style .properties li.parent.expanded::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png);
    margin-top: 1px;
}

.styles-section .properties li .info {
    padding-top: 4px;
    padding-bottom: 3px;
}

.styles-section.matched-styles:not(.read-only):hover .properties .enabled-button {
    visibility: visible;
}

.styles-section.matched-styles:not(.read-only) .properties li.disabled .enabled-button {
    visibility: visible;
}

.styles-section .properties .enabled-button {
    visibility: hidden;
    float: left;
    font-size: 10px;
    margin: 0;
    vertical-align: top;
    position: relative;
    z-index: 1;
    width: 18px;
    left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */
}

.styles-section.matched-styles .properties ol.expanded {
    margin-left: 16px;
}

.styles-section .properties .overloaded,
.styles-section .properties .inactive,
.styles-section .properties .disabled,
.styles-section .properties .not-parsed-ok {
    text-decoration: line-through;
}

.styles-section.computed-style .properties .disabled {
    text-decoration: none;
    opacity: 0.5;
}

.styles-section .properties .implicit, .styles-section .properties .inherited {
    opacity: 0.5;
}

.styles-element-state-pane {
    background-color: rgb(240, 240, 240);
    overflow: hidden;
    margin-top: -38px;
    -webkit-transition: margin-top 0.1s ease-in-out;
    padding-left: 2px;
}

.styles-element-state-pane.expanded {
    border-bottom: 1px solid rgb(189, 189, 189);
    margin-top: 0;
}

.styles-element-state-pane > table {
    width: 100%;
    border-spacing: 0;
}

.styles-element-state-pane input {
    margin: 2px;
    vertical-align: -2px;
}

.styles-selector {
    cursor: text;
}

.body .styles-section .properties .inherited {
    display: none;
}

.body.show-inherited .styles-section .properties .inherited {
    display: block;
}

.add-attribute {
    margin-left: 1px;
    margin-right: 1px;
    white-space: nowrap;
}

.section .event-bars {
    display: none;
}

.section.expanded .event-bars {
    display: block;
}

.event-bar {
    position: relative;
    margin-left: 10px;
}

.event-bar:first-child {
    margin-top: 1px;
}

.event-bars .event-bar .header {
    padding: 0 8px 0 18px;
    min-height: 16px;
    opacity: 1.0;
    white-space: nowrap;
    -webkit-background-origin: padding;
    -webkit-background-clip: padding;
}

.event-bars .event-bar .header .title {
    font-weight: normal;
    color: black;
    text-shadow: white 0 1px 0;
}

.event-bars .event-bar .header .subtitle {
    color: rgba(90, 90, 90, 0.75);
}

.event-bars .event-bar .header::before {
    position: absolute;
    top: 2px;
    left: 7px;
    width: 8px;
    height: 8px;
    opacity: 0.75;
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png) !important;
}

.event-bars .event-bar.expanded .header::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png) !important;
}

.image-preview-container {
    background: transparent;
    text-align: center;
}

.image-preview-container img {
    margin: 2px auto;
    max-width: 100px;
    max-height: 100px;
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/checker.png);
    -webkit-user-select: text;
    -webkit-user-drag: auto;
}

.crumbs {
    display: inline-block;
    pointer-events: auto;
    cursor: default;
    font-size: 11px;
    line-height: 19px;
    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
    color: rgb(20, 20, 20);
    margin-left: -1px;
    margin-top: -1px;
    padding-right: 12px;
}

.crumbs .crumb {
    height: 24px;
    border-width: 0 12px 0 2px;
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segment.png) 0 12 0 2;
    margin-right: -12px;
    padding-left: 18px;
    padding-right: 2px;
    white-space: nowrap;
    line-height: 23px;
    float: right;
}

.crumbs .crumb.collapsed > * {
    display: none;
}

.crumbs .crumb.collapsed::before {
    content: "\2026";
    font-weight: bold;
}

.crumbs .crumb.compact .extra {
    display: none;
}

.crumbs .crumb.start {
    padding-left: 7px;
}

.crumbs .crumb.end {
    border-width: 0 2px 0 2px;
    padding-right: 6px;
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentEnd.png) 0 2 0 2;
}

.crumbs .crumb.selected {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentSelected.png) 0 12 0 2;
    color: black;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
}

.crumbs .crumb.selected:hover {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentSelected.png) 0 12 0 2;
}

.crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentSelectedEnd.png) 0 2 0 2;
}

.crumbs .crumb:hover {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentHover.png) 0 12 0 2;
    color: black;
}

.crumbs .crumb.end:hover {
 -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentHoverEnd.png) 0 2 0 2;
}
</style>

/* dialog.css */

.dialog-glass-pane {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1900;
}

.dialog {
    position: absolute;
    
    padding: 10px;
    border-radius: 10px;
    border: 1px solid gray;

-webkit-box-shadow: rgb(40,40,40) 0px 0px 50px;
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E9E9E9), to(#CFCFCF));
    font-size: 11px;
    font-family: 'Lucida Grande', sans-serif;
}

.dialog-contents {
    width: 100%;
    height: 100%;

font-size: 11px;
    font-family: 'Lucida Grande', sans-serif;
}

.go-to-line-dialog input {
    font-size: 11px;
}

.go-to-line-dialog button {
    font-size: 11px;
    color: rgb(6, 6, 6);
    border: 1px solid rgb(165, 165, 165);
    background-color: rgb(237, 237, 237);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
    -webkit-border-radius: 12px;
    -webkit-appearance: none;

padding: 3px 20px;
    margin: 0 0 0 10px;
}

.go-to-line-dialog button:active {
    background-color: rgb(215, 215, 215);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
}

/* inspector.css */

input[type="search"]:focus, input[type="text"]:focus {
    outline: auto 5px -webkit-focus-ring-color;
}

.fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.hidden {
    display: none;
}

.nowrap {
    white-space: nowrap !important;
}

#toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
    padding-top: 1px;
    padding-left: 5px;
    border-bottom: 1px solid rgb(80, 80, 80);
    -webkit-box-orient: horizontal;
    -webkit-background-origin: padding;
    -webkit-background-clip: padding;
}

body.show-toolbar-icons #toolbar {
    height: 56px;
}

body.show-toolbar-icons.dock-to-bottom #toolbar {
    height: 34px;
}

body.inactive #toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(207, 207, 207)));
    border-bottom: 1px solid rgb(64%, 64%, 64%);
}

body.undocked.platform-mac-leopard #toolbar,
body.undocked.platform-mac-snowleopard #toolbar {
    background: transparent;
}

body.dock-to-bottom #toolbar {
    padding-top: 0;
    border-top: 1px solid rgb(100, 100, 100);
    cursor: ns-resize;
}

body.dock-to-bottom.port-qt #toolbar {
    cursor: auto;
}

body.dock-to-bottom.inactive #toolbar {
    border-top: 1px solid rgb(64%, 64%, 64%);
}

.toolbar-item {
    margin: 0;
    padding-right: 6px;
    background-color: transparent;
    border-style: none;
    border-color: transparent;
}

body:not(.show-toolbar-icons) .toolbar-item {
    height: 24px;
}

body.dock-to-bottom:not(.show-toolbar-icons) .toolbar-item.toggleable {
    padding: 0 11px;
}

body.dock-to-bottom:not(.show-toolbar-icons) .toolbar-item.toggleable.toggled-on {
    padding: 0 9px;
}

body.show-toolbar-icons .toolbar-item.toggleable {
    padding-top: 4px;
    padding-bottom: 4px;
}

body.show-toolbar-icons.dock-to-bottom .toolbar-item.toggleable {
    margin: 1px 0;
    padding-bottom: 2px;
}

.toolbar-item.toggleable.toggled-on {
    border-width: 0 2px 0 2px;
    padding-left: 4px;
    padding-right: 4px;
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/toolbarItemSelected.png) 0 2 0 2;
}

.toolbar-icon {
    display: none;
    width: 32px;
    height: 32px;
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/toolbarIcons.png);
    vertical-align: top;
}

body.dock-to-bottom .toolbar-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/toolbarIconsSmall.png);
}

body.show-toolbar-icons .toolbar-icon {
    display: inline-block;
}

body.dock-to-bottom .toolbar-icon.custom-toolbar-icon {
    background-position-x: -32px;
}

.toolbar-item:active .toolbar-icon {
    background-position-y: 32px;
}

body.dock-to-bottom .toolbar-item:active .toolbar-icon {
    background-position-y: 24px;
}

.toolbar-label {
    line-height: 22px;
    font-size: 11px;
    font-family: Lucida Grande, sans-serif;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
}

body.show-toolbar-icons .toolbar-label {
    line-height: 15px;
}
.toolbar-item.toggleable:active .toolbar-label {
    text-shadow: none;
}

body.show-toolbar-icons.dock-to-bottom .toolbar-label {
    display: inline-block;
    margin-left: 3px;
    top: 0;
}

body.dock-to-bottom #search-toolbar-label {
    display: none;
}

#toolbar-controls {
    float: right;
    display: -webkit-box;
    -webkit-box-align: center;
    height: 100%;
}

#toolbar-dropdown-arrow {
    font-size: 14px;
    font-weight: bold;
    border: 0;
    background-color: transparent;
    -webkit-border-radius: 5px;
    text-shadow: none;
    cursor: default;
    margin: 0;
    /* A line height of 0 allows precise text positioning using padding. */
    line-height: 0;
    padding: 11px 6px 11px;
}

#toolbar-dropdown-arrow.dropdown-visible {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(251, 251, 251, 0.9)), to(rgba(231, 231, 231, 0.9)));
}

#toolbar-dropdown-arrow:hover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(191, 191, 191, 0.7)), to(rgba(171, 171, 171, 0.5)));
}

#toolbar-dropdown-arrow:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(111, 111, 111, 0.8)), to(rgba(91, 91, 91, 0.8)));
}

#toolbar-dropdown {
    position: absolute;
    z-index: 1000;
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
    border: 1px solid rgb(128, 128, 128);
    background-color: inherit;
    background-image: inherit;
}

body.show-toolbar-icons #toolbar-dropdown {
    padding: 4px;
}

body.undocked.platform-mac-leopard #toolbar-dropdown,
body.undocked.platform-mac-snowleopard #toolbar-dropdown {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(191, 191, 191)), to(rgb(151, 151, 151)));
}

#toolbar-dropdown .scrollable-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: start;
    padding-right: 0;
}

#toolbar-dropdown .toolbar-item {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0);
}

body.show-toolbar-icons #toolbar-dropdown .toolbar-item {
    position: relative;
    left: -2px;
    margin: 0px 2px;
    padding: 4px;
}

#toolbar-dropdown .toolbar-item.toggleable.toggled-on {
    border: 1px solid rgba(100, 100, 120, 0.4);
    -webkit-border-image: none;
    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)));
}

#toolbar-dropdown .toolbar-item.toggleable:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(128, 128, 128, 0.6)), to(rgba(128, 128, 128, 0.3)), color-stop(20%, rgba(158, 158, 158, 0.2)), color-stop(80%, rgba(158, 158, 158, 0.1)));
}

#toolbar-dropdown .toolbar-icon {
    margin-right: 0.5em;
}

#toolbar-dropdown .toolbar-label {
    line-height: 22px;
    top: 0;
}

body.show-toolbar-icons #toolbar-dropdown .toolbar-label {
    line-height: 32px;
}

.scrollable-content {
    position: static;
    height: 100%;
    overflow-y: auto;
    width: 100%;
    margin-right: 12px;
    padding-right: 3px;
}

.scrollable-content::-webkit-scrollbar {
    width: 11px;
}

.scrollable-content::-webkit-scrollbar-corner,
.scrollable-content::-webkit-resizer {
    display: none;
}

.scrollable-content::-webkit-scrollbar-thumb:vertical {
    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)));
    border-radius: 5px;
    min-height: 20px;
}

.scrollable-content::-webkit-scrollbar-thumb:vertical:hover,
.scrollable-content::-webkit-scrollbar-thumb:vertical:active {
    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)));
}

.scrollable-content::-webkit-scrollbar-track:vertical {
    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)));
    border-radius: 5px;
}

.search-replace {
    -webkit-appearance: none;
    border: 0;
    padding: 0 2px;
    margin: 0;
    width: 165px;
}

.filter {
    -webkit-appearance: none;
    border: 0;
    padding: 0 2px;
    margin: 0;
    width: 251px;
}

.search-replace:focus {
    outline: none;
}

.toolbar-search {
    border-spacing: 1px;
}

.toolbar-search td {
    padding: 0 5px 0 0;
}

.toolbar-search-navigation-controls {
    position: absolute;
    top: 0;
    right: 0;
    height: 18px;
    background-image: -webkit-linear-gradient(rgb(228, 228, 228), rgb(206, 206, 206));
}

.toolbar-search-navigation {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: 4px 7px;
    border-left: 1px solid rgb(170, 170, 170);
    opacity: 0.3;
}

.toolbar-search-navigation.enabled {
    opacity: 1.0;
}

.toolbar-search input[type="checkbox"] {
    position: relative;
    margin-top: -1px;
    margin-left: 15px;
    top: 2px;
}

.toolbar-search button {
    border: 1px solid rgb(163, 163, 163);
    border-radius: 8px;
    margin: 0 0px;
    font-size: 11px;
    background-image: -webkit-linear-gradient(rgb(241, 241, 241), rgb(220, 220, 220));
    width: 100%;
}

.toolbar-search button:active {
    background-image: -webkit-linear-gradient(rgb(185, 185, 185), rgb(156, 156, 156));
}

.toolbar-search-control {
    display: inline-block;
    position: relative;
    background-color: white;
    border: 1px solid rgb(163, 163, 163);
    height: 20px;
    border-radius: 2px;
    padding-top: 1px;
}

.toolbar-replace-control {
    border: 1px solid rgb(163, 163, 163);
    height: 20px;
    border-radius: 2px;
    width: 100%;
}

.toolbar-search-navigation.enabled:active {
    background-position: 4px 7px, 0px 0px;
}

.toolbar-search-navigation.toolbar-search-navigation-prev {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchPrev.png);
    border-left: 1px solid rgb(163, 163, 163);
}

.toolbar-search-navigation.toolbar-search-navigation-prev.enabled:active {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchPrev.png), -webkit-linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
}

.toolbar-search-navigation.toolbar-search-navigation-next {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchNext.png);
    border-left: 1px solid rgb(230, 230, 230);
}

.toolbar-search-navigation.toolbar-search-navigation-next.enabled:active {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchNext.png), -webkit-linear-gradient(rgb(168, 168, 168), rgb(116, 116, 116));
}

.search-results-matches {
    display: inline-block;
    min-width: 50px;
    min-height: 10px;
    margin-right: 36px;
    text-align: right;
    font-size: 11px;
    padding: 0 4px;
    color: rgb(165, 165, 165);
}

.toolbar-item.elements .toolbar-icon {
    background-position-x: 0;
}

.toolbar-item.resources .toolbar-icon {
    background-position-x: -32px;
}

body.dock-to-bottom .toolbar-item.resources .toolbar-icon {
    background-position-x: -24px;
}

.toolbar-item.network .toolbar-icon {
    background-position-x: -64px;
}

body.dock-to-bottom .toolbar-item.network .toolbar-icon {
    background-position-x: -48px;
}

.toolbar-item.scripts .toolbar-icon {
    background-position-x: -96px;
}

body.dock-to-bottom .toolbar-item.scripts .toolbar-icon {
    background-position-x: -72px;
}

.toolbar-item.timeline .toolbar-icon {
    background-position-x: -128px;
}

body.dock-to-bottom .toolbar-item.timeline .toolbar-icon {
    background-position-x: -96px;
}

.toolbar-item.profiles .toolbar-icon {
    background-position-x: -160px;
}

body.dock-to-bottom .toolbar-item.profiles .toolbar-icon {
    background-position-x: -120px;
}

.toolbar-item.audits .toolbar-icon {
    background-position-x: -192px;
}

body.dock-to-bottom .toolbar-item.audits .toolbar-icon {
    background-position-x: -144px;
}

.toolbar-item.console .toolbar-icon {
    background-position-x: -224px;
}

body.dock-to-bottom .toolbar-item.console .toolbar-icon {
    background-position-x: -168px;
}

#close-button-left, #close-button-right {
    width: 14px;
    height: 14px;
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/closeButtons.png);
    background-position: 0 0;
}

#close-button-left:hover, #close-button-right:hover {
    background-position: 14px 0;
}

#close-button-left:active, #close-button-right:active {
    background-position: 28px 0;
}

.close-left {
    float: left;
}

body.undocked .toolbar-item.close-left, body.undocked .toolbar-item.close-right {
    display: none;
}

body.dock-to-bottom.port-qt .toolbar-item.close-left, body.dock-to-bottom.port-qt .toolbar-item.close-right {
    display: none;
}

body.platform-mac .toolbar-item.close-right {
    display: none;
}

body.remote .toolbar-item.close-left, body.remote .toolbar-item.close-right {
    display: none;
}

body:not(.platform-mac) .toolbar-item.close-left {
    display: none;
}

.toolbar-item.close-left, .toolbar-item.close-right {
  display: -webkit-box;
  -webkit-box-align: center;
  height: 100%;
  cursor: default;
}

#main {
    position: absolute;
    z-index: 1;
    top: 26px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: white;
}

body.show-toolbar-icons #main {
    top: 56px;
}

body.show-toolbar-icons.dock-to-bottom #main {
    top: 34px;
}

#main-panels {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 23px;
    overflow: hidden;
}

body.drawer-visible #main-panels {
    bottom: 24px;
}

#main-status-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.status-bar {
    white-space: nowrap;
    height: 23px;
    overflow: hidden;
    z-index: 12;
    background-image: -webkit-linear-gradient(rgb(253,253,253), rgb(230,230,230) 75%, rgb(230,230,230));
    border-top: 1px solid rgb(202, 202, 202);
    display: -webkit-flex;
}

.status-bar > div {
    display: inline-block;
    vertical-align: top;
    overflow: visible;
}

.status-bar-item {
    display: inline-block;
    pointer-events: auto;
    cursor: default;
    height: 24px;
    padding: 0;
    margin-left: -1px;
    margin-right: 0;
    vertical-align: top;
    border: 0 transparent none;
    background-color: transparent;
}

#floating-status-bar-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    border-bottom: 1px solid rgb(202, 202, 202);
    cursor: ns-resize;
    height: 24px;
}

body.drawer-visible #floating-status-bar-container {
    display: -webkit-flex;
}

#floating-status-bar-resizer {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/statusbarResizerVertical.png);
    margin-top: 7px;
    pointer-events: none;
    height: 8px;
}

#panel-status-bar {
    -webkit-flex: 1 0;
    display: -webkit-flex;
    pointer-events: none;
}

#panel-status-bar > div {
    width: 100%;
}

.status-bar-item:active {
    position: relative;
    z-index: 200;
}

.glyph {
    position: absolute;
    top: -1px;
    bottom: 1px;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 1;
}

.glyph.shadow {
    top: 0;
    bottom: 0;
    background-color: white !important;
    z-index: 0;
}

.long-click-glyph {
    background-color: rgba(0, 0, 0, 0.75);
    -webkit-mask-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/statusbarButtonGlyphs.png);
    -webkit-mask-position: -288px -48px;
    -webkit-mask-size: 320px 72px;
    z-index: 1;
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
.long-click-glyph {
    -webkit-mask-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/statusbarButtonGlyphs2x.png);
}
}

.long-click-glyph.shadow {
    top: 1px;
    background-color: white !important;
    z-index: 0;
}

button.status-bar-item {
    position: relative;
    width: 32px;
    border-left: 1px solid rgb(202, 202, 202);
    border-right: 1px solid rgb(202, 202, 202);
}

.status-bar button.status-bar-item .glyph {
    margin: 0 -1px;
}

.status-bar button.status-bar-item img {
    margin-top: 1px;
}

.status-bar select.status-bar-item:active,
.status-bar button.status-bar-item:active {
    background-color: rgb(163,163,163);
    border-left: 1px solid rgb(120, 120, 120);
    border-right: 1px solid rgb(120, 120, 120);
}

button.status-bar-item .glyph.shadow {
    background-color: rgba(255, 255, 255, 0.33) !important;
}

button.status-bar-item.toggled-on .glyph {
    background-color: rgb(66, 129, 235);
}

button.status-bar-item:disabled {
    opacity: 0.5;
    background-position: 0 0 !important;
}

button.status-bar-item.extension {
    background-image: none;
    background-color: auto;
}

.status-bar-select-container {
    display: inline-block;
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallDown.png);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 5px;
    padding-right: 10px;
    border-right: 5px solid transparent;
}

select.status-bar-item {
    min-width: 48px;
    font-weight: bold;
    color: rgb(48, 48, 48);
    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    padding: 0 15px 0 5px;
    margin-right: -15px;
    position: relative;
    top: -1px;
    height: 23px;
}

select.status-bar-item, select.status-bar-item:hover {
    border-left: 1px solid rgb(202, 202, 202);
    border-right: 1px solid rgb(202, 202, 202);
}

.status-bar-item > .glyph {
    -webkit-mask-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/statusbarButtonGlyphs.png);
    -webkit-mask-size: 320px 72px;
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
.status-bar-item > .glyph {
    -webkit-mask-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/statusbarButtonGlyphs2x.png);
}
}

button.dock-status-bar-item.status-bar-item.toggled-undock .glyph {
    -webkit-mask-position: 0 -48px;
}

button.dock-status-bar-item.status-bar-item.toggled-bottom .glyph {
    -webkit-mask-position: -32px -24px;
    background-color: rgba(0, 0, 0, 0.75);
}

button.dock-status-bar-item.status-bar-item.toggled-right .glyph {
    -webkit-mask-position: -256px -48px;
    background-color: rgba(0, 0, 0, 0.75);
}

body.undocked .alternate-status-bar-buttons-bar {
    margin-left: 1px;
}

.alternate-status-bar-buttons-bar {
    position: absolute;
    width: 31px;
    bottom: -3px;
    background: white;
}

.alternate-status-bar-buttons-bar .status-bar-item {
    height: 24px;
    margin-top: -1px;
    border: 1px solid rgb(202, 202, 202);
    border-bottom: 1px solid transparent;
}

.alternate-status-bar-buttons-bar .status-bar-item.emulate-active {
    background-color: rgb(163,163,163);
    border: 1px solid rgb(120, 120, 120);
    border-bottom: 1px solid transparent;
}

button.status-bar-item.settings-status-bar-item,
button.status-bar-item.settings-status-bar-item:active {
    border-right: 0 transparent none;
}

.settings-status-bar-item .glyph {
    -webkit-mask-position: -160px -24px;
}

body.remote .dock-status-bar-item,
body.port-qt .dock-status-bar-item {
    display: none;
}

.console-status-bar-item .glyph {
    -webkit-mask-position: -64px -24px;
}

.clear-status-bar-item .glyph {
    -webkit-mask-position: -64px 0;
}

#error-warning-count {
    padding: 5px 2px 6px 0px;
    font-size: 10px;
    height: 19px;
    cursor: pointer;
}

#error-warning-count:hover {
    border-bottom: 1px solid rgb(96, 96, 96);
}

#error-count-img {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/errorIcon.png);
    width: 10px;
    height: 10px;
    vertical-align: -1px;
    margin-right: 2px;
}

#error-count + #warning-count-img {
    margin-left: 6px;
}

#warning-count-img {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/warningIcon.png);
    width: 10px;
    height: 10px;
    vertical-align: -1px;
    margin-right: 2px;
}

#drawer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background-color: white;
}

#drawer-contents {
    position: absolute;
    top: 0;
    bottom: 24px;
    left: 0;
    right: 0;
}

body.drawer-visible #drawer {
    display: block;
}

body.platform-mac .monospace, body.platform-mac .source-code {
    font-size: 11px !important;
    font-family: Menlo, monospace;
}

body.platform-mac.platform-mac-tiger .monospace,
body.platform-mac.platform-mac-tiger .source-code {
    font-size: 10px !important;
    font-family: Monaco, monospace;
}

body.platform-windows .monospace, body.platform-windows .source-code {
    font-size: 12px !important;
    font-family: Consolas, Lucida Console, monospace;
}

body.platform-linux .monospace, body.platform-linux .source-code {
    font-size: 11px !important;
    font-family: dejavu sans mono, monospace;
}

#console-view {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}

#console-messages {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2px 0;
    overflow-y: overlay;
    word-wrap: break-word;
    -webkit-user-select: text;
    -webkit-text-size-adjust: auto;
}

#console-prompt {
    clear: right;
    position: relative;
    border-top: 1px solid rgb(240, 240, 240);
    padding: 1px 22px 1px 0px;
    margin-left: 24px;
    min-height: 16px;
    white-space: pre-wrap;
    -webkit-user-modify: read-write-plaintext-only;
}

#console-prompt::before {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/userInputIcon.png);
}

.console-user-command-result.console-log-level::before {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/userInputResultIcon.png);
}

.console-message, .console-user-command {
    clear: right;
    position: relative;
    border-top: 1px solid rgb(240, 240, 240);
    padding: 1px 22px 1px 0px;
    margin-left: 24px;
    min-height: 16px;
}

.console-mesage:first-child {
    border-top: none;
}

.console-adjacent-user-command-result {
    border-bottom: none;
}

.console-adjacent-user-command-result + .console-user-command-result.console-log-level::before {
    background-image: none;
}

.console-message::before, .console-user-command::before, #console-prompt::before, .console-group-title::before {
    position: absolute;
    display: block;
    content: "";
    left: -17px;
    top: 0.8em;
    width: 10px;
    height: 10px;
    margin-top: -6px;
    -webkit-user-select: none;
}

.console-message .bubble {
    display: inline-block;
    height: 14px;
    background-color: rgb(128, 151, 189);
    vertical-align: middle;
    white-space: nowrap;
    padding: 1px 4px;
    margin-top: -1px;
    margin-right: 4px;
    margin-left: -18px;
    text-align: left;
    font-size: 11px;
    line-height: normal;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-shadow: none;
    color: white;
    -webkit-border-radius: 7px;
}

.console-message-text {
    white-space: pre-wrap;
}

.repeated-message.console-error-level::before, .repeated-message.console-warning-level:before, .repeated-message.console-debug-level:before {
    visibility: hidden;
}

.repeated-message .outline-disclosure, .repeated-message > .console-message-text {
    -webkit-flex: 1;
}

.console-info {
    color: rgb(128, 128, 128);
    font-style: italic;
}

.console-group .console-group > .console-group-messages {
    margin-left: 16px;
}

.console-group-title {
    font-weight: bold;
}

.console-group-title::before {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallDown.png);
    top: 0.6em;
    width: 11px;
    height: 12px;
    left: -16px;
    position: absolute;
}

.console-group.collapsed .console-group-title::before {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRight.png);
}

.console-group.collapsed > .console-group-messages {
    display: none;
}

.console-group {
    position: relative;
}

.console-group-bracket {
    position:absolute;
    top: 15px;
    left: 13px;
    bottom: 5px;
    width: 3px;
    border-style: solid;
    border-color: #A3A3A3;
    border-width: 0px 0px 1px 1px;
}

.console-group.collapsed > .console-group-bracket {
    display: none;
}

.console-error-level .console-message-text, .console-error-level .section .header .title {
    color: red !important;
}

.console-debug-level .console-message-text {
    color: blue;
}

.console-debug-level::before {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchSmallBrightBlue.png);
}

.console-error-level::before {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/errorIcon.png);
}

.console-warning-level::before {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/warningIcon.png);
    margin-top: -7px;
}

.console-user-command .console-message {
    margin-left: -24px;
    padding-right: 0;
    border-bottom: none;
}

.console-user-command::before {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/userInputPreviousIcon.png);
}

.console-user-command > .console-message-text {
    color: rgb(0, 128, 255);
}

#console-messages a {
    color: rgb(33%, 33%, 33%);
    cursor: pointer;
}

#console-messages a:hover {
    color: rgb(15%, 15%, 15%);
}

ol.watch-expressions > li.hovered {
    background-color: #F0F0F0;
}

.console-message-url {
    float: right;
    text-align: right;
    max-width: 100%;
    margin-left: 4px;
}

.console-group-messages .section {
    margin: 0 0 0 12px !important;
}

.console-group-messages .section .header {
    padding: 0 8px 0 0;
    background-image: none;
    border: none;
    min-height: 0;
}

.console-group-messages .section .header::before {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 8px;
    height: 8px;
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
}

.console-group-messages .section.expanded .header::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png);
}

.console-group-messages .section .header .title {
    color: black;
    font-weight: normal;
    line-height: 13px;
}

.console-group-messages .section .properties li .info {
    padding-top: 0;
    padding-bottom: 0;
    color: rgb(60%, 60%, 60%);
}

.console-group-messages .outline-disclosure {
    padding-left: 0;
}

.console-group-messages .outline-disclosure > ol {
    padding: 0 0 0 12px !important;
}

.console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol {
    font-size: inherit;
    line-height: 12px;
}

.console-group-messages .outline-disclosure.single-node li {
    padding-left: 2px;
}

.console-group-messages .outline-disclosure li .selection {
    margin-left: -6px;
    margin-right: -6px;
}

.console-group-messages .add-attribute {
    display: none;
}

.console-formatted-object, .console-formatted-node, .console-formatted-array {
    position: relative;
    display: inline-block;
    vertical-align: top;
    color: black;
}

.console-formatted-node:hover {
    background-color: rgba(56, 121, 217, 0.1);
}

.console-formatted-object .section, .console-formatted-node .section, .console-formatted-array .section {
    position: static;
}

.console-formatted-object .properties, .console-formatted-node .properties {
    padding-left: 0 !important;
}

.console-formatted-number {
    color: rgb(28, 0, 207);
}

.console-formatted-string, .console-formatted-regexp {
    color: rgb(196, 26, 22);
    white-space: pre;
}

.console-formatted-null, .console-formatted-undefined {
    color: rgb(128, 128, 128);
}

.console-formatted-preview-node,
.section .console-formatted-node {
    color: rgb(136, 18, 128);
}

.console-object-preview {
    font-style: italic;
}

.object-info-state-note {
    display: none;
    width: 11px;
    height: 11px;
    background-color: rgb(179, 203, 247);
    color: white;
    text-align: center;
    border-radius: 3px;
    line-height: 13px;
    margin: 0 6px;
    font-size: 9px;
}

.object-info-state-note::before {
    content: "i";
}

.section.expanded .object-info-state-note {
    display: inline-block;
}

.error-message {
    color: red;
}

.error-input {
    background-color: rgb(220, 130, 130);
}

.auto-complete-text, .editing .auto-complete-text {
    color: rgb(128, 128, 128) !important;
    -webkit-user-select: none;
    -webkit-user-modify: read-only;
}

.panel {
    display: none;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.panel.visible {
    display: block;
}

iframe.extension {
    width: 100%;
    height: 100%;
}

iframe.panel.extension {
    display: block;
    height: 100%;
}

.webkit-line-gutter-backdrop {
    /* Keep this in sync with view-source.css (.webkit-line-gutter-backdrop) */
    width: 31px;
    background-color: rgb(240, 240, 240);
    border-right: 1px solid rgb(187, 187, 187);
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    height: 100%
}

.outline-disclosure li.hovered:not(.selected) .selection {
    display: block;
    left: 3px;
    right: 3px;
    background-color: rgba(56, 121, 217, 0.1);
    -webkit-border-radius: 5px;
}

.outline-disclosure li.highlighted .highlight {
    background-color: rgb(255, 230, 179);
    -webkit-border-radius: 4px;
    padding-bottom: 2px;
    margin-bottom: -2px;
}

.outline-disclosure li.selected.highlighted .highlight {
    background-color: transparent;
    padding-bottom: 0;
    margin-bottom: 0;
}

.outline-disclosure li .selection {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    height: 15px;
    z-index: -1;
}

.outline-disclosure li.selected .selection {
    display: block;
    background-color: rgb(212, 212, 212);
}

.outline-disclosure li.elements-drag-over .selection {
    display: block;
    margin-top: -2px;
    border-top: 2px solid rgb(56, 121, 217);
}

.outline-disclosure ol:focus li.selected .selection {
    background-color: rgb(56, 121, 217);
}

.outline-disclosure ol.search-match-not-found li.selected .selection {
    border: 1px solid rgb(56, 121, 217);
    background-color: white;
}

.outline-disclosure {
    font-size: 11px;
}

.outline-disclosure > ol {
    position: relative;
    padding: 2px 6px !important;
    margin: 0;
    color: black;
    cursor: default;
    min-width: 100%;
}

.outline-disclosure, .outline-disclosure ol {
    list-style-type: none;
    -webkit-padding-start: 12px;
    margin: 0;
}

.source-code {
    font-family: monospace;
    font-size: 10px !important;
    white-space: pre-wrap;
}

.outline-disclosure li {
    padding: 0 0 0 14px;
    margin-top: 1px;
    margin-left: -2px;
    word-wrap: break-word;
}

.outline-disclosure ol:focus li.selected {
    color: white;
}

.outline-disclosure ol.search-match-found li.selected {
    color: white;
}

.outline-disclosure ol:focus li.selected * {
    color: inherit;
}

.outline-disclosure ol.search-match-found li.selected * {
    color: inherit;
}

.outline-disclosure li.parent {
    margin-left: -12px
}

.outline-disclosure li .webkit-html-tag.close {
    margin-left: -12px;
}

.webkit-html-tag.shadow, .webkit-html-fragment.shadow {
    opacity: 0.6;
}

.outline-disclosure li.parent::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
    float: left;
    width: 8px;
    height: 8px;
    padding-right: 2px;
}

.outline-disclosure li.parent::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
}

.outline-disclosure ol:focus li.parent.selected::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleWhite.png);
}

.outline-disclosure ol.search-match-found li.parent.selected::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleWhite.png);
}

.outline-disclosure li.parent.expanded::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png);
}

.outline-disclosure ol:focus li.parent.expanded.selected::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleWhite.png);
}

.outline-disclosure ol.search-match-found li.parent.expanded.selected::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleWhite.png);
}

.outline-disclosure ol.children {
    display: none;
}

.outline-disclosure ol.children.expanded {
    display: block;
}

.placard {
    position: relative;
    margin-top: 1px;
    padding: 3px 8px 4px 18px;
    min-height: 18px;
    white-space: nowrap;
}

.placard:nth-of-type(2n) {
    background-color: rgb(234, 243, 255);
}

.placard.selected {
    border-top: 1px solid rgb(172, 172, 172);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(182, 182, 182)), to(rgb(162, 162, 162)));
    -webkit-background-origin: padding;
    -webkit-background-clip: padding;
}

:focus .placard.selected {
    border-top: 1px solid rgb(70, 103, 215);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(56, 121, 217)));
}

.placard .title {
    color: black;
    font-weight: normal;
    word-wrap: break-word;
    white-space: normal;
}

.placard.selected .title {
    color: white;
    font-weight: bold;
}

.placard .subtitle {
    float: right;
    font-size: 10px;
    margin-left: 5px;
    color: rgba(0, 0, 0, 0.7);
    text-overflow: ellipsis;
    overflow: hidden;
}

.placard.selected .subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.placard .subtitle a {
    color: inherit;
}

.section {
    position: relative;
    margin-top: 1px;
}

.events-pane .section {
    margin: 0;
}
.events-pane .section:not(:nth-of-type(1)) {
    border-top: 1px solid rgb(231, 231, 231);
}

.section .header {
    color: black;
    padding: 0 8px 0 18px;
    min-height: 18px;
    white-space: nowrap;
    -webkit-background-origin: padding;
    -webkit-background-clip: padding;
}

.section .header::before {
    position: absolute;
    top: 2px;
    left: 7px;
    width: 8px;
    height: 8px;
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
    opacity: 0.8;
}

.section.expanded .header::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png);
}

.section .header .title, .event-bar .header .title {
    font-weight: normal;
    word-wrap: break-word;
    white-space: normal;
    line-height: 18px;
}

.section .header .title.blank-title {
    font-style: italic;
}

.section .header label, .event-bar .header label {
    display: none;
}

.section.expanded .header label, .event-bar.expanded .header label {
    display: inline;
}

.section .header .subtitle, .event-bar .header .subtitle {
    float: right;
    margin-left: 5px;
    max-width: 55%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.section .header .subtitle a {
    color: inherit;
}

.section .properties, .event-bar .event-properties {
    display: none;
}

.section.expanded .properties, .event-bar.expanded .event-properties {
    display: block;
}

.sidebar-pane .section .properties, .event-bar .event-properties {
    padding-left: 16px;
}

.section.no-affect .properties li {
    opacity: 0.5;
}

.section.no-affect .properties li.editing {
    opacity: 1.0;
}

.properties-tree {
    margin: 0;
    padding: 0 6px 2px;
    list-style: none;
    min-height: 18px;
}

.properties-tree li {
    margin-left: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-user-select: text;
    cursor: default;
}

.properties-tree li.parent {
    margin-left: 1px;
}

.properties-tree li.parent::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
    opacity: 0.75;
    float: left;
    width: 8px;
    height: 8px;
    margin-top: 0;
    padding-right: 3px;
    -webkit-user-select: none;
}

.properties-tree li.parent.expanded::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png);
    margin-top: 1px;
}

.properties-tree li .info {
    padding-top: 4px;
    padding-bottom: 3px;
}

.properties-tree ol {
    display: none;
    margin: 0;
    -webkit-padding-start: 12px;
    list-style: none;
}

.properties-tree ol.expanded {
    display: block;
}

.event-listener-breakpoints .event-category {
    font-size: 11px;
    font-weight: bold;
    color: rgb(96, 96, 96);
    padding-top: 2px;
}

.event-listener-breakpoints.properties-tree .children li {
    margin-left: 12px;
    height: 16px;
}

.event-listener-breakpoints .checkbox-elem {
    font-size: 10px;
    float: left;
    top: -2px;
    position: relative;
    left: -1px;
}

.editing {
    -webkit-user-select: text;
    -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
    outline: 1px solid rgb(66%, 66%, 66%) !important;
    background-color: white;
    -webkit-user-modify: read-write-plaintext-only;
    text-overflow: clip !important;
    padding-left: 2px;
    margin-left: -2px;
    padding-right: 2px;
    margin-right: -2px;
    margin-bottom: -1px;
    padding-bottom: 1px;
    opacity: 1.0 !important;
}

.editing, .editing * {
    color: black !important;
    text-decoration: none !important;
}

.child-editing {
    color: black !important;
    text-decoration: none !important;
    overflow: visible !important;
}

.editing br {
    display: none;
}

.section .properties li.editing {
    margin-left: 10px;
    text-overflow: clip;
}

li.editing .swatch, li.editing .enabled-button,  li.editing-sub-part .delete-button {
    display: none !important;
}

.properties-tree.watch-expressions {
    padding-bottom: 8px;
    padding-left: 4px !important;
}

.properties-tree.watch-expressions > li {
    padding-top: 2px;
    padding-left: 4px;
}

.properties-tree.watch-expressions > li > .value {
    display: inline;
    position: static;
}

.properties-tree.watch-expressions > li:not(.parent) {
    margin-left: 1px;
    padding-left: 15px;
}

.properties-tree.watch-expressions > li.hovered {
    padding-right: 14px;
}

.watch-expressions > li.editing-sub-part .text-prompt {
    display: block;
    width: 100%;
}

.watch-expressions > li.editing-sub-part .value, .watch-expressions > li.editing-sub-part .separator  {
    display: none;
}

.section .properties li.editing-sub-part {
    padding: 3px 6px 8px 18px;
    margin: -3px -6px -8px -6px;
    text-overflow: clip;
}

.section .properties .delete-button {
    width: 10px;
    height: 10px;
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/deleteIcon.png);
    background-position: 0 0;
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0 none transparent;
    position: absolute;
    right: 8px;
    display: none;
}

.section .properties li.hovered .delete-button {
    display: inline;
}

.section .properties .name, .event-properties .name, .console-formatted-object .name {
    color: rgb(136, 19, 145);
}

.section .properties .dimmed {
    opacity: 0.6;
}

.section .properties .value.error {
    color: red;
}

.section .properties .number, .event-properties .number {
    color: blue;
}

.section .properties .keyword, .event-properties .keyword {
    color: rgb(136, 19, 79);
}

.section .properties .color, .event-properties .color {
    color: rgb(118, 15, 21);
}

.swatch {
    margin-left: 1px;
    margin-right: 2px;
    margin-bottom: -1px;
    width: 1em;
    height: 1em;
    display: inline-block;
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/checker.png);
}

.swatch-inner {
    width: 100%;
    height: 100%;
    display: inline-block;
    border: 1px solid rgba(128, 128, 128, 0.6);
}

.swatch-inner:hover {
    border: 1px solid rgba(64, 64, 64, 0.8);
}

.pane-title + .pane-title, .pane:not(.visible) + .pane-title, .pane-title:first-of-type {
    margin-top: -1px;
}

.pane-title {
    position: relative;
    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)));
    height: 20px;
    padding: 0 5px;
    border-top: 1px solid rgb(189, 189, 189);
    border-bottom: 1px solid rgb(189, 189, 189);
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    color: rgb(110, 110, 110);
    text-shadow: white 0 1px 0;
    -webkit-background-origin: padding;
    -webkit-background-clip: padding;
}

.pane-title:active {
    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)));
    border-top: 1px solid rgb(178, 178, 178);
    border-bottom: 1px solid rgb(178, 178, 178);
}

.pane-title::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightBlack.png);
    float: left;
    width: 11px;
    height: 12px;
    margin-right: 2px;
    margin-top: 1px;
}

.pane-title.expanded::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallDownBlack.png);
}

.sidebar-pane-toolbar {
    font-weight: bold;
    font-size: 12px;
    line-height: 18px;
    color: rgb(110, 110, 110);
    text-shadow: white 0 1px 0;
    left: 0;
    right: 0;
    top: 0;
    height: 20px;
    position: absolute;
    pointer-events: none;
}

.sidebar-pane-toolbar > * {
    pointer-events: auto;
}

.sidebar-pane-toolbar > select {
    float: right;
    width: 23px;
    height: 17px;
    color: transparent;
    background-color: transparent;
    border: none;
    background-repeat: no-repeat;
    margin: 1px 0 0 0;
    padding: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}

.sidebar-pane-toolbar > select:hover {
    background-position: -23px 0px;
}

.sidebar-pane-toolbar > select:active {
    background-position: -46px 0px;
}

.sidebar-pane-toolbar > select.select-settings {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/paneSettingsButtons.png);
}

.sidebar-pane-toolbar > select.select-filter {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/paneFilterButtons.png);
}

.sidebar-pane-toolbar > select > option, .sidebar-pane-toolbar > select > hr {
    color: black;
}

.sidebar-pane-toolbar > .pane-title-button {
    float: right;
    width: 23px;
    height: 17px;
    color: transparent;
    background-color: transparent;
    border: none;
    background-repeat: no-repeat;
    margin: 1px 0 0 0;
    padding: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
}

.sidebar-pane-toolbar > .pane-title-button:hover {
    background-position: -23px 0px;
}

.sidebar-pane-toolbar > .pane-title-button:active, .sidebar-pane-toolbar > .pane-title-button.toggled {
    background-position: -46px 0px;
}

.sidebar-pane-toolbar > .pane-title-button.add {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/paneAddButtons.png);
}

.sidebar-pane-toolbar > .pane-title-button.element-state {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/paneElementStateButtons.png);
}

.sidebar-pane-toolbar > .pane-title-button.refresh {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/paneRefreshButtons.png);
}

.sidebar-pane {
    position: relative;
}

.sidebar-pane > .body {
    position: relative;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-pane > .body .info {
    text-align: center;
    font-style: italic;
    font-size: 10px;
    padding: 6px;
    color: black;
}

.sidebar-pane > .body .placard + .info {
    border-top: 1px solid rgb(189, 189, 189);
    background-color: rgb(255, 255, 194);
}

.sidebar-pane.visible > .body {
    display: block;
}

.sidebar-pane > .body .breakpoint-condition {
    display: block;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 23px;
    margin-right: 8px;
}

.sidebar-tabbed-pane .tabbed-pane-header {
    background-image: -webkit-linear-gradient(rgb(243,243,243), rgb(235,235,235));
    border-bottom: 1px solid rgb(202, 202, 202);
}

#breakpoint-condition-input {
    display: block;
    margin-left: 0;
    margin-right: 0;
    outline: none !important;
    border: 1px solid rgb(66%, 66%, 66%);
}

.sidebar-pane-stack > .sidebar-pane.visible:nth-last-of-type(1) {
    border-bottom: 1px solid rgb(189, 189, 189);
}

.sidebar-pane-subtitle {
    position: absolute;
    right: 0;
    /*height: 20px;*/
    font-weight: normal;
}

body.platform-windows .sidebar-pane-subtitle {
    padding-top: 1px;
}

.sidebar-pane-subtitle input, .section .header input[type=checkbox] {
    font-size: inherit;
    height: 1em;
    width: 1em;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0.25em;
    vertical-align: bottom;
}

.sidebar {
    overflow-x: hidden;
    background-color: rgb(214, 221, 229);
}

body.inactive .sidebar {
    background-color: rgb(232, 232, 232);
}

.panel-enabler-view button:not(.status-bar-item), .pane-title-button, button.show-all-nodes {
    color: rgb(6, 6, 6);
    background-color: transparent;
    border: 1px solid rgb(165, 165, 165);
    background-color: rgb(237, 237, 237);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(252, 252, 252)), to(rgb(223, 223, 223)));
    -webkit-border-radius: 12px;
    -webkit-appearance: none;
}

button.show-all-nodes {
    font-size: 13px;
    margin: 0;
    padding: 0 20px;
    height: 20px;
}

.panel-enabler-view button:active:not(.status-bar-item), .pane-title-button:active, button.show-all-nodes:active {
    background-color: rgb(215, 215, 215);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(194, 194, 194)), to(rgb(239, 239, 239)));
}

body.inactive .panel-enabler-view button:not(.status-bar-item), .panel-enabler-view button:disabled:not(.status-bar-item), body.inactive button.show-all-nodes {
    color: rgb(130, 130, 130);
    border-color: rgb(212, 212, 212);
    background-color: rgb(239, 239, 239);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(235, 235, 235)));
}

button.enable-toggle-status-bar-item .glyph {
    -webkit-mask-position: -192px 0;
}

button.enable-toggle-status-bar-item.toggled-on .glyph {
    -webkit-mask-position: -96px -24px;
}

#console-messages.console-filter-top {
    margin-top: 23px;
}

.scope-bar {
    line-height: 19px;
    padding-right: 10px;
    overflow: hidden;
}

.scope-bar li {
    display: inline-block;
    margin: 0 2px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 12px;
    font-weight: bold;
    color: rgb(46, 46, 46);
    background: transparent;
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
    -webkit-border-radius: 8px;
    vertical-align: middle;
}

.scope-bar-divider {
    background-color: rgba(0, 0, 0, 0.4);
    height: 16px;
    width: 1px;
    vertical-align: middle;
    display: inline-block;
}

.scope-bar li.selected, .scope-bar li:hover, .scope-bar li:active {
    color: white;
    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
}

.scope-bar li.all {
    margin: 0 8px;
}

.scope-bar li:hover {
    background: rgba(0, 0, 0, 0.2);
}

.scope-bar li.selected {
    background: rgba(0, 0, 0, 0.3);
    -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);
}

.scope-bar li:active {
    background: rgba(0, 0, 0, 0.5);
    -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);
}

.console-warning-level, .console-error-level, .console-log-level, .console-debug-level {
    display: none;
}

.filter-all .console-warning-level, .filter-warnings .console-warning-level,
.filter-all .console-error-level, .filter-errors .console-error-level,
.filter-all .console-log-level, .filter-logs .console-log-level,
.filter-all .console-debug-level, .filter-debug .console-debug-level {
    display: block;
}

.filter-all .console-warning-level.repeated-message, .filter-warnings .console-warning-level.repeated-message,
.filter-all .console-error-level.repeated-message, .filter-errors .console-error-level.repeated-message,
.filter-all .console-log-level.repeated-message, .filter-logs .console-log-level.repeated-message,
.filter-all .console-debug-level.repeated-message, .filter-debug .console-debug-level.repeated-message {
    display: -webkit-flex;
}

.console-user-command-result {
    display: block;
}

.source-view-frame {
    width: 100%;
    height: 100%;
}

.sidebar-resizer-vertical {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    z-index: 500;
    cursor: ew-resize;
}

.sidebar-tree, .sidebar-tree .children {
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 11px;
}

.sidebar-tree-section {
    position: relative;
    height: 18px;
    padding: 1px 10px 6px 10px;
    white-space: nowrap;
    margin-top: 1px;
    color: rgb(92, 110, 129);
    font-weight: bold;
    text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
}

.sidebar-tree-item {
    position: relative;
    height: 36px;
    padding: 0 5px 0 5px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-top: 1px;
    line-height: 34px;
    border-top: 1px solid transparent;
}

.sidebar-tree .children {
    display: none;
}

.sidebar-tree .children.expanded {
    display: block;
}

.sidebar-tree-section + .children > .sidebar-tree-item {
    padding-left: 10px !important;
}

.sidebar-tree-section + .children.small > .sidebar-tree-item {
    padding-left: 17px !important;
}

.sidebar-tree > .children > .sidebar-tree-item {
    padding-left: 37px;
}

.sidebar-tree > .children > .children > .sidebar-tree-item {
    padding-left: 37px;
}

.sidebar-tree.hide-disclosure-buttons > .children {
    display: none;
}

.sidebar-tree > .children.hide-disclosure-buttons > .children {
    display: none;
}

.sidebar-tree.some-expandable:not(.hide-disclosure-buttons) > .sidebar-tree-item:not(.parent) .icon {
    margin-left: 16px;
}

.sidebar-tree-item .disclosure-button {
    float: left;
    width: 16px;
    height: 100%;
    border: 0;
    background-color: transparent;
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRight.png);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-apearance: none;
}

.sidebar-tree.hide-disclosure-buttons .sidebar-tree-item .disclosure-button {
    display: none;
}

body.inactive .sidebar-tree-item .disclosure-button {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightBlack.png);
}

body.inactive .sidebar-tree-item.expanded .disclosure-button {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallDownBlack.png);
}

body.inactive .sidebar-tree-item .disclosure-button:active {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightDownBlack.png);
}

.sidebar-tree-item.selected .disclosure-button {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightWhite.png) !important;
}

.sidebar-tree-item.expanded .disclosure-button {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallDown.png);
}

.sidebar-tree-item.selected.expanded .disclosure-button {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallDownWhite.png) !important;
}

.sidebar-tree-item.selected .disclosure-button:active {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightDownWhite.png) !important;
}

.sidebar-tree-item .disclosure-button:active {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightDown.png);
}

.sidebar-tree-item .icon {
    float: left;
    width: 32px;
    height: 32px;
    margin-top: 1px;
    margin-right: 3px;
}

li .status {
    float: right;
    height: 16px;
    margin-top: 9px;
    margin-left: 4px;
    line-height: 1em;
}

li .status:empty {
    display: none;
}

li .status .bubble {
    display: inline-block;
    height: 14px;
    min-width: 16px;
    margin-top: 1px;
    background-color: rgb(128, 151, 189);
    vertical-align: middle;
    white-space: nowrap;
    padding: 1px 4px;
    text-align: center;
    font-size: 11px;
    line-height: normal;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    text-shadow: none;
    color: white;
    -webkit-border-radius: 7px;
}

li .status .bubble:empty {
    display: none;
}

li.selected .status .bubble {
    background-color: white !important;
    color: rgb(132, 154, 190) !important;
}

:focus li.selected .status .bubble {
    color: rgb(36, 98, 172) !important;
}

body.inactive li.selected .status .bubble {
    color: rgb(159, 159, 159) !important;
}

.sidebar-tree.small .sidebar-tree-item, .sidebar-tree .children.small .sidebar-tree-item, .sidebar-tree-item.small, .small .resources-graph-side {
    height: 20px;
}

.sidebar-tree.small .sidebar-tree-item .icon, .sidebar-tree .children.small .sidebar-tree-item .icon, .sidebar-tree-item.small .icon {
    width: 16px;
    height: 16px;
}

.sidebar-tree.small .sidebar-tree-item .status, .sidebar-tree .children.small .sidebar-tree-item .status, .sidebar-tree-item.small .status {
    margin-top: 1px;
}

.sidebar-tree-item.selected {
    color: white;
    border-top: 1px solid rgb(145, 160, 192);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(162, 177, 207)), to(rgb(120, 138, 177)));
    text-shadow: rgba(0, 0, 0, 0.33) 0 1px 0;
    font-weight: bold;
    -webkit-background-origin: padding;
    -webkit-background-clip: padding;
}

:focus .sidebar-tree-item.selected {
    border-top: 1px solid rgb(68, 128, 200);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(92, 147, 213)), to(rgb(21, 83, 170)));
}

body.inactive .sidebar-tree-item.selected {
    border-top: 1px solid rgb(151, 151, 151);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(180, 180, 180)), to(rgb(138, 138, 138)));
}

.sidebar-tree-item .titles {
    position: relative;
    top: 5px;
    line-height: 11px;
    padding-bottom: 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.sidebar-tree-item .titles.no-subtitle {
    top: 10px;
}

.sidebar-tree.small .sidebar-tree-item .titles, .sidebar-tree .children.small .sidebar-tree-item .titles, .sidebar-tree-item.small .titles {
    top: 2px;
    line-height: normal;
}

.sidebar-tree:not(.small) .sidebar-tree-item:not(.small) .title::after, .sidebar-tree .children:not(.small) .sidebar-tree-item .title::after {
    content: "\A";
    white-space: pre;
}

.sidebar-tree-item .subtitle {
    font-size: 9px;
    color: rgba(0, 0, 0, 0.7);
}

.sidebar-tree.small .sidebar-tree-item .subtitle, .sidebar-tree .children.small .sidebar-tree-item .subtitle, .sidebar-tree-item.small .subtitle {
    display: none;
}

.sidebar-tree-item.selected .subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.bubble.debug, .console-debug-level .bubble {
    background-color: rgb(0, 0, 255) !important;
}

.bubble.warning, .console-warning-level .bubble {
    background-color: rgb(232, 164, 0) !important;
}

.bubble.error, .console-error-level .bubble {
    background-color: rgb(216, 35, 35) !important;
}

.bubble.search-matches {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchSmallWhite.png);
    background-repeat: no-repeat;
    background-position: 3px 2px;
    padding-left: 13px !important;
}

li.selected .bubble.search-matches {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchSmallBlue.png);
}

:focus li.selected .bubble.search-matches {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchSmallBrightBlue.png);
}

body.inactive li.selected .bubble.search-matches {
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchSmallGray.png);
}

.storage-application-cache-status-icon, .storage-application-cache-connectivity-icon {
    margin-bottom: -3px;
    margin-left: 5px;
    vertical-align: middle;
}

.status-bar-divider {
    margin-left: 7px;
    border-right: 1px solid #CCC;
}

.storage-application-cache-status, .storage-application-cache-connectivity {
    position: relative;
    top: 4px;
}

.status-bar-items {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 200px;
    overflow: hidden;
    border-left: 1px solid rgb(184, 184, 184);
    margin-left: -1px;
}

.node-search-status-bar-item .glyph {
    -webkit-mask-position: -224px -24px;
}

.delete-storage-status-bar-item .glyph {
    -webkit-mask-position: -128px 0;
}

.refresh-storage-status-bar-item .glyph {
    -webkit-mask-position: 0 0;
}

ol.breakpoint-list {
    -webkit-padding-start: 0;
    list-style: none;
    margin: 0;
}

.breakpoints-list-deactivated {
    background-color: rgb(245, 245, 245);
    opacity: 0.3;
}

.breakpoint-list li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 2px 0;
    color: black;
}

.breakpoint-list li:hover {
    background-color: rgba(56, 121, 217, 0.2);
}

.breakpoint-list .checkbox-elem {
    font-size: 10px;
    margin: 0 4px;
    vertical-align: top;
    position: relative;
    z-index: 1;
}

.breakpoint-list .source-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 2px 0 0px 20px;
}

.sidebar-pane .breakpoint-hit {
    background-color: rgb(255, 255, 194);
}

li.breakpoint-hit .breakpoint-hit-marker {
    background-color: rgb(255, 255, 194);
    height: 18px;
    left: 0px;
    margin-top: -16px;
    position: absolute;
    right: 0px;
    z-index: -1;
}

.webkit-html-js-node, .webkit-html-css-node {
    white-space: pre;
}

.source-frame-breakpoint-condition {
    z-index: 30;
    padding: 4px;
    background-color: rgb(203, 226, 255);
    -webkit-border-radius: 7px;
    border: 2px solid rgb(169, 172, 203);
    width: 90%;
    pointer-events: auto;
}

.source-frame-breakpoint-message {
    background-color: transparent;
    font-family: Lucida Grande, sans-serif;
    font-weight: normal;
    font-size: 11px;
    text-align: left;
    text-shadow: none;
    color: rgb(85, 85, 85);
    cursor: default;
    margin: 0 0 2px 0;
}

#source-frame-breakpoint-condition {
    margin: 0;
    border: 1px inset rgb(190, 190, 190) !important;
    width: 100%;
    box-shadow: none !important;
    outline: none !important;
    -webkit-user-modify: read-write;
}

.source-frame-popover-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
    padding-left: 18px;
}

.source-frame-popover-tree {
    border-top: 1px solid rgb(194, 194, 147);
    overflow: auto;
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 0;
    right: 0;
}

.source-frame-eval-expression {
    border: 1px solid rgb(163, 41, 34);
    margin: -1px;
    background-color: rgb(255, 255, 194);
}

.workers-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.workers-list > li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 1em;
    font-size: 12px;
}

a.worker-item {
    color: rgb(33%, 33%, 33%);
    cursor: pointer;
    text-decoration: none;
}

a.worker-item:hover {
    color: rgb(15%, 15%, 15%);
}

.resource-content-unavailable {
    color: rgb(50%, 50%, 50%);
    font-style: italic;
    font-size: 14px;
    text-align: center;
    padding: 32px;
}

.node-link {
    text-decoration: underline;
    cursor: pointer;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-auto {
    cursor: auto;
}

.please-wait-msg {
    position: absolute;
    left: 0;
    top: 0;
    border: 4px black solid;
    border-radius: 4px;
    background-color: black;
    opacity: 0.85;
    color: white;
    font-size: 12px;
    font-weight: bold;
    z-index: 10000;
}

.resource-view.json {
    padding: 5px;
}

.resource-view.html iframe {
    width: 100%;
    height: 100%;
    position: absolute;
}

.soft-context-menu-glass-pane {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20000;
}

.soft-context-menu {
    position: absolute;
    font-family: 'Lucida Grande', 'Helvetica', 'sans-serif';
    border: 1px solid rgba(196, 196, 196, 0.9);
    border-top: 1px solid rgba(196, 196, 196, 0.5);
    border-bottom: 1px solid rgba(150, 150, 150, 0.9);
    padding: 4px 0 4px 0;
    border-radius: 4px;
    background-color: white;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

.soft-context-menu-item {
    width: 100%;
    line-height: 13px;
    font-size: 14px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    padding: 2px 7px 2px 6px;
    margin: 0 13px 0 0;
    white-space: nowrap;
}

.soft-context-menu-separator {
    height: 10px;
    margin: 0 1px;
}

.soft-context-menu-separator > .separator-line {
    margin: 0;
    height: 5px;
    border-bottom: 1px solid rgb(227, 227, 227);
    pointer-events: none;
}

.soft-context-menu-item-mouse-over {
    border-top: 1px solid rgb(56, 121, 217);
    border-bottom: 1px solid rgb(56, 121, 217);
    background-color: rgb(56, 121, 217);
    color: white;
}

body.platform-mac .soft-context-menu-item-mouse-over {
    border-top: 1px solid rgb(90, 131, 236);
    border-bottom: 1px solid rgb(18, 88, 233);
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(100, 140, 243)), to(rgb(36, 101, 243)));
}

.soft-context-menu-item-checkmark {
    color: rgb(108, 108, 108);
    pointer-events: none;
}

.soft-context-menu-item-submenu-arrow {
    color: black;
    float: right;
    pointer-events: none;
}

.soft-context-menu-item-mouse-over .soft-context-menu-item-checkmark {
    color: white;
}

.search-view {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.search-drawer-header input[type="search"].search-config-search {
    font-size: 11px;
    margin-left: 4px;
    color: #303030;
    position: relative;
}

body.platform-mac .search-drawer-header input[type="search"].search-config-search {
    top: 1px;
}

.search-drawer-header label.search-config-label {
    margin-left: 8px;
    color: #303030;
}

.search-drawer-header input[type="checkbox"].search-config-checkbox {
    vertical-align: bottom;
}

body:not(.platform-mac) .search-drawer-header input[type="checkbox"].search-config-checkbox {
    margin-bottom: 5px;
}

body.platform-mac .search-drawer-header input[type="checkbox"].search-config-checkbox {
    margin-bottom: 4px;
}

.drawer-header {
    font-size: 11px;
    border-right: 1px solid rgb(197, 197, 197);
    line-height: 21px;
    padding-left: 6px;
    display: inline-block;
}

.drawer-header-close-button {
    font-family: Arial, monospace;
    padding: 3px 8px;
    font-size: 14px;
    color:rgb(80, 80, 80);
    opacity: 0.5;
    position: relative;
    top: 1px;
}

.drawer-header-close-button:hover {
    opacity: 1;
}

.drawer-header-close-button:active {
    opacity: 0.7;
}

#bottom-status-bar-container {
    -webkit-flex: 1 1 0;
    width: 0;
    overflow: hidden;
}

.search-status-bar-item {
    display: inline-block;
    cursor: pointer;
    font-size: 11px;
    height: 23px;
}

.search-status-bar-message {
    margin-left:5px;
    margin-right:5px;
    margin-top:5px;
    float:left;
}

.progress-bar-stop-button-item {
    width: 19px;
    height: 24px;
    overflow: hidden;
}

.progress-bar-stop-button .glyph {
    -webkit-mask-position: -96px -48px;
    background-color: rgb(216, 0, 0) !important;
}

.search-results-status-bar-message {
    margin-right: 10px;
    cursor: default;
    font-size: 11px;
    float: right;
    margin-top: 5px;
}

.search-view .search-results {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}

#search-results-pane-file-based li {
    list-style: none;
}

#search-results-pane-file-based ol {
    -webkit-padding-start: 0;
    margin-top: 0;
}

#search-results-pane-file-based ol.children {
    display: none;
}

#search-results-pane-file-based ol.children.expanded {
    display: block;
}

#search-results-pane-file-based li.parent::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
    position: relative;
    left: -4px;
}

#search-results-pane-file-based li.parent.expanded::before {
    content: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png);
}

#search-results-pane-file-based .search-result {
    font-size: 11px;
    padding: 2px 0 2px 10px;
    word-wrap: normal;
    white-space: pre;
    cursor: pointer;
}

#search-results-pane-file-based .search-result:hover {
    background-color: rgba(121, 121, 121, 0.1);
}

#search-results-pane-file-based .search-result .search-result-file-name {
    font-weight: bold;
    color: #222;
}

#search-results-pane-file-based .search-result .search-result-matches-count {
    margin-left: 5px;
    color: #333;
}

#search-results-pane-file-based .show-more-matches {
    padding: 4px 0;
    color: #333;
    cursor: pointer;
    font-size: 11px;
    margin-left: 20px;
}

#search-results-pane-file-based .show-more-matches:hover {
    text-decoration: underline;
}

#search-results-pane-file-based .search-match {
    word-wrap: normal;
    white-space: pre;
}

#search-results-pane-file-based .search-match .webkit-line-number.search-match-line-number {
    margin-right: 5px;
    border-right: 1px solid #BBB;
}

#search-results-pane-file-based .search-match:not(:hover) .webkit-line-number.search-match-line-number {
    background-color: #F0F0F0;
}

#search-results-pane-file-based .search-match:hover {
    background-color: rgba(56, 121, 217, 0.1);
}

#search-results-pane-file-based .search-match .highlighted-match {
    background-color: #F1EA00;
}

#search-results-pane-file-based a {
    text-decoration: none;
    display: block;
}

#search-results-pane-file-based .search-match .search-match-content {
    color: #000;
}

.record-cpu-profile-status-bar-item .glyph, .record-profile-status-bar-item .glyph {
    -webkit-mask-position: -288px 0;
}

.record-cpu-profile-status-bar-item.toggled-on .glyph, .record-profile-status-bar-item.toggled-on .glyph {
    -webkit-mask-position: -288px -24px;
    background-color: rgb(216, 0, 0) !important;
}

.storage-empty-view, .storage-view .storage-table-error {
    position: absolute;
    top: 0;
    bottom: 25%;
    left: 0;
    right: 0;
    font-size: 24px;
    color: rgb(75%, 75%, 75%);
    margin-top: auto;
    margin-bottom: auto;
    height: 50px;
    line-height: 26px;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    white-space: pre-wrap;
}

/* Generic suggest box style */

.suggest-box.generic-suggest {
    margin-left: -1px;
    border-color: rgb(66%, 66%, 66%);
}

.suggest-box.generic-suggest.above-anchor {
   border-radius: 5px 5px 5px 0;
}

.suggest-box.generic-suggest.under-anchor {
   border-radius: 0 5px 5px 5px;
}

/* Custom popup scrollers */

.custom-popup-horizontal-scroll ::-webkit-scrollbar, .custom-popup-vertical-scroll ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-corner, .custom-popup-vertical-scroll ::-webkit-scrollbar-corner {
    display: none;
}

.custom-popup-horizontal-scroll ::-webkit-resizer, .custom-popup-vertical-scroll ::-webkit-resizer {
    display: none;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-button, .custom-popup-vertical-scroll ::-webkit-scrollbar-button {
    display: none;
}

/* Custom Horizontal Scrollbar Styles */

.custom-popup-horizontal-scroll ::-webkit-scrollbar:horizontal:corner-present {
    border-right-width: 0;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/thumbHoriz.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px;
    min-width: 20px;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:hover {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/thumbHoverHoriz.png) 0 11 0 11;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-thumb:horizontal:active {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/thumbActiveHoriz.png) 0 11 0 11;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:start {
    margin-left: 5px;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end {
    margin-right: 5px;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:end:corner-present {
    margin-right: 4px;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:decrement {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/trackHoriz.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 0 0 11px;
}

.custom-popup-horizontal-scroll ::-webkit-scrollbar-track-piece:horizontal:increment {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/trackHoriz.png) 0 11 0 11;
    border-color: transparent;
    border-width: 0 11px 0 0;
}

/* Custom Vertical Scrollbar Styles */

.custom-popup-vertical-scroll ::-webkit-scrollbar:vertical:corner-present {
    border-bottom-width: 0;
}

.custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/thumbVert.png) 11 0 11 0;
    border-color: transparent;
    border-width: 11px 0;
    min-height: 20px;
}

.custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:hover {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/thumbHoverVert.png) 11 0 11 0;
}

.custom-popup-vertical-scroll ::-webkit-scrollbar-thumb:vertical:active {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/thumbActiveVert.png) 11 0 11 0;
}

.custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:start {
    margin-top: 5px;
}

.custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:end {
    margin-bottom: 5px;
}

.custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:end:corner-present {
    margin-bottom: 4px;
}

.custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:decrement {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/trackVert.png) 11 0 11 0;
    border-color: transparent;
    border-width: 11px 0 0 0;
}

.custom-popup-vertical-scroll ::-webkit-scrollbar-track-piece:vertical:increment {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/trackVert.png) 11 0 11 0;
    border-color: transparent;
    border-width: 0 0 11px 0;
}

.console-context {
    max-width: 200px;
}

.inspector-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 11px;
    height: auto;
}

.progress-bar-container {
    display: -webkit-flex;
    margin: 0 8px;
    -webkit-flex: 1 0;
}

.progress-bar-container span {
    padding: 6px;
}

.progress-bar-container progress {
    margin-top: 7px;
    -webkit-flex: 1 0;
}

body.platform-mac .progress-bar-container progress {
    margin-top: 6px;
}

.progress-bar-container button.status-bar-item {
    border-left: none;
    margin-top: 1px;
}

.source-frame-cursor-position {
    padding-left: 6px;
    padding-top: 5px;
    display: inline-block;
    pointer-events: auto;
    -webkit-user-select: text;
    font-size: 11px;
}

/* inspectorCommon.css */

html {
    height: 100%;
}

body {
    cursor: default;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    font-family: Lucida Grande, sans-serif;
    font-size: 10px;
    margin: 0;
    tab-size: 4;
    -webkit-user-select: none;
}

body.dock-to-right:not(.undocked) {
    border-left: 1px solid rgb(80, 80, 80);
}

body.dock-to-right.inactive:not(.undocked) {
    border-left: 1px solid rgb(64%, 64%, 64%);
}

* {
    -webkit-box-sizing: border-box;
}

:focus {
    outline: none;
}

img {
    -webkit-user-drag: none;
}

iframe, a img {
    border: none;
}

iframe.view {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.hidden {
    display: none !important;
}

.monospace {
    font-size: 10px !important;
    font-family: monospace;
}

.resources-dividers {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    z-index: -100;
}

.resources-event-dividers {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    top: 0;
    z-index: 300;
    pointer-events: none;
}

.resources-dividers-label-bar {
    position: absolute;
    top: 0;
    left: 0px;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    background-clip: padding;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    height: 20px;
    z-index: 200;
    pointer-events: none;
}

.resources-divider {
    position: absolute;
    width: 1px;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
}

.resources-event-divider-padding {
    position: absolute;
    width: 8px;
    top: 0;
    bottom: 0;
    pointer-events: auto;
}

.resources-event-divider {
    position: absolute;
    width: 2px;
    top: 0;
    bottom: 0;
    z-index: 300;
}

.resources-divider-label {
    position: absolute;
    top: 4px;
    right: 3px;
    font-size: 9px;
    color: rgb(50%, 50%, 50%);
    white-space: nowrap;
}

/* Network timing is shared between popover and network item view pane */

.network-timing-row {
    position: relative;
    height: 16px;
}

.network-timing-bar {
    position: absolute;
    background-color: red;
    border-left: 1px solid red;
    opacity: 0.4;
    top: 0;
    bottom: 0;
}

.network-timing-bar-title {
    position: absolute;
    color: black;
    top: 1px;
}

.webkit-search-result {
    -webkit-border-radius: 4px;
    padding: 2px 2px 2px 3px;
    margin: -2px -2px -2px -3px;
    opacity: 0.8;
    -webkit-box-shadow: rgba(0, 0, 0, .5) 3px 3px 4px;
    background-color: rgb(241, 234, 0);
    color: black;
}

.sidebar-separator {
    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)));
    padding: 0 5px;
    border-top: 1px solid rgb(189, 189, 189);
    border-bottom: 1px solid rgb(189, 189, 189);
    color: rgb(110, 110, 110);
    text-shadow: white 0 1px 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 11px;
}

.sidebar-label {
    font-size: 11px;
}

/* inspectorSyntaxHighlight.css */

/*
 * Copyright (C) 2009 Apple Inc.  All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 *
 * 1.  Redistributions of source code must retain the above copyright
 *     notice, this list of conditions and the following disclaimer.
 * 2.  Redistributions in binary form must reproduce the above copyright
 *     notice, this list of conditions and the following disclaimer in the
 *     documentation and/or other materials provided with the distribution.
 * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
 *     its contributors may be used to endorse or promote products derived
 *     from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

.webkit-css-comment {
    color: rgb(0, 116, 0);
}

.webkit-css-url, .webkit-css-color, .webkit-css-string, .webkit-css-keyword {
    color: rgb(7, 144, 154);
 }

.webkit-css-number {
    color: rgb(50, 0, 255);
}

.webkit-css-property, .webkit-css-at-rule {
    color: rgb(200, 0, 0);
}

.webkit-css-selector {
    color: black;
}

.webkit-css-bang-keyword {
    color: rgb(200, 0, 180);
}

.webkit-javascript-comment {
    color: rgb(0, 116, 0);
}

.webkit-javascript-keyword {
    color: rgb(170, 13, 145);
}

.webkit-javascript-number {
    color: rgb(28, 0, 207);
}

.webkit-javascript-string, .webkit-javascript-regexp {
    color: rgb(196, 26, 22);
}

.webkit-javascript-ident {
    color: black;
}

.webkit-whitespace-1::before {
    content: "·";
}

.webkit-whitespace-2::before {
    content: "··";
}

.webkit-whitespace-4::before {
    content: "····";
}

.webkit-whitespace-8::before {
    content: "········";
}

.webkit-whitespace-16::before {
    content: "················";
}

.webkit-whitespace::before {
    position: absolute;
    color: rgb(175, 175, 175);
}

.webkit-html-comment {
    /* Keep this in sync with view-source.css (.webkit-html-comment) */
    color: rgb(35, 110, 37);
}

.webkit-html-tag {
    /* Keep this in sync with view-source.css (.webkit-html-tag) */
    color: rgb(136, 18, 128);
}

.webkit-html-doctype {
    /* Keep this in sync with view-source.css (.webkit-html-doctype) */
    color: rgb(192, 192, 192);
}

.webkit-html-attribute-name {
    /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
    color: rgb(153, 69, 0);
}

.webkit-html-attribute-value {
    /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
    color: rgb(26, 26, 166);
}

.webkit-html-external-link, .webkit-html-resource-link {
    /* Keep this in sync with view-source.css (.webkit-html-external-link, .webkit-html-resource-link) */
    color: #00e;
}

.webkit-html-external-link {
    /* Keep this in sync with view-source.css (.webkit-html-external-link) */
    text-decoration: none;
}

.webkit-html-external-link:hover {
    /* Keep this in sync with view-source.css (.webkit-html-external-link:hover) */
    text-decoration: underline;
}

/* popover.css */

.popover {
    position: absolute;
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/popoverBackground.png) 25 25 25 25;
    border-width: 25px;
    z-index: 100;
    pointer-events: none;
}

.popover .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: auto;
    overflow: auto;
    -webkit-user-select: text;
}

.popover .content.fixed-height {
    overflow: hidden;
}

.popover .arrow {
    position: absolute;
    background-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/popoverArrows.png);
    width: 19px;
    height: 19px;
    margin-left: 15px;
    margin-top: -25px;
    top: 0;
    left: 0;
}

.popover.top-left-arrow .arrow {
    /* The default is top-left, no styles needed. */
}

.popover.top-right-arrow .arrow {
    right: 25px;
    left: auto;
}

.popover.bottom-left-arrow .arrow {
    top: auto;
    bottom: 0;
    margin-top: 0;
    margin-bottom: -25px;
    background-position: 0 -19px;
}

.popover.bottom-right-arrow .arrow {
    right: 15px;
    left: auto;
    top: auto;
    bottom: 0;
    margin-top: 0;
    margin-bottom: -25px;
    background-position: 0 -19px;
}

.popover.left-top-arrow .arrow {
    top: 0;
    margin-top: 15px;
    margin-left: -25px;
    background-position: 0 -38px;
}

.popover.left-bottom-arrow .arrow {
    top: auto;
    bottom: 0;
    margin-bottom: 15px;
    margin-left: -25px;
    background-position: 0 -38px;
}

.popover.right-top-arrow .arrow {
    right: 0;
    left: auto;
    top: 0;
    margin-top: 15px;
    margin-right: -25px;
    background-position: 0 -57px;
}

.popover.right-bottom-arrow .arrow {
    right: 0;
    left: auto;
    top: auto;
    bottom: 0;
    margin-bottom: 15px;
    margin-right: -25px;
    background-position: 0 -57px;
}

/* devTools.css */

.data-grid table {
    line-height: 120%;
}

body.dock-to-bottom #toolbar {
    cursor: default; /* overriden */
}

body.dock-to-bottom.platform-mac #toolbar {
    border-top-color: white;
}

/* Chrome theme overrides */

body.platform-windows #toolbar, body.platform-windows.inactive #toolbar {
    background-image: none;
}

body.undocked.platform-mac-leopard #toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(175, 175, 175)), to(rgb(151, 151, 151))) !important;
}

body.undocked.platform-mac-leopard.inactive #toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(221, 221, 221)), to(rgb(207, 207, 207))) !important;
}

body.undocked.platform-mac-snowleopard #toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(189, 189, 189)), to(rgb(167, 167, 167))) !important;
}

body.undocked.platform-mac-snowleopard.inactive #toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(228, 228, 228)), to(rgb(216, 216, 216))) !important;
}

body.undocked.platform-mac-mountain-lion #toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(208, 208, 208)), to(rgb(200, 200, 200))) !important;
}

body.undocked.platform-mac-mountain-lion.inactive #toolbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(238, 238, 238)), to(rgb(224, 224, 224))) !important;
}

body.platform-linux #scripts-files {
    font-size: 11px;
    font-weight: normal;
    line-height: 12px;
}

.console-group-messages .section > .header {
    padding: 0 8px 0 0;
    background-image: none;
    border: none;
    min-height: 0;
}

#resources-filter {
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(233, 233, 233)), to(rgb(233, 233, 233)));
}

.crumbs .crumb {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentChromium.png) 0 12 0 2;
    margin-right: -3px;
    padding-left: 6px;
}

.crumbs .crumb.selected {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentSelectedChromium.png) 0 12 0 2;
    color: white;
    text-shadow: rgba(255, 255, 255, 0.5) 0 0px 0;
}

.crumbs .crumb.selected:hover {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentSelectedChromium.png) 0 12 0 2;
}

.crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentSelectedEndChromium.png) 0 2 0 2;
}

.crumbs .crumb:hover {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentHoverChromium.png) 0 12 0 2;
}

.crumbs .crumb.end:hover {
    -webkit-border-image: url(https://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentHoverEndChromium.png) 0 2 0 2;
}

.status-bar {
    background-image: -webkit-linear-gradient(rgb(243,243,243), rgb(235,235,235));
}

.scope-bar li.selected {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}

.scope-bar li:active {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}

.timeline-category-statusbar-item input {
    vertical-align: middle;
}
.toolbar-item.resources .toolbar-icon { background-position: -32px 0; }
.toolbar-item.network .toolbar-icon { background-position: -64px 0; }
.toolbar-item.scripts .toolbar-icon { background-position: -96px 0; }
.toolbar-item.timeline .toolbar-icon { background-position: -128px 0; }
.toolbar-item.profiles .toolbar-icon { background-position: -160px 0; }
.toolbar-item.audits .toolbar-icon { background-position: -192px 0; }
.toolbar-item.console .toolbar-icon { background-position: -224px 0; }

</style>
<title>Developer Tools - https://codepen.io/pen/</title></head>

<body class="undocked show-toolbar-icons platform-windows platform-windows-vista port-undefined inactive" id="-webkit-web-inspector">
 <div id="toolbar">
 <div class="toolbar-item close-left"><div id="close-button-left"></div></div>
 <div id="toolbar-controls">
 <div class="toolbar-item"><div id="toolbar-dropdown-arrow" class="hidden">»</div></div>
 <div class="toolbar-item close-right"><div id="close-button-right"></div></div>
 </div>
 <button class="toolbar-item toggleable elements toggled-on"><div class="toolbar-icon"></div><div class="toolbar-label">Elements</div></button><button class="toolbar-item toggleable resources"><div class="toolbar-icon"></div><div class="toolbar-label">Resources</div></button><button class="toolbar-item toggleable network"><div class="toolbar-icon"></div><div class="toolbar-label">Network</div></button><button class="toolbar-item toggleable scripts"><div class="toolbar-icon"></div><div class="toolbar-label">Sources</div></button><button class="toolbar-item toggleable timeline"><div class="toolbar-icon"></div><div class="toolbar-label">Timeline</div></button><button class="toolbar-item toggleable profiles"><div class="toolbar-icon"></div><div class="toolbar-label">Profiles</div></button><button class="toolbar-item toggleable audits"><div class="toolbar-icon"></div><div class="toolbar-label">Audits</div></button><button class="toolbar-item toggleable console"><div class="toolbar-icon"></div><div class="toolbar-label">Console</div></button></div>
 <div id="main">
 <div id="floating-status-bar-container" class="status-bar"><div id="floating-status-bar-resizer"></div></div>
 <div id="main-panels" spellcheck="false" class="visible"><div class="inspector-footer status-bar hidden"></div><div class="fill"><div class="panel elements visible"><div class="split-view visible"><div class="split-view-contents scroll-target split-view-contents-vertical outline-disclosure source-code" style="left: 0px; right: 474px;" id="elements-content"><ol tabindex="0"><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;!DOCTYPE html&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 42px;"></div>&lt;!--[if lte IE 9]&gt;
&lt;html class="ie" lang="en"&gt;
&lt;![endif]--&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;!--[if gt IE 9]&gt;&lt;!--&gt;</li><li title="" class="parent expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div>&lt;html lang="en"&gt;</li><ol class="children expanded"><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;!--&lt;![endif]--&gt;</li><li title="" class="parent expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div>&lt;head&gt;</li><ol class="children expanded"><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;meta charset="UTF-8"&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;title&gt;CodePen - Pen&lt;/title&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div>&lt;link href="<a href="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-attribute-value webkit-html-resource-link" title="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css">http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css</a>" media="all" rel="stylesheet" type="text/css"&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div>&lt;link href="<a href="https://assets.codepen.io/assets/editor/editor-0a3b8248b92b2bea693c3b306ffa7b1a.css" class="webkit-html-attribute-value webkit-html-resource-link" title="https://assets.codepen.io/assets/editor/editor-0a3b8248b92b2bea693c3b306ffa7b1a.css">http://assets.codepen.io/assets/editor/editor-0a3b8248b92b2bea693c3b306ffa7b1a.css</a>" media="all" rel="stylesheet" type="text/css"&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;meta name="description" content="..."&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div>&lt;link href="<a href="https://assets.codepen.io/assets/editor/themes/twilight-3bb7492f6c78725bc526ac65384b7d6d.css" class="webkit-html-attribute-value webkit-html-resource-link" title="https://assets.codepen.io/assets/editor/themes/twilight-3bb7492f6c78725bc526ac65384b7d6d.css">http://assets.codepen.io/assets/editor/themes/twilight-3bb7492f6c78725bc526ac65384b7d6d.css</a>" media="screen" rel="stylesheet" type="text/css"&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div>&lt;link href="<a href="https://assets.codepen.io/assets/editor/layouts/top-4ccf61093ae9d82c6f003dfead1bc631.css" class="webkit-html-attribute-value webkit-html-resource-link" title="https://assets.codepen.io/assets/editor/layouts/top-4ccf61093ae9d82c6f003dfead1bc631.css">http://assets.codepen.io/assets/editor/layouts/top-4ccf61093ae9d82c6f003dfead1bc631.css</a>" media="screen" rel="stylesheet" type="text/css"&gt;</li><li title="" class="parent expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div>&lt;style&gt;</li><ol class="children expanded"><li title="" draggable="true" class=""><div class="selection selected" style="height: 112px;"></div> .CodeMirror { font-family: "Courier New", Courier, MonoSpace; } .CodeMirror { font-size: 15px; } </li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;/style&gt;</li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;link rel="shortcut icon" href="<a href="https://codepen.io/favicon.ico" class="webkit-html-attribute-value webkit-html-resource-link" title="https://codepen.io/favicon.ico">/favicon.ico</a>"&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;meta content="authenticity_token" name="csrf-param"&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;meta content="htvmpojHMSn4EaNV8ZI/8oAHbuDB7GBVPouBgoMCoys=" name="csrf-token"&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;style type="text/css"&gt;&lt;/style&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;/head&gt;</li></ol><li title="" class="parent selected expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div>&lt;body class="no-mobile pc"&gt;</li><ol class="children expanded"><li title="" class="parent" draggable="true"><div class="selection selected" style="height: 14px;"></div>&lt;header class="main-header group"&gt;…&lt;/header&gt;</li><li title="" class="parent" draggable="true"><div class="selection selected" style="height: 14px;"></div>&lt;div class="page-wrap blackboard"&gt;…&lt;/div&gt;</li><li title="" class="parent" draggable="true">&lt;footer class="site-footer editor-footer"&gt;…&lt;/footer&gt;</li><ol class="children"><li title="" class="parent" draggable="true">&lt;div class="footer-left"&gt;…&lt;/div&gt;</li><li title="" class="parent" draggable="true">&lt;div class="footer-middle"&gt;…&lt;/div&gt;</li><li title="" class="parent" draggable="true">&lt;div class="footer-right"&gt;…&lt;/div&gt;</li><li title="" draggable="true">&lt;/footer&gt;</li></ol><li title="" class="parent" draggable="true">&lt;div id="resizer" class="resizer ui-draggable" style="top: 502px;"&gt;…&lt;/div&gt;</li><ol class="children"><li title="" draggable="true">&lt;span&gt;&lt;/span&gt;</li><li title="" draggable="true">&lt;/div&gt;</li></ol><li title="" class="parent" draggable="true">&lt;div id="keycommands" class="modal-message modal-neutral"&gt;…&lt;/div&gt;</li><ol class="children"><li title="" class="parent" draggable="true">&lt;section class="editor-commands"&gt;…&lt;/section&gt;</li><li title="" class="parent" draggable="true">&lt;section class="editor-commands"&gt;…&lt;/section&gt;</li><li title="" draggable="true">&lt;/div&gt;</li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;div id="overlay"&gt;&lt;/div&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;script async src="<a href="https://www.google-analytics.com/ga.js" class="webkit-html-attribute-value webkit-html-resource-link" title="https://www.google-analytics.com/ga.js">http://www.google-analytics.com/ga.js</a>"&gt;&lt;/script&gt;</li><li title="" class="parent expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div>&lt;script&gt;</li><ol class="children expanded"><li title="" draggable="true" class=""><div class="selection selected" style="height: 126px;"></div>	 var _gaq = _gaq || []; 	 _gaq.push(['_setAccount', 'UA-30102653-1']); 	 _gaq.push(['_trackPageview']); 	 (function() { 	 var ga = document.createElement('script'); ga.async = true; 	 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js'; 	 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 	 })(); 	</li><li title="" draggable="true">&lt;/script&gt;</li></ol><li title="" class="parent" draggable="true"><div class="selection selected" style="height: 14px;"></div>&lt;noscript&gt;…&lt;/noscript&gt;</li><ol class="children"><li title="" draggable="true">"
 &lt;div class="noscript-overlay" style="display: block;"&gt;&lt;/div&gt;
 &lt;div class="modal-message group modal-warning"&gt;
 &lt;div class="modal-title"&gt;This Site Totally Doesn't Work Without JavaScript.&lt;/div&gt;
 &lt;p&gt;Like, at all. Sorry. If you enable it and reload this page you'll be good to go. Need to know how? &lt;a href="https://enable-javascript.com/" target="_blank"&gt;Go here.&lt;/a&gt;&lt;/p&gt;
 &lt;/div&gt;
"</li><li title="" draggable="true">&lt;/noscript&gt;</li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;script src="<a href="https://assets.codepen.io/assets/common/everypage-1318be5e9f2fe2adef21bd4e46ecb173.js" class="webkit-html-attribute-value webkit-html-resource-link" title="https://assets.codepen.io/assets/common/everypage-1318be5e9f2fe2adef21bd4e46ecb173.js">http://assets.codepen.io/assets/common/everypage-1318be5e9f2fe2adef21bd4e46ecb173.js</a>" type="text/javascript"&gt;&lt;/script&gt;</li><li title="" class="parent" draggable="true"><div class="selection selected" style="height: 14px;"></div>&lt;script&gt;…&lt;/script&gt;</li><ol class="children"><li title="" draggable="true" class=""><div class="selection selected" style="height: 126px;"></div> __pageType = 'pen'; __pen = {"auto_run":true,"created_at":null,"css":"","css_external":"","css_pre_processor":"none","css_prefix_free":false,"css_starter":"neither","description":"","head":"","html":"","html_classes":"","html_pre_processor":"none","id":0,"js":"","js_external":"","js_library":"none","js_modernizr":false,"js_pre_processor":"none","parent":0,"session_hash":null,"slug":null,"slug_hash":"","title":"","updated_at":null,"user_id":1}; __tags = []; __user = { "username": "anon", "paid": false, "id": 1 }; __pen_user = {"username": "anon"}; </li><li title="" draggable="true">&lt;/script&gt;</li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div>&lt;script src="<a href="https://assets.codepen.io/assets/editor/pen/libs-cbc66b0f67b6cc4a3186b7c357cffa82.js" class="webkit-html-attribute-value webkit-html-resource-link" title="https://assets.codepen.io/assets/editor/pen/libs-cbc66b0f67b6cc4a3186b7c357cffa82.js">http://assets.codepen.io/assets/editor/pen/libs-cbc66b0f67b6cc4a3186b7c357cffa82.js</a>" type="text/javascript"&gt;&lt;/script&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div>&lt;script src="<a href="https://assets.codepen.io/assets/editor/pen/index-aba36d02ba817135352a3af35e31e6ba.js" class="webkit-html-attribute-value webkit-html-resource-link" title="https://assets.codepen.io/assets/editor/pen/index-aba36d02ba817135352a3af35e31e6ba.js">http://assets.codepen.io/assets/editor/pen/index-aba36d02ba817135352a3af35e31e6ba.js</a>" type="text/javascript"&gt;&lt;/script&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;ul class="typeahead dropdown-menu"&gt;&lt;/ul&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div>&lt;script src="<a href="https://assets.codepen.io/assets/editor/common/layout/layout-top-14e0a95272306eaca2acd28b06735f00.js" class="webkit-html-attribute-value webkit-html-resource-link" title="https://assets.codepen.io/assets/editor/common/layout/layout-top-14e0a95272306eaca2acd28b06735f00.js">http://assets.codepen.io/assets/editor/common/layout/layout-top-14e0a95272306eaca2acd28b06735f00.js</a>" type="text/javascript"&gt;&lt;/script&gt;</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;script style="display: none;" id="hiddenlpsubmitdiv"&gt;&lt;/script&gt;</li><li title="" class="parent" draggable="true">&lt;script&gt;…&lt;/script&gt;</li><ol class="children"><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>try{for(var lastpass_iter=0; lastpass_iter &lt; document.forms.length; lastpass_iter++){ var lastpass_f = document.forms[lastpass_iter]; if(typeof(lastpass_f.lpsubmitorig2)=="undefined"){ lastpass_f.lpsubmitorig2 = lastpass_f.submit; lastpass_f.submit = function(){ var form=this; var customEvent = document.createEvent("Event"); customEvent.initEvent("lpCustomEvent", true, true); var d = document.getElementById("hiddenlpsubmitdiv"); for(var i = 0; i &lt; document.forms.length; i++){ if(document.forms[i]==form){ d.innerText=i; } } d.dispatchEvent(customEvent); form.lpsubmitorig2(); } } }}catch(e){}</li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;/script&gt;</li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div>&lt;/body&gt;</li></ol><li title="" draggable="true">&lt;/html&gt;</li></ol></ol></div><div class="split-view-contents scroll-target split-view-contents-vertical split-view-sidebar-right" style="right: 0px; width: 474px;"><div class="fill visible"><div class="sidebar-pane-stack fill visible"><div class="pane-title expanded" tabindex="0">Computed Style<div class="sidebar-pane-toolbar"><label class="sidebar-pane-subtitle"><input type="checkbox">Show inherited</label></div></div><div class="sidebar-pane visible"><div class="body"><div class="styles-section monospace first-styles-section read-only computed-style expanded"><div class="header monospace hidden"><div class="subtitle"></div><div class="title"></div></div><ol class="properties properties-tree monospace"><li title="" class="inherited">-webkit-align-content: stretch;</li><li title="" class="inherited">-webkit-align-items: stretch;</li><li title="" class="inherited">-webkit-align-self: stretch;</li><li title="" class="inherited">-webkit-animation-delay: 0s;</li><li title="" class="inherited">-webkit-animation-direction: normal;</li><li title="" class="inherited">-webkit-animation-duration: 0s;</li><li title="" class="inherited">-webkit-animation-fill-mode: none;</li><li title="" class="inherited">-webkit-animation-iteration-count: 1;</li><li title="" class="inherited">-webkit-animation-name: none;</li><li title="" class="inherited">-webkit-animation-play-state: running;</li><li title="" class="inherited">-webkit-animation-timing-function: ease;</li><li title="" class="inherited">-webkit-app-region: no-drag;</li><li title="" class="inherited">-webkit-appearance: none;</li><li title="" class="inherited">-webkit-backface-visibility: visible;</li><li title="">-webkit-background-clip: border-box;</li><li title="" class="inherited">-webkit-background-composite: source-over;</li><li title="">-webkit-background-origin: padding-box;</li><li title="">-webkit-background-size: auto;</li><li title="" class="inherited">-webkit-border-fit: border;</li><li title="" class="inherited">-webkit-border-horizontal-spacing: 0px;</li><li title="" class="inherited">-webkit-border-image: none;</li><li title="" class="inherited">-webkit-border-vertical-spacing: 0px;</li><li title="" class="inherited">-webkit-box-align: stretch;</li><li title="" class="inherited">-webkit-box-decoration-break: slice;</li><li title="" class="inherited">-webkit-box-direction: normal;</li><li title="" class="inherited">-webkit-box-flex: 0;</li><li title="" class="inherited">-webkit-box-flex-group: 1;</li><li title="" class="inherited">-webkit-box-lines: single;</li><li title="" class="inherited">-webkit-box-ordinal-group: 1;</li><li title="" class="inherited">-webkit-box-orient: horizontal;</li><li title="" class="inherited">-webkit-box-pack: start;</li><li title="" class="inherited">-webkit-box-reflect: none;</li><li title="" class="inherited">-webkit-box-shadow: none;</li><li title="" class="inherited">-webkit-clip-path: none;</li><li title="" class="inherited">-webkit-color-correction: default;</li><li title="" class="inherited">-webkit-column-axis: auto;</li><li title="" class="inherited">-webkit-column-break-after: auto;</li><li title="" class="inherited">-webkit-column-break-before: auto;</li><li title="" class="inherited">-webkit-column-break-inside: auto;</li><li title="" class="inherited">-webkit-column-count: auto;</li><li title="" class="inherited">-webkit-column-gap: normal;</li><li title="" class="inherited">-webkit-column-progression: normal;</li><li title="" class="inherited">-webkit-column-rule-color: rgb(255, 255, 255);</li><li title="" class="inherited">-webkit-column-rule-style: none;</li><li title="" class="inherited">-webkit-column-rule-width: 0px;</li><li title="" class="inherited">-webkit-column-span: none;</li><li title="" class="inherited">-webkit-column-width: auto;</li><li title="" class="inherited">-webkit-filter: none;</li><li title="" class="inherited">-webkit-flex-basis: auto;</li><li title="" class="inherited">-webkit-flex-direction: row;</li><li title="" class="inherited">-webkit-flex-grow: 0;</li><li title="" class="inherited">-webkit-flex-shrink: 1;</li><li title="" class="inherited">-webkit-flex-wrap: nowrap;</li><li title="" class="inherited">-webkit-flow-from: none;</li><li title="" class="inherited">-webkit-flow-into: none;</li><li title="" class="inherited">-webkit-font-kerning: auto;</li><li title="" class="inherited">-webkit-font-smoothing: auto;</li><li title="" class="inherited">-webkit-font-variant-ligatures: normal;</li><li title="" class="inherited">-webkit-grid-auto-flow: none;</li><li title="" class="inherited">-webkit-grid-column: auto;</li><li title="" class="inherited">-webkit-grid-columns: none;</li><li title="" class="inherited">-webkit-grid-row: auto;</li><li title="" class="inherited">-webkit-grid-rows: none;</li><li title="" class="inherited">-webkit-highlight: none;</li><li title="" class="inherited">-webkit-hyphenate-character: auto;</li><li title="" class="inherited">-webkit-hyphenate-limit-after: auto;</li><li title="" class="inherited">-webkit-hyphenate-limit-before: auto;</li><li title="" class="inherited">-webkit-hyphenate-limit-lines: no-limit;</li><li title="" class="inherited">-webkit-hyphens: manual;</li><li title="" class="inherited">-webkit-justify-content: flex-start;</li><li title="" class="inherited">-webkit-line-align: none;</li><li title="" class="inherited">-webkit-line-box-contain: block inline replaced;</li><li title="" class="inherited">-webkit-line-break: auto;</li><li title="" class="inherited">-webkit-line-clamp: none;</li><li title="" class="inherited">-webkit-line-grid: none;</li><li title="" class="inherited">-webkit-line-snap: none;</li><li title="" class="inherited">-webkit-locale: en;</li><li title="" class="inherited">-webkit-margin-after-collapse: collapse;</li><li title="" class="inherited">-webkit-margin-before-collapse: collapse;</li><li title="" class="inherited">-webkit-marquee-direction: auto;</li><li title="" class="inherited">-webkit-marquee-increment: 6px;</li><li title="" class="inherited">-webkit-marquee-repetition: infinite;</li><li title="" class="inherited">-webkit-marquee-style: scroll;</li><li title="" class="inherited">-webkit-mask-box-image: none;</li><li title="" class="inherited">-webkit-mask-box-image-outset: 0px;</li><li title="" class="inherited">-webkit-mask-box-image-repeat: stretch;</li><li title="" class="inherited">-webkit-mask-box-image-slice: 0 fill;</li><li title="" class="inherited">-webkit-mask-box-image-source: none;</li><li title="" class="inherited">-webkit-mask-box-image-width: auto;</li><li title="" class="inherited">-webkit-mask-clip: border-box;</li><li title="" class="inherited">-webkit-mask-composite: source-over;</li><li title="" class="inherited">-webkit-mask-image: none;</li><li title="" class="inherited">-webkit-mask-origin: border-box;</li><li title="" class="inherited">-webkit-mask-position: 0% 0%;</li><li title="" class="inherited">-webkit-mask-repeat: repeat;</li><li title="" class="inherited">-webkit-mask-size: auto;</li><li title="" class="inherited">-webkit-nbsp-mode: normal;</li><li title="" class="inherited">-webkit-order: 0;</li><li title="" class="inherited">-webkit-perspective: none;</li><li title="" class="inherited">-webkit-perspective-origin: 845px 446px;</li><li title="" class="inherited">-webkit-print-color-adjust: economy;</li><li title="" class="inherited">-webkit-region-break-after: auto;</li><li title="" class="inherited">-webkit-region-break-before: auto;</li><li title="" class="inherited">-webkit-region-break-inside: auto;</li><li title="" class="inherited">-webkit-region-overflow: auto;</li><li title="" class="inherited">-webkit-rtl-ordering: logical;</li><li title="" class="inherited">-webkit-shape-inside: auto;</li><li title="" class="inherited">-webkit-shape-margin: 0px;</li><li title="" class="inherited">-webkit-shape-outside: auto;</li><li title="" class="inherited">-webkit-shape-padding: 0px;</li><li title="" class="inherited">-webkit-svg-shadow: none;</li><li title="" class="inherited">-webkit-tap-highlight-color: rgba(0, 0, 0, 0.180392);</li><li title="" class="inherited">-webkit-text-combine: none;</li><li title="" class="inherited">-webkit-text-decorations-in-effect: none;</li><li title="" class="inherited">-webkit-text-emphasis-color: rgb(255, 255, 255);</li><li title="" class="inherited">-webkit-text-emphasis-position: over;</li><li title="" class="inherited">-webkit-text-emphasis-style: none;</li><li title="" class="inherited">-webkit-text-fill-color: rgb(255, 255, 255);</li><li title="" class="inherited">-webkit-text-orientation: vertical-right;</li><li title="" class="inherited">-webkit-text-security: none;</li><li title="" class="inherited">-webkit-text-stroke-color: rgb(255, 255, 255);</li><li title="" class="inherited">-webkit-text-stroke-width: 0px;</li><li title="" class="inherited">-webkit-transform: none;</li><li title="" class="inherited">-webkit-transform-origin: 845px 446px;</li><li title="" class="inherited">-webkit-transform-style: flat;</li><li title="" class="inherited">-webkit-transition-delay: 0s;</li><li title="" class="inherited">-webkit-transition-duration: 0s;</li><li title="" class="inherited">-webkit-transition-property: all;</li><li title="" class="inherited">-webkit-transition-timing-function: ease;</li><li title="" class="inherited">-webkit-user-drag: auto;</li><li title="" class="inherited">-webkit-user-modify: read-only;</li><li title="" class="inherited">-webkit-user-select: text;</li><li title="" class="inherited">-webkit-wrap-flow: auto;</li><li title="" class="inherited">-webkit-wrap-through: wrap;</li><li title="" class="inherited">-webkit-writing-mode: horizontal-tb;</li><li title="" class="inherited">alignment-baseline: auto;</li><li title="" class="parent">background-attachment: scroll;</li><li title="" class="parent">background-clip: border-box;</li><li title="" class="parent">background-color: rgb(51, 51, 51);</li><li title="" class="parent">background-image: url(<a href="https://assets.codepen.io/images/classy_fabric.png" class="webkit-html-resource-link">https://assets.codepen.io/images/classy_fabric.png</a>);</li><li title="" class="parent">background-origin: padding-box;</li><li title="" class="inherited">background-position: 0% 0%;</li><li title="" class="inherited">background-repeat: repeat;</li><li title="" class="parent">background-size: auto;</li><li title="" class="inherited">baseline-shift: baseline;</li><li title="" class="inherited">border-bottom-color: rgb(255, 255, 255);</li><li title="" class="inherited">border-bottom-left-radius: 0px;</li><li title="" class="inherited">border-bottom-right-radius: 0px;</li><li title="" class="inherited">border-bottom-style: none;</li><li title="" class="inherited">border-bottom-width: 0px;</li><li title="" class="inherited">border-collapse: separate;</li><li title="" class="inherited">border-image-outset: 0px;</li><li title="" class="inherited">border-image-repeat: stretch;</li><li title="" class="inherited">border-image-slice: 100%;</li><li title="" class="inherited">border-image-source: none;</li><li title="" class="inherited">border-image-width: 1;</li><li title="" class="inherited">border-left-color: rgb(255, 255, 255);</li><li title="" class="inherited">border-left-style: none;</li><li title="" class="inherited">border-left-width: 0px;</li><li title="" class="inherited">border-right-color: rgb(255, 255, 255);</li><li title="" class="inherited">border-right-style: none;</li><li title="" class="inherited">border-right-width: 0px;</li><li title="" class="inherited">border-top-color: rgb(255, 255, 255);</li><li title="" class="inherited">border-top-left-radius: 0px;</li><li title="" class="inherited">border-top-right-radius: 0px;</li><li title="" class="inherited">border-top-style: none;</li><li title="" class="inherited">border-top-width: 0px;</li><li title="" class="inherited">bottom: auto;</li><li title="" class="inherited">box-shadow: none;</li><li title="" class="parent">box-sizing: border-box;</li><li title="" class="inherited">caption-side: top;</li><li title="" class="inherited">clear: none;</li><li title="" class="inherited">clip: auto;</li><li title="" class="inherited">clip-path: none;</li><li title="" class="inherited">clip-rule: nonzero;</li><li title="" class="parent">color: rgb(255, 255, 255);</li><li title="" class="inherited">color-interpolation: srgb;</li><li title="" class="inherited">color-interpolation-filters: linearrgb;</li><li title="" class="inherited">color-rendering: auto;</li><li title="" class="inherited">cursor: auto;</li><li title="" class="inherited">direction: ltr;</li><li title="" class="parent">display: block;</li><li title="" class="inherited">dominant-baseline: auto;</li><li title="" class="inherited">empty-cells: show;</li><li title="" class="inherited">fill: #000000;</li><li title="" class="inherited">fill-opacity: 1;</li><li title="" class="inherited">fill-rule: nonzero;</li><li title="" class="inherited">filter: none;</li><li title="" class="inherited">float: none;</li><li title="" class="inherited">flood-color: rgb(0, 0, 0);</li><li title="" class="inherited">flood-opacity: 1;</li><li title="" class="parent">font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, sans-serif;</li><li title="" class="parent">font-size: 13px;</li><li title="" class="inherited">font-style: normal;</li><li title="" class="inherited">font-variant: normal;</li><li title="" class="inherited">font-weight: normal;</li><li title="" class="inherited">glyph-orientation-horizontal: 0deg;</li><li title="" class="inherited">glyph-orientation-vertical: auto;</li><li title="" class="parent">height: 892px;</li><li title="" class="inherited">image-rendering: auto;</li><li title="" class="inherited">kerning: 0;</li><li title="" class="inherited">left: auto;</li><li title="" class="inherited">letter-spacing: normal;</li><li title="" class="inherited">lighting-color: rgb(255, 255, 255);</li><li title="" class="parent">line-height: 18px;</li><li title="" class="inherited">list-style-image: none;</li><li title="" class="inherited">list-style-position: outside;</li><li title="" class="inherited">list-style-type: disc;</li><li title="" class="parent">margin-bottom: 0px;</li><li title="" class="parent">margin-left: 0px;</li><li title="" class="parent">margin-right: 0px;</li><li title="" class="parent">margin-top: 0px;</li><li title="" class="inherited">marker-end: none;</li><li title="" class="inherited">marker-mid: none;</li><li title="" class="inherited">marker-start: none;</li><li title="" class="inherited">mask: none;</li><li title="" class="inherited">mask-type: luminance;</li><li title="" class="inherited">max-height: none;</li><li title="" class="inherited">max-width: none;</li><li title="" class="inherited">min-height: 0px;</li><li title="" class="parent">min-width: 1000px;</li><li title="" class="inherited">opacity: 1;</li><li title="" class="inherited">orphans: auto;</li><li title="" class="inherited">outline-color: rgb(255, 255, 255);</li><li title="" class="inherited">outline-offset: 0px;</li><li title="" class="inherited">outline-style: none;</li><li title="" class="inherited">outline-width: 0px;</li><li title="" class="inherited">overflow-wrap: normal;</li><li title="" class="parent">overflow-x: hidden;</li><li title="" class="parent">overflow-y: hidden;</li><li title="" class="parent">padding-bottom: 0px;</li><li title="" class="parent">padding-left: 0px;</li><li title="" class="parent">padding-right: 0px;</li><li title="" class="parent">padding-top: 0px;</li><li title="" class="inherited">page-break-after: auto;</li><li title="" class="inherited">page-break-before: auto;</li><li title="" class="inherited">page-break-inside: auto;</li><li title="" class="inherited">pointer-events: auto;</li><li title="" class="inherited">position: static;</li><li title="" class="inherited">resize: none;</li><li title="" class="inherited">right: auto;</li><li title="" class="inherited">shape-rendering: auto;</li><li title="" class="inherited">speak: normal;</li><li title="" class="inherited">stop-color: rgb(0, 0, 0);</li><li title="" class="inherited">stop-opacity: 1;</li><li title="" class="inherited">stroke: none;</li><li title="" class="inherited">stroke-dasharray: none;</li><li title="" class="inherited">stroke-dashoffset: 0;</li><li title="" class="inherited">stroke-linecap: butt;</li><li title="" class="inherited">stroke-linejoin: miter;</li><li title="" class="inherited">stroke-miterlimit: 4;</li><li title="" class="inherited">stroke-opacity: 1;</li><li title="" class="inherited">stroke-width: 1;</li><li title="" class="inherited">tab-size: 8;</li><li title="" class="inherited">table-layout: auto;</li><li title="" class="inherited">text-align: start;</li><li title="" class="inherited">text-anchor: start;</li><li title="" class="inherited">text-decoration: none;</li><li title="" class="inherited">text-indent: 0px;</li><li title="" class="inherited">text-overflow: clip;</li><li title="" class="inherited">text-rendering: auto;</li><li title="" class="inherited">text-shadow: none;</li><li title="" class="inherited">text-transform: none;</li><li title="" class="inherited">top: auto;</li><li title="" class="inherited">transition-delay: 0s;</li><li title="" class="inherited">transition-duration: 0s;</li><li title="" class="inherited">transition-property: all;</li><li title="" class="inherited">transition-timing-function: ease;</li><li title="" class="inherited">unicode-bidi: normal;</li><li title="" class="inherited">vector-effect: none;</li><li title="" class="inherited">vertical-align: baseline;</li><li title="" class="inherited">visibility: visible;</li><li title="" class="inherited">white-space: normal;</li><li title="" class="inherited">widows: auto;</li><li title="">width: 1690px;</li><li title="" class="inherited">word-break: normal;</li><li title="" class="inherited">word-spacing: 0px;</li><li title="" class="inherited">word-wrap: normal;</li><li title="" class="inherited">writing-mode: lr-tb;</li><li title="" class="inherited">z-index: auto;</li><li title="" class="inherited">zoom: 1;</li></ol></div></div></div><div class="pane-title expanded" tabindex="0">Styles<div class="sidebar-pane-toolbar"><select class="select-settings"><option value="original" label="As authored"></option><option value="hex" label="Hex Colors"></option><option value="rgb" label="RGB Colors"></option><option value="hsl" label="HSL Colors"></option></select><button class="pane-title-button element-state toggled" title="Toggle Element State"></button><button class="pane-title-button add" id="add-style-button-test-id" title="New Style Rule"></button></div></div><div class="sidebar-pane visible"><div class="body"><div class="styles-element-state-pane source-code expanded"><table><tr><td><label><input type="checkbox">:active</label></td><td><label><input type="checkbox">:hover</label></td></tr><tr><td><label><input type="checkbox">:focus</label></td><td><label><input type="checkbox">:visited</label></td></tr></table></div><div><div class="styles-section matched-styles monospace first-styles-section expanded"><div class="header monospace"><div class="subtitle"></div><div class="title"><div><div class="subtitle"></div>element.style {</div></div></div><ol class="properties properties-tree monospace"></ol><div>}</div></div><div class="sidebar-separator">Matched CSS Rules</div><div class="styles-section matched-styles monospace first-styles-section expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div class="media"><div class="subtitle"><a href="https://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="https://codepen.io/pen/" style="float: right;">codepen.io</a></div>media="screen"</div><div><div class="subtitle"><a href="https://assets.codepen.io/assets/editor/layouts/top-4ccf61093ae9d82c6f003dfead1bc631.css" class="webkit-html-resource-link" title="https://assets.codepen.io/assets/editor/layouts/top-4ccf61093ae9d82c6f003dfead1bc631.css:1" data-uncopyable="top-4ccf61093ae9d82c6f003dfead1bc631.css:1"></a></div>body {</div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox">min-width: 1000px !important;</li></ol><div>}</div></div><div class="styles-section matched-styles monospace expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div class="media"><div class="subtitle"><a href="https://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="https://codepen.io/pen/" style="float: right;">codepen.io</a></div>media="all"</div><div><div class="subtitle"><a href="https://assets.codepen.io/assets/editor/editor-0a3b8248b92b2bea693c3b306ffa7b1a.css" class="webkit-html-resource-link" title="https://assets.codepen.io/assets/editor/editor-0a3b8248b92b2bea693c3b306ffa7b1a.css:1" data-uncopyable="editor-0a3b8248b92b2bea693c3b306ffa7b1a.css:1"></a></div>html, body {</div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox">overflow: hidden;</li></ol><div>}</div></div><div class="styles-section matched-styles monospace expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div class="media"><div class="subtitle"><a href="https://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="https://codepen.io/pen/" style="float: right;">codepen.io</a></div>media="all"</div><div><div class="subtitle"><a href="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div>body {</div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox">background: #333 url(<a href="https://assets.codepen.io/images/classy_fabric.png" class="webkit-html-resource-link">/images/classy_fabric.png</a>);</li></ol><div>}</div></div><div class="styles-section matched-styles monospace expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div class="media"><div class="subtitle"><a href="https://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="https://codepen.io/pen/" style="float: right;">codepen.io</a></div>media="all"</div><div><div class="subtitle"><a href="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div>html, body {</div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox">height: 100%;</li><li title="" class="overloaded not-parsed-ok"><img class="exclamation-mark" title="Unknown property name.">-webkit-overflow-scrolling: touch;</li></ol><div>}</div></div><div class="styles-section matched-styles monospace expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div class="media"><div class="subtitle"><a href="https://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="https://codepen.io/pen/" style="float: right;">codepen.io</a></div>media="all"</div><div><div class="subtitle"><a href="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div>body {</div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox">font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;</li><li title=""><input class="enabled-button" type="checkbox">font-size: 13px;</li><li title=""><input class="enabled-button" type="checkbox">line-height: 1.4;</li><li title=""><input class="enabled-button" type="checkbox">color: white;</li></ol><div>}</div></div><div class="styles-section matched-styles monospace expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div class="media"><div class="subtitle"><a href="https://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="https://codepen.io/pen/" style="float: right;">codepen.io</a></div>media="all"</div><div><div class="subtitle"><a href="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div>* {</div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox">margin: 0;</li><li title="" class="parent"><input class="enabled-button" type="checkbox">padding: 0;</li><li title="" class="inactive"><input class="enabled-button" type="checkbox">-webkit-box-sizing: border-box;</li><li title="" class="overloaded not-parsed-ok"><img class="exclamation-mark" title="Unknown property name.">-moz-box-sizing: border-box;</li><li title=""><input class="enabled-button" type="checkbox">box-sizing: border-box;</li></ol><div>}</div></div><div class="styles-section matched-styles monospace read-only expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div><div class="subtitle">user agent stylesheet</div>body {</div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox">display: block;</li><li title="" class="parent overloaded"><input class="enabled-button" type="checkbox">margin: 8px;</li></ol><div>}</div></div><div class="sidebar-separator">Pseudo ::-webkit-scrollbar element</div><div class="styles-section matched-styles monospace first-styles-section expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div class="media"><div class="subtitle"><a href="https://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="https://codepen.io/pen/" style="float: right;">codepen.io</a></div>media="all"</div><div><div class="subtitle"><a href="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div>::-webkit-scrollbar {</div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox">width: 8px;</li><li title=""><input class="enabled-button" type="checkbox">height: 8px;</li></ol><div>}</div></div><div class="sidebar-separator">Pseudo ::-webkit-file-upload-button element</div><div class="styles-section matched-styles monospace first-styles-section expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div class="media"><div class="subtitle"><a href="https://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="https://codepen.io/pen/" style="float: right;">codepen.io</a></div>media="all"</div><div><div class="subtitle"><a href="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div>::-webkit-scrollbar-thumb {</div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox">border-right: 3px solid transparent;</li></ol><div>}</div></div><div class="sidebar-separator">Pseudo ::-webkit-slider-thumb element</div><div class="styles-section matched-styles monospace first-styles-section expanded"><div class="header monospace"><div class="subtitle"></div><div class="title styles-selector"><div class="media"><div class="subtitle"><a href="https://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="https://codepen.io/pen/" style="float: right;">codepen.io</a></div>media="all"</div><div><div class="subtitle"><a href="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="https://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div>::-webkit-scrollbar-track {</div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox">background: none;</li></ol><div>}</div></div></div></div></div><div class="pane-title expanded" tabindex="0">Metrics<div class="sidebar-pane-toolbar"></div></div><div class="sidebar-pane visible"><div class="body"><div class="metrics"><div class="margin" style="background-color: rgba(246, 178, 107, 0.658824);"><div class="label">margin</div><div class="top">‒</div> <div class="left">‒</div><div class="border" style="background-color: rgba(255, 229, 153, 0.658824);"><div class="label">border</div><div class="top">‒</div> <div class="left">‒</div><div class="padding" style="background-color: rgba(147, 196, 125, 0.54902);"><div class="label">padding</div><div class="top">‒</div> <div class="left">‒</div><div class="content" style="background-color: rgba(111, 168, 220, 0.658824);">1690 × 892</div><div class="right">‒</div> <div class="bottom">‒</div></div><div class="right">‒</div> <div class="bottom">‒</div></div><div class="right">‒</div> <div class="bottom">‒</div></div></div></div></div><div class="pane-title expanded" tabindex="0">Properties<div class="sidebar-pane-toolbar"></div></div><div class="sidebar-pane visible"><div class="body"><div class="section"><div class="header monospace"><div class="subtitle"></div><div class="title">body.no-mobile pc</div></div><ol class="properties properties-tree monospace"></ol></div><div class="section"><div class="header monospace"><div class="subtitle"></div><div class="title">HTMLBodyElement</div></div><ol class="properties properties-tree monospace"></ol></div><div class="section"><div class="header monospace"><div class="subtitle"></div><div class="title">HTMLElement</div></div><ol class="properties properties-tree monospace"></ol></div><div class="section"><div class="header monospace"><div class="subtitle"></div><div class="title">Element</div></div><ol class="properties properties-tree monospace"></ol></div><div class="section"><div class="header monospace"><div class="subtitle"></div><div class="title">Node</div></div><ol class="properties properties-tree monospace"></ol></div><div class="section"><div class="header monospace"><div class="subtitle"></div><div class="title">Object</div></div><ol class="properties properties-tree monospace"></ol></div></div></div><div class="pane-title" tabindex="0">DOM Breakpoints<div class="sidebar-pane-toolbar"></div></div><div class="pane-title" tabindex="0">Event Listeners<div class="sidebar-pane-toolbar"><select class="select-filter"><option value="all" label="All Nodes"></option><option value="selected" label="Selected Node Only"></option></select></div></div></div></div></div><div class="split-view-resizer split-view-resizer-vertical" style="right: 471.5px;"></div></div></div></div></div></div>
 <div id="drawer"><div id="drawer-contents" class="drawer-contents"></div></div>
 <div id="main-status-bar" class="status-bar">
 <button class="dock-status-bar-item status-bar-item toggled-bottom" title="Dock to main window."><div class="glyph"></div><div class="glyph shadow"></div><div class="fill long-click-glyph"></div><div class="fill long-click-glyph shadow"></div></button><button class="console-status-bar-item status-bar-item" title="Show console."><div class="glyph"></div><div class="glyph shadow"></div></button><button class="node-search-status-bar-item status-bar-item" title="Select an element in the page to inspect it."><div class="glyph"></div><div class="glyph shadow"></div></button><div id="bottom-status-bar-container">
 <div id="panel-status-bar"><div><div class="crumbs">body.no-mobile.pchtml</div></div></div>
 </div>
 <div id="error-warning-count" class="hidden"></div>
 <button class="settings-status-bar-item status-bar-item" title="Settings"><div class="glyph"></div><div class="glyph shadow"></div></button></div>

</body>