/*use font-family name in params when creating new createjs.Text*/

/*OLD import any google webfonts here*/
/*
@import url(http://fonts.googleapis.com/css?family=Nunito:400,700);

@font-face {
  font-family: 'Nunito', Arial, serif; font-weight: 400;
}
*/

@font-face {
 font-family: katong;
 src: url("/static/app/fonts/PCfonts.eot");/* IE9 */
 src: url("/static/app/fonts/PCfonts.woff") format("woff"), /*  chrome、firefox  */
          url("/static/app/fonts/PCfonts.ttf") format("truetype"); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
 font-weight: normal;
 font-style: normal;
}

html{
    height:100%;
}
body {
    height:100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y:hidden;
    position:relative;
}

img {
    border: none;
    /*display: none;*/
}
#big_mask{
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:2;
    width: 100%;
    height: 100%;
    display:block;
}
#setLandscape {
    width: 100vw;
    height: 100vh;
    z-index: 4;
    position:fixed;
    top:0;
}
#landscape_img{
    width: 100%;
    height: 100%;
}



#canvas_parent {
    max-width: 1366px;
    height:100%;
    overflow-x: hidden;
    overflow-y:hidden;
    position: absolute;
    left: 0;
    top: 0;
}
#loading_parents{
    position: relative;
}
#over_mask{
    width: 1px;
    height: 100%;
    position: absolute;
    background:inherit;
    right:1px;
    z-index: 2;
}

#canvas_children {
}

#gameCanvas {

    max-width: 1366px;
}

#coverImg {
    display: none;
    position: absolute;
    z-index: 1;
    max-width: 1366px;
    /*-webkit-user-select:none;*/
    /*-webkit-touch-callout:none;*/

}
/*#start_mask{
    position: absolute;
    z-index: 3;
    cursor: pointer;

}*/
#startBtn {
    display:block;
    position: absolute;

    /*min-width: 80px;*/

    z-index: 3;
    cursor: pointer;
    /*-webkit-user-select:none;*/
    /*-webkit-touch-callout:none;*/
    right: 43%;
}

#startBtn:hover {
    /* background-position: -265px 0;*/
    /*cursor: pointer;*/
   /*display: none;*/
}

#loadingFrame {
    display: none;
    position: absolute;
    max-width: 1366px;
    z-index: 2;
    /*-webkit-user-select:none;*/
    /*-webkit-touch-callout:none;*/
}

#loadingFrameTopLeft {
    display: none;
    position: absolute;
    max-width: 72px;
    min-width: 42px;

    margin-top: 1%;
    margin-left: 1%;
    z-index: 2;
}

#loadingFramePBSLogo {
    display: none;
    position: absolute;

    max-width: 60px;
    min-width: 30px;

    margin-top: 1.5%;
    margin-left: 1.5%;
    z-index: 2;
}

#loadingFrameTopRight {
    display: none;
    position: absolute;

    max-width: 80px;
    min-width: 42px;

    margin-top: 1%;
    z-index: 2;
}

#loadingFrameHome {
    display: none;
    position: absolute;
    /*right:2%;*/
    max-width: 46px;
    min-width: 30px;

    margin-top: 1.8%;
    z-index: 2;
}

#loadingTxt {
    font-family: "katong";
    font-size: 20px;

    position: fixed;
    bottom: 5%;
    left: 20%;

    z-index: 3;
}

/*video page stuff*/
#video-parent {

}

#video-wrapper {
    position: fixed;

}

#video-frame {
    position: fixed;
}

#videoFrameTopLeft {
    position: fixed;
}

#videoFrameTopRight {
    position: fixed;
}

#player1 {

}

#video-gamebtn {
    position: fixed;
    margin-left: 670px;

    z-index: 200;

}

#video-homebtn {
    position: fixed;

}

#video-pbsbtn {
    position: fixed;
}

#video-pbsbtn img {
    width: 50px;
    height: auto;
}

#video-gamebtn {
    position: fixed;
}

#video-gamebtn img {
    width: 88px;
    height: auto;
}

#msg {
    position: absolute;
    top: 0;
    left: -100px;
}


/*managing different positioning of right-side elements based on width breakpoints*/
@media only screen and (orientation:portrait ) {
    #setLandscape{display:block;}
}

@media only screen and (orientation:landscape) {
    #setLandscape{ display:none;}
}


@media (max-width: 499px) {
    #loadingFrameTopRight {
        right: 5%;
    }

    #loadingFrameHome {
        right: 6%;
    }

    #startBtn {
        right: 43%
    }
  /*  #start_mask {
        right: 10%
    }*/
}

@media (min-width: 500px) and (max-width: 1039px) {
    #loadingFrameTopRight {
        right: 6%;
    }

    #loadingFrameHome {
        right: 6.8%;
    }

    #startBtn{
        right: 43%
    }
   /* #start_mask{
        right: 10%
    }*/
}

@media (min-width: 1040px) and (max-width: 1085px) {
    #loadingFrameTopRight {
        right: 5.5%;
    }

    #loadingFrameHome {
        right: 6.5%;
    }

    #startBtn {
        right: 43%
    }
   /* #start_mask{
        right: 10%
    }*/

}

@media (min-width: 1086px) and (max-width: 1092px) {
    #loadingFrameTopRight {
        right: 4.5%;
    }

    #loadingFrameHome {
        right: 4.5%;
    }

    #startBtn {
        right: 43%
    }
  /*  #start_mask{
        right: 9%
    }*/
}

@media (min-width: 1093px) and (max-width: 1123px) {
    #loadingFrameTopRight {
        right: 3.8%;
    }

    #loadingFrameHome {
        right: 4.6%;
    }

    #startBtn{
          right: 43%
      }
   /* #start_mask{
        right: 9%
    }*/

}

@media (min-width: 1124px) {
    #loadingFrameTopRight {
        right: 1.8%;
    }

    #loadingFrameHome {
        right: 2.6%;
    }

    #startBtn{
        right: 43%
    }
 /*   #start_mask{
        right: 5%
    }*/
}

#canvasDiv {
  position: absolute;
  width: 100%;
  height: 100%;
}

.drawingCanvas {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0 0 1rem 1rem;
}

#tools {
  position: absolute;
  display:inline-block;
  width: 15.31%;
  height: 80%;
  top: 15%;
  right: 4.5%;
}

#tools_background {
  width: 100%;
  height: 100%;
}

#pad_close, #pad_min {
  top: -4%;
  position: absolute;
  width: 28%;
  height: 8%;
}
#pad_min {
  left: -9%;
}
#pad_close {
  right: -9%;
}