* {

box-sizing: border-box

}

.tooltipster-default {

box-sizing: content-box

}

.tooltipster-shadow {

border-radius: 5px;

background-color: #eeeeee;

box-shadow: 0px 0px 14px rgba(0,0,0,0.3);

color: #2c2c2c;

.tooltipster-content {

font-family: 'Arial', sans-serif;

font-size: 14px;

line-height: 16px;

}

}

body {

margin: 0;

padding: 0;

font-size: 24px;

font-family: Lato, Verdana, Helvetica, sans-serif;

line-height:28px;

font-weight: 400;

overflow: hidden;

position: fixed;

height: 100%;

width: 100%

}

#overlay {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.1);

display: none;

z-index: 4

}

body.modal #overlay {

display: block

}

#overlay .dialog {

position: absolute;

right: 12px;

top: 68px;

min-width: 320px;

display: table;

margin: auto;

border: none;

background-color: #fff;

box-shadow: 0 0 7px #000;

color: #000;

border-radius: 8px;

font-family: inherit;

font-size: 18px;

line-height: 21px;

padding: 12px;

text-align: center;

overflow: hidden

}

#overlay .dialog.center {

left: 0;

right: 0;

bottom: 25vh;

top: 0;

width: 320px

}

#overlay .dialog.leftopts {

right: 50%;

top: 90px;

min-width: 215px;

}

#overlay .dialog label.tooltipstered:hover {

border: 1px dotted #696969

}

#overlay .dialog label.tooltipstered {

border: 1px solid transparent;

padding-right: 5px

}

#guidepane {

position: absolute;

background: #1e90ff;

width: 50%;

right: -50%;

bottom: 0;

top: 56px;

z-index: 2; /* above editors, below "run" button. */

}

#guidepane .guidetitle {

padding: 0 20px;

color: #87ceeb;

letter-spacing: 2px;

}

#guidepane .guidepreview {

position: absolute;

left: 16px;

right: 0;

bottom: 0;

top: 28px;

height: auto;

width: auto;

background: whitesmoke;

}

#guidepane .guidepreview iframe {

height: 100%;

width: 100%;

border: 0;

}

.framed #overlay .dialog {

top: 12px;

}

#overlay .prompt {

padding: 8px

}

#overlay .info {

padding: 3px;

color: red

}

#overlay .content {

display: inline-block;

padding: 3px

}

#overlay .field {

text-align: right;

padding: 3px;

white-space: nowrap

}

.username {

text-transform: lowercase

}

#overlay .fieldlink {

display: block;

text-align: left;

font-size: 70%;

line-height: 100%;

}

#overlay .switchuser {

text-decoration: none;

font-size: 90%;

}

#overlay .switchuser:hover {

text-decoration: underline

}

#overflow {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden

}

#notification {

position: absolute;

top: 12px;

left: 0;

display: none;

z-index: 2;

background-color: #ffd700;

box-shadow: 0 0 7px gray;

color: #000;

border-radius: 8px;

font-family: inherit;

padding: 3px 32px;

}

#notification a:active {

outline: 2px dotted red

}

#top {

position: absolute;

top: 0;

left: 0;

right: 0;

width: 100%;

height: 56px;

table-layout: auto;

overflow: visible;

max-height: 56px;

border-spacing: 0

}

#topleft, #topright {

padding: 0 12px;

height: 56px;

vertical-align: middle;

}

#topleft {

overflow:hidden;

}

#topright {

text-align: right;

overflow: visible;

width: 1%

}

#topright button, #overlay button {

border: none;

background-color: #fff;

-moz-appearance: none!important;

box-shadow: 0 0 7px gray;

font-size: 16px;

margin: 5px;

display: inline-block;

line-height: 24px;

vertical-align: middle;

height: 28px;

padding: 2px 8px;

color: #222;

border-radius: 8px;

font-family: inherit;

}

#topright button#save, #topright li#save2 {

padding-left: 28px;

background-image: url("/image/dpencil-16.png");

background-repeat: no-repeat;

background-position: 8px center

}

#topright li#save2:hover {

background-image: url("/image/dgpencil-16.png");

}

#topright button#save[disabled], #topright li#save2[disabled] {

background-image: url("/image/dgpencil-16.png")

}

#topright button[disabled], #overlay button[disabled] {

box-shadow: 0 0 7px #a9a9a9;

color: gray;

}

#topright button:not([disabled]):hover, #overlay button:not([disabled]):hover, #overlay .zeroclipboard-is-hover {

box-shadow: 0 0 7px #000;

color: black;

}

#topright button.splitmenu {

padding-right: 28px;

position: relative;

}

#topright button .droparrow {

position: absolute;

right: 0;

top: 0;

height: 28px;

width: 20px;

padding: 2px;

line-height: 24px;

vertical-align: middle;

border-left: 1px solid darkgray;

display: inline-block;

color: #222;

margin:0;

}

#topright button .droparrow ul {

list-style-type:none;

display: none;

position: absolute;

left: -70px;

border: 0;

white-space: nowrap;

z-index: 1;

background:white;

text-align: left;

top: -0px;

padding: 0;

margin: 0;

box-shadow: 0 0 7px gray;

}

#topright button .droparrow:active ul, #topright button .droparrow ul:hover {

display: block;

}

#topright button .droparrow ul li {

padding: 2px 8px;

}

#topright button .droparrow ul li[disabled] {

color: silver;

}

#topright button .droparrow ul li:hover:not([disabled]) {

color: #eee;

background: dodgerblue;

}

#topright button .droparrow ul li:active:not([disabled]) {

color: white;

}

#overlay a.quiet {

color: blue;

text-decoration: none

}

#overlay a.quiet:hover {

text-decoration: underline

}

#filename[contentEditable]:hover {

box-shadow: 0 0 3px #a0522d

}

#owner, #filename, #folder {

display: inline-block;

vertical-align: middle;

color: #8b4513;

max-width: 90%;

max-height: 56px;

overflow: hidden;

word-break: break-all;

white-space: normal;

border: 0

}

#filename {

/* add extra space so cursor is visible when editing */

padding: 3px 2px 2px 2px;

}

#owner {

color: #000

}

#folder {

margin: 0 12px

}

.helplink {

cursor: help

}

.helplink:hover {

text-decoration: underline;

color: blue

}

.panebox {

overflow: hidden;

position: absolute;

top: 56px;

bottom: 0;

}

.framed .panebox {

top: 0;

}

.panetitle {

position: absolute;

top: 0;

height: 28px;

width: 100%;

background: #1e90ff;

padding: 0 12px;

color: #87ceeb;

letter-spacing: 2px;

border-left: 1px solid #fff;

border-right: 1px solid #fff

}

.panetitle a {

color: inherit;

text-decoration: none;

display: block

}

.panetitle a b {

font-family: Courier New, monospace;

font-size: 34px;

line-height: 30px;

font-weight: 700;

vertical-align: top

}

.panetitle a span {

text-decoration: none

}

.panetitle a:hover {

color: #fff

}

.panetitle a:active {

color: red

}

.panetitle a:hover span {

text-decoration: underline;

color: #fff

}

.panetitle a:hover span[alt]:before {

content: attr(alt);

}

.panetitle a:hover span[alt] span {

display: none;

}

.panetitle .blockicon, .panetitle .codeicon {

display: inline-block;

background-repeat: no-repeat;

background-position: center;

width: 32px;

height: 28px;

vertical-align: bottom;

opacity: .6;

}

.panetitle a:hover .blockicon, .panetitle a:hover .codeicon {

vertical-align: bottom;

opacity: 1;

}

.panetitle .blockicon {

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAADBSURBVEjH7ZdbDoUwCETZl4tjaV0a96dGJQO0FVsT7yT8GMucvimJCK0M+iYAbT7ArukAjxtbAGcNz6Uj2MkKsQxg/66HnsWWNh0VQ4DAXEPcFV8AVFIGUUCSYvwbRe3KBgG8pCXB/MgzAJAVLwSoC2IqwHUvrgb4r4E3AcgEALF2QXQU40QZR3HjZSSZ5hAAXaEOGFOHmq5jr4GC6DIPARCE1SAqPh4bgVaD1mrJLMmyATzz1CnwALrfBXcK0V6AH0gNYFHIcN57AAAAAElFTkSuQmCC")

}

.panetitle .codeicon {

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAcCAYAAAAAwr0iAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACOSURBVEjH7ZY9DsAgCIU9V7eejKO/bh3AUhEiDLzExQT8+FEZAEbmkhsLUh0a7d+N614zjpA4rzQAAAKT4piLXACzw40AUwgLgBrJT5rpC9gM4Kh1A+wDaDW0AvAesgKQA4C2ACKi17KgArC7TwEAwl/tDJTogRK3oB+iBqjyHecOJOkj2dGh9KTSAUrpAUQvT3cWdmdvAAAAAElFTkSuQmCC")

}

.pane {

position: absolute;

top: 28px;

bottom: 0;

width: 100%;

background: #f5f5f5;

border-left: 1px solid #fff;

border-right: 1px solid #fff;

}

.back {

left: -50%;

width: 50%;

}

.left {

left: 0;

width: 50%;

z-index: 1;

}

.right {

left: 50%;

width: 50%;

z-index: 0;

}

.rightpal {

left: 50vw;

box-sizing: content-box;

border-left: 35px solid #dcdcdc

}

.ace_search.right {

left: auto;

width: 60%;

max-width: 400px

}

#middle {

z-index: 3;

display: none

}

body.modal #middle {

visibility: hidden

}

#middle, .vcenter {

position: absolute;

top: 50%;

right: 50%;

margin-right: -28px;

}

.framed #middle, .framed .vcenter {

margin-top: -28px;

}

.hcenter {

margin: -50%

}

#run, #stop {

border: 0;

background-color: rgba(255, 255, 255, 0.7);

opacity: .7;

box-shadow: 0 0 7px gray;

color: #1e90ff;

border-radius: 20px;

padding: 10px;

margin: 0;

display: inline-block

}

#run.quiet {

box-shadow: none;

opacity: 0.6;

padding: 0;

margin: 10px;

border-radius: 8px;

background-color: transparent;

}

#run:hover, #stop:hover, #run.quiet:hover {

box-shadow: 0 0 7px #000;

opacity: .9;

padding: 10px;

margin: 0;

border-radius: 20px;

background-color: rgba(255, 255, 255, 0.8);

}

#run.pressed:hover, #stop.pressed:hover {

box-shadow: 0 0 14px #000;

opacity: 1;

}

#run .triangle {

width: 0;

height: 0;

font-size: 0;

line-height: 0;

border-bottom: 19px solid transparent;

border-top: 19px solid transparent;

border-left: 36px solid #1e90ff;

margin: -1px -4px -1px 4px;

}

#run .reload {

width: 36px;

height: 36px;

background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzM2JyBoZWlnaHQ9JzM2Jz48cGF0aCBkPSdNMjksMTEuNSBhMTMsMTMgMCAxLDAgMCwxMycgZmlsbD0nbm9uZScgc3Ryb2tlPSdkb2RnZXJibHVlJyBzdHJva2Utd2lkdGg9JzknLz48cGF0aCBkPSdNMTgsMTggbDE3LDAgbDAsLTE3IHonIGZpbGw9J2RvZGdlcmJsdWUnLz48L3N2Zz4=");

background-position: center;

opacity: 0.6;

}

#run:hover .reload {

opacity: 1;

}

#stop .square {

width: 0;

height: 0;

font-size: 0;

line-height: 0;

border: 14px solid #1e90ff;

margin: 4px 4px;

}

body, .panetitle, #owner {

user-select: none;

-webkit-user-select: none;

-moz-user-select: none;

cursor: default

}

#owner:hover {

text-decoration: underline

}

#folder:hover {

border-radius: 3px;

box-shadow: 0 0 6px #000

}

.editor {

position: absolute;

top: 0;

height: 100%;

left: 0;

width: 100%;

background-color: #fff;

overflow: visible;

}

.htmlmark:before, .cssmark:before, .jsmark:before {

color: #8bf;

font-size: 60px;

font-family: Arial, sans-serif;

font-weight: 700;

pointer-events: none;

opacity: .5;

transition: opacity .3s;

z-index: 3;

position: absolute;

display: table;

margin: auto;

top: 7px;

bottom: 0;

text-align: center;

right: 6%

}

.htmlmark:hover:before, .cssmark:hover:before, .jsmark:hover:before {

opacity: .15

}

.jsmark:before {

content: 'JS'

}

.htmlmark:before {

content: 'HTML'

}

.cssmark:before {

content: 'CSS'

}

#pencildoc .ace_editor {

font-family: "Source Code Pro", Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;

font-weight: 500;

line-height: 121%

}

/* Code line highlighting for errors */

.debugerror {

position: absolute;

background: rgba(255, 0, 0, 0.7);

z-index: 1

}

/* Code line highlighting for currently-running code */

.debugtrace {

position: absolute;

background: #afeeee

}

/* Code line highlighting for mouse-focused code */

.debugfocus {

position: absolute;

background: #ff0;

z-index: 2

}

/* Gutter line highlighting for lines that can be mouseovered */

div.guttermouseable {

background-position: right;

background-repeat: repeat-y;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAABCAYAAAAW/mTzAAAAEElEQVQIW2P8/5/hPwMaAAA38gL/hSCOCgAAAABJRU5ErkJggg==")

}

body#pencildoc #diigolet-csm {

/* Disable the diigo csm popup, which gets in the way of the editor. */

display: none!important

}

.fullscreen img {

vertical-align: top;

margin: 2px 2px 3px 5px;

opacity: .6

}

.fullscreen:hover img {

opacity: 1

}

.closeblocks {

font-size: 26px;

font-weight: 700;

font-family: sans-serif;

position: absolute;

right: 0;

top: 0;

line-height: 15px;

padding: 0 1px 2px;

color: #87ceeb;

z-index: 2000;

cursor: pointer

}

.blockmenu {

position: absolute;

top: -28px;

height: 28px;

right: 0;

width: 100%;

padding: 0 17px;

color: #eee;

background: #0D47A1;

z-index: 300;

}

.blockmenuarrow {

float: right;

font-size: 67%;

}

.blockmenupopup {

width: 100%;

position: absolute;

left: 0px;

top: 28px;

background: #fff;

color: #0d47a1;

border: 1px solid #0d47a1;

border-top: none;

font-size:20px;

}

.blockmenuitem[checked]:before {

position: absolute;

left: 2px;

font-size: 75%;

content: "\2713";

}

.blockmenuitem {

padding: 1px 17px;

white-space: nowrap;

overflow: hidden;

}

.blockmenuitem:hover {

color: white;

background: #0D47A1;

}

.droplet-dropdown-item {

font-size: 15px;

line-height: 1.3;

}

.droplet-palette-wrapper {

cursor: default;

box-shadow: 0 0 6px gray;

}

.droplet-palette-wrapper:hover .closeblocks {

color: #1e90ff

}

.droplet-palette-wrapper .closeblocks:hover {

background: #1e90ff;

color: #fff

}

.droplet-palette-wrapper .closeblocks:active {

color: red;

background: #1e90ff

}

.gear {

display: none

}

.panebox.left .gear {

display: inline-block;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARBAMAAADJQ1rJAAAAFVBMVEUAAAD///////////////////////9Iz20EAAAABnRSTlMAr++f37+5/Na4AAAATElEQVQI12MAArM0AQYICEsLgLLU0hRAFHOSW1pamlMyAwNbGgQwMIilpQlACKa0RAYGxrQkoMK0BNwEQh1CL9w8hB0wezHcIgZ2HwD3DBrdizr+iAAAAABJRU5ErkJggg==");

background-repeat: no-repeat;

background-position: center;

width: 21px;

opacity: .6

}

.langmenu:hover, .langmenu:hover .gear {

color: #fff;

opacity: 1

}

.thumb-toggle:hover, .thumb-toggle:hover .fa {

color: #fff;

opacity: 1

}

.preview {

height: 100%;

overflow: hidden;

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAAABlBMVEXS8OD///9kZDOcAAAAI0lEQVR42u3OIQ4AAAzCQPj/p7EYksmRUHeuoDXcEXvwVgkB3egCQVh7Ml4AAAAASUVORK5CYII=");

background-position: center;

border-left: 1px dashed gainsboro;

}

.preview iframe {

height: 100%;

width: 100%;

border: none;

margin: 0;

padding: 0

}

.directory {

height: 100%;

padding: 10px;

overflow: auto;

}

.directory .column {

display: inline-block;

float: left;

margin-top: 12px

}

.directory .item {

display: inline-block;

float: left;

clear: left;

text-decoration: none;

color: #222;

cursor: pointer;

width: 154px;

div {

margin: 0px;

max-height: 154px;

padding: 2px 0;

span {

display: block;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.caption {

text-align: center;

}

.thumbnail {

background-color: #eeeeee;

width: 100px;

height: 100px;

margin-top: 16px;

margin-left: 27px;

border: 1px #ccc solid;

border-radius: 4px;

padding: 2px;

}

}

&:hover {

text-decoration: underline;

color: blue;

div .thumbnail {

padding: 0px;

border-width: 2px;

border-color: #1679FF;

}

span:not(.caption) {

display: table;

text-decoration: underline;

position: relative;

background-color: #f5f5f5;

padding-right: 6px;

}

}

}

.directory .create {

color: #1e90ff;

div .thumbnail {

border-style: dashed;

}

}

.loading, #notification.loading {

padding: 0;

box-shadow: 0 0 7px gray;

width: 32px;

height: 32px;

border-radius: 16px;

background-position: center;

background-repeat: no-repeat;

opacity: .7;

background-color: #fff;

background-image: url("data:image/gif;base64,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")

}

.protractor-label {

padding: 15px

}

.panetitle-extra {

float: right

}

.droplet-toggle-button {

text-decoration: none;

color: inherit;

cursor: pointer

}

.droplet-toggle-button:hover {

text-decoration: underline;

color: #fff

}

.gadget {

position: fixed;

z-index: 3;

border-radius: 8px;

border-bottom-right-radius: 0;

overflow: hidden;

box-shadow: 0 0 7px #000

}

.gadget .topbar {

width: 100%;

height: 36px;

margin: 0;

padding-top: 8px;

padding-left: 10px;

background: #f5f5f5;

overflow: hidden;

cursor: move;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none

}

.gadget .topbar button {

position: relative;

z-index: 1;

margin: 0;

padding: 2px 8px;

font-size: 18px;

height: 28px;

background: #fff;

border: 0;

border-top-right-radius: 8px;

border-top-left-radius: 8px;

box-shadow: 0 0 7px gray;

font-size: 18px;

text-decoration: none

}

.gadget .closer {

position: absolute;

top: 0;

right: 0;

color: #1e90ff;

padding: 3px 15px;

float: right;

cursor: pointer;

height: 36px

}

.gadget .closer:after {

content: '\2715'

}

.gadget .closer:hover {

background: #1e90ff;

color: #fff;

box-shadow: 0 0 7px #000

}

.gadget .sizer {

position: absolute;

z-index: 1000;

bottom: 0;

right: 0;

width: 0;

height: 0;

border-style: solid;

border-width: 0 0 20px 20px;

border-color: transparent transparent #1e90ff;

cursor: nwse-resize

}

.gadget .body {

box-shadow: 0 0 7px gray;

position: absolute;

top: 36px;

bottom: 0;

width: 100%

}