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;
}

/* 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: 10px;
	left: 10px;
	border: 1px solid rgba(100,100,100,0.35);
	border-radius: 5px;
	width: 410px;
	height: 520px;
	
}

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

#canW{
	width: 410px;
	height: 520px;
}

div#rightDiv{
	position: absolute;
	top: 10px;
	left: 430px;
	border: 1px solid rgba(0,0,0,0);
	width: 210px;
	height: 540px;	
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


.tableTitle{
	background-color: rgb(150,0,150);
    text-align: center;
	color: rgb(255,255,255);
}


div img{
    width: 50px;
    height: auto;
}

.buttonBox{
	position: relative;
	display: inline-block;
    width: 60px;
    height: 70px;
    text-align: center;
	background-color: rgb(200,200,200);
	margin: 2px;
	padding:2px;
	vertical-align: text-top;
}
/*
img {
    position:relative;
    top:25%;
    min-height:30%;
    display:block;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
   min-width:auto;
}
*/
.buttonBox {
	cursor: pointer;
}
.buttonBox.active{ 
background-color: rgb(200,200,255);
} 


#sourceInvert{
	font-size: 8px;	
}


/*
.right2 .buttonBox{
	margin-top: 0px;
}
*/

.rightTableBox {
    text-align: center;
}





/* 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: relative;
	left:5px;
	top: 5px;
	width:200px; 
	height:150px;
	margin-bottom:0px;
}



div#pathTextHTML{
	position: absolute;	
	width:250px; 
	height:20px;
	left:0px;
	top: 520px;
}

div#timeInSecond{
	position: absolute;	
	width:200px; 
	height:20px;
	left:210px;
	top: 520px;
	text-align: right;
}


/*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: 5px 5px 7px; 

}
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 5px 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;
}