Skip to content

Instantly share code, notes, and snippets.

@esironal

esironal/ChromeDevTools Theme.markdown

Created October 26, 2015 05:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save esironal/6cb4ef321ee890d535b1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save esironal/6cb4ef321ee890d535b1 to your computer and use it in GitHub Desktop.
Download ZIP
ChromeDevTools Theme
Raw
ChromeDevTools Theme.markdown
Raw
index.html
<!--
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 <[email protected]>
* 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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/deleteIcon.png);
}
#workspace-tab-content .workspace-settings-row .add-button {
background-image: url(http://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 <[email protected]>
*
* 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(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png);
}
.styles-section.computed-style .properties li.parent::before {
content: url(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png) !important;
}
.event-bars .event-bar.expanded .header::before {
content: url(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/checker.png);
-webkit-user-select: text;
-webkit-user-drag: auto;
}
/*
* Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.
* Copyright (C) 2009 Anthony Ricaud <[email protected]>
*
* 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.
*/
.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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentEnd.png) 0 2 0 2;
}
.crumbs .crumb.selected {
-webkit-border-image: url(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentSelectedEnd.png) 0 2 0 2;
}
.crumbs .crumb:hover {
-webkit-border-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentHover.png) 0 12 0 2;
color: black;
}
.crumbs .crumb.end:hover {
-webkit-border-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentHoverEnd.png) 0 2 0 2;
}
</style>
<style>#toolbar { background-image: none !important; background-color: rgba(73,82,81,1) !important; } .toolbar-label { color: rgba(240,222,194,1) !important; text-shadow: none; }
/* 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 */
/*
* Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved.
* Copyright (C) 2009 Anthony Ricaud <[email protected]>
*
* 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.
*/
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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/userInputIcon.png);
}
.console-user-command-result.console-log-level::before {
background-image: url(http://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(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchSmallBrightBlue.png);
}
.console-error-level::before {
background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/errorIcon.png);
}
.console-warning-level::before {
background-image: url(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
}
.console-group-messages .section.expanded .header::before {
content: url(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
}
.outline-disclosure ol:focus li.parent.selected::before {
content: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleWhite.png);
}
.outline-disclosure ol.search-match-found li.parent.selected::before {
content: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleWhite.png);
}
.outline-disclosure li.parent.expanded::before {
content: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleBlack.png);
}
.outline-disclosure ol:focus li.parent.expanded.selected::before {
content: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleWhite.png);
}
.outline-disclosure ol.search-match-found li.parent.expanded.selected::before {
content: url(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleBlack.png);
opacity: 0.8;
}
.section.expanded .header::before {
content: url(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/paneSettingsButtons.png);
}
.sidebar-pane-toolbar > select.select-filter {
background-image: url(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/paneAddButtons.png);
}
.sidebar-pane-toolbar > .pane-title-button.element-state {
background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/paneElementStateButtons.png);
}
.sidebar-pane-toolbar > .pane-title-button.refresh {
background-image: url(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightBlack.png);
}
body.inactive .sidebar-tree-item.expanded .disclosure-button {
background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallDownBlack.png);
}
body.inactive .sidebar-tree-item .disclosure-button:active {
background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightDownBlack.png);
}
.sidebar-tree-item.selected .disclosure-button {
background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightWhite.png) !important;
}
.sidebar-tree-item.expanded .disclosure-button {
background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallDown.png);
}
.sidebar-tree-item.selected.expanded .disclosure-button {
background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallDownWhite.png) !important;
}
.sidebar-tree-item.selected .disclosure-button:active {
background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/disclosureTriangleSmallRightDownWhite.png) !important;
}
.sidebar-tree-item .disclosure-button:active {
background-image: url(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchSmallBlue.png);
}
:focus li.selected .bubble.search-matches {
background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/searchSmallBrightBlue.png);
}
body.inactive li.selected .bubble.search-matches {
background-image: url(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://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(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentSelectedEndChromium.png) 0 2 0 2;
}
.crumbs .crumb:hover {
-webkit-border-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/segmentHoverChromium.png) 0 12 0 2;
}
.crumbs .crumb.end:hover {
-webkit-border-image: url(http://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 - http://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><span class="highlight"><span class="webkit-html-doctype">&lt;!DOCTYPE html&gt;</span></span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 42px;"></div><span class="highlight"><span class="webkit-html-comment">&lt;!--[if lte IE 9]&gt;
&lt;html class="ie" lang="en"&gt;
&lt;![endif]--&gt;</span></span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-comment">&lt;!--[if gt IE 9]&gt;&lt;!--&gt;</span></span></li><li title="" class="parent expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">html</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">lang</span>=​"<span class="webkit-html-attribute-value">en</span>"</span>&gt;</span>​</span></li><ol class="children expanded"><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-comment">&lt;!--&lt;![endif]--&gt;</span></span></li><li title="" class="parent expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">head</span>&gt;</span>​</span></li><ol class="children expanded"><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">meta</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">charset</span>=​"<span class="webkit-html-attribute-value">UTF-8</span>"</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">title</span>&gt;</span>​<span class="webkit-html-text-node">CodePen - Pen</span>​<span class="webkit-html-tag">&lt;<span>/title</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">link</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">href</span>=​"<a href="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-attribute-value webkit-html-resource-link" title="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css">http:​/​/​assets.codepen.io/​assets/​global/​global-fdd4442f405de2e944cde84e37934972.css</a>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">media</span>=​"<span class="webkit-html-attribute-value">all</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">rel</span>=​"<span class="webkit-html-attribute-value">stylesheet</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">type</span>=​"<span class="webkit-html-attribute-value">text/​css</span>"</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">link</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">href</span>=​"<a href="http://assets.codepen.io/assets/editor/editor-0a3b8248b92b2bea693c3b306ffa7b1a.css" class="webkit-html-attribute-value webkit-html-resource-link" title="http://assets.codepen.io/assets/editor/editor-0a3b8248b92b2bea693c3b306ffa7b1a.css">http:​/​/​assets.codepen.io/​assets/​editor/​editor-0a3b8248b92b2bea693c3b306ffa7b1a.css</a>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">media</span>=​"<span class="webkit-html-attribute-value">all</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">rel</span>=​"<span class="webkit-html-attribute-value">stylesheet</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">type</span>=​"<span class="webkit-html-attribute-value">text/​css</span>"</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">meta</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">name</span>=​"<span class="webkit-html-attribute-value">description</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">content</span>=​"<span class="webkit-html-attribute-value">...</span>"</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">link</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">href</span>=​"<a href="http://assets.codepen.io/assets/editor/themes/twilight-3bb7492f6c78725bc526ac65384b7d6d.css" class="webkit-html-attribute-value webkit-html-resource-link" title="http://assets.codepen.io/assets/editor/themes/twilight-3bb7492f6c78725bc526ac65384b7d6d.css">http:​/​/​assets.codepen.io/​assets/​editor/​themes/​twilight-3bb7492f6c78725bc526ac65384b7d6d.css</a>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">media</span>=​"<span class="webkit-html-attribute-value">screen</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">rel</span>=​"<span class="webkit-html-attribute-value">stylesheet</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">type</span>=​"<span class="webkit-html-attribute-value">text/​css</span>"</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">link</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">href</span>=​"<a href="http://assets.codepen.io/assets/editor/layouts/top-4ccf61093ae9d82c6f003dfead1bc631.css" class="webkit-html-attribute-value webkit-html-resource-link" title="http://assets.codepen.io/assets/editor/layouts/top-4ccf61093ae9d82c6f003dfead1bc631.css">http:​/​/​assets.codepen.io/​assets/​editor/​layouts/​top-4ccf61093ae9d82c6f003dfead1bc631.css</a>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">media</span>=​"<span class="webkit-html-attribute-value">screen</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">rel</span>=​"<span class="webkit-html-attribute-value">stylesheet</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">type</span>=​"<span class="webkit-html-attribute-value">text/​css</span>"</span>&gt;</span>​</span></li><li title="" class="parent expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">style</span>&gt;</span>​</span></li><ol class="children expanded"><li title="" draggable="true" class=""><div class="selection selected" style="height: 112px;"></div><span class="highlight"><span class="webkit-html-text-node webkit-html-css-node"> .<span class="webkit-css-selector">CodeMirror</span> <span class="webkit-block-start">{</span><br> <span class="webkit-css-property">font-family</span>: <span class="webkit-css-string">"Courier New"</span>, Courier, MonoSpace;<br> <span class="webkit-block-end">}</span><br><br> .<span class="webkit-css-selector">CodeMirror</span> <span class="webkit-block-start">{</span><br> <span class="webkit-css-property">font-size</span>: <span class="webkit-css-number">15px</span>;<br> <span class="webkit-block-end">}</span><br><br></span></span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/style</span>&gt;</span>​</span></li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">link</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">rel</span>=​"<span class="webkit-html-attribute-value">shortcut icon</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">href</span>=​"<a href="http://codepen.io/favicon.ico" class="webkit-html-attribute-value webkit-html-resource-link" title="http://codepen.io/favicon.ico">/​favicon.ico</a>"</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">meta</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">content</span>=​"<span class="webkit-html-attribute-value">authenticity_token</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">name</span>=​"<span class="webkit-html-attribute-value">csrf-param</span>"</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">meta</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">content</span>=​"<span class="webkit-html-attribute-value">htvmpojHMSn4EaNV8ZI/​8oAHbuDB7GBVPouBgoMCoys=</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">name</span>=​"<span class="webkit-html-attribute-value">csrf-token</span>"</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">style</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">type</span>=​"<span class="webkit-html-attribute-value">text/​css</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/style</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/head</span>&gt;</span>​</span></li></ol><li title="" class="parent selected expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">body</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">no-mobile pc</span>"</span>&gt;</span>​</span></li><ol class="children expanded"><li title="" class="parent" draggable="true"><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">header</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">main-header group</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/header</span>&gt;</span>​</span></li><li title="" class="parent" draggable="true"><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">page-wrap blackboard</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span></li><li title="" class="parent" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">footer</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">site-footer editor-footer</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/footer</span>&gt;</span>​</span></li><ol class="children"><li title="" class="parent" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">footer-left</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span></li><li title="" class="parent" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">footer-middle</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span></li><li title="" class="parent" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">footer-right</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span></li><li title="" draggable="true"><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/footer</span>&gt;</span>​</span></li></ol><li title="" class="parent" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">id</span>=​"<span class="webkit-html-attribute-value">resizer</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">resizer ui-draggable</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">style</span>=​"<span class="webkit-html-attribute-value">top:​ 502px;​</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span></li><ol class="children"><li title="" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">span</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/span</span>&gt;</span>​</span></li><li title="" draggable="true"><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/div</span>&gt;</span>​</span></li></ol><li title="" class="parent" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">id</span>=​"<span class="webkit-html-attribute-value">keycommands</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">modal-message modal-neutral</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span></li><ol class="children"><li title="" class="parent" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">section</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">editor-commands</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/section</span>&gt;</span>​</span></li><li title="" class="parent" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">section</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">editor-commands</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/section</span>&gt;</span>​</span></li><li title="" draggable="true"><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/div</span>&gt;</span>​</span></li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">id</span>=​"<span class="webkit-html-attribute-value">overlay</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">script</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">async</span><span class="webkit-html-attribute-value"></span></span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">src</span>=​"<a href="http://www.google-analytics.com/ga.js" class="webkit-html-attribute-value webkit-html-resource-link" title="http://www.google-analytics.com/ga.js">http:​/​/​www.google-analytics.com/​ga.js</a>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/script</span>&gt;</span>​</span></li><li title="" class="parent expanded" draggable="true"><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">script</span>&gt;</span>​</span></li><ol class="children expanded"><li title="" draggable="true" class=""><div class="selection selected" style="height: 126px;"></div><span class="highlight"><span class="webkit-html-text-node webkit-html-js-node"> <span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">var</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">_gaq</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">_gaq</span><span class="webkit-whitespace"> </span>||<span class="webkit-whitespace"> </span>[];<br> <span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">_gaq</span>.<span class="webkit-javascript-ident">push</span><span class="webkit-brace-start">(</span>[<span class="webkit-javascript-string">'_setAccount'</span>,<span class="webkit-whitespace"> </span><span class="webkit-javascript-string">'UA-30102653-1'</span>]<span class="webkit-brace-end">)</span>;<br> <span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">_gaq</span>.<span class="webkit-javascript-ident">push</span><span class="webkit-brace-start">(</span>[<span class="webkit-javascript-string">'_trackPageview'</span>]<span class="webkit-brace-end">)</span>;<br> <span class="webkit-whitespace"> </span><span class="webkit-brace-start">(</span><span class="webkit-javascript-keyword">function</span><span class="webkit-brace-start">(</span><span class="webkit-brace-end">)</span><span class="webkit-whitespace"> </span><span class="webkit-block-start">{</span><br> <span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">var</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">ga</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">document</span>.<span class="webkit-javascript-ident">createElement</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-string">'script'</span><span class="webkit-brace-end">)</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">ga</span>.<span class="webkit-javascript-ident">async</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">true</span>;<br> <span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">ga</span>.<span class="webkit-javascript-ident">src</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-brace-start">(</span><span class="webkit-javascript-string">'https:'</span><span class="webkit-whitespace"> </span>==<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">document</span>.<span class="webkit-javascript-ident">location</span>.<span class="webkit-javascript-ident">protocol</span><span class="webkit-whitespace"> </span>?<span class="webkit-whitespace"> </span><span class="webkit-javascript-string">'https://ssl'</span><span class="webkit-whitespace"> </span>:<span class="webkit-whitespace"> </span><span class="webkit-javascript-string">'http://www'</span><span class="webkit-brace-end">)</span><span class="webkit-whitespace"> </span>+<span class="webkit-whitespace"> </span><span class="webkit-javascript-string">'.google-analytics.com/ga.js'</span>;<br> <span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">var</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">s</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">document</span>.<span class="webkit-javascript-ident">getElementsByTagName</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-string">'script'</span><span class="webkit-brace-end">)</span>[<span class="webkit-javascript-number">0</span>];<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">s</span>.<span class="webkit-javascript-ident">parentNode</span>.<span class="webkit-javascript-ident">insertBefore</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-ident">ga</span>,<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">s</span><span class="webkit-brace-end">)</span>;<br> <span class="webkit-whitespace"> </span><span class="webkit-block-end">}</span><span class="webkit-brace-end">)</span><span class="webkit-brace-start">(</span><span class="webkit-brace-end">)</span>;<br> </span></span></li><li title="" draggable="true"><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/script</span>&gt;</span>​</span></li></ol><li title="" class="parent" draggable="true"><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">noscript</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/noscript</span>&gt;</span>​</span></li><ol class="children"><li title="" draggable="true"><span class="highlight">"<span class="webkit-html-text-node">
&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="http://enable-javascript.com/" target="_blank"&gt;Go here.&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
</span>"</span></li><li title="" draggable="true"><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/noscript</span>&gt;</span>​</span></li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">script</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">src</span>=​"<a href="http://assets.codepen.io/assets/common/everypage-1318be5e9f2fe2adef21bd4e46ecb173.js" class="webkit-html-attribute-value webkit-html-resource-link" title="http://assets.codepen.io/assets/common/everypage-1318be5e9f2fe2adef21bd4e46ecb173.js">http:​/​/​assets.codepen.io/​assets/​common/​everypage-1318be5e9f2fe2adef21bd4e46ecb173.js</a>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">type</span>=​"<span class="webkit-html-attribute-value">text/​javascript</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/script</span>&gt;</span>​</span></li><li title="" class="parent" draggable="true"><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">script</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/script</span>&gt;</span>​</span></li><ol class="children"><li title="" draggable="true" class=""><div class="selection selected" style="height: 126px;"></div><span class="highlight"><span class="webkit-html-text-node webkit-html-js-node"><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">__pageType</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-string">'pen'</span>;<br><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">__pen</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-block-start">{</span><span class="webkit-javascript-string">"auto_run"</span>:<span class="webkit-javascript-keyword">true</span>,<span class="webkit-javascript-string">"created_at"</span>:<span class="webkit-javascript-keyword">null</span>,<span class="webkit-javascript-string">"css"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"css_external"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"css_pre_processor"</span>:<span class="webkit-javascript-string">"none"</span>,<span class="webkit-javascript-string">"css_prefix_free"</span>:<span class="webkit-javascript-keyword">false</span>,<span class="webkit-javascript-string">"css_starter"</span>:<span class="webkit-javascript-string">"neither"</span>,<span class="webkit-javascript-string">"description"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"head"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"html"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"html_classes"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"html_pre_processor"</span>:<span class="webkit-javascript-string">"none"</span>,<span class="webkit-javascript-string">"id"</span>:<span class="webkit-javascript-number">0</span>,<span class="webkit-javascript-string">"js"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"js_external"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"js_library"</span>:<span class="webkit-javascript-string">"none"</span>,<span class="webkit-javascript-string">"js_modernizr"</span>:<span class="webkit-javascript-keyword">false</span>,<span class="webkit-javascript-string">"js_pre_processor"</span>:<span class="webkit-javascript-string">"none"</span>,<span class="webkit-javascript-string">"parent"</span>:<span class="webkit-javascript-number">0</span>,<span class="webkit-javascript-string">"session_hash"</span>:<span class="webkit-javascript-keyword">null</span>,<span class="webkit-javascript-string">"slug"</span>:<span class="webkit-javascript-keyword">null</span>,<span class="webkit-javascript-string">"slug_hash"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"title"</span>:<span class="webkit-javascript-string">""</span>,<span class="webkit-javascript-string">"updated_at"</span>:<span class="webkit-javascript-keyword">null</span>,<span class="webkit-javascript-string">"user_id"</span>:<span class="webkit-javascript-number">1</span><span class="webkit-block-end">}</span>;<br><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">__tags</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span>[];<br><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">__user</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-block-start">{</span><br><span class="webkit-whitespace"> </span><span class="webkit-javascript-string">"username"</span>:<span class="webkit-whitespace"> </span><span class="webkit-javascript-string">"anon"</span>,<br><span class="webkit-whitespace"> </span><span class="webkit-javascript-string">"paid"</span>:<span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">false</span>,<br><span class="webkit-whitespace"> </span><span class="webkit-javascript-string">"id"</span>:<span class="webkit-whitespace"> </span><span class="webkit-javascript-number">1</span><br><span class="webkit-whitespace"> </span><span class="webkit-block-end">}</span>;<br><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">__pen_user</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-block-start">{</span><span class="webkit-javascript-string">"username"</span>:<span class="webkit-whitespace"> </span><span class="webkit-javascript-string">"anon"</span><span class="webkit-block-end">}</span>;<br></span></span></li><li title="" draggable="true"><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/script</span>&gt;</span>​</span></li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">script</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">src</span>=​"<a href="http://assets.codepen.io/assets/editor/pen/libs-cbc66b0f67b6cc4a3186b7c357cffa82.js" class="webkit-html-attribute-value webkit-html-resource-link" title="http://assets.codepen.io/assets/editor/pen/libs-cbc66b0f67b6cc4a3186b7c357cffa82.js">http:​/​/​assets.codepen.io/​assets/​editor/​pen/​libs-cbc66b0f67b6cc4a3186b7c357cffa82.js</a>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">type</span>=​"<span class="webkit-html-attribute-value">text/​javascript</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/script</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">script</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">src</span>=​"<a href="http://assets.codepen.io/assets/editor/pen/index-aba36d02ba817135352a3af35e31e6ba.js" class="webkit-html-attribute-value webkit-html-resource-link" title="http://assets.codepen.io/assets/editor/pen/index-aba36d02ba817135352a3af35e31e6ba.js">http:​/​/​assets.codepen.io/​assets/​editor/​pen/​index-aba36d02ba817135352a3af35e31e6ba.js</a>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">type</span>=​"<span class="webkit-html-attribute-value">text/​javascript</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/script</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">ul</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">typeahead dropdown-menu</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/ul</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 28px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">script</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">src</span>=​"<a href="http://assets.codepen.io/assets/editor/common/layout/layout-top-14e0a95272306eaca2acd28b06735f00.js" class="webkit-html-attribute-value webkit-html-resource-link" title="http://assets.codepen.io/assets/editor/common/layout/layout-top-14e0a95272306eaca2acd28b06735f00.js">http:​/​/​assets.codepen.io/​assets/​editor/​common/​layout/​layout-top-14e0a95272306eaca2acd28b06735f00.js</a>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">type</span>=​"<span class="webkit-html-attribute-value">text/​javascript</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/script</span>&gt;</span>​</span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">script</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">style</span>=​"<span class="webkit-html-attribute-value">display:​ none;​</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">id</span>=​"<span class="webkit-html-attribute-value">hiddenlpsubmitdiv</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/script</span>&gt;</span>​</span></li><li title="" class="parent" draggable="true"><span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">script</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/script</span>&gt;</span>​</span></li><ol class="children"><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-text-node webkit-html-js-node"><span class="webkit-javascript-keyword">try</span><span class="webkit-block-start">{</span><span class="webkit-javascript-keyword">for</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-keyword">var</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">lastpass_iter</span>=<span class="webkit-javascript-number">0</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">lastpass_iter</span><span class="webkit-whitespace"> </span>&lt;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">document</span>.<span class="webkit-javascript-ident">forms</span>.<span class="webkit-javascript-ident">length</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">lastpass_iter</span>++<span class="webkit-brace-end">)</span><span class="webkit-block-start">{</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">var</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">lastpass_f</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">document</span>.<span class="webkit-javascript-ident">forms</span>[<span class="webkit-javascript-ident">lastpass_iter</span>];<span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">if</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-keyword">typeof</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-ident">lastpass_f</span>.<span class="webkit-javascript-ident">lpsubmitorig2</span><span class="webkit-brace-end">)</span>==<span class="webkit-javascript-string">"undefined"</span><span class="webkit-brace-end">)</span><span class="webkit-block-start">{</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">lastpass_f</span>.<span class="webkit-javascript-ident">lpsubmitorig2</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">lastpass_f</span>.<span class="webkit-javascript-ident">submit</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">lastpass_f</span>.<span class="webkit-javascript-ident">submit</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">function</span><span class="webkit-brace-start">(</span><span class="webkit-brace-end">)</span><span class="webkit-block-start">{</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">var</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">form</span>=<span class="webkit-javascript-keyword">this</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">var</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">customEvent</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">document</span>.<span class="webkit-javascript-ident">createEvent</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-string">"Event"</span><span class="webkit-brace-end">)</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">customEvent</span>.<span class="webkit-javascript-ident">initEvent</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-string">"lpCustomEvent"</span>,<span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">true</span>,<span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">true</span><span class="webkit-brace-end">)</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">var</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">d</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">document</span>.<span class="webkit-javascript-ident">getElementById</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-string">"hiddenlpsubmitdiv"</span><span class="webkit-brace-end">)</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">for</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-keyword">var</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">i</span><span class="webkit-whitespace"> </span>=<span class="webkit-whitespace"> </span><span class="webkit-javascript-number">0</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">i</span><span class="webkit-whitespace"> </span>&lt;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">document</span>.<span class="webkit-javascript-ident">forms</span>.<span class="webkit-javascript-ident">length</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">i</span>++<span class="webkit-brace-end">)</span><span class="webkit-block-start">{</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-keyword">if</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-ident">document</span>.<span class="webkit-javascript-ident">forms</span>[<span class="webkit-javascript-ident">i</span>]==<span class="webkit-javascript-ident">form</span><span class="webkit-brace-end">)</span><span class="webkit-block-start">{</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">d</span>.<span class="webkit-javascript-ident">innerText</span>=<span class="webkit-javascript-ident">i</span>;<span class="webkit-whitespace"> </span><span class="webkit-block-end">}</span><span class="webkit-whitespace"> </span><span class="webkit-block-end">}</span><span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">d</span>.<span class="webkit-javascript-ident">dispatchEvent</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-ident">customEvent</span><span class="webkit-brace-end">)</span>;<span class="webkit-whitespace"> </span><span class="webkit-javascript-ident">form</span>.<span class="webkit-javascript-ident">lpsubmitorig2</span><span class="webkit-brace-start">(</span><span class="webkit-brace-end">)</span>;<span class="webkit-whitespace"> </span><span class="webkit-block-end">}</span><span class="webkit-whitespace"> </span><span class="webkit-block-end">}</span><span class="webkit-whitespace"> </span><span class="webkit-block-end">}</span><span class="webkit-block-end">}</span><span class="webkit-javascript-keyword">catch</span><span class="webkit-brace-start">(</span><span class="webkit-javascript-ident">e</span><span class="webkit-brace-end">)</span><span class="webkit-block-start">{</span><span class="webkit-block-end">}</span></span></span></li><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/script</span>&gt;</span>​</span></li></ol><li title="" draggable="true" class=""><div class="selection selected" style="height: 14px;"></div><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/body</span>&gt;</span>​</span></li></ol><li title="" draggable="true"><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/html</span>&gt;</span>​</span></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"><span class="webkit-css-property" title="-webkit-align-content: stretch;">-webkit-align-content</span>: <span class="expand-element"></span><span class="value">stretch</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-align-items: stretch;">-webkit-align-items</span>: <span class="expand-element"></span><span class="value">stretch</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-align-self: stretch;">-webkit-align-self</span>: <span class="expand-element"></span><span class="value">stretch</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-animation-delay: 0s;">-webkit-animation-delay</span>: <span class="expand-element"></span><span class="value">0s</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-animation-direction: normal;">-webkit-animation-direction</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-animation-duration: 0s;">-webkit-animation-duration</span>: <span class="expand-element"></span><span class="value">0s</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-animation-fill-mode: none;">-webkit-animation-fill-mode</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-animation-iteration-count: 1;">-webkit-animation-iteration-count</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-animation-name: none;">-webkit-animation-name</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-animation-play-state: running;">-webkit-animation-play-state</span>: <span class="expand-element"></span><span class="value">running</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-animation-timing-function: ease;">-webkit-animation-timing-function</span>: <span class="expand-element"></span><span class="value">ease</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-app-region: no-drag;">-webkit-app-region</span>: <span class="expand-element"></span><span class="value">no-drag</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-appearance: none;">-webkit-appearance</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-backface-visibility: visible;">-webkit-backface-visibility</span>: <span class="expand-element"></span><span class="value">visible</span>;</li><li title=""><span class="webkit-css-property" title="-webkit-background-clip: border-box;">-webkit-background-clip</span>: <span class="expand-element"></span><span class="value">border-box</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-background-composite: source-over;">-webkit-background-composite</span>: <span class="expand-element"></span><span class="value">source-over</span>;</li><li title=""><span class="webkit-css-property" title="-webkit-background-origin: padding-box;">-webkit-background-origin</span>: <span class="expand-element"></span><span class="value">padding-box</span>;</li><li title=""><span class="webkit-css-property" title="-webkit-background-size: auto;">-webkit-background-size</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-border-fit: border;">-webkit-border-fit</span>: <span class="expand-element"></span><span class="value">border</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-border-horizontal-spacing: 0px;">-webkit-border-horizontal-spacing</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-border-image: none;">-webkit-border-image</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-border-vertical-spacing: 0px;">-webkit-border-vertical-spacing</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-align: stretch;">-webkit-box-align</span>: <span class="expand-element"></span><span class="value">stretch</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-decoration-break: slice;">-webkit-box-decoration-break</span>: <span class="expand-element"></span><span class="value">slice</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-direction: normal;">-webkit-box-direction</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-flex: 0;">-webkit-box-flex</span>: <span class="expand-element"></span><span class="value">0</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-flex-group: 1;">-webkit-box-flex-group</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-lines: single;">-webkit-box-lines</span>: <span class="expand-element"></span><span class="value">single</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-ordinal-group: 1;">-webkit-box-ordinal-group</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-orient: horizontal;">-webkit-box-orient</span>: <span class="expand-element"></span><span class="value">horizontal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-pack: start;">-webkit-box-pack</span>: <span class="expand-element"></span><span class="value">start</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-reflect: none;">-webkit-box-reflect</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-box-shadow: none;">-webkit-box-shadow</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-clip-path: none;">-webkit-clip-path</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-color-correction: default;">-webkit-color-correction</span>: <span class="expand-element"></span><span class="value">default</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-axis: auto;">-webkit-column-axis</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-break-after: auto;">-webkit-column-break-after</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-break-before: auto;">-webkit-column-break-before</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-break-inside: auto;">-webkit-column-break-inside</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-count: auto;">-webkit-column-count</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-gap: normal;">-webkit-column-gap</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-progression: normal;">-webkit-column-progression</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-rule-color: rgb(255, 255, 255);">-webkit-column-rule-color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(255, 255, 255);"></span></span><span>rgb(255, 255, 255)</span></nobr></span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-rule-style: none;">-webkit-column-rule-style</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-rule-width: 0px;">-webkit-column-rule-width</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-span: none;">-webkit-column-span</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-column-width: auto;">-webkit-column-width</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-filter: none;">-webkit-filter</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-flex-basis: auto;">-webkit-flex-basis</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-flex-direction: row;">-webkit-flex-direction</span>: <span class="expand-element"></span><span class="value">row</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-flex-grow: 0;">-webkit-flex-grow</span>: <span class="expand-element"></span><span class="value">0</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-flex-shrink: 1;">-webkit-flex-shrink</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-flex-wrap: nowrap;">-webkit-flex-wrap</span>: <span class="expand-element"></span><span class="value">nowrap</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-flow-from: none;">-webkit-flow-from</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-flow-into: none;">-webkit-flow-into</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-font-kerning: auto;">-webkit-font-kerning</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-font-smoothing: auto;">-webkit-font-smoothing</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-font-variant-ligatures: normal;">-webkit-font-variant-ligatures</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-grid-auto-flow: none;">-webkit-grid-auto-flow</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-grid-column: auto;">-webkit-grid-column</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-grid-columns: none;">-webkit-grid-columns</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-grid-row: auto;">-webkit-grid-row</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-grid-rows: none;">-webkit-grid-rows</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-highlight: none;">-webkit-highlight</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-hyphenate-character: auto;">-webkit-hyphenate-character</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-hyphenate-limit-after: auto;">-webkit-hyphenate-limit-after</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-hyphenate-limit-before: auto;">-webkit-hyphenate-limit-before</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-hyphenate-limit-lines: no-limit;">-webkit-hyphenate-limit-lines</span>: <span class="expand-element"></span><span class="value">no-limit</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-hyphens: manual;">-webkit-hyphens</span>: <span class="expand-element"></span><span class="value">manual</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-justify-content: flex-start;">-webkit-justify-content</span>: <span class="expand-element"></span><span class="value">flex-start</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-line-align: none;">-webkit-line-align</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-line-box-contain: block inline replaced;">-webkit-line-box-contain</span>: <span class="expand-element"></span><span class="value">block inline replaced</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-line-break: auto;">-webkit-line-break</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-line-clamp: none;">-webkit-line-clamp</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-line-grid: none;">-webkit-line-grid</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-line-snap: none;">-webkit-line-snap</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-locale: en;">-webkit-locale</span>: <span class="expand-element"></span><span class="value">en</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-margin-after-collapse: collapse;">-webkit-margin-after-collapse</span>: <span class="expand-element"></span><span class="value">collapse</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-margin-before-collapse: collapse;">-webkit-margin-before-collapse</span>: <span class="expand-element"></span><span class="value">collapse</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-marquee-direction: auto;">-webkit-marquee-direction</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-marquee-increment: 6px;">-webkit-marquee-increment</span>: <span class="expand-element"></span><span class="value">6px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-marquee-repetition: infinite;">-webkit-marquee-repetition</span>: <span class="expand-element"></span><span class="value">infinite</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-marquee-style: scroll;">-webkit-marquee-style</span>: <span class="expand-element"></span><span class="value">scroll</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-box-image: none;">-webkit-mask-box-image</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-box-image-outset: 0px;">-webkit-mask-box-image-outset</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-box-image-repeat: stretch;">-webkit-mask-box-image-repeat</span>: <span class="expand-element"></span><span class="value">stretch</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-box-image-slice: 0 fill;">-webkit-mask-box-image-slice</span>: <span class="expand-element"></span><span class="value">0 fill</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-box-image-source: none;">-webkit-mask-box-image-source</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-box-image-width: auto;">-webkit-mask-box-image-width</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-clip: border-box;">-webkit-mask-clip</span>: <span class="expand-element"></span><span class="value">border-box</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-composite: source-over;">-webkit-mask-composite</span>: <span class="expand-element"></span><span class="value">source-over</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-image: none;">-webkit-mask-image</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-origin: border-box;">-webkit-mask-origin</span>: <span class="expand-element"></span><span class="value">border-box</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-position: 0% 0%;">-webkit-mask-position</span>: <span class="expand-element"></span><span class="value">0% 0%</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-repeat: repeat;">-webkit-mask-repeat</span>: <span class="expand-element"></span><span class="value">repeat</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-mask-size: auto;">-webkit-mask-size</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-nbsp-mode: normal;">-webkit-nbsp-mode</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-order: 0;">-webkit-order</span>: <span class="expand-element"></span><span class="value">0</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-perspective: none;">-webkit-perspective</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-perspective-origin: 845px 446px;">-webkit-perspective-origin</span>: <span class="expand-element"></span><span class="value">845px 446px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-print-color-adjust: economy;">-webkit-print-color-adjust</span>: <span class="expand-element"></span><span class="value">economy</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-region-break-after: auto;">-webkit-region-break-after</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-region-break-before: auto;">-webkit-region-break-before</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-region-break-inside: auto;">-webkit-region-break-inside</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-region-overflow: auto;">-webkit-region-overflow</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-rtl-ordering: logical;">-webkit-rtl-ordering</span>: <span class="expand-element"></span><span class="value">logical</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-shape-inside: auto;">-webkit-shape-inside</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-shape-margin: 0px;">-webkit-shape-margin</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-shape-outside: auto;">-webkit-shape-outside</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-shape-padding: 0px;">-webkit-shape-padding</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-svg-shadow: none;">-webkit-svg-shadow</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-tap-highlight-color: rgba(0, 0, 0, 0.180392);">-webkit-tap-highlight-color</span>: <span class="expand-element"></span><span class="value">rgba(0, 0, 0, 0.180392)</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-combine: none;">-webkit-text-combine</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-decorations-in-effect: none;">-webkit-text-decorations-in-effect</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-emphasis-color: rgb(255, 255, 255);">-webkit-text-emphasis-color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(255, 255, 255);"></span></span><span>rgb(255, 255, 255)</span></nobr></span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-emphasis-position: over;">-webkit-text-emphasis-position</span>: <span class="expand-element"></span><span class="value">over</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-emphasis-style: none;">-webkit-text-emphasis-style</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-fill-color: rgb(255, 255, 255);">-webkit-text-fill-color</span>: <span class="expand-element"></span><span class="value">rgb(255, 255, 255)</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-orientation: vertical-right;">-webkit-text-orientation</span>: <span class="expand-element"></span><span class="value">vertical-right</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-security: none;">-webkit-text-security</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-stroke-color: rgb(255, 255, 255);">-webkit-text-stroke-color</span>: <span class="expand-element"></span><span class="value">rgb(255, 255, 255)</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-text-stroke-width: 0px;">-webkit-text-stroke-width</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-transform: none;">-webkit-transform</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-transform-origin: 845px 446px;">-webkit-transform-origin</span>: <span class="expand-element"></span><span class="value">845px 446px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-transform-style: flat;">-webkit-transform-style</span>: <span class="expand-element"></span><span class="value">flat</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-transition-delay: 0s;">-webkit-transition-delay</span>: <span class="expand-element"></span><span class="value">0s</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-transition-duration: 0s;">-webkit-transition-duration</span>: <span class="expand-element"></span><span class="value">0s</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-transition-property: all;">-webkit-transition-property</span>: <span class="expand-element"></span><span class="value">all</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-transition-timing-function: ease;">-webkit-transition-timing-function</span>: <span class="expand-element"></span><span class="value">ease</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-user-drag: auto;">-webkit-user-drag</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-user-modify: read-only;">-webkit-user-modify</span>: <span class="expand-element"></span><span class="value">read-only</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-user-select: text;">-webkit-user-select</span>: <span class="expand-element"></span><span class="value">text</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-wrap-flow: auto;">-webkit-wrap-flow</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-wrap-through: wrap;">-webkit-wrap-through</span>: <span class="expand-element"></span><span class="value">wrap</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="-webkit-writing-mode: horizontal-tb;">-webkit-writing-mode</span>: <span class="expand-element"></span><span class="value">horizontal-tb</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="alignment-baseline: auto;">alignment-baseline</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="background-attachment: scroll;">background-attachment</span>: <span class="expand-element"></span><span class="value">scroll</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="background-clip: border-box;">background-clip</span>: <span class="expand-element"></span><span class="value">border-box</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="background-color: rgb(51, 51, 51);">background-color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(51, 51, 51);"></span></span><span>rgb(51, 51, 51)</span></nobr></span>;</li><li title="" class="parent"><span class="webkit-css-property" title="background-image: url(http://assets.codepen.io/images/classy_fabric.png);">background-image</span>: <span class="expand-element"></span><span class="value">url(<a href="http://assets.codepen.io/images/classy_fabric.png" class="webkit-html-resource-link">http://assets.codepen.io/images/classy_fabric.png</a>)</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="background-origin: padding-box;">background-origin</span>: <span class="expand-element"></span><span class="value">padding-box</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="background-position: 0% 0%;">background-position</span>: <span class="expand-element"></span><span class="value">0% 0%</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="background-repeat: repeat;">background-repeat</span>: <span class="expand-element"></span><span class="value">repeat</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="background-size: auto;">background-size</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="baseline-shift: baseline;">baseline-shift</span>: <span class="expand-element"></span><span class="value">baseline</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-bottom-color: rgb(255, 255, 255);">border-bottom-color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(255, 255, 255);"></span></span><span>rgb(255, 255, 255)</span></nobr></span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-bottom-left-radius: 0px;">border-bottom-left-radius</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-bottom-right-radius: 0px;">border-bottom-right-radius</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-bottom-style: none;">border-bottom-style</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-bottom-width: 0px;">border-bottom-width</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-collapse: separate;">border-collapse</span>: <span class="expand-element"></span><span class="value">separate</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-image-outset: 0px;">border-image-outset</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-image-repeat: stretch;">border-image-repeat</span>: <span class="expand-element"></span><span class="value">stretch</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-image-slice: 100%;">border-image-slice</span>: <span class="expand-element"></span><span class="value">100%</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-image-source: none;">border-image-source</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-image-width: 1;">border-image-width</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-left-color: rgb(255, 255, 255);">border-left-color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(255, 255, 255);"></span></span><span>rgb(255, 255, 255)</span></nobr></span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-left-style: none;">border-left-style</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-left-width: 0px;">border-left-width</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-right-color: rgb(255, 255, 255);">border-right-color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(255, 255, 255);"></span></span><span>rgb(255, 255, 255)</span></nobr></span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-right-style: none;">border-right-style</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-right-width: 0px;">border-right-width</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-top-color: rgb(255, 255, 255);">border-top-color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(255, 255, 255);"></span></span><span>rgb(255, 255, 255)</span></nobr></span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-top-left-radius: 0px;">border-top-left-radius</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-top-right-radius: 0px;">border-top-right-radius</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-top-style: none;">border-top-style</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="border-top-width: 0px;">border-top-width</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="bottom: auto;">bottom</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="box-shadow: none;">box-shadow</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="box-sizing: border-box;">box-sizing</span>: <span class="expand-element"></span><span class="value">border-box</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="caption-side: top;">caption-side</span>: <span class="expand-element"></span><span class="value">top</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="clear: none;">clear</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="clip: auto;">clip</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="clip-path: none;">clip-path</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="clip-rule: nonzero;">clip-rule</span>: <span class="expand-element"></span><span class="value">nonzero</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="color: rgb(255, 255, 255);">color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(255, 255, 255);"></span></span><span>rgb(255, 255, 255)</span></nobr></span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="color-interpolation: srgb;">color-interpolation</span>: <span class="expand-element"></span><span class="value">srgb</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="color-interpolation-filters: linearrgb;">color-interpolation-filters</span>: <span class="expand-element"></span><span class="value">linearrgb</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="color-rendering: auto;">color-rendering</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="cursor: auto;">cursor</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="direction: ltr;">direction</span>: <span class="expand-element"></span><span class="value">ltr</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="display: block;">display</span>: <span class="expand-element"></span><span class="value">block</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="dominant-baseline: auto;">dominant-baseline</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="empty-cells: show;">empty-cells</span>: <span class="expand-element"></span><span class="value">show</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="fill: #000000;">fill</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(0, 0, 0);"></span></span><span>#000000</span></nobr></span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="fill-opacity: 1;">fill-opacity</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="fill-rule: nonzero;">fill-rule</span>: <span class="expand-element"></span><span class="value">nonzero</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="filter: none;">filter</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="float: none;">float</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="flood-color: rgb(0, 0, 0);">flood-color</span>: <span class="expand-element"></span><span class="value">rgb(0, 0, 0)</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="flood-opacity: 1;">flood-opacity</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="font-family: 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, sans-serif;">font-family</span>: <span class="expand-element"></span><span class="value">'Lucida Grande', 'Lucida Sans Unicode', Tahoma, sans-serif</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="font-size: 13px;">font-size</span>: <span class="expand-element"></span><span class="value">13px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="font-style: normal;">font-style</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="font-variant: normal;">font-variant</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="font-weight: normal;">font-weight</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="glyph-orientation-horizontal: 0deg;">glyph-orientation-horizontal</span>: <span class="expand-element"></span><span class="value">0deg</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="glyph-orientation-vertical: auto;">glyph-orientation-vertical</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="height: 892px;">height</span>: <span class="expand-element"></span><span class="value">892px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="image-rendering: auto;">image-rendering</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="kerning: 0;">kerning</span>: <span class="expand-element"></span><span class="value">0</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="left: auto;">left</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="letter-spacing: normal;">letter-spacing</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="lighting-color: rgb(255, 255, 255);">lighting-color</span>: <span class="expand-element"></span><span class="value">rgb(255, 255, 255)</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="line-height: 18px;">line-height</span>: <span class="expand-element"></span><span class="value">18px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="list-style-image: none;">list-style-image</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="list-style-position: outside;">list-style-position</span>: <span class="expand-element"></span><span class="value">outside</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="list-style-type: disc;">list-style-type</span>: <span class="expand-element"></span><span class="value">disc</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="margin-bottom: 0px;">margin-bottom</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="margin-left: 0px;">margin-left</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="margin-right: 0px;">margin-right</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="margin-top: 0px;">margin-top</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="marker-end: none;">marker-end</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="marker-mid: none;">marker-mid</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="marker-start: none;">marker-start</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="mask: none;">mask</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="mask-type: luminance;">mask-type</span>: <span class="expand-element"></span><span class="value">luminance</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="max-height: none;">max-height</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="max-width: none;">max-width</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="min-height: 0px;">min-height</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="min-width: 1000px;">min-width</span>: <span class="expand-element"></span><span class="value">1000px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="opacity: 1;">opacity</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="orphans: auto;">orphans</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="outline-color: rgb(255, 255, 255);">outline-color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(255, 255, 255);"></span></span><span>rgb(255, 255, 255)</span></nobr></span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="outline-offset: 0px;">outline-offset</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="outline-style: none;">outline-style</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="outline-width: 0px;">outline-width</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="overflow-wrap: normal;">overflow-wrap</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="overflow-x: hidden;">overflow-x</span>: <span class="expand-element"></span><span class="value">hidden</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="overflow-y: hidden;">overflow-y</span>: <span class="expand-element"></span><span class="value">hidden</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="padding-bottom: 0px;">padding-bottom</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="padding-left: 0px;">padding-left</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="padding-right: 0px;">padding-right</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="parent"><span class="webkit-css-property" title="padding-top: 0px;">padding-top</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="page-break-after: auto;">page-break-after</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="page-break-before: auto;">page-break-before</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="page-break-inside: auto;">page-break-inside</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="pointer-events: auto;">pointer-events</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="position: static;">position</span>: <span class="expand-element"></span><span class="value">static</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="resize: none;">resize</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="right: auto;">right</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="shape-rendering: auto;">shape-rendering</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="speak: normal;">speak</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stop-color: rgb(0, 0, 0);">stop-color</span>: <span class="expand-element"></span><span class="value">rgb(0, 0, 0)</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stop-opacity: 1;">stop-opacity</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stroke: none;">stroke</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stroke-dasharray: none;">stroke-dasharray</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stroke-dashoffset: 0;">stroke-dashoffset</span>: <span class="expand-element"></span><span class="value">0</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stroke-linecap: butt;">stroke-linecap</span>: <span class="expand-element"></span><span class="value">butt</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stroke-linejoin: miter;">stroke-linejoin</span>: <span class="expand-element"></span><span class="value">miter</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stroke-miterlimit: 4;">stroke-miterlimit</span>: <span class="expand-element"></span><span class="value">4</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stroke-opacity: 1;">stroke-opacity</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="stroke-width: 1;">stroke-width</span>: <span class="expand-element"></span><span class="value">1</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="tab-size: 8;">tab-size</span>: <span class="expand-element"></span><span class="value">8</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="table-layout: auto;">table-layout</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="text-align: start;">text-align</span>: <span class="expand-element"></span><span class="value">start</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="text-anchor: start;">text-anchor</span>: <span class="expand-element"></span><span class="value">start</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="text-decoration: none;">text-decoration</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="text-indent: 0px;">text-indent</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="text-overflow: clip;">text-overflow</span>: <span class="expand-element"></span><span class="value">clip</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="text-rendering: auto;">text-rendering</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="text-shadow: none;">text-shadow</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="text-transform: none;">text-transform</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="top: auto;">top</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="transition-delay: 0s;">transition-delay</span>: <span class="expand-element"></span><span class="value">0s</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="transition-duration: 0s;">transition-duration</span>: <span class="expand-element"></span><span class="value">0s</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="transition-property: all;">transition-property</span>: <span class="expand-element"></span><span class="value">all</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="transition-timing-function: ease;">transition-timing-function</span>: <span class="expand-element"></span><span class="value">ease</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="unicode-bidi: normal;">unicode-bidi</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="vector-effect: none;">vector-effect</span>: <span class="expand-element"></span><span class="value">none</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="vertical-align: baseline;">vertical-align</span>: <span class="expand-element"></span><span class="value">baseline</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="visibility: visible;">visibility</span>: <span class="expand-element"></span><span class="value">visible</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="white-space: normal;">white-space</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="widows: auto;">widows</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title=""><span class="webkit-css-property" title="width: 1690px;">width</span>: <span class="expand-element"></span><span class="value">1690px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="word-break: normal;">word-break</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="word-spacing: 0px;">word-spacing</span>: <span class="expand-element"></span><span class="value">0px</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="word-wrap: normal;">word-wrap</span>: <span class="expand-element"></span><span class="value">normal</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="writing-mode: lr-tb;">writing-mode</span>: <span class="expand-element"></span><span class="value">lr-tb</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="z-index: auto;">z-index</span>: <span class="expand-element"></span><span class="value">auto</span>;</li><li title="" class="inherited"><span class="webkit-css-property" title="zoom: 1;">zoom</span>: <span class="expand-element"></span><span class="value">1</span>;</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><span>element.style</span><span> {</span></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="http://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="http://codepen.io/pen/" style="float: right;">codepen.io</a></div><span title="screen">media="screen"</span></div><div><div class="subtitle"><a href="http://assets.codepen.io/assets/editor/layouts/top-4ccf61093ae9d82c6f003dfead1bc631.css" class="webkit-html-resource-link" title="http://assets.codepen.io/assets/editor/layouts/top-4ccf61093ae9d82c6f003dfead1bc631.css:1" data-uncopyable="top-4ccf61093ae9d82c6f003dfead1bc631.css:1"></a></div><span class="selector"><span class="selector-matches">body</span></span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="min-width:1000px !important">min-width</span>: <span class="expand-element"></span><span class="value">1000px !important</span>;</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="http://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="http://codepen.io/pen/" style="float: right;">codepen.io</a></div><span title="all">media="all"</span></div><div><div class="subtitle"><a href="http://assets.codepen.io/assets/editor/editor-0a3b8248b92b2bea693c3b306ffa7b1a.css" class="webkit-html-resource-link" title="http://assets.codepen.io/assets/editor/editor-0a3b8248b92b2bea693c3b306ffa7b1a.css:1" data-uncopyable="editor-0a3b8248b92b2bea693c3b306ffa7b1a.css:1"></a></div><span class="selector">html, <span class="selector-matches">body</span></span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="overflow:hidden">overflow</span>: <span class="expand-element"></span><span class="value">hidden</span>;</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="http://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="http://codepen.io/pen/" style="float: right;">codepen.io</a></div><span title="all">media="all"</span></div><div><div class="subtitle"><a href="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div><span class="selector"><span class="selector-matches">body</span></span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="background:#333 url(/images/classy_fabric.png)">background</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: rgb(51, 51, 51);"></span></span><span>#333</span></nobr> url(<a href="http://assets.codepen.io/images/classy_fabric.png" class="webkit-html-resource-link">/images/classy_fabric.png</a>)</span>;</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="http://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="http://codepen.io/pen/" style="float: right;">codepen.io</a></div><span title="all">media="all"</span></div><div><div class="subtitle"><a href="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div><span class="selector">html, <span class="selector-matches">body</span></span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="height:100%;">height</span>: <span class="expand-element"></span><span class="value">100%</span>;</li><li title="" class="overloaded not-parsed-ok"><img class="exclamation-mark" title="Unknown property name."><span class="webkit-css-property" title="-webkit-overflow-scrolling:touch">-webkit-overflow-scrolling</span>: <span class="expand-element"></span><span class="value">touch</span>;</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="http://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="http://codepen.io/pen/" style="float: right;">codepen.io</a></div><span title="all">media="all"</span></div><div><div class="subtitle"><a href="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div><span class="selector"><span class="selector-matches">body</span></span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Tahoma, Sans-Serif;">font-family</span>: <span class="expand-element"></span><span class="value">"Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif</span>;</li><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="font-size:13px;">font-size</span>: <span class="expand-element"></span><span class="value">13px</span>;</li><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="line-height:1.4;">line-height</span>: <span class="expand-element"></span><span class="value">1.4</span>;</li><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="color:white">color</span>: <span class="expand-element"></span><span class="value"><nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: white;"></span></span><span>white</span></nobr></span>;</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="http://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="http://codepen.io/pen/" style="float: right;">codepen.io</a></div><span title="all">media="all"</span></div><div><div class="subtitle"><a href="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div><span class="selector"><span class="selector-matches">*</span></span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="margin:0;">margin</span>: <span class="expand-element"></span><span class="value">0</span>;</li><li title="" class="parent"><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="padding:0;">padding</span>: <span class="expand-element"></span><span class="value">0</span>;</li><li title="" class="inactive"><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="-webkit-box-sizing:border-box;">-webkit-box-sizing</span>: <span class="expand-element"></span><span class="value">border-box</span>;</li><li title="" class="overloaded not-parsed-ok"><img class="exclamation-mark" title="Unknown property name."><span class="webkit-css-property" title="-moz-box-sizing:border-box;">-moz-box-sizing</span>: <span class="expand-element"></span><span class="value">border-box</span>;</li><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="box-sizing:border-box">box-sizing</span>: <span class="expand-element"></span><span class="value">border-box</span>;</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><span class="selector"><span class="selector-matches">body</span></span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="display: block;">display</span>: <span class="expand-element"></span><span class="value">block</span>;</li><li title="" class="parent overloaded"><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="margin: 8px;">margin</span>: <span class="expand-element"></span><span class="value">8px</span>;</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="http://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="http://codepen.io/pen/" style="float: right;">codepen.io</a></div><span title="all">media="all"</span></div><div><div class="subtitle"><a href="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div><span class="selector">::-webkit-scrollbar</span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="width:8px;">width</span>: <span class="expand-element"></span><span class="value">8px</span>;</li><li title=""><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="height:8px">height</span>: <span class="expand-element"></span><span class="value">8px</span>;</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="http://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="http://codepen.io/pen/" style="float: right;">codepen.io</a></div><span title="all">media="all"</span></div><div><div class="subtitle"><a href="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div><span class="selector">::-webkit-scrollbar-thumb</span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="border-right:3px solid transparent">border-right</span>: <span class="expand-element"></span><span class="value">3px solid <nobr><span title="Click to open a colorpicker. Shift-click to change color format" class="swatch"><span class="swatch-inner" style="background-color: transparent;"></span></span><span>transparent</span></nobr></span>;</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="http://codepen.io/pen/" class="subtitle webkit-html-resource-link" title="http://codepen.io/pen/" style="float: right;">codepen.io</a></div><span title="all">media="all"</span></div><div><div class="subtitle"><a href="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css" class="webkit-html-resource-link" title="http://assets.codepen.io/assets/global/global-fdd4442f405de2e944cde84e37934972.css:1" data-uncopyable="global-fdd4442f405de2e944cde84e37934972.css:1"></a></div><span class="selector">::-webkit-scrollbar-track</span><span> {</span></div></div></div><ol class="properties properties-tree monospace"><li title="" class="parent"><input class="enabled-button" type="checkbox"><span class="webkit-css-property" title="background:none">background</span>: <span class="expand-element"></span><span class="value">none</span>;</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><br><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><br><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><br><div class="left">‒</div><div class="content" style="background-color: rgba(111, 168, 220, 0.658824);"><span>1690</span> × <span>892</span></div><div class="right">‒</div><br><div class="bottom">‒</div></div><div class="right">‒</div><br><div class="bottom">‒</div></div><div class="right">‒</div><br><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"><span class="crumb selected end" title="body.no-mobile.pc"><span>body</span><span class="extra">.no-mobile.pc</span></span><span class="crumb start" title="html"><span>html</span></span></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>
Raw
script.js
/*
This demo is only meant to allow testing of styles for the ChromeDevTools Window using LESS.
The LESS CSS is copied from Benjamin Truyman's Chrome Dev Tool Themes:
https://github.com/bentruyman/devtools-themes
Monokai Dark theme
Note:
* The javascript is not included in the window below
* To modify images in this demo only, use this url prefix:
"http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/"
* Before compiling the LESS, change these urls to begin with:
"chrome-devtools://devtools/Images/"
*/
$(function(){
var showToolbarIcons = true;
$('body').toggleClass('show-toolbar-icons', showToolbarIcons);
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
/* globals */
@background: #1d1f21;
@current-line: #282a2e;
@foreground: #c5c8c6;
@selection: fadeout(@foreground, 75%);
/* misc */
@error: #c82829;
@toolbar-top: #444;
@toolbar-bottom: #333;
@top-bar-color: #000;
@top-bar-width: 1px;
@tree-arrow-up: "http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeUpTriangleWhite.png";
@tree-arrow-down: "http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeDownTriangleWhite.png";
@tree-arrow-right: "http://i201.photobucket.com/albums/aa236/Mottie1/demo/Chrome/treeRightTriangleWhite.png";
.button-modifier () {
-webkit-filter: invert() brightness(0.15);
}
/* base */
@background: #0D0D0D;
@foreground: #F8F8F2;
/* html */
@html-attribute-name: #A6E22E;
@html-attribute-value: #FFEE99;
@html-comment: #8C8C8C;
@html-js-node: #C2C3C3;
@html-link: #FFEE99;
@html-tag: #F92672;
@html-text-node: #C2C3C3;
/* css */
@css-comment: #8C8C8C;
@css-keyword: #F92672;
@css-color: #FF80F4;
@css-number: #F92672;
@css-property: #66D9EF;
@css-selector: #FFE1FC;
@css-special-rule: #B094BB;
@css-string: #A6E22E;
@css-url: #FFEE99;
/* javascript */
@javascript-comment: #8C8C8C;
@javascript-ident: #FFFFFF;
@javascript-keyword: #F92672;
@javascript-number: #F92672;
@javascript-property-name: #FFE1FC;
@javascript-property-value: #C2C3C3;
@javascript-regexp: #FFEE99;
@javascript-string: #FFEE99;
// misc
@error: #F92672;
// *********************************************/
//
// Inspired by Darcy Clarke's blog post:
// http://darcyclarke.me/design/skin-your-chrome-inspector/
//
// *********************************************/
@-webkit-keyframes webkit-inspector-error {
0% { color: @error; }
50% { color: darken(@error, 20%); }
100% { color: @error; }
}
@-webkit-keyframes webkit-inspector-fadeout {
from { background-color: @foreground; }
to { background-color: @background; }
}
.text-shadow() {
text-shadow: 0 1px 0 @background !important;
}
.toolbar-background() {
background-image: -webkit-linear-gradient(@toolbar-top, @toolbar-bottom) !important;
}
.toolbar-background-reversed() {
background-image: -webkit-linear-gradient(@toolbar-bottom, @toolbar-top) !important;
}
#-webkit-web-inspector {
background-color: @background;
.monospace,
.source-code {
font-family: 'DroidSansMono', Menlo, monospace !important;
}
::selection {
background: @selection !important;
opacity: 1;
}
// *********************************************/
// Toolbar
// *********************************************/
#toolbar {
.toolbar-background();
border-bottom: 1px solid @toolbar-top !important;
border-top: @top-bar-width solid @top-bar-color !important;
}
#toolbar .toolbar-label {
color: @foreground !important;
}
#toolbar .toggled-on .toolbar-label {
color: lighten(@foreground, 20%) !important;
}
#toolbar .toolbar-item.toggleable.toggled-on {
.toolbar-background-reversed();
}
#search-results-matches {
color: lighten(@foreground, 20%) !important;
text-shadow: none !important;
}
#search {
background: @background !important;
}
// *********************************************/
// Compact
// *********************************************/
&.compact #toolbar {
padding-top: 0 !important;
height: 45px !important;
}
&.compact #toolbar .toolbar-item.toggleable.toggled-on {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
&.compact #toolbar-controls {
margin-top: -5px !important;
}
&.compact #toolbar-search-item {
margin-top: 12px !important;
}
&.compact #main {
top: 50px !important;
}
// *********************************************/
// Console
// *********************************************/
// *********************************************/
// Messages
// *********************************************/
#console-messages {
background: @background;
}
#console-messages a {
color: @foreground !important;
}
#console-messages a:hover {
color: lighten(@foreground, 20%) !important;
}
.console-message {
color: @foreground !important;
}
.console-message:hover {
background-color: @selection !important;
}
.console-message, .console-user-command {
border-top: 1px solid lighten(@background, 20%) !important;
}
.console-user-command > .console-message-text {
color: @foreground !important;
}
.console-message .outline-disclosure {
line-height: 1.4 !important;
}
.console-formatted-number {
color: @javascript-number !important;
}
.console-formatted-string {
color: @javascript-string !important;
}
.console-formatted-object {
color: @javascript-comment !important;
}
.console-formatted-function {
color: @foreground !important;
}
.console-formatted-regexp {
color: @javascript-regexp !important;
}
.console-group-messages .section .header .title {
color: @foreground !important;
}
.console-group-messages .section .header::before,
.properties-tree li.parent::before {
content: url(@tree-arrow-right) !important;
}
.console-group-messages .section.expanded .header::before,
.properties-tree li.parent.expanded::before {
content: url(@tree-arrow-down) !important;
}
.console-message-text {
color: @foreground;
}
.console-error-level .console-message-text, .console-error-level .section .header .title {
color: @error !important;
-webkit-animation: webkit-inspector-error 4s ease-in-out infinite !important;
}
.console-user-command::before {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTMzNzdGNUZDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTMzNzdGNjBDMTA1MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y1REMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y1RUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pia6udAAAAB5SURBVHjaYvz//z8DMYAFxli9ejWI6oByK5AVhYaGIhRCgQsQGwOxIFTxe5gEE5pCVyA+C8RpQLwbqgmrwvdQxauhis6AbMamEASUkEwCabyHTWE51BQlqBNMoDSKQhckX3dCFd3DCB4g2AP16VkoGwUwEhvgAAEGAAzQHBRSxqPRAAAAAElFTkSuQmCC) !important;
}
// *********************************************/
// Prompt
// *********************************************/
#console-prompt {
color: @foreground !important;
border-top: 1px solid lighten(@background, 20%) !important;
}
#console-prompt::before {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjRGNTc2MTZDMTA2MTFFMDgwRUZGQ0JCMjgzMzU0MTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjRGNTc2MTdDMTA2MTFFMDgwRUZGQ0JCMjgzMzU0MTYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MzM3N0Y2MUMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MzM3N0Y2MkMxMDUxMUUwODBFRkZDQkIyODMzNTQxNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Plf0eOsAAAB4SURBVHjaYvz//z8DMYAFxph+BqyhA8qtQFaUacKIUAgFLkBsDMSCUMXvYRJMaApdgfgsEKcB8W6oJqwK30MVr4YqOgPEodgUgoASkkkgjfewKSyHmqIEdYIJlEZR6ILk606oonsYwQMEe6A+PQtlowBGYgMcIMAAF2wcFPVNZx8AAAAASUVORK5CYII=) !important;
color: @foreground !important;
}
// *********************************************/
// Elements/Network/Scripts/Audits
// *********************************************/
// *********************************************/
// Layout
// *********************************************/
.script-view,
.properties-tree,
.pane,
.breakpoint-list li,
.pane > .body .info,
.sidebar-pane > .body .info,
.audit-result,
.sidebar,
.sidebar-overlay {
background: @background !important;
color: @foreground !important;
}
.script-view,
.text-editor-contents,
.pane.expanded,
#elements-content,
.resource-view.json,
.sidebar,
.sidebar-overlay,
.navigator-tabbed-pane {
background: @background !important;
font-size: 12px !important;
}
.highlight,
.outline-disclosure > ol {
color: @foreground !important;
}
.sidebar .outline-disclosure > ol,
.navigator-tabbed-pane .outline-disclosure > ol {
color: @foreground !important;
}
.base-storage-tree-element-title,
.base-storage-tree-element-subtitle {
color: fade(@foreground, 50%) !important;
}
.outline-disclosure ol:focus li.selected:not(.resource-sidebar-tree-item) {
background-color: @selection !important;
color: @foreground !important;
}
.sidebar-tree-section {
color: @foreground !important;
text-shadow: none !important;
}
li.hovered:not(.selected) .selection {
background: rgba(255, 255, 255, .2) !important;
}
#elements-content .selected {
background-color: @selection !important;
}
.network-log-grid.data-grid {
color: @foreground !important;
background: @background !important;
th {
.toolbar-background();
color: @foreground !important;
border-right-color: @selection !important;
border-bottom-color: @selection !important;
&.sort-ascending > div::after {
content: url(@tree-arrow-up) !important;
}
&.sort-descending > div::after {
content: url(@tree-arrow-down) !important;
}
select {
color: @foreground !important;
}
}
tr.filler {
background: @background !important;
}
td {
&.method-column,
&.status-column,
&.type-column,
&.initiator-column,
&.size-column,
&.time-column {
background-color: @current-line !important;
border-right: 1px solid @selection !important;
}
&.name-column {
border-right: 1px solid @selection !important;
}
}
.resources-divider-label {
color: @foreground !important;
}
.network-graph-label {
color: @foreground !important;
text-shadow: none !important;
}
.network-graph-side:hover .network-graph-label {
color: @foreground !important;
}
.network-graph-label.after::before,
.network-graph-label.before::after {
content: "\2014" !important;
color: @selection !important;
}
}
// *********************************************/
// HTML
// *********************************************/
.webkit-html-comment {
color: @html-comment !important;
}
.webkit-html-tag {
color: @html-tag !important;
}
.webkit-html-attribute-name {
color: @html-attribute-name !important;
}
.webkit-html-attribute-value {
color: @html-attribute-value !important;
}
.webkit-html-text-node
.webkit-html-css-node {
color: @html-text-node !important;
}
.webkit-html-js-node {
color: @html-js-node !important;
}
.webkit-html-resource-link,
.webkit-html-external-link {
color: @html-link !important;
}
// *********************************************/
// CSS
// *********************************************/
.webkit-css-comment {
color: @css-comment !important;
}
.webkit-css-selector,
.styles-selector {
color: @css-selector !important;
}
.webkit-css-property {
color: @css-property !important;
}
.webkit-css-keyword {
color: @css-keyword !important;
}
.webkit-css-color {
color: @css-color !important;
}
.webkit-css-number,
.properties-tree .value {
color: @css-number !important;
}
.webkit-css-important,
.webkit-css-at-rule {
color: @css-special-rule !important;
}
.webkit-css-string {
color: @css-string !important;
}
.webkit-css-url {
color: @css-url !important;
}
// *********************************************/
// JavaScript
// *********************************************/
.webkit-line-content,
.webkit-javascript-ident {
color: @javascript-ident !important;
}
.webkit-javascript-keyword {
color: @javascript-keyword !important;
}
.webkit-javascript-comment {
color: @javascript-comment !important;
}
.webkit-javascript-string {
color: @javascript-string !important;
}
.webkit-javascript-number {
color: @javascript-number !important;
}
.webkit-javascript-regexp {
color: @javascript-regexp !important;
}
.section .properties .name,
.event-properties .name {
color: @javascript-property-name !important;
}
// *********************************************/
// Inspector Footer
// *********************************************/
.inspector-footer {
.toolbar-search {
.toolbar-search-control {
background: lighten(@foreground, 50%) !important;
}
}
}
// *********************************************/
// Drawer
// *********************************************/
#drawer {
background: @background !important;
}
// *********************************************/
// Status Bar
// *********************************************/
.status-bar {
color: @foreground;
.toolbar-background();
border-top: 1px solid lighten(@background, 30%) !important;
.long-click-glyph {
background-color: @background !important;
}
.status-bar-item {
color: @foreground !important;
.text-shadow();
border-left: 1px solid lighten(@background, 25%) !important;
border-right: 1px solid darken(@background, 25%) !important;
img {
.button-modifier();
}
}
select.status-bar-item:active,
button.status-bar-item:active {
background-color: lighten(@background, 20%) !important;
border-right: 1px solid lighten(@background, 30%) !important;
}
button.status-bar-item {
&.toggled-on .glyph {
background-color: @foreground !important;
&.shadow {
background-color: darken(@background, 35%) !important;
}
}
}
.crumbs {
.crumb {
color: @foreground !important;
.text-shadow();
background-color: lighten(@background, 15%) !important;
border-left: 1px solid lighten(@background, 45%) !important;
border-right: 1px solid lighten(@background, 35%) !important;
padding: 0 10px !important;
-webkit-border-image: 0 !important;
-webkit-transition: all 0.125s ease-in-out;
&:hover {
color: darken(@foreground, 15%) !important;
}
&.selected {
background-color: @background !important;
}
}
}
.scope-bar li {
color: @foreground !important;
.text-shadow();
}
}
#floating-status-bar-container {
border-bottom: 1px solid lighten(@background, 20%) !important;
}
// *********************************************/
// Everything Else
// *********************************************/
.editing,
.audit-result-view,
.resource-headers-view {
color: @foreground !important;
background-color: @background !important;
}
.styles-section .selector-matches {
color: @foreground !important;
}
.styles-section.read-only {
background: @selection !important;
}
.styles-section,
.subtitle {
color: @html-comment !important;
}
.sidebar-separator,
.pane-title {
.toolbar-background();
border-top-color: @toolbar-top !important;
border-bottom-color: @toolbar-bottom !important;
color: @foreground !important;
.text-shadow();
text-overflow: ellipsis !important;
}
.sidebar-pane-subtitle {
color: @foreground !important;
.text-shadow();
}
.pane-title > button,
.pane-title > select {
.button-modifier();
}
.split-view-horizontal .sidebar-pane-toolbar > .select-settings,
.split-view-horizontal .sidebar-pane-toolbar > .pane-title-button {
-webkit-filter: invert(1);
}
.pane.expanded:nth-last-of-type(1) {
border-bottom: 1px solid lighten(@background, 20%) !important;
}
.split-view-sidebar-right,
.split-view-sidebar {
background: lighten(@background, 5%) !important;
}
.section > .header::before,
.properties-tree li.parent::before,
.event-bars .event-bar .header::before,
.outline-disclosure li.parent::before,
.styles-section.matched-styles .properties li.parent .expand-element,
.audit-result-tree li.parent::before {
content: url(@tree-arrow-right) !important;
}
.section.expanded > .header::before,
.properties-tree li.parent.expanded::before,
.event-bars .event-bar.expanded .header::before,
.outline-disclosure li.parent.expanded::before,
.styles-section.matched-styles .properties li.parent.expanded .expand-element,
.audit-result-tree li.parent.expanded::before {
content: url(@tree-arrow-down) !important;
}
.styles-section .properties li.parent::before,
.styles-section .properties li.parent.expanded::before {
content: none !important;
}
.styles-section.matched-styles .properties li.parent .expand-element {
margin-right: 1px !important;
margin-left: -5px !important;
opacity: 0.6 !important;
}
.child-editing {
color: @foreground !important;
}
.section .properties .name,
.event-properties .name {
color: @javascript-property-name !important;
}
.styles-selector {
color: @css-selector !important;
}
.section .header {
color: @foreground !important;
}
.properties .value {
color: @foreground !important;
}
.metrics {
color: @background !important;
}
.metrics .border {
border-color: @foreground !important;
}
.sidebar-pane.composite .metrics-and-computed .sidebar-pane-toolbar {
background-image: toolbar-background() !important;
color: @foreground !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
position: relative !important;
text-shadow: none !important;
}
.event-bars .event-bar .header .title {
color: @selection !important;
text-shadow: none !important;
}
.console-formatted-number {
color: @javascript-number !important;
}
.console-formatted-string {
color: @javascript-string !important;
}
.console-formatted-object,
.console-formatted-node,
.console-formatted-array {
color: @javascript-comment !important;
}
.console-formatted-function {
color: @foreground !important;
}
.console-formatted-regexp {
color: @javascript-regexp !important;
}
.styles-element-state-pane {
background: @selection !important;
color: @foreground !important;
}
.placard {
&:nth-of-type(2n) {
background: @background !important;
}
&.selected {
background-image: -webkit-linear-gradient(@top-bar-color, darken(@top-bar-color, 30%)) !important;
border-top-color: darken(@top-bar-color, 30%) !important;
}
.title {
color: @foreground !important;
}
.subtitle {
color: rgba(255, 255, 255, 0.7) !important;
}
}
.popover {
color: @foreground !important;
background-color: @background !important;
border: 10px solid @selection !important;
border-radius: 10px !important;
-webkit-border-image: none !important;
margin-left: -16px;
margin-top: 20px;
&.bottom-left-arrow,
&.bottom-right-arrow {
margin-top: -20px !important;
}
&.bottom-left-arrow .arrow,
&.bottom-right-arrow .arrow {
border-color: @selection transparent transparent transparent !important;
margin-bottom: -30px !important;
}
&.top-left-arrow .arrow,
&.top-right-arrow .arrow {
margin-top: -30px !important;
}
&.bottom-right-arrow .arrow,
&.bottom-left-arrow .arrow {
}
.arrow {
background-image: none !important;
border-color: transparent transparent @selection transparent !important;
border-style: solid;
border-width: 10px;
width: 0 !important;
height: 0 !important;
left: 0;
}
.source-frame-popover-title,
.network-timing-bar-title {
color: @foreground !important;
}
.source-frame-popover-tree {
border-top-color: @toolbar-top !important;
}
}
.custom-popup-vertical-scroll {
::-webkit-scrollbar-track-piece:vertical:decrement,
::-webkit-scrollbar-track-piece:vertical:increment {
background: #333 !important;
border-radius: 5px !important;
}
}
.webkit-highlighted-line.webkit-line-content {
-webkit-animation: webkit-inspector-fadeout 2s ease-in-out !important;
}
.webkit-execution-line.webkit-line-content {
background-color: @selection !important;
outline: 1px solid darken(@selection, 15%) !important;
}
ol.watch-expressions > li.hovered {
background-color: @foreground !important;
}
.text-editor-lines {
background-color: @current-line !important;
color: @foreground !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment