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

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

/* display */

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




div#setup1{
	position: absolute;
	top: 140px;
	left: 20px;
	border: 1px solid rgba(100,100,100,0.35);
	border-radius: 5px;
	width: 500px;
	height: 450px;
	
}

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

div#selectIsDefault{
	position: absolute;
	top: 20px;
	left: 20px;	
	width: 150px;
	height: 20px;	
}

div#selectBlock{
	position: absolute;
	top: 85px;
	left:230px;
	width:320px; 
	height:15px;
}

div#selectOnOff{
	position: absolute;
	top: 85px;
	left:20px;
	width:320px; 
	height:15px;
}

/* 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:190px;
	top: 5px;
	width:320px; 
	height:80px;
}

div#lightOnScreen{
	position: absolute;
}

/*selectIsDefault*/
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 0px 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);
}



button.tone-gray{ 
height: 38px; 
background-color: #e6e6e6; 
color:black; 
font-size: 16px; 
border: none; 
margin: 5px 2px 7px; 
} 
button.tone-gray:hover{ 
background-color: #4d4d4d; 
color:white; 
} 
button.tone-gray:active{ 
background-color: #4d4d4d; 
color:white; 
box-shadow: none; 
} 
button.tone-gray.active{ 
background-color: #4d4d4d; 
color:white; 
box-shadow: none; 
} 
button.tone-gray.disabled{ 
background-color: rgba(230, 230, 230, 0.6); 
color:rgba(255, 255, 255, 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;
}