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

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


/* display */

#setup1{
	position: relative;
	top: 0px;
	left: 2px;
	border: 1px solid rgba(100,100,100,0.35);
	border-radius: 5px;
	width: 391px;
	height: 391px;
	margin-bottom:10px
		
}


.canvasBox{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 390px;
	height: 390px;
}


.leftTop button{
	width: 100px;
}

#imgBall1{
	position: absolute;
	top: 70px;
	left: 20px;
	width: 40px;
	height: 40px;
}

#imgBall2{
	position: absolute;
	top: 230px;
	left: 20px;
	width: 40px;
	height: 40px;
}

#aResetAll{
	position: absolute;
	margin:2px;
	top: 0px;
	right: 10px;
	height:25px;	
	font-size:14px;
	padding-top:2px;
}

#playOrPause{
	position:absolute; 
	bottom:0px;
	left:0px;	
}

#rightDiv{
	position: absolute;
	top: 5px;
	left: 398px;
	border: 1px solid rgba(0,0,0,0);
	width: 200px;
	height: 391px;	
}

#jxgbox{
	position: relative;
	left:0px;
	top: 0px;
	width:200px; 
	height:360px;
	margin-bottom:0px;
}

/*selectIsDefault*/
button {
 outline: none !important;  
}
button.tone-corporate{
  height: 38px;
  background-color: rgba(111, 44, 145, 1);
  color:white;
  font-size: 16px;
  border: none; 
  margin: 5px 2px 7px; 
/*  padding:  10px 10px 10px 10px; */

}
button.tone-corporate:hover{
  background-color: rgba(190, 160, 206,1);
  color:white;
}
button.tone-corporate:focus {
  background-color: rgba(190, 160, 206,1) !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); 
} 

button.tone-darkGray{ 
margin:2px;
height: 35px; 
background-color: rgba(150, 150, 150, 1); 
color:white; 
font-size: 14px; 
border: none; 
} 
button.tone-darkGray:hover{ 
background-color: rgba(150, 150, 150, 1); 
color:white; 
} 
button.tone-darkGray:focus {
background-color: rgba(150, 150, 150, 1) !important;
color:white;
}
button.tone-darkGray:active{ 
background-color: rgba(150, 150, 150, 1); 
color:white; 
box-shadow: none; 
} 
button.tone-darkGray.active{ 
background-color: rgba(150, 150, 150, 1); 
color:white; 
box-shadow: none; 
} 
button.tone-darkGray.disabled{ 
background-color: rgba(150, 150, 150, 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;
}