/**
 * 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/>.
 */

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

#Top {
    width: 100%;
    display: flex;
    flex-direction: column;
	background-color: #7CC4F8;
    background-image: none;
    z-index: 10;
}

#portal-notice {
    padding: 3px 0px;
    color: #111111;
    text-align: center;
    font-weight: bold;
    background-color: #EEBB33;
    cursor: pointer;
    z-index: 5;
}

#Middle {
	margin-top: 80px;
	margin-right: 80px;
	margin-bottom: auto;
	/* height: 100%; */
	flex: 1;
    display: flex;
}

#Header {
    display: flex;
    width: 100%;
	flex-direction: column;
	flex: 1 0 auto;
	height: 100%;
	align-content: space-between;
}

#Jungle {
    display: flex;
}

.iframe-container{
	flex: 0 1 auto;
	flex-direction: column;
    display: flex;
	width: calc(100% - 4px);
	border: 1px solid #CCC;
	margin-top: 10px;
	background-color: #EEE;
	border-radius: 10px;
}

.Menu {
    width: 100%;
}
#Top .menu-btn{
    flex: none;
	color: #111111;
	background-color: #7CC4F8;
	background-image: none;
}
#Top .menu-sub-btn{ 
    flex: none;
    color: #222222;
}
#Bottom .bottom-text{
    display: none;
}

#account {
    margin-left: auto;
}

.foot-text {
	color: RGB(101, 102, 102);
}

.p_button {
	display: flex;
	padding: 10px 5px;
	border-radius: 5px;
	margin: 2px 5px;
	width: 120px;
	height: 20px;
	font-size: 15px;
	box-shadow: 0px 1px 1px #333;
	justify-content: center;
	align-items: center;
}

.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;
}

#holder{
	width: 200px;
	text-align: center;
	text-shadow: 0px 0px 4px #333;
	font-weight: bold;
}
#logo{
	margin-top: -20px;
}
#kkutu-bulletin{
	border: 0px;
	margin-bottom: 5px;
	border-radius: 10px;
}

#game-start{
	float: left;
	width: 315px;
	height: 70px;
	font-size: 20px;
	font-weight: bold;
	border: none;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
	color: #CCC;
	background-image: url('https://cdn.jsdelivr.net/npm/bfkkutudelivr@latest/img/kkutu/gamestart.png');
}
#game-start:hover{
	font-size: 24px;
	background-color: rgba(0, 0, 0, 0.5); 
}
.server-list-box{
    margin: 2px 0;
	float: right;
	width: 320px;
	background-color: rgba(0, 0, 0, 0.4);
}
.server-list-title{
	padding: 2px 0px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.4);
}
#server-refresh{
	margin: 0px 5px;
	cursor: pointer;
}
.server{
	float: left;
    margin: 2px 0 2px 3px;
    padding-left: 4px;
	height: 16px;
	font-size: 13px;
    cursor: pointer;
    border-radius: 10px;
}
	.server>div{ float: left; }
	.server-status{ border-radius: 6px; margin: 2px; width: 12px; height: 12px; }
		.ss-o{ background-color: #3E3; }
		.ss-p{ background-color: #EE3; }
		.ss-q{ background-color: #F55; }
		.ss-x{ background-color: #777; }
	.server-name{ width: 50px; }
	.server-people{ width: 190px; height: 100%; }
		.server-people>.graph-bar{ background-image: url('https://cdn.jsdelivr.net/npm/bfkkutudelivr@latest/img/blue_gauge.png'); }
		.server-people>label{ position: relative; display: block; top: -14px; width: 100%; text-align: center; font-size: 11px; }
	.server-enter{ width: 43px; text-align: center; }
	.server:hover{ background-color: rgba(255, 255, 255, 0.1); }

#Background{
	animation: BGScroll 4s linear infinite;
}
@keyframes BGScroll{
	from{ background-position: 0px 0px; }
	to{ background-position: -200px -200px; }
}