/* By Morgan McGuire @CasualEffects http://casual-effects.com GPL 3.0 License*/

canvas {
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

body {
    font-family: Helvetica, Arial;
    font-size: 13px;
    margin: 0;
    background: #000;
    color: #ddd;
    height:100%;
    width: 100%;
    -webkit-touch-callout:none;
}

body.minimalUI {
    overflow: hidden;
}

div#header {
    position: absolute;
    top:0;
    right:0;
    left:0;
    height: 16px;
    font-size: 11px;
    background: #000;
    color:#ccc;
    width:100%;
    text-align: center;
    padding-top: 4px;
    z-index: 19;
}

#header a {
    color:#8060ff !important;
}

.noIDE .idePart {
    /* Using hidden alone leaves a border on screen. */
    display:none;
    visibility: hidden;
}

a {
    color:#5949d0 !important;
}

#adblockWarning {
    position: absolute;
    top: 0px;
    padding-top: 1px;
    right: 44px;
    color:#000;
    font-size:11px;
    z-index: 20;
}

#adblockDetector {
    width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;
}

.emulator .case, .emulatorButton {
    touch-action: none;
    /* Disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* Stop iOS from making the entire canvas gray when tapped */
    -webkit-tap-highlight-color: transparent;

    /* Prevent magnifying glass */
    -webkit-touch-callout: none;
}

.emulatorButton {
    cursor: pointer;
    position: absolute;
    transform: rotate(45deg);
    /* show bounds for debugging */
    /*border: 1px solid #f00;*/
}


.blink {
    animation: blink 1s linear infinite;
    -webkit-animation: blink 1s linear infinite;
}

@-webkit-keyframes blinker {
    from {opacity: 1.0;}
    to {opacity: 0.0;}
}

.blink {
    text-decoration: blink;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-direction: alternate;
}

/*****************************************************/

#uiModeMenuButton {
    position: absolute;
    top: 10px;
    right: 0px;
    z-index: 21;
    width: 60px;
    height: 30px;
    text-shadow:      rgba(0,0,0,0.7) 0 0 4px;

    background-image: url('gear.png');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

#uiModeMenu {
    position: absolute;
    z-index: 21;
    top: 35px;
    right: 0px;
    background: #FFF;
    padding-top: 5px;
    color: #000;
    visibility: hidden;
    border: 1px solid #000;
    box-shadow:       0px 4px 15px 0px rgba(0, 0, 0, 0.4);
}

/*****************************************************/

.modal {
    display: block; /* none */
    position: fixed;
    z-index: 15;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(255,255,255,0.4); /* Black w/ opacity */
}

.modalDialog {
    font-size: 120%;
    color: #000;
    background-color: #fff;
    margin: 20% auto;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    border: 1px solid #888;
    width: 500px;
    border-radius: 13px;
    box-shadow:       0px 4px 15px 0px rgba(0, 0, 0, 0.4);
}
/*****************************************************/

/* Hide the actual input control */
.button input {
    /*   position:absolute; top:-20px; */
    display:          none;
}

.button {
    display:          inline-block;
    margin-right:     3px;
    margin-left:      3px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select:  none;
    user-select:      none;
    width:            35px;
    font-size:        90%;
    cursor:           pointer;
}

.noselect {
    touch-action: none;
    /* Disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* Stop iOS from making the entire canvas gray when tapped */
    -webkit-tap-highlight-color: transparent;

    /* Prevent magnifying glass */
    -webkit-touch-callout: none;
}

.button label span.label {
    margin:           0px;
    background-color: #FFF;
    background:       linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(242,242,242,1) 36%,rgba(242,242,242,1) 90%,rgba(224,224,224,1) 100%);
    color:            #000;
    border:           1px solid #BBB;
    border-radius:    4px;
    overflow:         hidden;
    width:            100%;
    height:           16px;
    box-shadow:       1px 2px 2px 0px rgba(0, 0, 0, 0.15);
    padding-top:      2px;
    padding-bottom:   0px;

    text-align:       center;
    display:          block;
    height:           16px;
    padding-top:      4px;
    margin-top:      -3px;
}

.button:active span.label, .button input:checked + span.label {
    background: rgb(64,150,238);
    background: linear-gradient(to bottom, rgba(64,150,238,1) 0%,rgba(96,171,248,1) 56%,rgba(122,188,255,1) 100%);
    
    color:            #fff;
    box-shadow:       0px 1px 2px 0px rgba(0, 0, 0, 0.25);
    border:           1px solid #666;
    boder-bottom:     none;
    transform:        translateY(1px);
}

.button:active img, .button input:checked + span.label img {
    filter: invert(100%);
}

div.disabled span.label, div.disabled:active span.label {
    background:       #DDD;
    color:            #AAA;
    transform:        none;
    box-shadow:       1px 2px 2px 0px rgba(0, 0, 0, 0.15);
}

#symbolsWindow .button {
    font-family:      Menlo, Arial;
    width:            20px;
    height:           18px;
    margin:           2px;
}

#symbolsWindow .button span.label span {
    position:relative;
    top: -1px;
}


/*****************************************************/
#renameDialog .button {
    display: block;
    width: 360px;
    margin-bottom: 10px;
}

/*****************************************************/

div.ide {
    position:         absolute;
    min-width:        415px;
    border:           1px solid #999;
    background:       #ddd;
    border-radius:    13px;
    margin-left:      0px;
    margin-top:       25px;
    margin-right:     15px;
    overflow:         hidden;
    box-shadow:       0px 4px 13px 0px rgba(0, 0, 0, 0.3);
}


div.ide .case {
    border:           4px solid #ddd;
    border-image:     linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(229,229,229,1) 17%,rgba(221,221,221,1) 89%,rgba(204,204,204,1) 100%);
    -moz-border-image: -moz-linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(229,229,229,1) 17%,rgba(221,221,221,1) 89%,rgba(204,204,204,1) 100%);
    border-radius:    13px;
    overflow:         hidden;
}


div.ide .title {
    height:           22px;
    background:       #595090;
    border-radius:    10px 10px 0 0;
    background-image: url('editor-title.png');
    background-size:  contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow:         hidden;
}

div.ide #menu {
    width:            100%;
    background:       #DDD;
    padding-top:      5px;
    padding-bottom:   1px;
    color:            #222;
    text-align:       center;
    overflow:         hidden;
}

#menu td {
    padding:          0px;
    margin:           0px;
    white-space:      nowrap;
}

div.ide .innerCase {
    background: #595090;
    border-radius: 10px;
    padding-top: 1px;
    padding-bottom: 1px;
}

div.ide .editorScreen {
    border: solid 8px #383838;
    border-radius: 8px;
    margin: 12px;
}

div.ide #error {
    width:100%;
    font-size: 90%;
    color: #F30;
    background: rgb(26, 26, 26);
    height: 15px;
    padding-left: 4px;
    padding-top: 1px;
    border-top: solid 2px #333;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

div.ide #editor {
    height:           430px;
    font-size:        14px;
    box-sizing:       border-box;
    -moz-box-sizing:  border-box;
    -webkit-box-sizing: border-box;
}

div.ide #editorStatusBar {
    width:            110%;
    padding-left:     11px;
    padding-top:      4px;
    color:            #666;
    padding-top:      5px;
    padding-bottom:   0px;
    height:           16px;
    background:       #ddd;
    font-size:        90%;
    box-sizing:       border-box;
    -moz-box-sizing:  border-box;
    -webkit-box-sizing: border-box;
}

.unselectable {
    user-select:      none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Detect Chrome & Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    div.ide #editorStatusBar {
        padding-top: 3px;
    }
}
/**************************************************/

.toolWindow {
    border:           1px solid #999;
    border-radius:    13px;
    z-index:          10;
    background:       #ddd;
    position:         absolute;
    overflow:         hidden;
    box-shadow:       0px 4px 13px 0px rgba(0, 0, 0, 0.3);
}

div#symbolsWindow {
    width:            593px;
    height:           139px;
    top:              350px;
    left:             50px;
}

#symbolsWindow div#keys {
    padding-top: 7px;
    padding-left: 3px;
}

.hidden {
    visibility:       hidden;
}

div.tool {
    text-align:       center;
    border:           4px solid #ddd;
    background:       #666;
    border-radius:    14px;
    padding:          6px;
    height: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/**************************************************/

div#soundsWindow {
    width:            320px;
    height:           243px;
    top:              280px;
    left:             150px;
}

div#soundsWindow .button {
    width:            20px;
    height:           16px;
    margin:           2px;
}


/**************************************************/

div#cartridgesWindow {
    width:            500px;
    height:           300px;
    top:               80px;
    left:             140px;
}

#cartridgesWindow .button {
    width:            60px;
}

#signInContainer {
    width:            90px !important;
}

.cartridge {
    background-image: url('cartridge.png');
    background-size:  cover;
    width:            224px;
    height:           100px;

    transition:       left 1s, top 0.5s;
    overflow:         hidden;
    
    touch-action:     none;
    /* Disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;

    /* Stop iOS from making the entire canvas gray when tapped */
    -webkit-tap-highlight-color: transparent;

    /* Prevent magnifying glass */
    -webkit-touch-callout: none;

}

.cartridge.readonly {
    background-image: url('cartridge-RO.png');
}

.cartridge .label {
    position:         relative;
    top:              9px;
    left:             19px;
    width:            144px;
    height:           29px;
    border-radius:    1px 1px 5px 5px;
    padding-top:      5px;
    background-size:  cover;
}

.cartridge .n00 {
    background-image:       url('cart-back00.png');
}

.cartridge .n01 {
    background-image:       url('cart-back01.png');
}

.cartridge .label.n02 {
    background-image:  url('cart-back02.png') !important;
}

.cartridge .title {
    position:         absolute;
    top: 15px;
    left: 18px;
    width:            144px;
    height:           29px;
    color:            rgba(255,255,255,0.9);
    filter:           blur(0.09px);
    font-size:        18px;
    font-style:       italic;
    font-weight:      bold;
    font-family:      Tahoma, Monaco, Arial;
    -webkit-text-stroke: 1px rgba(0,0,0,0.7); 
    text-stroke:      1px rgba(0,0,0,0.7);
    text-shadow:      rgba(0,0,0,0.7) 0 0 4px;
    -webkit-text-shadow:rgba(0,0,0,0.7) 0 0 4px;
}


/**************************************************/

div#paletteWindow {
    width:            388px;
    height:           236px;
    top:              250px;
    right:            20px;
}

/* command boxes */
.cmd {
    background: #000;
    font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
    font-size:12px;
    color: #fff;
    border: solid 4px #383838;
    border-radius: 8px;
    padding: 2px;
}

#paletteWindow #palCmd {
    position: absolute;
    bottom: 10px;
    left: 8px;
    right: 8px;
    width: 358px;
}

#paletteWindow .tool {
    vertical-align:   middle;
}

.colorswatch {
    display:          inline-block;
    width:            23px;
    height:           18px;
    text-align:       center;
    font-size:        80%;
    color:            #000;
    padding-top:      8px;
}

.tinycolorswatch {
    display:          inline-block;
    width:            21.5px;
    height:           21px;
    margin-right:     -10px;
    margin-bottom:    -15px;
}

.draggable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select:  none;
    user-select:      none;

    /* Draggable */
    cursor:           grab;
    cursor:           -moz-grab;
    cursor:           -webkit-grab;
    cursor:           -o-grab;
    cursor:           -ms-grab;
}

.draggable:active {
    /* Dragging */
    cursor:           grabbing;
    cursor:           -moz-grabbing;
    cursor:           -webkit-grabbing;
    cursor:           -o-grabbing;
    cursor:           -ms-grabbing;
}


#paletteWindow .paletteSlot {
    width: 20px;
    height: 19px;
    background: #fff;
    font-size: 75%;
    border: 1px inset #555;
    margin-left: 2px;
    display: inline-block;
    color: #000;
    text-align: left;
    padding-left: 1px;
    padding-top: 1px;
    box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2);
}

#paletteWindow #paletteSlot0, #paletteWindow #paletteSlot9 {
    width: 21px;
    height: 20px;
    margin-left: 3px;
    position: relative;
    padding-top: 1px;
    border: none;
    background: repeating-linear-gradient(45deg, #888, #888 4px, #aaa 4px, #aaa 8px);
    box-shadow: none;
}

#paletteWindow #paletteSlot9 {
    background: url("checkerboard.png");
    background-size: cover;
    color: #aaa;
}

#paletteWindow #paletteSlot0 {
    background: url("previous-color.png");
    background-size: cover;
    color: #aaa;
}

/**************************************************/

#spritesWindow {    
    width:            408px;
    height:           290px;
    top:              250px;
    left:             350px;
}

#spritesWindow #spritesDisplay {
    border:      2px solid #000;
    border-radius: 8px 8px 0 0;
}

#spritesWindow .button {
    width: 22px;
}

#spritesWindow #spriteCmd {
    position: absolute;
    bottom: 10px;
    left: 84px;
    width: 302px;
}


/**************************************************/

div.emulator {
    z-index:          5;
    position:         absolute;
    right:            0px;
    top:              20px;
    width:            410px;
}

.noIDE div.emulator {
    left: 0px;
}

.noIDE #emulatorHelp {
    left: 50px;
    width: 320px;
}

body.minimalUI #emulatorHelp {
    visibility: hidden;
}

div.emulator div.case {
    position:         absolute;
    top:              0px;
    left:             0px;
    width:            410px;
    height:           613px;
    background-image: url("nano.png");
    background-size:  100% 100%;
}


div#background {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: #383050;
}

body.minimalUI div#background {
    background: #594e92 !important;
    border-radius: 20px;
}

body.minimalUI div.emulator div.case {
    background-image: none;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: -60px;
}

.minimalControls {
    visibility: hidden;
}

body.minimalUI .minimalControls {
    visibility: visible;
}

canvas#bar {
    position: absolute;
    top:67px;
    left:77px;
    width:256px;
    height:32px;
    background: #000;
    border-radius: 9px 9px 0 0;
    /* Slightly soften and tilt to make the embedded image look more real*/
    /* filter: blur(0.1px); */
    /* The negative z translation is needed to fix z-order conflicts on Safari */
    /*transform: translateZ(-15px) perspective(1000px) rotateX(5deg); */
}

canvas#screen {
    position: absolute;
    top:115px;
    left:77px;
    width:256px;
    height:256px;
    background: #000;
    /* Slightly soften to make the embedded image look more real*/
    /* filter: blur(0.1px); */
}

/* Inset the screens in minimal mode */
.minimalUI canvas#bar, .minimalUI canvas#screen {
    box-shadow: 0.5px 2px 1px 0px rgba(255,255,255,0.3), -1px -2px 1px 0px rgba(0,0,0,0.3);
}

#saveButtonContainer:not(.disabled) span#saveButtonLabel {
    background: linear-gradient(to bottom, #fff2f2 1%,#ffe0e0 18%,#ffd6d6 85%,#f4b7b7 100%) !important;
}