html body{margin:0px;padding:0px;overflow:hidden;width:100%;height:100%;-ms-touch-action: none;}
img{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
}
.containerBar{
    position:absolute;
    z-index:9999;
    left: 50%;
    top:100%;
}
.DivToolBar{
    position:absolute;
    width:280px;
    z-index:9999;
    left: -139px;
    bottom:0;
    height:35px;
    overflow:hidden;
}

.DivToolBarTipCon{
    position: absolute;left:50%;top:1%;
}
.DivToolBarTip{
    position:absolute;
    height:40px;
    width:160px;
	bottom:0;
    left:-80px;
    text-align:center;
    font:bold 12px Verdana, Geneva, sans-serif;
    color:#fff;
    text-shadow:1px 1px 2px #000, 0 0 1em #000, 0 0 0.2em #000;
}

.DivToolBarCon{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
}
.DivToolBarConShow{
    top: 0px;
}
.DivToolBarCon div{
    cursor: pointer;
}

.leftPW{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) 0 -0;top:0;left:0; -webkit-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0;}
.upPW{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -40px 0;top:0;left:40px;}
.rightPW{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -80px 0;top:0;left:80px;}
.downPW{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -120px 0;top:0;left:120px;}
.resetPW{display:none;}
.zoominPW{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -160px 0;top:0;left:160px;}
.zoomoutPW{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -200px 0;top:0;left:200px;}
.stopPW{display:none;}

.gyroPW{display:none;}
.gyroOnPW{display:none;}

.directionPW{display:none;}
.directionOnPW{display:none;}

.hidePW{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -240px 0;top:0px;left:240px; -webkit-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0;}


/*---*/


.leftPW:hover{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -0 -40px;top:0px;left:0;}
.upPW:hover{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -40px -40px;top:0px;left:40px;}
.rightPW:hover{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -80px -40px;top:0px;left:80px;}
.downPW:hover{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -120px -40px;top:0px;left:120px;}
.resetPW:hover{display:none;}
.zoominPW:hover{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -160px -40px;top:0px;left:160px;}
.zoomoutPW:hover{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -200px -40px;top:0px;left:200px;}
.stopPW:hover{display:none;}

.gyroPW:hover{display:none;}
.gyroOnPW:hover{display:none;}

.directionPW:hover{display:none;}
.directionOnPW:hover{display:none;}

.hidePW:hover{position:absolute;height:40px;width:40px;background:rgba(0, 0, 0, .5) url(tbbg.png) -240px -40px;top:0px;left:240px;}


.DivToolBarHandlerCon{
    position: absolute;left:50%;top:100%
}
.DivToolBarHandlerCon div{
    cursor: pointer;
}
.DivToolBarHandler{
    position:absolute;
    height:26px;
    width:64px;
    left: 8px;
    top: 87px;
    background:url(tbbg.png) -8px -87px no-repeat;
}
.DivToolBarHandlerHidden{
    top: 0px;
}
.DivToolBarHandler:hover{position:absolute;height:26px;width:64px;background:url(tbbg.png) -88px -87px no-repeat; left:8px; top:87px;}

/*Changes in the implementation of top animation*/
.ani{-webkit-transition : top 0.5s ease; transition : top 0.5s ease;}

.containerBarMobile{
    position:absolute;
    z-index:9999;
    left: 50%;
    top:100%;

}
.DivToolBarMobile{
    position:absolute;
    width:346px;
    height:64px;
    z-index:9999;
    left: -173px;
    top:-74px;
    overflow:hidden;

}
.DivToolBarConMobile{
    position: absolute;
    background:url(onMobile.png) -420px 0px;
    width: 100%;
    height: 100%;
    top: 0px;
}
/*Position of a gyroscope*/
.gyroMobilePW{position:absolute;height:64px;width:64px;background:url(onMobile.png) -350px 0px;top:0px;left:10px;}
/*Gyroscope state 2*/
.gyroOnMobilePW{position:absolute;height:64px;width:64px;background:url(onMobile.png) -280px 0px;top:0px;left:10px;}

/*Position 2 drag direction*/
.directionMobilePW{position:absolute;height:64px;width:64px;background:url(onMobile.png) -140px 0px;top:0px;left:96px;}
/*Drag the direction of the state 2*/
.directionOnMobilePW{position:absolute;height:64px;width:64px;background:url(onMobile.png) -208px 0px;top:0px;left:96px;}
/*Position 3 Reset*/
.resetMobilePW{position:absolute;height:64px;width:64px;background:url(onMobile.png) -68px 0px;top:0px;left:183px;}
/*Position 4 Hide*/
.hideMobilePW{position:absolute;height:64px;width:64px;background:url(onMobile.png) 0px 0px;top:0px;left:270px;}

.DivToolBarHandlerMobile{
    position:absolute;
    height:28px;
    width:64px;
    left: -32px;
    top: 0px;
    background:url(onMobile.png) -800px 0px no-repeat;
}
.DivToolBarHandlerMobile:hover{
    position:absolute;
    height:28px;
    width:64px;
    left: -32px;
    top: 0px;
    background:url(onMobile.png) -800px 0px no-repeat;
}