body{
	margin: 0;
	box-sizing: border-box;
}

div.frame{
	border-color: DarkGray;
	border-style: solid;
	border-width: 1px;
	border-radius: 4px;
	padding: 3px;
	width: 650px;
	height: 560px;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

.preload{
	display: none;
}

/* display */

.label1{
	position: absolute;
	top: -13px;
	left: -2px;
	padding: 1px 3px;
	background-color: white;
	font-family: Microsoft YaHei;
	font-size: 18px;
	color: #687888;
}


.speak-label{
	position: absolute;
	top: 0px;
	left: 2px;
	font-size: 12px;
	font-weight: bold;
	font-family: Arial;
}

span.typcn{
	position: absolute;
	top: 5px;
	left: 6px;
}

.typcn:before{
	font-size: 24px;
}

/* panel */

.panel{
	position: relative;
}

.panel span.label{
	position: absolute;
	top: -13px;
	left: -2px;
	padding: 1px 3px;
	background-color: white;
	font-family: Microsoft YaHei;
	font-size: 18px;
	color: #687888;
}

.panel canvas{
	border: 1px solid rgba(100,100,100,0.35);
	border-radius: 7px;
	pointer-events: none;
}

div#canAll{
	position: absolute;
	top: 0px;
	left: 0px;
	border: 1px solid rgba(100,100,100,0.35);
	border-radius: 5px;

	
}

div#setupAll canvas{
	position: absolute;
	top: 15px;
	left: 0px;
}

div#setup1{
	position: absolute;
	top: 15px;
	left: 220px;
	border: 1px solid rgba(100,100,100,0.35);
	border-radius: 5px;
	width: 285px;
	height: 390px;
	
}

div#setup1 canvas{
	position: absolute;
	top: 0px;
	left: 0px;
}


div#plot-I{
	position: absolute;
	top: 15px;
	left: 515px;
}

div#setup1a{
	position: absolute;
	top: 75px;
	left: 10px;
	border: 1px solid rgba(100,100,100,0.35);
	border-radius: 5px;
	width: 200px;
	height: 260px;
	
}

div#setup1a canvas{
	position: absolute;
	top: 0px;
	left: 0px;
}

div#can1aButton{
	position: absolute;
	top: 350px;
	left: 30px;	
	width: 300px;
	height: 30px;	
}


/* distance */
span.distance{
	position: absolute;
	left: 10px;
	bottom: 7px;
	font-size: 16px;	
	border-radius: 8px;
	color: #774a33;	
	background-color: rgba(255,255,255,.4);
	/* text-shadow: 1px 1px 0 white, 1px -1px 0 white, -1px 1px 0 white, -1px -1px 0 white; */
	opacity: 1;
	visibility: visible;
	transition: opacity 100ms linear, visibility 0ms linear;
	-webkit-transition: opacity 100ms linear, visibility 0ms linear;
}

span.distance.hide{
	opacity: 0;
	visibility: hidden;
	transition: opacity 100ms linear, visibility 0ms linear 100ms;
	-webkit-transition: opacity 100ms linear, visibility 0ms linear 100ms;
}

span.label{
	font-family: "Microsoft Yahei","微软雅黑", STXihei, "华文细黑";
	font-size: 20px;
	color: #9C9C9C;
	position: absolute;
}


div#jxgbox{
	position: absolute;
	left:50px;
	top: 450px;
	width:500px; 
	height:100px;
}

div#lightOnScreen{
	position: absolute;
}


button {
 outline: none !important;  
}
button.tone-corporate{
  height: 38px;
  background-color: rgba(111, 44, 145, 0.45);
  color:white;
  font-size: 16px;
  border: none;
  margin: 3px 2px 0px;

}
button.tone-corporate:hover{
  background-color: rgba(111, 44, 145, 0.45);
  color:white;
}
button.tone-corporate:focus {
  background-color: rgba(111, 44, 145, 0.45) !important;
  color:white;
}
button.tone-corporate:active{
  background-color: #6f2c91;
  color:white;
  box-shadow: none;
}
button.tone-corporate.active{
  background-color: #6f2c91;
  color:white;
  box-shadow: none;
}
button.tone-corporate.active:hover{
  background-color: #6f2c91;
  color:white;
}
button.tone-corporate.active:focus {
  background-color: #6f2c91 !important;
  color:white;
}
button.tone-corporate.disabled{
  background-color: rgba(111, 44, 145, 0.6);
}

/* mouse cursors */
.cursor-default {
	cursor: default;
}
.cursor-pointer {
	cursor: pointer;
}
.cursor-grab {
	cursor: grab;
	cursor: -webkit-grab;
	cursor: -moz-grab;
}
.cursor-grabbing {
	cursor: grabbing;
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
}