/* v06 */


html{
	touch-action: manipulation
}

body{
	
}

body,div,button{
	margin:0px;
	padding:0px;
	border:0;
	font-size:12px;
}


.help_button{
	width:40px;
	height:40px;
	margin:10px 10px;
	padding:1px 1px;
	font-size:12px;
	line-height:1.2em;
	display:block;
	box-sizing: content-box;
	border-width:1px;
	border-style:solid;
	border-color:#BEB;
	background-color:#BEB;
}



.tab_pannel,.control_pannel,.variable_pannel{
	width:312px;
	float:left;
	border-width:2px 2px 2px 2px;
	border-color:#DFD #696 #696 #696;
	border-style:solid;
	background-color:#DFD;
	padding:2px;
}

.variable_pannel>div{
	width:312px;
	float:left;
}

.variable_group{
	width:312px;
	float:left;
}

.tab_pannel>.variable_group>div{
	float:left;
	width:312px;
	height:48px;
	margin:0px;
	padding:0px;
}

.tab_pannel>.variable_group>div>.variable_caption{
	width:24px;
	float:left;
	margin:16px 0px 16px 0px;
	height:16px;
	clear:none;
}

.tab_pannel>.variable_group>div>input{
	width:88px;
	height:16px;
	float:left;
	box-sizing: content-box;
	border-width:1px;
	font-size:12px;
	margin:14px 2px 14px 2px;
	padding:1px;
	clear:none;
}

.tab_pannel>.variable_group>div>.variable_value{
	width:48px;
	float:left;
	box-sizing: content-box;
	border-width:0px;
	font-size:12px;
	margin:16px 0px 16px 0px;
	height:16px;
	clear:none;
}

.tab_pannel>.variable_group>div>button{
	width:40px;
	height:40px;
	margin:2px 2px;
	padding:1px;
	font-size:12px;
	line-height:1.2em;
	display:block;
	float:left;
	box-sizing: content-box;
	border-width:1px;
	border-style:solid;
	border-color:#BEB;
	background-color:#BEB;
}



.tab_pannel{
	height:288px;
}

.control_pannel,.variable_pannel{
	clear:both;
	border-top:2px solid #696;
}

.tab_pannel>div,.control_pannel>div{
	width:312px;
	float:left;
}
.tab_pannel>div>div,control_pannel>div>div{
	width:78px;
	float:left;
}
.tab_pannel>div,.control_pannel>div{
	clear:both;
}
.tab_pannel>div>div>button,.control_pannel>div>div>button{
	width:68px;
	height:40px;
	margin:2px 4px;
	padding:1px 0px;
	font-size:12px;
	line-height:1.2em;
	display:block;
	float:left;
	box-sizing: content-box;
	border-width:1px;
	border-style:solid;
	border-color:#BEB;
	background-color:#BEB;
}
.control_pannel>div>div.spacer{
	width:234px;
	height:40px;
	display:block;
	float:left;
}
.control_pannel>div>div.spacer>button{
	width:68px;
	height:40px;
	margin:2px 4px;
	padding:1px 0px;
	font-size:12px;
	line-height:1.2em;
	display:block;
	float:left;
	box-sizing: content-box;
	border-width:1px;
	border-style:solid;
	border-color:#DFD;
	background-color:#DFD;
}
.tab_pannel>div>div>div,.control_pannel>div>div>div{
	width:68px;
	height:90px;
	margin:5px 5px;
	padding:0px;
	font-size:12px;
	line-height:1.2em;
	display:block;
	float:left;
}

#tab_pannel_0{
	display:block;
}
#tab_pannel_1{
	display:none;
}
#tab_pannel_2{
	display:none;
}


.tab{
	width:310px;
	float:left;
	border-width:0px;
	border-color:#FFF;
	border-style:solid;
	padding:4px 5px 0px 5px;
	background-color:#696;
	position:relative;

}
.tab+div{
	clear:both;
}

.tab>div{
	width:310px;
	float:left;
}
.tab>div>div{
	width:34px;
	float:left;
	background-color:#DFD;
}
.tab>div>div>button{
	width:30px;
	height:30px;
	margin:2px 2px;
	padding:0px;
	font-size:12px;
	line-height:1.2em;
	display:block;
	float:left;
	box-sizing: content-box;
	border-width:0px;
	border-style:solid;
	border-color:#DFD;
	background-color:#DFD;
}
#tab_1,#tab_2{
	background-color:#ADA;
}
#tab_1>button,#tab_2>button{
	border-color:#ADA;
	background-color:#ADA;
}

#data_operation{
	display:none;
	clear:both;
}

#data_area{
	width:320px;
	height:160px;
}

#image_data_operation{
	display:none;
	clear:both;
}

#image_data_area{
	width:320px;
	height:160px;
}

#mainCanvas{
	border:solid 10px red;
	display:none;
}

.footer{
	clear:both;
}