@charset "UTF-8";

/****************************************
			General
****************************************/

body {
	font-family: "ËÎÌå";
	line-height:1.5;
	font-size: 75%;
	height:100%;
	width:100%;
	color:#002539;
	background:url(images/bg.gif) repeat-y center;
}

img, div { behavior: url(iepngfix.htc) }
button {
	margin:0;
	padding:0;
	background:none;
	border:none;
	outline:none;
	border:0px;
}
button:active , button:hover {
	margin:0;
	padding:0;
	outline:none;
}
button::-moz-focus-inner{
    border:0px;
}

/****************************************
			Link
****************************************/
a:link,a:visited {color:#e5004f;text-decoration:none;}
a:hover,a:active {color:#e5004f;text-decoration:none;}

#header nav a:link,#header nav a:visited {color:#002539;text-decoration:none;}
#header nav a:hover,#header nav a:active {color:#e5004f;text-decoration:none;}


/****************************************
			Class
****************************************/
.f_l {float:left;}
.f_r {float:right;}

/* clearfix */
.cf:before,.cf:after {content:"";display:block;overflow:hidden;}
.cf:after {clear:both;}
.cf {zoom:1;}/* For IE 6/7 */

.red {color:#e5004f;}
.orange {color:orange;margin-right:12px;}

/****************************************
			Layout
****************************************/
#wrapper {}
.container {width:960px;margin:0 auto;}

/* Header */
#header {position:fixed;top:0;z-index:100;width:100%;background:white;}
header {
	border-bottom:1px #d2d2d2 dashed;
	width:100%;
	height:84px;
	
}
	header h1 {
		font-size:36px;
		font-family: 'ËÎÌå', sans-serif;
		line-height:1;
		float:left;
	}
		#title_sub {font-size:14px;color:#002539;}
	header nav {float:right;font-size:14px;padding-top:24px;}
		header nav li {float:left;margin-right:18px;}
		header nav a {
			padding:6px 12px 6px 18px;
			display:block;
		}
			#navHun {background:url(images/icon_h.gif) center left no-repeat;}
			#navRan {background:url(images/icon_r.gif) center left no-repeat;}
			#navFor {background:url(images/icon_f.gif) center left no-repeat;}

			
/* Info */
#info {
	border-top:1px #d2d2d2 solid;
	width:100%;
	margin-top:3px;
}
	#info .container {
		background:#313131;
		-moz-border-radius:0 0 4px 4px;
		-webkit-border-radius:0 0 4px 4px;
		-khtml-border-radius:0 0 4px 4px;
		border-radius:0 0 4px 4px;
		color:white;
		padding:6px 12px;
	}
	#info h2 {display:inline;margin-right:18px;}
	#lvPrint {
		background:none;
		width:24px;
		padding:0;
		margin:-2px 18px 0 0;
		border:none;
		color:#e5004f;
		font-family: 'Questrial', sans-serif;
		font-size:18px;
	}
	#reset {
		font-size:12px;
		background:#666;
		border:none;
		padding:0 6px;
		margin:-2px 48px 0 0;
		color:white;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		-khtml-border-radius:4px;
		border-radius:4px;
		}
	#reset:hover {color:#e5004f;background:#ddd;}


/* Main */
#overlay {
	width:100%;
	height:100%;
	position:absolute;
	z-index:800;
	background:url(images/bg_white.png);
	display:none;
}
	#textDisp , #urlDisp {display:none;}
	.overBox {
		width:680px;
		margin:240px auto;
		background:#eee;
		border:1px solid #ddd;
		text-align:center;
		padding:24px;
	}
		#urlBox {width:90%;height:14px;font-size:12px;}
		#textBox {width:90%;height:240px;font-size:12px;}
	
	
	#closeBtn {margin-top:24px;}

#main {padding:160px 0 0 0;z-index:15;}
	#top {padding:0 36px;}
	#twitter {margin-top:24px;font-size:18px;}
	#tweet {margin:12px 0 0 18px;}
	
	canvas {position:absolute;}
	
	.skills {position:relative;height:584px}

		.row1 {left:14px;}
		.row2 {left:174px;}
		.row3 {left:334px;}
		.row4 {left:494px;}
		.row5 {left:654px;}
		.row6 {left:814px;}
		
		.col1 {top:0px}
		.col2 {top:84px}
		.col3 {top:168px}
		.col4 {top:252px}
		.col5 {top:336px}
		.col6 {top:420px}
		.col7 {top:504px}
		.col8 {top:588px}
		
		.skill {
			width:132px;
			height:34px;
			position:absolute;
			background:white;
			border:1px solid #d2d2d2;
			-moz-border-radius:4px 0 0 0;
			-webkit-border-radius:4px 0 0 0;
			-khtml-border-radius:4px 0 0 0;
			border-radius:4px 0 0 0;
		}
			.req {
				position:absolute;
				top:-18px;
				left:0;
				font-size:10px;
				padding:0 0 0 14px;
				background:url(images/icon_lock.png) left center no-repeat;
			}
			.req0 {display:none;
			}
				.req li {list-style:none;}
			.skillLv {
				font-size:10px;
				text-align:center;
				position:absolute;
				top:-15px;
				right:-1px;
				width:48px;
				height:14px;
				-moz-border-radius:4px 4px 0 0;
				-webkit-border-radius:4px 4px 0 0;
				-khtml-border-radius:4px 4px 0 0;
				border-radius:4px 4px 0 0;
				background:white;
				border-top:1px solid #d2d2d2;
				border-left:1px solid #d2d2d2;
				border-right:1px solid #d2d2d2;
			}
				.curtLv {
					background:none;
					padding:0;
					margin:-2px 0 0 0;
					border:none;
					color:#e5004f;
					font-family: 'Questrial', sans-serif;
					width:18px;
				}
			
			.skillHeader {height:33px;}
				.skillHeader h2 {float:right;width:94px;font-size:10px;padding-top:3px;line-height:1.2;}
				.skillHeader img {float:left;padding:1px;}
			
			.input {
				position:absolute;
				background:#eee;
				width:132px;
				height:12px;
				float:right;
				bottom:-12px;
				left:-1px;
				-moz-border-radius:0 0 4px 4px;
				-webkit-border-radius:0 0 4px 4px;
				-khtml-border-radius:0 0 4px 4px;
				border-radius:0 0 4px 4px;
				border-bottom:1px solid #dcdcdc;
				border-left:1px solid #dcdcdc;
				border-right:1px solid #dcdcdc;
				overflow:hidden;
			}
				.gauge {
					position:absolute;
					background:#0089d8;
					height:12px;
					z-index:10;
					left:12px;
					-moz-border-radius:0 0 4px 0;
					-webkit-border-radius:0 0 4px 0;
					-khtml-border-radius:0 0 4px 0;
					border-radius:0 0 4px 0;
					
					
				}
				.btnBox {position:absolute;z-index:15;line-height:0;}
					.btn {
						width:12px;
						color:gray;
						height:12px;
						cursor:pointer;
						font-family: 'Cousine', sans-serif;
						font-size:10px;
						float:left;
						padding-top:1px;
						line-height:1;
					}

					.btn:hover {color:white;background:#f37e00;padding-top:1px;}
						.zero {
							color:white;
							background:#0089d8;
							-moz-border-radius:0 0 0 4px;
							-webkit-border-radius:0 0 0 4px;
							-khtml-border-radius:0 0 0 4px;
							border-radius:0 0 0 4px;
						}
			
			.skillInfo {display:none;}

/* Footer */
#footer {
	position:fixed;
	bottom:0;
	color:white;
	z-index:100;
	width:100%;
}
	.skillDisp {padding-bottom:200px;}
	#footer .container {
		background:#313131;
		-moz-border-radius:4px 4px 0 0;
		-webkit-border-radius:4px 4px 0 0;
		-khtml-border-radius:4px 4px 0 0;
		border-radius:4px 4px 0 0;
		color:white;
		padding:6px 12px;
		position:relative;
	}
	#skillBtn , #nowBtn {
		position:absolute;
		top:-14px;
		display:block;
		background:#313131;
		-moz-border-radius:4px 4px 0 0;
		-webkit-border-radius:4px 4px 0 0;
		-khtml-border-radius:4px 4px 0 0;
		border-radius:4px 4px 0 0;
		width:120px;
		text-align:center;
	}
	#skillBtn {left:0;}
	#nowBtn {left:121px;}
		#skillInfo , #nowInfo {
			display:none;
			margin-top:6px;
			margin-bottom:12px;
		}
			#skillInfo .infoLeft {float:left;width:400px;}
			#skillInfo .infoLeft h2 ,#skillInfo  .infoLeft img {float:left;}
			#skillInfo .infoLeft img {margin-right:6px;}
			#skillInfo .infoLeft h2 {font-size:18px;padding-top:2px;}
			
			#skillInfo .skillTable {
				float:right;
				width:520px;
				border-top:1px solid #666;
				border-left:1px solid #666;
				border-collapse:collapse;
			}
				#skillInfo .skillTable th , #skillInfo .skillTable td {
					border-right:1px solid #666;
					border-bottom:1px solid #666;
				}
				#skillInfo .skillTable td {text-align:center;}
				#skillInfo .skillTable th {font-weight:bold;}
		
		#nowInfo {font-size:10px;}
			#nowInfo li {list-style:none;border-bottom:1px dashed #666;width:460px;margin-right:20px;float:left;}
				.effect {margin-right:6px;}
			.nowBox dt , .nowBox dd {float:left;}
			.nowBox dt {margin-right:12px;font-weight:bold;}

#open {font-size:48px;font-weight:bold;color:#e5004f;}