.player-box{
  margin: 0 auto;
  overflow: hidden;
}

.editor{
  float: left;
  position: relative;
  width: 640px;
  height: 356px;
  background: #272822;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 5px 15px 5px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.24), 0 8px 12px 0 rgba(0, 0, 0, 0.12);
}
.preview{
  float: right;
  position: relative;
  width: 640px;
  height: 356px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  margin: 0 5px 15px 5px;
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.24), 0 8px 12px 0 rgba(0, 0, 0, 0.12);
}

#imagehere{
  width: 640px;
  height: 356px;
  position:relative;
  border:none;
  outline:none;
  -webkit-transition: background 500ms;
  -moz-transition: background 500ms;
  -o-transition: background 500ms;
  -ms-transition: background 500ms;
  transition: background 500ms;
}
#texthere{
  width:640px;
  height:100%;
  overflow: hidden;
  background: #272822;
  color:#ddd;
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  font-size:15px;
  position:relative;
  margin-bottom: 10px;
  line-height:18px;
  border:none;
  outline:none;
}
#texthere > .webix_view{ 
  background: #272822;
}
#texthere .cm-s-twilight {
  background: #272822;
}

#preview_moto{
  position:relative;
}

#editor_block{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:silver;
  opacity:0;
  filter:alpha(opacity=0);
}
#editor_close_button{
  cursor: pointer;
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: rgba(0, 0, 0, 0);
  left: 154px;
  z-index: 100;
  top: 20px;
}

/*necessary for demos*/
.rating_bar_element{
  background-image: url(/assets/index/stars.gif);
  width:80px;
  height:16px;
  margin-top:7px;
  position:relative;
}
.rating_bar_element.star1 { background-position: 0 -16px; }
.rating_bar_element.star2 { background-position: 0 -32px; }
.rating_bar_element.star3 { background-position: 0 -48px; }
.rating_bar_element.star4 { background-position: 0 -64px; }
.rating_bar_element.star5 { background-position: 0 -80px; }

.rating_star:hover {
  z-index:2; position: absolute;
  width:80px;
  height:16px;
  overflow:hidden;
  left:0 !important;
  background-image: url(/assets/index/stars.gif);
}
.rating_star.star1:hover {background-position:0 -96px;}
.rating_star.star2:hover {background-position:0 -112px;}
.rating_star.star3:hover {background-position:0 -128px}
.rating_star.star4:hover {background-position:0 -144px}
.rating_star.star5:hover {background-position:0 -160px}

.rating_star{
  z-index:3; position: absolute;
  width:16px;
  height:16px;
  top:0;
  float:left;
  cursor:pointer;
}


/* disable bootstrap */
.webix_view table * {
  vertical-align: middle;
}
.webix_view .select,
.webix_view textarea,
.webix_view input{
  margin-bottom: 0;
}


/*1356*/
@media  screen and (max-width:1356px) {
  .player-box {
    height: auto;
    width: 100%;
  }
  .editor,
  .preview {
    float: none;
    margin: 0 auto 15px auto;
  }
  .editor {
    height: 310px;
  }
  .preview  {
    margin-top: 15px;
    height: 300px;
  }
  #imagehere {
    height: 295px;
  }
}