/* Custom */

body{
	margin: 0px; padding: 0px;
	font-size: 1rem; font-weight: normal;
	font-family: "MS UI Gothic", "Osaka", Verdana, Arial, sans-serif;
	background-color: #eeeeee;
	color: #555555;
}

h1{
	width: auto; height: 50px;
	margin-top: 0px; margin-bottom: 10px;
	margin-left: 0px; margin-right: 0px;
	font-size: 2rem; font-weight: normal;
}

h2{
	margin-top: 0px; margin-bottom: 20px;
	margin-left: 10px; margin-right: 0px;
	font-size: 1.5rem; font-weight: normal;
}

h3{
	margin-top: 0px; margin-bottom: 20px;
	margin-left: 10px; margin-right: 0px;
	font-size: 1.3rem; font-weight: normal;
}

h4{
	margin-top: 0px; margin-bottom: 20px;
	margin-left: 10px; margin-right: 0px;
	font-size: 1.1rem; font-weight: normal;
}

/* Form */

.content input, .content select{
	width: auto; height: 25px;
	padding-top: 0px; padding-bottom: 0px;
	padding-left: 2px; padding-right: 2px;
	border:solid 1px #ccc;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/* Layout Main */

.container{
	width: 1000px; height:auto;
	margin-left: auto; margin-right: auto;
}

#noticeOK{
	width: 100%; height: auto;
	margin: 0px; padding: 3px 0px;
	color: #ffffff; text-align: center;
	background-image: linear-gradient(
		-45deg, #4466cc 25%, #0033cc 25%, #0033cc 50%,
		#4466cc 50%, #4466cc 75%, #0033cc 75%, #0033cc);
	background-size: 8px 8px;
	position: fixed; bottom: 0px; left: 0px;
	z-index: 99;
}

#noticeNG{
	width: 100%; height: auto;
	margin: 0px; padding: 3px 0px;
	color: #ffffff; text-align: center;
	background-image: linear-gradient(
		-45deg, #cc6699 25%, #cc3300 25%, #cc3300 50%,
		#cc6699 50%, #cc6699 75%, #cc3300 75%, #cc3300);
	background-size: 8px 8px;
	position: fixed; bottom: 0px; left: 0px;
	z-index: 99;
}

#noticeClose{
	width: 18px; height: auto;
	margin: 0px 8px;
	padding: 0px 2px 0px 2px;
	border: none; cursor: pointer;
	color: #fff; background: #FF8500;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	float: right;
}

.header{
	width: auto; height: 45px;
	margin: 0px; padding: 0px;
	background: url("../images/bkg_header.png");
	background-repeat: repeat-x;
}

.header:after{
	content: ""; display: block; clear: both;
}

.navigation{
	width: auto; height: auto;
	margin: 0px; padding: 0px;
	background: url("../images/bkg_header.png");
	background-repeat: repeat-x;
}

.navigation:after{
	content: ""; display: block; clear: both;
}

.content{
	width: 100%; height: auto;
	margin: 0px; 
	padding-top: 10px; padding-bottom: 10px;
	display: block; float: left;
	background-color: #eeeeee;
	background: url("../images/bkg_bike.png");
	background-repeat: no-repeat;
	background-position: right bottom;
}

.contents:after{
	content: ""; display: block; clear: both;
}

.footer{
	width: 100%; height: 64px;
	margin: 0px; padding-top: 0px;
	display: block; float: left;
	background: url("../images/bkg_land.png") repeat-x;
	background-position: bottom;
}

.footer:after{
	content: ""; display: block; clear: both;
}

/* Login */

.loginOuter{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
	position: absolute;
}

.loginInner{
	width: 380px; height: 250px;
	margin-top: -190px; margin-left: -190px;
	padding-top: 40px; padding-bottom: 0px;
	position: absolute;
	left: 50%; top: 50%;
	background: url("../images/bkg_login.png") no-repeat;
}

.loginBackground{
	width: 100%; height: 100%;
	overflow: hidden;
}

.loginBackground #enchant-stage{
	margin-left: auto; margin-right: auto;
	display: block;
}

.loginLogo{
	width: 250px; height: 45px;
	margin: 0px; padding: 0px;
	position: absolute;
	right: 0%; top: 0%;
}

.loginPoweredby{
	width: 240px; height: 20px;
	margin-left: -120px; margin-bottom: 10px;
	padding-top: 30px;
	position: absolute;
	left: 50%; bottom: 0%;
	font-size: 0.5rem; font-weight: normal;
	text-align: center; color: #888888;
	background-color: #ff3333;
	background: url("../images/poweredby.png") no-repeat;
	background-position: bottom;
}

.loginCreateOuter{
	width:100%; height: 100%;
	margin: 0px; padding: 0px;
	position: absolute;
}

.loginCreateInner{
	width: 380px; height: 300px;
	margin-top: -190px; margin-left: -190px;
	padding-top: 110px; padding-bottom: 50px;
	position: relative;
	left: 50%; top: 50%;
	background: url("../images/bkg_create.png") no-repeat;
}

.registerCreateOuter{
	width:100%; height: 100%;
	margin: 0px; padding: 0px;
	position: absolute;
}

.registerCreateInner{
	width: 380px; height: 250px;
	margin-top: -190px; margin-left: -190px;
	padding-top: 50px; padding-bottom: 0px;
	position: absolute;
	left: 50%; top: 50%;
	background: url("../images/bkg_registration.png") no-repeat;
}

.inputLogin{
	width: 340px; height: 45px;
	display: block;
	margin-left: 20px; margin-right: 20px;
	margin-top: 0px; margin-bottom: 10px;
}

.inputTerms{
	width: 340px; height: auto;
	margin-left: 20px; margin-right: 20px;
	margin-top: 0px; margin-bottom: 10px;
}

.inputLogin input{
	width: 330px; height: auto;
	margin: 0px; padding: 5px;
}

.btnLogin input{
	width: 145px; height: 65px;
	margin-left: auto; margin-right: auto;
	display: block;
	cursor:pointer; border-style:none;
	font-size: 0rem; line-height: 0rem;
	background: url("../images/btn_login.png") no-repeat;
}

.btnRegister input{
	width: 145px; height: 65px;
	margin-left: auto; margin-right: auto;
	display: block;
	cursor:pointer; border-style:none;
	font-size: 0rem; line-height: 0rem;
	background: url("../images/btn_register_off.png") no-repeat;
}

.resultLogin{
	width: 340px; height: auto;
	margin-left: 20px; margin-right: 20px;
	margin-top: 30px; margin-bottom: 10px;
	display: block;
}

.resultLoginSuccessful{
	width: 330px; height: 60px;
	margin: 20px; padding: 5px;
	display: block;
	border-style: solid; border-width: 0px;
	border-color: #cccccc; border-radius: 5px;
	background-color: #ffffff;
}

.resultLoginFailed{
	width: 330px; height: 70px;
	margin: 20px; padding: 5px;
	display: block;
	border-style: solid; border-width: 0px;
	border-color: #cccccc; border-radius: 5px;
	background-color: #ffffff;
}

/* Navigation */

.naviLeft{
	width: auto; height: auto;
	padding-top: 5px;
	float: left;
}

.naviRight{
	width: auto; height: 45px;
	padding-top: 0px;
	float: right;
}

.naviLeft ul{
	margin: 0px; padding: 0px;
	list-style: none;
}

.naviLeft li{
	margin: 0px; padding: 0px;
	float: left;
	font-size: 0.75rem;
}

.naviRight ul{
	margin: 0px; padding: 0px;
	list-style: none;
}

.naviRight li{
	margin: 0px; padding: 6px;
	float: left;
	font-size: 0.75rem;
}

.naviText a{
	width: auto; height: 30px;
	margin-top: 5px;
	padding-top: 5px; padding-bottom: 0px;
	padding-left: 38px; padding-right: 10px;
	border: 0px; display: block; text-decoration: none;
	background: url("../images/block_a2.png") no-repeat;
}

.naviText a:hover{
	margin: 0px;
	background: url("../images/block_h1.png") no-repeat;
}

.naviPlayground a{
	width: auto; height: 30px;
	margin-top: 5px;
	padding-top: 5px; padding-bottom: 0px;
	padding-left: 38px; padding-right: 15px;
	border: 0px; display: block; text-decoration: none;
	background: url("../images/block_c1.png") no-repeat;
}

.naviPlayground a:hover{
	margin: 0px;
	background: url("../images/block_c2.png") no-repeat;
}

.naviRelease a{
	width: auto; height: 30px;
	margin-top: 5px;
	padding-top: 5px; padding-bottom: 0px;
	padding-left: 38px; padding-right: 15px;
	border: 0px; display: block; text-decoration: none;
	background: url("../images/block_a1.png") no-repeat;
}

.naviRelease a:hover{
	margin: 0px;
	background: url("../images/block_h1.png") no-repeat;
}

.naviAttendance a{
	width: auto; height: 30px;
	margin-top: 5px;
	padding-top: 5px; padding-bottom: 0px;
	padding-left: 38px; padding-right: 15px;
	border: 0px; display: block; text-decoration: none;
	background: url("../images/block_a3.png") no-repeat;
}

.naviAttendance a:hover{
	margin: 0px;
	background: url("../images/block_h1.png") no-repeat;
}

.naviCalendar a{
	width: auto; height: 30px;
	margin-top: 5px;
	padding-top: 5px; padding-bottom: 0px;
	padding-left: 38px; padding-right: 15px;
	border: 0px; display: block; text-decoration: none;
	background: url("../images/block_a1.png") no-repeat;
}

.naviCalendar a:hover{
	margin: 0px;
	background: url("../images/block_h1.png") no-repeat;
}

.naviTeacher a{
	width: auto; height: 30px;
	margin-top: 5px;
	padding-top: 5px; padding-bottom: 0px;
	padding-left: 38px; padding-right: 15px;
	border: 0px; display: block; text-decoration: none;
	background: url("../images/block_a1.png") no-repeat;
}

.naviTeacher a:hover{
	margin: 0px;
	background: url("../images/block_h1.png") no-repeat;
}

.naviHowto a{
	width: auto; height: auto;
	text-decoration: none;
}

.naviClassLive a{
	width: auto; height: auto;
	text-decoration: none;
}

.naviCommunication a{
	width: auto; height: auto;
	text-decoration: none;
}

.naviAbout a{
	width: auto; height: auto;
	text-decoration: none;
}

.naviLogout a{
	width: auto; height: auto;
	text-decoration: none;
}

.naviUserName a{
	width: auto; height: auto;
	text-decoration: none;
}

/* Info */

.infoBox{
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
	display: block; float: left;
}

.infoBox img{
	width: auto; height: auto;
	margin: 0px; padding: 0px;
	display: block; float: left;
}

.infoNextSchool{
	width: auto; height: auto;
	margin: 0px;
	padding-top: 8px; padding-bottom: 6px;
	padding-left: 14px; padding-right: 14px;
	display: block; float: right;
	font-weight: bold; text-align: center;
	border-style: solid; border-width: 1px;
	border-color: #cccccc; border-radius: 5px;
	background-color: #ffffff;
}

/* Lists */

.usersList {
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
	list-style: none;
}

.userList:after{
	content: ""; display: block; clear: both;
}

.usersList li{
	margin: 5px; padding: 0px;
}

/* Topics */

.topics{
	width: 1000px; height: auto;
	margin: 0px; padding: 0px;
}

.topics:after{
	content: ""; display: block; clear: both;
}

.topics .gray{
	background-color: #999999;
}

.topics .red{
	background-color: #cc3300;
}

.topics .blue{
	background-color: #006699;
}

.topics .yellow{
	background-color: #eebb00;
}

.topics .green{
	background-color: #88cc33;
}

.topics .purple{
	background-color: #8833bb;
}

.topics .orange{
	background-color: #8833bb;
}

.topics .active{
	background-color: #ff6600;
}

.topics .inactive{
	background-color: #999999;
}

.topics .ad{
	background-color: #6666cc;
}

.topicsLeft{
	width: 460px; height: auto;
	margin: 0px; padding: 0px;
	display: block; float: left;
}

.topicsLeft:after{
	content: ""; display: block; clear: both;
}

.topicsLeft h1{
	width: auto; height: 73px;
	margin: 0px; padding: 0px;
}

.topicsRight{
	width: 530px; height: auto;
	margin: 0px; padding-top: 0px;
	display: block;
	float: right;
}

.topicsRight:after{
	content: ""; display: block; clear: both;
}

.params{
	width: 230px; height: auto;
	margin: 0px; padding: 0px;
	float: left; display: block;
}

.params:after{
	content: ""; display: block; clear: both;
}

.paramPaddingBox{
	width: 100%; height: 1px;
	margin-top: 4px; margin-bottom: 4px;
	padding: 0px; float: left;
	background-color: #cccccc;
}

.paramCounterBox{
	width: 125px; height: auto;
	margin: 0px; padding: 0px;
	float: left;
}

.paramCounterUser{
	width: 100%; height: 40px;
	margin-top: 2px; padding-top: 5px;
	float: left;
	font-size: 0.7rem; font-weight: bold;
	text-align: center;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 5px;
	background-color: #ffffff;
}

.paramCounterPlayer{
	width: 100%; height: 40px;
	margin-top: 2px; padding-top: 5px;
	float: left;
	font-size: 0.7rem; font-weight: bold;
	text-align: center;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 5px;
	background-color: #ffffff;
}

.paramCounterBlank{
	width: 100%; height: 105px;
	margin: 0px; padding: 0px
}

.paramIcon{
	width: 95px; height: 95px;
	margin: 2px; padding: 0px;
	float: right; display: block;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 0px;
	background-color: #ffffff;
}

.paramIcon img{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
	float: right; display: block;
}

.paramStatus{
	width: 98%; height: 63px;
	margin: 0px; padding: 1%;
	float: right;
	font-size: 1rem; font-weight: bold;
	text-align: center;
	border-style: solid; border-width: 1px;
	border-color: #eeeeee; border-radius: 0px;
	background-color: #eeeeee;
}

.paramStatus p{
	width: auto; height: auto;
	margin: 0px; padding: 2px;
	font-size: 0.75rem; font-weight: normal;
	text-align: center;
}

.appIcon{
	width: 130px; height: 130px;
	margin: 0px; padding: 5px;
	float: right; display: block;
	background-color: #cccccc;
}

.appIcon img{
	width: 130px; height: 130px;
	margin: 0px; padding: 0px;
	float: right; display: block;
	background-color: #cccccc;
}

/* ParamTool */

.paramPlayground{
	width: 230px; height: auto;
	margin: 0px; padding: 0px;
	float: left; display: block;
}

.paramPlayground:after{
	content: ""; display: block; clear: both;
}

.paramPlayground ul{
	margin: 0px; padding: 0px;
	list-style: none;
}

.paramPlayground li{
	width: 25%; height: auto;
	float: left; display: block;
	white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
}

.paramPlayground li a{
	margin: 0px;
	padding-top: 6px; padding-bottom: 6px;
	padding-left: 0px; padding-right: 0px;
	display: block; color: #ffffff;
	font-size: 10px; font-weight: bold;
	text-align: center; text-decoration: none;
}

.paramPlayground li a:hover{
	opacity: 0.8;
}

/* ParamSave */

.paramSave{
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
	display: block; float: left;
}

.paramSave:after{
	content: ""; display: block; clear: both;
}

.paramSave ul{
	margin: 0px; padding: 0px;
	list-style: none;
}

.paramSave li{
	width: auto; height: auto;
	margin: 0px; padding: 0px;
	float: left; display: block;
	overflow: hidden; text-overflow: ellipsis;
	white-space: nowrap;
}

.paramSave li a{
	width: 46px; height: 20px;
	margin: 0px; padding: 0px;
	float: left; display: block;
	font-size: 10px; font-weight: bold;
	text-align: center; text-decoration: none;
	line-height: 1.2rem; color: #ffffff;
}

.paramSave li a:hover{
	opacity: 0.8;
}

/* ParamText */

.paramText{
	width: 100%; height: auto;
	margin-top:  10px; margin-bottom: 0px;
	margin-left: 0px; margin-right: 0px;
	padding: 0px;
	float: left; display: block;
}

.paramText:after{
	content: ""; display: block; clear: both;
}

.paramText ul{
	margin: 0px; padding: 0px;
	list-style: none;
}

.paramText li{
	width: 25%; height: auto;
	float: left; display: block;
}

.paramText li a{
	margin: 0px;
	padding-top: 7px; padding-bottom: 7px;
	padding-left: 0px; padding-right: 0px;
	display: block;
	font-size: 10px; font-weight: bold;
	text-align: center; text-decoration: none;
	color: #ffffff;
}

.paramText li a:hover{
	opacity: 0.8;
}

/* Editor */

.editor{
	width: 1000px; height: auto;
	margin: 0px; padding: 0px;
	display: block;
}

.btnBox{
	width: auto; height: auto;
	margin-top: 0px; padding: 0px;
	display: block; float: left;
}

.btnUpload{
	width: auto; height: auto;
	margin: 0px 12px 0px 4px; padding: 0px;
	float: left;
}

.btnReset{
	width: auto; height: auto;
	margin: 0px 4px; padding: 0px;
	float: left;
}

.btnLoad{
	width: auto; height: auto;
	margin: 0px 4px; padding: 0px;
	float: left;
}

.btnSave{
	width: auto; height: auto;
	margin: 0px 4px; padding: 0px;
	float: left;
}

.btnPreserve{
	width: auto; height: auto;
	margin: 0px 4px; padding: 0px;
	float: left;
}

#submitUpload{
	width: auto; height: auto;
	margin: auto;
	padding: 8px 8px 8px 8px;
	border: none; cursor: pointer;
	color: #fff; background: #FF8500;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#submitDownload a{
	color: #fff;
}

#submitReset{
	width: auto; height: auto;
	margin: auto;
	padding: 8px 8px 8px 8px;
	border: none; cursor: pointer;
	color: #fff; background: #FF8500;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#submitLoad{
	width: auto; height: auto;
	margin: auto;
	padding: 8px 8px 8px 8px;
	border: none; cursor: pointer;
	color: #fff; background: #FF8500;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#submitSave{
	width: auto; height: auto;
	margin: auto;
	padding: 8px 8px 8px 8px;
	border: none; cursor: pointer;
	color: #fff; background: #FF8500;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#submitPreserve{
	width: auto; height: auto;
	margin: auto;
	padding: 8px 8px 8px 8px;
	border: none; cursor: pointer;
	color: #fff; background: #FF8500;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#submitSearch{
	width: auto; height: auto;
	margin: auto;
	padding: 8px 8px 8px 8px;
	border: none; cursor: pointer;
	color: #fff; background: #FF8500;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

#activeIcon{
	width: auto; height: auto;
	margin-top: 0px; padding: 0px;
	float: left;
}

/* Canvas */

.gameCanvas{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
}

.gameArcade{
	width: 320px; height: 480px;
	margin-left: auto; margin-right: auto;
	margin-top: 20px; margin-bottom: 10px;
	padding-left: 20px; padding-right: 20px;
	padding-top: 25px; padding-bottom: 25px;
	display: block;
	/*background: url("../images/arcade_back.png") no-repeat;*/
}

/* Icon */

.iconBox{
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
	list-style: none;
}

.iconBox:after{
	content: ""; display: block; clear: both;
}

.iconBox li{
	width: auto; height: auto;
	margin-left: 8px; margin-right: 8px;
	margin-top: 20px; margin-bottom: 0px;
	padding: 0px;
	display: block; float: left;
}

.iconBox div{
	width: 80px; height: 80px;
	margin: 0px; padding: 0px;
	display: block;
	font-size: 0.75rem; white-space: nowrap;
	text-decoration: none; text-align: center;
	border-style: solid; border-width: 1px;
	border-color: #999999; border-radius: 15px;
	background: url("../images/icon.png") no-repeat;
}

.iconBox a{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
	display: block;
}

.iconStatus{
	width: auto; height: auto;
	margin-top: 5px; margin-bottom: 0px;
	margin-left: 5px; margin-right: 5px;
	padding: 0px;
	font-size: 0.5rem; white-space: nowrap;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 5px;
}

.iconTitle{
	width: 80px; height: 25px;
	margin-top: 10px; margin-bottom: 0px;
	margin-left: 0px; margin-right: 0px;
	padding: 0px;
	font-size: 0.3rem; white-space: nowrap;
	text-decoration: none; text-align: center;
	overflow: hidden; text-overflow: ellipsis;
}

/* Files(Image) */

.fileImageBox{
	width: 100%; height: auto;
	margin: 0px; padding: 5px;
	list-style: none;
}

.fileImageBox:after{
	content: ""; display: block; clear: both;
}

.fileImageBox li{
	width: 70px; height: 70px;
	margin-top:  5px; margin-bottom: 32px;
	margin-left: 5px; margin-right: 5px;
	padding: 0px;
	display: block; float: left;
	border-style: solid; border-width: 1px;
	border-color: #999999; border-radius: 5px;
	text-decoration: none; text-indent: -9999px;
}

.fileImageBox a{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
	display: block;
}

.btnImagesCopy{
	width: 16px; height: 16px;
	margin-top:  5px;  margin-bottom: 0px;
	margin-left: 0px; margin-right:  5px;
	padding: 1px;
	display: block; float: right;
	cursor:pointer; border-style:none;
	font-size: 0rem; line-height: 0rem;
	background: url("../images/icons/Copy.png") no-repeat;
}

.btnImagesDelete{
	width: 16px; height: 16px;
	margin-top:  5px; margin-bottom: 0px;
	margin-left: 0px; margin-right: 5px;
	padding: 1px;
	display: block; float: right;
	cursor:pointer; border-style:none;
	font-size: 0rem; line-height: 0rem;
	background: url("../images/icons/Delete.png") no-repeat;
}

/* Files(Sound) */

.fileSoundBox{
	width: 100%; height: auto;
	margin: 0px; padding: 5px;
	list-style: none;
}

.fileSoundBox:after{
	content: ""; display: block; clear: both;
}

.fileSoundBox li{
	width: 32%; height: 70px;
	margin: 5px; padding: 0px;
	display: block; float: left;
}

.fileSoundBox audio{
	width: 100%; height: 50px;
	margin: 0px; padding: 0px;
	display: block;
}

.btnSoundsCopy{
	width: 16px; height: 16px;
	margin-top:  5px; margin-bottom: 0px;
	margin-left: 0px; margin-right:  5px;
	padding: 1px;
	display: block; float: right;
	cursor:pointer; border-style:none;
	font-size: 0rem; line-height: 0rem;
	background: url("../images/icons/Copy.png") no-repeat;
}

.btnSoundsDelete{
	width: 16px; height: 16px;
	margin-top:  5px; margin-bottom: 0px;
	margin-left: 0px; margin-right:  5px;
	padding: 1px;
	display: block; float: right;
	cursor:pointer; border-style:none;
	font-size: 0rem; line-height: 0rem;
	background: url("../images/icons/Delete.png") no-repeat;
}

.btnSoundsTitle{
	width: 260px; height: auto;
	margin-top:  0px; margin-bottom: 0px;
	margin-left: 5px; margin-right: 0px;
	padding: 1px;
	display: block; float: left;
	overflow: hidden;
}

/* Manifest */

.paramManifestBox{
	width: 100%; height: auto;
	margin-top: 5px; margin-bottom: 5px;
	padding: 0px;
	display: block; float: left;
	font-size: 0.8rem; white-space: nowrap;
}

.paramManifestBox:after{
	content: ""; display: block; clear: both;
}

.paramManifestBoxLeft{
	width: auto; height: auto;
	margin-top: 5px; padding: 0px;
	display: block; float: left;
	font-size: 0.5rem;
}

.paramManifestBoxRight{
	width: auto; height: auto;
	margin-top: 5px; padding: 0px;
	display: block; float: right;
	font-size: 0.5rem;
}

.paramManifestBox .inputBox{
	width: auto; height: auto;
	margin-top: 2px; margin-bottom: 3px;
	margin-left: 5px; margin-right: 5px;
	padding: 0px;
	display: block; float: left;
}

/* UnlockBox */

.unlockBox{
	width: 100%; height: auto;
	margin-top: 5px; margin-bottom: 5px;
	padding: 0px;
	display: block; float: left;
	font-size: 0.5rem; white-space: nowrap;
}

.unlockBox label{
	width: auto; height: auto;
	margin: 2px; padding: 5px;
	float: left; display: block;
	border: none; cursor: pointer;
	color: #333; background: #cccccc;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.unlockBox .inactive{
	color: #333; background: #cccccc;
}

.unlockBox .active{
	color: #fff; background: #FF8500;
}

.unlockBox label input[type="checkbox"]{
	width: auto; height: auto;
	margin: 0px; padding: 0px;
}

/* ImageUploader */

.imageUploaderBox{
	width: 100%; height: 70px;
	margin-left: 0px; margin-right: 0px;
	margin-top: 20px; margin-bottom: 20px;
	padding: 0px;
}

.imageUploaderBox:after{
	content: ""; display: block; clear: both;
}

.imageUploaderForm{
	width: auto; height: auto;
	margin-left: 0px; margin-right: 20px;
	margin-top: 0px; margin-bottom: 0px;
	padding: 0px;
	display: block; float: right;
}

.imageUploaderForm:after{
	content: ""; display: block; clear: both;
}

.imageUploaderForm input{
	margin: 0px; padding: 7px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 1px solid #C2C2C2;
	box-shadow: 1px 1px 4px #EBEBEB;
	-moz-box-shadow: 1px 1px 4px #EBEBEB;
	-webkit-box-shadow: 1px 1px 4px #EBEBEB;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	outline: none;
}

.imageUploaderForm input[type=submit],
.imageUploaderForm button{
	width: 120px; height: auto;
	margin: auto;
	padding: 8px 15px 8px 15px;
	border: none; cursor: pointer;
	color: #fff; background: #FF8500;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

/* Attendance */

.attendanceBox{
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
}

.attendanceBox:after{
	content: ""; display: block; clear: both;
}

.attendanceLeft{
	width: auto; height: auto;
	float: left;
}

.attendanceRight{
	width: 680px; height: auto;
	float: right;
}

.attendanceForm{
	width: 680px; height: auto;
	margin-top: 0px; margin-bottom: 10px;
	margin-left: 0px; margin-right: 0px;
	padding-top: 10px; padding-bottom: 10px;
	padding-left: 0px; padding-right: 0px;
	display: block; float: left;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 5px;
	background-color: #fefefe;
}

.attendanceForm:after{
	content: ""; display: block; clear: both;
}

.attendanceRow{
	width: 660px; height: auto;
	margin-top: 0px; margin-bottom: 0px;
	margin-left: 10px; margin-right: 10px;
	padding: 0px;
	float: left; display: block;
}

.attendanceRow:after{
	content: ""; display: block; clear: both;
}

.attendanceRowLeft{
	width: auto; height: auto;
	margin: 0px; padding: 0px;
	float: left; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
}

.attendanceRowRight{
	width: auto; height: auto;
	margin: 0px; padding: 0px;
	float: right;
	text-align: right;
}

.attendanceRowStudents{
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
	float: left;
	text-align: left;
}

.attendanceRow .true{
	width: 70px; height: auto;
	margin: 5px; padding: 5px;
	text-align: center; font-weight: normal;
	color: #ffffff;
	background-color: #cc3300;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 5px;
}

.attendanceRow .false{
	width: 70px; height: auto;
	margin: 5px; padding: 5px;
	text-align: center; font-weight: normal;
	color: #ffffff;
	background-color: #006699;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 5px;
}

.attendanceRow .active{
	width: 70px; height: auto;
	margin: 5px; padding: 5px;
	text-align: center; font-weight: normal;
	color: #ffffff;
	background-color: #8833bb;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 5px;
}

.toggleAttendanceBox{
	width: auto; height: auto;
	margin: 2px; padding: 0px;
	display: block; float: right;
}

.toggleAttendanceTrue{
	width: 75px; height: 33px;
	margin-top: 0px; margin-bottom: 0px;
	margin-left: 5px; margin-right: 0px;
	display: block; float: left;
	cursor:pointer; border-style:none;
	font-size: 0rem; line-height: 0rem;
	background: url("../images/btn_attendance_false.png") no-repeat;
}

.toggleAttendanceFalse{
	width: 75px; height: 33px;
	margin-top: 0px; margin-bottom: 0px;
	margin-left: 5px; margin-right: 0px;
	display: block; float: left;
	cursor:pointer; border-style:none;
	font-size: 0rem; line-height: 0rem;
	background: url("../images/btn_attendance_true.png") no-repeat;
}

/* Release Indexes */
.releaseNavBox{
	width: 100%; height: auto;
	margin-top: 0px; margin-bottom: 20px;
	margin-left: 10px; margin-right: 0px;
	list-style: none;
}

/* PoweredBy */

.poweredby{
	width: 240px; height: 20px;
	margin: 0px; padding-top: 30px;
	margin-left: auto; margin-right: auto;
	font-size: 0.5rem; font-weight: normal;
	text-align: center; color: #888888;
	background: url("../images/poweredby.png") no-repeat;
	background-position: bottom;
}

/* Whiteboard */

#whiteboardBox{
	width: 450px; height: auto;
	margin: 0px; padding: 0px;
	float: left; display: block;
	background-color: #ffffff;
}

#whiteboard{
	width: 430px; height: auto;
	margin: 10px; padding: 0px;
	background-color: #ffffff;
	color: #333333;
	font-size: 0.75rem; line-height: 1.5rem;
	word-wrap: break-word;
}

.wStatus{
	width: auto; height: auto;
	margin: 5px;
	padding-top: 5px; padding-bottom: 5px;
	padding-left: 5px; padding-right: 10px;
	float: right; display: block;
	color: #ffffff;
	background-color: #cccccc;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 5px;
}

#wOnline{
	color: #ffffff;
	background-color: #006699;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 5px;
}

#wOffline{
	color: #ffffff;
	background-color: #996600;
	border-style: solid; border-width: 1px;
	border-color: #dddddd; border-radius: 5px;
}

#wCharacter{
	width: 32px; height: auto;
	margin-left: 5px; padding: 0px;
	float: left; display: block;
}

#wWord{
	width: auto; height: auto;
	margin-top: 5px; margin-left: 5px;
	padding: 0px;
	float: right; display: block;
}

/* QRCode */

#qrBox{
	width: 140px; height: 140px;
	margin-left: 8px; padding: 0px;
	float: right; display: block;
	background-color: #dddddd;
	border-radius: 8px;
}

/* Dropzone */

#dropzoneBox{
	width: 140px; height: 140px;
	margin-left: 8px; padding: 0px;
	float: right; display: block;
	background-color: #dddddd;
	border-radius: 8px;
}

.dStatus{
	width: 100%; height: 0px;
}

#dSuccess{
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
	color: #ffffff;
	background: url("../images/bkg_result.png") #006699;
	background-image: linear-gradient(
		-45deg, #3399cc 25%, #006699 25%, #006699 50%,
		#3399cc 50%, #3399cc 75%, #006699 75%, #006699);
	background-size: 8px 8px;
}

#dError{
	width: 100%; height: auto;
	margin: 0px; padding: 0px;
	color: #ffffff;
	background-image: linear-gradient(
		-45deg, #cc6699 25%, #cc3300 25%, #cc3300 50%,
		#cc6699 50%, #cc6699 75%, #cc3300 75%, #cc3300);
	background-size: 8px 8px;
}

#dWord{
	width: 100%; height: auto;
	margin: 0px; padding: 3px 0px;
	text-align: center;
}

/* Table(Database) */
.tableDB{
	width: 100%; height: auto;
	margin-bottom: 15px; padding: 0px;
	table-layout: fixed;
}

.tableDB th{
	width: auto; height: auto;
	margin: 0px; padding: 0px;
	font-size: 0.75rem; white-space: nowrap;
	text-decoration: none; text-align: center;
	overflow: hidden; text-overflow: ellipsis;
	border-bottom: solid; border-width: 1px;
	background-color: #cccccc;
}

.tableDB td{
	width: auto; height: auto;
	margin: 0px;
	padding-left: 0px; padding-right: 0px;
	padding-top: 3px; padding-bottom: 3px;
	font-size: 0.8rem; white-space: nowrap;
	text-decoration: none; text-align: center;
	border-bottom: solid; border-width: 1px;
	border-color: #cccccc;
}

.tableDB .odd{
	background-color:#eeeeee;
}

.tableDB .even{
	background-color:#dddddd;
}

.tableDB .thIndex{
	width: 40px; height: auto;
}

.tableDB .thShort{
	width: 110px; height: auto;
}

.tableDB .thMiddle{
	width: 140px; height: auto;
}

.tableDB .thLong{
	width: auto; height: auto;
}

.tableDB .thCategory{
	width: 155px; height: auto;
}

.tableDB .thFile{
	width: 230px; height: auto;
}

.tableDB .thBtn{
	width: 60px; height: auto;
}

.tableDB .text{
	width: 90%; /*height: auto*/;
}

.tableDB .checkbox{
	width: auto; height: auto;
}

.tableDB .body{
	width: auto; height: auto;
	text-align: left; overflow: auto;
}

.tableDB button{
	width: 95%; height: auto;
	margin: auto;
	padding: 8px 5px 8px 5px;
	border: none; cursor: pointer;
	color: #fff; background: #FF8500;
	box-shadow: 1px 1px 4px #DADADA;
	-moz-box-shadow: 1px 1px 4px #DADADA;
	-webkit-box-shadow: 1px 1px 4px #DADADA;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

.tableDB input[type="text"]{
	width: 80%; height: auto;
	margin: 0px; padding: 5px;
}

/* Terms */
.terms{
	font-size: 0.75rem; line-height: 1.5rem;
}

.terms p{
	margin: 0px; padding: 0px 10px 35px 10px;
}

.terms ul{
	margin: 0px; padding-bottom: 35px;
}

.terms ol{
	margin: 0px; padding-bottom: 35px;
}

/* About */
.about{
	font-size: 0.75rem; line-height: 1.5rem;
}

.about p{
	margin: 0px; padding: 0px 10px 35px 10px;
}

.about ul{
	margin: 0px; padding-bottom: 35px;
}

.about ol{
	margin: 0px; padding-bottom: 35px;
}

/* Saloon */

.saloonOuter{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
	position: absolute;
}

.saloonInner{
	width: 256px; height: 300px;
	margin-top: -108px; margin-left: -128px;
	position: absolute;
	left: 50%; top: 100%;
	background: url("../images/fc_body.png") no-repeat;
}

.saloonBackground{
	width: 100%; height: 100%;
}

.saloonInner #comText{
	width: auto; height: auto;
	margin: 0px; padding: 0px;
	position: absolute;
	left: 110px; top: 20px;
}

.saloonInner #btnA{
	width: 32px; height: 48px;
	margin: 0px; padding: 0px;
	display: block; border: 0px;
	position: absolute; cursor:pointer;
	left: 175px; top: 48px;
	background: url("../images/fc_btn_a.png") no-repeat;
    font-size: 0rem; line-height: 0rem;
}

.saloonInner #btnB{
	width: 32px; height: 48px;
	margin: 0px; padding: 0px;
	display: block; border: 0px;
	position: absolute; cursor:pointer;
	left: 210px; top: 48px;
	background: url("../images/fc_btn_b.png") no-repeat;
    font-size: 0rem; line-height: 0rem;
}

/* Error Log */
.errorBox{
	width: auto; height: auto;
	margin: 0px; padding: 0px;
	position: fixed;
	right: 0px; bottom: 0px;
}

.errorBox i{
	color: #cc3333;
	font-size: 0.5rem; font-weight: bold;
}

.errorBox strong{
	color: #cc3333;
	font-size: 0.5rem; font-weight: bold;
}

.errorBox ul{
	margin: 0px; padding: 0px;
	list-style: none;
}

.errorBox li{
	margin: 0px 0px 0px 0px;
	padding: 0px 5px 2px 5px;
	background-color: #ffdddd;
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #cc3333;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #ffffff;
}

/* Code Prettify */
.cd-btn-open{
	width: 60px; height: auto;
	margin: 30px 0px; padding: 5px 10px;
	top: 0px; left: -60px;
	position: absolute;
    background-color: #006699;
    color: #ffffff;
	font-size: 18px; font-family: Arial;
	line-height: 20px; text-decoration: none;
    background-color: #006699;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.cd-btn-open a{
	margin: 0 16px;
    text-decoration: none;
    color: #ffffff;
}

.cd-btn-close{
	width: 60px; height: auto;
	margin: 30px 0px; padding: 5px 10px;
	top: 0px; left: -60px;
	position: absolute;
    background-color: #006699;
    color: #ffffff;
	font-size: 18px; font-family: Arial;
	line-height: 20px; text-decoration: none;
    background-color: #006699;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.cd-btn-close a{
	margin: 0 16px;
    text-decoration: none;
    color: #ffffff;
}

/* Accordion */

#panelBox{
	width: 100%; height: auto;
	display: block; float: left;
}

#panelBox > dt{
	margin: 0px; padding: 8px;
	background: #00BCD4 url("../images/bkg_accordion.png");
	background-repeat: no-repeat;
	background-position: right bottom;
	border-bottom: solid 1px white; border-radius: 5px;
	color: white; cursor: pointer;
	font-weight: bold;
}

#panelBox > dd{
	margin: 0px; padding: 0px;
}

/* CodePrettify */

.ex-code-prettify pre{
	max-width: 100%;
	max-height: 700px;
	overflow-x: scroll;
	overflow-y: scroll;
}

.ex-code-prettify text{
	max-width: 100%;
	max-height: 700px;
	overflow-x: scroll;
	overflow-y: scroll;
}

/* CodePrettify */

#gameDocsText iframe{
	width: 100%; height: 600px;
	border-width: 0px;
}