//  CENTER PANEL
.centerpanel {
  position: absolute;
  left: 50%;
  margin-left: -33%;
  width: 66%;
  height: 100%;
  z-index: 5;
}


// top panel
@import "base_centerpanel_logo.less";

// draw area stuff (plus up/down/left/right buttons)
@import "base_centerpanel_drawarea.less";


/*
	HEIGHT-related RESPONSIVE STUFF
*/
@media screen and (max-height: 700px) {
  .logopanel {
    height: 22%;
  }
  .doodlecontainer {
    height: 68%;
  }
  .d3dlogo {
    top: 25%;
    max-width: 399px;
    height: 74px;
    background-image: url('../img/logo/logo_small.png');
  }
}
@media screen and (max-height: 655px) {
  .bgMiddle { opacity: 0; }
}

@media screen and (max-height: 525px) {
  .d3dlogo {
    top: 20%;
    height: 57px;
    max-width: 307px;
    background-image: url('../img/logo/logo_smaller.png');
//    max-width: 399px;
//    background-image: url('../img/logo/logo_smaller_wide.png');
  }
}
@media screen and (max-height: 375px) {
  .d3dlogo {
    height: 40px;
    max-width: 216px;
    background-image: url('../img/logo/logo_smallest.png');
//    max-width: 399px;
//    background-image: url('../img/logo/logo_smallest_wide.png');
  }
}