TouchDevelop/www/editor.css

/* Fonts */

div.calcButtonHelp {
    font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", Sans-Serif;
}

.floatingFrown,
.floatingSmilie,
.navItemInner,
.navHeader,
.calcOp,
.slTabLabelContainer,
.sdName,
.sdListLabel,
.sdHeading,
.hubTileTagNumber,
.hubTileBtnLabel,
.tutTileLinkMore,
.hubSectionHeader
{
    font-family: "Segoe UI Light", "Segoe UI", "Segoe WP Light", "Segoe WP",
             "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "TD Symbols", Sans-Serif;
    font-weight: 200;
}

div.notificationBox {
    position:absolute;
    top:1em;
    left: 17em;
    width: 2.5em;
    height:2.5em;
    cursor:pointer;
}

div.notificationBox > svg {
    margin:-0.4em;
}

div.notificationCounter {
    position: absolute;
    left: 0.9em;
    top: -0.3em;
    width: 1.4em;
    color: white;
    font-size: 1em;
    font-weight: bold;
    padding: 0 0.1em 0.2em 0.1em;
    text-align: center;
}

div.notificationCounter[data-notifications^="no"] {
    display:none;
}

div.notificationCounter[data-notifications^="yes"] {
    border-radius:50%;
    background-color:red;
}

.portrait .notificationBox {
    left: 13.5em;
}

.portrait .hidden-portrait {
    display:none;
}

/************** from list.css *************/

.navHeader, .navItem
{
    position: relative;
    overflow: visible;
}

button.navItem
{
    padding: 0.4em;
    border-left: 0.5em solid transparent;
}

.navItem
{
  font-family: inherit;
  font-size: 1em;
  text-align: left;
  display: block;
  border: none;
  background: transparent;
  width: 100%;
}

.navItem.nested {
    margin-left:1em;
}

.navItemInner {
  position: relative;
  height: 3.15em;
  font-size: 0.7em;
}
.recordTypeDescription .navItemInner
{
    height: auto;
}

.navSig {
  opacity: 0.7;
}

.navHeader
{
    font-size: 1.4em;
    margin: 0.6em 0 0.2em 0;
    padding-left: 0.65em;
}

.navMessage {
  padding-left: 1em;
  margin: 1em 0em;
  color: #6c6c6c;
}

button.navItem[data-active^="yes"]
{
  background: #e0e0e0;
}

.navItem[data-warnings^="yes"]
{
    color: #7057D3;
}

.navItem[data-warnings^="yes"] .navName:before {
  content: "✎ ";
}

.navItem[data-errors^="yes"]
{
    color: #e00;
}

.navItem[data-errors^="yes"] .navName:before {
  content: "☹ ";
}

.navDiamond {
  width: 1.8em;
  height: 1.8em;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.2;
}

button.navItem[data-was-selected^="yes"]
{
    border-color: #ccc;
}


button.navItem[data-selected^="yes"]
{
/*
  background: #f4f4ff;
  border-left-color: #E72A59;
  */
  border-color: #09655E;
}

div.sdHeaderOuter[data-current^="yes"],
button.navItem[data-current^="yes"]
{
  background: #09655E;
  color: white;
}


.navImg
{
    width: 3.15em;
    height: 3.15em;
    /* border: 1px solid transparent; why? */
    position: absolute;
        padding: 0;
    top: 0;
    left: 0;
}

.navDiamond .svg,
.tutWarning .svg,
.tutIcon .svg,
.actionAwait .svg,
.codeAwait .svg,
.navImg .svg,
.navImg img {
  width: 100%;
  height: 100%;
}

.navContent
{
    position: absolute;
    left: 4em;
    top: 0;
    right:0;
    /*margin-top: -5px;
    margin-left: 62px;*/
    white-space: nowrap;
    overflow: hidden;
}
.recordTypeDescription .navContent
{
    position: relative;
}

.smallDecl
{
    font-size: 0.8em;
    color: #666;
    display: inline;
}

.navName
{
    font-size: 1.2em;
    margin-bottom: 0.2em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    width: calc(100% - 2.3em);
}

.navDescription
{
    font-size: 0.8em;
    color: #666;
}

.recordTypeDescription .navDescription
{
    text-wrap:normal;
    white-space:normal;
    width: calc(100% - 5em);
}

.navItem[data-current^="yes"] .navDescription
{
    color: #ccc;
}

.navItem[data-current^="yes"] .navImg
{
  border: 1px solid white;
}

.navRound .navImg {
  border: none;
}

.navRound {
}

#programSearchBox
{
  width: 85%;
  margin-top: 1em;
  margin-left: 15px;
}

.navItem-button {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.7em;
  margin: 0;
  background: rgba(255,255,255,0.8);
}

.scriptButtons {
  text-align: right;
  margin-top: 0.2em;
  margin-bottom: 0em;
}
.scriptButtons .navItem-button {
  position: relative;
  display: inline-block;
}

.disabledItem {
  opacity: 0.3;
}

div.calcDebug {
  background-color: white;
  opacity:0.2;
  position: absolute;
  left: 60%;
  top: 20%;
  width: 40%;
  height: 500px;
  border: 1px solid black;
  font-size: 0.4em;
}

/************** from calculator.css *************/

.calcButtonsTop {
 float: right;
  background: white;
  white-space:nowrap;
}

.action-sig {
  margin-bottom: 1em;
}

.stmtEditor {
  pointer-events: none;
}
.stmtEditor div {
  pointer-events: auto;
}

.calcButtonsRight
{
  position: relative;
  background: white;
  white-space: nowrap;
  text-align:right;
}

.calcButtonsClear { clear: both; }

#calcOverlay {
  background-color: white;
  opacity:0.2;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.stmtEditor[data-inline-editing^="no"] #calcOverlay
{
  display:none;
}

#expressionDisplay
{
  font-size: 1.3em;
  line-height: 1.2em;
  padding-top: 0.1em;
  padding-bottom: 0.3em;
  display: block;
}

/*
#leftPaneContent[data-in-calculator^="yes"] .line { opacity: 0.35; }
#leftPaneContent #expressionDisplay { opacity: 1; }
*/

.phone #expressionDisplay {
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  font-size: 1.5em;
}

.assume-notouch #expressionDisplay {
    font-size:inherit;
    line-height:inherit;
    padding-top:inherit;
    padding-bottom:inherit;
}

#expressionDisplay[data-inline-editing^="yes"] .tokenPlaceholder,
#expressionDisplay[data-inline-editing^="yes"] .calcCursor {
  display: none;
}

#expressionDisplay .wall-textbox {
  padding: 0em 0em 0.1em 0.1em;
  margin: 0;
  display: inline-block;
  margin-bottom: -0.2em;
  border: none;
  vertical-align: top;
}

/* iPad wierdness - without this drag-to-select doesn't work */
#expressionDisplay span {
  pointer-events: none;
}

#expressionDisplay[data-active^="yes"]
{
  background: inherit;
}

.calcButton .svg,
.calcButton img {
  max-height: 50%;
  max-width: 50%;
}

.calcButton
{
  border: none;
  background: #eee;
  background-repeat:no-repeat;
  background-position:center;
  font-size: 1em;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 100px;
  margin: 1px;
  padding: 0;
}

.phone .calcButton {
  font-size: 1.1em;
}

.calcIntelliButton
{
  background: #eef;
}

.calcStmtButton
{
  background:#C5E9FD;
}

.calcSelectionButton
{
  /* background: #C9F1EE; */
  background: #ced;
}

.calcButton .symbol
{
  opacity: 1;
}

.calcButton .calcArrow
{
  opacity: 0.55;
}

.dbgViewArea
{
  border: none;
  background: #eee;
  font-size: 1em;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100px;
  margin: 1px;
  padding: 0;
}

.phone .dbgViewArea {
 font-size:1.1em;
}

.svg-symbol {
  display: inline-block;
  opacity: 0.55;
}
.svg-symbol .svg {
  height: 0.65em;
  width: 0.65em;
}

.calcButtonCornerIcon .svg {
  width: 100%;
  height: 100%;
}

.calcButtonCornerIcon {
  position: absolute;
  right: 0em;
  top: 0em;
  width: 1em;
  height: 1em;
}

.fromPlugin .svg-symbol {
  opacity: 1;
  margin: 0 0.2em;
}

.stmt .codeleftmark {
    display: inline-block;
    position: absolute;
    top: 0;
}

.stmt .stmt .codeleftmark {
  left: -1.2em;
}
.stmt .stmt .stmt .codeleftmark {
  left: -2.4em;
}
.stmt .stmt .stmt .stmt .codeleftmark {
  left: -3.6em;
}
.stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -4.8em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -6.0em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -7.2em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -8.4em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -9.6em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -10.8em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -12.0em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -13.2em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -14.6em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -15.8em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -17.0em;
}
.stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .stmt .codeleftmark {
  left: -18.2em;
}

.callstackmark .svg {
  height: 0.65em;
  width: 0.65em;
}

.breakpoint .svg {
  height: 0.65em;
  width: 0.65em;
}

.calcButtonTriangle
{
  border-right-color: #e00;
  border-top-color: #e00;
  border-bottom-color: transparent;
  border-left-color: transparent;
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4em;
}

.calcButtonColorMarker
{
  width: 100%;
  height: 30%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #e00;
}

.calcOp { color: black; }

.calcOp,
.intelliOp
{
  white-space: normal;
/*  word-break: break-all; */
  padding-bottom: 20%;
}

div.calcCursor
{
  font-weight: bold;
  display: inline-block;
  position: absolute;
  color: #E72A59;
  margin-left: -0.05em;
  animation: blinkCursor 1s infinite;                      /*CSSpref*/  -webkit-animation: blinkCursor 1s infinite;  -moz-animation: blinkCursor 1s infinite;  -ms-animation: blinkCursor 1s infinite;
}

@keyframes blinkCursor {
  0% { opacity: 1; }
  40% { opacity: 1; }
  41% { opacity: 0; }
  99% { opacity: 0; }
  100% { opacity: 1; }
}   /*CSSpref*/ @-webkit-keyframes blinkCursor { 0% { opacity: 1; } 40% { opacity: 1; } 41% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } }  @-moz-keyframes blinkCursor { 0% { opacity: 1; } 40% { opacity: 1; } 41% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } }  @-ms-keyframes blinkCursor { 0% { opacity: 1; } 40% { opacity: 1; } 41% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } }

div.calcButtonHelp
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 2px;
  padding-bottom: 6px;
  border-left: solid transparent 4px;
  border-right: solid transparent 4px;
  line-height: 1.4em;
  font-size: 0.5em;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;

  color: #d01040;
  background: transparent;
  box-sizing: border-box;                      /*CSSpref*/  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;
}

.phone div.calcButtonHelp {
  font-size: 0.6em;
}

.calcButton[data-active^="yes"]
{
  background: #bbb;
  color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
}

.calcStringEdit
{
  width: 98%;
}
.calcStringEdit pre {
  margin: 0;
}

/* Charm */

.charm div.cursor
{
  position: absolute;
  /* Now these parameters are dynamically specified in JavaScript.
  width: 35px;
  height: 35px;
   */
  border: 4px solid #E72A59;
}

.charm div.cursor div
{
  /* Now these parameters are dynamically specified in JavaScript.
  width: 35px;
  height: 35px;
   */
  opacity: 0.6;
  background: #FFF;
}

/* Number charm */
div.numberBox
{
  position: absolute;
  width: 240px;
  height: 80px;
  background: #EEE;
  border: 2px solid #FFF;
}

div.numberBox div.ruler
{
  width: 240px;
  height: 2px;
  border: solid #EEE;
  border-width: 62px 0 16px 0;
  background: #000;
}

div.numberBox div.mainLine
{
  position: absolute;
  left: 119px;
  bottom: 4px;
  width: 3px;
  height: 72px;
  background: #000;
}

div.numberBox div.scale
{
  position: absolute;
  bottom: 8px;
  text-align: center;
}

div.numberBox div.scale span.value
{
  display: block;
  position: relative;
  left: -15px;
  width: 30px;
  text-align: center;
}

div.numberBox div.scale div.scaleLine
{
  position: relative;
  left: -1px;
  width: 3px;
  height: 24px;
  margin: 0;
  background: #000;
}

/* Color charm */
div.colorBox
{
  position: absolute;
  background: #EEE;
  border: 2px solid #FFF;
}

div.colorBox div.colorInputBox .colorPreviewBox
{
  float: left;
  width: 60px;
  height: 60px;
  border: 4px solid #EEE;
  background: #FFF;
}

div.colorBox div.colorInputBox .wall-textbox
{
  width: 214px;
  height: 48px;
  margin: 0;
  padding: 6px 12px;
  border-width: 4px;
  border-color: #EEE;
  background: #FFF;
}

div.paletteSelector
{
  margin: 2px 4px 0 4px;
  font-size: smaller;
  vertical-align: bottom;
}

div.paletteSelector span.paletteChoice
{
  display: inline-block;
  margin-right: 4px;
  border-bottom: 3px solid #CCC;
  vertical-align: bottom;
}

div.paletteSelector span.paletteChoice.active
{
  border-bottom-color: #E72A59;
}

div.colorBox div.palette
{
  width: 306px;
  padding: 4px;
  line-height: 0;
  vertical-align: bottom;
}

div.colorBox div.palette.presetPalette
{
  padding: 2px;
}

div.colorBox div.presetPalette div.presetColor
{
  display: inline-block;
  margin: 2px;
  width: 30px;
  height: 30px;
  border: 1px solid #FFF;
}

div.colorBox div.hsbPalette div.hsbCursor.cursor
{
  border-color: #FFF;
}

div.colorBox div.hsbPalette div.hsbSquare
{
  display: inline-block;
  width: 256px;
  height: 256px;
  border: 1px solid #EEE;
  background-image: url(../icons/overlay.png);
}

div.colorBox div.hsbPalette div.hueCursor.cursor
{
  width: 40px;
  border-color: #FFF;
  border-width: 4px 0;
}

div.colorBox div.hsbPalette div.hueSlider
{
  display: inline-block;
  margin-left: 6px;
  width: 40px;
  height: 256px;
  border: 1px solid #EEE;
  background-image: url(../icons/gradation.png);
}

div.localNameBox
{
  position: absolute;
  top: 0;
  left: 0;
}

.localNameBox input.wall-textbox
{
  font-size: 1.5em;
}

#calcMessage
{
display:block;
}

div.calcError {
  color: #444;
}

textarea.commentEdit {
  width: 95%;
  height: 14em;
}

.commentHeader {
  font-size: 40px;
  color: #ccc;
  text-align: left;
  position: relative;
  margin-top: -20px;
}

.commentHeaderSlash {
  color: black;
  font-size: 70px;
}



.highlight {
  background-color: #FF9;
}

.tokenPlaceholder .highlight {
  background-color: inherit;
  color: #000;
}

.navItem[data-current^="yes"] .highlight {
  background-color: #993;
}


.tokenPlaceholder {
    color: #bbb;
    padding-left:0.3em;
}

.calcToken
{
  display: inline-block;
  vertical-align: bottom;
  white-space: pre;
}

.calcToken[data-selected^="yes"]
{
  background: #B8E72A;
  border:#aaa solid 1px;
  border-radius: 0.3em;
}

.tokenToken {
  border:#aaa solid 1px;
  border-radius: 0.3em;
}

.stmt[data-current="yes"] .errorSq {
  border:#f00 solid 2px;
  border-radius: 0.3em;
}

.stmt[data-current="yes"] .kw {
  border:none;
}

#scriptEditor[data-blockMode="yes"] .tokenToken {
  border-color:#fff;
}

.tokenPlaceholder.calcToken {
  border:none;
}

.calcInvisible {
  opacity: 0;
}

.calcSpaceAfter
{
  margin-right: 0.5em;
}

.calcCursorMarker {
  padding-left: 1em;
  padding-right: 1em;
  position: absolute;
  /* it needs to have non-transparent background - this way it presents a bigger touch target; at least in IE10 */
  background: rgba(100, 100, 100, 0.01);
  cursor: pointer;
}

.calcCursorMarker[data-active^="yes"]
{
}

.calcCursorMarker svg {
  height: 1.4em;
  width: 0.42em;
}

.stmtEditor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.landscape .apiBackContainer {
  display: inline-block;
  margin-top: 0.5em;
  max-width:2em; /* vertical layout */
}

.apiDismiss {
  background: white;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}


#apiSearchBox
{
  position: absolute;
  top: 0em;
  margin: 1em 0 0 0;
}

.landscape #apiSearchBox {
  left: 4.2em;
  width: 67%;
}

.portrait #apiSearchBox {
  right: 4.3em;
  width: 12em;
}

.phone #apiSearchBox {
  width: 9em;
}

#root.phone[data-pane-hidden^="no"] #apiSearchBox {
  width: 12em;
}

.portrait .apiTopDiv {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: white;
}

.portrait .apiTopDiv .tabMenu-button {
  position: absolute;
  right: 0;
  top: 0;
}

.portrait #root[data-pane-hidden^="no"] .apiTopDiv .tabMenu-button {
    border-color: #09655E;
}


.stmtEditorSide
{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 38%;
}

.landscape .stmtEditorSide
{
    background: white;
}


.calcHelpBlock {
  margin-bottom: 1em;
}

.calcApiHelp {
  font-size: 0.8em;
  color: #444;
  height: 3.5em;
  background: #C5E9FD;
  position: relative;
  white-space: normal;
}

.calcApiHelpInner {
  overflow: hidden;
  left: 1em;
  right: 1em;
  top: 0.3em;
  bottom: 0.3em;
  width: auto;
  height: auto;
  position: absolute;
}

.calcApiHelpCurrentParameter {
  font-weight: bold
}

/**** */

.sideWall {
  font-size: 0.8em;
  position: absolute;
  top: 2em;
  bottom: 0em;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}

.sideMsg, .wall-zoom {
  margin: 0.7em;
  margin-bottom: 0;
  height: 1.5em;
  color: #666;
  font-size: 0.6em;
  vertical-align: top;
}

.wall-zoom
{
  position: absolute;
  right: 0;
  top: 0;
}

.wall-zoom button
{
  display: inline-block;
  position: relative;
  top: 0;
  bottom: 0;
  margin: 0 0.3em;
  background: #FFF;
  border: none;
  font-size: 1em;
  vertical-align: top;
}

.wall-zoom .slider
{
  display: inline-block;
  position: relative;
  top: 0;
  width: 12em;
  height: 1.3em;
  background: #DDD;
  border: 2px solid #000;
  vertical-align: top;
}

.wall-zoom .slider .cursor
{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2em;
  background: #FFF;
}

/************** from properties.css *************/

.scriptPropContainer,
.kindContainer {
}

.varLabel {
  margin: 0.5em 0em;
  font-size: 1.5em;
}
.varImg {
  margin-left:0.5em;
  max-width:80%;
  max-height:80%;
}
.varImgInfo {
  margin-left:0.5em;
  text-align:left;
  font-size: 1em;
}

.formHint {
  font-size: 0.6em;
  line-height: 1.4em;
  opacity: 0.6;
}

.formError {
  font-size: 0.8em;
  line-height: 1.4em;
  opacity: 0.8;
  margin-top:0.8em;
  color: #e00;
}

.formError2 {
  font-size: 0.8em;
  line-height: 1.4em;
  opacity: 0.8;
  margin-top:0.8em;
  font-weight: bold;
}

.formHint .float-help-link {
  font-size: 1.0em;
}

.formHint .emph {
  font-weight: bold;
}

.formRelative {
  position: relative;
}

textarea.variableDesc {
  width: calc(100% - 1em);
  height: 6em;
  white-space:nowrap;
}

textarea.description {
  width: calc(100% - 1.4em);
  height: 6em;
  resize: none;
  margin: 0.5em 0.4em;
}

textarea.shell {
font-family: monospace;
width: 100%;
resize: none;
font-size: 0.7em;
}

a.idlink, a.idlink:hover, a.idlink:visited, a.idlink:active, a.idlink:link {
    color:black;
    text-decoration:none;
}

.selectableIcon
{
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
}

.selectableIcon .svg,
.selectableIcon img {
  width: 100%;
  height: auto;
}

.selectableIcon
{
  margin: 0.4em;
}

.prop-spacer
{
  height: 20px;
}

.varProps
{
  padding: 0.5em 1em;
}

.colorSlider {
  width: 70%;
  display: inline-block;
  margin-right: 1em;
}

.colorSample {
  width: 5em;
  margin: 0.2em;
  padding: 0.2em;
  text-align: center;
  display: inline-block;
  border: 1px solid #ccc;
}

.whiteBackground { background: white; }
.blackBackground { background: black; }
.whiteText { color: white; }
.blackText { color: black; }

.varHalf {
  display: inline-block;
  vertical-align: top;
  width:50%;
}

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

.recordProperties .left {
  width: 35%;
}
.recordProperties .right {
  width: 100%;
}
.recordProperties .defbuttons
{
  margin: 0 0 1em 0;
}

.varHalf .formHint {
  padding-left: 0.5em;
  width: calc(50% - 0.5em);
}
.varHalf .navItem {
  border-left: none;
}

.capabilityBox {
  font-size: 0.8em;
  position: relative;
}

.platformCaps {
  position: absolute;
  font-size: 0.8em;
  right: 0.1em;
  top: 0.5em;
  pointer-events: none;
}

.greyedOut {
  opacity: 0.3;
}

/************** from code.css *************/

.literal
{
}

.profile {
  opacity: 1;
  font-size: 0.7em;
  position: absolute;
  background:white;
  right: 0;
  padding: 0.2em;
}

.stringLiteral {
 color: #A31515 ;
}

.picLiteral {
  height:1em;
  vertical-align: bottom;
}

.block
{
    padding-left: 1em;
}


.kw
{
    color: #408500;
    font-weight: bold;
}

.kbm {
  display:inline-block;
}
.kbm svg {
  height: 1em;
  vertical-align: middle;
  margin-left: 0.2em;
}
.kbm svg > path.biton {
  fill:#f00;
  stroke: black;
  stroke-width: 2px;
}

.kbm svg > path.bitoff {
  fill:#ccc;
}
.kbm.docs svg {
  height: 7em;
  margin: 0.5em 0.5em 0em 0.5em;
}
.kbm.docs svg > path.biton {
  stroke:black;
}
.kbm.docs svg > path.bitoff {
  stroke:black;
  fill:transparent;
}

.calcTemplate .kbm svg > path.bitoff {
    fill: white;
}

.st
{
    color: #6c6c6c;
}

.comment
{
    color: #6c6c6c;
    line-height: 1.0em;
    font-size: 0.8em;
}

.block-comment { font-style: italic; font-size: 0.6em; color: #6c6c6c; line-height: 1.3em; }
.block-comment .kw { color: #6c6c6c; }
#root .block-comment .stmt { border-left-color: #ccc; }


.placeholder {
  font-size: 0.7em;
  padding: 0.2em;
  border: 0.1em dotted gray;
}

.md-tutorial code,
.md-comment code,
.md-inline code {
  font-family: inherit;
  border: 1px dotted #bbb;
  padding: 0em 0.2em 0.1em 0.2em;
  color: black;
  background-color:white;
  white-space: nowrap;
}

.md-tutorial code.md-ui,
.md-comment code.md-ui,
.md-inline code.md-ui
{
  border: 2px solid #777;
  white-space: nowrap;
}

.md-tutorial .md-img {
  clear: both;
  margin:0.5em;
}

.md-img {
  width:100%;
  text-align:center;
  position:relative;
}

.md-img-inner {
  position:relative;
  display:inline-block;
  width:100%;
}

.md-img-inline {
    display:inline;
    width:2em;
    vertical-align:middle;
}

/*
#scriptEditor .md-img-inner { border: 1px dotted #eee; }
#scriptEditor .md-img img { border: 1px dotted #eee; }
*/

.md-img img {
  max-height: 100%;
  max-width: 100%;
}

.md-caption {
  text-align:center;
  font-size: 0.8em;
}

.md-api-entry {
  font-size: 0.8em;
  margin-bottom: .5em;
  border: 1px dotted #bbb;
  padding: 0.2em 1em 0.5em 1em;
  position: relative;
  color: black;
}

.md-api-header .signature {
  font-size: 1.5em;
  margin-bottom: 0.3em;
}

.md-api-header .sig-parameter {
  display: inline-block;
  padding-left: 2em;
  min-width: 4em;
}

.md-api-header a {
  color: black;
}

.md-api-header {
  margin: 1em 0;
}

a.md-api-entry-link {
  text-decoration: none;
}

.md-api-entry .signature {
  font-size: 1.3em;
}

.md-more {
  font-size: 0.8em;
  display: block;
  float: right;
  text-decoration: underline;
  color: #666;
}

.md-error {
  font-weight: bold;
  color: #e00;
}

.md-warning {
    background-color:lightyellow;
    border-left:solid 0.25em #e00;
    padding:0.5em;
    margin-left:2em;
}

.md-comment {
  font-size: 0.8em;
  line-height: normal;
  color: #6c6c6c;
  padding-left: 0.2em;
  display:inline-block;
}

.md-comment ul,
.md-comment li,
.md-comment p {
  margin-top: 0;
  margin-bottom: 0;
}

.md-tutorial ul,
.md-comment ul {
  padding-left: 1em;
}
.md-tutorial li,
.md-comment li {
  margin-left: 0.8em;
}

.md-comment h1,
.md-comment h2,
.md-comment h3,
.md-comment h4 {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.6em 0;
}

div.line
{
  border-left: 0.1em solid transparent;
  padding-left: 0.6em;
  margin-left: -0.4em;
  padding-bottom: 0.1em;
  display: inline-block;
  min-width: 5em;
}

.tabMenu-button[data-tipped="yes"],
.topMenu-button[data-tipped="yes"],
.navItem[data-tipped="yes"],
.code-button[data-tipped="yes"],
.line[data-tipped="yes"] {
  background:rgba(0, 245, 255, 0.16);
}

div.md-video-link {
  position:relative;
}
div.md-video-link > img {
  width: calc(100% - 1em);
}
div.md-video-link > svg {
  position:absolute;
  left:0em;
  bottom: 0em;
  width: 25%;
}

@media print {
  div.md-video-link > svg { display:none; }
}

.sdCmt div.md-video-link {
    margin-top:0.5em;
    max-width:60%;
}

.greyed { color: #6c6c6c; }
.greyer { color: #999;}

.code-highlight {
  background: #Ff8;
/*  border-right: 1em solid #E72A59; */
}

.stmt
{
    border-left: 0.2em solid #ccc;
    border-radius: 0.4em;
    padding-left: 0.1em;
    margin-top: 0.1em;
    padding-left: 0px;
    /* padding-bottom: 3px; */
    position: relative;
}

#scriptEditor[data-proMode="yes"] .stmt {
    border-left-width: 2px;
    border-left-style: dotted;
}

.monospace {
  font-family: "Consolas", "Lucida Console", monospace;
  font-size: 1.0em;
}

.stmt[data-nest="0"] { border-left-color: #FFAC18; }
.stmt[data-nest="1"] { border-left-color: #56D2FF; }
.stmt[data-nest="2"] { border-left-color: #bd1; }
.stmt[data-nest="3"] { border-left-color: #ccc; }

.decl
{
  padding: 1em 0em 1em 0em;
}

.portrait .decl {
}


.line[data-search-result^="yes"]
{
  background: yellow;
}

.line[data-insertion^="yes"]
{
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

button.insertStmt {
  font-size: 1em;
  height: 3em;
  width: 4em;
  border: 1px solid black;
  background: white;
  margin: 0.2em;
  vertical-align: top;
}

button.insertStmt[data-active^="yes"]
{
 background: #ccc;
}

div.insertStmtHint
{
  height: 3em;
  width: 3.6em;
  margin: 0.2em 0.4em 0.2em 0.4em;
  display: inline-block;
  line-height: 0.8em;
  text-align: center;
}

.insertStmtHint span {
  font-size: 0.7em;
}

.insertStmt span {
  font-size: 0.9em;
}

.stmt[data-current^="yes"] > .line > .hintMessage,
.stmt[data-current^="yes"] > .hintMessage,
.stmt[data-current^="yes"] > .line > .errorBr,
.stmt[data-current^="yes"] > .errorBr,
.stmt[data-current^="yes"] > .line > .errorMessage,
.stmt[data-current^="yes"] > .errorMessage
{
}

.stmt[data-current^="yes"]
{
  background: #f4f4ff;
}

.stmt[data-selected^="yes", data-current^="yes"],
.stmt[data-selected^="yes", data-current^="yes"] .line
{
    background: inherit;
}

.line[data-carret^="yes"]
{
  border-left-color: #E72A59;
}


.stmt[data-current^="yes"],
.stmt[data-selected^="yes"]
{
  /*margin-top: 0px;
  padding-top: 3px; */
  border-left: 0.1em solid #E72A59;
}

.stmt[data-selected^="yes"]
{
  background: #B8E72A;
}

.stmt[data-selected^="yes"] .stmt
{
  border-left: 5px solid #297;
}

.hintMessage[data-active^="yes"],
.errorMessage[data-active^="yes"],
.line[data-active^="yes"]
{
  background: #eee;
}

.debugParsed
{
    font-size: 0.5em;
}

.hintMessage,
.errorMessage
{
    color: #e00;
    font-size: 0.8em;
    padding-left: 5px;
    display:inline-block;
}

.errorNumber {
  color: #bbb;
  font-size: 0.7em;
  padding-left:0.5em;
}

.hintMessage {
  color: #7057D3;
}

.inlineHint {
  display: block;
  margin-left: 1em;
}

span.errorSq,
span.errorSq .kw
{
    color: #e00;
}

.code-button-row-left
{
  position: absolute;
  left: 0;
}

.code-button-row
{
  position: absolute;
  right: 0.5em;
  white-space:nowrap;
}

.phone .code-button-row,
.phone .code-button-row-left {
 font-size: 1.3em;
}

.tokenSelection .lineSelection {
  display: none;
}

.lineSelection .tokenSelection {
  display: none;
}

#root.portrait[data-pane-hidden^="no"] .code-button-row {
  /* just hide it */
  display:none;
}

#root.phone[data-pane-hidden^="no"] .code-button-row {
  /* just hide it */
  display:none;
}

#root.portrait[data-pane-hidden^="no"] #leftBtnRow .topMenu-button {
  display: none;
}

.topMenu-button.searchBackButton {
  display: none;
}

#root.portrait[data-pane-hidden^="no"] #leftBtnRow .search-back .topMenu-button {
  display: inline-block;
}

.topMenu-button.debuggerTopButton {
    display: none;
}

#editorContainer[data-debuggerMode="yes"] #leftBtnRow {
    background-color:#ffa;
}
#editorContainer[data-debuggerMode^="yes"] #leftBtnRow .topMenu-button {
  display: none;
}

#editorContainer[data-debuggerMode^="yes"] #leftBtnRow .topMenu-button-container {
  display: none;
}

#editorContainer[data-debuggerMode^="yes"] #leftBtnRow .topMenu-button.debuggerTopButton {
  display: inline-block;
}

#scriptEditor.external > #editorContainer {
    /* [editor.ts] sets the [display] property on the element directly. */
    display: none !important;
}

#scriptEditor:not(.external) > #externalEditorContainer {
    display: none;
}

#externalEditorContainer {
    height: 100%;
}

.tdLite {
    text-align: right;
    flex: 1;                      /*CSSpref*/  -webkit-flex: 1;  -moz-flex: 1;  -ms-flex: 1;
    padding-right: .2em;
    font-weight: bold;
}

#externalEditorFrame > iframe {
    flex: 1;                      /*CSSpref*/  -webkit-flex: 1;  -moz-flex: 1;  -ms-flex: 1;
    width: 100%;
    height: 100%;

    border: 0;
    padding: 0;
}

#externalEditorFrame {
    flex: 3;                      /*CSSpref*/  -webkit-flex: 3;  -moz-flex: 3;  -ms-flex: 3;
}

#externalEditorSide .boardCanvas {
    width: 100% !important;
    height: auto !important;
}

#externalEditorSide .wallFullScreenContainer {
    margin: 0;
    display: -ms-flexbox;
    display: flex;                      /*CSSpref*/  display: -webkit-flex;  display: -moz-flex;  display: -ms-flex;
    flex: 1;                      /*CSSpref*/  -webkit-flex: 1;  -moz-flex: 1;  -ms-flex: 1;
}

/* The run-time code in lib/Board.ts is not compatible with containers that
 * have margins... So we use a wrapper div. */
#externalEditorSide .wallFullScreenWrapper {
    margin: 0 1em;
    display: -ms-flexbox;
    display: flex;                      /*CSSpref*/  display: -webkit-flex;  display: -moz-flex;  display: -ms-flex;
    flex: 1;                      /*CSSpref*/  -webkit-flex: 1;  -moz-flex: 1;  -ms-flex: 1;
}

#externalEditorSide .wallFullScreenLogo {
    text-align: right;
}

#externalEditorSide .wallFullScreenLogo img {
    width: calc(100% - 2em);
    max-width: 225px;
    margin: 1em;
    height: auto;
}

/* Should be good enough for a 1280x800 display. */
@media (max-width: 1250px) {
    #externalEditorSide .wallFullScreenWrapper {
        margin: 0 .4em;
    }

    #externalEditorPanes {
        position: relative;
    }

    #externalEditorSide {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .5);
    }

    #externalEditorSide.dismissed {
        display: none;
    }

    #externalEditorSide .wallFullScreenLogo img {
        background-color: white;
        padding: 1em;
        border: .2em solid black;
    }

    #externalEditorSide .boardCanvas {
        /* Don't put padding / border here, as lib/Board.ts does some "clever"
         * run-time size computations which completely prevent us from doing
         * anything here. */
        width: auto !important;
        height: auto !important;
        background-color: white;
    }

    .wall-fullscreen {
        height: auto !important;
    }
}

#root.portrait #editorContainer[data-debuggerMode^="yes"] .editorSearchContainer .wall-textbox {
  display: none;
}

#root.split #editorContainer {
  border-right: 0.1em dotted #ccc;
}

.debuggerVarTable {
    width: 100%;
    display: table;
    margin: 0px 0px 0px 0px;
    border-top: 1px solid black;
}

.debuggerVarTableClickable {
  cursor: pointer;
  text-decoration: underline;
}

.debuggerTopVar {
  border-top: 0.1em dotted #bbb;
}

.debuggerVarTableRow {
    width: 100%;
    clear: both;
    text-align:left;
}

.debuggerVarTableLeftElement {
    display:inline-block;
    width: 9em;
    overflow: hidden;
}

.debuggerVarTableRightElement {
    margin-left: 1em;
    display:inline-block;
}


.code-button-frame {
  width: 2em;
  height: 2em;
  margin-left: 0.5em;
  background: white;
}

.wrench-button .code-button-frame {
  background: #0bf;
  border-color: #0bf;
}

.code-button {
  display: inline-block;
  padding: 0;
  width: 3em;
}

.code-button[data-disabled^="yes"]
{
    display: none;
}

.assume-mouse.assume-notouch .code-button-frame {
  width:1.5em;
  height:1.5em;
}
.assume-mouse.assume-notouch .code-button {
  width:2.5em;
}

.code-button-desc
{
  width: 100%;
  text-align: center;
  font-size: 0.6em;
  margin-top: 0.2em;
  padding-bottom: 0.4em;
  background: white;
}

.codeMarker
{
  display: block;
  position: absolute;
  /* it needs to have non-transparent background - this way it presents a bigger touch target; at least in IE10 */
  background: rgba(100, 100, 100, 0.001);
  cursor: pointer;
  padding-left: 1em;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  height: auto;
  right: 0;
}

#root.portrait[data-pane-hidden^="no"] .codeMarker {
  right: 19em;
}

#root.phone[data-pane-hidden^="no"] .codeMarker {
  right: 10.5em;
}


.codeMarker svg {
  width: 3.5em;
  height: 1.05em;
}

.codeMarkerTop {
}

.codeMarkerBottom {
}

img.codeMarker[data-active^="yes"]
{
  opacity: 0.8;
}


div.codeHint
{
  position: absolute;
  right: 5px;
  font-size: 0.5em;
  color: #E72A59;
  line-height: 1.5em;
  background: white;
  opacity: 0.8;
}

div.decl > div.stmt {
  border-color: transparent;
}

.declBottomSpacer {
  height: 2.5em;
  cursor: pointer;
}

.selHeader {
  margin-top: 1.5em;
  margin-bottom: 0.2em;
  font-size: 0.8em;
  font-weight: bold;
}

@keyframes blinkLocation {
  0% { background-color: #ff0; }
  15% { background-color: #ffc; }
  30% { background-color: #ff0; }
  45% { background-color: #ffc; }
  60% { background-color: #ff0; }
  100% { background-color: inherit; }
}   /*CSSpref*/ @-webkit-keyframes blinkLocation { 0% { background-color: #ff0; } 15% { background-color: #ffc; } 30% { background-color: #ff0; } 45% { background-color: #ffc; } 60% { background-color: #ff0; } 100% { background-color: inherit; } }  @-moz-keyframes blinkLocation { 0% { background-color: #ff0; } 15% { background-color: #ffc; } 30% { background-color: #ff0; } 45% { background-color: #ffc; } 60% { background-color: #ff0; } 100% { background-color: inherit; } }  @-ms-keyframes blinkLocation { 0% { background-color: #ff0; } 15% { background-color: #ffc; } 30% { background-color: #ff0; } 45% { background-color: #ffc; } 60% { background-color: #ff0; } 100% { background-color: inherit; } }


.codeSearchItem .navItemInner {
  min-height: 3.15em;
  height: auto;
  font-family: inherit;
}
.codeSearchItem .navContent {
  position: relative;
  white-space: normal;
  left: auto;
  top: auto;
  margin-left: 2.9em;
}

.codeSearchResult {
  font-size: 1.1em;
}


.sideTabScroll, .sideTabContent:not(#leftPaneContent) {
    width: 100%;
    position: absolute;
    left: 0;
    overflow: hidden;
    top: 0;
    height: 100%;
}

/* Various comments.
 * 1) The left pane is visually displayed on the right.
 * 2) The right pane is the one that appears on the left.
 * 3) The #leftPane has been converted to CSS flexible boxes, so no games with
 * absolute positioning for that one. */
#leftPaneContent {
    position: relative;
}

#leftPane > .helpBtnOverlay {
  position: absolute;
  right: 0.5em;
  bottom: 0.5em;
}

#leftPane > .helpBtnOverlay svg {
  padding-left:0.2em;
}

.sideTabScroll {
    padding-bottom: 1.5em;
}

/* Rules related to the collaboration feature. */

/* In-code collaboration */
.stmtParticipants {
  position: absolute;
  top: -.4em;
  right: .2em;
  text-align: right;
  height: 1.4em;
}

.stmtParticipantsOverflowBox {
  max-width: 10em;
  white-space: nowrap;
  overflow: hidden;
}

.inactive .stmtParticipants {
  display: none;
}

.stmtParticipants.nonEmpty {
  border: .2em solid #E72A59;
  padding: 0 0 0 .2em;
}

.stmtParticipants.nonEmpty:after {
  content: "";
  display: block;
  width: 0px;

  position: absolute;
  top: .3em;
  left: -.6em;

  border-style: solid;
  border-width: .3em .6em .3em 0;
  border-color: transparent #E72A59;
}

.stmtParticipants .sdThumb {
  font-size: inherit !important;
  width: 1em !important;
  height: 1em !important;
  padding: .2em .2em .2em 0 !important;
}

.stmtParticipants .sdIcon, .stmtParticipants img, .stmtParticipants svg {
  margin: 0 !important;
  width: 1em !important;
  height: 1em !important;
  display: block;
}

/* Script navigation: participants currently editing other actions */
.actionParticipants.stmtParticipants.nonEmpty {
    position: relative;
    display: inline-block;
    margin-left: 1.5em;
    margin-top: .3em;
    left: inherit;
    top: inherit;
}

.actionParticipants.stmtParticipants.nonEmpty:after {
  top: -.6em;
  left: .6em;

  border-style: solid;
  border-width: 0 .3em .6em .3em;
  border-color: #E72A59 transparent;
}


/* Status bar */

.vbox {
  display: -ms-flexbox;
  display: flex;                      /*CSSpref*/  display: -webkit-flex;  display: -moz-flex;  display: -ms-flex;
  flex-direction: column;                      /*CSSpref*/  -webkit-flex-direction: column;  -moz-flex-direction: column;  -ms-flex-direction: column;
}

.hbox {
  display: -ms-flexbox;
  display: flex;                      /*CSSpref*/  display: -webkit-flex;  display: -moz-flex;  display: -ms-flex;
  flex-direction: row;                      /*CSSpref*/  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;
}

.flex1 {
  flex: 1;                      /*CSSpref*/  -webkit-flex: 1;  -moz-flex: 1;  -ms-flex: 1;
}

.stOk, .stWarning, .stError {
  font-weight: bold;
}

.teamStatusMore {
  font-size: 70%;
  height: 1.7em;
}

/* Standard colors stolen from the hub */
.stOk {
  color: #408500;
}

.stWarning {
  color: #a07000;
}

.stError {
  color: #A52A2A;
}

.teamUsers {
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#teamPaneContent:not(.inactive) .teamLinkInactive {
  display: none;
}

#teamPaneContent.inactive .teamLinkActive {
  display: none;
}

/* Input area */

.teamTextbox input {
    border-width: 0px;
    width:calc(100%);
    font-size: 100%;
    /* Consistent with the thumbnail */
    vertical-align: bottom;
    background-color: transparent;
    color: white;
}

.teamTextbox input:focus {
    color: white;
}

.teamTextbox .sdThumb {
    vertical-align: bottom;
}

.sdThumb.teamHead {
    position:static;
    display:inline-block;

    width: 1.9em;
    height: 1.9em;

    padding: 0em;
    cursor:pointer;
}

.sdThumb.teamHead .sdIcon {
  margin: .2em;

  width: 1.5em;
  height: 1.5em;
}

.sdThumb.teamHead .sdIcon img {
    width:1.5em;
    height:1.5em;
    display:inherit;
}

.smallFont .sdThumb.teamHead .sdIcon {
  width: 2em;
  height: 2em;
}

.smallFont .sdThumb.teamHead {
    width:2.4em;
    height:2.4em;
}

.smallFont .sdThumb.teamHead .sdIcon img {
    width:2em;
    height:2em;
}

/* Messages area */

.teamMsgs {
  overflow-y: auto;
  overflow-x: hidden;
}

/* CSS speech bubbles */
.teamMsg:after, .teamTextbox:after {
  content: "";
  display: block;
  width: 0px;

  position: absolute;
  top: .3em;
  bottom: auto;

  border-style: solid;
  left: auto;
  right: -.75em;
  border-width: .4em 0 .4em .8em;
  border-color: transparent #95B;
}

.teamMsg.teamMsgMine:after, .teamTextbox:after {
  right: auto;
  left: -.75em;
  border-width: .4em .8em .4em 0;
  border-color: transparent #088;
}

/* There's another rule about .phone .sdThumb that tries to override this... */
.teamMsg .sdThumb, .teamTextbox .sdThumb {
  position: absolute;
  right: -2.7em !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
}

.smallFont .teamMsg .sdThumb {
  right: -3.2em !important;
}

.teamMsg.teamMsgMine .sdThumb, .teamTextbox .sdThumb {
  left: -2.7em !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
}

.smallFont .teamMsg.teamMsgMine .sdThumb, .smallFont .teamTextbox .sdThumb {
  left: -3.2em !important;
}

.teamMsg, .teamTextbox {
  position: relative;
  color: white;
  padding: .2em;

  margin: .2em 3em .2em 15%;
  background-color: #95B;

  min-height: 1.9em;
}

.teamMsg:not(.confirmed) {
  opacity: .5;
}

.smallFont .teamMsg {
  min-height: 2.4em;
}

.teamMsg .sdThumb {
  margin: 0;
}

.teamMsg.teamMsgMine, .teamTextbox {
  margin: .2em 15% .2em 3em;
  background-color: #088;
}

.teamMsg > span {
    vertical-align: super;
}


/* Show the various UI elements if collaboration is enabled. */
#teamPaneContent[data-collab^="no"] {
    display: none;
}
#leftPaneContent {
    top: 0;
}
#teamPaneContent[data-collab^="yes"] + .sideTabContent > .decl {
    padding-top: 0;
}

#teamPaneContent[data-collapsed^="yes"] > .teamMsgs:not(:empty) + .teamTextbox {
    display: none;
}

/* Expanded state: significant height, scrollbars. */
#teamPaneContent {
    background-color:#fff;
    border-bottom: 1px dotted #ccc;
    padding-top:0.2em;
    padding-left:0.2em;
    font-size:.8em;
    min-height:2.3em;
    height: 14em;
    /* It's a flex-box, so there shouldn't be any overflow, except that IE
     * insists on displaying a scroll bar, so let's make sure it doesn't appear.
     * */
    overflow: hidden;
}

/* Collapsed: smaller height, faded */
#teamPaneContent[data-collapsed^="yes"] {
    height: 6em;
}

#editorContainer {
  width: 100%;
  height: 100%;
  position: relative;
}

.landscape #rightPane[data-code-search^="yes"] .sideTabContent
{
    top: 4em;
    bottom: 0em;
    height: auto;
}

.landscape #rightPane[data-code-search^="no"] .sideTabContent
{
    bottom: 0em;
    height: auto;
}

.portrait #rightPane .sideTabScroll {
  font-size: 1.3em;
}

#rightPane {
  height: auto;
  top: 0;
  bottom: 0;
}

.phone #rightPane {
  width: 20em;
}

.phone #rightPane[data-phone-full-screen^="yes"] {
  width: 100%;
  border: none;
}

.phone #rightPane[data-phone-narrow^="yes"] {
  width: 14em;
}

.phone #rightPane[data-phone-full-screen^="no"] {
  font-size: 0.8em;
}

.phone #rightPane[data-phone-full-screen^="no"] .wall-textbox {
  width: 11em;
}

.editorSearchContainer {
  position: absolute;
  top: 0;
}

.editorSearchContainer .wall-textbox {
  width: 11em;
}

.portrait .editorSearchContainer .wall-textbox {
  width: 12em;
  margin-top: 0.9em;
  margin-right: -0.2em;
}

.phone .editorSearchContainer .wall-textbox {
  width: 4em;
}

#root.portrait[data-pane-hidden^="no"] .editorSearchContainer .wall-textbox {
  width: 12em;
}

.landscape .editorSearchContainer {
  left: 5em;
}

.portrait .editorSearchContainer {
  right: 0;
}

.portrait .tabNonNav {
  padding-left: 1em;
}


.progressBar {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.3em;
  overflow: hidden;
}

/*
.portrait .progressBar {
  left: 50%;
}
*/

.progressDot {
  background: #008b00;
  width: 0.3em;
  height: 0.3em;
  position: absolute;
  animation: moveProgressDot 3s infinite;                      /*CSSpref*/  -webkit-animation: moveProgressDot 3s infinite;  -moz-animation: moveProgressDot 3s infinite;  -ms-animation: moveProgressDot 3s infinite;
  transform: translate(-11em, 0);                      /*CSSpref*/  -webkit-transform: translate(-11em, 0);  -moz-transform: translate(-11em, 0);  -ms-transform: translate(-11em, 0);
}

.modalDialog .progressDot
{
  background: #ff0;
}

.modalFullWhite .progressDot,
.modalFullYellow .progressDot,
.modalFullBlack .progressDot
{
  background: #008b00;
}


a.md-bigbutton {
  color: black;
  padding: 0.3em;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width:60%;
  text-align: center;
  font-weight: normal;
  text-decoration:none;
  border:2px solid black;
  margin-bottom: 0.5em;
  margin-top: 0.3em;
  font-size: 2em;
  border-radius:0.3em;
}

a.md-bigbutton:hover {
    text-decoration:none;
}

.progressDot-0 {
    left: 7em;
  animation-delay: 0.9s;                      /*CSSpref*/  -webkit-animation-delay: 0.9s;  -moz-animation-delay: 0.9s;  -ms-animation-delay: 0.9s;
}

.progressDot-1 {
    left: 8em;
  animation-delay: 0.6s;                      /*CSSpref*/  -webkit-animation-delay: 0.6s;  -moz-animation-delay: 0.6s;  -ms-animation-delay: 0.6s;
}

.progressDot-2 {
    left: 9em;
  animation-delay: 0.3s;                      /*CSSpref*/  -webkit-animation-delay: 0.3s;  -moz-animation-delay: 0.3s;  -ms-animation-delay: 0.3s;
}

.progressDot-3 {
    left: 10em;
  animation-delay: 0s;                      /*CSSpref*/  -webkit-animation-delay: 0s;  -moz-animation-delay: 0s;  -ms-animation-delay: 0s;
}

@keyframes moveProgressDot {
  0% { transform: translate(-11em, 0); }
  35% { transform: translate(0, 0); }
  65% { transform: translate(0, 0); }
  100% { transform: translate(20em, 0); }
}   /*CSSpref*/ @-webkit-keyframes moveProgressDot { 0% { -webkit-transform: translate(-11em, 0); } 35% { -webkit-transform: translate(0, 0); } 65% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform: translate(20em, 0); } }  @-moz-keyframes moveProgressDot { 0% { -moz-transform: translate(-11em, 0); } 35% { -moz-transform: translate(0, 0); } 65% { -moz-transform: translate(0, 0); } 100% { -moz-transform: translate(20em, 0); } }  @-ms-keyframes moveProgressDot { 0% { -ms-transform: translate(-11em, 0); } 35% { -ms-transform: translate(0, 0); } 65% { -ms-transform: translate(0, 0); } 100% { -ms-transform: translate(20em, 0); } }

/************** from scriptlist.css *************/
.slLeft {
  position: absolute;
  height: 100%;
  width: 31%;
  left: 0;
  top: 0;
}

.slRight {
  position: absolute;
  height: 100%;
  width: 65%;
  /*width: 36em;*/
  right: 0;
  top: 0;
}

.slListHeader {
  padding-left: 4em;
  padding-top: 0.5em;
  position: relative;
}

.portrait .slListHeaderHider {
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 17.5em;
  width: auto;
  height: 100%;
}

.slBackContainer {
  position: absolute;
  left: 0;
  top: 0.4em;
}

.slListName {
  font-size: 2em;
}

.slListHeader input
{
  margin: 0;
  width: 90%;
}

.slTabContainer,
.slList {
  position: absolute;
  top: 4.5em;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  padding-bottom: 2em;
  overflow: hidden;
}

.phone .slTabContainer {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  overflow: auto;
  font-size: 1.25em;
}

.portrait .slLeft {
  width: 100%;
  height: auto;
  pointer-events: none;
}

#root[data-pane-hidden^="no"] .slLeft {
  height: 100%;
  /* background: white; */
}

.portrait .slList {
  pointer-events: auto;
  left: auto;
  font-size: 1.3em;
  width: 100%;
  border-left: none;
  top: 3.9em;
  /* background: white; */
  display: none;
}

.portrait .slListHeader {
  pointer-events: auto;
  /* background: white; */
  border-bottom: 0.1em dotted #ccc;
  height: 4.5em;
  margin: 0;
}

.portrait .slListHeader input  {
  position: absolute;
  top: 0.9em;
  width: 12em;
  right: 4em;
}

.phone .slListHeader input  {
  font-size: 1.25em;
}

.landscape .slSlideContainer {
  display: none;
}

.portrait .slSlideContainer {
  position: absolute;
  right: 0;
  top: 0;
}

#root[data-pane-hidden^="no"] .slSlideContainer .tabMenu-button {
    border-color: #09655E;
}


.portrait .slRight {
  width: auto;
  height: auto;
  right: 0;
  left: 1em;
  top: 4.6em;
  bottom: 0;
}

.hubRoot,
.slRoot {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-size:cover;
}

.sdHeaderOuter {
  font-size: 0.7em;
  padding: 0.7em;
  padding-left: 1em;
  border-left: 1em solid transparent;
  cursor: pointer;
  max-width: 30em;
  position: relative;
  overflow: hidden;
}

.sdBaseHeader {
  padding-left: 0em;
  background: #F4F4FF;
  margin-top: 1em;
  max-width: 100em;
}

.sdBaseCorner {
  position: absolute;
  right: 0;
  top: 0;
  background:white;
}

.sdWarning {
  font-size: 0.8em;
  text-align: center;
  padding: 0.4em;
  background: #EAF207;
  color: black;
  margin-bottom: 1em;
}

.slHeaderContainer .sdHeaderOuter {
    cursor: auto;
}


.sdInstalled {
  /*background: url(../icons/chip.png) center center no-repeat;
  background-size: auto 1em;
  width: 1em;
  height: 1em;*/
  position: absolute;
  border: 0.5em solid transparent;
  border-bottom-color: white;
  border-left-color: white;
  opacity: 0.7;
  width: 0;
  height: 0;
  bottom: 0;
  left: 0;
}


.sdHeaderOuter[data-selected^="yes"]
{
  border-left-color: #09655E;
}

.sdListLabel {
  font-size: 2.5em;
  margin-left: 0.5em;
}

.sdHeading {
  font-size: 2.5em;
}

.sdInstallButton {
  position: absolute;
  right: 0em;
  top: 0.5em;
}

.slTabLabelContainer {
  width: 100%;
  min-height: 1.5em;
  margin-bottom: 0.8em;
}

.sdTabLabel {
  color: #6c6c6c;
  display: inline-block;
  margin-right: 0.95em;
  cursor: pointer;
  line-height:2em;
}

.sdMoreDiv {
  min-height:2em;
}

.phone .sdTabLabel {
  font-size: 1.3em;
}

.sdTabLabel[data-selected^="yes"]
{
  color: black;
}

.sdHeaderContainer {
  width: 100%;
}

.slMoreLink {
  cursor: pointer;
  font-weight: bold;
  color: #007FFF;
  padding: 0.3em;
  font-size: 0.8em;
  display: inline-block;
  float: right;
}

.sdLoadingMore {
  margin-top: 1em;
  margin-bottom: 2em;
  margin-left: 1.4em;
  opacity: 0.5;
}

.bigLoadingMore {
  text-align:center;
  margin-top:30%;
  font-size:2em;
  opacity:0.5;
}

/*
 * Headers with icons
 */

.sdBigHeader {
  font-size: 1em;
  padding: 1em;
  padding-left: 0;
  border-left: none;
  max-width: 50em;
}

.sdHeader {
  position: relative;
  height: 4.5em;
}

.sdIcon {
  width: 4.5em;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.sdIconQuad {
  width: 50%;
  height: 50%;
  display: inline-block;
}

.sdIcon .svg {
    width: 100%;
    height: 100%;
}

.sdIcon img {
    width: auto;
    height: 100%;
}

.sdImg img {
    max-width: 100%;
}

.sdScriptAuthor {
    background: #f0efef;
    margin-right:0.5em;
    padding-right:0.5em;
    max-width: 50em;
}

.sdAuthorLabel {
    vertical-align:top;
    display:inline-block;
    margin-top:0.5em;
    margin-left:0.5em;
    cursor:pointer;
}

.sdAuthorLabel .svg
{
    width:1.4em;
    height:1.4em;
    margin-right:0.3em;
}

.sdSocialEmbed .svg
{
    width:1.4em;
    height:1.4em;
    vertical-align:middle;
}

.sdSocialEmbed input {
    width: calc(100% - 4em);
}

div.iconThumb {
    width:auto;
    height:100%;
    background-size:cover;
    background-position:50% 50%;
    background-repeat:no-repeat;
}

.sdNameBlock {
  position: absolute;
  left: 0;
  top: -0.3em;
  right: 0;
}

.slRight .sdNameBlock {
  right:4.5em;
}

.slRight .sdDocsHeader .sdNameBlock {
  right: 9.5em;
}

.sdCommentBlock {
  left: 0;
  right: 0;
  width: auto;
  position: absolute;
  top: -0.2em;
  overflow: hidden;
  height: 3.3em;
}

.sdCommentAuthor {
  position: absolute;
  font-size: 0.8em;
  font-weight: bold;
  padding-left: 0.5em;
  right: 0;
  bottom: 0;
}

.sdCommentBlockInner {
  font-size: 0.8em;
}

.sdName {
  font-size: 1.6em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.sdNumbers {
  text-align: right;
  position: absolute;
  right: 0;
  bottom: -0.1em;
}

.sdHeaderInner {
   position: absolute;
   left: 5.3em;
   right: 0;
   top: 0;
   bottom: 0;
}

.sdHasScriptShot .sdHeaderInner {
  left: 8.3em;
}

.sdShowcase {
  background: yellow;
}

.sdShowcaseIgnore {
  background: #ccc;
}

.sdScriptShot {
  position:absolute;
  height: 100%;
  width: 3em;
  overflow:hidden;
  left: 4.8em;
  top: 0;
}

.sdScriptShot img {
  height: 100%;
  width: auto;
}

.sdAuthor {
  position: absolute;
  left: 0;
  top: 1.8em;
}

.phone .sdBigHeader .sdAuthor {
  display:none;
}

.sdTopicExpansion {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.1em;
  bottom: 0;
  overflow:hidden;
}

.sdDomain { text-decoration: underline; }
.sdDomain:hover { color: blue; }

.sdTopicExpansionInner,
.sdAddInfoInner,
.sdAuthorInner {
  font-size: 0.8em;
}

.sdTemplateProgress .steps {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.5em;
  font-weight: bold;
  margin: 0.3em 0.4em 0 0;
  color: #ccc;
}

.sdTemplateProgress .steps .bold {
  color: #000;
}

.sdTemplateProgress .steps .label {
  font-size: 0.5em;
  line-height: 0.9em;
  text-align: right;
  font-weight: normal;
}

.sdTemplateProgress .restart {
  position: absolute;
  right: -0.5em;
  bottom: 0;
}

.sdTemplateProgress .restart .wall-button {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
  border: none;
}

.showWhenSelected {
  display:none;
}
*[data-selected^="yes"] .showWhenSelected {
  display:block;
}

.phone .sdAddInfoInner,
.phone .sdAuthorInner {
  font-size: 1em;
}

.phone .slList .sdAddInfoInner,
.phone .slList .sdAuthorInner,
.phone .sdBigHeader .sdAddInfoInner,
.phone .sdBigHeader .sdAuthorInner
{
  font-size: 0.8em;
}

.underline {
    font-size: 0.7em;
    text-decoration:underline;
}

.sdNumber {
  display: inline-block;
  margin-left: 0.8em;
}

.sdShare {
    position: absolute;
    right: -0.4em;
    bottom: 1.0em;
}

.phone .sdShare {
  top: 1.5em;
  right: -0.3em;
}

.phone .sdShare .sdCmtBtn {
  margin-top: -3em;
  margin-left: -1em;
}

.twitter-like,
.facebook-like {
border:none;
overflow:hidden;
width:60px;
height:20px;
position: absolute;
top: 0;
left: 0;
}

.facebook-like {
  width: 80px;
  left: 70px;
}



.smallText {
  font-size: 0.8em;
}

.inlineIcon {
  margin-left: -0.1em;
  display: inline-block;
}

.inlineIcon .svg {
  width: 0.8em;
  height: 0.8em;
}

.sdAddInfoInner {
  display: inline-block;
  white-space: nowrap;
}

.sdAddInfoOuter {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.5;
}

.sdIcon .sdIndex {
    text-align: center;
    font-size: 1.5em;
    padding-top: 0.25em;
}

.sdHeaderOuter[data-slim^="yes"] .sdIcon   { width:3em; }
.sdHeaderOuter[data-slim^="yes"] .sdHeader { height:3em; }
.sdHeaderOuter[data-slim^="yes"] .sdHeaderInner { left:3.8em; }
.sdHeaderOuter[data-slim^="yes"] .sdScriptShot { display:none; }
.sdHeaderOuter[data-slim^="yes"] .sdAuthor { display:none; }
.sdHeaderOuter[data-slim^="yes"] .sdNumbers { display:none; }
.sdHeaderOuter[data-slim^="yes"] .sdShare { display:none; }

.codeAwait {
  position: absolute;
  top: 0.85em;
  left: -0.4em;
  background: white;
  width: 0.6em;
  height: 0.6em;
}

.actionAwait {
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  display: inline-block;
}

.codeAwait .svg { display: block; opacity: 0.4; }

/*
 * Scripts
 */

.sdDescription {
}

.sdScreen {
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  display: inline-block;
}

.sdNothing,
.sdSubtle {
  color: #555;
}

.sdBold {
  font-weight: bold;
}

.sdInlineTab {
  font-size: 0.7em;
  margin-right: 1.5em;
  overflow: hidden;
  text-align: justify;
}

.sdScreens {
text-align: left;
}

.sdInlineContentContainer {
  position: relative;
  margin: 0;
  padding: 0;
  cursor: pointer;
  vertical-align: top;
}

.sdScoreTitleTop {
    font-size:1.6em;
}

.sdScoreTitle {
    font-size:1em;
    margin: 0.2em 0;
}

a.sdFeature {
color: #666;
text-decoration: underline;
display: inline-block;
padding: 0.3em;
font-size: 0.7em;
}

/*
 * inline tiles
 */

.sdDesc {
  margin-bottom: 1em;
  width: 33.5em;
}

.phone .sdDesc {
  width: 22em;
}

.sdTabDescription {
  margin-bottom: 1em;
  width: 33.5em;
  color: #555;
  font-size: 0.7em;
}

.phone .sdTabDescription {
  width: 22em;
  color: #555;
  font-size: 0.7em;
}

div.sdTabTile {
  width: 8em;
  height: 5.8em;
  margin-right: 0.5em;
  color: black;
  text-align: center;
}

.phone div.sdTabTile {
  font-size:0.9em;
}

.sdBigButton,
.sdScriptBox,
.sdTabTile {
  margin-top: 1em;
  margin-bottom: 1em;
  position: relative;
  vertical-align: top;
}

.sdScriptBox {
  margin-right: 1em;
}


.sdTabTileCount {
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 100%;
}

.sdTabTileSubtitle {
  font-size: 0.6em;
  opacity: 0.5;
  position: absolute;
  text-align:center;
  bottom: 2.5em;
  left:0;
  right:0;
  width:auto;
}

.sdTabTileCount > .svg {
/*
  display: block;
  position: absolute;
  bottom: -1em;
  right: -1em;
  opacity: 0.3;
  width: 6em;
  height: 6em;
  */
    margin-left: 0.5em;
    width: 2em;
    height: 2em;
}

.sdTabTileReplacementIcon {
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 100%;
}

.sdTabTileReplacementIcon > .svg {
  width: 5em;
  height: 5em;
}

.sdTabTileCount > span {
  font-size: 2.5em;
}

div.sdTabTileLabel {
  font-size: 1.2em;
  bottom: 0em;
  left: 0em;
  width: 100%;
}

.sdTabTilePrimaryTag {
  padding-top: 0em;
  font-weight: bold;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.sdTabTilePrimaryTagBig {
  padding-top: 0.3em;
}
.sdTabTilePrimaryTagBig > span {
  font-size: 1.5em;
}

.sdTabTileSecondaryTag {
  font-size: 1em;
}

.sdTabTileNothing {
  padding: 1.6em 1em;
  opacity: 0.5;
  font-size: 0.7em;
}

.sdRunBtns {
  padding-bottom: 1em;
}

.phone .sdRunBtns {
  font-size: 0.66em;
}

.sdBigButton {
  color: white;
  width: 16.5em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
  margin-top: 0.3em;
  height: 6em;
  background: #da4000;
  border: none;
  font-size: 1em;
  text-align: left;
  display: inline-block;
}

.phone .sdBigButtonFull {
  width:11.5em;
}

.sdBigButtonHalf {
  width: 8em;
}

.sdBigButtonIcon {
  position: absolute;
  top: 0;
  left: 0;
  height: 6em;
  width: 6em;
}
.sdBigButtonHalf .sdBigButtonIcon {
    left: 2em;
    width: 4em;
    height: 4em;
}

.sdBigButtonFull .sdBigButtonDesc {
  position: absolute;
  top: 0.8em;
  left: 4em;
  font-size: 2em;
}

.sdUninstall {
  background-color:#999;
}

.phone .sdBigButtonFull .sdBigButtonDesc
{
    left:3em;
}

.sdBigButtonFull .sdBigButtonLongDesc {
  font-size: 1.6em;
  top: 1.3em;
}

.sdBigButtonHalf .sdBigButtonDesc {
    position: absolute;
    font-size: 1em;
    bottom: 0.8em;
    left: 0em;
    width: 100%;
    text-align: center;
}

.sdHeart .sdBigButtonHalf .sdBigButtonDesc {
    font-size: 2em;
    bottom: 0.3em;
}

.sdScriptBox {
  width: 16em;
  height: 5.3em;
  padding-top: 1.2em;
  padding-right: 1em;
  box-sizing: border-box;                      /*CSSpref*/  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;
}

.sdScriptBox .sdHeaderOuter {
  padding: 0;
  border-left: none;
}

.sdTabTileLabel,
.sdInlineHd {
  position: absolute;
  font-weight: bold;
  opacity: 0.15;
}

.sdList-comments {
  margin-left: -0.5em;
}

.sdInlineHd {
  right: 0.4em;
  top: -0.5em;
  font-size: 1.8em;
}

/*
 * Comments
 */

.sdInlineCmt {
  white-space: nowrap;
}


.sdCmtTop {
  padding-right: 0.5em;
}

.sdCmt {
  margin-top: 1em;
  padding-left: 4em;
  position: relative;
  min-height: 3em;
}

.sdCmtResolved {
  position: absolute;
  right: 0.5em;
  top: 0;
  background: #1731B8;
  font-size: 0.8em;
  color: white;
  padding: 0.2em;
}

.sdRelated {
  margin-top: 2em;
}

.modalList .sdCmt {
  padding-left: 1em;
  cursor: pointer;
}

.sdCmtMeta {
  position: relative;
  margin-top: 0.3em;
  font-size: 0.5em;
  color: #888;
}

.phone .sdCmtMeta {
  font-size: 0.6em;
}

.phone .sdCmtId {
  display:none;
}

.sdExpandableText {
  color: #555;
  font-size: 0.7em;
  text-overflow: ellipsis;
  overflow: hidden;
}

.sdSmallerTextBox {
  font-size: 0.8em;
}

.smallFont .sdExpandableText {
  font-size: 0.9em;
}

.sdExpandButton {
  color: #000;
  border-bottom: 1px dotted #00d;
  display: inline-block;
  position: relative;
}

.sdExpandButtonTarget {
  position: absolute;
  height: 4em;
  width: 100%;
  top: -1.5em;
  left: 0em;
  background: rgba(255, 255, 255, 0.01);
  pointer: cursor;
  z-index: 1;
}

.sdCmtTopic {
  font-size: 0.8em;
}

.sdCmtNested {
  padding-left: 7em;
}

.sdCmt .sdCmtNested
{
    padding-left: 4em;
}

.phone .sdCmt {
  padding-left: 2.5em;
}

.commentPost {
  text-align: right;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}

.commentWarning {
  width: 10em;
  font-size: 0.7em;
  color: #e00;
  display: inline-block;
  text-align: left;
  margin-right: 1em;
  vertical-align: middle;
  text-transform: uppercase;
}

.commentPost textarea {
  width: 100%;
  font-size: 0.7em;
}

.phone .commentPost textarea {
  font-size: 1em;
}

.sdCmtBtns {
  position: absolute;
  right: 0;
  bottom: -1em;
  color:#000;
}

.sdVotingButtons,
.sdBottomButtons {
  font-size: 0.8em;
  margin-top: 1em;
  padding-bottom: 1em;
}

.phone .sdVotingButtons,
.phone .sdBottomButtons {
  font-size: 1em;
}

.sdAccountBtns {
  font-size: 1.5em;
}

.sdVotingButtons {
  color: #555;
}

.sdVotingButtons .wall-button,
.sdBottomButtons .wall-button,
.sdRelatedBtns .wall-button {
  border: none;
  color: white;
  background: #f50;
}

.sdVotingButtons .wall-button {
  width: 12em;
  margin-left:0;
  margin-right: 2em;
}

.sdVotingButtons .wall-button[data-disabled^="yes"],
.sdBottomButtons .wall-button[data-disabled^="yes"],
.sdRelatedBtns .wall-button[data-disabled^="yes"] {
  color: white;
  background: #aaa;
  cursor:default;
}

.sdRelatedBtns {
  position: absolute;
  font-size: 1.5em;
  right: 1.5em;
  bottom: -1em;
  background: white;
}

.sdRelatedBody {
  min-height: 4em;
  max-height: 12em;
  overflow: hidden;
}

.sdCmtBtnOuter {
  display: inline-block;
}

.sdCmtBtn {
  display: inline-block;
  padding-top: 3em;
  padding-right: 2.4em;
  padding-left: 1em;
  padding-bottom: 1em;
  position: relative;
  cursor: pointer;
  opacity: 0.8;
}

.sdVotingButtons[data-working^="yes"] .wall-button,
.sdReportAbuse[data-working^="yes"] .svg,
.sdBigButton[data-working^="yes"] .svg,
.topMenu-button[data-working^="yes"] .svg,
.sdIcon[data-working^="yes"] .svg,
.sdDocsBtn[data-working^="yes"] .svg,
.sdCmtPosting[data-working^="yes"] .svg,
.sdCmtBtn[data-working^="yes"] .svg {
  animation: pulse 0.5s;                      /*CSSpref*/  -webkit-animation: pulse 0.5s;  -moz-animation: pulse 0.5s;  -ms-animation: pulse 0.5s;
  animation-iteration-count: infinite;                      /*CSSpref*/  -webkit-animation-iteration-count: infinite;  -moz-animation-iteration-count: infinite;  -ms-animation-iteration-count: infinite;
}

.sdCmtBtn .svg {
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  position: absolute;
  right: 0em;
  bottom: 0.5em;
}

.sdDocsBtn {
  position: absolute;
  right: 2.5em;
  top: -1.7em;
  font-size: 0.5em;
  text-align:center;
  color: #999;
  width: 5em;
  height: 2em;
  padding-top:4em;
  cursor:pointer;
}

.sdDocsCount {
  position:absolute;
  font-size: 2.5em;
  top: 0.22em;
  right: 2em;
  color:#a00;
}

.phone .sdDocsCount {
    font-size:1.1em;
    right:0.25em;
    top:0em;
}

.sdDocsHeader .sdDocsBtn {
  font-size: 0.8em;
  right: 1em;
  top: 1em;
}

.sdDocsHeader .sdNumbers {
right:4.5em;
}

.sdDocsBtn .svg {
  width: 5em;
  height: 5em;
  position:absolute;
  top:0;
  left:0;
  display:block;
}


.sdCmtScriptName {
  display: inline-block;
  border-bottom: 1px dotted #00d;
  cursor: pointer;
}

.sdReportAbuse {
   position: absolute;
   right: 0;
   top: -1em;
   font-size: 0.6em;
   padding-left: 1.2em;
   padding-top: 1em;
   padding-bottom: 1em;
   cursor: pointer;
}

.sdDocsHeader .sdReportAbuse {
  right: 8em;
}

.sdReportAbuse .svg {
  position: absolute;
  bottom: 1.1em;
  left: 0;
  width: 1em;
  height: 1em;
}


/*
 * Users
 */

.sdThumb .sdIcon {
  width: 2.4em;
  height: 2.4em;
  display: block;
}

.sdThumb .sdThumbName {
  font-size: 0.5em;
  display: none;
}

.sdThumb {
  width: 2.4em;
  overflow: hidden;
  position: absolute;
  left: 0.5em;
  top: 0.3em;
}

.phone .sdThumb {
  font-size: 0.8em;
  left: 0em;
}

.slBtnRow {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}   /*CSSpref*/ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } }  @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); } }  @-ms-keyframes pulse { 0% { -ms-transform: scale(1); } 50% { -ms-transform: scale(1.2); } 100% { -ms-transform: scale(1); } }


.showInstall {
  animation: wave 3s;                      /*CSSpref*/  -webkit-animation: wave 3s;  -moz-animation: wave 3s;  -ms-animation: wave 3s;
}

@keyframes blinkOrange {
  0% { background: white; }
  20% { background: #f50; }
  40% { background: #fff; }
  60% { background: #f50; }
  100% { background: #fff; }
}   /*CSSpref*/ @-webkit-keyframes blinkOrange { 0% { background: white; } 20% { background: #f50; } 40% { background: #fff; } 60% { background: #f50; } 100% { background: #fff; } }  @-moz-keyframes blinkOrange { 0% { background: white; } 20% { background: #f50; } 40% { background: #fff; } 60% { background: #f50; } 100% { background: #fff; } }  @-ms-keyframes blinkOrange { 0% { background: white; } 20% { background: #f50; } 40% { background: #fff; } 60% { background: #f50; } 100% { background: #fff; } }

@keyframes wave {
  0% { transform: translate(0,5em) }
  5% { transform: translate(0,0) }
  10% { transform: translate(1em,0) }
  25% { transform: translate(-1em,0) }
  40% { transform: translate(0.5em,0) }
  60% { transform: translate(-0.5em,0) }
  80% { transform: translate(0.5em,0) }
  100% { transform: translate(0,0) }
}   /*CSSpref*/ @-webkit-keyframes wave { 0% { -webkit-transform: translate(0,5em) } 5% { -webkit-transform: translate(0,0) } 10% { -webkit-transform: translate(1em,0) } 25% { -webkit-transform: translate(-1em,0) } 40% { -webkit-transform: translate(0.5em,0) } 60% { -webkit-transform: translate(-0.5em,0) } 80% { -webkit-transform: translate(0.5em,0) } 100% { -webkit-transform: translate(0,0) } }  @-moz-keyframes wave { 0% { -moz-transform: translate(0,5em) } 5% { -moz-transform: translate(0,0) } 10% { -moz-transform: translate(1em,0) } 25% { -moz-transform: translate(-1em,0) } 40% { -moz-transform: translate(0.5em,0) } 60% { -moz-transform: translate(-0.5em,0) } 80% { -moz-transform: translate(0.5em,0) } 100% { -moz-transform: translate(0,0) } }  @-ms-keyframes wave { 0% { -ms-transform: translate(0,5em) } 5% { -ms-transform: translate(0,0) } 10% { -ms-transform: translate(1em,0) } 25% { -ms-transform: translate(-1em,0) } 40% { -ms-transform: translate(0.5em,0) } 60% { -ms-transform: translate(-0.5em,0) } 80% { -ms-transform: translate(0.5em,0) } 100% { -ms-transform: translate(0,0) } }


@keyframes delete {
  0% { transform: translate(0,0) }
  60% { transform: translate(0, 10em) scale(0.5) }
  100% { transform: translate(0, 30em) scale(0.5); opacity: 0 }
}   /*CSSpref*/ @-webkit-keyframes delete { 0% { -webkit-transform: translate(0,0) } 60% { -webkit-transform: translate(0, 10em) scale(0.5) } 100% { -webkit-transform: translate(0, 30em) scale(0.5); opacity: 0 } }  @-moz-keyframes delete { 0% { -moz-transform: translate(0,0) } 60% { -moz-transform: translate(0, 10em) scale(0.5) } 100% { -moz-transform: translate(0, 30em) scale(0.5); opacity: 0 } }  @-ms-keyframes delete { 0% { -ms-transform: translate(0,0) } 60% { -ms-transform: translate(0, 10em) scale(0.5) } 100% { -ms-transform: translate(0, 30em) scale(0.5); opacity: 0 } }


/* Screenshots */
.sdScreenShotFrame {
  position: absolute;
  left: 0;
  top: 5%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

.sdScreenShotImg {
  display: inline-block;
  width: 30em;
  text-align: right;
  position: relative;
  vertical-align: top;
}

.sdScreenShotImg img {
  height: 28em;
  width: auto;
}

.portrait .sdScreenShotImg {
  width: 100%;
  text-align: center;
}

.sdScreenShotImgLoading {
  color: white;
  font-weight: bold;
  width: 5em;
  position: absolute;
  right: 1em;
  top: 4em;
  font-size: 1.5em;
  text-align: center;
}

.sdScreenShotLabel {
  display: inline-block;
  position: relative;
  margin-left: 3em;
  vertical-align: top;
  background: white;
  padding-left: 1.5em;
  padding-top: 1em;
  pointer-events: auto;
}

.sdScreenShotButtons {
  text-align: right;
  font-size: 0.6em;
  display: block !important;
}

.sdScreenShotLabel .sdCmtBtn {
}

.portrait .sdScreenShotLabel {
  display: block;
  margin: 0;
  margin-top: 2em;
  padding-top: 0.5em;
  overflow: hidden;
}
.portrait .sdScreenShotLabel > div {
  display: inline-block;
}

/************** from hub.css *************/
.hubTile {
  position: absolute;
  cursor: pointer;
}

.hubTileSize1 {
  width: 7em;
  height: 7em;
}

.hubTileSize2 {
  width: 11em;
  height: 7em;
}

.hubTileSize3 {
  width: 11em;
  height: 14.3em;
}

.hubTileSize2 .svg,
.hubTileSize1 .svg,
.hubTileSize2 img,
.hubTileSize1 img
{
    width: 4em;
    height: 4em;
}

.hubTileSize3 .svg,
.hubTileSize3 img
{
    width: 11em;
    height: 11em;
}

.hubDocTile {
  background: #1926B6;
}

.hubArtTile .hubArtPicture {
  width: 80%;
  height: 70%;
  margin-top: 5%;
  margin-left: 10%;
}

.hubTileIcon {
  position: absolute;
  left: 1.5em;
  top: 0.5em;
}

.hubTileScreenShot {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right:0;
  overflow:hidden;
}

.hubTileScreenShot img {
  width:auto;
  height:auto;
}

.hubTileSize3 .hubTileIcon {
  left: 0em;
  top: 1em;
}

.hubTileSize2 .hubTileIcon {
  left: 3.5em;
}

.hubTileTitleBar {
  background: rgba(0, 0, 0, 0.55);
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: white;
  font-size: 0.7em;
}

.hubTileTutorialDesc {
  white-space: normal;
  font-size: 0.9em;
  padding: 0.3em 0.5em 0.5em 0.5em;
}

.hubTileSmallIcon .svg {
  width: 1.5em;
  height: 1.5em;
}

.hubTileSmallIcon {
  position:absolute;
  right: 0.6em;
  top: 0.6em;
  width: 1.5em;
  height: 1.5em;
}

.hubTileTutorialName {
  position: absolute;
  left: 4em;
  right: 0.5em;
  width:auto;
  top: 0.6em;
  font-weight:bold;
  font-size: 0.7em;
}

.hubTileTutorialIcon .svg {
  width: 2.5em;
  height: 2.5em;
}

.hubTileTutorialIcon {
  position:absolute;
  left: 0.2em;
  top: 0.2em;
  width: 2.5em;
  height: 2.5em;
}

.hubTileAbstract {
  margin:5% 5% 5% 5%;
  font-weight: normal;
  color: white;
  font-size:.6em;
}

.hubArtTile .hubTileTitleBar {
}

.hubTileTitle {
  font-weight: bold;
}

.hubTileNumbers {
  background-color:#000;
  position: absolute;
  right: 0;
  top: 0;
  color: white;
  font-weight: normal;
  padding-right: 0.3em;
}

.hubTileNumbersOverlay {
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.hubTileTitle { margin-top: 0.3em; }
.hubTileAuthor { margin-bottom: 0.3em; }

.hubTileAuthor,
.hubTileTitle {
  position: relative;
  line-height: 150%;
  margin-left: 0.5em;
}

.hubContent,
.hubSectionBody { position: relative; }

.hubSection {
  width: 30em;
  position: absolute;
  top: 1em;
  left: 1em;
  overflow: hidden;
}

.hubSectionSpacer {
  width: 1em;
  height: 4em;
  position: absolute;
  left:0;
}

.hubContent {
  background: rgba(255,255,255,0.00001);
}

.hubSectionHeader {
  font-size: 2.5em;
  margin-bottom: 0.2em;
  margin-right:0.1em;
  white-space: nowrap;
}

.hubTileBtnLabel {
  font-size: 1.5em;
  color: white;
  margin-left: 0.6em;
  margin-right: 0.6em;
  margin-bottom: 0.4em;
  line-height: 120%;
  position: absolute;
  bottom: 0;
  left: 0;
  width:calc(100% - 1.2em);
}

.hubTileLogo {
  position: absolute;
  left: 0.7em;
  top: 0.7em;
}

.hubTileWithLogo .hubTileBtnLabel {
  left: 0;
}

.hubTileSize2 .hubTileBtnLabel,
.hubTileSize3 .hubTileBtnLabel
{
  font-size: 1.9em;
}

.hubTileBtnLabelSmall {
  font-size: 0.85em;
}

.hubTileBtnLabelTiny {
  font-size: 0.7em;
}

.hubTileSize3 .hubTileBtnLabelMedium,
.hubTileSize2 .hubTileBtnLabelMedium {
  font-size: 1.3em;
}

.hubTileBtnLabelMedium {
  font-size: 1.2em;
}

.showcaseScreens {
  padding: 0.5em;
  line-height:100%;
}

.showcaseLabel {
  font-size: 0.7em;
  font-weight: bold;
  position: absolute;
  right: 0.9em;
  bottom: 0.5em;
}

.showcaseScreens img {
  width: 2.3em;
  height: 3.83em;
  display:inline-block;
  margin: 0.1em;
}

.hubTileSize1 .showcaseScreens img {
  width: 1.8em;
  height: 3em;
}

.hubTileCounter
{
    position:absolute;
    right:0.3em;
    top:0.1em;
    font-size:1.7em;
    color:white;
}

.hubTileSize0 {
  width: 7em;
  height: 3.35em;
  color: white;
}


.hubTileCorner {
position: absolute;
background: rgba(0, 0, 0, 0.3);
opacity: 0.85;
padding: 0.3em 0em;
font-size: 0.45em;
color: white;
text-align: center;
right: 0;
top: 0;
width: 50%;
}


.hubTileTutorialSubtitle {
  font-weight: normal;
}

.phone .hubTileCorner {
  font-size:0.6em;
}

.hubTileTagTall {
  height: 7em;
}


.hubTileTagTitle {
  font-size: 0.9em;
  font-weight: bold;
  margin: 0.1em 0.4em;
}

.hubTileSize3 .hubTileTagTitle,
.hubTileSize2 .hubTileTagTitle {
  font-size: 2em;
  font-weight: 400;
  margin: 0.1em 0.5em;
}

.hubTileTagNumber {
  position: absolute;
  right: 0.3em;
  bottom: 0.2em;
}

.hubTileBtn {
  background: #308919;
  color:white;
}

.scriptSlot {
  background: #eee;
}

.hubTileOver {
  font-size: 0.6em;
  line-height: 1.3em;
  margin-bottom: 0.5em;
}

.hubTileSize3 .bigButtonImage {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 2em;
}

.scriptSlot .hubTileBtnLabel {
  color: #aaa;
  font-size: 1em;
}

.hubTagBox {
  margin: 1em;
  position: relative;
  cursor: pointer;
}

.hubTagBox .sdExpandableText {
  font-size: 0.6em;
}

.tutorialBtn
{
  background: #0082a0;
}

.externalBtn
{
  background: #808080;
}

.exportBtn
{
  background: #e00069;
}

/*
.hubTile[data-completeme^="yes"] {
  x-animation: blinkYellow 0.8s infinite;
}

@x-keyframes blinkYellow {
  0% { background: #8419B6; }
  50% { background: #C7CF09; }
  100% { background: #8419B6; }
}
*/

.hubTileSearch {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.8;
}

.hubTileWand {
  bottom: 2.8em;
  top: auto;
}

.hubTileSearch .svg
{
  width: 4em;
  height: 4em;
}

.hubTileSearchSmall .svg
{
  width: 3em;
  height: 3em;
}

.hubLogo {
  position: absolute;
  right: 1em;
  top: 1em;
  opacity: 0.9;
  width: 12em;
  height: 2.6em;
  background: rgba(255,255,255,0.000001);
  cursor: pointer;
}

.hubMe {
  position: absolute;
  left: 4em;
  top: 1em;
  width: 13em;
}

.hubContent .hubMe {
  left: 3em;
}

.portrait .hubMe {
  width: 12em;
  left: 1em;
}

.hubMe .sdHeaderOuter {
  font-size: 0.6em;
  padding: 0;
  border: none;
}

.hubMe .sdAddInfoOuter {
  bottom: 0.2em;
}

.hubBgLogo {
  position: absolute;
  top: -8em;
  left: 20em;
  height: 50em;
  width: 50em;
  opacity: 0.07;
}

.phone .hubBgLogo {
  left: 10em;
}

.hubBgLogo2 {
  position: absolute;
  top: 7em;
  left: 31em;
  height: 28em;
  width: 28em;
}

.hubContent .hubLogo {
  right: 2.2em;
}

.portrait .hubLogo {
  margin-right: -8em;
  right: 0.2em;
}

.phone .hubLogo {
  margin-right: -7em;
  right: 0.4em;
  top: 0.8em;
  width: 11em;
  height: 2.38em;
}

.introThumb {
  display: inline-block;
  margin-left: 0.5em;
  margin-right: 0.5em;
  width: 6.6em;
  min-height: 7.2em;

  vertical-align: top;
}

.phone .introThumb {
  width: 6.6em;
}

.introLarge {
  width: 100%;
  margin: 0;
}

.phone .introLarge {
  width: 23em;
}

.introLarge20 {
  min-height: 20em;
}

.introLarge15 {
  min-height: 15em;
}

.introThumbVideo {
  cursor: pointer;
}

.introThumb img {
  width: 100%;
  height: auto;
}

.introThumb .svg {
  width: 6em;
  height: 6em;
}

.introThumbDesc {
  font-size: 0.7em;
}

.introThumbs {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  text-align: right;
}

.introVideo {
  width: 100%;
}

.introButton {
  font-size: 2em;
  font-weight: bold;
  padding: 0.5em;
  position: absolute;
  top: 40%;
  border: none;
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.introButtonLeft {
  left: -3em;
}

.introButtonRight {
  right: -3em;
}

div.videoOuter {
}

span.videoCaption
{
    padding: 0.2em;
    background-color: lightGray;
    display: inline-block;
    border-radius: 4px;
    font-size: 0.8em;
}

#editorVideo {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #eee;
}

.phone #editorVideo[data-step-tutorial="yes"] .md-tutorial {
  font-size: 1em;
}

.editormediacontrol
{
    position:absolute;
    right:0;
    top: 0;
    bottom: 0em;
    height: auto;
    width: 100%;
    color: white;
    background: rgba(0,0,0,0.000001);
}

.editormediacontrol .inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height:1.5em;
}

.editormediacontrol.buttonsMode .inner {
  background: #f50;
}
.editormediacontrol.buttonsMode .topMenu-button {
  opacity: 1;
  pointer-events: auto;
}
.editormediacontrol.buttonsMode .editormediacaption-outer {
  min-height: 2em;
}
.editormediacaption-outer
{
  margin-left: 1em;
  margin-right: 1em;
  text-align: center;
}

.editormediacaption {
  font-size: 0.6em;
  padding: 0em 0.5em 0.3em 0.5em;
  border-radius: 0.3em;
}

.editormediacontrol.captionMode .editormediacaption {
  background: rgba(0,0,0,0.7);
}

.editormediacontrol .topMenu-button-frame
{
  width: 1.3em;
  height: 1.3em;
  border-color: white;
}

.editormediacontrol  .topMenu-button
{
  padding: 0.3em;
  position: absolute;
  top: 0;
  color: white;
  opacity: 0;
  pointer-events: none;
}

.editormediacontrol  .topMenu-button .topMenu-button-desc {
  display: none;
}

.editormediacontrol .bottomButtons .topMenu-button
{
  padding-bottom: 0.3em;
}

#editorTutorialCheckImg
{
    position:absolute;
    height:100%;
    width:2em;
    opacity:0;
    top:0em;
    left:2.1em;
}
#btn-editorTutorialNext { right: 0.1em; top:0em; }
#btn-editorTutorialPrevious { left: 0.1em; top:0em; }

.tutorialStars {
  text-align:center;
}
.tutorialStars .svg {
    height: 2em;
    width: 2em;
}
.publishScreenshot {
    max-width:11em;
    max-height:11em;
}

@keyframes pulseStar {
  0% { transform: none; }
  100% { transform: rotate(360deg); }
}   /*CSSpref*/ @-webkit-keyframes pulseStar { 0% { -webkit-transform: none; } 100% { -webkit-transform: rotate(360deg); } }  @-moz-keyframes pulseStar { 0% { -moz-transform: none; } 100% { -moz-transform: rotate(360deg); } }  @-ms-keyframes pulseStar { 0% { -ms-transform: none; } 100% { -ms-transform: rotate(360deg); } }

.tutorialLogo {
  font-size: 0.9em;
  width: 12em;
  height: 2.6em;
  background: rgba(255,255,255,0.00001);
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0.8;
}

.dialog-beta {
  font-size: 0.8em;
  margin-top: 2em;
  height: 2.2em;
  position: relative;
}

.dialog-beta .beta-note {
  right:0.2em;
}

#root[data-wall-visible="yes"] #scriptEditor > .beta-note,
#root[data-stmt-editor-visible="yes"] #scriptEditor > .beta-note,
#root[data-stmt-editor-visible="yes"] #leftPaneContent > .helpBtnOverlay
{
  display: none;
}

.calcTemplate
{
  font-size: 0.9em;
  position: relative;
  margin: 0.2em 0 0.2em 0;
  background: rgba(0, 245, 255, 0.16);
  min-height: 2.2em;
}

.calcTemplateInner {
  color: rgba(0,30,240,1);
  display: inline-block;
  margin: 0.5em;
}

.goalTokens {
  color: white;
  background-color: rgba(0,30,240,1);
  height: 1.6em;
  padding: 0.1em 0.5em;
}

.calcTemplate .diffTokenUnchanged {
  opacity: 0.6;
  background: inherit;
}

.calcTemplate .diffTokenRemoved {
  text-decoration: line-through;
  background: inherit;
  display: none;
}

.calcTemplate .diffTokenAdded {
  opacity: 1;
  background: inherit;
}

.calcTemplate .diffTokenAdded .symbol {
  opacity: 1;
}

.calcTemplate .kw,
.calcTemplate .stringLiteral {
  color: white;
}

.tip
{
  position: absolute;
  font-size:1.1em;
  max-width: 15em;
  padding: 0.3em 0.4em;
  background-color: rgba(0,30,240,0.85);
  color:white;
  cursor:pointer;
  z-index: 1;
}

.tip-tl:before,
.tip-tr:before,
.tip-bl:before,
.tip-br:before {
  content: "";
  position: absolute;
  border: 0.6em solid rgba(0,30,240,0.85);
  font-size: 1.3em;
}

.tip-tl:before,
.tip-tr:before {
  top: -0.55em;
  border-top: 0;
}
.tip-bl:before,
.tip-br:before {
  bottom: -0.55em;
  border-bottom: 0;
}

.tip-bl:before,
.tip-tl:before
{
  left: 0.5em;
  border-left: 0;
  border-right-color: transparent;
  border-right-width: 0.4em;
}
.tip-br:before,
.tip-tr:before
{
  right: 0.5em;
  border-right: 0;
  border-left-color: transparent;
  border-left-width: 0.4em;
}

.tipTitle
{
    font-weight:bold;
}
.tipDescr
{
}

@keyframes showTip {
  0% { opacity: 0; }
  30% { opacity: 1; transform: scale(1.5, 1.5); }
  to { opacity: 1; }
}   /*CSSpref*/ @-webkit-keyframes showTip { 0% { opacity: 0; } 30% { opacity: 1; -webkit-transform: scale(1.5, 1.5); } to { opacity: 1; } }  @-moz-keyframes showTip { 0% { opacity: 0; } 30% { opacity: 1; -moz-transform: scale(1.5, 1.5); } to { opacity: 1; } }  @-ms-keyframes showTip { 0% { opacity: 0; } 30% { opacity: 1; -ms-transform: scale(1.5, 1.5); } to { opacity: 1; } }
@keyframes shakeTip {
  0% { transform: none; }
  15% { transform: translate(-0.5em, 0); }
  30% { transform: translate(0.5em, 0); }
  45% { transform: translate(-0.3em, 0); }
  60% { transform: translate(0.3em, 0); }
  75% { transform: translate(-0.1em, 0); }
  to { transform: none; }
}   /*CSSpref*/ @-webkit-keyframes shakeTip { 0% { -webkit-transform: none; } 15% { -webkit-transform: translate(-0.5em, 0); } 30% { -webkit-transform: translate(0.5em, 0); } 45% { -webkit-transform: translate(-0.3em, 0); } 60% { -webkit-transform: translate(0.3em, 0); } 75% { -webkit-transform: translate(-0.1em, 0); } to { -webkit-transform: none; } }  @-moz-keyframes shakeTip { 0% { -moz-transform: none; } 15% { -moz-transform: translate(-0.5em, 0); } 30% { -moz-transform: translate(0.5em, 0); } 45% { -moz-transform: translate(-0.3em, 0); } 60% { -moz-transform: translate(0.3em, 0); } 75% { -moz-transform: translate(-0.1em, 0); } to { -moz-transform: none; } }  @-ms-keyframes shakeTip { 0% { -ms-transform: none; } 15% { -ms-transform: translate(-0.5em, 0); } 30% { -ms-transform: translate(0.5em, 0); } 45% { -ms-transform: translate(-0.3em, 0); } 60% { -ms-transform: translate(0.3em, 0); } 75% { -ms-transform: translate(-0.1em, 0); } to { -ms-transform: none; } }
@keyframes pulseTarget {
  0% { }
  10% { transform: scale(1.4, 1.4); }
  25% { transform: scale(1, 1); }
  40% { transform: scale(1.2, 1.2); }
  60% { transform: scale(1, 1); }
  80% { transform: scale(1.1, 1.1); }
  100% { }
}   /*CSSpref*/ @-webkit-keyframes pulseTarget { 0% { } 10% { -webkit-transform: scale(1.4, 1.4); } 25% { -webkit-transform: scale(1, 1); } 40% { -webkit-transform: scale(1.2, 1.2); } 60% { -webkit-transform: scale(1, 1); } 80% { -webkit-transform: scale(1.1, 1.1); } 100% { } }  @-moz-keyframes pulseTarget { 0% { } 10% { -moz-transform: scale(1.4, 1.4); } 25% { -moz-transform: scale(1, 1); } 40% { -moz-transform: scale(1.2, 1.2); } 60% { -moz-transform: scale(1, 1); } 80% { -moz-transform: scale(1.1, 1.1); } 100% { } }  @-ms-keyframes pulseTarget { 0% { } 10% { -ms-transform: scale(1.4, 1.4); } 25% { -ms-transform: scale(1, 1); } 40% { -ms-transform: scale(1.2, 1.2); } 60% { -ms-transform: scale(1, 1); } 80% { -ms-transform: scale(1.1, 1.1); } 100% { } }

div.bitmatrix, table.bitmatrix {
    display:inline-block;
}

div.bitmatrix {
  min-height: 16em;
  width:100%;
}

table.bitmatrix {
  table-layout:fixed;
}

div.bitmatrixhint {
  background: rgba(0, 245, 255, 0.16);
  color:rgba(0,30,240,1);
  padding: 0.5em 1em 0.5em 0.5em;
  display:inline-block;
}

div.bitmatrixhint .kbm svg {
  padding: 0.5em 0em 0em 0.5em;
  height: 4em;
  background-color: rgba(0,30,240,1);
}

div.bitmatrixhint .kbm svg > path.bitoff {
  fill:white;
}


table.bitpreview {
    margin-left:0.5em;
    display:block;
}

div.bitmatrix > div.btns {
  position:absolute;
  right:0em;
  vertical-align:top;
  margin-top:0.5em;
}

div.bitmatrix > div.btns > button {
  display:inline-block;
}

table.bitmatrix > tr.bitheader {
  text-align: center;
}

table.bitmatrix > tr.bitrow {

}

#scriptEditor[data-blockmode="yes"] table.bitmatrix > tr > td.index {
    color:white;
}

div.bitmatrices {
    margin-right:6em;
}

table.bitmatrix > tr > td.sep {
    width:2em;
}

table.bitmatrix > tr > td.bit {
    width:2em;
    height:2em;
}

table.bitmatrix > tr > td.bit > div {
    border-radius:4px;
    background-color:#ddd;
    border: 0.1em solid black;
    width:1em;
    height:1.6em;
    margin:0.2em 0.5em 0.2em 0.5em;
}

table.bitpreview > tr > td.bit {
    width:1em;
    height:1em;
}

table.bitpreview > tr > td.bit > div {
    border-radius:2px;
    background-color:#ddd;
    border: 0.05em solid gray;
    width:0.5em;
    height:0.8em;
    margin:0.1em 0.25em 0.1em 0.25em;
}

table.bitmatrix > tr > td.bit:hover > div {
    border-color:white;
}

table.bitmatrix > tr > td.bit[data-on=yes] > div {
    background-color:red;
}

.marginTop {
    margin-top:2em;
}
.marginBottom {
    margin-bottom:2em;
}

img.checker {
background-image: url(https://az31353.vo.msecnd.net/c04/yiak.png);
background-repeat: repeat;
}

.inlineDocsInner {
  font-size: 0.8em;
  position:absolute;
  top:2.4em;
  bottom:0em;
  left:0.6em;
  right:0em;
}

.inlineDocsButtons {
  position: absolute;
  right: 0.5em;
  top: 0;
  padding: 0.1em 0;
  font-size: 0.6em;
}

.portrait .inlineDocsInner .md-tutorial {
   font-size: 1.2em;
}
.portrait .inlineDocsButtons {
  font-size: 0.8em;
  right:auto;
  left:0;
}

.inlineDocsHeaderInner {
  position:absolute;
  height:1.7em;
  left:0; top:0em;
  font-size:1.1em;
  white-space:nowrap;
  color:white;
  width:100%;
  background-color: rgba(87, 154, 255, 1);
}
.inlineDocsHeaderInnerInner {
    margin:0.2em;
    margin-left:0.6em;
}
.portrait .inlineDocsHeaderInnerInner {
  margin-left: 8em;
}

.portrait .inlineDocsHeaderInner {
height: 2.2em;
}

.md-tutorial {
  font-size: 0.9em;
  margin-bottom: 1.5em;
}

@media print {
  .md-tutorial a:link:after, .md-tutorial a:visited:after
  { content:" (" attr(href) ") "; }
}

.md-video-link {
  text-align:center;
  cursor:pointer;
  overflow: hidden;
}

.md-video-link video {
  width: 100%    !important;
  height: auto   !important;
}

.md-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.md-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.md-box {
  border-left: 0.5em solid #567FFF;
  background: #E5F8FF;
  padding: 0 0.5em 1em 0.8em;
  margin-left:2em;
  margin-bottom:0.5em;
  overflow:hidden;
  page-break-inside: avoid;
}

.md-box-header {
  color: white;
  background: #567FFF;
  margin-left: -0.8em;
  margin-right: -0.5em;
  margin-bottom: 0.2em;
  font-size: 1.2em;
  padding: 0.2em 0.75em;
}
@media screen { .md-box-print { display:none; } }
@media print { .md-box-screen { display:none; } }
.md-box-card {
  border: solid 1px black;
  background: inherit;
  margin-left:inherit;
  min-height:4em;
}

.md-box-header-print {
  display:none;
}

.md-box-avatar {
    margin-bottom:0.5em;
}

.md-box-avatar-img {
    width:4em;
    display:inline-block;
    vertical-align:top;
}

.phone .md-box-avatar-img {
    width:3em;
}

.md-box-avatar-body {
  position:relative;
  padding:0em 0.5em 0.5em 0.5em;
  color:#000;
  background:#eeeeee; /* default background for browsers without gradient support */
  margin-left:1.5em;
  display:inline-block;
  width: calc(100% - 7em);
}
.phone .md-box-avatar-body {
  width: calc(100% - 6em);
}

.md-box-avatar-body:after {
    top: 1.1em;
    left: -1.5em;
    bottom: auto;
    border-width: 0px 1.5em 0.7em 0;
    border-color: transparent #eeeeee;
    content: "";
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}

.portrait .md-box-landscape {
  display:none;
}

.landscape .md-box-portrait {
  display:none;
}

.portrait .md-tutorial {
  font-size: 1.1em;
}

h1.stepid > span {
    font-size: 0.5em;
    font-weight: normal;
    margin-left: 4px;
    background-color: blue;
    color: white;
    padding: 0.1em 0.5em 0.1em 0.5em;
}

.md-snippet {
  position:relative;
  border: 1px dotted #bbb;
  padding: 0.4em 0;
  clear:both;
}

.md-snippet .signature {
  padding:0em 0.2em 0em 0.2em;
}

.md-snippet .name {
  font-weight: bold;
}

.md-snippet .code-button,
.md-snippet .wall-button {
  position: absolute;
  right:0;
  bottom:-0.2em;
}

.md-snippet .code-button {
  bottom:-0.6em;
  right:-0.7em;
}

.md-prop-desc {
  margin-bottom: 1.5em;
  margin-top: 1em;
  font-size: 1.2em;
}

.md-para {
  margin-top: 1em;
  margin-bottom: 1em;
}

.sdCmt .md-para {
  white-space:pre-wrap;
}

.md-comment .md-para,
.nopara .md-para {
  margin:0;
}

a.md-code-link {
  color:inherit;
}

.api-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5em;
  height: 2.5em;
}

.api-icon svg {
  width: 100%;
  height: 100%;
}

.api-names {
  position: relative;
  margin-left: 3em;
  height: 2.5em;
}

.api-kind {
  position: relative;
  height: 2.5em;
  margin-bottom: 0.5em;
}

.api-kind a {
  text-decoration: none;
}

.api-name {
  position: absolute;
  font-size: 1.2em;
  left: 0;
  top: -0.2em;
  text-decoration: underline;
}

.api-desc {
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: 0.8em;
  color: black;
  text-decoration: none;
  white-space: nowrap;
}

.diffLink {
color: #999;
}

.script-text {
  background: white;
  font-size: 0.7em;
  color: black;
}

.sdKey {
    margin:0.1em;
    font-size: 1.0em;
    padding: 0.7em;
    border-left: 1em solid transparent;
    background-color:#EEE;
}

.sdKeyUri {
}

.sdKeyValue {
    padding-top: 0.3em;
    font-size: 0.9em;
    cursor: pointer;
}

.sdInlineHelp {
    font-size:0.6em;
    color:gray;
}

.test-results {
  padding: 1em;
  background: white;
  font-size: 0.6em;
  color: black;
}

.test-results .wall-button {
  color: black;
  border-color: black;
}

.test-error {
  color: #e00;
}

.test-important {
  font-size: 1.3em;
  margin-bottom: 1em;
}
.test-ok {
  color: green;
}

.float-help-button {
  float: right;
}

.float-help-button .topMenu-button-desc {
  bottom: auto;
  top: 5em;
}

.float-help-link {
  float: right;
  margin-right: 0.8em;
  font-size: 0.8em;
}
div.upload-preview {
    display:inline-block;
    margin-top:1em;
    margin-bottom:1em;
    height:11em;
}
img.upload-preview {
    height:100%;
}
div.validation-error {
    color:#e00;
}

#hubRoot[data-vertical="no"] .beta-note {
  bottom: 1.5em;
}

.accountSettings .expandingTextAreaContainer {
  width: 95%;
  margin: 0 auto;
}

.phone .stmt .expandingTextAreaContainer {
  font-size: 1.2em;
}

.form-section {
  margin-bottom: 0.5em;
}

.form-title {
  margin-bottom: 0.5em;
  font-size: 1.3em;
  font-weight: bold;
}

.accountSettings pre {
  margin: 0.5em 0;
}

.clear {
  clear:both;
}

.float-right {
  float:right;
}

.accountSettings input[type="file"] {
  font-size: 0.8em;
  width: 17em;
}

.accountSettings .float-right img {
  margin: 0.5em;
  max-width: 5em;
  max-height: 5em;
}

.portrait #leftPaneContent {
  font-size: 1.2em;
}

.phone #leftPaneContent {
  font-size: 1em;
}

.phone .accountSettings .wall-dialog-body {
  font-size:1em;
}

.pub-notes {
    width:100%;
}

.diffSame {
  width: 7em;
  font-size: 0.8em;
  padding: 0.3em 1em 0 1em;
  display: inline-block;
  text-align: center;
  opacity: 0.5;
}


.diffDeclRemoved,
.diffStmtRemoved {
  background-color: #fbd;
  position: relative;
}

.diffDeclAdded,
.diffStmtAdded {
  background-color: #bef;
  position: relative;
}

.diffTokenAdded {
  background-color: #bef;
}
.diffTokenRemoved {
  background-color: #fbd;
}
.diffTokenLegend {
  margin-left: 0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.diffMoveMarker {
  font-size: 0.6em;
  background: white;
  position: absolute;
  right: 0.2em;
  top: 0.2em;
  padding: 0.1em;
  color: black;
  background: yellow;
}

.diffButtons {
  position: absolute;
  background: white;
  font-size: 0.8em;
  right: 0;
  top:0;
}

.diffButtons * {
  vertical-align: top;
}

.diffOuter *[data-diff-selected^="yes"]
{
  font-weight: bold;
}

.diffOuter {
  padding-top: 2em;
}


.appStudio .svg {
  width: 12em;
  vertical-align: middle;
  margin-left: 1em;
}

.appStudioLink img {
width: 9.5em;
display: block;
}

.floatingSmilie {
  float: right;
  font-size: 6em;
  line-height: 89%;
  margin-right: 0.1em;
  margin-left: 0.2em;
  margin-bottom: 0.3em;
}

.md-snippet span.comment {
  font-style: italic;
}

.translated {
    background-color:#ffc;
    padding:0em 0.5em 0em 0.5em;
}

.hoc-notice {
    font-size:0.7em;
}

.hoc-link {
    text-decoration:underline;
    cursor:pointer;
    margin-right:1.5em;
}

img.tracking-pixel {
    width:1px;
    height:1px;
}

.store-button {
    color:#000;
    font-size:1.25em;
}

.tutTileOuter {
  display: inline-block;
  margin: 0 1em 1em 0;
  width: 14em;
  height: 11.3em;
  position: relative;
  vertical-align: top;
}

.tutTileLink .tutTile {
  background: #40B619;
}

.tutTile {
  background: green;
  color: white;
  height: 7em;
  position: relative;
  cursor: pointer;
}

.tutIcon {
  position: absolute;
  height: 100%;
  width: auto;
  right: 4.5em;
  left: 4.5em;
  top: 0em;
}

.phone .tutIcon {
  right: 2.5em;
  left: 2.5em;
}

.landscape .tutTileOuter {
  width: 16em;
  margin-right: 2em;
  height: 12em;
}

.tutDesc {
  position: relative;
  padding: 0.3em 0;
  font-size: 0.6em;
  box-sizing: border-box;                      /*CSSpref*/  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  -ms-box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
}

.phone .tutDesc {
  font-size: 0.55em;
}

.landscape .tutDesc {
  font-size: 0.8em;
}

.phone .tutTileOuter {
  width: 10em;
  height: 9em;
  font-size: 0.75em;
}

.phone .tutTile {
  height: 5em;
}

.translate-notice {
    font-size: 0.9em;
    background-color: lightyellow;
    padding: 0.2em 0em 0.2em 1em;
    cursor:pointer;
}

.tutDescFirst {
  max-height: 5em;
  overflow: hidden;
}

.tutDescTitle {
  font-size: 1.4em;
  font-weight: bold;
  white-space: nowrap;
  margin-bottom: 0.15em;
}

.tutProgress {
  background: #09b;
  color:white;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
}

.tutProgress .steps {
  font-size: 0.8em;
  font-weight: bold;
  padding: 0.2em 0.8em;
}

.tutProgress .steps .bold {
  color: #ff0;
}

.tutProgress .steps.done {
}

.tutProgress .steps .label {
  font-size: 0.6em;
  line-height: 0.9em;
  font-weight: normal;
}

.tutProgress .restart {
  font-size: 0.8em;
}

.tutProgress .restart .wall-button {
  color: white;
  font-weight: bold;
  text-decoration: underline;
  padding: 0.6em 0.5em;
  margin: 0;
  border: none;
}

ul.tutorial-list {
  padding: 0;
  margin: 0;
}
ul.tutorial-list li {
  display: inline-block;
  list-style-type: none;
  margin: 0;
}

div.wall-dialog-body ul.tutorial-list li div.tutTileOuter {
  width:11.5em;
}

.tutAuthor {
  text-decoration: underline;
  text-align: right;
  line-height: 1.5em;
}

.tutWarning {
  position: absolute;
  background: yellow;
  width: 1.5em;
  height: 1.5em;
  left: 0em;
  bottom: 0em;
}

.tutTileLinkLabel {
  position: absolute;
  bottom: 0.6em;
  right: 1em;
  text-align: right;
}

.phone .tutTileLinkLabel {
  font-size: 0.8em;
}

.tutTileLinkMore {
  font-size: 2.5em;
}

.tutTileLinkTitle {
  font-size: 0.8em;
}

.sdInfoLink button {
  color: #999;
  font-size: 0.6em;
  padding: 1em 0;
}

.tutReply .md-tutorial {
  display: none;
}

.tutReply {
  font-size: 0.7em;
}

.tutReply .link-button {
  font-size: 0.6em;
}

.tutDialogButons .link-button {
  color: #666;
  font-size: 0.7em;
  float: left;
}

.tutHeartDiv {
    cursor:pointer;
    font-size:0.8em;
    float:right;
}

.tutHeartDiv > svg {
    width:2em;
    display:inline-block;
    vertical-align:middle;
}

.whiteField
{
  background: white;
  padding: 0.5em 0.2em;
  margin: 0.2em 0;
  color: black;
  position: relative;
  width: 18em;
}

.pluginNotification
{
  position: absolute;
  width: auto;
  left: 0;
  right: 0;
  top: 0;
  background-color: #0af;
  font-size: 0.8em;
  color: white;
  z-index:3;
  padding: 0.3em 1em 0.4em 1em;
  overflow: hidden;
}

.pluginHeader {
  font-size: 0.6em;
  max-width: 100em;
  border-top: 0.2em dashed #999;
  margin-top: 1em;
}

.pluginHeader + .navItem-button {
  top: 0.5em;
}

.pluginOp {
  margin-left: 2em;
}

/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select:none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;

 /*  background-color:#c5bfff; */
}

.node-dragged {
    opacity:0.7;
    background-color:#d2eeff;
}

.node-drop-bottom {
    border-bottom-style:solid !important;
    border-bottom-color:#51da32 !important;
    border-bottom-width:5px;
}

.drop {
    background-color: #ced;
}

.editor-mode {
    width:6em;
    cursor:pointer;
    display:inline-block;
    align-content:center;
    margin-top:0.5em;
    margin-right:0.5em;
    padding-top:1em;
    padding-bottom:1em;
    border: 0.2em solid #00f;
}
.editor-mode .pic {
    width:100%;
    height:6em;
}
.editor-mode .title {
    width:100%;
    margin-left:0;
}
.editor-mode .descr {
    font-size:0.8em;
}
.editor-mode[data-selected^=no]  {
  border-color: #ccc;
}

/*
 *
 * Editor fonts
 *
 *
 */

@media only screen and (min-device-width: 992px) {
    #scriptEditor .decl {
        font-size:80%;
    }
}

/*
 *
 * BLOCKS
 *
 *
 */

#scriptEditor[data-blockMode="yes"] .decl {
  font-size: 1.0em;
}

#scriptEditor[data-blockMode="yes"] .line {
  border-left-width: 0;
  margin: 0;
  padding: 0.35em 1em 0.35em 0.5em;
}

#scriptEditor[data-blockMode="yes"] .kw {
  color: white;
}

#scriptEditor[data-blockMode="yes"] .block {
  padding: 0.1em;
  border-left: 1em solid #68B415;
}

#scriptEditor[data-blockMode="yes"] .md-snippet > .block {
  border-left: none;
  padding-left: 0.5em;
}

#scriptEditor[data-blockMode="yes"] .stmt {
  border-left-width: 0;
  color: white;
  margin: 0.1em 0;
}

#scriptEditor[data-blockMode="yes"] .stmt:first-of-type {
  margin-top: 0;
}

#scriptEditor[data-blockMode="yes"] .stmt:last-of-type {
  margin-bottom: 0;
}

#scriptEditor[data-blockMode="yes"] .stmt[data-elsedonothing="yes"] {
  margin-top: -0.1em;
}

#scriptEditor[data-blockMode="yes"] .greyed { color: rgba(255,255,255,0.5); }
#scriptEditor[data-blockMode="yes"] .symbol { opacity: 1; }
#scriptEditor[data-blockMode="yes"] .codeAwait { display: none; }
#scriptEditor[data-blockMode="yes"] .actionAwait { display: none; }
#scriptEditor[data-blockMode="yes"] .calcCursor { color: #ff0; }
#scriptEditor[data-blockMode="yes"] .stringLiteral { color: #ff0; }

#scriptEditor[data-blockMode="yes"] .stmt               > .line { background: #68B415; }
#scriptEditor[data-blockMode="yes"] .stmt-other         > .line { background: #68B415; }
#scriptEditor[data-blockMode="yes"] .stmt-action        > .line { background: #AE2775; }
#scriptEditor[data-blockMode="yes"] .stmt-decl          > .line { background: #AE2775; }
#scriptEditor[data-blockMode="yes"] .stmt-inlineActions > .line { background: #AE2775; }
#scriptEditor[data-blockMode="yes"] .stmt-loop          > .line { background: #3F84BE; }
#scriptEditor[data-blockMode="yes"] .stmt-if            > .line { background: #CE5933; }
#scriptEditor[data-blockMode="yes"] .stmt-field         > .line { background: #CFB118; }
#scriptEditor[data-blockMode="yes"] .stmt-comment       > .line { background: #AAAAAA; }

#scriptEditor[data-blockMode="yes"] .md-comment { color: white; padding-left: 0; }

#scriptEditor[data-blockMode="yes"] .stmt-inlineActions > .block { border-color: #AE2775; }
#scriptEditor[data-blockMode="yes"] .stmt-action        > .block { border-color: #AE2775; }
#scriptEditor[data-blockMode="yes"] .stmt-decl          > .block { border-color: #AE2775; }
#scriptEditor[data-blockMode="yes"] .stmt-loop          > .block { border-color: #3F84BE; }
#scriptEditor[data-blockMode="yes"] .stmt-if            > .block { border-color: #CE5933; }

#scriptEditor[data-blockMode="yes"] .errorSq {
  color: #FFF;
  background: rgba(255, 0, 0, 0.5);
  padding: 0 0.2em;
  border-radius: 0.3em;
}

@keyframes bgToWhite {
  50% { background: white; }
  100% { background: white; }
}   /*CSSpref*/ @-webkit-keyframes bgToWhite { 50% { background: white; } 100% { background: white; } }  @-moz-keyframes bgToWhite { 50% { background: white; } 100% { background: white; } }  @-ms-keyframes bgToWhite { 50% { background: white; } 100% { background: white; } }

@keyframes borderToWhite {
  50% { border-color: white; }
  100% { border-color: white; }
}   /*CSSpref*/ @-webkit-keyframes borderToWhite { 50% { border-color: white; } 100% { border-color: white; } }  @-moz-keyframes borderToWhite { 50% { border-color: white; } 100% { border-color: white; } }  @-ms-keyframes borderToWhite { 50% { border-color: white; } 100% { border-color: white; } }

@keyframes colorToBlack {
  50% { color: black; }
  100% { color: black; }
}   /*CSSpref*/ @-webkit-keyframes colorToBlack { 50% { color: black; } 100% { color: black; } }  @-moz-keyframes colorToBlack { 50% { color: black; } 100% { color: black; } }  @-ms-keyframes colorToBlack { 50% { color: black; } 100% { color: black; } }

@keyframes colorToBlue {
  50% { color: #41900d; }
  100% { color: #41900d; }
}   /*CSSpref*/ @-webkit-keyframes colorToBlue { 50% { color: #41900d; } 100% { color: #41900d; } }  @-moz-keyframes colorToBlue { 50% { color: #41900d; } 100% { color: #41900d; } }  @-ms-keyframes colorToBlue { 50% { color: #41900d; } 100% { color: #41900d; } }

@keyframes wrenchCode {
  0% { transform-origin: 20% 50% 0; transform: none; }
  70% { transform-origin: 20% 50% 0; transform: rotate(-5deg); }
  100% { transform-origin: 20% 50% 0; transform: none; }
}   /*CSSpref*/ @-webkit-keyframes wrenchCode { 0% { -webkit-transform-origin: 20% 50% 0; -webkit-transform: none; } 70% { -webkit-transform-origin: 20% 50% 0; -webkit-transform: rotate(-5deg); } 100% { -webkit-transform-origin: 20% 50% 0; -webkit-transform: none; } }  @-moz-keyframes wrenchCode { 0% { -moz-transform-origin: 20% 50% 0; -moz-transform: none; } 70% { -moz-transform-origin: 20% 50% 0; -moz-transform: rotate(-5deg); } 100% { -moz-transform-origin: 20% 50% 0; -moz-transform: none; } }  @-ms-keyframes wrenchCode { 0% { -ms-transform-origin: 20% 50% 0; -ms-transform: none; } 70% { -ms-transform-origin: 20% 50% 0; -ms-transform: rotate(-5deg); } 100% { -ms-transform-origin: 20% 50% 0; -ms-transform: none; } }


.stmt-inlineStmt {
    /* there is already inline-block inside, we shouldn't use inline here */
    display: inline-block;
    /* This is to override the [data-nest] selector which is more specific in
     * the CSS cascade, quite unfortunately. */
    border-width: 0 !important;
    margin-left: 0;
    padding-left: 0;
}

.stmt-inlineStmt .line {
    display: inline-block !important;
    border-width: 0;
    min-width: 0;
    margin-left: 0;
    padding-left: 0;
}

.stmt-inlineStmt .lineSpacer,
.stmt-inlineStmt > .line + br,
.stmt-inlineStmt > .line + .errorMessage {
    display: none !important;
}

.stmt-inlineStmt .expandingTextAreaContainer {
    width: 17em !important;
}

.stmt-inlineStmt .expandingTextAreaContainer,
.stmt-inlineStmt .expandingTextAreaContainer > pre,
.stmt-inlineStmt .expandingTextAreaContainer > textarea {
    display: inline-block !important;
}

/* Don't display info messages for fields. */
.stmt-actionParameter .errorMessage .calcError,
.stmt-actionParameter .errorBr,
.stmt-actionParameter .hintMessage,
.stmt-recordField .errorMessage .calcError,
.stmt-recordField .errorBr,
.stmt-recordField .hintMessage {
    display: none;
}

.stmt-recordField .stmt-comment {
    border-left-width: 0 !important;
}

div.tbProgress {
    width:calc(100% - 2em);
    overflow-x:scroll;
}

table.dashboard {
    width:100%;
    font-size:0.7em;
}

table.dashboard tr.header {
  cursor:pointer;
  height: 15em;
  white-space: nowrap;
  vertical-align:bottom;
  font-size:0.65em;
}

table.dashboard tr.header > td > div {
    white-space: nowrap;
    transform: rotate(315deg);                      /*CSSpref*/  -webkit-transform: rotate(315deg);  -moz-transform: rotate(315deg);  -ms-transform: rotate(315deg);
    width: 30px;
}

table.dashboard tr.header > td > div > span {
  padding: 5px 10px;
}

table.dashboard tr td[data-userid] {
    background-color:#ddd;
    text-align:right;
}

table.dashboard tr td.stats {
    background-color:#ddd;
    text-align:center;
}

table.dashboard tr td[data-scriptid] {
    background-color:blue;
    text-align:center;
    color:white;
}

table.dashboard tr td[data-completed^="yes"] {
    background-color:#0c0;
    color:white;
}

.powered-by-logo {
  margin:1em auto;
  width:100%;
  text-align: center;
}

.powered-by-logo img {
  width:10em;
}

.powered-by {
  width: 5em;
  margin-top: 2em;
  margin-left: 2em;
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.powered-by-first {
  margin-left: 1em;
}

.powered-by .text {
  font-size: 0.45em;
  opacity: 0.5;
}

.powered-by .hidden-portrait {
  display: block;
}

.powered-by img {
  margin-top: 0.55em;
  width: 5em;
  height: auto;
  border: none;
}

.powered-by-first img {
  margin-top: 0.3em;
  width: 5em;
  height: auto;
}

.portrait .powered-by {
  font-size: 1.1em;
}

.art-review {
  width: 9em;
  height: 8em;
  display: inline-block;
  margin: 0.5em;
  margin-bottom: 1.5em;
  position: relative;
  background: #ddd;
  vertical-align: top;
}

.art-review img {
  max-width: 90%;
  max-height: 90%;
  display: block;
  margin: 0.2em auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);                      /*CSSpref*/  -webkit-transform: translate(-50%, -50%);  -moz-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);
}

.art-review .art-info,
.art-review .art-link {
  background: white;
  position: absolute;
  bottom: -1.5em;
  font-size: 0.5em;
}

.art-review .art-info {
  left: 0;
}

.art-review .art-link {
  right: 0;
}

.stackTraceEntry {
  padding-left: 1em;
  font-size: 0.8em;
  color: blue;
  font-weight: bold;
  cursor: pointer;
}

.stackTraceLine {
  font-size: 0.6em;
  font-family: monospace;
  white-space: pre;
  color: #333;
}

.abuseReview {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  background: white;
  z-index: 1;
  font-size: 16px;
  background: #ff9;
}

.abuseReview .scroll {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 2em;
  font-size: 1.5em;
  padding-left: 1em;
  background: #fff;
  overflow-y:scroll;
  overflow-x:hidden;
}

.abuseReviewHidden {
  font-size: 0.5em;
  height: 2.7em;
  width: 8.5em;
  right: auto;
  top: auto;
  left: 0.2em;
  bottom: 0.1em;
}

.abuseReview .sdBox- {
  width: 30em;
}

.abuseReview .sdCommentBlock {
  font-size: 1.2em;
}

.abuseReview .sdHeaderOuter {
  max-width: 50em;
}

.abuseReview .sdScriptBox {
  margin: 0;
}

.abuseReview .visited {
  background: #ecf;
}

.abuseReview[data-hideresolved^="yes"] .abusePair[data-resolved^="yes"]
{
  display: none;
}

.abuseButtons {
  display: inline-block;
  width: 8em;
  font-size: 0.7em;
  margin-top: 1.2em;
}