body, html {overscroll-behavior: contain;}

html {
    background-color: #333;
    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;
 }

 #curriculum {
     margin-top:30px;
 }
 #curriculum a {
     padding:15px 25px;
     background-color:#50c4b7;
     text-decoration: none;
     color:white;
 }
 #curriculum 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;}
 /* h1 {font-weight:normal; font-style:normal; text-align:left; font-size:24px; background-color:#333; color:#eee; padding:5px 10px;} */
 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;}


 .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;
 }

 .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;
  }
  #part2 {
    resize:vertical;
    height:450px;
  }
 .sample {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:26px; margin-top:24px; margin-bottom:-8px;
     position:relative; top:8px; left:12px;
  }


  /* NEW TO KIDS */

  #editorTitle {margin-left:10px; margin-top:-30px; padding-bottom:2px; color:#AAA;}

  body {background-Color:#333; margin-bottom:0px !important;}

  .viewPic {
      width:500px;
      margin:3px auto;
  }
  .lessonHolder {
      display:inline-block;
      /* border:thin solid #bbb; */
      padding:20px;
      background-color: #111;
      border-radius: 20px;
      margin-bottom:30px;
  }
  .ident {
      font-size:16px;
  }
  #listSpells a {
      display:inline-block;
      padding:4px 10px;
      margin-right:2px;
  }
  #subtitle {
      font-size:32px;
      margin-left:30px;
      position:relative;
      top:4px;
      left:8px;
      margin-bottom:10px
  }
  .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;
      margin:0px 4px 0px 4px;
      display:inline-block;
      cursor:pointer;
      color:white;
      height:36px;
  }
  .partBar a:hover {
      background-color: #acd241 !important;
  }

  .partColor, .part3Color {
      position:relative;
      z-index:2;
      margin:0px 10px 0px 0px;
      height:10px;
  }

  .part2Bar {
      background-color: #333;
      height:51px;
      margin-bottom:6px;
      padding-left:20px;
      /* padding-right:8%; */
      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 !important;
      text-align:center;
      width:70px !important;
      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: #333;
      height:51px !important;
      margin-bottom:6px;
      padding-left:20px;
      text-align: left;
      white-space: nowrap;
      font-size:16px !important;
  }
  .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 !important;
      text-align:center;
      width:70px !important;
      margin:0px 4px 0px 4px;
      display:inline-block;
      cursor:pointer;
      color:white
  }
  .part3Bar a:hover {
      background-color: #acd241 !important;
  }
  img[src="https://d309knd7es5f10.cloudfront.net/vee/logo_dark.png"] {
    width:150px;
  }
  #run {display:none;}
  .part3Color {
      background-color:#acd241;
      position:relative;
      z-index:2;
      margin:0px 10px -1px 0px;
      height:10px;
  }
  #features {
      float:left;
      margin-left:15px;
      margin-top:7px;
      margin-right:5px;
      /* margin-right:40px;
      position:relative;
      top:-50px;
      margin-bottom:-50px; */
  }
  #features img {
      width:30px;
      margin-right:10px;
      cursor:pointer;
  }

  #helpLinks {
        /* width:85%;
        min-width:620px;
        position:absolute;
        text-align:right; */
        position:absolute;
        right:5%;
        margin-top:-38px;
    }

  .edits {
      margin-top:-21px;
  }
    .but {
        font-size:16px !important;
        display:inline-block;
        padding:8px 10px 10px 10px !important;
        margin:5px;
        margin-right:2px !important;
        color:white !important;
        margin-bottom:0px;
        border-radius:0px;
        background-color:#993399;
    }
    .but:hover {
        background-color:#acd241;
    }
 
  #dimensions {
      /* width:85%;
      min-width:620px;
      position:absolute;
      text-align:right; */
      position:absolute;
      /* left:40%; */
      left:38.8%;
      margin-top:-35px;
  }
  #dimensions input {
      width:20px;
      height:20px;
      filter: hue-rotate(60deg);
  }

  .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:74px;
  }
  .buttonbar a {
      display:inline-block;
      font-size:16px;
      padding:10px 15px !important;
      margin:5px;
      color:white !important;
      font-weight:bold;
      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:10px;
      text-transform:uppercase;
      /* font-style:italic; */
      /* color:#acd241; */
      color:#f58e25;
      font-size:24px;
  }
  .subtutorial {
      font-size:26px;
  }
  .sectionLinks {
      position:relative;
      top:20px;
      width:98%;
      margin-top:20px;
      text-align:center;
  }
  .sectionLinks a {
      font-size:16px;
      color:#111;
      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;
  }

  #pop, #pop2, #popstore {
      display:none;
      position:absolute;
      left:50%;
      margin-left:-250px;
      top:400px;
      text-align: center;
      z-index: 20;
      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 {width:520px;}
  #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;
  }