body{
	margin: 0px;
	box-sizing: border-box;
	font-family: Microsoft JhengHei;
	font-size: 16px;
}

div.frame{
	border-color: silver;
	border-style: solid;
	border-width: 1px;
	border-radius: 4px;
	padding: 3px;
	display: inline-flex;
	position: relative;
	background-color: rgba(0,0,0,0);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

#mybox{
	padding-bottom: 65px;
}

.btn{
	border: 1px solid rgba(100,100,100,0.35);
	border-radius: 3px;
	padding: 3px 7px;
	background-color: rgba(255,255,255,0.95);
	color: #666;
	font-size: 15px;
	font-weight: normal;
	font-family: Microsoft YaHei;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn:active{
	box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

.btn:focus{
	outline: none;	
}

.typcn:before{
	font-size: 19px;
}

#btn-play{
	position: absolute;
	right: 3%;
	bottom: 11px;
}

.panel{
	box-sizing: border-box;
	background: rgba(255,255,255,0.97);
	border: 1px solid #ccc;
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
	border-radius: 3px;
}

div#switch{
	position: absolute;
	right: 3%;
	bottom: 11px;
	padding: 1px 7px;
}
div#switch table tr td:nth-child(2){
	padding-left: 7px;
}
div#switch label:hover{
	cursor: pointer;
}
div#switch label input:hover{
	cursor: pointer;
}






/* general settings */
#mysvg{
	height: 320px;
	width: 450px;
}

#mysvg .light-in .light{
	stroke-dasharray: 128, 128;
}
#mysvg .light-in .arrow{
	stroke-dasharray: 13, 13;
}
#mysvg .light-out .light{
	stroke-dasharray: 116, 116;
}
#mysvg .light-out .arrow{
	stroke-dasharray: 15, 15;
}


/* initial state */
#mysvg.init .light-in .light{
	stroke-dashoffset: 128;
}
#mysvg.init .light-in .arrow{
	stroke-dashoffset: 13;
}
#mysvg.init .light-out .light{
	stroke-dashoffset: 116;
}
#mysvg.init .light-out .arrow{
	stroke-dashoffset: 15;
}

#mysvg.init .plane1{
	visibility: hidden;
	opacity: 0;
}
#mysvg.init .plane2{
	visibility: hidden;
	opacity: 0;
}

#mysvg.init .light-in-label{
	visibility: hidden;
	opacity: 0;
}
#mysvg.init .light-out-label{
	visibility: hidden;
	opacity: 0;
}


/* first state */
#mysvg.first.animate .light-in .light{
	transition: stroke-dashoffset 2s linear 0s;
	-webkit-transition: stroke-dashoffset 2s linear 0s;
}
#mysvg.first.animate .light-in .arrow{
	transition: stroke-dashoffset 0.5s linear 1s;
	-webkit-transition: stroke-dashoffset 0.5s linear 1s;
}
#mysvg.first.animate .light-out .light{
	transition: stroke-dashoffset 3s linear 2s;
	-webkit-transition: stroke-dashoffset 3s linear 2s;
}
#mysvg.first.animate .light-out .arrow{
	transition: stroke-dashoffset 0.5s linear 4s;
	-webkit-transition: stroke-dashoffset 0.5s linear 4s;
}
#mysvg.first.animate .plane1{
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.3s linear 6s;
	-webkit-transition: visibility 0s, opacity 0.3s linear 6s;
}
#mysvg.first.animate .light-in-label{
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.3s linear 0.2s;
	-webkit-transition: visibility 0s, opacity 0.3s linear 0.2s;
}
#mysvg.first.animate .light-out-label{
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.3s linear 4.8s;
	-webkit-transition: visibility 0s, opacity 0.3s linear 4.8s;
}

#mysvg.first .plane1{
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.3s;
	-webkit-transition: visibility 0s, opacity 0.3s;
}
#mysvg.first .plane2{
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.3s, opacity 0.3s;
	-webkit-transition: visibility 0s linear 0.3s, opacity 0.3s;
}
#mysvg.first .glass{
	opacity: 1;
	visibility: visible;
	transition: visibility 0s, opacity 0.3s;
	-webkit-transition: visibility 0s, opacity 0.3s;
}
#mysvg.first .light-out{
	opacity: 0.65;
}
#mysvg.first .light-out-label .part-inside{
	opacity: 0.5;
}



/* second state */
#mysvg.second .plane1{
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 0.2s, opacity 0.2s;
	-webkit-transition: visibility 0s, opacity 0.3s linear 5.5;
}
#mysvg.second .plane2{
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.3s;
	-webkit-transition: visibility 0s, opacity 0.3s;
}
#mysvg.second .glass{
	opacity: 0;
	visibility: hidden;
	transition: visibility 0s linear 0.3s, opacity 0.3s;
	-webkit-transition: visibility 0s linear 0.3s, opacity 0.3s;
}
#mysvg.second .light-out{
	opacity: 1;
}
#mysvg.second .light-out-label .part-inside{
	opacity: 1;
}


/* controls */
#btn-play.init{
	opacity: 1;
	visibility: visible;
}
#switch.init{
	visibility: hidden;
	opacity: 0;
}

#btn-play.start{
	opacity: 0;
	visibility: hidden;
	transition: visibility 0s linear 0.15s, opacity 0.15s;
	-webkit-transition: visibility 0s linear 0.15s, opacity 0.15s;
}
#switch.start{
	opacity: 1;
	visibility: visible;
	transition: visibility 0s linear 7s, opacity 0.3s linear 7s;
	-webkit-transition: visibility 0s linear 7s, opacity 0.3s linear 7s;
}