body, html {overscroll-behavior: contain;}
body {background-Color:#111 !important; margin-bottom:0px !important;}

html {
    background-color: #111 !important;
    min-width:1024px;
}
p a, td a, .edits a, i a {
    padding:2px 3px 0px 3px;
    margin-top:0px;
    display:inline-block;
    border-bottom:solid 7px #222;
    background-color:#50c4b7;
    color:white;
}
.spelllist {
    position:relative;
    top:4px;
    white-space: nowrap;
}
table {margin-left:-5px;}
tr {vertical-align: top; margin-right:20px;}

#codeparts {margin-left:auto;}

p a:hover, td a:hover, .edits a:hover, i a:hover {
    background-color: #e472c4;
}
ul, ol {
    padding:30px 20px 20px 50px;
    background-color: #444;
    color:white;
    border-radius: 35px;
    width:80%
}
ul ul, ol ul {
    padding:5px 5px 5px 20px;
}
ul img, ol img {
    margin-top:10px;
    margin-bottom:20px;
    width:120px;
}
li a {
    padding:0px 3px 0px 3px;
    margin-top:2px;
    display:inline-block;
    /* border-top:dashed thin #e472c4;
    border-bottom:dashed thin #e472c4; */
    background-color:#eee;
    color:#555;
}

li a:hover {
    background-color: #e472c4;
    color:white;
}

h4 {
    /* font-size:20px; */
    margin-bottom:-16px;
    margin-left:30px;
    padding-top:4px;
    font-weight: normal;
    font-style: italic;
    border-top:thin solid #DDD;
    width:250px;
}

.dr {
    display:block;
    position:relative;
    margin-bottom:-10px;
    margin-left:-6px;
    border-radius:20px;
    width:206px;
    height:120px;
    text-align:left;
    padding:0px;
    background-color:#777;
}
.dr img {
    position:absolute;
    bottom:0px;
    width:115px;
    margin-left:20px;
}

.intro {
    margin-bottom:40px;
    position:relative;
    left:-14px;
}
.intro a {
    padding:10px 15px;
    background-color: #e472c4; /*#50c4b7;*/
    text-decoration: none;
    color:white;
    margin:5px;
}
.intro a:hover {
    background-color:#50c4b7; /*#e472c4;*/
}
.skills {
    position:relative;
    left:-5px;
    display:inline-block;
    margin-bottom:5px;
    text-align:left;
    width:590px;
    font-size: 16px;
    padding:10px;
    color:#ccc;
    background-color: #333;
    border-radius:14px;
}

.plain {
    padding:0px !important;
    background-color:transparent !important;
    color:#50c4b7 !important;
    font-size:18px;
}

.plain:hover {
    padding:0px !important;
    background-color:transparent !important;
    color:#e472c4 !important;
}

p strong, li strong {
    color:#f58e25;
}

p em {
    display: inline-block;
    padding:5px 10px;
    margin-top:20px;
    margin-bottom:5px;
    background-color:#eee;
    text-transform: uppercase;
    font-size:18px;
    font-style:normal;
}
.c {
    font-family:courier;
    border:1px dashed #999;
    padding:10px 20px 10px 10px;
    display:inline-block;
    white-space: pre-wrap;
}

.id {
    font-size:14px;
    display:block;
    background-color:#993399;
    color:white;
    width:18px;
    height:18px;
    padding:3px 1px 0px 3px;
    margin-top:-16px;
    margin-left:-16px;
}

#submitButton {
    vertical-align: top;
    padding:14px 20px !important;
    background-color:#50c4b7;
    text-decoration: none;
    color:white;
    display:inline-block;
    margin-right:10px;
}
.viewButton {
    vertical-align: top;
    padding:10px 14px !important;
    background-color:white !important;
    text-decoration: none;
    font-family:courier;
    font-size:40px;
    color:#555 !important;
    display:inline-block;
    margin-right:10px;
    margin-bottom:10px;
    width:600px;
    text-align:left;
    text-transform:none;
}

#submitButton:hover, .viewButton:hover {
    color:white !important;
    background-color:#e472c4 !important;
}

#fixedID {
    font-size:30px;
    font-style:italic;
    margin-right:50px;
    position: relative;
    top:5px;
}
#idtop a {
    padding:5px;
    background-color:#50c4b7;
    text-decoration: none;
    color:white;
}
#idtop a:hover {
    background-color:#e472c4;
}

.ace_editor {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.scrollmargin {
    height: 500px;
    text-align: center;
}
.ace_content {
    /*padding-left:5px !important;*/
    user-select: none;
}
h1 {
    font-weight:normal; 
    font-style:normal; 
    text-align:center;
}
section {
    overflow:hidden; 
    margin:20px 0px; 
    border-radius:30px; 
    padding:20px; 
    background-color:white;
}
section h2 {
    opacity:.8; 
    font-style:normal; 
    background-color:#eee; 
    text-align:left; 
    font-size:24px; 
    text-transform:uppercase; 
    color:#fb4758; 
    padding:5px 10px; 
    margin-bottom:10px;
}

.ace_editor.fullScreen {
    height: auto;
    width: auto;
    border: 0;
    margin: 0;
    position: fixed !important;
    top: -10;
    bottom: 0;
    left: 0;
    right: -10;
    z-index: 100;
}
.fullScreen {
    overflow: hidden
}

.references {
    margin-top:30px;
    padding:20px;
    border-radius: 20px;
    background-color: #333
}
.references img {
    width:250px;
}
.references tr {
    color:#ccc;
    vertical-align: top;
}
.references a {
    padding:3px; background-color: #ccc;
    color:#333;
}
.references a:hover {
    padding:3px; background-color: #fff;
    color:#333;
}

.mods {margin:10px 0px -10px 0px;}

.mods button {
    background-color:#50c4b7;
    color:white;
    border:none;
    padding:5px;
    width:30px;
    cursor:pointer;
}
.mods button:hover {
    background-color:#e472c4;
}
.num {
    padding:4px;
    color:white;
    background-color: #333;
    width:38px;
    height:30px;
    text-align:center;
    display:inline-block;
}
.show {
    position:relative;
    float:right;
    margin-right:12px;
    font-size:14px;
    margin-top:7px;
    padding:4px 6px 3px 6px;
    width:60px;
    text-transform: uppercase;
    text-align:center;
    background-color:#50c4b7;
    color:#fff
}
.show:hover, .selected:hover {
    background-color: #e472c4 !important;
}
.selected {
    color:white;
    border:none;
    padding:5px;
    width:30px;
    cursor:pointer;
    background-color: #f58e25 !important;
}

.subinfo {
    margin-top:-30px;
    margin-bottom:40px;
    font-weight:normal;
    font-style:italic;
    text-align:center;
    font-size:18px;
    color:#777;
}

#login {
    margin-top:-30px;
    /* display:none; */
    text-align:right;
    margin-right:40px;
    position:relative;
    top:-7px;
}
#login a {
    display:inline-block;
    background-color:#993399;
    font-size:16px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding:10px 15px;
    display:inline-block;
    cursor:pointer;
    color:white;   
}
#login a:hover {
    background-color:#acd241;
}

.partBar {
    margin: 20px 10px 0px 0px;
    background-color:#bbb;
    color:white;
    padding:0px;
    height:38px;
}
.part {    
    position:relative;
    height:450px;
    margin:0px 10px 0px 0px;
    padding:0px;
    background-color:#ddd;
    overflow:hidden;
}
#part1 {
    resize:vertical;
    position:relative;
    z-index:7;
}
#part2 {
    resize:vertical;
    height:450px;
}
.demos {
    resize:vertical; 
    position:relative; 
    height:450px; 
    margin:0px 10px 0px 0px; 
    padding:0px; 
    background-color:#ddd; 
    overflow:hidden;
}
.test, .sample {width:98%; margin:3px;}
.holder {
    width:99%; 
    min-width:640px; 
    margin-bottom:50px;
}
pre {
    font-family:courier; 
    font-size:20px; 
    margin-left:20px; 
    color:#ccc;
}
#code, #info, #editor {
    position:absolute;
    width:99%;
    margin:3px;
}
.info {display:none; color:#ccc;}
/* #logo, #logoB {
    margin-left:50px; margin-top:24px; margin-bottom:-14px;
    position:relative; top:8px; left:12px;
    width:70px;
} */
#logo, #logoB {
    margin-left:26px; margin-top:24px; margin-bottom:-8px;
    position:relative; top:8px; left:12px;
 }

/* #subtitle {
    font-size:32px;
    margin-left:30px;
    position:relative;
    top:4px;
    left:8px;
    margin-bottom:10px
}
.logolink {
    color:#DDD !important;
    font-size:26px !important;
    margin-left:15px;
    background-color:transparent !important;
} */

#subtitle {
    font-size:32px;
    margin-left:30px;
    position:relative;
    top:4px;
    left:8px;
    margin-bottom:60px !important;
}
.logolink {
    color:#DDD !important;
    font-size:32px !important;
    background-color:transparent !important;
}

.partBar {
    background-color: #333;
    /* height:38px; */
    padding-left:20px;
    white-space: nowrap;
    margin-top:20px;
    margin-bottom:0px;
    height:36px;
}
.partBar a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding:6px 15px;
    height:36px;
    margin:0px 4px 0px 4px;
    display:inline-block;
    cursor:pointer;
    color:white;     
}
.partBar a:hover {
    background-color: #acd241 !important;
}

.partColor {
    /* min-width:1040px !important; */
}

.partColor, .part3Color {
    position:relative;
    z-index:2;
    margin:0px 10px 0px 0px;
    height:10px;
}
#part1 {
    position:relative;
    background-color:#222;
}
#docs, #demos, #sample, #test, #assets, #badges, #magic, #help {
    position:absolute;
    top:0px;
    left:0px;
}
#assetsBut {
    width:70px;
}
#badgesBut {
    width:70px;
}

.part2Bar {
    background-color: #111;
    height:51px;
    margin-bottom:6px;
    padding-left:300px !important;    
    text-align: left;
    white-space: nowrap;
    font-size:16px !important;
}
.part2Bar a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding:8px 5px;
    text-align:center;
    width:64px;
    margin:0px 4px 0px 4px;
    display:inline-block;
    cursor:pointer;
    color:white
}
.part2Bar a:hover {
    background-color: #acd241 !important;
}
.part2Color {
    position:relative;
    z-index:2;
    margin:0px 10px -1px 0px;
    height:10px;
}

.part3Bar {
    background-color: #111;
    height:51px;
    margin-bottom:6px;
    padding-left:20px;
    text-align: left;
    white-space: nowrap;
    font-size:16px;
}
.part3Bar a {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding:8px 5px;
    text-align:center;
    width:70px;
    margin:0px 4px 0px 4px;
    display:inline-block;
    cursor:pointer;
    color:white
}
.part3Bar a:hover {
    background-color: #acd241 !important;
}
#run {display:none;}
.part3Color {
    background-color:#acd241;
    position:relative;
    z-index:2;
    margin:0px 10px -1px 0px;
    height:10px;
}

#assets_top {
    background-color:#993399;
    font-weight:normal;
}
#assets_top:hover {
    background-color:#e472c4;
}

#copy {
    text-align:center;
    color:#50c4b7;
    background-color:#222;
    padding:10px;
    margin-bottom:20px;
    margin-top:30px;
    }
    #copyyear:before {content:"2026"}
    #copy a {
        color:#acd241
    }
    #copy a:hover {
        color:#e472c4
    }

    #logo_new {
        margin-top:24px; margin-bottom:30px;
        position:relative; top:8px; left:12px;
        margin-left:-28px;
    }

    #gear {
        margin-left:20px;
        position:relative;
        top:4px;
        opacity:85%;
        cursor:pointer;
        z-index:50;
    }
    #gear:hover {
        opacity:100%;
    }

    #helpLinks {
        float:left;
        margin-left:10px;
        margin-top:0px;
        margin-right:10px;
    }

    #magicBut {
        background-color: #6c42bb;
    }
    #spellsBut {
        background-color: #5085c5;
    }
    #badgesBut {
        background-color: #f58e25;
    }
    #assetsBut {
        background-color: #df695c;
    }
   

    .but2 {
        font-size:16px;
        display:inline-block;
        padding:8px 5px;
        text-align:center;
        width:64px !important;
        margin:0px 4px 0px 4px;
        text-align:center;
        display:inline-block;
        cursor:pointer;
        color:white !important; 
        margin:0px 4px 0px 4px;
    }
    .but2:hover {
        background-color:#acd241 !important;
    }


.edits {
    margin-top:-21px;
}
/* #help {
    position:absolute;
    right:8%;
    margin-top:-35px;
} */

#assethelp {background-color:#993399; text-transform:uppercase; font-weight:normal}
#assethelp:hover {background-color:#e472c4}

#above {
    position:relative;
    padding:10px 0px 15px 0px !important;
    margin-top:-40px !important;
    margin-right:10px !important;
    background-color: #222;
    min-width:880px !important;
}
#dimensions {
    width:690px;
    position:relative;
    text-align:left;
    margin-left:25px;
    opacity:80%;
    font-size:16px;
}
#dimensions input {
    width:20px;
    height:20px;
    filter: hue-rotate(60deg);
}

#features {
    position:absolute;
    right:30px; 
    top:14px;
}
#features img {
    width:30px;
    margin-right:10px;
    cursor:pointer;
}

.buttons {
    position:relative;
    text-align:right;
    margin-right:30px;
    margin-top:0px;
    text-transform:uppercase;
    font-size:20px;
}
.buttons a {
    text-align:center;
    padding:7px 14px 10px 14px;
    width:110px;
    margin-right:0px;
    display:inline-block;
    background-color: #aaa;
    color:#333;
    border-radius: 0px
}
.buttons a:hover {
    background-color: #ddd;
}
.buttons a:nth-child(3) {
    margin-right:0px;
}
.buttonbar {    
    position:relative;
    float:right;
    right:4%;
    top:134px;
    z-index:5;
}
.buttonbar a {
    display:inline-block;
    font-size:16px;
    padding:8px 10px !important;
    margin:3px;
    color:white !important;
    text-transform:uppercase;
    margin-bottom:0px;
    border-radius:0px;
    background-color:#50c4b7;
}
.buttonbar a:hover {
    background-color:#e472c4;
}
.buttonbar div {
    display:inline-block;
    vertical-align: bottom;
    margin-right:5px;
    text-transform:uppercase;
    /* font-style:italic; */
    /* color:#acd241; */
    color:#f58e25;
    font-size:22px;
}
.subtutorial {
    font-size:26px;
}
.sectionLinks {    
    position:relative;
    top:20px;
    width:98%;
    margin-top:20px;
    text-align:center;
}
.sectionLinks a {
    font-size:16px;
    color:#333;
    text-transform: uppercase;
    display:inline-block;
    width:80px;
    padding:8px;
    margin:5px;
    background-color:yellow;
    border-radius:5px;
}
.sectionLinks a:hover {
    background-color:#e472c4 !important;
}

#transfer {
    position:absolute;
    right:40px;
    bottom:30px;
    z-index:5;
    opacity:70%;
    display:none;
    width:70px;
    cursor:pointer;
}
#transfer:hover {
    opacity:100%;
}

input[type="checkbox"]:not(:checked){opacity:1;}
input[type="radio"]:not(:checked){opacity:1;}

footer {
    padding-bottom:20px !important;
}
#logoBot {
    width:150px;
}

#pop, #pop2, #popstore, #popQR {
    display:none;
    position:absolute;
    left:50%;
    margin-left:-250px;
    top:400px;
    text-align: center;
    z-index: 200;
    padding:50px;
    width:450px;

    background-color:#ebcb35;
    font-family:verdana;
    font-size:24px;
    border:10px #fb4758 solid;
    box-shadow: rgba(0,0,0,.3) 10px 10px 10px;
}
/* #popstore, #popQR {width:450px;} */
#popQR {top:100px; width:300px !important; margin-left:-200px !important;}
#qrholder {
    display:inline-block;
    padding:20px;
    background-color: #eee;
    margin-left:auto;
    margin-right:auto;
}
#pop a, #pop2 a, #popstore a {
    display:inline-block;
    background-color:white;
    padding:20px 30px;
    margin:10px;
    box-shadow: rgba(0,0,0,.3) 5px 5px 5px;
}
#pop a:hover, #pop2 a:hover, #popstore a:hover {
    background-color:#acd241;
}

@media all and (max-width: 640px){
    #popQR {margin-left:150px !important;}
}


.topBarLink {
    text-decoration: none;
    color:#888;
}
.topBarLink:hover {
    color:#50c4b7;
}