html,body {
  font-family: "Source Sans Pro",Verdana;
  color: rgba(255,255,255,.9);
  margin: 0px;
  overflow: hidden;

  user-select: none;
}

html {
  height: 100% ;
}

body {
  background: linear-gradient(135deg, hsl(200,35%,16%), hsl(200,20%,11%));
}

div::-webkit-scrollbar {
    width: 10px;
    height: 10px ;
}

div::-webkit-scrollbar-track {
  background: rgba(255,255,255,.15);
  border-radius: 5px;
  margin: 4px 2px;
}

div::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.3);
  border-radius: 5px;
  margin: 4px 1px;
}

input[type="checkbox"] {
  accent-color: hsl(180,50%,40%) ;
  width: 1.2em ;
  height: 1.2em ;
  vertical-align: middle ;
}

label {
  vertical-align: middle ;
}

h1 {
  font-family: "Ubuntu",Verdana;
  margin: 0px ;
  font-size: 32px ;
  color: hsla(30,100%,100%,.7);
}

.bg-red { background: hsl(0,40%,45%) ;}
.bg-orange { background: hsl(30,60%,45%) ;}
.bg-green { background: hsl(160,40%,40%) ;}
.bg-blue { background: hsl(200,40%,40%) ;}
.bg-purple { background: hsl(300,30%,40%) ;}

.pill {
  border-radius: 20px ;
  color: #FFF ;
  font-size: 11px ;
  padding: 2px 6px ;
  display: inline-block ;
  text-align: center ;
}

.pill i {
  margin-right: 5px ;
}

.shadow5 {
  box-shadow: 0 0 5px #000 ;
}

.marginbottom10 {
  margin-bottom: 10px ;
}

.marginleft10 {
  margin-left: 10px ;
}

.marginright10 {
  margin-right: 10px ;
}

header {
  position: fixed;
  top: 0 ;
  left: 0;
  right: 0 ;
  height: 60px;
  font-size: 20px;
  /*box-shadow: 0 0 8px hsla(200,100%,0%,1);*/
  color: hsla(200,10%,100%,.7);
  /*text-shadow: 1px 1px 2px #000 ;*/
  /*z-index: 3;*/
  /*border-bottom: solid 2px rgba(255,255,255,.05);*/
  white-space: nowrap;
  /*box-shadow: 0 0 10px rgba(0,0,0,.5);*/
  transition-property: transform;
  transition-duration: 1s;
  transform: translateY(-100%);
  z-index: 1 ;
}

header .logo {
  display: inline-block ;
  margin-left: 20px ;
  margin-top: 18px;
  margin-right: 40px ;
  color: rgba(255,255,255,.9);
  width: 180px ;
  vertical-align: top ;
  cursor: pointer ;
  transition: width 0.5s ease, margin-top 0.5s ease ;
}

header .titlemenu {
  display: inline-block ;
  margin: 0px 0 0 0 ;
  padding: 0 ;
  white-space: nowrap;
}

header li {
  display: inline-block ;
  position: relative ;
  margin: 0px 5px ;
  font-size: 14px;
  margin-top: 7px ;
  padding: 6px 10px 3px 10px;
  font-family: "Source Sans Pro";
  color: rgba(255,255,255,.7);
  text-align: center;
  cursor: pointer ;
  border-radius: 5px ;
}

.main-menu-container {
  white-space: nowrap ;
}

header .main-menu {
  font-size: 24px;
  margin: 20px 0 0 20px;
  display: none ;
  transform-origin: center ;
}

header li i {
  font-size: 18px ;
}

header li.selected, header li:hover {
  background:rgba(255,255,255,.2) ;
}

header li .fa-patreon {
  position: absolute;
  background: #FF424D;
  padding: 7px;
  border-radius: 30px;
  font-size: 12px;
  color: #FFF;
  right: -10px;
  top: 0px;
}

header li .pastille {
  position: absolute;
  background: hsl(330,40%,50%);
  padding: 5px;
  border-radius: 30px;
  font-size: 12px;
  color: #FFF;
  right: -10px;
  top: 0px;
}

#language-setting {
  display: inline-block ;
  position: relative ;
  margin-left: 20px ;
    padding: 8px 0;
    border-radius: 20px;
    font-size: 12px;
    color: #FFF;
    width:32px;
    height:32px ;
    transition: width 0.5s ease ;
    overflow: hidden ;
}
#language-setting i {
  position: absolute ;
  font-size: 32px ;
  color: hsl(200,50%,50%);
  cursor: pointer;
}
#language-setting .lang {
  position: absolute ;
  left: 0 ;
  right: 0 ;
  text-align:center ;
  padding: 8px 10px ;
  cursor: pointer;
}
.language-menu-container {
  display: inline-block ;
  width: 20px ;
  height: 20px ;
  position: relative ;
}
.language-menu {
  box-sizing: border-box ;
  position: absolute ;
  display: inline-block ;
  height: 0px ;
  overflow: hidden ;
  top: -20px ;
  right: 12px ;
  transition: height 0.5s ease, padding 0.5s ease ;
  font-size: 12px ;
  z-index: 10 ;
  background: hsl(200,25%,20%);
  border-radius: 5px;
  padding: 0 8px ;
}
.language-menu-open {
  height: 330px;
  padding: 8px ;
  /*box-shadow: 0 0 10px #000;*/
}
.language-choice {
  position: relative ;
  width: 32px ;
  height: 40px ;
}
.language-choice i {
  position: absolute ;
  font-size: 32px ;
  color: hsl(200,50%,50%);
  cursor: pointer;
}
.language-choice div {
  position: absolute ;
  left: 0 ;
  right: 0 ;
  text-align:center ;
  padding: 8px 10px ;
  cursor: pointer;
}

#login-button {
    float: right;
    /* margin: 0px 0px; */
    color: #FFF;
    font-size: 18px;
    font-family: "Source Sans Pro";
    padding: 18.5px 0px 18.5px 20px ;
    /* border-radius: 5px; */
    cursor: pointer;
    display: none;
}

#login-button i {
  font-size: 18px;
  margin-right: 5px;
}
#create-account-button {
    float: right;
    margin: 13px 20px;
    color: #FFF;
    font-size: 18px;
    background: hsl(160,50%,40%);
    font-family: "Source Sans Pro";
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    display: none;
}

#create-account-button i {
  font-size: 18px;
  margin-right: 5px;
}

#user-info {
  float: right ;
  color: #FFF;
  font-size: 16px;
  font-family: "Source Sans Pro";
  display: none ;
}
#user-info i {
  font-size: 16px;
}

.login-info {
  display: none ;
  float: right ;
  font-size: 18px ;
}
#header-progress-summary {
  float: right ;
  margin: 5px 15px 0 15px ;
  text-align: center ;
  cursor: pointer ;
  border-radius: 3px ;
  padding: 5px;
}
#header-progress-summary.hidden {
  display: none ;
}
#header-progress-summary:hover {
  background: rgba(255,255,255,.1);
}
#header-progress-level {
  font-size: 14px ;
  font-weight: bold ;
}
#header-progress-xp {
  font-size: 10px ;
  width: 150px ;
  background: hsl(20,50%,40%);
  border-radius: 3px ;
  padding: 1px 10px ;
}

.login-info i {
  margin: 0 2px ;
}

header .username {
  display: inline-block ;
  margin-right: 20px ;
  background: rgba(255,255,255,.2);
  border-radius: 30px ;
  padding: 0px 10px 0px 0px ;
  cursor: pointer ;
  margin-top: 10px ;
  height: 38px ;
}
header .username i {
  margin: 0 5px 0 15px ;
  vertical-align: middle ;
}
header .username:hover {
  background: rgba(255,255,255,.4);
}
header .username.guest {
  background: hsl(0,50%,40%);
}
header .username img {
  width: 32px ;
  height: 32px ;
  border-radius: 16px ;
  vertical-align: middle ;
  margin: 3px 10px 3px 3px ;
}
header .username span {
  margin: 6px ;
  vertical-align: middle ;
}

.main-container {
  position: fixed ;
  top: 60px ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  transition-property: top ;
  transition-duration: .5s ;
}
.projects-section {
  display: none ;
}
.projectheader {
  /*background:rgba(255,255,255,.1) ;*/
  position: absolute ;
  top: 0px ;
  left: 0 ;
  right: 0 ;
  height: 30px ;
  font-size: 18px ;
  padding: 10px 20px 0px 16px ;
  white-space: nowrap ;
/*  border-bottom: solid 1px rgba(0,0,0,.2);*/
}

.projectheader img {
  height: 32px ;
  vertical-align: middle ;
  margin-right: 20px ;
  background: #000 ;
  border-radius: 3px ;
  image-rendering: pixelated ;
}

.projectheader .backtoprojects {
  position: absolute ;
  top: 9px ;
  right: 9px ;
  border-radius: 5px ;
  background: hsl(0,50%,40%);
  padding: 4px 10px ;
  font-size: 14px;
  cursor: pointer ;
}
.projectheader #save-status {
  transition-property: transform, opacity, color ;
  transition-duration: .5s ;
  font-size: 20px ;
  margin: 0 20px ;
  opacity: 0 ;
  color: #FFF;
}

.projectheader #project-fullscreen {
  margin: 0 10px 0 0 ;
  color: rgba(255,255,255,.5);
  border-radius: 3px ;
  padding: 4px ;
}
.projectheader #project-fullscreen:hover {
  background: rgba(0,0,0,.25) ;
  color: rgba(255,255,255,.75);
}

.projectheader #active-project-users {
  display: inline-block ;
  margin-left: 80px ;
}

.projectheader #active-project-users div {
  padding: 3px 8px ;
  border-radius: 10px ;
  background: hsl(0,50%,50%) ;
  color: #FFF ;
  font-size: 12px ;
  margin-right: 10px ;
  display: inline-block ;
}
.projectheader #active-project-users div i {
  margin-right: 5px ;
}
.about-section {
  display: none ;
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  overflow: auto ;
}

.section-content {
  position: absolute;
  overflow: auto ;
  left: 0px ;
  right: 0px ;
  top: 100px ;
  bottom: 0px ;
}

#about-content {
  padding: 0px 40px 40px 40px ;
}

#about-content i {
  font-size: 25px;
  vertical-align: middle;
  margin-right: 10px;
}
.section-menu {
  position: absolute ;
  top: 10px ;
  left: 30px ;
  right: 30px ;
  text-align: left ;
  padding-top: 20px ;
  white-space: nowrap;
  overflow: auto ;
}
.section-menu div {
  display: inline-block ;
  background: rgba(255,255,255,.1);
  border-radius: 30px ;
  padding: 10px 25px ;
  margin: 5px ;
  cursor: pointer ;
  font-size: 18px ;
}
.section-menu div.selected {
  background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.8);
}

.about {
  padding: 80px ;
}
.about p {
  color: rgba(255,255,255,.7);
}
.about h2 {
  color: rgba(255,255,255,.8);
}
.about img {
  width: 150px ;
  vertical-align: middle ;
  margin-bottom: 6px ;
}
.about a {
  text-decoration: none ;
  color: hsl(200,100%,70%);
}
.about a:visited {
  color: hsl(200,100%,70%);
}
.about-button-div {
  text-align: center ;
  margin: 40px ;
}
.about code {
  background: rgba(255,255,255,.15);
  padding: 2px 5px ;
  border-radius: 3px ;
  font-family: "Ubuntu Mono";
  line-height: 1.2em;
  font-size: 14px ;
}
.about pre code {
  display: block ;
  background: rgba(255,255,255,.15);
  padding: 10px ;
  color: rgba(255,255,255,.8);
  border-radius: 3px ;
  font-family: "Ubuntu Mono";
  line-height: 1.2em;
  white-space: pre-wrap ;
  margin-right: 20px ;
  margin-left: 40px ;
}
#about-button {
  padding: 10px 30px ;
  color: #FFF ;
  background: hsl(160,50%,40%);
  font-size: 20px ;
  display: inline-block ;
  border-radius: 5px ;
  cursor: pointer ;
}
#about-button i {
  margin-right: 5px ;
}

.myprojects {
  position: absolute;  top:40px ; bottom: 0 ; left: 0 ; right: 0 ;
  display: none ;
  overflow: auto ;
}

.myprojects .title {
  margin: 0px 20px ;
}
.project-list {
  margin: 20px 10px 10px 10px ;
}
.project-list h2 {
  margin: 100px 50px ;
  text-align: center ;
  color: rgba(255,255,255,.5);
  font-size: 24px ;
}

.project-invites-list {
  margin: 0 10px 20px 20px ;
  float: right ;
}

.project-invites-list h2 {
  margin: 20px 0 ;
  font-size: 18px ;
  font-family: Ubuntu ;
  color: rgba(255,255,255,.7);
}

.project-invites-list .invite {
  background: rgba(0,0,0,.2);
  border-radius: 5px ;
  margin-bottom: 5px ;
  width: 300px ;
  overflow: hidden;
}

.project-invites-list .invite .buttons {
  float: right ;
}

.project-invites-list .invite img {
  height: 32px ;
  image-rendering: pixelated ;
  margin-right: 5px ;
  vertical-align: middle ;
}


.project-invites-list .invite .buttons div {
  display: inline-block ;
  padding: 5px ;
  font-size: 18px ;
  width: 24px ;
  height: 24px ;
  text-align: center ;
  cursor: pointer ;
}

.project-invites-list .invite .buttons .accept {
  background: hsl(160,50%,40%);
}
.project-invites-list .invite .buttons .reject {
  background: hsl(0,50%,40%);
}

.projectview {
  position: absolute;  top:0 ; bottom: 0 ; left: 0 ; right: 0 ;
  display: none ;
  user-select: none ;
}

.container {
  position: fixed;
  top: 92px;
  bottom: 0px;
  left: 252px;
  right: 1px;
  padding: 10px;
  overflow: auto ;
}

.container::-webkit-scrollbar {
    width: 10px;
}

.container::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
  border-radius: 5px;
  margin: 4px 1px;
}

.container::-webkit-scrollbar-thumb {
  background-color: hsla(200,10%,80%,.5);
  border-radius: 5px;
  margin: 4px 1px;
}
.runbutton {
  display: inline-block;
  padding: 5px 10px ;
  border-radius: 5px ;
  background: hsl(120,50%,40%);
  color: rgba(255,255,255,.9);
  font-size: 18px ;
  cursor: pointer ;
}
.runbutton i {
  font-size: 14px;
}

.patch-caption {
  width: 200px ;
  height: 150px;
  margin: 10px ;
  padding: 5px ;
  background: hsl(0,40%,30%) ;
  border-radius: 5px;
  /*box-shadow: 0 0 10px hsla(0,50%,60%,1);*/
  display: inline-block;
  cursor: pointer ;
  transition: .1s filter, .1s transform ;
  transition-timing-function: ease;
}

.patch-caption .top {
/*  text-shadow: 0 0 5px rgba(0,0,0,1);*/
padding-left: 2px ;
}

.patch-caption .center {
  background-color: rgba(0,0,0,.5);
  height: 100px;
  margin: 5px 0;
}

.patch-caption .bottom {
/*  font-size: 14px;*/
padding-left: 2px ;

}

.patch-caption .rating {
  float: right ;
}

.patch-caption:hover {
  filter: brightness(1.2);
  transform: scale(1.05,1.05);
}

.patch-caption .toolbar {
  float: right ;
  text-shadow: none ;
}
.sidemenu::-webkit-scrollbar { display: none ; }

.sidemenu {
  position: absolute;
  top: 56px;
  bottom: 0px;
  left: 0px;
  width: 60px;
  z-index: 2 ;
  overflow-y: auto ;
  scrollbar-width: none ;
  transition: left 0.5s ease ;
  background: hsl(200,20%,16%);
}

.projectview.sidebar-collapsed .sidemenu {
  left: -60px ;
  overflow: visible ;
}

.projectview.sidebar-collapsed .section-container {
  left: -10px ;
}
.projectview.sidebar-collapsed .sidemenu li.selected {
  position:absolute ;
  left: 60px ;
  top: -65px ;
  transform: scale(0.8) ;
  border-radius: 5px ;
  box-shadow: 0 0 5px #000 ;
}

.sidemenu ul {
  position: relative ;
  display: inline-block ;
  margin: 0px 0 0 0 ;
  padding: 0 ;
  /*border-bottom: solid 2px rgba(255,255,255,.1);*/
}

.sidemenu li {
  display: inline-block ;
  padding: 15px 0px 8px 0 ;
  font-size: 12px;
  font-family: "Source Sans Pro";
  color: hsla(200,10%,90%,.9);
  text-align: center;
  width: 60px;
  cursor: pointer ;
  margin: 0px 0px ;
  transition: left 0.5s ease, top 0.5s ease, transform 0.5s ease ;
}

.sidemenu li img {
  width: 32px ;
  height: 32px ;
  margin-bottom: 5px ;
  border-radius: 5px ;
}

.sidemenu li .fa-code { color: hsla(0,100%,80%,.85);}
.sidemenu li .fa-image { color: hsla(45,100%,80%,.85);}
.sidemenu li .fa-map { color: hsla(90,100%,80%,.85);}
.sidemenu li .fa-cube { color: hsla(180,100%,80%,.85);}
.sidemenu li .fa-volume-up { color: hsla(135,100%,80%,.85);}
.sidemenu li .fa-music { color: hsla(180,100%,80%,.85);}
.sidemenu li .fa-book { color: hsla(225,100%,80%,.85);}
.sidemenu li .fa-sync { color: hsla(270,100%,80%,.85);}
.sidemenu li .fa-cogs { color: hsla(315,100%,80%,.85);}
.sidemenu li .fa-upload { color: hsla(0,100%,80%,.85);}

.sidemenu li.selected .fa-code { color: hsla(0,100%,70%,1);}
.sidemenu li.selected .fa-image { color: hsla(45,100%,70%,1);}
.sidemenu li.selected .fa-map { color: hsla(90,100%,70%,1);}
.sidemenu li.selected .fa-cube { color: hsla(180,100%,70%,1);}
.sidemenu li.selected .fa-volume-up { color: hsla(135,100%,70%,1);}
.sidemenu li.selected .fa-music { color: hsla(180,100%,70%,1);}
.sidemenu li.selected .fa-book { color: hsla(225,100%,70%,1);}
.sidemenu li.selected .fa-sync { color: hsla(270,100%,70%,1);}
.sidemenu li.selected .fa-cogs { color: hsla(315,100%,70%,1);}
.sidemenu li.selected .fa-upload { color: hsla(0,100%,70%,1);}

.sidemenu li#menuitem-code.selected { width: 56px ; border-left: solid 4px hsl(0,100%,70%) ; }
.sidemenu li#menuitem-sprites.selected { width: 56px ; border-left: solid 4px hsl(45,50%,50%) ; }
.sidemenu li#menuitem-maps.selected { width: 56px ; border-left: solid 4px hsl(90,50%,50%) ; }
.sidemenu li#menuitem-assets.selected { width: 56px ; border-left: solid 4px hsl(180,50%,50%) ; }
.sidemenu li#menuitem-sounds.selected { width: 56px ; border-left: solid 4px hsl(135,50%,50%) ; }
.sidemenu li#menuitem-music.selected { width: 56px ; border-left: solid 4px hsl(180,50%,50%) ; }
.sidemenu li#menuitem-doc.selected { width: 56px ; border-left: solid 4px hsl(225,50%,50%) ; }
.sidemenu li#menuitem-sync.selected { width: 56px ; border-left: solid 4px hsl(270,50%,50%) ; }
.sidemenu li#menuitem-options.selected { width: 56px ; border-left: solid 4px hsl(315,50%,50%) ; }
.sidemenu li#menuitem-publish.selected { width: 56px ; border-left: solid 4px hsl(0,50%,50%) ; }

.sidemenu li:hover {
  background-color: hsl(200,30%,30%) ;
  color: hsla(200,10%,100%,.9);
}
.sidemenu .selected,.sidemenu .selected:hover {
  background-color: hsl(200,30%,30%);
  margin-bottom: 0px;
  color: hsla(200,10%,100%,1);
  /*box-shadow: 10px 0px 10px -10px hsla(200,100%,70%,1) inset;*/
}

.sidemenu li i {
  font-size: 20px;
  padding-bottom: 5px;
}

#menuitem-tabs {
  margin: 5px ;
  border-radius: 10px ;
  padding: 10px 10px 5px 10px ;
  width: 30px ;
}

.section-container {
  position: absolute;
  top: 46px;
  bottom: 0px;
  left: 60px;
  right: 0px;
  padding: 0px;
  overflow: hidden;
  border-left: solid 10px hsl(200,30%,30%);
  border-radius: 10px 0px 0px 0px ;
}

.section {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 0px;
  overflow: hidden ;
  display: none;
}

.patchtree {
  overflow: auto;
  position: fixed;
  bottom: 0px;
  top: 52px ;
  width: 252px;
}
.patchtree::-webkit-scrollbar {
    width: 10px;
}

.patchtree::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
  border-radius: 5px;
  margin: 4px 1px;
}

.patchtree::-webkit-scrollbar-thumb {
  background-color: hsla(200,10%,80%,.5);
  border-radius: 5px;
  margin: 4px 1px;
}

.patchfoldertitle {
  padding: 10px;
  /*background: rgba(255,255,255,.1);*/
  cursor: pointer ;
  border-bottom: solid 1px rgba(255,255,255,.05);
  border-left: solid 1px rgba(255,255,255,.05);
}
.patchfoldertitle i {
  margin-right:10px;
}

.patchfoldercontent {
  padding: 2px 0px 1px 0px ;
  background: rgba(255,255,255,.03);
  border-left: solid 30px hsla(200,50%,40%,.1);
  margin-left: 0px;
}
.patchfoldercontent .patchfoldercontent {
  padding: 5px 0px 20px 10px ;
  border-left: solid 1px rgba(255,255,255,.05) ;
  background: none ;
}

.patchfoldercontent.closed {
  display: none ;
}


.patchfile {
  margin: 2px 0px 2px 30px ;
  display: inline-block ;
  padding: 5px 10px;
  background: linear-gradient(hsl(200,40%,40%) 0%,hsl(200,40%,50%) 10%,hsl(200,40%,40%) 10%,hsl(200,40%,30%) 90%,hsl(200,40%,30%) 90%,hsl(200,40%,20%) 100%);
  border-radius: 2px ;
  cursor: pointer ;
  min-width: 100px;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
  color: rgba(255,255,255,.9);
}

.patchfile i {
  margin-right: 5px;
}
.editor-toolbar {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index:1 ;
  padding-bottom: 5px;
}

.editor-toolbar i {
  font-size: 20px ;
  margin: 5px;
  padding: 8px;
  border-radius: 25px ;
  background: hsl(200,10%,80%);
  color: rgba(0,0,0,.8);
  box-shadow: 0 0 10px rgba(0,0,0,.5);
  cursor: pointer ;
}
.editor-toolbar i:hover {
  background: hsl(200,10%,90%);
}
.editor-toolbar i:active {
  background: hsl(200,10%,100%);
}
#popmenu {
  position: fixed;
  width: 300px;
  min-height: 200px;
  background: hsl(200,30%,10%);
  border: solid 1px rgba(255,255,255,.1);
  border-radius: 5px;
  z-index: 4 ;
  box-shadow: 0 0 10px rgba(0,0,0,.5);
}
.hidden {
  display: none ;
}

.code-editor,#code-editor {
  position: absolute ;
  top: 0px ;
  bottom: 0px ;
  left: 0 ;
  width: 50% ;
}


.overlay {
  z-index: 40 ;
  background: rgba(0,0,0,.7);
  position: fixed ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  text-align: center ;
  display: none;
  overflow: auto ;
}
.confirm-message-box {
  display: inline-block ;
  text-align: center;
  margin: 100px ;
  width: 500px ;
  padding: 40 px ;
  background: #EEE ;
  border-radius: 20px ;
  color: rgba(0,0,0,.8) ;
}
#confirm-message-text {
  margin: 40px 0 ;
}
.confirm-message-buttons div {
  display: inline-block ;
  margin : 20px ;
  padding: 10px 20px ;
  border-radius: 10px ;
  cursor: pointer ;
  color: rgba(255,255,255,.8);
  font-size: 20px ;
}
#confirm-message-cancel {
  background: hsl(0,40%,50%) ;
}
#confirm-message-ok {
  background: hsl(160,40%,50%) ;
}

.window-wrapper {
  text-align: center ;
}
#login-window {
  margin-top: 100px ;
  padding: 20px ;
  border-radius: 10px;
  background: #DDD;
  color: #222;
  display: inline-block ;
  text-align: center ;
  margin-bottom:100px;
}
#login-window h2 {
  margin-top: 0px;
}
#login-window p {
  margin: 0 ;
  padding: 0 ;
}
#create-account-panel {
  display: none ;
}
#forgot-password-panel {
  display: none ;
}
#login-window input {
    font-size: 18px;
    padding: 5px;
    margin-bottom: 20px;
}
#login-window button {
    font-size: 18px;
    background: hsl(200,50%,40%);
    border-radius: 5px;
    padding: 10px 20px;
    color: #FFF;
}

#login-window div.button {
  background: hsl(160,50%,40%);
  border-radius: 10px ;
  padding: 20px ;
  color: #FFF;
  margin: 20px 0 0 0;
  cursor: pointer ;
  width: 300px ;
}
#login-window div.button i {
  font-size: 40px ;
}
#create-account-terms {
  max-width: 600px ;
  padding: 20px ;
  background: rgba(255,255,255,.5);
  border-radius: 10px ;
  margin: 20px 0 ;
  text-align: left ;
  font-size: 14px ;
  color: #000 ;
  display: none ;
}
#create-account-terms p {
  margin-bottom: 20px ;
}
#create-account-terms h2 {
  font-size: 18px ;
  margin: 10px 0;
}
#create-account-terms img {
  width: 110px ;
  vertical-align: middle ;
  filter: drop-shadow(0px 0px 3px #000);
}
#create-project-button {
  display: inline-block ;
  margin: 0 20px 0 40px ;
  padding: 7px 30px ;
  background: hsl(160,50%,40%);
  font-size: 18px ;
  border-radius: 2px;
  cursor: pointer ;
  color: #FFF ;
  vertical-align: middle ;
}
#import-project-button {
  display: inline-block ;
  margin: 0 10px 0 0 ;
  padding: 7px 30px ;
  background: hsl(200,50%,40%);
  font-size: 18px ;
  border-radius: 2px;
  cursor: pointer ;
  color: #FFF ;
  vertical-align: middle ;
}
#create-project-button i, #import-project-button i {
  margin-right: 5px;
}
#create-project-window {
  margin-top: 200px ;
  margin-bottom: 100px ;
  padding: 20px ;
  border-radius: 10px;
  background: #DDD;
  color: #222;
  display: inline-block ;
  text-align: center ;
}
#create-project-title {
    font-size: 18px;
    padding: 5px;
    margin-bottom: 20px;
}
#create-project-window button {
    font-size: 18px;
    background: hsl(200,50%,40%);
    border-radius: 5px;
    padding: 10px 20px;
    color: #FFF;
    border: none ;
    cursor: pointer ;
    outline: none ;
}
#create-project-window select {
    font-size: 18px;
}
#create-project-window h2 {
  margin-top: 0px;
}

.project-box {
  position: relative ;
  margin: 10px ;
  padding: 10px ;
  background: rgba(255,255,255,.1);
  border-radius: 5px ;
  display: inline-block ;
  cursor: pointer ;
  min-width: 290px ;
  height: 200px ;
  box-shadow: 0 0 30px rgba(0,0,0,.5);
}

a.project-box {
  color: rgba(255,255,255,.9) ;
  text-decoration: none ;
}

.project-box img {
  border-radius: 10px ;
  background: #000 ;
  image-rendering: pixelated;
  width: 144px ;
  height: 144px ;
}

.project-box .buttons {
  position: absolute ;
  bottom: 10px ;
  right: 10px ;
  text-align: right ;
}

.project-box .buttons .button {
  padding: 4px 12px ;
  background: hsl(0,50%,40%);
  border-radius: 2px ;
  font-size: 14px ;
  margin-top: 8px ;
  text-align: left ;
}

.project-box .buttons .button.clone {
  background: hsl(160,50%,40%);
}

.project-box .buttons .button.export {
  background: hsl(200,50%,40%);
}
.project-box .buttons .button.export a {
  text-decoration: none ;
  color: #FFF ;
}

.project-box .buttons .button i {
  margin-right: 5px ;
}


.project-title {
  color: #FFF ;
  font-size: 24px ;
}

.ignoreMouseEvents {
  pointer-events: none ;
}

.usermenu {
  position: fixed ;
  top: 60px ;
  right: 0px ;
  height: 0px ;
  overflow: hidden ;
  z-index: 2 ;
  background: hsl(200,50%,20%);
  transition: height 0.5s ease ;
}
.usermenu i {
  margin-right: 10px ;
}
.usermenu div {
  padding: 10px 20px ;
  font-size: 16px ;
  border-top: solid 2px rgba(255,255,255,.1);
  cursor: pointer ;
}
.usermenu div:hover {
  background: rgba(255,255,255,.2);
}
.usermenu.regular .create-account, .usermenu.regular .discard-account {
  display: none ;
}
.usermenu.guest .settings, .usermenu.guest .logout, .usermenu.guest .profile {
  display: none ;
}
.usermenu.standalone .settings,.usermenu.standalone .profile,.usermenu.standalone .logout,.usermenu.standalone .create-account,.usermenu.standalone .discard-account {
  display: none ;
}

.usermenu .discard-account {
  background: hsl(0,50%,40%);
}

.help-section {
  display: none ;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden ;
}
.doc-render.documentation {
  padding: 50px ;
  max-width: 1000px ;
}
.help-sections {
  background: hsl(200,23%,23%);
  padding: 0 10px 10px 0 ;
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
}
.help-section-category {
  float: left ;
  border-radius: 5px ;
  padding: 0 10px 10px 0 ;
  margin: 10px 0 0 10px ;
  vertical-align: top ;
}
.help-section-title {
  padding: 10px 0 0 10px ;
  cursor: pointer ;
}
.help-section-title i {
  margin-right: 10px ;
}
.help-section-category.collapsed .help-section-title i:before {
  content: "\f0da";
}
.help-section-title i:before {
  content: "\f0d7";
}
.help-section-button {
  display: inline-block ;
  background: rgba(255,255,255,.5) ;
  color: rgba(0,0,0,.7);
  border-radius: 5px ;
  padding: 8px 16px ;
  margin: 14px 0 0 10px ;
  cursor: pointer ;
}
.help-section-category.collapsed .help-section-content {
  display: none ;
}
.help-section-button:hover {
  padding: 6px 14px ;
  border: solid 2px rgba(255,255,255,.8) ;
}
.help-section-button.selected {
  display: inline-block ;
  background: rgba(0,0,0,.5) ;
  color: rgba(255,255,255,.8) ;
  padding: 6px 14px ;
  border: solid 2px rgba(255,255,255,.8) ;
}
.help-document {
  position: absolute ;
  top: 200px ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
}
.help-view {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 300px ;
  right: 0 ;
  overflow: auto ;
}
.help-view i {
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 10px;
  background: rgba(0,0,0,.2);
  color: rgba(0,0,0,.5);
}
.helplist {
  position: absolute ;
  top: 0 ;
  bottom:0 ;
  left: 0px ;
  width: 260px ;
  overflow: auto ;
}
.help-list {
  padding: 0px 20px 40px 20px ;
}

.help-section div::-webkit-scrollbar-track {
  background: rgba(255,255,255,.15);
  border-radius: 5px;
  margin: 4px 2px;
}

.help-section div::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.25);
  border-radius: 5px;
  margin: 4px 1px;
}
.help-list h1 {
  color: hsl(0,60%,60%);
  font-size: 20px;
  margin: 40px 0 0 0 ;
  padding: 0 ;
  cursor: pointer ;
}
.help-list h2 {
  color: hsl(20,80%,70%);
  font-size: 18px;
  margin: 10px 0 5px 20px ;
  padding: 0 ;
  cursor: pointer ;
}
.help-list h3 {
    color: hsla(20,80%,100%,.8);
    font-size: 16px;
    margin: 0 0 0 22px;
    padding: 0;
    border-left: solid 4px rgba(255,255,255,.1);
    padding-left: 10px;
    cursor: pointer ;
}

#notification-container {
  position: fixed ;
  top: 60px ;
  left: 0 ;
  right: 0 ;
  text-align: center ;
  transform: translateY(-150px);
  transition-duration: 1s ;
  transition-property: transform ;
}
#notification-bubble {
  padding: 10px 20px ;
  border-radius: 10px ;
  color: #FFF ;
  background: hsl(30,60%,50%) ;
  display: inline-block ;
}
#notification-bubble i {
  margin-right: 10px ;
}
.greenbutton {
  display: inline-block ;
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  padding: 8px 20px ;
  font-size: 14px ;
  cursor: pointer ;
}
.greenbutton i {
  margin-right: 10px ;
}
.redbutton {
  display: inline-block ;
  border-radius: 5px ;
  background: hsl(0,50%,50%);
  color: #FFF ;
  padding: 8px 20px ;
  font-size: 14px ;
  cursor: pointer ;
}
.redbutton i {
  margin-right: 10px ;
}
.smallgreenbutton {
  display: inline-block ;
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  padding: 2px 8px ;
  font-size: 12px ;
  cursor: pointer ;
}
.smallgreenbutton i {
  margin-right: 10px ;
}
.smallredbutton {
  display: inline-block ;
  border-radius: 5px ;
  background: hsl(0,50%,50%);
  color: #FFF ;
  padding: 2px 8px ;
  font-size: 12px ;
  cursor: pointer ;
}
.smallredbutton i {
  margin-right: 10px ;
}
.right {
  text-align: right ;
}
.center {
  text-align: center ;
}
.left {
  text-align: left ;
}

.floating-window {
  position: fixed ;
  top: 200px ;
  left: 300px ;
  width: 400px ;
  height: 300px ;
  border-radius: 10px ;
  box-shadow: 0 0 20px #000, 0 0 2px 0px #000 ;
  background: hsl(200,30%,30%);
  z-index: 10 ;
  /* display: none ;*/
  overflow: hidden ;
  display: none ;
}
.floating-window .titlebar {
    position: absolute ;
    left: 0 ;
    right: 0 ;
    top: 0 ;
    height: 20px;
    padding: 10px 10px;
    background: rgba(0,0,0,.1);
    color: #FFF;
    font-size: 16px;
    cursor: move;
}
.floating-window .titlebar .icon {
  display: inline-block ;
  margin-right: 10px ;
}
.floating-window .titlebar .title {
  display: inline-block ;
}
.floating-window .titlebar .minify {
  background: rgba(0,0,0,.5);
  border-radius: 20px ;
  padding: 6px 7px ;
  position: absolute ;
  right: 4px ;
  top: 4px ;
  text-align: center ;
  cursor: pointer ;
  font-size: 20px ;
}
.floating-window .navigation {
  position: absolute;
  bottom: 0 ;
  height: 40px ;
  left: 0 ;
  right: 0 ;
  background: rgba(0,0,0,.1);
}

.floating-window .navigation i.resize {
  padding: 12px 10px ;
  text-align: center ;
  position: absolute ;
  right: 0px ;
  width: 20px ;
  transform: rotateZ(-45deg);
  color: rgba(0,0,0,.5) ;
  cursor: nwse-resize ;
}

.floating-window .content {
  position: absolute ;
  left: 5px ;
  right: 5px ;
  top: 45px ;
  bottom: 45px ;
  padding: 5px;
  overflow: hidden ;
}

.usertag {
  display: inline-block ;
  position: relative ;
  background: none ;
  padding: 2px 18px 2px 6px ;
  border-radius: 5px ;
  overflow: visible ;
  text-decoration: none ;
  color: rgba(255,255,255,.9);
  font-size: 14px ;
}
.usertag img {
  vertical-align: middle ;
  position: absolute ;
  right: -16px ;
  top: 0px ;
}
.usertag img.profile {
  vertical-align: middle ;
  position: absolute ;
  left: -13px ;
  top: -4px ;
  width: 32px ;
  height: 32px ;
  border-radius: 16px ;
  box-shadow: 0 0 2px #000 ;
}
.usertag span {
  color: rgba(255,255,255,.9);
}
.usertag.founder {
  background: hsla(0,50%,40%,.5) ;
}
.usertag.pixel_master {
  background: hsla(140,50%,40%,.5) ;
}
.usertag.code_ninja {
  background: hsla(180,50%,40%,.5) ;
}
.usertag.gamedev_lord {
  background: hsla(300,50%,40%,.5) ;
}
.usertag.sponsor {
  background: hsla(40,50%,40%,.5) ;
}

.horizontal-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
}

.placeholder {
  padding: 40px 40px 10px 40px ;
  color: hsl(20,60%,60%) ;
  font-size: 24px ;
  text-align: center ;
}

.meta-message {
  position: fixed ;
  top: 60px ;
  left: 0 ;
  right: 0 ;
  height: 22px ;
  background: hsl(190,20%,75%);
  color: #222 ;
  padding: 9px 20px 8px 20px ;
  font-size: 16px ;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   border-bottom: rgba(0,0,0,.25);
}

.meta-message i {
  margin-right: 10px ;
  vertical-align: middle ;
  font-size: 20px ;
}

.meta-message i.fa-times {
  float: right ;
  cursor: pointer ;
  font-size: 14px ;
  padding: 4px 6px ;
  border-radius: 20px ;
  color: #FFF ;
  background: hsl(0,30%,50%);
  margin-left: 10px ;
}


#projects-bar {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
  height: 30px ;
  padding: 5px ;
  vertical-align: middle ;
}

#projects-search {
  position: relative ;
  float: right ;
  right: 0 ;
  top: 0 ;
  bottom: 0 ;
  width: 200px ;
}
#projects-search input {
  border-radius: 25px;
      border: none;
      margin: 6px;
      font-size: 18px;
      padding: 5px 15px;
      background: rgba(255,255,255,.9);
      width: 148px ;
}
#projects-search input:focus {
  outline: none ;
}
#projects-search i {
    position: absolute;
    right: 26px;
    top: 13px;
    z-index: 1;
    color: rgba(0,0,0,.3);
    font-size: 18px;
}
#projects-tags {
  position: absolute ;
  left: 150px ;
  right: 200px ;
  top: 0 ;
  bottom: 0 ;
  white-space: nowrap ;
  overflow: hidden;
}
#projects-tags div {
  display: inline-block ;
  border-radius: 20px ;
  padding: 3px 8px ;
  margin: 10px 2px ;
  background: hsl(200,30%,15%);
  color: #FFF ;
  cursor: pointer ;
  font-size: 12px ;
}
#projects-tags span {
  font-size: 8px ;
  padding: 3px 5px ;
  border-radius: 15px ;
  background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.8);
}
#projects-tags div.active {
  background: hsl(200,70%,50%);
  box-shadow: 0 0 10px hsl(200,70%,50%);
}
#projects-tag div:hover {
  background: hsl(200,70%,50%);
}





.createprojectoption {
  margin-bottom: 40px ;
}

.createprojectoption .tip {
  font-size: 12px ;
  color: rgba(0,0,0,.5);
}

.createprojectoption input {
  border: none ;
  border-radius: 3px ;
  font-size: 16px ;
  padding: 5px ;
  background: rgba(255,255,255,.2);
  color: rgba(0,0,0,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
}

.createprojectoption input:focus {
  outline: none ;
  background: rgba(255,255,255,.3);
}

.createprojectoption h3 {
  margin: 0px 0px 4px 0px ;
}

.createprojectoption select {
  font-size: 16px ;
  background: rgba(255,255,255,.2);
  color: rgba(0,0,0,.8);
  border: solid 1px rgba(0,0,0,.2);
  padding: 2px;
  border-radius: 5px ;
  height: 30px;
  font-family: "Source Sans Pro",Verdana ;
  text-align: center ;
}

.createprojectoption select option {
  background-color: hsl(200,50%,10%);
  color: #FFF;
  padding: 2px ;
}

.createprojectoption select:focus {
  outline: none ;
  background: rgba(255,255,255,.4);
}


#advanced-create-project-options-button {
  border-radius: 5px ;
  color: hsl(200,50%,50%) ;
  margin: 60px 0 0px 0 ;
  cursor: pointer ;
}
#advanced-create-project-options-button.open {
  margin: 60px 0 40px 0 ;
}
#advanced-create-project-options-button i {
  margin-right: 10px ;
}
#advanced-create-project-options-button i:before {
  content: "\f063";
}
#advanced-create-project-options-button.open i:before {
  content: "\f062";
}

#advanced-create-project-options {
  display: none ;
}


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

.pick-color-button {
  display: inline-block ;
  margin: 7px 10px 7px 0 ;
  height: 26px ;
  width: 26px ;
  border-radius: 5px ;
  border: solid 1px rgba(255,255,255,.5);
  background: rgb(0,0,0) ;
  vertical-align: middle ;
  cursor: pointer ;
}

.editor-coordinates {
  position: absolute ;
  right: 0 ;
  top: 0 ;
  bottom: 0 ;
  padding: 10px 20px ;
}

.beta-pill {
  border-radius: 10px ;
  font-size: 12px ;
  padding: 2px 8px ;
  position: relative ;
  bottom: 15px ;
  left: 5px ;
  color: rgba(255,255,255,.9) ;
  background: hsl(0,50%,50%);
  font-family: Ubuntu ;
}

.search-field {
  width: 200px ;
  display: inline-block;
  position: relative ;
}
.search-field input {
  border-radius: 25px;
      border: none;
      margin: 6px;
      font-size: 14px;
      padding: 5px 15px;
      background: rgba(255,255,255,.9);
      width: 148px ;
}
.search-field input:focus {
  outline: none ;
}
.search-field i {
  position: absolute;
      right: 16px;
      top: 12px;
      z-index: 1;
      color: rgba(0,0,0,.3);
      font-size: 16px;
}

.likes-button {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 14px;
  background: rgba(255,255,255,.2);
  border-radius: 5px ;
  color: rgba(255,255,255,.9);
  padding: 4px 12px ;
  vertical-align: baseline ;
  cursor: pointer ;
}

.likes-button.liked {
  background: hsl(0,50%,50%);
}


.likes-button i {
  margin-right: 4px ;
  vertical-align: baseline ;
}


.home-section {
  display: none ;
  position: fixed ;
  top: 0px ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  overflow: auto ;
  text-align: center ;
  font-size: 22px ;
  color: rgba(255,255,255,.7);
  user-select: text ;
}

#home-header-background {
  position: fixed ;
  height: 0px ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
  background: linear-gradient(135deg,hsl(200,50%,20%),hsl(200,20%,10%)) ;
  transition-property: height ;
  transition-duration: 1s ;
}
.home-section::-webkit-scrollbar {
    width: 10px;
    background: #AAA;
}

.home-section::-webkit-scrollbar-track {
  background: #EEE;
  border-radius: 5px;
  margin: 4px 1px;
}

.home-section::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
  margin: 4px 1px;
}

.home-section i {
  font-size: 150px ;
  color: hsl(200,30%,30%);
}
.home-section h2 {
  font-size: 32px ;
  color: #444 ;
  margin-top: 0 ;
}
.home-section img.screen {
  box-shadow: 0 0 20px #000 ;
  width: 100% ;
}

.home-section div.part {
  padding: 60px 0 ;
  background: hsl(20,20%,92%);
  color: #222 ;
  overflow: hidden ;
}

@keyframes screenshot-animation {
  from {
    transform: perspective(1000px) rotateY(-25deg) scale(0.9,0.9) translateX(-50px);
  }

  to {
    transform: perspective(1000px) rotateY(0deg) scale(1,1) translateX(0);
  }
}

@keyframes text-animation {
  from {
    transform: translateX(-20000px) ;
  }
  to {
    transform: translateX(0px) ;
  }
}

@keyframes logo-animation {
  from {
    transform: perspective(100px) rotateX(60deg) scale(0.7,0.7);
  }

  to {
    transform: perspective(100px) rotateX(0deg) scale(1,1) ;
  }
}

.home-section .mainlogo {
  animation: 2s ease-out logo-animation ;
}

.home-section div.part.part1 {
  position: relative ;
  padding: 160px 0 100px 0 ;
  background: linear-gradient(135deg, hsl(200,50%,30%), hsl(10,50%,30%) 120%);
  color: #FFF ;
  padding-top: 160px ;
}
.home-section div.part.part1 .right {
  width: auto ;
}
.home-section div.part.part1 .right img {
  max-width: 800px ;
  margin-bottom: -20%;
  animation: 3s ease-in-out screenshot-animation ;
}
.home-section div.part.part1 .p1 {
  animation: 1s ease-out text-animation ;
}
.home-section div.part.part1 .p2 {
  animation: 2s ease-out text-animation ;
}

.home-section div.part.last {
  background: linear-gradient(135deg, hsl(200,50%,30%), hsl(10,50%,30%) 120%);
  border-top: solid 5px hsl(200,50%,15%);
  border-bottom: solid 5px hsl(200,50%,15%);
  padding: 30px 0;
}

.home-section div.part:nth-child(even) {
  background: #FFF;
}

.home-section div.right {
  display: inline-block ;
  text-align: right ;
  width: 400px ;
  padding: 20px 40px ;
  vertical-align: top;
}
.home-section div.left {
  display: inline-block ;
  text-align: left ;
  width: 400px ;
  padding: 20px 40px ;
  vertical-align: top;
}
.home-section div.center {
  display: inline-block ;
  text-align: center ;
  width: 400px ;
  padding: 20px 40px ;
  vertical-align: middle;
}

.container h2 {
  margin: 100px 50px 50px 50px ;
  font-weight: normal ;
  text-align: center ;
}

.button-container {
  margin: 20px 0  ;
  text-align: center ;
}
.home-section .button {
  margin: 20px ;
  display: inline-block;
  text-align: center ;
  padding: 20px 30px ;
  border-radius: 10px ;
  background: hsl(160,50%,40%);
  box-shadow: 0 0 5px rgba(255,255,255,.5) inset, 0 0 5px rgba(0,0,0,.5);
  color: rgba(255,255,255,.9);
  font-size: 24px ;
  cursor: pointer ;
  width: 250px ;
  user-select: none ;
}
.home-section .button i {
  font-size: 40px ;
  margin-bottom: 10px ;
  color: rgba(255,255,255,.5);
}

.home-section .footer {
  background: linear-gradient(175deg, hsl(200,50%,20%), transparent);
  padding: 40px 20% ;
  text-align: center ;
  color: hsl(200,20%,80%);
  font-size: 14px ;
}
.home-section .footer i {
  font-size: 14px ;
}
.home-section .footer p {
  margin: 40px 0 ;
}
.home-section .footer p a {
  color: hsl(200,100%,80%);
  text-decoration: none ;
  white-space: nowrap ;
}
.home-section .footer p i {
  margin: 0 20px ;
  font-size: 10px ;
}

#doc-section {
  border-top: solid 10px hsl(200,30%,30%);
}

.doc-editor,#doc-editor {
  position: absolute ;
  top: 0px ;
  bottom: 0px ;
  left: 0 ;
  width: 50% ;
}
.doc-splitbar {
  background: hsl(200,7%,28%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
}

.doc-view {
  background: #222 ;
  position: absolute ;
  bottom: 0 ;
  top: 0 ;
  right: 0 ;
  width: 50% ;
  background: hsl(30,50%,80%);
  overflow: auto ;
}
.doc-view::-webkit-scrollbar-track {
  background: rgba(0,0,0,.15);
  border-radius: 5px;
  margin: 4px 2px;
}

.doc-view::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.25);
  border-radius: 5px;
  margin: 4px 1px;
}
.doc-render{
  padding: 40px ;
  color: rgba(0,0,0,.8);
  font-family: Helvetica,sans-serif;
  user-select: text ;
}
.doc-render h1,.doc-render h2,.doc-render h3,.doc-render h4,.doc-render h5,.doc-render h6 {
  color: rgba(0,0,0,.8);
  font-family: Helvetica,sans-serif;
}

.doc-render h1 {
  margin: 0 ;
  padding: 40px 0 10px 0 ;
}
.doc-render h2 {
  margin: 0 ;
  padding: 30px 0 10px 0 ;
}
.doc-render h3 {
  margin: 0 ;
  padding: 20px 0 10px 0 ;
}
.doc-render .doc-render h4,.doc-render h5,.doc-render h6 {
  margin: 0 ;
  padding: 10px 0 10px 0 ;
}
.doc-render hr {
  margin: 40px 0 ;
  border: solid 2px rgba(128,128,128,.5);
}
.doc-render p {
  margin: 0 0 10px 0 ;
}
.doc-render h5 {
  font-size: 15px ;
  background: rgba(0,0,0,.1);
  border-radius: 5px ;
  padding: 5px ;
  margin-top: 20px ;
  margin-bottom: 10px ;
}


.doc-render table {
  border-radius: 3px ;
  margin-bottom: 20px ;
}

.doc-render table,tr,td {
  border-collapse: collapse;
}

.doc-render tr,td,th {
  border: solid 1px rgba(0,0,0,.1);
  padding: 10px ;
}
.doc-render th {
  font-weight: bold ;
  background: rgba(0,0,0,.05);
}
.doc-render code {
  background: rgba(0,0,0,.1);
  padding: 2px 5px ;
  border-radius: 3px ;
  font-family: "Ubuntu Mono";
  line-height: 1.2em;
  font-size: 14px ;
}
.doc-render pre code {
  display: block ;
  background: rgba(0,0,0,.7);
  color: rgba(255,255,255,.9);
  padding: 10px ;
  border-radius: 3px ;
  color: rgba(255,255,255,.8);
  padding: 5px ;
  border-radius: 3px ;
  font-family: "Ubuntu Mono";
  line-height: 1.2em;
  white-space: pre-wrap ;
}
.doc-render a {
  text-decoration: none ;
  color: hsla(200,100%,30%,.8);
}

.doc-render img {
  max-width: 100% ;
}

#doceditor-start-tutorial {
  position: absolute ;
  right: 20px ;
  top: 20px ;
  padding: 10px 20px ;
  color: white ;
  background: hsl(200,50%,40%);
  border-radius: 5px ;
  cursor: pointer ;
}

#doceditor-start-tutorial i {
  margin-right: 10px ;
}

.code-right {
  position: absolute ;
  right: 0px ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
}

.editor-view,#editor-view {
  position: absolute ;
  top: 42px ;
  bottom: 0px ;
  left: 0px ;
  right: 0 ;
  transition-duration: .5s , 1s ;
  transition-property: left, opacity ;
  opacity: 1 ;
}
#editor-locked {
  position: absolute ;
  top: 60px ;
  left: 240px ;
  right: 40px ;
  padding: 20px ;
  z-index: 100 ;
  height: 20px ;
  transition-duration: .5s, 1s ;
  transition-property: left, opacity ;
  border-radius: 10px ;
  color: #FFF ;
  font-size: 16px ;
  opacity: 1 ;
  display: none ;
  pointer-events: none ;
}
#editor-locked i {
  margin-right: 5px ;
}

.code-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
}

.editor-separator {
  background: linear-gradient(hsl(200,30%,30%) 0%,hsl(200,20%,20%) 10%,hsl(200,20%,10%) 90%,hsl(200,20%,0%) 100%);  height: 20px ;
  position: absolute ;
  padding: 0px 10px;
  font-size: 12px;
  top: 400px ;
  left: 0px ;
  right: 0px ;
  cursor: ns-resize;
}
.editor-separator i {
  padding: 1px 5px ;
  font-size: 16px;
}

.runbar {
  position: absolute;
  right: 0px ;
  left: 0px ;
  top: 0px ;
  height: 40px;
  background: hsl(200,30%,30%);
  border-left: solid 2px rgba(0,0,0,.5);
  text-align: left ;
  padding-left: 20px ;
  white-space: nowrap ;
}
.runbar *,.runtime-splitbar * {
  display: inline-block ;
}
.runbar .buttons,.runtime-splitbar .buttons {
  display: inline-block ;
  margin-left: 40px ;
}
.runbar .buttons div,.runtime-splitbar .buttons div {
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
}
.runbar .buttons div:hover,.runtime-splitbar .buttons div:hover  {
  background: hsl(160,50%,60%);
}

.runbar .buttons div:active,.runtime-splitbar .buttons div:active  {
  background: hsl(160,30%,30%);
}
.runbar .buttons img {
  width: 24px ;
  height: 24px ;
  vertical-align: middle;
}

#qrcode-button {
  margin-left: 20px ;
  border-radius: 5px ;
  background: hsl(200,50%,40%) ;
  position: relative ;
  top: -2px ;
  padding: 5px ;
}

#qrcode-button:hover, #run-link:hover {
  background: hsl(200,50%,50%) ;
}

#take-picture-button {
  display: none ;
  margin-left: 20px;
  border-radius: 50px;
  background: rgba(0,0,0,.2);
  padding: 6px;
  width: 20px;
  height: 20px;
  text-align: center;
}

#take-picture-button:hover {
  background:rgba(255,255,255,.2);
}


.runbar .buttons .selected,.runtime-splitbar .buttons .selected,
.runbar .buttons div.selected:hover,.runtime-splitbar .buttons div.selected:hover
{
  background: hsl(160,20%,35%);
  cursor: default ;
}
#run-link {
  display: inline-block ;
  font-size: 14px ;
  padding: 4px 12px ;
  border-radius: 14px ;
  background: hsl(200,50%,40%);
  margin-left: 20px ;
  white-space: nowrap ;
  overflow: hidden ;
  cursor: pointer ;
  vertical-align: middle;
}
a#run-link {
  color: #FFF ;
  text-decoration: none ;
}

.runtime-container {
  position: absolute ;
  bottom: 0 ;
  top: 0 ;
  right: 0 ;
  width: 50% ;
}
.runtime {
  position: absolute ;
  top:0 ;
  left: 0 ;
  right: 0 ;
  height: 100px ;
  text-align: center;
}
.runtime-splitbar {
  background: hsl(200,30%,30%);
  border-left: solid 2px rgba(0,0,0,.5);
  position: absolute ;
  left: 0px ;
  top: 100px ;
  right: 0 ;
  height: 12px ;
  border-bottom: solid 2px #000 ;
  transition-property: height ;
  transition-duration: 0.5s ;
  cursor: ns-resize;
  z-index: 3 ;
  overflow: hidden ;
  white-space: nowrap;
  box-sizing: border-box ;
}

.runtime-splitbar span {
  margin-left: 20px ;
}

.devicecontainer {
  position: absolute ;
  top: 42px ;
  left: 2px ;
  right: 2px ;
  bottom: 2px ;
  overflow: hidden ;
  min-height: 50px ;
  min-width: 50px ;
}

#serverbar {
  display: none ;
  position: absolute ;
  bottom: 2px ;
  left: 2px ;
  right: 2px ;
  box-sizing: border-box ;
  height: 40px ;
  background: hsl(240,20%,50%) ;
  text-align: left ;
  padding: 7px 20px ;
  white-space: nowrap ;
  overflow: hidden ;
}

#serverbar i {
  margin-right: 10px ;
}

#serverbar i.status {
  margin: 0 10px 0 20px ;
  background: hsl(0,50%,40%) ;
  border-radius: 40px ;
  border: solid 2px rgba(0,0,0,.5) ;
  width: 14px ;
  height: 14px ;
  display: inline-block ;
  position: relative ;
  top: 3px ;
}

#serverbar i.status.running {
  background: hsl(160,100%,60%) ;
}

#serverbar .button {
  border-radius: 5px ;
  background: hsl(240,20%,30%) ;
  color: #FFF ;
  padding: 3px 10px ;
  display: inline-block ;
  cursor: pointer ;
  margin-left: 20px ;
}

.server-open .devicecontainer {
  bottom: 44px ;
}

.server-open #serverbar {
  display: block ;
}

#device {
  position: absolute ;
  top: 0px ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  background: #000 ;
}
#device iframe {
  border: none ;
}
#device iframe {
  width: 960px;
  height: 540px;
}
#ruler {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  pointer-events: none ;
  text-align: center;
}
#ruler canvas {
  display: inline-block ;
}
.help-window {
  position: absolute;
  right: 20px ;
  bottom: 5px ;
  color: hsl(20,20%,20%);
  z-index: 4 ;
  margin-left: 5px ;
  cursor: pointer ;
  width: 40px ;
  height: 40px ;
}
#help-window-content {
  position: absolute ;
  bottom: 0px ;
  background: hsl(30,100%,90%);
  border-radius: 20px ;
  padding: 10px ;
  overflow: hidden ;
  min-height: 20px ;
  min-width: 20px ;
  width: 20px ;
}

#help-window-content.displaycontent {
  width: 450px ;
  left: 75px ;
  bottom:40px ;
}

#help-window-content.displaycontent.vertical {
  width: 450px ;
  right: 0 ;
  top:50px ;
  left: unset ;
  bottom: unset ;
}

.help-window.disabled #help-window-content {
  background: hsl(20,0%,60%);
  bottom: 0px ;
  left: 0px ;
  width: 20px ;
}
#help-window-content .content {
  display: none ;
}
#help-window-content.displaycontent .content {
  display: block ;
}
.help-window.disabled #help-window-content .content {
  display: none ;
}

.help-window i {
  margin: 0 ;
}

.help-window .left-side {
  position: absolute ;
  left: 0 ;
  top: 0 ;
  bottom: 0 ;
  width: 20px ;
  padding: 10px ;
  background: rgba(0,0,0,.1);
  text-align: center ;
}

.help-window .content {
  margin-left: 40px;
}

.help-window p {
  margin: 0 ;
}

.help-window h1, .help-window h2, .help-window h3, .help-window h4, .help-window h5, .help-window h6 {
  font-size: 18px ;
  padding: 0 ;
  margin: 0 0 5px 0 ;
}

.help-window .see-doc-button {
  border-radius: 3px ;
  background: hsl(0,50%,40%);
  font-size: 12px ;
  color: #FFF ;
  padding: 4px 8px ;
  float: right ;
  margin-left: 10px ;
}

.help-window .see-doc-button i {
  margin-right: 4px ;
}

#source-asset-bar .language {
  border-radius: 10px ;
  background-color: rgba(0,0,0,.3) ;
  color: rgba(255,255,255,.7);
  font-size: 11px ;
  padding: 3px 8px ;
  margin-left: 10px ;
  font-family: "Ubuntu Mono";
  position: relative ;
  top: -2px;
}
#source-asset-bar .language.python {
  background-color: hsl(160,40%,40%) ;
}
#source-asset-bar .language.lua {
  background-color: hsl(20,40%,40%) ;
}
#source-asset-bar .language.javascript {
  background-color: hsl(300,40%,40%) ;
}
#source-asset-bar .language.microscript {
  background-color: hsl(200,40%,40%) ;
}

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

.code-tools .buttons {
  display: inline-block ;
}
.code-tools .buttons div {
  display: inline-block ;
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
  vertical-align: middle ;
  height: 20px ;
}
.code-tools .buttons div:hover {
  background: hsl(160,50%,60%);
}

.code-tools .buttons div:active  {
  background: hsl(160,30%,30%);
}
#code-font-plus {
  padding: 8px 11px ;
  height: 24px ;
  font-size: 19px ;
}
#code-font-minus {
  padding: 12px 14px ;
  height: 16px ;
  font-size: 12px ;
}

.value-tool-button {
  position: relative ;
  display: inline-block ;
  background: hsl(200,50%,50%);
  color: #FFF ;
  border-radius: 5px ;
  padding: 6px ;
  font-size: 13px ;
  z-index: 4 ;
  cursor: pointer ;
  width: 80px ;
  display: none ;
  margin-left: 20px ;
}

.value-tool-button span {
  background: #FFF ;
  border-radius: 3px ;
  padding: 2px 4px ;
  font-size: 11px ;
  color: hsl(200,50%,20%);
}

.value-tool-button i {
  position: absolute;
  right: 15px;
  top: 5px;
  font-size: 20px ;
}

.value-tool-button .slider-track {
  background: rgba(255,255,255,.5) ;
  border-radius: 2px ;
  width: 30px ;
  height: 3px ;
  position: absolute ;
  right: 10px ;
  top: 15px ;
}

.value-tool-button .slider-cursor {
  background: #FFF ;
  border-radius: 9px ;
  width: 9px ;
  height: 9px ;
  position: absolute ;
  right: 23px ;
  top: 12px ;
  box-shadow: 0 0 5px hsl(200,50%,20%);
}

#color-value-tool-button {
  display: none ;
}
#sourcelist {
  bottom: 34px ;
}
#manage-libs-button {
  position: absolute ;
  bottom: 3px ;
  left: 2px ;
  right: 2px ;
  border-radius: 5px ;
  color: rgba(255,255,255,.75) ;
  padding: 5px 10px ;
  text-align: left ;
  cursor: pointer ;
  font-size: 14px ;
  white-space: nowrap ;
  overflow: hidden ;
}
#manage-libs-button:hover {
  background: hsl(200,30%,30%);
}
#manage-libs-button.selected {
  background: hsl(200,30%,30%);
}
#manage-libs-button i {
  margin-right: 10px ;
}
.source-list-panel {
  position: absolute ;
  top: 40px ;
  bottom: 0 ;
  left: 0 ;
  width: 40px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
}
.source-list-header {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
  height: 40px ;
  cursor: pointer ;
  white-space: nowrap ;
}
.source-list-header div {
  position: absolute ;
  right: 180px ;
  transform: translateX(100%);
  padding: 10px ;
}
.source-list-header i {
  position: absolute ;
  top: 0 ;
  right: 0 ;
  bottom: 0 ;
  width: 18px;
  padding: 11px 11px;
  font-size: 18px;
  color: rgba(255,255,255,.9);
}

.source-list {
  position: absolute ;
  top: 40px ;
  bottom : 40px ;
  left: 0 ;
  right: 0 ;
  font-size: 14px ;
  overflow-y: auto ;
  overflow-x: hidden ;
}
.source-list i {
  padding: 10px 5px ;
  font-size: 15px ;
}
.create-source-button {
  position: absolute ;
  bottom: 0px ;
  height: 20px;
  left: 0 ;
  right: 0 ;
  padding: 10px 12px ;
  background: hsl(160,50%,40%);
  font-size: 18px ;
  cursor: pointer ;
  color: #FFF ;
  z-index: 1 ;
  box-shadow: 0 -10px 20px #000;
  text-align: center ;
  white-space: nowrap ;
}
.create-source-button i {
  margin-right: 10px ;
}

.source-list-item {
  white-space: nowrap ;
  margin: 1px 0px ;
  background: rgba(0,0,0,.25);
  cursor: pointer ;
  position: relative ;
}
.source-list-item.selected {
  background: hsl(200,30%,30%);
}
.source-list-item i {
  padding: 10px 6px 10px 14px ;
  font-size: 18px ;
  white-space: nowrap ;
}
.source-list-item .filename {
  display: inline-block;
  margin: 10px 0 ;
  padding: 2px 8px ;
  /*background: rgba(255,255,255,.1);*/
  border-radius: 3px ;
  max-width: 150px ;
}
.source-list-item input {
  border: none ;
  border-radius: 3px ;
  font-size: 14px ;
  width: 100px ;
  padding: 3px 5px ;
  background: rgba(0,0,0,.5);
  color: rgba(255,255,255,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
}
.source-list-item .active-user {
  display: none ;
  position: absolute ;
  bottom: 4px ;
  left: 4px ;
  font-size: 8px ;
  color: #FFF ;
  background: hsl(0,50%,50%);
  padding: 4px ;
  border-radius: 8px ;
}

.source-list-item input:focus {
  outline: none ;
}
.source-tools {
  text-align: right ;
  position: absolute ;
  left: 150px ;
}
.source-tools i {
  border-radius: 3px ;
  padding: 5px 4px;
  margin: 7px 2px;
  background: hsl(160,50%,40%);
  display: inline-block ;
  font-size: 14px ;
  cursor: pointer ;
}
.source-tools i.fa-trash {
  background: hsl(0,50%,40%);
}

.value-tool {
  padding: 10px ;
  background: hsl(200,20%,15%) ;
  border:solid 1px rgba(255,255,255,.2);
  box-shadow: 0 0 5px #000 ;
  border-radius: 5px ;
  position: fixed ;
}
.value-tool input[type="range"] {
  width: 300px ;
}
.value-tool .colortext {
  width: unset ;
}
.value-tool canvas {
  /*background: linear-gradient(to right,#444,rgba(0,0,0,0));*/
}

#run-window .content {
  text-align: center ;
}

#run-window .titlebar.runbar {
  padding: 2px 0 2px 20px ;
  height: 36px ;
  border: none ;
  background: none ;
  overflow: hidden ;
}

.runtime-container.vertical-split .runbar {
  border-top: solid 2px rgba(0,0,0,.5) ;
}

.runtime-terminal.horizontal-split #terminal-toolbar {
  border-left: solid 2px rgba(0,0,0,.5) ;
}

#run-window {
  background: hsl(200,30%,30%);
}

#run-window .minify {
  top:7px ;
  right: 8px ;
}

.ace-tomorrow-night-bright .ace_marker-layer .ace_active-line {
    background: #182828;
}
.ace-tomorrow-night-bright .ace_marker-layer .ace_selection {
    background: #584848;
}

.show-picture {
  background: white ;
  border-radius: 5px ;
  padding: 10px ;
  text-align: center ;
}

.show-picture div {
  display: inline-block ;
  margin: 10px 0 0 0 ;
  background: hsl(200,50%,40%);
  color: white ;
  border-radius: 5px ;
  padding: 5px 10px ;
  cursor: pointer ;
}
.show-picture div.save {
  background: hsl(160,50%,40%);
}

.show-picture div.close {
  background: hsl(0,50%,40%);
}


#runtime-left {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  bottom: 0 ;
}

.code-toolbar,#code-toolbar {
  position: absolute ;
  top: 0px ;
  left: 0px ;
  right: 0px ;
  height: 40px ;
  padding: 0px 20px ;
  padding-left: 0px ;
  transition-property: padding-left ;
  transition-duration: .5s ;
  background: hsl(200,30%,30%);
  overflow: hidden ;
}
#code-toolbar i {
  margin-right: 5px ;
}
.code-toolbar .delete {
  padding: 4px 8px ;
  border-radius: 4px ;
  background: hsl(0,50%,50%);
  cursor: pointer ;
}
.code-toolbar #delete-source i {
  margin: 0 ;
}

.lib-manager-container {
  position: absolute ;
  top: 42px ;
  left: 2px ;
  right: 2px ;
  bottom: 2px ;
  background: hsl(200,20%,20%) ;
  z-index: 4 ;
  padding: 40px ;
  overflow: auto ;
  display: none ;
}

.lib-box .docbutton {
  background: rgba(0,0,0,.5) ;
  padding: 5px 10px ;
  border-radius: 5px ;
  display: inline-block ;
  margin-right: 10px ;
  margin-top: 5px ;
  font-size: 14px ;
}
.lib-box .docbutton i {
  margin-right: 5px ;
}
.lib-box > div > a.docbutton {
  color: rgba(255,255,255,.8) ;
}

#runtime-server-view {
  position: absolute ;
  left: 0 ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

#runtime-server-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 100px ;
  top: 0px ;
  bottom: 0 ;
  width: 12px ;
  cursor: ew-resize;
  z-index: 3 ;
  box-sizing: border-box ;
  border-right: solid 2px #000 ;
}

#runtime-console-view {
  position: absolute ;
  right: 0 ;
  top: 0 ;
  bottom: 0 ;
}

#debug-splitbar {
  background: hsl(300,30%,35%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
  box-sizing: border-box;
  border-left: solid 2px hsl(200,10%,10%);
}

#debug-main-view {
  background: hsl(270,10%,20%);
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  right: 0 ;
  color: rgba(0,0,0,.8) ;
  font-size: 12px ;
  box-sizing:border-box;
}

.watch-line {
  position: relative ;
  margin-bottom: 1px ;
  margin-right: 2px ;
  padding: 2px 3px ;
  border-radius: 3px ;
  min-width: 117px ;
}
.watch-line.open {
  margin-bottom: 5px ;
}
.watch-line i {
  color: rgba(0,0,0,.5) ;
  margin-right: 5px ;
  vertical-align: middle ;
  cursor: pointer ;
  width: 14px ;
}
.watch-line-content {
  margin-left: px ;
  padding: 2px ;
  border-radius: 5px ;
  background: hsl(270,10%,20%) ;
  position: relative;
  left: 3px;
  top: 3px;
}
.watch-line.number > div > i:before { content: "\f1ec" ; }
.watch-line.string > div > i:before { content: "\f10d" ; }
.watch-line.list > div > i:before { content: "\f03a" ; }
.watch-line.object > div > i:before { content: "\f468" ; }
.watch-line.function > div > i:before { content: "\f2db" ; }

.watch-line.object > div > i:hover:before, .watch-line.list > div > i:hover:before {
  content: "\f067";
}

.watch-line.string { background: hsl(110,40%,70%) ; }
/*.watch-line.string:nth-child(odd) { background: hsl(90,40%,60%) ; }*/
.watch-line.string .watch-line-value { background: hsl(110,40%,90%) ; }

.watch-line.number { background: hsl(20,40%,70%) ; }
/*.watch-line.number:nth-child(odd) { background: hsl(20,40%,60%) ; }*/
.watch-line.number .watch-line-value { background: hsl(20,40%,90%) ; }

.watch-line.function { background: hsl(50,40%,70%) ; }
/*.watch-line.function:nth-child(odd) { background: hsl(300,40%,60%) ; }*/
.watch-line.function .watch-line-value { background: hsl(50,40%,90%) ; }

.watch-line.list { background: hsl(180,40%,70%) ; }
/*.watch-line.list:nth-child(odd) { background: hsl(200,40%,60%) ; }*/
.watch-line.list .watch-line-value { background: hsl(200,40%,90%) ; }

.watch-line.object { background: hsl(210,40%,70%) ; }
/*.watch-line.object:nth-child(odd) { background: hsl(160,40%,60%) ; }*/
.watch-line.object .watch-line-value { background: hsl(160,40%,90%) ; }



.watch-line-value {
  position: absolute;
  right: 2px;
  top: 1px;
  bottom: 1px;
  width: 100px;
  height: 17px ;
  padding: 0px 10px;
  background: hsl(270,50%,90%);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden ;
}

.watch-line input {
  position: absolute;
  right: 2px;
  top: 1px;
  bottom: 1px;
  width: 98px;
  height: 15px ;
  background: hsl(270,50%,100%);

  border: solid 1px rgba(0,0,0,.5) ;
  border-radius: 3px ;
  font-size: 12px ;
  padding: 0px 10px;
  color: rgba(0,0,0,.8);
  font-family: "Source Sans Pro",Verdana ;

}
.watch-line input:focus {
  outline: none ;
}


#debug-main-toolbar {
  background: hsl(300,40%,45%) ;
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
  box-sizing: border-box ;
  height: 40px ;
  padding: 8px 10px ;
  white-space: nowrap ;
  overflow: hidden ;
  display: none ;
}

#debug-main-toolbar div {
  display: inline-block ;
  border-radius: 5px ;
  background-color: hsl(300,30%,35%) ;
  margin-right: 20px ;
  color: rgba(255,255,255,.8);
  padding: 3px 10px ;
  font-size: 16px ;
  cursor: pointer ;
}

#debug-watch-view {
  position: absolute ;
  top: 0px ;
  left: 0 ;
  right: 0px ;
  bottom: 0 ;
}
#debug-watch-bar {
  position: absolute ;
  top: 0px ;
  left: 0px ;
  right: 0px ;
  box-sizing: border-box ;
  height: 40px ;
  background: hsl(300,30%,40%);
  color: rgba(255,255,255,.8) ;
  white-space: nowrap;
  overflow: hidden ;
  padding: 11px 20px ;
  font-size: 14px ;
}

#debug-watch-bar input {
  display: inline-block ;
  border: none ;
  border-radius: 3px ;
  font-size: 12px ;
  width: 60px ;
  padding: 2px 5px 1px 20px;
  background: rgba(255,255,255,.5);
  color: rgba(0,0,0,.8);
  font-family: "Source Sans Pro",Verdana ;
  margin-right: 20px ;
}
#debug-watch-bar i {
  margin-right: 10px ;
}
#debug-watch-bar i.fa-filter {
  color: rgba(0,0,0,.25) ;
  font-size: 12px ;
  position: relative ;
  right: -25px ;
}
#debug-watch-bar i.type {
  margin-right: 10px ;
  cursor: pointer ;
}
#debug-watch-bar i.type.filtered {
  color: rgba(255,255,255,.3);
}


#debug-watch-bar input:focus {
  outline: none ;
}

#debug-watch-content {
  position: absolute ;
  overflow: auto ;
  top: 42px ;
  left: 0 ;
  bottom: 0 ;
  right: 0px ;
}

#debug-timemachine-bar {
  position: absolute ;
  display: none ;
  top: 2px ;
  left: 0px ;
  right: 0px ;
  box-sizing: border-box ;
  height: 38px ;
  background: hsl(180,50%,40%);
  color: rgba(255,255,255,.8) ;
  white-space: nowrap;
  overflow: hidden ;
  padding: 6px 20px ;
  font-size: 16px ;
}
#debug-timemachine-bar * {
  vertical-align: middle ;
}
#debug-timemachine-bar i {
  margin-right: 10px ;
}

#debug-timemachine-buttons i {
  margin: 0px 2px ;
  padding: 5px ;
  border-radius: 5px ;
  font-size: 16px ;
  cursor: pointer ;
}
#debug-timemachine-bar i.rec {
  padding: 7px ;
  font-size: 12px ;
  color: hsl(0,30%,70%);
  background: rgba(0,0,0,.1);
  border-radius: 5px ;
  margin: 0 5px 0 20px ;
  cursor: pointer ;
}
#debug-timemachine-bar i.rec:hover {
  background: rgba(0,0,0,.2);
}

#debug-timemachine-bar i.recording {
  padding: 7px ;
  font-size: 12px ;
  color: hsl(0,100%,70%);
  background: rgba(0,0,0,.5);
  border-radius: 5px ;
  margin: 0 5px 0 20px ;
}
#debug-timemachine-bar i.looping {
  background: rgba(0,0,0,.25);
}

#debug-timemachine-buttons i:hover {
  background: rgba(0,0,0,.2) ;
}

#debug-timemachine-recording {
  white-space: nowrap ;
  display: inline-block ;
}

#debug-timemachine-buttons {
  margin: 0 0 0 20px ;
  white-space: nowrap ;
  display: inline-block ;
}

#debug-timemachine-recorder-trail {
  position: relative ;
  display: inline-block ;
  width: 160px ;
  height: 20px ;
  border-radius: 3px ;
  background: rgba(0,0,0,.1) ;
  box-sizing: border-box;
  vertical-align: middle ;
  margin-left: 5px ;
  cursor: pointer ;
}

#debug-timemachine-recorder-head {
  position: absolute ;
  left: -5px ;
  top: 0px ;
  width: 10px ;
  height: 20px ;
  border-radius: 3px ;
  box-shadow: 0 0 3px #000 ;
  background: #EEE ;
  box-sizing: border-box;
}

.assets-left {
  position: absolute ;
  left: 0 ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

.assets-right {
  position: absolute ;
  right: 0px ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

.assets-drop {
  position: absolute ;
  bottom: 200px ;
  left: 40px ;
  right: 40px ;
  text-align: center;
  color: rgba(255,255,255,.2);
  z-index: -1
}

.assets-drop i {
  font-size: 100px ;
  margin-bottom: 30px ;
}
.assets-drop div {
  font-size: 20px ;
}

.assets-bar {
  position: absolute ;
  top: 0 ;
  height: 26px ;
  left: 0 ;
  right: 0 ;
  background: hsl(200,30%,30%) ;
  padding: 7px 10px 7px 2px ;
  vertical-align: middle;
  white-space: nowrap;
}

.create-asset-button {
  display: inline-block ;
  padding: 4px 8px ;
  background: hsl(160,50%,40%);
  border-radius: 3px ;
  font-size: 14px ;
  cursor: pointer ;
  color: #FFF ;
  text-align: center ;
}
.create-asset-button i {
  margin-right: 5px ;
}
.create-folder-button {
  margin-left: 10px ;
  padding: 5px ;
  font-size: 16px ;
  background: hsl(0,30%,50%) ;
  border-radius: 3px ;
  cursor: pointer ;
}

.assetlist {
  position: absolute;
  background: rgba(0,0,0,.25) ;
  left: 2px ;
  top: 40px ;
  bottom: 0px ;
  right: 2px ;
  overflow: auto ;
  text-align: center ;
  line-height: 0 ;
  padding-top: 0px ;
  padding-bottom: 10px ;
}

.assetlist.dragover {
  background: hsla(0,50%,50%,.2) ;
}

.assetlist .folder {
  margin-top: 2px ;
}

.assetlist .folder-title {
  line-height: normal ;
  background: hsl(200,30%,30%) ;
  text-align: left ;
  cursor: pointer ;
  padding: 6px 10px ;
  font-family: Ubuntu,sans-serif;
  font-size: 14px ;
  color: rgba(255,255,255,.8);
  white-space: nowrap ;
  border-radius: 3px ;
}

.assetlist .folder-title:hover {
  background: hsl(200,30%,40%) ;
}

.assetlist .folder.selected > .folder-title {
  background: hsl(0,30%,50%) ;
}

.assetlist .folder-title i {
  color: rgba(255,255,255,.5) ;
  margin-right: 5px ;
  font-size: 16px ;
  margin-top: 1px ;
}

.assetlist .folder-title .trash {
  float: right;
  display: none ;
}

.assetlist .folder.selected > .folder-title .trash {
  display: inline-block ;
}

.assetlist .folder-title .pencil {
  display: none ;
  margin-left: 5px ;
}

.assetlist .folder.selected > .folder-title .pencil {
  display: inline-block ;
}

.assetlist .folder-title input {
  border: none ;
  border-radius: 3px ;
  font-size: 14px ;
  width: 100px ;
  padding: 2px 5px ;
  background: rgba(0,0,0,.5);
  color: rgba(255,255,255,.8);
  margin: -2px ;
  font-family: Ubuntu,sans-serif ;
}

.assetlist .folder-title input:focus {
  outline: none ;
}


.assetlist .folder-content {
  border-left: solid 4px rgba(255,255,255,.1) ;
  background: rgba(255,255,255,.05) ;
  padding: 2px 0px 5px 3px;
  margin-bottom: 10px ;
  margin-top: 2px ;
  display: none ;
}

.assetlist .folder.selected > .folder-content {
/*  border-left: solid 4px hsla(0,50%,50%,.4) ;
  border-bottom: solid 4px hsla(0,50%,50%,.4) ;*/
  background: hsla(0,50%,50%,.2) ;
}

.assetlist .folder.open > .folder-content {
  display: block ;
}

.assetlist .folder > .folder-title i.caret {
  margin-right: 9px ;
}
.assetlist .folder.open > .folder-title i.caret {
  margin-right: 5px ;
  position: relative;
  right: 3px ;
}

.assetlist .folder > .folder-title i.folder {
  margin-right: 5px ;
}
.assetlist .folder.open > .folder-title i.folder {
  margin-right: 3px ;
}

.assetlist .folder > .folder-title i.caret:before {
  content: "\f0da";
}

.assetlist .folder.open > .folder-title i.caret:before {
  content: "\f0d7";
}

.assetlist .folder > .folder-title i.folder:before {
  content: "\f07b" ;
}

.assetlist .folder.open > .folder-title i.folder:before {
  content: "\f07c" ;
}

.asseteditor {
  position: absolute;
  top: 40px ;
  bottom: 0 ;
  left: 220px ;
  right: 0 ;
}

.asset-box {
  position: relative ;
  cursor: pointer ;
  display: inline-block ;
  margin: 3px 1px 1px 1px;
  width: 64px ;
  height: 84px ;
  font-size: 12px ;
  background: hsl(200,20%,20%);
  box-shadow: 0 0 4px 0px #000;
  border-radius: 4px ;
  overflow: hidden ;
}
.asset-box.selected {
  margin: 2px 0 0 0;
  border: solid 1px rgba(255,255,255,.5) ;
  background: hsl(200,30%,30%);
}
.asset-box img {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
}
.asset-box .asset-box-name {
  position: absolute ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  height: 18px ;
  line-height: normal ;
  padding: 0 4px ;
}

.asset-box .active-user {
  display: none ;
  position: absolute ;
  bottom: 20px ;
  left: 4px ;
  font-size: 8px ;
  color: #FFF ;
  background: hsl(0,50%,50%);
  padding: 4px ;
  border-radius: 8px ;
}

.asset-box-map {
  width: 128px ;
  height: 116px ;
}
.asset-box-sound {
  width: 96px ;
  height: 84px ;
}
.asset-box-music {
  width: 192px ;
  height: 84px ;
}
.asset-box-asset {
  width: 128px ;
  height: 116px ;
}

.asset-box-source {
  height: auto;
  padding: 6px 10px ;
  text-align: left;
  display: block;
  font-size: 14px;
  width: auto;
  white-space: nowrap;
  border-radius: 0 ;
  background: none ;
  box-shadow: none ;
}
.asset-box-source:hover {
  background: rgba(255,255,255,.1);
}
.asset-box-source.selected {
  border: none ;
  background: rgba(255,255,255,.2);
  margin: 3px 1px 1px 1px ;
}
.asset-box-source .asset-box-name {
  position: static ;
}

.asset-box-source .asset-box-name i {
  margin-right: 5px ;
  font-size: 16px;
  color: rgba(255,255,255,.5);
}

.asset-box-source .active-user {
    bottom: 3px;
}

.assetbar {
    position: absolute;
    padding: 0px;
    right: 0;
    top: 40px;
    bottom: 0;
    width: 220px;
    background: rgba(0,0,0,.25);
    /*border-left: solid 4px rgba(255,255,255,.2);*/
}

.assetbar h3 {
  margin: 5px 0 0 0 ;
  font-size: 14px;
}

.assetinfo {
  position: absolute;
  right: 0px ;
  left: 2px ;
  top: 0px ;
  height: 40px;
  padding-left: 10px ;
  background: hsl(200,30%,30%);
  white-space: nowrap;
}

.assetinfo * {
  display: inline-block ;
}
.assetinfo .buttons {
  display: inline-block ;
  margin-left: 40px ;
}
.assetinfo .buttons div {
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
}
.assetinfo .buttons div:hover {
  background: hsl(160,50%,60%);
}
.assetinfo .buttons div.delete {
  background: hsl(0,50%,50%);
}
.assetinfo .buttons div.delete:hover {
  background: hsl(0,50%,60%);
}

.assetinfo input {
  border: none ;
  border-radius: 3px ;
  margin:6px 3px 0px 0px ;
  font-size: 14px ;
  padding: 5px ;
  background: rgba(255,255,255,.4);
}
.assetinfo input:focus {
  outline: none ;
  background: rgba(255,255,255,.6);
}

.assetinfo .validate-button-container {
  display: inline-block ;
  width: 100px ;
  margin-left: 7px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
  height: 30px ;
  vertical-align: middle ;
}
.assetinfo .validate-button {
  display: inline-block ;
  padding: 5px 10px ;
  font-size: 14px ;
  border-radius: 3px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  cursor: pointer ;
  white-space: nowrap;
}

#asset-viewer {
  position: absolute ;
  top: 40px ;
  left: 0 ;
  right: 0 ;
  bottom: 40px ;
}

#font-asset-viewer {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  padding: 40px ;
  font-size: 2em ;
  color: #CCC ;
  overflow: hidden ;
}
#font-asset-viewer h1 {
  font-family: inherit ;
  color: #FFF ;
  font-size: 2em ;
}

#model-asset-viewer {
  position: absolute ;
  top: 2px ;
  left: 2px ;
  right: 0px ;
  bottom: 0px ;
  overflow: hidden ;
}
#model-asset-viewer canvas {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
}

#text-asset-viewer {
  position: absolute ;
  top: 2px ;
  left: 2px ;
  right: 0px ;
  bottom: 0px ;
  overflow: hidden ;
}
#image-asset-viewer {
  position: absolute ;
  top: 2px ;
  left: 2px ;
  right: 0px ;
  bottom: 0px ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


#asset-load-code {
  position: absolute ;
  left: 0 ;
  right: 0 ;
  bottom: 0px ;
  height: 20px ;
  padding: 10px ;
  white-space: nowrap ;
  display: none ;
}
#asset-load-code div {
  display: inline-block ;
  position: relative ;
}
#asset-load-code i {
  position: absolute ;
  left: 10px ;
  top: 4px ;
  color: rgba(0,0,0,.5);
  cursor: pointer ;
}

#asset-load-code select {
  font-size: 14px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  border: none;
  padding: 2px;
  border-radius: 5px ;
  margin: 0 10px 0 0;
  font-family: "Source Sans Pro",Verdana ;
}

#asset-load-code select option {
  background-color: hsl(200,50%,10%);
  padding: 2px ;
}

#asset-load-code select:focus {
  outline: none ;
  background: rgba(255,255,255,.4);
}

#asset-load-code input {
  text-align: left;
  background: hsla(200,40%,80%,.8);
  box-sizing: border-box;
  width: 500px ;
  border-radius: 5px;
  border: none ;
  padding: 5px 5px 5px 30px ;
  font-family: 'Ubuntu Mono';
}
#asset-load-code input:focus {
  border: none ;
  outline: none ;
  background: hsla(200,40%,80%,1);
}
#asset-load-code input::selection {
  background: rgba(0,0,0,.3);
}



.asset-code-tip {
  display: inline-block ;
  white-space: nowrap ;
  margin-left: 20px ;
}
.asset-code-tip div {
  display: inline-block ;
  position: relative ;
}
.asset-code-tip i {
  position: absolute ;
  left: 10px ;
  top: 4px ;
  color: rgba(0,0,0,.5);
  cursor: pointer ;
}

.asset-code-tip select {
  font-size: 14px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  border: none;
  padding: 2px;
  border-radius: 5px ;
  margin: 0 10px 0 0;
  font-family: "Source Sans Pro",Verdana ;
}

.asset-code-tip select option {
  background-color: hsl(200,50%,10%);
  padding: 2px ;
}

.asset-code-tip select:focus {
  outline: none ;
  background: rgba(255,255,255,.4);
}

.asset-code-tip input {
  text-align: left;
  background: hsla(200,40%,80%,.8);
  box-sizing: border-box;
  width: 500px ;
  border-radius: 5px;
  border: none ;
  padding: 5px 5px 5px 30px ;
  font-family: 'Ubuntu Mono';
}
.asset-code-tip input:focus {
  border: none ;
  outline: none ;
  background: hsla(200,40%,80%,1);
}
.asset-code-tip input::selection {
  background: rgba(0,0,0,.3);
}

.sprites-left {
  position: absolute ;
  left: 0 ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

.sprites-right {
  position: absolute ;
  right: 0px ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

.sprites-right.vertical-split .spriteinfo {
  border-top: solid 2px rgba(0,0,0,.5) ;
}

.sprites-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
}

.spritelist {
  position: absolute;
  background: rgba(0,0,0,.25) ;
  left: 2px ;
  right: 2px ;
  top: 2px ;
  bottom: 42px ;
  text-align: center ;
  line-height: 0 ;
  padding-top: 10px ;
  padding-bottom: 10px ;
  overflow-x: hidden ;
  overflow-y: auto ;
}
#create-sprite-button {
  position: absolute ;
  bottom: 0px ;
  height: 40px;
  left: 0 ;
  right: 0 ;
  padding: 0px 30px ;
  background: hsl(160,50%,40%);
  font-size: 18px ;
  cursor: pointer ;
  color: #FFF ;
  z-index: 1 ;
  box-shadow: 0 -10px 20px #000;
  line-height: 40px ;
  text-align: center ;
}
#create-sprite-button i {
  margin-right: 0px ;
}
#create-sprite-button span {
  white-space: nowrap ;
  margin-left: 10px ;
}
.sprite-box {
  position: relative ;
  cursor: pointer ;
  display: inline-block ;
  margin: 1px ;
  width: 64px ;
  height: 84px ;
  font-size: 12px ;
  padding: 4px 0 ;
  background: hsl(200,20%,20%);
  box-shadow: 0 0 4px 0px #000;
  border-radius: 4px ;
  overflow: hidden ;
}
.sprite-box.selected {
  margin: 0px;
  border: solid 1px rgba(255,255,255,.5) ;
  background: rgba(255,255,255,.2);
}

.sprite-box .icon-box {
  height: 64px ;
  width: 64px ;
  overflow: hidden ;
  margin-bottom: 10px ;
}
/*
.sprite-box img {
  width: 100% ;
  image-rendering: pixelated;
}*/
.sprite-box .active-user {
  display: none ;
  position: absolute ;
  bottom: 20px ;
  left: 4px ;
  font-size: 8px ;
  color: #FFF ;
  background: hsl(0,50%,50%);
  padding: 4px ;
  border-radius: 8px ;
}

.spritebar {
    position: absolute;
    padding: 0px;
    right: 0;
    top: 40px;
    bottom: 0;
    width: 220px;
    background: rgba(0,0,0,.25);
    /*border-left: solid 4px rgba(255,255,255,.2);*/
}

.spritebar h3 {
  margin: 5px 0 0 0 ;
  font-size: 14px;
}

.spritetools {
  position: absolute ;
  left: 0 ;
  top: 0 ;
  bottom: 0 ;
  width: 44px ;
}

.spritetooloptions {
  position: absolute ;
  left: 58px ;
  top: 0 ;
  /* Space for spritehelpers */
  bottom: 60px ;
  right: 0 ;
  padding: 8px ;
  overflow-x: hidden ;
  overflow-y: auto ;
}

.spritetooloptions input {
  margin-bottom: 20px ;
}

.spritetooloptions label {
  font-size: 14px ;
}

.spritetooloptions .toolbox {
  text-align: center ;
}

.spritetoolbutton {
  display: inline-block ;
  margin: 4px 0px 0px 4px ;
  border-radius: 5px ;
  background: rgba(255,255,255,.1);
  padding: 10px 2px 5px 2px;
  line-height: 16px ;
  font-size: 10px ;
  text-align: center ;
  width: 46px ;
  cursor: pointer ;
}

.spritetoolbutton:hover {
  background: rgba(255,255,255,.2);
}

.spritetoolbutton i {
  background: none ;
  font-size: 18px ;
}

.spritetoolbutton.selected , .spritetoolbutton:active {
  background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.8);
}

.spritetooloptions .toolbox .spritetoolbutton.selected {
  background: hsl(200,50%,50%);
  color: #FFF;
}

.spritetoolbutton.transform {
  display: block ;
  width: auto ;
}


.spritebar input {
  width: 100% ;
}
.spriteinfo {
  position: absolute;
  right: 0px ;
  left: 2px ;
  top: 0px ;
  height: 40px;
  padding-left: 10px ;
  background: hsl(200,30%,30%);
  white-space: nowrap;
}
.spriteinfo * {
  display: inline-block ;
}
.spriteinfo .buttons {
  display: inline-block ;
  margin-left: 40px ;
}
.spriteinfo .buttons div {
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
}
.spriteinfo .buttons div:hover {
  background: hsl(160,50%,60%);
}
.spriteinfo .buttons div#delete-sprite {
  background: hsl(0,50%,50%);
}
.spriteinfo .buttons div#delete-sprite:hover {
  background: hsl(0,50%,60%);
}

.spriteinfo input {
  border: none ;
  border-radius: 3px ;
  margin:6px 3px 0px 0px ;
  font-size: 14px ;
  padding: 5px ;
  background: rgba(255,255,255,.4);
}
.spriteinfo input:focus {
  outline: none ;
  background: rgba(255,255,255,.6);
}
.spriteinfo input#sprite-width,.spriteinfo input#sprite-height {
  width: 40px ;
  text-align: center ;
  margin: 0 3px ;
}
.spriteinfo input#sprite-width {
  margin-left: 40px ;
}
.spriteinfo .validate-button-container {
  display: inline-block ;
  width: 100px ;
  margin-left: 7px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
  height: 30px ;
  vertical-align: middle ;
}
.spriteinfo .validate-button {
  display: inline-block ;
  padding: 5px 10px ;
  font-size: 14px ;
  border-radius: 3px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  cursor: pointer ;
  white-space: nowrap;
}
#spriteeditorcontainer {
  position: absolute ;
  right: 222px ;
  left: 2px ;
  top: 42px ;
  bottom: 162px ;
}
.spriteeditor {
  position: absolute;
  right: 0 ;
  left: 0 ;
  top: 0 ;
  bottom: 0 ;
  text-align: center ;
  overflow: hidden ;
  line-height: 0px ;
  /*border-left: solid 4px rgba(255,255,255,.2);*/
}
.spriteeditor:focus {
  outline: none ;
}
#sprite-zoom {
  position: absolute ;
  right: 12px ;
  bottom: 12px ;
}
#sprite-zoom i {
  margin-top: 8px ;
  padding: 8px ;
  border-radius: 20px ;
  font-size: 18px ;
  background: hsl(200,30%,30%);
  box-shadow: 0 0 8px #000;
  color: rgba(255,255,255,.8) ;
  cursor: pointer ;
}
#sprite-zoom i:hover {
  background: hsl(200,50%,50%);
  color: #FFF ;
}
#sprite-grab-info-container {
  position: absolute ;
  bottom: 12px ;
  left: 0 ;
  right: 0 ;
  text-align: center ;
}
#sprite-grab-info {
  display: inline-block ;
  border-radius: 20px ;
  padding: 5px 10px ;
  background: hsl(200,30%,30%);
  color: rgba(255,255,255,.8) ;
  box-shadow: 0 0 8px #000 ;
  display: none ;
}
#sprite-grab-info.active {
  background: hsl(200,50%,50%);
  color: #FFF ;
}
#sprite-grab-info i {
  margin-right: 10px ;
}
#spriteeditorcontainer.expanded {
  bottom: 42px ;
}
#sprite-editor-locked {
  position: absolute ;
  right: 264px ;
  left: 260px ;
  top: 60px ;
  padding: 20px ;
  z-index: 100 ;
  height: 20px ;
  transition-duration: .5s ;
  transition-property: left ;
  border-radius: 10px ;
  color: #FFF ;
  font-size: 16px ;
  display: none ;
}
#sprite-editor-locked i {
  margin-right: 5px ;
}
.colorpicker {
/*  margin-top: 20px;*/
}
.colorpicker canvas {
  width: 100% ;
  cursor: pointer ;
}
.spriteeditor canvas {
  box-shadow: 0 0 20px #000 ;
  /*border: solid 1px rgba(255,255,255,.2);
  border-radius: 4px ;*/
  margin: 40px ;
  display: none ;
  cursor: crosshair ;
}
.spriteeditor canvas.colorpicker {
  cursor: url( '/img/eyedropper.svg' ) 0 24, pointer;
}

.spritehelpers {
  position: absolute ;
  bottom: 0px ;
  left: 0px ;
  right: 0px ;
  height: 60px ;
}

.spritehelper {
  display: inline-block ;
  margin: 4px 0px 0px 4px ;
  border-radius: 5px ;
  background: rgba(255,255,255,.1);
  padding: 10px 2px 5px 2px;
  line-height: 16px ;
  font-size: 10px ;
  text-align: center ;
  width: 64px ;
  cursor: pointer ;
}

.spritehelper:hover {
  background: rgba(255,255,255,.2);
}

.spritehelper i {
  background: none ;
  font-size: 18px ;
}

.spritehelper.selected {
  background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.8);
}
#colorpicker-group {
  text-align: center ;
}
.colortext {
  margin-top: 10px ;
  position: relative ;
  color: rgba(0,0,0,.7) ;
}
.colortext input {
  text-align: center;
  background: hsla(200,40%,80%,.8);
  box-sizing: border-box;
  border-radius: 5px;
  border: none ;
  padding: 5px 5px 5px 10px ;
  font-family: 'Ubuntu Mono';
  width: 145px ;
}
.colortext input:focus {
  border: none ;
  outline: none ;
  background: hsla(200,40%,80%,1);
}
.colortext input::selection {
  background: rgba(0,0,0,.3);
}
.colortext i {
  position: absolute ;
  left: 4px ;
  top: 5px ;
  font-size: 14px ;
  cursor: pointer ;
}

#colorpicker-group .spritetoolbutton {
  width: 100% ;
  box-sizing: border-box ;
  margin: 2px 0 ;
}
#sprite-animation-panel {
  position: absolute;
  left: 2px ;
  right: 222px ;
  bottom: 40px ;
  height: 120px ;
  background: hsl(200,40%,20%);
  text-align: center ;
  overflow: hidden ;
  transition-property: bottom;
  transition-duration: .5s;
}
#sprite-animation-panel.collapsed {
  bottom: -120px ;
}
#sprite-animation-title {
  position: absolute;
  left: 10px;
  padding: 7px 10px;
  bottom: 150px;
  height: 14px;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  border-radius: 10px;
  background: linear-gradient(180deg,hsl(200,50%,50%) 0%,hsl(200,50%,50%) 10%,hsl(200,40%,20%) 20%) ;
  transition-property: bottom,background,padding;
  transition-duration: .5s;
  z-index: 1;
  display: block;
  box-shadow: 0 -1px 1px #000;
}
#sprite-animation-title.collapsed {
  bottom: 50px ;
  background: hsl(200,50%,50%);
  padding: 3px 10px;
  box-shadow: 0 0 1px #000;
}
#sprite-animation-title i {
  margin-right: 5px
}
#sprite-animation-panel .button {
  color: #FFF;
  margin: 28px 25px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: 0px;
  bottom: 0px;
  vertical-align: top;
  font-size: 24px;
  cursor: pointer;
}
#sprite-animation-steps {
  position: absolute;
  right: 140px ;
  left: 0px ;
  padding: 18px 10px 0 10px;
  top: 0px ;
  bottom: 0px ;
  text-align: left ;
  font-size: 12px ;
  overflow: auto ;
  white-space: nowrap ;
  line-height: 0 ;
}
#sprite-animation-list {
  white-space: nowrap ;
  line-height: 0 ;
  display: inline-block ;
}
.sprite-animation-frame {
  position: relative ;
  margin: 2px 2px ;
  line-height: 0 ;
  display: inline-block ;
}
.sprite-animation-frame canvas {
  background: hsla(200,0%,50%,.5);
}
.sprite-animation-frame i {
  position: absolute ;
  padding: 5px ;
  border-radius: 3px ;
  color: #FFF ;
  font-size: 18px ;
  right: 0 ;
  bottom: 0 ;
  cursor: pointer ;
  display: none ;
  text-shadow: 0 0 2px #000 ;
}
.sprite-animation-frame.selected {
  border: solid 2px rgba(255,255,255,.8);
  margin: 0 ;
}
.sprite-animation-frame:hover {
  border: solid 2px rgba(255,255,255,.5);
  margin: 0 ;
}
.sprite-animation-frame:hover i {
  display: block ;
}
.sprite-animation-frame .remove {
  top: 0 ;
  bottom: unset ;
}
.sprite-animation-frame .clone {
  top: 0 ;
  right: unset ;
  bottom: unset ;
  left: 0 ;
}
.sprite-animation-frame .moveleft {
  right: unset ;
  left: 0 ;
}
.sprite-animation-frame span {
  position: absolute ;
  color: #FFF ;
  text-shadow: 0.5px 0.5px 2px #000;
  font-size: 14px ;
  top: 10px ;
  left: 5px ;
  font-family: Ubuntu ;
}
.sprite-animation-frame:hover span {
  display: none ;
}

#sprite-animation-preview {
  position: absolute ;
  top: 10px ;
  right: 0 ;
  bottom: 0 ;
  width: 110px ;
}
#sprite-animation-preview input {
  width: 80px ;
}

.selection-hint {
  margin: 10px 0 ;
  border-radius: 5px ;
  background: rgba(255,255,255,.1) ;
  padding: 5px 10px ;
  font-size: 14px ;
}
.selection-hint i {
  margin-left: 5px ;
  margin-right: 10px ;
}
.selection-hint span {
  background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.8);
  padding: 2px 5px ;
  border-radius: 3px ;
}
.selection-hint.active {
  background: hsl(200,50%,40%);
}
.selection-operation {
  margin: 10px 0 ;
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  padding: 10px ;
  font-size: 14px ;
  cursor: pointer ;
  text-align: center ;
}
.selection-operation:hover {
  background: hsl(160,50%,50%);
}
.selection-operation i.fa {
  font-size: 14px ;
  margin: 0 3px 10px 3px;
  vertical-align: middle ;
}
.selection-operation i.fa-th {
  font-size: 24px ;
  margin-bottom: 10px ;
}
.selection-operation i.fa-play {
  font-size: 14px ;
  margin-bottom: 10px ;
  color: hsl(160,50%,40%);
  background: #FFF ;
  border-radius: 3px ;
  padding: 5px 10px ;
}
.selection-actions {
  text-align: center ;
}

.auto-palette {
  padding: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,.1);
    margin-top: 10px;
}

.auto-palette-title {
  margin-bottom: 5px ;
  font-size: 14px ;
  text-align: left ;
}

#auto-palette-lock {
  border-radius: 20px ;
  margin-left: 5px ;
  padding: 5px ;
  font-size: 10px ;
  background: hsl(160,50%,50%) ;
  color: #FFF ;
  cursor: pointer ;
}
#auto-palette-lock.locked {
  background: hsl(0,50%,50%) ;
}
#auto-palette-lock:hover {
  box-shadow: 0 0 4px #FFF ;
}

#auto-palette-list {
  line-height: 0 ;
  text-align: left ;
}

#auto-palette-list div {
  border-radius: 3px ;
  margin: 1px ;
  width: 15px ;
  height: 15px ;
  box-shadow: 0 0 2px #444 ;
  display: inline-block ;
  cursor: pointer ;
}

#auto-palette-list div:hover {
  box-shadow: 0 0 2px #FFF ;
}

#auto-palette-list div.selected {
  border-radius: 3px ;
  margin: 0px ;
  border: solid 1px #FFF ;
  box-shadow: 0 0 2px #000 inset ;
  display: inline-block ;
  cursor: pointer ;
}

#spriteeditor-bottombar {
  position: absolute;
  right: 220px ;
  left: 0px ;
  border-left: solid 2px #000 ;
  border-right: solid 2px #000 ;
  bottom: 0 ;
  height: 38px ;
  background: hsl(200,30%,30%);
  text-align: left ;
  padding: 0 10px ;
  white-space: nowrap ;
  overflow: hidden ;
}

.sounds-right {
  position: absolute ;
  right: 0px ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

#sample-editor {
  position: absolute ;
  top: 40px;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  background: #181C20 ;
}

#sample-editor-bg {
  position: absolute ;
  top: 0;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

#sample-editor-content {
  position: absolute ;
  top: 0;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  pointer-events:none ;
}
.synth {
  font-family: Ubuntu ;
}

.synth h1 {
  font-size: 30px ;
  margin-bottom: 10px ;
}

.synth .toolbar {
  background: rgba(0,0,0,.1) ;
  height: 40px ;
  margin-bottom: 10px ;
}

.synth .modules {
  white-space: nowrap ;
  line-height: 0 ;
}

#synth .content {
  position: static ;
}

.synth .module {
  margin: 0px 5px 5px 0 ;
  display: inline-block ;
  height: 175px ;
  background: rgba(255,255,255,.1);
  overflow: hidden ;
  line-height: 12px ;
}

.synth .module-content {
  padding: 5px ;
}

.synth .separator {
  position: relative;
      display: inline-block;
      width: 40px;
      height: 220px;
      border-radius: 0px;
      overflow: hidden;
      /*background: rgba(255,255,255,.2);*/
      padding: 2px;
      border-radius: 10px;
      display: none ;
}

.synth .module .inline {
  display: inline-block ;
  vertical-align: top ;
  text-align: center;
}
.synth .module .center {
  text-align: center ;
}


.synth .module .label {
  padding: 6px ;
  font-size: 11px ;
  color: rgba(255,255,255,.7) ;
  border-bottom: solid 2px rgba(0,0,0,.5);
  text-transform: uppercase;
  cursor: pointer ;
}
.synth .module .label i {
  color: hsl(20,100%,70%);
  margin-right: 5px ;
}

.synth .layers {
  background: rgba(255,255,255,.1) ;
  height: 40px ;
  margin-top: 10px ;
}

.synth .layers div {
  display: inline-block ;
}

.synth .module .knobline {
}

.synth .module .labelledknob {
  display: inline-block ;
  text-align: center ;
  margin: 5px ;
}
.synth .module .knoblabel {
  font-size: 9px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 3px;
  color: rgba(255,255,255,.7);
}
.synth .knob {
  cursor: pointer ;
  display: block ;
}

.synth .module .labelledslider {
  display: inline-block ;
  text-align: center ;
  margin: 5px ;
}

.synth .module .buttongroup {
  margin-top: 5px ;
}
.synth .module .button {
  width: 30px ;
  height: 15px ;
  box-shadow: 0 0 3px #000 ;
  background: radial-gradient(#EEE,#AAA);
  display: block ;
  border-radius: 5px ;
  margin: 5px 5px ;
  cursor: pointer ;
}

.synth .module .button.selected {
  box-shadow: 0 0 10px hsl(30,100%,80%) ;
  background: radial-gradient(hsl(30,100%,85%),hsl(30,100%,70%));
}

.synth .module .selector {
  margin: 5px ;
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 0 3px #000;
  display: inline-block ;
  text-align: center ;
}

.synth .module .selector i {
  display: inline-block ;
  font-size: 16px;
  padding: 2px 6.5px;
  width: 7px;
  height: 16px;
  vertical-align: middle;
  color: #000 ;
  background: radial-gradient(#EEE,#AAA) ;
  cursor: pointer ;
}
.synth .module .selector i:active {
  background: radial-gradient(hsl(30,100%,85%),hsl(30,100%,70%)) ;
  box-shadow: 0 0 10px hsl(30,100%,80%);
}

.synth .module .selector .screen {
  display: inline-block ;
  width: 60px ;
  height: 14px ;
  background: radial-gradient(hsl(200,60%,20%),hsl(200,30%,10%)) ;
  vertical-align: middle ;
  color: hsl(200,100%,75%);
  text-shadow: 0 0 3px hsl(200,100%,50%);
  font-size: 9px;
  line-height: normal;
  text-align: center;
  padding-top: 6px;
  white-space: nowrap;
}

.synth .separator #combine-button {
  position: absolute;
      left: 2px;
      top: 85px;
      width: 40px;
      height: 40px;
      /* box-shadow: 0 0 10px hsl(30,100%,80%); */
      background: rgba(0,0,0,.5);
      display: block;
      border-radius: 40px;
      cursor: pointer;
      color: hsl(200,100%,80%);
      text-shadow: 0 0 5px hsl(200,100%,60%);
      font-size: 31px;
      padding: 0px;
      text-align: center;
}

.synth .separator #combine-button.rotate {
  transform: rotate(45deg);
}

#synth-window {
  width: auto ;
  height: auto ;
  border-radius: 10px ;
  box-shadow: 0 0 20px #000, 0 0 2px 0px #000 ;
  background: hsl(200,50%,10%);
  z-index: 10 ;
  display: block ;
  overflow: hidden ;
}
#synth-window .titlebar {
  position: static ;
    height: 20px;
    padding: 10px 10px;
    background: rgba(0,0,0,.1);
    color: #FFF;
    font-size: 16px;
    cursor: move;
}
#synth-window .titlebar .icon {
  display: inline-block ;
  margin-right: 10px ;
}
#synth-window .titlebar .title {
  display: inline-block ;
}
#synth-window .titlebar .minify {
  background: rgba(0,0,0,.5);
  border-radius: 20px ;
  padding: 6px 7px ;
  position: absolute ;
  right: 4px ;
  top: 4px ;
  text-align: center ;
  cursor: pointer ;
  font-size: 20px ;
}
#synth-window .navigation {
  position: absolute;
  bottom: 0 ;
  height: 40px ;
  left: 0 ;
  right: 0 ;
  background: rgba(0,0,0,.1);
}

#synth-window .navigation i.resize {
  padding: 12px 10px ;
  text-align: center ;
  position: absolute ;
  right: 0px ;
  width: 20px ;
  transform: rotateZ(-45deg);
  color: rgba(0,0,0,.5) ;
  cursor: nwse-resize ;
}

#synth-window .content {
  position: static ;
  padding: 5px 0 0 10px;
  overflow: auto ;
  font-size: 18px;
  font-family: Helvetica,sans-serif;
}

#synth-window .content::-webkit-scrollbar-track {
  background: rgba(0,0,0,.15);
  border-radius: 5px;
  margin: 4px 2px;
}

#synth-window .content::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.25);
  border-radius: 5px;
  margin: 4px 1px;
}

.music-right {
  position: absolute ;
  right: 0px ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

.music-splitbar {
  background: hsl(200,7%,28%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
}


.musiclist {
  position: absolute;
  background: rgba(0,0,0,.25) ;
  left: 0 ;
  top: 40px ;
  bottom: 40px ;
  right: 0 ;
  text-align: center ;
  line-height: 0 ;
  padding-top: 10px ;
  padding-bottom: 10px ;
  overflow-x: hidden ;
  overflow-y: auto ;
}

#create-music-button {
  position: absolute ;
  bottom: 0px ;
  height: 40px;
  left: 0 ;
  right: 0 ;
  padding: 0px 30px ;
  background: hsl(160,50%,40%);
  font-size: 18px ;
  cursor: pointer ;
  color: #FFF ;
  z-index: 1 ;
  box-shadow: 0 -10px 20px #000;
  line-height: 40px ;
  text-align: center ;
}
#create-music-button i {
  margin-right: 0px ;
}
#create-music-button span {
  white-space: nowrap ;
  margin-left: 10px ;
}

#music-editor {
  position: absolute ;
  top: 40px;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  background: #181C20 ;
}

#music-editor-bg {
  position: absolute ;
  top: 0;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

#music-editor-content {
  position: absolute ;
  top: 0;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  pointer-events:none ;
}

#music-editor p, #sample-editor p {
  color: rgba(255,255,255,.75) ;
  margin: 10px 40px ;
  font-size: 18px ;
}

#daw-transportbar {
  position: absolute ;
  top: 0px ;
  left: 0px ;
  right: 0px ;
  height: 60px ;
}

#daw-container {
  position: absolute ;
  top: 60px ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
}

#daw-tracks {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  right: 0 ;
  height: 500px ;
  overflow-y: auto ;
}

#daw-splitbar {
  background: hsl(200,7%,28%);
  position: absolute ;
  left: 0 ;
  top: 400px ;
  right: 0 ;
  height: 10px ;
  cursor: ns-resize;
  z-index: 2 ;
}

#daw-pianoroll {
  position: absolute ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  height: 100px ;
}

#daw-track-headers {
  width: 200px ;
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
}

#daw-track-content {
  position:absolute ;
  left: 200px ;
  top: 0 ;
  right: 0 ;
  overflow-x: auto ;
  overflow-y: hidden ;
}

.daw-track-header {
  border: solid 1px #FFF ;
  width: 190px ;
  height: 60px ;
}

.daw-track {
  border: solid 1px #FFF ;
  width: 2000px ;
  height: 60.0px ;
}

.maps-left {
  position: absolute ;
  left: 0 ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

.maps-right {
  position: absolute ;
  right: 0px ;
  width: 400px ;
  top: 0 ;
  bottom: 0 ;
  overflow: hidden ;
}

.maps-right.vertical-split .mapinfo {
  border-top: solid 2px rgba(0,0,0,.5) ;
}

.maps-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
}

.maplist {
  position: absolute;
  background: rgba(0,0,0,.25) ;
  left: 0 ;
  top: 40px ;
  bottom: 40px ;
  right: 0 ;
  text-align: center ;
  line-height: 0 ;
  padding-top: 10px ;
  padding-bottom: 10px ;
  overflow-x: hidden ;
  overflow-y: auto ;
}
#create-map-button {
  position: absolute ;
  bottom: 0px ;
  height: 40px;
  left: 0 ;
  right: 0 ;
  padding: 0px 30px ;
  background: hsl(160,50%,40%);
  font-size: 18px ;
  cursor: pointer ;
  color: #FFF ;
  z-index: 1 ;
  box-shadow: 0 -10px 20px #000;
  line-height: 40px ;
  text-align: center ;
}
#create-map-button i {
  margin-right: 0px ;
}
#create-map-button span {
  white-space: nowrap ;
  margin-left: 10px ;
}
.map-box {
  position: relative ;
  cursor: pointer ;
  display: inline-block ;
  margin: 1px ;
  width: 96px ;
  height: 116px ;
  font-size: 12px ;
  padding: 4px 0 ;
  background: rgba(255,255,255,.1);
  border-radius: 4px ;
  overflow: hidden ;
}
.map-box .active-user {
  display: none ;
  position: absolute ;
  bottom: 20px ;
  left: 4px ;
  font-size: 8px ;
  color: #FFF ;
  background: hsl(0,50%,50%);
  padding: 4px ;
  border-radius: 8px ;
}
.map-box.selected {
  margin: 0px;
  border: solid 1px rgba(255,255,255,.5) ;
  background: rgba(255,255,255,.2);
}

.map-box .icon-box {
  height: 96px ;
  width: 96px ;
  overflow: hidden ;
  margin-bottom: 10px ;
}

.map-box canvas {
  width: 100%;
}

.mapbar {
    position: absolute;
    right: 0;
    top: 0px;
    bottom: 0;
    width: 274px;
    background: rgba(0,0,0,.25);
    overflow: auto ;
}

.mapbar h3 {
  margin: 5px 0 0 0 ;
  font-size: 14px;
}

.mapbar input {
  width: 100% ;
}
.map-sprite-list {
  position: absolute ;
  top: 300px ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  text-align: center ;
  padding: 2px ;
}
.mapinfo {
  position: absolute;
  right: 0px ;
  left: 2px ;
  top: 0px ;
  height: 40px;
  padding-left: 10px ;
  background: hsl(200,30%,30%);
  white-space: nowrap;
}
.mapinfo * {
  display: inline-block ;
  font-size: 16px ;
}
.mapinfo .buttons {
  display: inline-block ;
  margin-left: 20px ;
}
.mapinfo .buttons div {
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
}
.mapinfo .buttons div:hover {
  background: hsl(160,50%,60%);
}
.mapinfo .buttons div#delete-map {
  background: hsl(0,50%,50%);
}
.mapinfo .buttons div#delete-map:hover {
  background: hsl(0,50%,60%);
}

.mapinfo input {
  border: none ;
  border-radius: 3px ;
  margin:6px 20px 0px 0px ;
  font-size: 14px ;
  padding: 5px ;
  background: rgba(255,255,255,.4);
}
.mapinfo input:focus {
  outline: none ;
  background: rgba(255,255,255,.6);
}
.mapinfo input#map-width,.mapinfo input#map-height,.mapinfo input#map-block-width,.mapinfo input#map-block-height {
  width: 30px ;
  text-align: center ;
  margin: 0 3px ;
}
.mapinfo .validate-button-container {
  display: inline-block ;
  width: 100px ;
  margin-left: 7px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
  height: 30px ;
  vertical-align: middle ;
}
.mapinfo .validate-button {
  display: inline-block ;
  padding: 5px 10px ;
  font-size: 14px ;
  border-radius: 3px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  cursor: pointer ;
  white-space: nowrap;
}
#mapeditor-container {
  position: absolute;
  right: 0px ;
  left: 0px ;
  top: 40px ;
  bottom: 0 ;
}
#mapeditor-wrapper {
  position: absolute;
  right: 0px ;
  left: 0px ;
  top: 0px ;
  bottom: 40px ;
}
#mapeditor-bottombar {
  position: absolute;
  right: 2px ;
  left: 2px ;
  bottom: 0 ;
  height: 40px ;
  background: hsl(200,30%,30%);
  text-align: left ;
  padding: 0 10px ;
  white-space: nowrap ;
  overflow: hidden ;
}
#map-underlay-select {
  padding: 3px 6px ;
  border-radius: 5px ;
}
.mapeditor-splitbar {
  background: hsl(200,30%,30%);
  position: absolute ;
  left: 400px ;
  top: 0 ;
  bottom: 0 ;
  width: 10px ;
  cursor: ew-resize;
  z-index: 2 ;
}
.mapeditor {
  position: absolute;
  right: 100px ;
  left: 0px ;
  top: 0px ;
  bottom: 0 ;
  text-align: center ;
}
.mapeditor canvas {
  box-shadow: 0 0 30px #000 ;
  border: solid 1px rgba(255,255,255,.2);
  border-radius: 4px ;
  display: none ;
  cursor: crosshair ;
}
#map-editor-locked {
  position: absolute ;
  right: 264px ;
  left: 260px ;
  top: 60px ;
  padding: 20px ;
  z-index: 100 ;
  height: 20px ;
  transition-duration: .5s ;
  transition-property: left ;
  border-radius: 10px ;
  color: #FFF ;
  font-size: 16px ;
  display: none ;
}
#map-editor-locked i {
  margin-right: 5px ;
}
.map-sprite-box {
  cursor: pointer ;
  display: inline-block ;
  margin: 1px ;
  width: 64px ;
  height: 64px ;
  padding: 4px 0 ;
  overflow: hidden ;
  background: rgba(255,255,255,.1);
  border-radius: 4px ;
  vertical-align: top ;
}
.map-sprite-box.selected {
  margin: 0px;
  border: solid 1px rgba(255,255,255,.5) ;
  background: rgba(255,255,255,.2);
}

.map-sprite-box .icon-box {
  height: 64px ;
  width: 64px ;
  margin-bottom: 10px ;
}

.map-sprite-box img {
  width: 100% ;
  image-rendering: pixelated;
}
.map-tilepicker {
  text-align: center ;
}
.map-tilepicker canvas {
  margin: 10px 10px ;
  box-shadow: 0 0 3px #FFF ;
  cursor: crosshair ;
}


#publish-section {
  padding: 10px ;
  overflow: auto ;
  border-top: solid 10px hsl(200,30%,30%);
}

.publish-box {
  margin: 10px 10px 30px 10px ;
  padding: 20px ;
  border-bottom: solid 2px rgba(255,255,255,.1);
}
.publish-box:last-child {
  border: none ;
}
.publish-box h2 {
  margin: 0 ;
  font-size: 24px ;
  font-family: Ubuntu ;
  color: rgba(255,255,255,.8);
}
.publish-box h2 .beta {
  border-radius: 10px ;
  font-size: 12px ;
  padding: 2px 8px ;
  position: relative ;
  bottom: 15px ;
  left: 5px ;
  background: hsl(0,50%,50%);
}

.publish-box .action-box {
  float:right ;
  margin-left: 40px ;
  margin-bottom: 20px ;
  width: 35%;
}

.publish-button {
  border-radius: 5px ;
  padding: 10px 20px ;
  background: hsl(160,50%,40%);
  margin-bottom: 20px ;
  text-align: center ;
  cursor: pointer ;
}

#publish-checklist {
  margin: 20px 0 ;
  padding: 20px ;
  border-radius: 5px ;
  background: rgba(255,255,255,.1) ;
  display: none ;
}

.publish-button.disabled {
  background: hsla(160,50%,40%,.2);
  cursor: default ;
}

.publish-text {
  margin-top: 20px ;
  font-style: italic ;
  color:rgba(255,255,255,.7);
}

.publish-button i {
  margin-right: 10px ;
        }


.publish-box input, .publish-box textarea {
  border: none ;
  border-radius: 3px ;
  font-size: 16px ;
  padding: 5px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
}

.publish-box input:focus, .publish-box textarea:focus {
  outline: none ;
  background: rgba(255,255,255,.3);
}

.publish-box h3 {
  margin-bottom: 5px ;
}

.publish-box i {
  margin-right: 5px ;
}

.publish-box input {
  display: inline-block ;
  margin-right: 5px ;
}

.publish-box .tip {
  font-size: 12px;
  color: rgba(255,255,255,.5);
}

.publish-box a {
  color: hsl(200,100%,80%);
  text-decoration: none;
  margin: 20px 40px 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block ;
  width: 140px ;
  height: 60px ;
  background-repeat: no-repeat;
  background-size: contain ;
  background-position: center ;
}

.publish-box .validate-button-container {
  display: inline-block ;
  width: 200px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
  height: 30px ;
  vertical-align: middle ;
}

.publish-box .validate-button {
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  padding: 4px 12px ;
  cursor: pointer ;
  display: inline-block ;
}

#publish-tag-list {
  margin-top: 10px ;
}

#publish-tag-list div {
  display: inline-block ;
  font-size: 14px ;
  padding: 3px 3px 3px 10px ;
  border-radius: 14px ;
  background: hsl(200,50%,40%);
  margin-right: 5px ;
}
#publish-tag-list div i {
  margin-left: 10px ;
  cursor: pointer ;
}

.publish-box .logos {
  text-align: center ;
}

.publish-box .logo {
  width: 120px ;
  margin-right: 60px ;
  margin-top: 20px ;
  margin-bottom: 10px ;
  vertical-align: middle ;
}

.publish-box img.title {
  float:left ;
  margin: 0 40px 40px 0 ;
  width: 100px ;
}

.clear {
  clear: both ;
}

.exploreview {
  position: absolute;  top:0 ; bottom: 0 ; left: 0 ; right: 0 ;
  display: none ;
}
.exploreview i {
  margin-right: 10px ;
}

#explore-contents {
  position: absolute ;
  top: 100px ;
  bottom: 0px ;
  left: 0 ;
  right: 0 ;
  overflow: auto ;
  padding: 5px ;
}

#explore-box-list {
  text-align: center ;
  padding-top: 20px ;
}
.explore-project-box {
  position: relative ;
  margin: 10px ;
  padding: 0px ;
  display: inline-block ;
  cursor: pointer ;
  border-radius: 10px ;
  width: 320px ;
  overflow: hidden ;
  text-align: center ;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 10px rgba(0,0,0,.5) ;
}
.explore-project-box:hover {
  box-shadow: 0 0 10px rgba(0,0,0,1) ;
  background: rgba(255,255,255,.15);
}
.explore-project-box .project-tag {
  position: absolute;
  right: 5px;
  top: 180px;
  color: #FFF;
  background: hsl(200,50%,40%);
  padding: 2px 8px;
  border-radius: 25px;
  font-size: 12px;
  box-shadow: 0 0 4px 1px #000;
  transform: rotate(-8deg);
}

.explore-project-box .icon {
  display: inline-block ;
  width:170px ;
  height: 170px ;
  margin-top: 10px ;
  background: #000 ;
}

.explore-project-box .smallicon {
  position: absolute ;
  left: 10px ;
  top: 130px ;
  box-shadow: 0 0 10px 1px #000 ;
  border-radius: 5px ;
  width: 64px ;
  height: 64px ;
  background: #000 ;
}

.explore-project-box .poster {
  display: block ;
  width:320px ;
  height: 180px ;
}

.explore-project-box i {
  margin-right: 5px ;
}
.explore-project-box .icon {
  background: #000 ;
  border-radius: 10px ;
}
.explore-project-box .run-button {
  background: hsl(160,50%,40%);
  padding: 8px 16px ;
  margin-top: 16px ;
}
.explore-project-box .run-button i {
  margin-right: 10px ;
}

.explore-infobox {
  margin: 10px 0;
  text-align: left ;
  font-size: 14px ;
}

.explore-project-title {
  color: rgba(255,255,255,.8) ;
  font-size: 20px ;
  font-family: Ubuntu ;
  margin: 20px 0 15px 0 ;
  white-space: nowrap ;
  text-align: center ;
  overflow: hidden ;
}

.explore-project-box .usertag {
  left: 20px ;
}

.explore-project-box .type-label {
  position: absolute ;
  top: 0 ;
  right: 0 ;
  padding: 5px 10px ;
  border-bottom-left-radius: 10px ;
  background: #000 ;
  font-size: 14px ;
  box-shadow: 0 0 5px #000 ;
}
.explore-project-box .type-label.library {
  background: hsl(160,50%,50%) ;
}
.explore-project-box .type-label.plugin {
  background: hsl(200,50%,50%) ;
}
.explore-project-box .type-label.tutorial {
  background: hsl(300,50%,50%) ;
}
.explore-project-box .type-label.example {
  background: hsl(40,90%,40%) ;
}
.explore-project-box .type-label.template {
  background: hsl(270,50%,60%) ;
}

.explore-project-box .awaiting-label {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  padding: 5px 10px ;
  border-bottom-right-radius: 10px ;
  background: #000 ;
  font-size: 14px ;
  box-shadow: 0 0 5px #000 ;
}

.explore-project-button {
  background: hsl(160,50%,40%);
  padding: 4px 8px ;
  border-radius: 3px ;
  margin: 3px 0 ;
  width: 60px ;
  display: inline-block ;
  text-align: left ;
}

.explore-project-button i {
  width: 20px ;
}

.explore-project-likes {
  background: hsl(200,50%,40%);
  padding: 2px 4px ;
  border-radius: 3px ;
  margin: 20px 0 ;
  cursor: pointer ;
  position: absolute ;
  top: 220px ;
  right: 10px ;
}

.explore-project-likes.voted {
  background: hsl(0,50%,50%);
}

#explore-bar {
  position: absolute ;
  top: 10px ;
  height: 30px ;
  left: 0 ;
  right: 0 ;
  padding: 5px ;
  vertical-align: middle ;
}

#explore-tags-bar {
  position: absolute ;
  top: 50px ;
  left: 0 ;
  right: 0 ;
  padding: 5px ;
  vertical-align: middle ;
  overflow: hidden ;
  z-index: 1 ;
  background: hsl(330,30%,30%);
  border-bottom: solid 2px hsl(200,10%,10%);
}
#explore-tags-bar.collapsed {
  height: 30px ;
}
#explore-back-button {
  display: none ;
  border-radius: 5px ;
  padding: 4px 10px ;
  font-size: 14px;
  cursor: pointer ;
  margin: 2px 40px 0 20px ;
  background: hsl(0,50%,50%);
}
#explore-tools {
  display: inline-block ;
}
#explore-tools div {
  display: inline-block ;
}
#explore-sort-button {
  background: hsl(0,50%,50%);
  border-radius: 3px ;
  padding: 4px 8px ;
  font-size: 16px ;
  margin-left: 12px ;
  margin-top: 1px ;
  cursor: pointer ;
}
#explore-sort-button.new {
  background: hsl(160,50%,50%);
}
#explore-sort-button.top {
  background: hsl(200,50%,50%);
}
#explore-sort-button i {
  margin-right: 10px ;
}
#explore-type-button {
  background: hsl(200,50%,50%);
  border-radius: 3px ;
  padding: 4px 8px ;
  font-size: 16px ;
  margin-left: 12px ;
  margin-top: 1px ;
  cursor: pointer ;
}

#explore-type-button.all i:before { content: "\f009" ; }
#explore-type-button.app i:before { content: "\f11b" ; }
#explore-type-button.library i:before { content: "\f1c9" ; }
#explore-type-button.plugin i:before { content: "\f1e6" ; }
#explore-type-button.tutorial i:before { content: "\f19d" ; }
#explore-type-button.example i:before { content: "\f0eb" ; }
#explore-type-button.template i:before { content: "\f468" ; }

#explore-type-button.app {
  background: hsl(0,50%,50%);
}
#explore-type-button.library {
  background: hsl(160,50%,50%);
}
#explore-type-button.plugin {
  background: hsl(200,50%,50%);
}
#explore-type-button.tutorial {
  background: hsl(300,50%,50%);
}
#explore-type-button.example {
  background: hsl(40,90%,40%);
}
#explore-type-button.template {
  background: hsl(270,50%,60%);
}
#explore-type-button i {
  margin-right: 10px ;
}
#explore-search {
  position: absolute ;
  right: 0 ;
  top: 0 ;
  bottom: 0 ;
  width: 200px ;
}
#explore-search input {
  border-radius: 25px;
      border: none;
      margin: 6px;
      font-size: 14px;
      padding: 5px 15px;
      background: rgba(255,255,255,.9);
      width: 148px ;
}
#explore-search input:focus {
  outline: none ;
}
#explore-search i {
  position: absolute;
      right: 16px;
      top: 12px;
      z-index: 1;
      color: rgba(0,0,0,.3);
      font-size: 16px;
}
#explore-tags {
  padding-left: 40px ;
}
#explore-tags-collapse {
  position: absolute ;
  left: 5px ;
  top: 0px ;
  padding: 10px ;
  cursor: pointer ;
  font-size: 20px ;
}
#explore-tags div {
  display: inline-block ;
  border-radius: 20px ;
  padding: 3px 8px ;
  margin: 5px 2px ;
  background: rgba(255,255,255,.2);
  color: #FFF ;
  cursor: pointer ;
  font-size: 12px ;
}
#explore-tags span {
  font-size: 8px ;
  padding: 3px 5px ;
  border-radius: 15px ;
  background: rgba(255,255,255,.8);
  color: rgba(0,0,0,.8);
}
#explore-tags div.active {
  background: hsl(200,70%,50%);
  box-shadow: 0 0 10px hsl(200,70%,50%);
}
#explore-tag div:hover {
  background: hsl(200,70%,50%);
}
#explore-project-details {
    display: none;
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: solid 10px hsl(200,30%,30%);
}
#project-details-info {
  position: absolute ;
  left: 0 ;
  top: 0px ;
  bottom: 0 ;
  width: 45% ;
  overflow: auto ;
  background-size: 100% ;
  background-repeat: no-repeat ;
}
#project-details-contents {
  position: absolute ;
  right: 0 ;
  top: 0px ;
  bottom: 0 ;
  width: 55% ;
}

#project-details-info .inside {
  padding: 40px 40px 40px 40px ;
  position: relative ;
}
#project-details-contents .inside {
  /*padding: 40px 0 40px 40px ;*/
  padding-top: 1px ;
  padding-left: 1px ;
}
#project-details-image {
  width: 200px ;
  height: 200px ;
  border-radius: 10px ;
  /*position: absolute ;
  top: 40px ;
  right: 40px ;*/
}
.project-details-summary {
}
.project-details-right {
  float: right ;
  margin-left: 40px ;
  margin-bottom: 40px ;
  text-align: right ;
}
#project-details-title {
  font-size: 32px ;
  margin-bottom: 20px ;
}
#project-details-author {
  font-size: 18px ;
  margin-bottom: 20px ;
}
#project-details-author a {
  text-decoration: none ;
  color: rgba(255,255,255,.9) ;
}
#project-details-author i {
  margin-right: 5px ;
}
#project-details-likes {
  background: hsl(200,50%,40%);
  padding: 2px 4px ;
  border-radius: 3px ;
  margin: 20px 0 ;
  cursor: pointer ;
  display: inline-block ;
}
#project-details-likes.voted {
  background: hsl(0,50%,50%);
}

#project-details-runbutton {
  border-radius: 5px ;
/*  position: absolute ;
  top: 280px ;
  right: 40px ;*/
  padding: 8px 20px ;
  background: hsl(20,50%,50%);
  text-decoration: none ;
  color: #FFF ;
  font-size: 18px ;
}
#project-details-clonebutton {
  border-radius: 5px ;
/*  position: absolute ;
  top: 280px ;
  right: 40px ;*/
  padding: 8px 20px ;
  background: hsl(160,50%,40%);
  text-decoration: none ;
  color: #FFF ;
  font-size: 18px ;
}
#project-details-exportbutton {
  border-radius: 5px ;
/*  position: absolute ;
  top: 280px ;
  right: 40px ;*/
  padding: 8px 20px ;
  background: hsl(200,50%,40%);
  text-decoration: none ;
  color: #FFF ;
  font-size: 18px ;
}
#project-details-tags {
}
#project-details-tags div {
  display: inline-block ;
  margin: 2px 4px 2px 0 ;
  border-radius: 15px ;
  background: hsl(200,50%,40%);
  padding: 3px 8px ;
  font-size: 14px ;
}
#project-details-description {
  margin-top: 40px ;
}

#project-details-description a {
  color: hsl(200,50%,50%) ;
  text-decoration: none ;
}
#project-details-description a:visited {
  color: hsl(200,50%,50%) ;
}

#project-details-comments {
}
#project-comment-list p {
  margin: 10px 0 0 0 ;
}
#project-details-comments .comment {
}
#project-details-comments .comment .author {
}
#project-details-comments .comment .contents {
}

#project-contents-menu ul {
  display: inline-block ;
  margin: 0px 0 0 0 ;
  padding: 0 ;
  /*border-bottom: solid 2px rgba(255,255,255,.1);*/
}

#project-contents-menu li {
  display: block ;
  padding: 15px 0px 8px 0 ;
  font-size: 12px;
  font-family: "Source Sans Pro";
  color: hsla(200,10%,90%,.9);
  text-align: center;
  width: 60px;
  cursor: pointer ;
  margin: 0px 0px ;
}

#project-contents-menu li .fa-code { color: hsla(0,100%,80%,.85);}
#project-contents-menu li .fa-image { color: hsla(45,100%,80%,.85);}
#project-contents-menu li .fa-map { color: hsla(90,100%,80%,.85);}
#project-contents-menu li .fa-volume-up { color: hsla(135,100%,80%,.85);}
#project-contents-menu li .fa-music { color: hsla(180,100%,80%,.85);}
#project-contents-menu li .fa-cube { color: hsla(180,100%,80%,.85);}
#project-contents-menu li .fa-book { color: hsla(225,100%,80%,.85);}
#project-contents-menu li .fa-server { color: hsla(270,100%,80%,.85);}

#project-contents-menu li.selected .fa-code { color: hsla(0,100%,70%,1);}
#project-contents-menu li.selected .fa-image { color: hsla(45,100%,70%,1);}
#project-contents-menu li.selected .fa-map { color: hsla(90,100%,70%,1);}
#project-contents-menu li.selected .fa-volume-up { color: hsla(135,100%,70%,1);}
#project-contents-menu li.selected .fa-music { color: hsla(180,100%,70%,1);}
#project-contents-menu li.selected .fa-cube { color: hsla(180,100%,70%,1);}
#project-contents-menu li.selected .fa-book { color: hsla(225,100%,70%,1);}
#project-contents-menu li.selected .fa-server { color: hsla(270,100%,70%,1);}

#project-contents-menu li:hover {
  background-color: rgba(255,255,255,.05) ;
  color: hsla(200,10%,100%,.9);
}
#project-contents-menu .selected,#project-contents-menu .selected:hover {
  background-color: rgba(255,255,255,.2);
  margin-bottom: 0px;
  color: hsla(200,10%,100%,1);
  /*box-shadow: 10px 0px 10px -10px hsla(200,100%,70%,1) inset;*/
}

#project-contents-menu li i {
  font-size: 20px;
  padding-bottom: 5px;
}
#project-contents-view {
  position: absolute ;
  right: 0 ;
  left: 60px ;
  top: 0 ;
  bottom: 0 ;
  overflow: auto ;
}
#project-contents-view .item-list-container {
  position: absolute ;
  top: 10px ;
  left: 10px ;
  right: 10px ;
  bottom: 70px ;
  overflow: auto ;
}
#project-contents-view .sprite-list {
  line-height: 0px ;
}
#project-contents-view .sprites .export-panel {
  position: absolute ;
  bottom: 0 ;
  height: 45px ;
  left: 0 ;
  right: 0 ;
  text-align: center ;
}

#project-contents-view .sprites .export-panel a {
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  font-size: 16px ;
  padding: 10px 20px ;
  cursor: pointer ;
  text-decoration: none ;
}

#project-contents-view .sprite {
  display: inline-block ;
  margin: 2px ;
  border-radius: 10px ;
  overflow: hidden ;
  background: rgba(0,0,0,.5);
  width: 100px ;
  transition-duration: 1s ;
  transition-property: width ;
}
#project-contents-view .sprite div {
  background: hsl(160,50%,40%);
  cursor: pointer ;
  font-size: 12px ;
  padding: 4px 8px ;
  line-height: 14px ;
  text-align: center ;
  width: 84px ;
}

#project-contents-view .sound {
  display: inline-block ;
  margin: 2px ;
  border-radius: 10px ;
  overflow: hidden ;
  background: rgba(0,0,0,.5);
  transition-duration: 1s ;
  transition-property: width ;
  box-shadow: 0 0 4px #000 ;
  text-align: center;
  font-size: 12px ;
  cursor: pointer ;
}
#project-contents-view .sound-list {
  top: 0px ;
}
#project-contents-view .music-list {
  top: 0px ;
}
#project-contents-view .asset-list {
  top: 0px ;
}


#project-contents-view .music {
  display: inline-block ;
  margin: 2px ;
  border-radius: 10px ;
  overflow: hidden ;
  background: rgba(0,0,0,.5);
  transition-duration: 1s ;
  transition-property: width ;
  box-shadow: 0 0 4px #000 ;
  text-align: center;
  font-size: 12px ;
  cursor: pointer ;
}


#project-contents-view .doc-render {
  background: hsl(30,50%,80%);
  padding: 40px ;
  border-radius: 10px ;
}
#project-contents-view .code-list {
  position: absolute ;
  left: 2px ;
  width: 196px ;
  top: 2px ;
  bottom: 2px ;
}
#project-contents-view-editor {
  position: absolute ;
  left: 200px ;
  right: 2px ;
  top: 2px ;
  bottom: 2px ;
  overflow: hidden ;
  border-radius: 10px ;
}
#project-contents-view .import-button {
  background: hsl(160,50%,40%);
  padding: 10px 20px ;
  border-radius: 10px ;
  cursor: pointer ;
  position: absolute ;
  top: 40px ;
  right: 40px ;
  font-size: 16px ;
  line-height: 20px ;
  text-align: center ;
  width: 200px ;
  z-index: 1 ;
}
#project-contents-view .import-button.done {
  background: hsl(30,50%,40%);
}

#project-contents-view .import-button i {
  margin-right: 10px ;
}

#project-contents-view .import-button#project-contents-sprite-import {
  top: 10px ;
  right: 10px ;
  display: none ;
}
#project-contents-view .doc {
  position: absolute ;
  top: 10px ;
  left: 10px ;
  right: 10px ;
  bottom: 10px ;
  overflow: auto ;
}
#project-contents-view .doc-render {
  padding: 40px ;
}

.project-details-comments {
  clear: both ;
  margin-top:40px ;
}
.project-details-comments .comment {
  margin: 10px 0 ;
  padding: 10px ;
  background: rgba(255,255,255,.1);
  border-radius: 5px ;
}
.project-details-comments .author {
  margin-bottom: 10px ;
}
.project-details-comments .buttons {
  margin-bottom: 10px ;
  margin-left: 10px ;
  float: right ;
  text-align: right ;
}
.project-details-comments .buttons div {
  margin: 5px 0 ;
}
.project-details-comments .time {
  margin-bottom: 10px ;
  margin-left: 10px ;
  padding: 2px 8px ;
  border-radius: 10px ;
  font-size: 12px ;
  background-color: hsla(200,50%,40%,.5);
  color: #FFF ;
  float: right ;
}
.project-details-comments .contents {
  user-select: text ;
}
.project-details-comments .contents a {
  color: hsl(200,50%,50%) ;
  text-decoration: none ;
}
.project-details-comments .contents a:visited {
  color: hsl(200,50%,50%) ;
}
.project-details-comments textarea {
  margin: 10px 0 ;
  padding: 10px ;
  box-sizing: border-box ;
  width: 100% ;
  background: rgba(255,255,255,.2);
  color: #FFF ;
  border-radius: 10px ;
  border: none ;
  outline: none ;
  font-size: 14px;
  font-family: "Source Sans Pro",Verdana;
}
.explore-project-language {
  padding: 5px 10px ;
  border-radius: 10px ;
  font-size: 12px ;
  font-family: "Ubuntu Mono" ;
  color: rgba(255,255,255,.9) ;
  display: inline-block ;
  margin: 20px 10px 20px 0 ;
}
.explore-project-language.python {
  background-color: hsl(160,40%,40%) ;
}
.explore-project-language.lua {
  background-color: hsl(20,40%,40%) ;
}
.explore-project-language.javascript {
  background-color: hsl(300,40%,40%) ;
}
.explore-project-language.microscript {
  background-color: hsl(200,40%,40%) ;
}

#options-section {
  overflow: auto ;
  /*background: rgba(255,255,255,.05);*/
  border-top: solid 10px hsl(200,30%,30%);
}

#projectoptions {
  color: rgba(255,255,255,.8);
}

#projectoptions-left {
  position: absolute ;
  left: 0 ;
  top: 0 ;
  bottom: 0 ;
  width: 160px ;
  padding: 40px 0px 40px 40px ;
}

#projectoptions-icon {
  width: 160px ;
  border-radius: 10px ;
  image-rendering: pixelated ;
  background: #000 ;
}

#projectoptions-right {
  position: absolute ;
  left: 240px ;
  top: 0 ;
  bottom: 0 ;
  right: 0 ;
  padding: 40px 40px 40px 0px ;
}

#projectoptions-general {
  position: absolute ;
  left: 0px ;
  top: 0 ;
  bottom: 0 ;
  width: 50% ;
}

#projectoptions-general-content {
  padding: 40px ;
  overflow: hidden ;
}

#projectoptions-users {
  position: absolute ;
  right: 0px ;
  top: 0 ;
  bottom: 0 ;
  width: 50% ;
  padding: 40px;
  box-sizing: border-box;
}

.projectoption {
  margin-bottom: 40px ;
}

.projectoption .tip {
  font-size: 12px ;
  color: rgba(255,255,255,.5);
}

.projectoption input {
  border: none ;
  border-radius: 3px ;
  font-size: 16px ;
  padding: 5px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
}

.projectoption input:focus {
  outline: none ;
  background: rgba(255,255,255,.3);
}

.projectoption .sluginput {
  width: 70px ;
  text-align: center ;
  margin: 0 2px ;
}

.projectoptions h3 {
  margin: 0px 0px 4px 0px ;
}

.projectoption select {
  font-size: 16px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  border: none;
  padding: 2px;
  border-radius: 5px ;
  height: 30px;
  font-family: "Source Sans Pro",Verdana ;
}

.projectoption select option {
  background-color: hsl(200,50%,10%);
  padding: 2px ;
}

.projectoption select:focus {
  outline: none ;
  background: rgba(255,255,255,.4);
}

.projectoptions .adduser {
  margin-top: 20px ;
  border-top: solid 2px rgba(255,255,255,.1);
  padding-top: 5px ;
}

.projectoptions .adduser .addbutton {
  float: right ;
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  font-size: 16px ;
  padding: 6px 20px ;
  margin-top: 4px ;
  cursor: pointer ;
}
.projectoptions .adduser .addbutton i {
  margin-right: 10px ;
}

.projectoptions .adduser input {
  border: none ;
  border-radius: 3px ;
  font-size: 16px ;
  padding: 5px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
  width: 50%;
}

.projectoptions .adduser input:focus {
  outline: none ;
  background: rgba(255,255,255,.4);
}

.projectoptions .userlist .user {
  margin: 2px ;
  background: rgba(255,255,255,.1);
  border-radius: 5px ;
}

.projectoptions .userlist .username {
  padding: 6px ;
}
.projectoptions .userlist .username i {
  margin-left: 10px ;
}

.projectoptions .userlist .remove {
  float: right ;
  border-radius: 5px ;
  background: hsl(0,50%,40%);
  font-size: 16px ;
  padding: 6px 20px ;
  cursor: pointer ;
}
.projectoptions .userlist .remove i {
  margin-right: 10px ;
}

.projectoptions .validate-button-container {
  display: inline-block ;
  width: 100px ;
  margin-left: 7px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
  height: 30px ;
  vertical-align: middle ;
}
.projectoptions .validate-button {
  display: inline-block ;
  padding: 5px 10px ;
  font-size: 14px ;
  border-radius: 3px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  cursor: pointer ;
  white-space: nowrap;
}

#advanced-project-options-button {
  display: inline-block ;
  border-radius: 5px ;
  color: hsl(10,100%,70%) ;
  margin: 0 0 40px 0 ;
  cursor: pointer ;
}
#advanced-project-options-button i {
  margin-right: 10px ;
}
#advanced-project-options-button i:before {
  content: "\f063";
}
#advanced-project-options-button.open i:before {
  content: "\f062";
}

#advanced-project-options {
  display: none ;
}

#tabs-section {
  overflow: auto ;
  /*background: rgba(255,255,255,.05);*/
  border-top: solid 10px hsl(200,30%,30%);
  padding: 40px 80px ;
}

.plugin-list > div {
  position: relative ;
  border-radius: 10px ;
  background: rgba(255,255,255,.05) ;
  cursor: pointer ;
  padding: 10px ;
  margin-bottom: 20px ;
  min-height: 64px ;
}
.plugin-list > div:hover {
  background: rgba(255,255,255,.1) ;
}
.plugin-list > div > div {
}
.plugin-list > div > img {
  float: left ;
  width: 64px ;
  height: 64px ;
  border-radius: 10px ;
  background: rgba(0,0,0,.5) ;
}
.plugin-list .description {
  padding-left: 88px ;
}
.plugin-list .plugin-author {
  float: right ;
  margin: 10px ;
  position: relative ;
  top: -10px ;
}
.plugin-list i {
  margin-right: 5px ;
}
.plugin-list h4 {
  margin: 0 0 10px 0 ;
}
.plugin-list .plugin-folder {
  display: none ;
  font-size: 12px ;
  color: rgba(255,255,255,.5);
}
.plugin-list > div.selected {
  background: hsl(200,50%,40%) ;
}
.plugin-list > div.selected:hover {
  background: hsl(200,50%,50%) ;
}

.plugin-list > div .check {
  display: none ;
  position: absolute ;
  bottom: 20px ;
  left: 20px ;
  font-size: 30px ;
  color: #FFF ;
}

.plugin-list > div.selected .check {
  display: block ;
}
.plugin-list > div.selected .plugin-folder {
  display: block ;
}
.plugin-view {
  position: absolute ;
  left: 0 ;
  right: 0 ;
  top: 0 ;
  bottom: 0 ;
  border-top: solid 10px hsl(200,30%,30%) ;
  background: #000 ;
}
.plugin-view-container {
  position: absolute ;
  left: 2px ;
  right: 2px ;
  top: 2px ;
  bottom: 2px ;
}
.plugin-view iframe {
  width: 100% ;
  height: 100% ;
  border: none ;
}

.projectoption .button {
  display: inline-block ;
  background: hsl(200,50%,50%) ;
  color: #FFF ;
  padding: 5px 10px ;
  border-radius: 5px ;
  text-decoration: none ;
}
.projectoption .button i {
  margin-right: 10px ;
}
.plugins-standalone-info {
  display: none ;
}

body.standalone .plugins-standalone-info {
  display: block ;
}

#sync-section {
  overflow: auto ;
}

#project-sync-list {
  padding: 40px 0 ;
}
#project-sync-list i {
  margin-right: 10px ;
  color: rgba(255,255,255,.7) ;
}

#project-sync-list > div {
  margin: 2px ;
  padding: 7px ;
  background: rgba(255,255,255,.1) ;
  border: solid 1px rgba(255,255,255,.1) ;
}

#project-sync-list > div.create { background: hsla(160,50%,50%,.5) ; }
#project-sync-list .create i::before { content: "\f055" ; }

#project-sync-list > div.upgrade { background: hsla(200,50%,50%,.5) ; }
#project-sync-list .upgrade i::before { content: "\f062" ; }

#project-sync-list > div.downgrade { background: hsla(30,100%,50%,.5) ; }
#project-sync-list .downgrade i::before { content: "\f063" ; }

#project-sync-list > div.sync { background: hsla(270,50%,50%,.5) ; }
#project-sync-list .sync i::before { content: "\f021" ; }

#project-sync-list > div.delete { background: hsla(0,100%,50%,.5) ; font-weight: bold }
#project-sync-list .delete i::before { content: "\f00d" ; }

#usersettings-section {
  display: none ;
  padding: 80px ;
  position:absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  overflow: auto ;
}

.usersettings-page {
  padding: 40px ;
}

#usersettings-menu div i {
  margin-left: 10px ;
}

body.standalone #usersettings-menu-settings, body.standalone #usersettings-menu-profile {
  display: none ;
}

#usersetting-change-password-view {
  transition-property: height ;
  transition-duration: .5s ;
  height: 0px ;
  overflow: hidden ;
}

#usersetting-password-error {
  color: hsl(0,50%,70%) ;
}


#usersettings {
  max-width: 800px ;
}

.usersetting {
  margin-bottom: 40px ;
}

.usersettings textarea {
  border: none ;
  border-radius: 3px ;
  font-size: 16px ;
  padding: 5px ;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
  width: 80% ;
  height: 200px ;
}

.usersettings textarea:focus {
  outline: none ;
  background: rgba(255,255,255,.2);
}

.usersettings input {
  border: none ;
  border-radius: 3px ;
  font-size: 16px ;
  padding: 5px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  margin: 5px 10px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
  width: 200px ;
}
.usersettings input::placeholder {
  color: rgba(255,255,255,.2) ;
  font-style:italic ;
}
.usersettings input[type="checkbox"] {
  width: initial ;
}

.usersettings input:focus {
  outline: none ;
  background: rgba(255,255,255,.3);
}

.usersettings h3 {
  margin: 0px 0px 4px 0px ;
}

.usersettings .tip {
  font-size: 12px ;
  color: rgba(255,255,255,.5);
}

.usersettings h1 {
  margin-bottom: 40px ;
}

.usersettings .validate-button-container {
  display: inline-block ;
  width: 200px ;
  transition-duration: .5s ;
  transition-property: width ;
  overflow: hidden ;
  height: 30px ;
  vertical-align: middle ;
}

.usersettings .validate-button {
  display: inline-block ;
  padding: 5px 10px ;
  font-size: 15px ;
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  cursor: pointer ;
  white-space: nowrap;
}

.usersettings .error {
  color: hsl(30,100%,70%);
  white-space: nowrap;
  transition-duration: .5s ;
  transition-property: width ;
  width: 500px ;
  overflow: hidden ;
  display: inline-block ;
}


.usersetting .button {
  display: inline-block ;
  padding: 10px 20px ;
  border-radius: 5px ;
  background: hsl(160,50%,40%);
  color: #FFF ;
  cursor: pointer ;
}
.usersetting .button i {
  margin-right: 5px ;
}
.usersettings a {
  color: hsl(200,100%,80%);
  text-decoration: none ;
  padding: 10px 0 ;
  /*background: rgba(255,255,255,.1);
  border-radius: 15px ;*/
}
.usersettings a:visited {
  color: hsl(200,50%,80%);
  text-decoration: none ;
}
.usersettings a i {
  margin-left: 10px ;
}

#translation-app {
  display: none ;
}

#translation-app-back-button {
  display: inline-block ;
  border-radius: 5px ;
  background: hsl(0,50%,40%);
  padding: 4px 10px ;
  font-size: 14px;
  cursor: pointer ;
  margin: 2px 40px 40px 20px ;
}

#open-translation-app {
  display: none ;
}

#translation-app {
  display: none ;
}

#translation-app input {
  width: 46% ;
  margin: 10px 1% ;
}


.usersettings table {
  border-radius: 3px ;
  margin-bottom: 20px ;
}

.usersettings table,.usersettings tr,.usersettings td {
  color: rgba(255,255,255,.8);
  font-size: 20px ;
  border-spacing: 3px ;
}

.usersettings tr,.usersettings td,.usersettings th {
  border: solid 1px rgba(0,0,0,.1);
  padding: 10px ;
  background: rgba(255,255,255,.1);
  border-radius: 3px ;
}
.usersettings th {
  font-weight: bold ;
  background: rgba(0,0,0,.05);
}

#usersettings-profile-image {
  position: relative ;
  width: 128px ;
  height: 128px ;
  margin: 10px 0 ;
  cursor: pointer ;
}

#usersettings-profile-image .fa-times-circle {
  position: absolute ;
  top: -10px ;
  right: -10px ;
  font-size: 20px ;
  color: hsl(0,50%,70%) ;
  cursor: pointer ;
}
#usersettings-profile-image .fa-user-circle {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  font-size: 64px ;
  padding: 32px ;
  background: rgba(255,255,255,.1) ;
  border-radius: 10px ;
  color: rgba(255,255,255,.2) ;
}
#usersettings-profile-image img {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  width: 128px ;
  height: 128px ;
  border-radius: 64px ;
  transition-property: border-radius ;
  transition-duration: .2s ;
}
#usersettings-profile-image img:hover {
  border-radius: 10px ;
}

#usersettings-progress h2 {
  text-align: center ;
}

.usersetting#delete-account {
  margin-top: 100px ;
  padding: 20px;
  border-radius: 10px;
  background: hsl(300,20%,30%) ;
}
.usersetting#delete-account .button {
  background: hsl(0,50%,50%);
}

.usersetting .button#delete-account-button {
  background: hsl(300,20%,10%) ;
  color: rgba(255,255,255,.2) ;
  cursor: default ;
}

.usersetting .button#delete-account-button.enabled {
  background: hsl(0,50%,50%);
  color: rgba(255,255,255,.9) ;
  cursor: pointer ;
}

#user-progress-statistics, #user-progress-level {
  text-align: center ;
  padding: 20px 0 ;
  margin-bottom: 40px ;
}

.user-progress-stat {
  display: inline-block ;
  padding: 20px 40px ;
  text-align: center ;
}
.user-progress-stat .unit {
  font-size: 10px ;
  color: rgba(255,255,255,.5);
  position: absolute ;
  margin-left: 5px ;
  top: 29px ;
}

#user-progress-level .user-progress-stat {
  background: hsl(160,50%,40%) ;
  border-radius: 5px ;
  margin: 5px 20px ;
  width: 200px ;
}

.user-progress-stat-value {
  font-size: 40px ;
  position: relative ;
  display: inline-block ;
}
.user-progress-stat-label {
  font-size: 16px ;
  font-weight: bold ;
  color: rgba(255,255,255,.5) ;
}

#number-of-achievements {
  margin-left: 10px ;
  color: rgba(255,255,255,.5);
  font-size: 16px ;
}

.user-progress-achievement {
  background: rgba(255,255,255,.1) ;
  padding: 20px 20px 0 20px ;
  margin: 2px 10px 0 0 ;
}
.user-progress-achievement img {
  float: left ;
  width: 96px ;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;
  margin: 0 20px 20px 0 ;
}
.user-progress-achievement .story {
  font-style: italic ;
  color: rgba(255,255,255,.5) ;
}
.user-progress-achievement .bonus {
  float: right ;
  background: hsl(300,30%,40%) ;
  font-size: 16px ;
  padding: 4px 15px ;
  border-radius: 30px ;
  color: rgba(255,255,255,.75);
}
.user-progress-achievement .date {
  float: right ;
  font-size: 16px ;
  padding: 4px 15px ;
  border-radius: 30px ;
  font-weight: bold ;
  color: hsla(200,100%,80%,.5);
}

#user-progress-notifications {
  position: fixed ;
  bottom: 100px ;
  right: 20px ;
  padding: 20px ;
  z-index: 20 ;
}

.user-progress-notification {
  margin-bottom: 20px ;
  padding: 10px ;
  width: 250px ;
  background: hsl(30,70%,70%) ;
  font-size: 16px ;
  font-weight: bold ;
  color: rgba(0,0,0,.9);
  border-radius: 5px ;
  box-shadow: 0 0 5px #000 ;
  cursor: pointer ;
  position: relative ;
  transition-duration: .5s ;
  transition-property: left ;
  left: 400px ;
}

.user-progress-notification img {
  width: 32px ;
  float: left ;
  margin: 0px 10px 0 0 ;
}

.user-progress-notification .close {
  border-radius: 30px ;
  padding: 5px 8px ;
  color: #FFF ;
  background: hsl(0,30%,50%);
  font-size: 20px ;
  cursor: pointer ;
  position: absolute ;
  right: -15px ;
  top: -15px ;
}

@media screen and (max-device-width: 800px) {
  .explore-project-author, .explore-project-likes, .run-button {
    display: none ;
  }
  .help-list {
    display: none ;
  }
  .help-view {
    left: 0 ;
  }

  .home-section div.center {
    width: auto;
  }

  body {
    zoom: 75% ;
  }

  #code-section {
    zoom: 133.3333334% ;
  }

  #doc-section {
    zoom: 133.3333334% ;
  }

  #projectoptions-left {
    display: none ;
  }
  #projectoptions-right {
    left: 0px ;
  }

  #explore-box-list, #project-list {
    zoom: 70% ;
  }
  
  div::-webkit-scrollbar { display: none ; }
}


@media screen and (max-width: 1100px) {
  header .titlemenu {
    position: fixed ;
    display: block ;
    top: 60px ;
    left: -100% ;
    padding: 10px ;
    background: hsl(200,40%,35%) ;
    white-space: normal ;
    border-bottom: solid 4px rgba(0,0,0,.5) ;
    box-sizing: border-box ;
    width: 100% ;
    transition: left 0.5s ease ;
  }

  header .logo {
    width: 140px ;
    margin-top: 22px ;
  }

  header .main-menu {
    display: inline-block ;
  }

  header .titlemenu li {
    margin: 5px ;
    background: rgba(0,0,0,.2) ;
    padding: 15px 25px;
  }

  header .titlemenu li.selected {
    background: rgba(255,255,255,.2) ;
  }
}

@media screen and (max-width: 1300px) {
  #login-button span {
    display: none ;
  }
  #login-button {
    margin: 0 ;
  }
  #create-account-button span {
    display: none ;
  }
  #login-button i, #create-account-button i {
    margin: 0 ;
  }
}

@media screen and (max-width: 1280px) {
  #header-progress-summary {
    display: none ;
  }
}

.runtime-terminal {
  position: absolute ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  height: 100px ;
  border-left: solid 2px rgba(0,0,0,.5);
  z-index: 2 ;
  overflow: hidden ;
}
#terminal {
  position: absolute ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  top: 0 ;
  overflow: hidden ;
}

#terminal-debug-container {
  position: absolute ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  top: 2px ;
  overflow: hidden ;
}


#terminal-toolbar {
  position: absolute ;
  top: 0px ;
  left: 0 ;
  right: 0 ;
  height: 40px ;
  background: hsl(200,30%,30%);
  overflow: hidden ;
  white-space: nowrap;
}
#terminal-toolbar span {
  margin-left: 20px ;
}
#terminal-toolbar * {
  display: inline-block ;
}
#terminal-toolbar .buttons {
  display: inline-block ;
  margin-left: 60px ;
}
#terminal-toolbar .buttons div {
  margin-left: 1px ;
  padding: 10px 15px ;
  cursor: pointer ;
  background: hsl(160,50%,40%);
}
#terminal-toolbar .buttons div:hover  {
  background: hsl(160,50%,60%);
}

#terminal-toolbar .buttons div:active  {
  background: hsl(160,30%,30%);
}
#terminal-toolbar .buttons .selected,
#terminal-toolbar .buttons div.selected:hover
{
  background: hsl(160,20%,35%);
  cursor: default ;
}
#open-timemachine-button {
  position: absolute;
  right: 50px;
  top: -9px;
  bottom: 9px;
  padding: 16px 8px 8px 8px;
  background: hsl(180,50%,40%);
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 0 3px #000;
}

#open-debugger-button {
  position: absolute;
  right: -8px;
  top: 4px;
  bottom: 5px;
  padding: 7px 16px 7px 11px;
  background: hsl(300,30%,40%);
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 0 3px #000;
}


#console-options {
  background: hsl(200,20%,20%);
  display: block ;
  line-height: 25px ;
  white-space: nowrap;
  color: rgba(255,255,255,.8);
  position: absolute ;
  top: 42px ;
  left: 0 ;
  right: 2px ;
  height: 0px ;
  transition-property: height ;
  transition-duration: 0.5s ;
  overflow: hidden ;
}

#console-options > div {
  padding: 20px ;
}



#console-options label {
  margin-left: 5px ;
}



#terminal-view {
  position: absolute ;
  top: 40px ;
  left: 0 ;
  right: 0 ;
  bottom: 40px ;
  background: hsl(200,50%,8%) ;
  font-family: "Ubuntu Mono";
  font-size: 16px;
  overflow: auto ;
/*  box-shadow: 0 0 200px 0 rgba(0,0,0,1) inset;*/
}

#terminal-input-line {
  position: absolute ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  height: 40px ;
  background: hsl(200,50%,15%);
}
#terminal-input-gt {
  position: absolute ;
  left: 0 ;
  width: 10px ;
  top: 0 ;
  bottom: 0 ;
  font-family: "Ubuntu Mono";
  font-size: 20px;
  color: hsl(200,100%,70%);
  padding: 11px 10px ;
}
#terminal-input-container {
  position: absolute ;
  bottom: 0 ;
  left: 30px ;
  right: 0 ;
  height: 40px ;
  border: none ;
  background: hsl(200,50%,15%);
}
#terminal-input {
  position: absolute ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  top: 0 ;
  bottom: 0 ;
  height: 40px ;
  border: none ;
  width: 100% ;
  background: hsl(200,50%,15%);
  font-family: "Ubuntu Mono";
  font-size: 16px;
  color: hsl(200,100%,70%);
  outline: none ;
  padding: 0 0 0 0 ;
}
#terminal-lines {
  padding: 5px ;
  font-family: "Ubuntu Mono";
  font-size: 16px;
  color: hsl(200,80%,70%);
  user-select: text ;
}
#terminal-lines div div {
  padding: 0 4px 0 18px ;
  white-space: pre-wrap ;
  line-height: 22px ;
}
#terminal-lines div div.error {
  color: hsl(10,80%,70%);
}
#terminal-lines div div.input {
  background: rgba(255,255,255,.05) ;
  border-radius: 3px ;
  padding: 0 4px ;
}
#terminal-lines div div.input i {
  opacity: .25 ;
}
.fa-ellipsis-v {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#tutorials-section {
  display: none ;
}

#tutorials-content-core {
  padding: 0 20px 20px 20px ;
}
#tutorials-content-examples {
  overflow: hidden ;
  text-align: left ;
}
#tutorials-content-community {
  text-align: left ;
  left: 20px ;
}

.tutorials {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  padding: 30px 30px 80px 30px ;
  text-align: center ;
  overflow: auto ;
}

.tutorials h1 {
  color: rgba(255,255,255,.7);
  margin-top: 40px ;
}
.tutorials h3 {
  color: rgba(255,255,255,.7);
  margin-bottom: 50px ;
}

.tutorials .course {
  border-radius: 10px ;
  background: hsl(30,50%,90%);
  color: #000 ;
  display: inline-block ;
  padding: 20px ;
  margin: 10px ;
  vertical-align: top ;
  width: 300px ;
}
.tutorials .course p {
  margin-bottom: 20px ;
  text-align: left ;
  font-size: 14px ;
}

.tutorials .course ul {
  list-style-type: none ;
  padding: 0 ;
  margin: 0 ;
}
.tutorials .course li {
  position: relative ;
  list-style-type: none ;
  text-align: left ;
  margin: 4px 0 ;
  padding-right: 10px ;
  border-radius: 5px ;
  background: rgba(0,0,0,.1);
  text-align: left ;
  vertical-align: middle ;
  cursor: pointer ;
  overflow: hidden ;
}
.tutorials .course li:hover {
  background: hsl(200,50%,70%) ;
}
.tutorials .course li i {
  margin-right: 10px ;
  padding: 10px ;
  background: hsl(160,50%,50%) ;
  color: #FFF ;
  font-size: 10px ;
}
.tutorials .course li i.fa-check {
  background: none ;
}
.tutorials .course li a {
  position: absolute ;
  right: 0 ;
  top: 0 ;
}

.tutorials .course li i.fa-file-code {
  background: none ;
  color: rgba(0,0,0,.4) ;
  font-size: 18px ;
  padding: 6px 0 ;
  cursor: pointer ;
}
.tutorials .course li i.fa-check {
  color: rgba(0,0,0,.5);
  font-size: 16px ;
  padding: 7px ;
}

#tutorial-window {
  position: fixed ;
  top: 200px ;
  left: 300px ;
  width: 400px ;
  height: 300px ;
  border-radius: 10px ;
  box-shadow: 0 0 20px #000, 0 0 2px 0px #000 ;
  background: hsl(30,100%,95%);
  z-index: 10 ;
  display: none ;
  overflow: hidden ;
}
#tutorial-window .titlebar {
    position: absolute ;
    left: 0 ;
    right: 0 ;
    top: 0 ;
    height: 20px;
    padding: 10px 10px;
    background: hsl(200,50%,40%);
    color: #FFF;
    font-size: 16px;
    cursor: move;
}
#tutorial-window .titlebar .icon {
  display: inline-block ;
  margin-right: 10px ;
}
#tutorial-window .titlebar .title {
  display: inline-block ;
}
#tutorial-window .titlebar .minify {
  background: rgba(0,0,0,.5);
  border-radius: 20px ;
  padding: 6px 7px ;
  position: absolute ;
  right: 4px ;
  top: 4px ;
  text-align: center ;
  cursor: pointer ;
  font-size: 20px ;
}
#tutorial-window .navigation {
  position: absolute;
  bottom: 0 ;
  height: 40px ;
  left: 0 ;
  right: 0 ;
  background: rgba(0,0,0,.1);
}
#tutorial-window .navigation i.previous {
  background: hsl(200,50%,50%);
  padding: 12px 10px ;
  position: absolute ;
  left: 0 ;
  width: 20px ;
  text-align: center ;
  cursor: pointer ;
}
#tutorial-window .navigation i.next {
  background: hsl(200,50%,50%);
  padding: 12px 10px ;
  position: absolute ;
  right: 40px ;
  width: 20px ;
  text-align: center ;
  cursor: pointer ;
}
#tutorial-window .navigation i.next.fa-check {
  background: hsl(160,50%,50%);
}
#tutorial-window .navigation span.step {
  padding: 12px 10px ;
  text-align: center ;
  position: absolute ;
  right: 80px ;
  left: 40px ;
  color: rgba(0,0,0,.9) ;
}
#tutorial-window .navigation i.resize {
  padding: 12px 10px ;
  text-align: center ;
  position: absolute ;
  right: 0px ;
  width: 20px ;
  transform: rotateZ(-45deg);
  color: rgba(0,0,0,.5) ;
  cursor: nwse-resize ;
}

#tutorial-window .content {
  position: absolute ;
  left: 5px ;
  right: 5px ;
  top: 45px ;
  bottom: 45px ;
  padding: 15px;
  overflow: auto ;
  font-size: 18px;
  font-family: Helvetica,sans-serif;
}

#tutorial-window .content::-webkit-scrollbar-track {
  background: rgba(0,0,0,.15);
  border-radius: 5px;
  margin: 4px 2px;
}

#tutorial-window .content::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.25);
  border-radius: 5px;
  margin: 4px 1px;
}

#tutorial-window.minimized {
  transition-duration: .2s ;
  transition-property: top,left,width,height;
  border-radius: 20px;
}

#tutorial-window.minimized .navigation {
  display: none ;
}

#tutorial-window.minimized .title {
  display: none ;
}

#tutorial-window.minimized .minify {
  display: none ;
}

#tutorial-window.minimized .icon {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  padding: 7px 9px;
}

#highlighter {
  position: fixed ;
  z-index: 15 ;
  display: none ;
  pointer-events: none ;
}
#highlighter-arrow {
  position: fixed ;
  z-index: 5 ;
  display: none ;
  pointer-events: none ;
}

#tutorial-overlay {
  position: fixed ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  right: 0 ;
  z-index: 4 ;
  display: none ;
  background: hsla(200,100%,10%,.9) ;
  pointer-events: none ;
}

.launch-project-box {
  background: rgba(255,255,255,.8) ;
  color: rgba(0,0,0,.8) ;
  border-radius: 5px ;
  font-size: 16px ;
  width: 300px ;
  height: 64px ;
  margin: 5px ;
  position: relative ;
  white-space: nowrap ;
  text-align: left ;
  overflow: hidden ;
  position: relative ;
  display: inline-block ;
  cursor: pointer ;
}

.launch-project-box:hover {
  background: rgba(255,255,255,.9) ;
}

.launch-project-box img {
  width: 48px ;
  height: 48px ;
  position: absolute ;
  left: 0px ;
  top: 0px ;
  padding: 8px ;
  background: rgba(0,0,0,.1) ;
  border-radius: 3px ;
}

.launch-project-box div {
  position: absolute ;
  left: 72px ;
  right: 64px ;
  top: 4px ;
  bottom: 4px ;
  white-space: normal ;
}

.launch-project-box i {
  position: absolute ;
  right: 12px ;
  top: 12px ;
  font-size: 24px ;
  background: rgba(0,0,0,.1) ;
  padding: 8px 8px ;
}

#tutorials-examples-list {
  position: absolute ;
  top: 60px ;
  bottom: 0 ;
  left: 20px ;
  right: 0 ;
  text-align: left ;
  overflow: auto ;
  transition-duration: .5s ;
  transition-property: opacity ;
}

#tutorials-examples-list.collapsed {
  display: none ;
}

#tutorials-example-view-topbar {
  position: absolute ;
  display: none ;
  padding: 0 0 0 20px ;
  top: 0px ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  box-sizing: border-box ;
  height: 60px ;
  vertical-align: middle ;
}

#tutorials-example-view-topbar > * {
  vertical-align: middle ;
}

#tutorials-example-view-topbar img {
  width: 48px ;
  height: 48px ;
  margin-right: 10px ;
  border-radius: 5px ;
}

#tutorials-example-view-topbar > i {
  font-size: 24px ;
  padding: 8px 12px;
  background-color: rgba(255,255,255,.2) ;
  border-radius: 5px ;
  color: #FFF ;
  margin-left: 20px ;
  cursor: pointer ;
}

#tutorials-examples-view {
  position: absolute ;
  display: none ;
  top: 60px ;
  left: 0 ;
  right: 0 ;
  bottom: 0 ;
  border-top: solid 10px hsl(200,30%,30%) ;
}

#tutorials-examples-run iframe {
  width: 100% ;
  height: 100% ;
  border: none ;
  box-sizing: border-box ;
  padding: 2px ;
}

#tutorials-examples-run i {
  position: absolute;
  background: rgba(255,255,255.8);
  top: 5px;
  right: 5px;
  color: #000;
  padding: 8px;
  font-size: 20px;
  border-radius: 5px;
  cursor: pointer;
}

#tutorials-examples-code-files {
  box-sizing: border-box ;
  padding: 2px ;
}

.split-left {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  left: 0 ;
  width: 200px ;
}

.split-right {
  position: absolute ;
  top: 0 ;
  bottom: 0 ;
  right: 0 ;
  width: 200px ;
}

#example-search {
  margin-left: 20px ;
  width: 300px ;
  display: inline-block ;
}

#example-search input {
  padding: 8px 16px ;
  font-size: 18px ;
  width: 250px ;
}

#example-search i {
    right: 24px;
    top: 15px;
    font-size: 20px;
}

.tutorials select {
  display: inline-block ;
  font-size: 16px;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  border: none;
  padding: 2px;
  border-radius: 5px;
  height: 30px;
  font-family: "Source Sans Pro",Verdana;
}

.project-search-bar {
  white-space: nowrap ;
  overflow: auto ;
}
.md {
  color: rgba(0,0,0,.8) ;
}

.md h1,.md h2,.md h3,.md h4,.md h5,.md h6 {
  color: rgba(0,0,0,.8);
  font-family: Helvetica,sans-serif;
}

.md h1 {
  margin: 0 ;
  padding: 40px 0 20px 0 ;
}
.md h2 {
  margin: 0 ;
  padding: 30px 0 20px 0 ;
}
.md h3 {
  margin: 0 ;
  padding: 20px 0 10px 0 ;
}
.md .md h4,.md h5,.md h6 {
  margin: 0 ;
  padding: 10px 0 10px 0 ;
}
.md hr {
  margin: 40px 0;
  border: solid 2px rgba(0,0,0,.2);
}
.md p {
  margin: 0 0 10px 0 ;
  line-height: 1.5em ;
}
.md li {
  line-height: 1.5em ;
}
.md h5 {
  font-size: 15px ;
  font-weight: normal ;
  font-family: "Ubuntu Mono" ;
  background: rgba(0,0,0,.1);
  border-radius: 0px ;
  padding: 10px 10px 10px 20px ;
  margin-top: 40px ;
  margin-bottom: 10px ;
  border-left: solid 10px rgba(0,0,0,.2);
}

.md h6 {
  font-size: 14px ;
}

.md table {
  border-radius: 3px ;
  margin: 20px 0 ;
}

.md table,tr,td {
  border-collapse: collapse;
}

.md tr,td,th {
  border: solid 1px rgba(0,0,0,.1);
  padding: 10px ;
}
.md th {
  font-weight: bold ;
  background: rgba(0,0,0,.05);
}
.md th:empty {
  padding: 5px ;
}
.md code {
  background: hsla(200,50%,20%,.7);
  color: hsl(200,100%,95%);
  border-radius: 3px ;
  font-family: "Ubuntu Mono";
  line-height: 1.2em;
  font-size: 16px ;
  padding: 2px 6px ;
}
.md pre {
  position: relative ;
}
.md pre code {
  display: block ;
  background: hsl(200,50%,20%);
  color: hsl(200,100%,90%);
  padding: 10px ;
  border-radius: 10px ;
  font-family: "Ubuntu Mono";
  line-height: 1.2em;
  white-space: pre-wrap ;
  user-select: text;
  margin: 20px 0 ;
}
.md pre .copy-button {
  display: inline-block;
  background-color: hsl(0,50%,50%);
  color: #FFF;
  font-size: 14px;
  border-radius: 5px;
  padding: 4px 8px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  transition-property: background-color ;
  transition-duration: 1s ;
  font-family: Source Sans Pro;
}
.md pre .copy-button.copied {
  background-color: hsl(0,0%,50%);
}
.md a {
  text-decoration: none ;
  color: hsla(200,100%,30%,.8);
}

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

.md blockquote {
  border-left: solid 10px rgba(0,0,0,.1) ;
  padding: 20px 20px 10px 20px;
  background: rgba(0,0,0,.05);
  margin: 10px 0 20px 0;
}

.dark.md {
  color: rgba(255,255,255,.7) ;
}

.dark.md h1,.dark.md h2,.dark.md h3,.dark.md h4,.dark.md h5,.dark.md h6 {
  color: rgba(255,255,255,.8);
}

.dark.md h5 {
  background: rgba(255,255,255,.1);
  border-left: solid 10px hsla(30,100%,50%,.5);
}

.dark.md pre code, .dark.md code {
  background: hsl(200,25%,25%);
  border: solid 1px rgba(255,255,255,.1);
}

.dark.md pre code {
  border-left: solid 10px hsl(200,40%,40%) ;
  padding-left: 20px ;
}

.dark.md blockquote {
  border-left: solid 10px rgba(255,255,255,.1);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.5) ;
}

.dark.md th {
  background: hsl(200,30%,30%);
}

.dark.md tr,.dark.md td,.dark.md th {
  border: solid 2px rgba(255,255,255,.05);
}

.dark.md tr:nth-child(even) td{
  background: rgba(255,255,255,.05) ;
}

.dark.md a {
  color: hsla(200,100%,75%,.8);
}

.dark.md hr {
    margin: 40px 0;
    border: solid 2px rgba(255,255,255,.2);
}

.top-section-border {
  border-top: solid 10px hsl(200,30%,30%);
}

.padding40 {
  padding: 40px ;
}

.padding80 {
  padding: 80px ;
}

.select1 {
  font-size: 16px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  border: none;
  padding: 2px;
  border-radius: 5px ;
  height: 30px;
  font-family: "Source Sans Pro",Verdana ;
}

.select1 option {
  background-color: hsl(200,50%,10%);
  padding: 2px ;
}

.select1:focus {
  outline: none ;
  background: rgba(255,255,255,.4);
}

.input1 {
  border: none ;
  border-radius: 3px ;
  font-size: 16px ;
  padding: 5px ;
  background: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  margin: 5px 20px 5px 0px ;
  font-family: "Source Sans Pro",Verdana ;
}

.input1:focus {
  outline: none ;
  background: rgba(255,255,255,.3);
}
.input1::placeholder {
  color: rgba(0,0,0,.2) ;
}


.button1 {
  cursor: pointer ;
  display: inline-block ;
  padding: 5px 10px ;
  border-radius: 5px ;
  background: hsl(200,50%,50%) ;
  color: #FFF ;
}

.button1 i {
  margin-right: 5px ;
}

.betapill {
  font-size: 12px ;
  background: hsl(0,50%,50%) ;
  color: #FFF ;
  border-radius: 20px ;
  padding: 3px 8px ;
  position: absolute ;
  right: -40px ;
  top: -10px ;
}