div.ttl, div.drag { -ms-touch-action: none; }
body { margin: 2px; }
* { font-family: Verdana, Arial, Helvitica, sans-serif; }

#id_main { position: relative; }
div { box-sizing: border-box; }
div.box {position: relative; display: inline-block; box-sizing: border-box; float: left; 
	padding: 2px 2px 0 2px; margin: 0; min-width: 100px; }

div.box[data-mv="1"] { border-top-left-radius: 2px; border-top-right-radius: 2px;
z-index: 5; position: absolute; top: 0; left: 0; box-shadow: 0 0 4px 4px rgba(0,0,80,.5); width: 100%;
}

div.msk { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
div.vue { width: 100%; }
div.box  div.vue iframe { box-sizing: border-box; width: 100%; border: solid 1px Silver; background-color: White; overflow: hidden; }
div.ttl { color: black; text-indent: 10px; width: 100%; height: 30px; background-color: silver; padding: 3px; 
	font-size: 17px; font-weight: normal;
	//background-image: linear-gradient(0deg, rgba(128, 128, 128,.5), rgba(200,200,200,.1), rgba(255,255,255,.5));
	//background-image: -webkit-linear-gradient(90deg, rgba(128, 128, 128,.5), rgba(200,200,200,.1), rgba(255,255,255,.5));
	border: solid 1px Silver; border-top-left-radius: 2px; border-top-right-radius: 2px;
	}

div.ttlright { display: inline-block; position: absolute; top: 8px; right: 6px; }
div.drag { position: absolute; bottom: -1px; right: 1px; }

div.mnu { display:none; position: absolute; top: 24px; right: 2px; width: 500px; 
	border: solid 1px Silver; z-index: 10;
	background-color: #F0F0F0; background-image: linear-gradient(0deg, rgb(234,234,234), rgb(255,255,255));
	background-image: -webkit-linear-gradient(90deg, rgb(234,234,234), rgb(255,255,255));
	font-size: 12px;
}

div.topright { position: absolute; top: 0px; right: 0px;  width: 40px; }
div.add { font-size: 36px; font-weight: bold; color: #606060; z-index: 20; text-align: center;}
div.add:hover { color: Silver; }

div.opt { z-index: 1000; display:none; position: absolute; top: 30px; right: 2px; width: 175px; padding: 10px 6px 10px 6px;
	border: solid 1px Silver; z-index: 10;
	background-color: #F0F0F0; background-image: linear-gradient(0deg, rgb(234,234,234), rgb(255,255,255));
	background-image: -webkit-linear-gradient(90deg, rgb(234,234,234), rgb(255,255,255));
	font-size: 12px;  font-weight: normal;
}

img.icon { float: left; }

#id_hdr { overflow: hidden; }
#id_done { float: right; }
#id_std { width: 200px; }
#id_ttl { width: 200px; } 
#id_url { width: 400px; }
#id_url[readonly] { background-color: transparent; border: solid 1px white; }
#id_color, #id_bgcolor { width: 75px; }
#id_timer  {width: 30px; }
#id_reset, #id_done{ width: 60px; }
#td_close { display:inline-block; position: absolute; top: 0; right: 4px; font-weight: bold; font-size: 14px; color: Maroon;}
#td_close:hover { color: #E00000; -webkit-filter: drop-shadow(0px 0px 4px Maroon); filter: drop-shadow(0px 0px 4px Maroon);  }

input.floatbtn { width: 75px; border: none; border-radius: 8px; background-color: #F0F0F0; }
.floatbtn { margin-top: 4px; margin-bottom: 4px; -webkit-filter: drop-shadow(3px 3px 3px #333);  
	-ms-filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	filter: drop-shadow(3px 3px 3px #333); 
	position: relative; top: -3px; }
.floatbtn:hover { -webkit-filter: drop-shadow(2px 2px 2px #333); filter: drop-shadow(2px 2px 2px #333);  top: -2px; }
.floatbtn:active { -webkit-filter: drop-shadow(1px 1px 1px #333); filter: drop-shadow(1px 1px 1px #333); top: 0px; } 
