@import url("./typicons/typicons.min.css");

body{
	margin: 0px;
	font-family: Microsoft JhengHei, MHei, Hei, Verdana, Geneva, sans-serif;
}

#frame{
	width: 430px;
	height: 530px;
	position: relative;
	border-color: DarkGray;
	border-style: solid;
	border-width: 1px;
	border-radius: 4px;
}

#mysvg{
	margin-top: 10px;
	margin-right: 15px;
}

#mysvg .area.show{
	transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	transition-delay: 0.2s;
	-webkit-transition-delay: 0.2s;
}

#mysvg .area.hide{
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	transition-delay: 0s;
	-webkit-transition-delay: 0s;
	opacity: 0;
}


.state-show{
	top: 228px;
	height: 120px;
	width: 140px;
	position: absolute;
	border: 1px solid #aaa;
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0,0,0,0.15);
	overflow: hidden;
}

#state-from{
	left: 45px;
}

#state-to{
	right: 45px;
}

.state-show .state{
	transition-duration: 0.7s;
	-webkit-transition-duration: 0.7s;
	position: absolute;
	width: 120px;
	left: 10px;
	top: 6px;
}

.state-show .state.left{
	transform: translate3d(-150px, 0, 0);
	-webkit-transform: translate3d(-150px, 0, 0);
}

.state-show .state.right{
	transform: translate3d(150px, 0, 0);
	-webkit-transform: translate3d(150px, 0, 0);
}


#arrow{
	position: absolute;
	top : 268px;
	left: 196px;
	font-size: 40px;
	color: rgba(0,0,0,0.35);
}


#textbox{
	width: 82%;
	position: absolute;
	left: 10%;
	top: 378px;
}


.text{
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	font-size: 16px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	line-height: 1.7;
}

.text.hide{
	opacity: 0;
}

.text.show{
	opacity: 1;
}

.text .definition{
	font-weight: bold;
	color: #da352f;
}


.btn{
	font-size: 14px;
	border-color: DarkGray;
	border-style: solid;
	border-width: 1px;
	box-shadow: 0 1px 1px rgba(0,0,0,0.25);
	height: 38px;
	width: 44px;
	border-radius: 6px;
	background: rgba(0,0,0,0.04);
	transition: opacity 0.2s;
	-webkit-transition: opacity 0.25s;
}

.btn .label{
	font-size: 34px;
	position: absolute;
	left: 4px;
	bottom: 2px;
	color: rgba(0,0,0,0.31);
}

.btn:focus{
	outline: none;
}

.btn:active{
	box-shadow: inset 0 0 2px rgba(0,0,0,0.25);
}

.btn:disabled{
	opacity: 0.4;
}


#next-btn{
	position: absolute;
	right: 20px;
	bottom: 11px;
}

#last-btn{
	position: absolute;
	left: 20px;
	bottom: 11px;
}