@charset "utf-8";

/* title */
.title{width: 140px; height: auto; margin: 0 auto; position: relative; top: 26px; left: 15px;}
/* title h3 */
.title h3{color: #C79A3C; font-weight: 100; font-family: 'Berkshire Swash', cursive; font-size: 1.2em; text-shadow: 1px 1px 5px #000;}
.title-s{position: relative; top: 28px; left: 15px;}
.title-p{position: relative; top: 30px; left: -10px;}
.title-k{position: relative; top: 33px; left: -23px;}
.title-st{position: relative; top: 30px; left: 10px;}
.title-rd{position: relative; top: 32px; left: 18px;}

/* panel_login */
.panel-login{width: 230px; height: 278px; background: url("../img/panel_login.jpg") no-repeat;}
.box-login{width: 220px; height: 278px; float: right; position: relative; left: 5px;}
.box-login h3{color: #fff; font-size: 1.5em; font-weight: 100; text-shadow: 1px 1px 10px #fff;}
.box-login h3 span{}
.box-login ul li{color: #ccc; font-weight: 600; font-size: 0.9em;}
.box-login ul li span{color: #C79A3C; margin-left: 5px;}
.box-login .logout{color: #999; text-shadow: none; font-size: 0.7em; text-transform: uppercase; transition: all 0.5s;}
.box-login .logout:hover{color: #ccc;}

/* link user */
.linksuser{display: block;}
.linksuser li a{display: block; width: 225px; height: 46px; background: url("../img/btn.png") center center no-repeat; margin-top: 5px; transition: all 0.5s; position: relative; left: 10px;}
.linksuser li a .op-links{position: relative; top: 11px; left: -23px; font-size: 0.9em; color: #999; font-weight: 600;}
.linksuser li a:hover{background: url("../img/btn-over.png") center center no-repeat; transition: all 0.5s;}
.linksuser li.active a{display: block; width: 225px; height: 46px; background: url("../img/btn-over.png") center center no-repeat; margin-top: 5px; transition: all 0.5s; position: relative; left: 10px;}

/* status server */
.box-status{float: left; width: 100%; height: auto; margin-top: 7px;}
.box-status img{position: relative; top: 7px;}
.box-status .status{position: relative; top: 0px; left: -45px; float: right;}
.box-status .quest{color: #ccc; transition: all 0.5s; position: relative;}
.box-status .quest span{
	width: 180px;
	color: #999; 
	background-color: #000; 
	padding: 5px; 
	box-sizing: border-box; 
	border-radius: 4px;
	position: absolute;
	top: -50px;
	left: -5px;
	display: none;
	z-index: 999;
	border: 1px solid #333;
}
.box-status .quest:hover span{color: #fff; display: block;}
.box-status p{text-align: left; color: #777; text-transform: uppercase; font-size: 0.7em; font-weight: 600; margin-top: 10px; margin-left: 20px;}
.box-status p span{display: block; font-size: 1em; text-transform: none; font-weight: 100; color: #3A8BC1; margin-left: 25px;}
.box-status p span .total-on{ position: relative; top: -18px; left: 55px; font-size: 1.3em; font-weight: 600; color: #51A33D;}

/* result */
.result-error{
	width: 100%;
	height: auto;
	padding: 5px;
	margin-bottom: 3px;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: rgba(0,0,0,0.5);
	transition: all 0.5s;
}
.result-ok{
	width: 100%;
	height: auto;
	padding: 5px;
	margin-bottom: 3px;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: rgba(0,0,0,0.8);
	transition: all 0.5s;
}
.result-error p{color: #ff3300; font-size: 0.7em;}
.error{color: red; font-size: 0.7em;}
.result-ok p{color: green; font-size: 0.9em;}
.result-ok p span{display: block; font-size: 0.8em;}

/* field */
.field{
	width: 90%;
	height: auto;
	margin: 0 auto;
	background: url("../img/line.png") bottom no-repeat;
	margin-top: 5px;
	border-radius: 4px;
	background-color: rgba(0,0,0,0.5);
}
.field .icon{
	float: left;
	width: auto;
	height: auto;
	color: #999;
	font-size: 0.8em;
	margin-top: 8px;
	position: relative;
	left: 10px;
	box-sizing: border-box;
}
.field input{
	color: #999;
	font-size: 0.9em;
	padding: 10px 5px;
	position: relative;
	top: -2px;
	right: -0px;
	background: 0;
	text-align: left;
	box-sizing: border-box;
	margin-top: 5px;
	border: 0;
	margin: 0 auto;
	width: 165px;
	margin-left: 17px;
	outline: none;
}

/* button */
.btn-login{
	display: inline-block;
	text-transform: uppercase;
	font-size: 0.8em;
	color: #ccc;
	border: 0px;
	text-shadow: 1px 1px 1px #000;
	font-weight: 700;
	border-radius: 4px;
	cursor: pointer;
	width: 127px;
	height: 30px;
	background: url("../img/button_login.png");
	transition: all 0.5s;
	margin-top: 15px;
}
.btn-login:hover{color: #fff; text-shadow: 1px 1px 10px #fff; background: url("../img/button_login_over.png");}

/* link */
.link-forgot{float: left; color: #888; font-size: 0.7em; margin-left: 15px; margin-top: 10px;}
.link-forgot:hover{color: #fff; text-decoration: underline;}
.link-create{float: left; color: #888; margin-left: 15px; font-size: 0.7em;}
.link-create a{color: #C79A3C; font-weight: 600;}
.link-create a:hover{text-decoration: underline;}

/* vote-game */
.vote-game{
	width: 121px;
	height: 68px;
	display: inline-block;
	position: relative;
	top: 15px;
	opacity: 1;
	margin: 0 auto;
	background: url("../img/facebookbanner.png");
	transition: all 0.5s;
}
.vote-game:hover{opacity: 0.7;}


/* vote-game */
.vote-gamediscord{
	width: 121px;
	height: 68px;
	display: inline-block;
	position: relative;
	top: 15px;
	opacity: 1;
	margin: 0 auto;
	background: url("../img/discordbanner.png");
	transition: all 0.5s;
}
.vote-gamediscord:hover{opacity: 0.7;}


.linkuser{
	float: left;
	background-color: red;
}
/* COLUMN LEFT */
.column-left{float: left; width: 230px; height: 600px; background-color: #000;}
/* title_login */
.column-left .title-login{width: 230px; height: 79px; background: url("../img/title_login.jpg") no-repeat;}
/* panel_login */
.column-left .panel-login{width: 230px; height: 278px; background: url("../img/panel_login.jpg") no-repeat;}
/* title_staff */
.column-left .title-staff{width: 230px; height: 79px; background: url("../img/title_staff.jpg") no-repeat;}
/* panel_staff */
.column-left .panel-staff{width: 230px; height: 315px; background: url("../img/panel_staff.jpg") no-repeat;}
/* title_fc */
.column-left .title-fc{width: 230px; height: 81px; background: url("../img/title_fc.jpg") no-repeat;}
/* panel_social */
.column-left .panel-social{width: 230px; height: 288px; background: url("../img/panel_social.jpg") no-repeat;}

/* info server */
.info-server{width: 80%; height: auto; margin: 0 auto; position: relative; left: 10px; top: 15px;}
.info-server p{color: #777; text-align: left; font-weight: 600; font-size: 0.9em; margin-left: 20px;}
.info-server p span{margin-left: 10px; color: #C79A3C; font-weight: 100;}
.info-server hr{border: 1px solid #221; margin-top: 10px; margin-bottom: 10px;}

/* staff */
.box-staff{width: 100%; height: auto; margin: 0 auto;}
.table-staff{width: 100%; margin: 0 auto; margin-left: 20px; position: relative; top: 25px; z-index: 1;}
.table-staff .bg-tr{width: 300px;}
.table-staff th{
	font-size: 1em; 
	color: #C79A3C; 
	font-weight: 600; 
	text-shadow: 1px 1px 1px #000; 
	padding: 3px 5px; 
	box-sizing: border-box; 
	font-family: 'Berkshire Swash', cursive;
}
.table-staff td{font-size: 0.8em; color: #ccc; padding: 3px 5px; box-sizing: border-box; text-align: center;}
.table-staff td span{display: block; font-size: 0.7em;}
.table-staff .icon-fc{
	width: 32px; 
	height: 32px; 
	margin: 0 auto; 
	background-color: #C79A3C; 
	border-radius: 50px; 
	padding: 1px; 
	position: relative; 
	top: 10px;
}
.table-staff .lvl{
	color: #fff; 
	width: 20px; 
	height: 20px; 
	background-color: #238C00; 
	border-radius: 50px; 
	padding: 1px; 
	font-size: 0.6em; 
	border: 1px solid #fff;
	position: relative;
	top: -23px;
	left: 28px;
	z-index: 3;
}
.table-staff .lvl span{color: #fff; font-size: 1.2em; display: block; margin-top: -3px; font-weight: 700; text-shadow: 1px 1px 1px #000;}
.table-staff .office{text-transform: uppercase; text-shadow: 1px 1px 1px #000;}
.table-staff .office span{text-transform: none; font-size: 0.9em;}

/* social */
.box-social{width: 100%; height: auto; position: relative; left: 17px;}

/* COLUMN RIGHT */
.column-right{float: right; width: 222px; height: 600px;}
/* title_status */
.column-right .title-status{width: 223px; height: 79px; background: url("../img/title_status.jpg") no-repeat;}
/* panel_status */
.column-right .panel-status{width: 222px; height: 278px; background: url("../img/panel_status.jpg") no-repeat;}
/* title_pvp */
.column-right .title-rank-pvp{width: 223px; height: 84px; background: url("../img/title_rank_pvp.jpg") no-repeat;}
/* panel_pvp */
.column-right .panel-rank-pvp{width: 222px; height: 310px; background: url("../img/panel_pvp.jpg") no-repeat;}
/* title_pk */
.column-right .title-rank-pk{width: 223px; height: 80px; background: url("../img/title_rank_pk.jpg") no-repeat;}
/* panel_pk */
.column-right .panel-rank-pk{width: 222px; height: 288px; background: url("../img/panel_pk.jpg") no-repeat #fff;}

/* table rank */
.box-rank{width: 100%; height: auto; margin: 0 auto;}
.table-rank{width: 100%; margin: 0 auto; margin-left: -15px; position: relative; top: 10px; z-index: 1;}
.pk{margin-left: -25px;}
.table-rank .bg-tr{}
.table-rank th{
	font-size: 1em; 
	color: #C79A3C; 
	font-weight: 600; 
	text-shadow: 1px 1px 1px #000;
	box-sizing: border-box; 
	border: 1px solid #222;
	font-family: 'Berkshire Swash', cursive;
}
.table-rank td{font-size: 0.8em; color: #ccc; border: 1px solid #222; padding: 3px; box-sizing: border-box; text-align: center;}
.table-rank td span{display: block; font-size: 0.7em;}
.table-rank .lvl{
	color: #fff; 
	width: 20px; 
	height: 20px; 
	background-color: #238C00; 
	border-radius: 50px; 
	padding: 1px; 
	font-size: 0.6em; 
	border: 1px solid #fff;
	position: relative;
	top: -23px;
	left: 28px;
	z-index: 3;
}
.table-rank .lvl span{color: #fff; font-size: 1.2em; display: block; margin-top: -3px; font-weight: 700; text-shadow: 1px 1px 1px #000;}
.table-rank .office{text-transform: uppercase; text-shadow: 1px 1px 1px #000;}
.table-rank .office span{text-transform: none; font-size: 0.6em;}
.box-rank a{
	margin: 0 auto; 
	padding: 8px 15px; 
	background-color: #56271F; 
	color: #999; 
	border-radius: 4px;
	box-shadow: 0px 0px 5px #fff inset;
	position: relative; 
	top: 30px; 
	z-index: 3;
	margin-left: -15px;
	font-size: 0.7em;
	text-transform: uppercase;
	transition: all 0.5s;
}
.box-rank a:hover{
	background-color: #56271F; 
	color: #ccc; 
	box-shadow: 0px 0px 10px #fff inset;
}
.box-rank a.btn-pk{margin-left: -35px;}