@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

* {
	padding:0px;
	margin:0px;
	border:0px;
	
	font-family:Arial;
	font-size:16px;
	text-decoration:none;
}

/*폰트 설정*/
.yellow {
	color:yellow;
}



body {
	background-color:#505050;
}
	p, span {
		font-size:inherit;
	}
	
#wrapper {
	position:relative;
	overflow:hidden;
	
	margin:0px auto;
	width:600px;
	height:400px;
	
	background:#303030;
	
	color:white;
}








#frame_loading {
	position:relative;
	
	width:100%;
	height:100%;
	
	display:inline-block;
}
	#loading_notice {
		position:static;
		
		margin-top:70px;
		
		width:100%;
		
		font-size:40px;
		font-weight:bold;
		text-align:center;
	}

	#loading_start {
		position:absolute;
		top:200px;
		left:190px;
		
		width:220px;
		height:60px;
		
		background: #FFFFFF; /* default */
		background: -moz-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #A0A0A0));
		background: -ms-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: linear-gradient(to bottom, #ffffff, #A0A0A0);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#A0A0A0)";
		
		border:1px gray outset;
		border-radius:10px;
		
		font-size:40px;
		font-weight:bold;
	}
		#loading_start:hover {
			box-shadow:0 0 3pt 2pt white;
			cursor:pointer;
			cursor:hand;
		}
		#loading_start:active {
			background: #DEDEDE;
		}	
	
	#loading_progress {
		position:absolute;
		left:9px;
		bottom:69px;
		
		width:580px;
		height:50px;
		
		background:black;
		border:1px gray solid;
	}
		#loading_bar {
			position:absolute;
			top:0px;
			left:0px;
			
			width:0%;
			height:100%;
			
			background:yellow;
		}







#frame_intro {
	position:relative;
	
	width:100%;
	height:100%;
	
	display:none;
}
	#frame_intro p {
		font-size:75px;
		font-weight:bold;
	}
	
	#intro_logo {
		position:absolute;
		left:10px;
		bottom:10px;
		
		width:250px;
		height:auto;
	}
	
	.intro_start {
		position:absolute;
		
		width:150px;
		height:40px;
		
		background: #FFFFFF; /* default */
		background: -moz-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #A0A0A0));
		background: -ms-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: linear-gradient(to bottom, #ffffff, #A0A0A0);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#A0A0A0)";
		
		border:1px gray outset;
		border-radius:10px;
		
		font-size:20px;
		font-weight:bold;
	}
			#intro_start_1 {
				right:190px;
				bottom:170px;
			}
			#intro_start_2 {
				right:190px;
				bottom:120px;
			}
			#intro_start_3 {
				right:190px;
				bottom:70px;
			}
			#intro_start_4 {
				right:20px;
				bottom:170px;
			}
			#intro_start_5 {
				right:20px;
				bottom:120px;
			}
			#intro_start_6 {
				right:20px;
				bottom:70px;
			}
			#intro_start_7 {
				right:105px;
				bottom:15px;
			}
		.intro_start:hover {
			box-shadow:0 0 3pt 2pt white;
			cursor:pointer;
			cursor:hand;
		}
		.intro_start input[type="button"]:active {
			background: #DEDEDE;
		}







		
		
		
		
		
		
		
#frame_ready {
	position:relative;
	
	padding:5px;
	width:100%;
	height:100%;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	
	display:none;
}
	#frame_ready p {
		font-size:30px;
		font-weight:bold;
	}
		#frame_ready p.title {
			margin-bottom:;
		}
	#frame_ready hr {
		border-top:1px white solid;
	}
	
	#ready_image_go {
		overflow-y:scroll;
		
		margin-left:30px;
		width:550px;
		height:150px;
		
		border:1px white solid;
	}
		#ready_image_go img {
			float:left;
			
			margin:-1px 0px 0px -1px;
			
			border:1px gray solid;
			-moz-box-sizing:border-box;
			-webkit-box-sizing:border-box;
			box-sizing:border-box;
			
			display:block;
		}
	
	#ready_image_no {
		position:relative;
		overflow:hidden;
		
		margin-left:30px;
		width:100px;
		height:120px;
		
		border:1px white solid;
		
		font-size:20px;
		font-weight:bold;
		text-align:center;
		line-height:120px;
	}
		#ready_image_no img {
			height:120px;
			
			-moz-box-sizing:border-box;
			-webkit-box-sizing:border-box;
			box-sizing:border-box;
		}
	
	#ready_reset {
		position:absolute;
		right:10px;		
		top:5px;
		
		width:120px;
		height:30px;
		
		background: #FF6A00; /* default */
		background: -moz-linear-gradient(top center, #FFFFFF, #FF6A00);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #FF6A00));
		background: -ms-linear-gradient(top center, #FFFFFF, #FF6A00);
		background: linear-gradient(to bottom, #ffffff, #FF6A00);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#FF6A00)";
		
		border:1px gray outset;
		border-radius:10px;
		
		font-size:20px;
		font-weight:bold;
	}
		#ready_reset:hover {
			box-shadow:0 0 3pt 2pt white;
			cursor:pointer;
			cursor:hand;
		}
		#ready_reset:active {
			background: #FFAA00;
		}
		
	#ready_start {
		position:absolute;
		right:10px;
		bottom:10px;
		
		width:250px;
		height:80px;
		
		background: #FFFFFF; /* default */
		background: -moz-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #A0A0A0));
		background: -ms-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: linear-gradient(to bottom, #ffffff, #A0A0A0);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#A0A0A0)";
		
		border:1px gray outset;
		border-radius:10px;
		
		font-size:50px;
		font-weight:bold;
	}
		#frame_ready input[type="button"]:hover {
			box-shadow:0 0 3pt 2pt white;
			cursor:pointer;
			cursor:hand;
		}
		#frame_ready input[type="button"]:active {
			background: #DEDEDE;
		}







#frame_battle {
	position:relative;
	
	padding:5px;
	width:100%;
	height:100%;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	
	display:none;
}
	#frame_battle p {
		font-size:30px;
		font-weight:bold;
		
		display:block;
	}
		#frame_battle p.left {
			float:left;
		}
		#frame_battle p.right {
			float:right;
		}
	#frame_battle hr {
		clear:both;
		border-top:1px white solid;
	}
	
	.battle_img {
		position:absolute;
		overflow:hidden;
		
		width:250px;
		height:300px;
		
		background:black;
		outline:1px white solid;
		
		text-align:center;
		
		/* IE 8 */
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

		/* IE 5-5 */
		filter: alpha(opacity=50);

		/* Netscape */
		-moz-opacity: 0.5;

		/* Safari 1.x */
		-khtml-opacity: 0.5;

		/* Good browsers */
		opacity: 0.5;
	}
		#battle_img_left {
			top:50px;
			left:10px;
		}
		#battle_img_right {
			top:50px;
			right:10px;
		}
		.battle_img.selectable:hover, .battle_img.winner {
			outline:3px yellow solid;
			
			cursor:pointer;
			cursor:hand;
			
			/* IE 8 */
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

			/* IE 5-7 */
			filter: alpha(opacity=100);

			/* Netscape */
			-moz-opacity: 1;

			/* Safari 1.x */
			-khtml-opacity: 1;

			/* Good browsers */
			opacity: 1;
		}
	
	.battle_name {
		position:absolute;
		
		width:200px;
		height:25px;
		
		border-bottom:1px white solid;
		
		font-size:16px;
		font-weight:bold;
		text-align:center;
		line-height:25px;
	}
		#battle_name_left {
			bottom:15px;
			left:35px;
		}
		#battle_name_right {
			bottom:15px;
			right:35px;
		}
		
		
	.battle_winner {
		position:absolute;
		z-index:5;
		
		width:200px;
		height:auto;
		
		display:none;
	}
		#battle_winner_left {
			top:280px;
			left:35px;
		}
		#battle_winner_right {
			top:280px;
			right:35px;
		}
	
	
	#battle_img_vs {
		position:absolute;
		top:140px;
		left:265px;
		
		width:70px;
	}
	#battle_random {
		position:absolute;
		top:200px;
		left:270px;
		
		width:60px;
		height:30px;
		
		background: #FFFFFF; /* default */
		background: -moz-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #A0A0A0));
		background: -ms-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: linear-gradient(to bottom, #ffffff, #A0A0A0);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#A0A0A0)";
		
		border:1px gray outset;
		border-radius:3px;
		
		font-size:25px;
		font-weight:bold;
		line-height:100%;
	}
		#battle_random:hover {
			box-shadow:0 0 3pt 2pt skyblue;
			cursor:pointer;
			cursor:hand;
		}
		#battle_random:active {
			background:skyblue;
		}

	
	#battle_reset {
		float:right;
		
		margin-left:10px;
		width:120px;
		height:30px;
		
		background: #FF6A00; /* default */
		background: -moz-linear-gradient(top center, #FFFFFF, #FF6A00);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #FF6A00));
		background: -ms-linear-gradient(top center, #FFFFFF, #FF6A00);
		background: linear-gradient(to bottom, #ffffff, #FF6A00);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#FF6A00)";
		
		border:1px gray outset;
		border-radius:10px;
		
		font-size:20px;
		font-weight:bold;
	}
		#battle_reset:hover {
			box-shadow:0 0 3pt 2pt white;
			cursor:pointer;
			cursor:hand;
		}
		#battle_reset:active {
			background: #FFAA00;
		}
		
		
		
		
		


#frame_victory {
	position:relative;
	
	padding:5px;
	width:100%;
	height:100%;
	
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	
	display:none;
}
	#frame_victory p {
		font-size:60px;
		font-weight:bold;
	}

	#victory_img {
		position:absolute;
		top:50px;
		left:175px;
		
		width:250px;
		height:300px;
		
		background:black;
		outline:1px white solid;
		
		text-align:center;
	}
	
	#victory_winner {
		position:absolute;
		top:280px;
		left:200px;
		z-index:5;
		
		width:200px;
		height:auto;
	}
	#victory_name {
		position:absolute;
		bottom:15px;
		left:200px;
		
		width:200px;
		height:25px;
		
		border-bottom:1px white solid;
		
		color:yellow;
		font-size:16px;
		font-weight:bold;
		text-align:center;
		line-height:25px;
	}
	
	#victory_return {
		position:absolute;
		right:10px;
		bottom:10px;
		
		width:150px;
		height:50px;
		
		background: #FFFFFF; /* default */
		background: -moz-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #FFFFFF), color-stop(1.00, #A0A0A0));
		background: -ms-linear-gradient(top center, #FFFFFF, #A0A0A0);
		background: linear-gradient(to bottom, #ffffff, #A0A0A0);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#A0A0A0)";
		
		border:1px gray outset;
		border-radius:10px;
		
		font-size:30px;
		font-weight:bold;
	}
		#victory_return:hover {
			box-shadow:0 0 3pt 2pt white;
			cursor:pointer;
			cursor:hand;
		}
		#victory_return:active {
			background: #DEDEDE;
		}

		
/*=================================================================================================*/
/*※ EX-1. 이미지 선로딩 저장소*/
/*=================================================================================================*/
#imagePreloader {
	width:1px;
	height:1px;
	
	display:none;
}

/*=================================================================================================*/
/*※ EX-2. 기타*/
/*=================================================================================================*/





/*모바일 스크롤바 가시화*/
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    background-color: #ffffff; 
}