/**
 * Rule the words! KKuTu Online
 * Copyright (C) 2017 JJoriping(op@jjo.kr)
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

equ{
	font-family: consolas;
	font-style: italic;
}
#Intro{
	position: fixed;
	z-index: 4;
}
#Intro img{
	width: 1010px;
	height: 604px;
}
	#version{
		position: absolute;
		top: 4px;
		left: 4px;
		font-size: 13px;
		text-shadow: 0px 0px 3px #000000;
	}
	#intro-text{
		position: absolute;
		top: 360px;
		left: 0px;
		width: 100%;
		font-size: 15px;
		text-align: center;
		text-shadow: 0px 0px 3px #000000;
	}
#Loading{
	position: fixed;
	padding-top: 200px;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #232323;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 5;
}
#Top{
	background-color: #7CC4F8;
	background-image: none;
}
#Top .menu-btn{
	color: #111111;
	background-color: #7CC4F8;
	background-image: none;
}
#Top .menu-sub-btn{ color: #222222; }
#Bottom .bottom-text{ display: none; }

#facebook-menu{
	float: right;
}
iframe{
	border: none;
}
#Yell{
	position: fixed;
	padding: 10px 0px;
	margin-top: 200px;
	width: 100%;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	text-shadow: 0px 1px 1px #141414;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.7);
}
#ReadyBtn{
	animation: ReadyBlink 1s linear infinite;
}
#ReadyBtn:hover, #ReadyBtn.toggled{
	animation: none;
}
.product-body{ font-size: 12px; }
.deltaScore{
	width: 100%;
	color: #2255FF;
	font-weight: bold;
	text-align: center;
	text-shadow: 0px 1px 1px #000033;
	animation: ScoreGoing 2s ease 1;
}
	.bonus{ color: #6666FF; }
	.lost{ color: #F59E9E; }
.kkutu-menu{
	float: left;
	width: 1010px;
	height: 30px;
}
.kkutu-menu button{
	float: left;
	border: none;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	width: 100px;
	height: 20px;
}
	.kkutu-menu button:hover{
		margin-top: -5px;
		height: 25px;
	}
	.kkutu-menu .toggled{
		margin-top: 5px !important;
		color: #EEEEEE;
		background-color: #444444 !important;
	}
	.tiny-menu{
		width: 20px !important;
	}
.dialog{
	display: none;
	position: fixed;
	padding: 5px;
	border-radius: 10px;
	color: #111111;
	box-shadow: 0px 1px 1px #141414;
	background-color: #EEEEEE;
	z-index: 2;
}
	.dialog-bar{ float: left; margin: 3px 0px; width: 100%; }
	.dialog-bar h4{ float: left; padding-top: 6px; width: 100px; text-align: center; }
	.dialog-bar-value{ width: calc(100% - 100px) !important; text-align: left !important; }
	.dialog-bar input, .dialog-bar select{ float: left; width: 187px; height: 14px; box-sizing: inherit; outline: none; }
	.dialog-bar label{ font-size: 13px; }
	.dialog-bar button{ float: left; }
		.dialog-opt{ float: left; width: 100px; }
	.tail-button{ margin-top: 7px; }
	.tail-button button{ float: right; margin-right: 5px; width: 80px; height: 20px; }
	.dialog .closeBtn{
		float: right;
		border-radius: 6px;
		margin-top: 1px;
		width: 12px;
		height: 12px;
		background-color: #EE5555;
	}
	.dialog .closeBtn:hover{ background-color: #EE7777; }
	.dialog-head{
		padding: 3px;
		border-bottom: 1px solid #CCCCCC;
		border-radius: 5px;
		margin-bottom: 5px;
		height: 12px;
		color: #222222;
		font-size: 11px;
		background-color: #DDDDDD;
	}
		.dialog-head .dialog-title{ float: left; cursor: move; }
#replay-players{ height: 140px; overflow-y: scroll; }
	.replay-player-bar{ float: left; width: 100%; }
		.replay-player-bar img{ float: left; margin-right: 3px; width: 20px; height: 20px; }
		.replay-player-bar label{ float: left; }
#ranking{
	font-size: 13px;
}
	.ranking-me{ font-weight: bold; background-color: #DDDDDD; }
	.ranking-image{ margin-right: 2px; width: 18px; height: 18px; }
	.ranking-1 td:first-child{ font-weight: bold; background-color: gold; }
	.ranking-2 td:first-child{ font-weight: bold; background-color: silver; }
	.ranking-3 td:first-child{ font-weight: bold; background-color: chocolate; }
.moremi{
	position: relative;
}
.moremi img{
	position: absolute;
}
.Product{
	border-radius: 0px;
	color: #111111;
	box-shadow: 0px 2px 1px #DDDDDD;
	background-color: #EEEEEE;
}
.product-title{
	border-bottom-color: #CCCCCC;
	border-radius: 5px;
	color: #222222;
	background-color: #DDDDDD;
}
.product-title i{ color: #111111; }
.dialog-front{ z-index: 3; }
#ProfileDiag .dialog-body div{ float: left; }
	.profile-moremi{ margin-right: 3px; width: 80px; height: 80px; }
	.profile-head-item{ margin: 3px 2px; width: 213px; }
		.profile-image{ margin-right: 3px; width: 20px; height: 20px; }
		.profile-level{ margin-right: 3px; width: 20px; height: 20px; }
		.profile-title{ padding-top: 1px; font-size: 15px; font-weight: bold; width: 190px; }
		.profile-tag{ font-size: 11px; color: #777; }
		.profile-level-text{ padding-top: 2px; font-size: 13px; }
		.profile-score-text{ float: right !important; padding-top: 3px; font-size: 11px; color: #444444; }
	.profile-record-field{ margin: 2px 0px; width: 100%; }
		.profile-field-name{ width: 35%; text-align: center; }
		.profile-field-record{ width: 32%; text-align: center; }
		.profile-field-score{ width: 32%; text-align: center; }
#RoomInfoDiag .dialog-body div{ float: left; }
	.ri-player{ margin: 2px 0px; width: 100%; }
		.rip-moremi{ margin-right: 3px; width: 40px; height: 40px; }
		.rip-master{ font-weight: bold; color: #E14E2D; }
		.rip-title{ width: calc(100% - 43px); }
		.rip-team{ margin: 3px 3px 0px 0px; width: 44px; text-align: center; }
		.rip-form{ margin-top: 3px; width: calc(100% - 90px); }
.UserListBox{
	width: 200px;
	height: 360px;
}
	.UserListBox div{ float: left; }
	.UserListBox .product-body{ width: 190px; height: 330px; overflow-x: hidden; overflow-y: scroll; }
	.users-item{ width: 190px; }
		.users-image{ margin: 1px; width: 18px; height: 18px; }
		.users-level{ margin: 1px; width: 18px; height: 18px; }
		.users-name{ padding: 2px 0px 0px 3px; width: 147px; font-size: 13px; }
		.users-item:hover{ cursor: pointer; background-color: #F4F4F4; }
	.invite-item{ margin: 2px 0px; width: 100%; height: 20px; }
		.invite-item .users-name{ width: 270px; }
.RoomListBox{
	width: 790px;
	height: 360px;
}
	.RoomListBox div{ float: left; }
	.RoomListBox .product-body{ width: 780px; height: 330px; overflow-x: hidden; overflow-y: scroll; }
	.rooms-item{
		padding: 5px;
		border-radius: 10px;
		margin: 3px;
		width: 364px;
		height: 64px;
		box-shadow: 0px 1px 1px #777777;
		cursor: pointer;
		background-color: #E4E4E4;
		transition: all 300ms ease;
	}
		.rooms-create{ background-color: #8EC0F3; }
		.rooms-create>div{ float: none; padding: 20px 0px; text-align: center; font-size: 15px; font-weight: bold; }
		.rooms-channel{ position: relative; width: 10px; height: 10px; border-radius: 5px; margin-right: -10px; }
			.rooms-channel:hover{ width: 8px; height: 8px; border: 1px solid #000; }
			.channel-1{ background-color: #F99; }
			.channel-2{ background-color: #FF7; }
			.channel-3{ background-color: #7C7; }
			.channel-4{ background-color: #99F; }
		.rooms-gaming{ background-color: #FFBBBB; }
			.rooms-gaming .rooms-number{ border-color: #CC9999; }
		.rooms-item:hover{ background-color: #F4F4F4; }
			.rooms-gaming:hover{ background-color: #FFCCCC; }
			.rooms-create:hover{ background-color: #AADDFF; }
		.rooms-number{ padding-top: 18px; border-right: 1px solid #CCCCCC; margin-right: 4px; width: 49px; height: 46px; font-size: 24px; }
		.rooms-title{ padding-top: 4px; width: 270px; height: 20px; font-size: 16px; font-weight: bold; }
		.rooms-limit{ padding-top: 7px; width: 39px; height: 17px; text-align: center; }
		.rooms-mode{ padding-top: 5px; width: 270px; }
		.rooms-info{ width: 270px; }
			.rooms-round{ padding-top: 5px; margin-right: 10px; }
			.rooms-time{ padding-top: 5px; }
		.rooms-lock{ padding-top: 8px; width: 39px; text-align: center; font-size: 24px; }
.ShopBox{
	width: 790px;
	height: 360px;
}
	.ShopBox div{ float: left; }
	.ShopBox .product-body{ width: 780px; height: 330px; }
.RoomBox{
	width: 1000px;
	height: 360px;
}
	.RoomBox .product-title{ height: 12px; }
	.RoomBox .product-title h5{ float: left; }
		.room-head-modified{ animation: ModifiedBlink 1s ease 3; }
		.room-head-number{ width: 35px; text-align: center; }
		.room-head-title{ font-weight: bold; width: 505px; }
		.room-head-mode{ margin-right: 5px; width: 255px; text-align: right; }
		.room-head-limit{ width: 70px; text-align: center; }
		.room-head-round{ width: 70px; text-align: center; }
		.room-head-time{ width: 54px; text-align: center; }
	.team-selector{
		float: left;
		padding-right: 3px;
		border-right: 1px solid #CCCCCC;
		margin: 0px 2px 0px -5px;
		width: 40px;
		height: 320px;
	}
		.team-button{
			float: left;
			padding-top: 20px;
			border-radius: 10px;
			margin: 2px 0px;
			width: 100%;
			height: 40px;
			text-align: center;
			font-size: 13px;
			cursor: pointer;
		}
		.team-button:hover{ border-bottom: 4px solid rgba(0, 0, 0, 0.5); margin-top: -2px; }
		.team-unable div{ background-color: #BBBBBB; cursor: not-allowed; }
		.team-chosen{ font-weight: bold; }
		.team-0{ background-color: #D0D0D0; }
		.team-1{ background-color: #FF5555; }
		.team-2{ background-color: #FFBF30; }
		.team-3{ background-color: #88C525; }
		.team-4{ background-color: #4A90D6; }
	.room-user{
		float: left;
		padding: 3px;
		border-radius: 10px;
		margin: 3px;
		width: 224px;
		height: 151px;
		box-shadow: 0px 1px 1px #777777;
		background-color: #E4E4E4;
	}
		.room-user div{ float: left; }
		.room-user-image{ margin: 3px; width: 100px; height: 100px; }
		.room-user-stat{ padding: 3px; width: 112px; height: 100px; font-size: 15px; }
			.room-user-stat div{ margin-bottom: 4px; }
			.room-user-ready{ width: 100%; text-align: right; font-weight: bold; }
				.room-user-readied{ color: #3A8BDF; }
				.room-user-spectate{ color: #8160FF; }
				.room-user-practice{ color: #E1BA2D; }
				.room-user-master{ color: #E14E2D; }
			.room-user-team{ margin-left: 60%; width: 40%; text-align: center; }
		.room-user-title{ padding: 6px 4px; width: 216px; font-size: 15px; }
		.room-user-level{ width: 30px; height: 30px; }
		.room-user-name{ padding: 9px 0px 0px 4px; font-weight: bold; }
		.room-user:hover{ cursor: pointer; background-color: #EEEEEE; }
.GameBox{
	width: 1000px;
	height: 410px;
	background-image: url('/img/kkutu/gamebg.png');
}
	.GameBox .product-title{ height: 12px; }
	.GameBox .product-title h5{ float: left; }
	.GameBox div{ float: left; }
	.GameBox .product-body{ padding-top: 0px; }
	.game-replay-controller{ float: right !important; width: 100px; }
	.game-replay-controller button{
		float: right;
		margin-top: -2px;
		padding: 1px;
		width: 20px;
		font-size: 11px;
	}
	.hints{
		margin: 40px 10px 0px 10px;
		width: 225px;
		height: 110px;
	}
		.hint-item{
			padding: 5px;
			border-radius: 5px;
			margin: 1px 0px;
			color: #EEEEEE;
			font-size: 13px;
			max-height: 63px;
			overflow: hidden;
			background-color: #111111;
		}
	.b-left{
		padding: 5px;
		margin-top: 25px;
		width: 324px;
		z-index: 1;
	}
		.bb-word{
			width: 50%;
			color: #AAAAAA;
		}
		.bb-char{
			padding: 2px;
			border-radius: 5px;
			margin: 1px;
			width: 10px;
			text-align: center;
			background-color: #111111;
		}
		.cw-q-head{
			margin: 3px 0px;
			width: 100%;
			font-size: 13px;
			color: #EEEEEE;
			text-align: center;
			text-shadow: 0px 1px 1px #000000;
		}
		.cw-q-body{
			padding: 5px;
			border-radius: 10px;
			margin-top: 5px;
			color: #CCCCCC;
			background-color: #111111;
		}
	.items{
		padding-top: 55px;
		margin: 50px 40px 0px 105px;
		width: 100px;
		height: 45px;
		font-size: 24px;
		color: #EEEEEE;
		font-weight: bold;
		text-align: center;
		text-shadow: 0px 1px 5px #141414;
		background-image: url('/img/kkutu/lefthand.png');
	}
	.jjoriping{ width: 500px; }
	.cw.jjoriping{ margin-top: -10px; width: 322px; }
		.jjoObj{ position: relative; }
		.jjoEyeL{ top: 11px; left: 0px; }
		.jjoNose{ top: 9px; left: 181px; }
		.cw .jjoNose{ left: 94px; }
		.jjoEyeR{ top: 11px; left: 361px; }
		.cw .jjoEyeR{ left: 183px; }
		.jjoDisplayBar{
			padding: 20px 5px 5px 5px;
			border: 2px solid #000000;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;
			margin-top: -10px;
			width: 486px;
			height: 80px;
			background-color: #DEAF56;
		}
		.cw .jjoDisplayBar{ width: 308px; height: 330px; transition: all 0.5s ease; }
			.jjo-display{
				padding: 8px 5px;
				border-radius: 10px;
				border-bottom-left-radius: 0px;
				border-bottom-right-radius: 0px;
				width: 476px;
				height: 23px;
				font-size: 20px;
				text-align: center;
				color: #EEEEEE;
				background-color: rgba(0, 0, 0, 0.7);
			}
			.jjo-display-word-length{ color: orange; font-size: 14px; }
			.cw .jjo-display{ position: relative; padding: 5px; width: 298px; height: 298px; }
				.display-text{ width: 20px; text-align: center; z-index: 1; }
				.game-fail-text{ animation: FailBlink 2s linear; color: #FF7777; }
				.cw-bar{
					position: absolute;
					border-radius: 10px;
					cursor: pointer;
					background-color: #C7C7C7;
				}
				.cw-bar:hover{ background-color: #F2F2F2; z-index: 1; }
				.cw-bar.cw-open{ background-color: #777777; pointer-events: none; z-index: 2; }
				.cw-bar.cw-my-open{ background-color: #00A55A; }
					.cw-cell{ padding-top: 4px; border-radius: 5px; margin: 3px; width: 32.5px; height: 28.5px; box-shadow: 0px 1px 1px #000000; }
			.jjoDisplayBar .graph{
				border-left: 1px solid rgba(0, 0, 0, 0.7);
				border-right: 1px solid rgba(0, 0, 0, 0.7);
				width: 484px;
				height: 20px;
				color: #FFFFFF;
				box-shadow: none;
				text-align: right;
				text-shadow: 0px 1px 3px #141414;
				overflow: hidden;
			}
			.jjoDisplayBar .graph-bar{
				padding-top: 4px;
				height: 16px;
				font-size: 11px;
				white-space: nowrap;
				overflow: hidden;
			}
			.jjo-turn-time{ background-color: #70712D; }
			.jjo-round-time{
				border-bottom: 1px solid rgba(0, 0, 0, 0.7);
				border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
				background-color: #223C6C;
			}
			.jjo-turn-time .graph-bar{ background-color: #E6E846; }
			.jjo-round-time .graph-bar{ background-color: #3573E4; }
				.round-extreme{ background-color: #FF6D6D !important; }
			.cw .jjo-turn-time{ display: none; }
			.cw .jjo-round-time{ width: 306px; }
		.sock-char{ text-align: center; }
			.sock-picked{ color: #FFFF44; font-weight: bold; font-size: 24px; }
	.chain{
		padding-top: 55px;
		margin: 50px 105px 0px 40px;
		width: 100px;
		height: 45px;
		font-size: 24px;
		color: #EEEEEE;
		font-weight: bold;
		text-align: center;
		text-shadow: 0px 1px 5px #141414;
		background-image: url('/img/kkutu/righthand.png');
	}
	.rounds{
		margin-top: -130px;
		width: 990px;
		color: #FFFFFF;
		text-align: center;
		text-shadow: 0px 1px 1px #141414;
	}
	.cw.rounds{ margin-top: -380px; }
		.rounds label{ margin: 0px 3px; }
		.cw.rounds label{ cursor: pointer; }
		.rounds-current{ color: #FFFF3B; font-size: 16px; }
		.round-effect{ animation: RoundEffect 0.8s ease 1; }
	.history-holder{
		width: 990px;
		height: 40px;
		overflow: hidden;
	}
		.history{
			width: 1200px;
			height: 42px;
		}
			.history-item{
				height: 28px;
				padding: 4px 0px;
				border-radius: 10px;
				margin: 3px;
				color: #EEEEEE;
				text-align: center;
				background-color: #232323;
			}
			.history-theme{
				float: none !important;
				margin: 3px;
				font-size: 11px;
				color: #8ACFFF;
			}
			.history-class{
				padding: 1px;
				border-radius: 5px;
				margin-left: 4px;
				font-size: 11px;
				color: #111111;
				background-color: #77AAFF;
			}
			.history-mean-c{ color: #AAAAAA; }
			.history-mean{
				float: none !important;
				padding: 3px 2px 0px 1px;
				font-size: 11px;
				color: #AAAAAA;
			}
			.word-head{ margin-right: 3px; }
				.word-m1-head{
					padding: 0px 1px;
					margin: 0px 1px;
					color: #111111;
					font-weight: bold;
					background-color: #BBBBBB;
				}
				.word-m2-head{ color: #44FF44; }
				.word-m3-head{ color: #EEEEEE; }
					.word-m3-head::before{ content: "("; }
					.word-m3-head::after{ content: ")"; }
			.word-theme{ color: #8ACFFF; }
				.word-theme::before{ content: "<"; }
				.word-theme::after{ content: ">"; }
	.game-input{
		position: relative;
		top: -220px;
		left: 244px;
		padding: 5px;
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.7);
	}
		#game-input{
			width: 478px;
			height: 40px;
			font-size: 20px;
		}
	.game-body{
		margin: 0px -1px;
		width: 992px;
		height: 180px;
	}
	.cw.game-body{ position: relative; top: -378px; left: 660px; width: 334px; }
		.game-user{
			padding: 1px;
			border: 3px solid #DDDDDD;
			border-radius: 10px;
			margin: 13px 3px 3px 3px;
			width: 110px;
			height: 167px;
			box-shadow: 0px 1px 1px #141414;
			background-color: #DDDDDD;
			transition: all 300ms ease;
		}
		.cw .game-user{
			border: 2px solid #DDDDDD;
			margin: 1px;
			width: 330px;
			height: 22px;
		}
		.game-user-current{
			animation: CurrentBlink 2s linear infinite;
			margin-top: 0px;
			height: 177px;
			background-color: #DDFFDD;
		}
		.game-user-bomb{ border-color: #FF6666; }
			.game-user-image{ margin: 3px 5px; width: 100px; height: 100px; }
			.game-user-level{ margin: 1px; width: 18px; height: 18px; }
			.game-user-name{ padding-left: 3px; margin: 3px 0px; width: 87px; height: 20px; font-size: 15px; }
			.game-user-score{ padding: 0px 5px; border-radius: 10px; width: 100px; font-size: 30px; font-weight: bold; }
				.game-user-score-char{ width: 20px; text-align: center; }
			.cw .game-user-score{ padding-top: 3px; font-size: 15px; }
	#ResultDiag .dialog-body div{ float: left; }
		.result-board{
			width: 400px;
			height: 260px;
		}
			.result-board-item{
				padding: 5px;
				border-radius: 5px;
				margin: 1px;
				width: 388px;
				height: 20px;
				box-shadow: 0px 1px 1px #CCCCCC;
				background-color: #F4F4F4;
			}
			.result-board-me{
				padding: 4px;
				border: 1px solid #CCCCCC;
				background-color: #FAFAFA;
			}
				.result-board-rank{ padding-top: 3px; border-radius: 10px; width: 45px; height: 17px; text-align: center; }
				.result-board-level{ width: 20px; height: 20px; }
				.result-board-name{ padding-top: 3px; margin-left: 5px; width: 100px; }
				.result-board-score{ padding-top: 3px; width: 80px; text-align: center; }
				.result-board-reward{ padding-top: 3px; width: 80px; text-align: center; }
				.result-board-lvup{
					width: 58px;
					height: 20px;
					color: #2626FF;
					font-size: 13px;
					text-align: center;
					text-shadow: 0px 0px 3px #6DA1FF;
				}
					.result-board-lvup i{ float: left; margin-right: 1px; animation: LvUpBlink 1s infinite; }
					.result-board-lvup div{ padding-top: 3px; }
		.result-me{
			padding: 3px;
			border: 1px solid #CCCCCC;
			border-radius: 5px;
			margin: 1px;
			width: 390px;
			height: 80px;
			font-size: 13px;
		}
			.result-me-score{ width: 195px; color: #3C5FC2; text-align: center; }
				.result-me-bonus{ color: #4BBBFF; font-weight: bold; text-shadow: 0px 0px 2px #C8C8F7; }
			.result-me-money{ width: 195px; color: #555555; text-align: center; }
			.result-me-level{ margin-top: 5px; width: 80px; }
				.result-me-level-head{ width: 80px; text-align: center; }
				.result-me-level-body{
					width: 80px;
					text-align: center;
					font-size: 30px;
					font-weight: bold;
				}
			.result-me-gauge{
				border-radius: 10px;
				margin-top: 5px;
				width: 308px;
				height: 49px;
				overflow: hidden;
				box-shadow: 0px 1px 1px #CCCCCC;
				background-color: #333333;
			}
				.result-me-before-bar{ background-image: url('/img/kkutu/scorebar.png'); }
				.result-me-current-bar{ background-image: url('/img/kkutu/currentbar.png'); }
				.result-me-bonus-bar{ background-image: url('/img/kkutu/bonusbar.png'); }
				.result-me-score-text{
					margin-top: -32px;
					margin-left: 80px;
					width: 308px;
					color: #EEEEEE;
					text-align: center;
					text-shadow: 0px 1px 1px #141414;
				}
			.result-me-expl h4{ color: #FFFF44; }
			.result-me-expl div{ margin-bottom: 4px; width: 140px; }
			.result-me-blog-head{ float: left; width: 80px; color: #EEEEEE; }
			.result-me-blog-body{ float: left; width: 60px; color: #C7C7C7; }
	#KickVoteDiag{}
		.kick-vote-time{ border-radius: 10px; width: 100%; height: 40px; overflow: hidden; background-color: #BA3F3F; }
		.kick-vote-time .graph-bar{ background-color: #FF6D6D; }
	.purchase-not-enough{ color: #EE2222; }
.MeBox{
	width: 200px;
	height: 190px;
	cursor: pointer;
}
	.MeBox div{ float: left; }
	.bar-text{ color: #EEEEEE; text-align: center; text-shadow: 0px 1px 1px #141414; }
	.my-image{ width: 80px; height: 80px; }
	.my-stat{ padding-left: 5px; width: 105px; }
		.my-stat-level{ margin: 1px; width: 18px; height: 18px; }
		.my-stat-name{ padding-top: 3px; padding-left: 4px; width: 76px; height: 17px; font-weight: bold; }
		.my-stat-record{ margin-top: 3px; width: 100%; }
		.my-stat-ping{ margin-top: 3px; width: 100%; }
		.my-okg{ border-radius: 5px; margin-top: 3px; width: 100%; height: 20px; overflow: hidden; background-color: #995511; }
			.my-okg .graph-bar{ background-color: #FFBB44; }
		.my-okg-text{ margin-top: -15px; width: 100px; }
	.my-level{ margin: 13px 0px; width: 190px; font-size: 15px; text-align: center; }
	.my-gauge{ border-radius: 10px; margin: 3px 0px; width: 190px; height: 30px; overflow: hidden; background-color: #333333; }
		.my-gauge .graph-bar{ background-image: url('/img/kkutu/scorebar.png'); }
	.my-gauge-text{ margin-top: -25px; width: 190px; }
	.category-filter{
		border-radius: 5px;
		text-align: center;
		font-size: 11px;
		cursor: pointer;
		background-color: #DDDDDD;
		transition: all 300ms ease;
	}
	.goods-box{
		margin-top: 5px;
		height: 125px;
		overflow-y: scroll;
	}
		.dress-type{
			float: left;
			padding: 1px 0px;
			border: 1px solid #AAAAAA;
			margin: 1px;
			width: 40px;
		}
		.category-filter.selected{ color: #EEEEEE; background-color: #111111; }
		.category-filter:hover{ background-color: #EEEEEE; }
		.category-filter.selected:hover{ background-color: #222222; }
		.dress-item{
			float: left;
			padding: 1px;
			border: 1px solid #CCCCCC;
			margin: 1px;
			width: 40px;
			height: 40px;
		}
		.dress-equipped{ padding: 0px; border: 2px solid #FFB861; }
		.dress-expl{ width: 240px; font-size: 11px; }
			.dress-item-title{ float: left; width: 160px; font-size: 13px; }
			.dress-item-group{ float: left; padding-top: 1px; width: 80px; color: #BBBBBB; text-align: right; }
			.dress-item-term{ float: left; color: #FFBB77; }
			.dress-expl label{ display: inline; padding: none; font-size: inherit; }
			.dress-item-image{ width: 40px; height: 40px; font-size: 11px; text-align: right; text-shadow: 0px 0px 3px #111111; }
			.dress-item-expl{ float: left; margin: 2px 0px; width: 100%; }
			.dress-item-opts{ float: left; padding-top: 4px; border-top: 1px dashed #777777; margin-top: 2px; width: 100%; }
				.item-opts-head{ color: #EEEE44; }
					.item-opts-head::after{ content: ": " }
	#cf-tray{ border-bottom: 1px solid #CCCCCC; margin-top: -2px; height: 32px; }
		#cf-tray div{ width: 30px; height: 30px; cursor: pointer; }
		.cf-tray-selected{ padding: 0px; border: 2px solid #61B8FF; }
	#cf-dict{ margin: 2px 0px; height: 166px; color: #BBBBBB; overflow-y: scroll; background-color: #111111; }
	#cf-reward{ float: left; width: 100%; height: 148px; overflow-y: scroll; }
		.cf-rew-item{ float: left; border-bottom: 1px dashed #DDDDDD; margin-bottom: 1px; }
		.cf-rew-item div{ float: left; }
			.cf-rew-image{ width: 30px; height: 30px; }
			.cf-rew-value{ width: 100%; }
			.cf-rew-rate{ padding-top: 6px; width: 50px; text-align: right; }
	#cf-cost{ text-align: center; background-color: #DDDDDD; }
	.cf-composable{ background-color: #FFAD31; }
.ChatBox{
	width: 1000px;
}
	.chat-balloon{
		position: absolute;
		width: 123px;
		color: #111111;
		z-index: 1;
	}
	.chat-balloon h4{
		padding: 5px;
		border: 1px solid #CCCCCC;
		border-radius: 10px;
		width: 110px;
		max-height: 100px;
		overflow: hidden;
		background-color: #F4F4F4;
	}
	.chat-balloon-tip{
		margin: -1px -12px 0px -7px;
		width: 20px;
		height: 20px;
		background-image: url('/img/kkutu/balloontip.png');
	}
	.chat-balloon-bot{
		margin: -1px -12px 0px 50px;
		width: 20px;
		height: 20px;
		background-image: url('/img/kkutu/balloonbot.png');
	}
#Chat{
	width: 100%;
	overflow-y: scroll;
}
#Talk{
	float: left;
	border-right: none;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	margin-top: 5px;
	width: calc(100% - 82px);
	height: 20px;
}
#ChatBtn{
	float: left;
	border-left: none;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	margin-top: 5px;
	width: 60px;
	height: 20px;
}
	#Chat hr, #chat-log-board hr{
		padding-top: 0px;
		border: 0px;
		border-bottom: 1px dashed #999999;
		margin: 2px 0px;
	}
	.chat-item{
		float: left;
		padding: 1px 0px;
		margin: 1px 0px;
		width: 100%;
		overflow: hidden;
	}
	.chat-notice{
		background-color: #CCCCCC;
	}
		.chat-notice .chat-head{ color: #1767CA; }
		.chat-stamp{
			float: left;
			padding-top: 2px;
			width: 70px;
			font-size: 11px;
			text-align: right;
			color: #999999;
		}
		.chat-head{
			float: left;
			padding-right: 4px;
			margin-right: 5px;
			width: 100px;
			font-weight: bold;
			text-align: center;
			cursor: pointer;
		}
			.chat-head:hover{ background-color: #FFF; }
		.chat-body{ float: left; width: calc(100% - 190px); min-height: 14px; }
.ADBox{
	width: 1000px;
	box-shadow: 0px 1px 1px #141414;
	background-color: #232323;
}
.ADBox .product-title{
	border-bottom-color: #333333;
	color: #CCCCCC;
	background-color: inherit;
}
.ADBox .product-body{
	padding-left: 131px;
}

@keyframes RoundEffect{
	0%		{ font-size: 16px; color: #FFFF44; background-color: rgba(0, 0, 0, 1); }
	100%	{ font-size: 12px; color: #FFFFFF; background-color: rgba(0, 0, 0, 0); }
}
@keyframes ReadyBlink{
	0%		{ margin-top: 0px; height: 20px; }
	50%		{ margin-top: -5px; height: 25px; }
	100%	{ margin-top: 0px; height: 20px; }
}
@keyframes CurrentBlink{
	0%		{ border-color: #3EFF3E; }
	50%		{ border-color: #009000; }
	100%	{ border-color: #3EFF3E; }
}
@keyframes FailBlink{
	0%		{ text-decoration: line-through; }
	25%		{ text-decoration: inherit; }
	50%		{ text-decoration: line-through; }
	75%		{ text-decoration: inherit; }
}
@keyframes ModifiedBlink{
	0%		{ background-color: #FFFF44; }
	100%	{ background-color: #DDDDDD; }
}
@keyframes LvUpBlink{
	0%		{ margin-top: 6px; }
	100%	{ margin-top: 1px; }
}
@keyframes ScoreGoing{
	0%		{ margin-top: -80px; font-size: 24px; opacity: 1; }
	10%		{ margin-top: -90px; font-size: 30px; opacity: 0.9; }
	100%	{ margin-top: -25px; font-size: 20px; opacity: 0.1; }
}