@charset "utf-8";
/* CSS Document */
*{
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	margin:0px;
	padding:0px;
}
html,body{
	width:100%;
	height:100%;
	background-color:#eee;
}
h1{
	margin:5px 0 0 15px;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:26px;
	text-align:left;
	color:#FFF;
}
.title{
	position:absolute;
	width:380px;
	top:0px;
	left:0px;
}
#main{
	position: absolute;
	background-image: url("img/background.png");
	background-repeat: no-repeat;
	top:50%;
	left:50%;
	width: 700px;
	height: 500px;
	margin: -250px 0 0 -350px;
}
.radiobutton{
	width:24px;
	height:24px;
	cursor:pointer;	
}
#categoryselect{
	position:absolute;
	width:300px;
	height:45px;
	top:60px;
	left:20px;	
}
.category{
	position:relative;
	top:12px;
	margin-left:5px;
}
.categorysubject{
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:20px;
	text-align:left;
	margin-left:8px;
	vertical-align:5px;
}
#categoryshroud{
	position:absolute;
	background-image: url("img/shroud1.png");
	top:60px;
	left:15px;
	width:300px;
	height:50px;
}
#toolselect{
	position:absolute;
	width:350px;
	height:90px;
	top:20px;
	left:340px;
}
#toolshroud{
	position:absolute;
	background-image: url("img/shroud2.png");
	top:20px;
	right:15px;
	width:350px;
	height:90px;
}
.toolbutton{
	cursor:pointer;
}
#mirror_button{
	position:absolute;
	top:5px;
	left:50px;
}
#mirrors_button{
	position:absolute;
	top:5px;
	left:200px;
}
#sheet1_button{
	position:absolute;
	top:18px;
	left:15px;
}
#sheet2_button{
	position:absolute;
	top:18px;
	left:130px;
}
#sheet3_button{
	position:absolute;
	top:18px;
	left:240px;
}
#construction_button{
	position:absolute;
	top:12px;
	left:120px;
}
#drawplace{
	position:absolute;
	width:670px;
	height:360px;
	top:125px;
	left:16px;
}
#viewcanvas{
	position:absolute;
	top:0px;
	left:0px;
}
#maincanvas{
	position:absolute;
	top:0px;
	left:0px;
}
#air{
	position:absolute;
	top:0px;
	height:0px;
}
#earth{
	position:absolute;
	top:240px;
	height:0px;	
}
#Sheet1{
	position:absolute;
	top:70px;
	left:245px;
}
#Sheet2{
	position:absolute;
	top:75px;
	left:390px;
}
#Sheet3{
	position:absolute;
	top:40px;
	left:250px;
}
#leftmirror{
	position:absolute;
	top:0px;
	left:169px;
}
#rightmirror{
	position:absolute;
	top:0px;
	left:265px;
}
#body{
	position:absolute;
	left:140px;
	top:80px;
}
#loadcanvasTag{
	position:absolute;
	background-color:#FFF;
	top:125px;
	left:15px;	
}
#deletetoolbutton{
	position: absolute;
	background-image: url("img/deletetoolbutton.png");
	width:110px;
	height:32px;
	top:5px;
	right:5px;
	cursor:pointer;
}
#deleteconstbutton{
	position: absolute;
	background-image: url("img/deleteconstructionbutton.png");
	width:110px;
	height:32px;
	top:42px;
	right:5px;
	cursor:pointer;
}
#whybutton{
	position: absolute;
	background-image: url("img/whybutton.png");
	width:110px;
	height:32px;
	top:5px;
	left:5px;
	cursor:pointer;
}
.buttonsubject{
	position:absolute;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width:110px;
	height:32px;
	font-size:18px;
	text-align:center;
	top:3px;
}
.explainplace{
	position: absolute;
	background-color:#FFF;
	top: 125px;
	left: 15px;
	width: 670px;
	height: 360px;
}
#conductors{
	position:absolute;
	top:121px;
	left:15px;
}
#panel{
	position:absolute;
	top:25px;
	left:115px;
}
.frame{
	position:absolute;
	top:0px;
	left:7px
}
.battery{
	position:absolute;
	top:83px;
	left:0px;
	width:102px;
	height:28px;
}
.plusmark{
	position:absolute;
	top:90px;
	left:5px;
}
.minusmark{
	position:absolute;
	top:90px;
	left:85px;
}
#battery1{
	position:absolute;
	top:36px;
	left:186px;
	opacity:0;
}
#battery2{
	position:absolute;
	top:36px;
	left:283px;
	opacity:0;
}
#battery3{
	position:absolute;
	top:36px;
	left:380px;
	opacity:0;
}
#sheet2{
	position:absolute;
	top:13px;
	left:370px;
	opacity:0;
}
#sheet3{
	position: absolute;
	top:-30px;
	left:115px;
	opacity:0;
}
#emptybattery{
	position:absolute;
	top:36px;
	left:380px;
	opacity:0;
}
#electrons{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.electron{
	position:absolute;
	right:15px;
	top:118px;
	opacity:0;
}
#closebutton{
	position:absolute;
	top:5px;
	right:5px;
	cursor:pointer;
}
.arrowbutton{
	width:35px;
	height:43px;
	background-image: url("img/explain/arrow.png");
	background-repeat:no-repeat;
	cursor:pointer;
}
#nextbutton{
	position:absolute;
	top:295px;
	right:20px;
	background-position:top right;
}
#backbutton{
	position:absolute;
	top:295px;
	left:20px;
	background-position:top left;
}
#explainmsg{
	position:absolute;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:20px;
	text-align:left;
	color:#000;
	width:470px;
	height:85px;
	left:100px;
	top:280px;
}