@import url('https://fonts.googleapis.com/css?family=Lato:300,400');

/**
 * GENERAL STYLING
 */
body {
	background-color:#333;
	margin:0px;
}

body, input, select {
	font-family:Lato, Trebuchet MS, Arial, sans-serif;
}

body > div {
	overflow:hidden;
}

h1, h2, h3, h4 {
	color:#fff;
}

h1 {
	font-size:48px;
	font-weight:300;
}

h1 span {
	font-size:24px;
	color:#ccc;
}

input[type="text"], input[type="password"], select {
	min-width:200px;
	border:solid 1px #ccc;
	padding:6px;
	box-sizing:border-box;
}

select {
	padding:5px;
}

input[type="submit"], .btn {
	display:inline-block;
	background-color:#428bca;
	font-size:14px;
	border:none;
	text-decoration:none;
	color:#fff;
	padding:8px;
	margin:0px 3px 0px 0px;
	cursor:default;
	opacity:0.7;
	transition:.5s ease;
}

.btnsm {
	font-size:13px;
	padding:3px 6px;
}

.btnsub {
	background-color:rgba(255, 255, 255, 0.3);
}

input[type="submit"]:hover, .btn:hover {
	opacity:0.9;
}

.btngroup {
	margin-top:6px;
}

.disciplinaries {
	border:solid 6px rgba(0, 0, 0, 0.7);
	background-color:#fff;
	color:#000;
}

.disciplinaries li {
	list-style-type:none;
	border-bottom:solid 1px #ccc;
	padding:6px;
	margin-left:-40px;
	overflow:visible;
}

.disciplinaries li .left {
	float:left;
}

.disciplinaries li .right {
	float:right;
}

.disciplinaries li .fade {
	color:#ccc;
}

.log {
	border:solid 6px rgba(0, 0, 0, 0.7);
	background-color:#fff;
	color:#000;
}

.log li {
	list-style-type:none;
	border-bottom:solid 1px #ccc;
	padding:6px;
	margin-left:-40px;
	overflow:hidden;
}

.log li .left {
	float:left;
}

.log li .right {
	float:right;
}

.log li .fade {
	color:#ccc;
}

.namehistory {
	border:solid 6px rgba(0, 0, 0, 0.7);
	background-color:#fff;
	color:#000;
}

.namehistory li {
	list-style-type:none;
	border-bottom:solid 1px #ccc;
	padding:6px;
	margin-left:-40px;
	overflow:visible;
}

.namehistory li .left {
	float:left;
}

.namehistory li .right {
	float:right;
}

.namehistory li .fade {
	color:#ccc;
}

.graph {
	width:100%;
	height:460px;
	background-color:#fff;
	border:solid 6px rgba(0, 0, 0, 0.7);
	box-sizing:border-box;
}

.container {
	width:90%;
	max-width:1000px;
	margin:0px auto;
}

.navbar, .errorbar, .client > div, .footer {
	display:none;
}

.client form {
	color:#fff;
}

.client form label {
	min-width:15%;
	display:inline-block;
	margin-right:6px;
}

.errorbar {
	background-color:#ff9494;
	border-bottom:solid 1px #000;
	padding:6px 6px 9px 6px;
}

.footer {
	font-size:14px;
	color:#222;
	text-align:center;
}

/**
 * LOGIN STYLING
 */
.login {
	display:none;
}

.login .main {
	max-width:420px;
	background-color:#fff;
	border:solid 6px rgba(0, 0, 0, 0.7);
	margin:120px auto 0px auto;
}

.login .error {
	display:none;
	background-color:#ff9494;
	padding:9px;
	margin-bottom:12px;
}

.login h1 {
	background-color:#eee;
	font-size:42px;
	font-weight:300;
	text-align:center;
	padding:8px 8px 12px 8px;
	color:#000;
	margin:0px;
}

.login form {
	padding:12px;
}

.login input[type="text"], .login input[type="password"] {
	width:100%;
	margin-bottom:12px;
}

.login input[type="submit"] {
	font-size:14px;
	padding:6px 12px;
}

.login .center {
	text-align:center;
}

/**
 * DIALOG STYLING
 */
.mask {
	display:none;
	position:fixed;
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	background-color:rgba(0, 0, 0, 0.9);
	overflow-y:scroll;
	z-index:99;
}

.dialog {
	position:absolute;
	top:10%;
	right:10%;
	bottom:10%;
	left:10%;
	width:80%;
	min-width:360px;
	min-height:380px;
	background-color:rgba(255, 255, 255, 0.95);
	border:solid 6px rgba(0, 0, 0, 0.7);
	color:#000;
	box-sizing:border-box;
	margin:0px auto;
	overflow:hidden;
}

.dialog > div {
	position:absolute;
}

.dialog h1, .dialog h2, .dialog h3, .dialog h4 {
	font-weight:300;
	color:#333;
	margin:0px;
}

.dialog h1 {
	font-size:32px;
}

.dialog h2 {
	font-size:14px;
}

.dialog h3 {
	font-size:12px;
	font-weight:bold;
	color:#aaa;
	margin-bottom:0px;
}

.dialog .info {
	top:0px;
	right:0px;
	bottom:0px;
	left:66%;
	border-right:solid 1px #ccc;
	overflow-y:auto;
	padding:12px;
}

.dialog .logs {
    width: 65%;
	top:0px;
	right:35%;
	bottom:0px;
	left:0px;
	border-right:solid 1px #ccc;
	overflow-y:auto;
	padding:12px;
}

.dialog #skinpreview, .dialog .attribute {
	border-bottom:solid 1px #ccc;
}

.dialog #skinpreview {
	margin-top:-32px;
}

.dialog .attribute {
	background-color:#fff;
	padding:9px;
	overflow-y:visible;
}

.dialog .close {
	float:right;
	margin:12px;
}

.dialog .close img {
	width:24px;
	height:24px;
}

.dialog .filters .label {
	color:#000;
}

.dialog ul {
	border-style:solid;
	border-width:1px 1px 0px 1px;
	border-color:#ccc;
    overflow-y:visible;
}

.dialog ul li:nth-child(even) {
	background-color:#f9f9f9;
}

/**
 * HEADER STYLING
 */
.navbar {
	background-color:#222;
	border-bottom:solid 1px #111;
	font-weight:300;
	color:#fff;
	overflow:hidden;
}

.navbar h1 {
	font-size:24px;
	font-weight:300;
	cursor:pointer;
	float:left;
}

.navbar .right {
	border-right:solid 1px #111;
	float:right;
}

.navbar .right a, .navbar .right a:link, .navbar .right a:visited {
	display:inline-block;
	border-left:solid 1px #111;
	text-decoration:none;
	color:#fff;
	padding:21px 12px;
	opacity:0.6;
	transition:.5s ease;
}

.navbar .right a:hover, .navbar .right a.active {
	opacity:1;
}

.navbar img {
	float:left;
	margin:-2px 8px 0px 0px;
}

.dropdown {
	position:relative;
	overflow:visible;
}

.dropdown > div {
	position:absolute;
	right:0px;
	display:none;
	background-color:#222;
	border-style:solid;
	border-width:0px 1px;
	border-color:#111;
	z-index:98;
}

.dropdown a, .dropdown a:link, .dropdown a:visited {
	display:block;
	border-bottom:solid 1px #111;
	text-decoration:none;
	color:#fff;
	padding:9px;
	opacity:0.6;
	transition:.5s ease;
}

.dropdown a:hover {
	opacity:1;
}

/**
 * CONTENT STYLING
 */
.sect {
	overflow:hidden;
}

.half {
	width:50%;
	float:left;
}

.inner {
	margin:0px 16px;
}

.half:first-child .inner {
	margin-left:0px;
}

.half:last-child .inner {
	margin-right:0px;
}

.gr {
	color:#aaa;
}

/**
 * DASHBOARD STYLING
 */
#dashboard .graph {
	margin-top:16px;
}

.servers li .badge {
	background-color:rgba(0, 0, 0, 0.2);
	border-radius:12px;
	font-size:14px;
	padding:0px 7px 2px 7px;
	float:right;
}

/**
 * PLAYER STYLING
 */
#players {
	padding-top:24px;
}

#players .search {
	text-align:center;
}

#players .search input {
	font-size:24px;
	padding:12px 12px 14px 12px;
}

#players .search input[type="text"] {
	width:60%;
	max-width:600px;
	border:solid 2px #ccc;
	border-radius:6px 0px 0px 6px;
	-moz-border-radius:6px 0px 0px 6px;
	-webkit-border-radius:6px 0px 0px 6px;
}

#players .search input[type="submit"] {
	background-color:#5dba5d;
	border:solid 2px #46a346;
	border-radius:0px 6px 6px 0px;
	-moz-border-radius:0px 6px 6px 0px;
	-webkit-border-radius:0px 6px 6px 0px;
	color:#fff;
	transition:opacity .5s ease-out;
	-moz-transition:opacity .5s ease-out;
	-webkit-transition:opacity .5s ease-out;
}

#players .search input[type="submit"]:hover {
	opacity:0.8;
}

#players .row {
	overflow:hidden;
}

#players .server {
	width:33%;
	box-sizing:border-box;
	padding-right:6px;
	overflow:hidden;
	float:left;
}

#players .server h4 {
	margin-bottom:4px;
}

#players h2 {
	font-weight:300;
	color:#fff;
	margin-bottom:6px;
}

.playericon {
	width:32px;
	height:32px;
	background-color:#000;
	border:solid 2px #222;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	transition:opacity .5s ease-out;
	-moz-transition:opacity .5s ease-out;
	-webkit-transition:opacity .5s ease-out;
}

.playerlink {
	cursor:pointer;
}

.playerlink .playericon:hover {
	opacity:0.6;
}

.serverlink {
    cursor:pointer;
}

/**
 * LOGS STYLING
 */
.logs .more {
	text-align:center;
	color:#333;
}

#logs .search {
	float:right;
}

.filters {
	color:#fff;
	padding-top:3px;
}

.filters .label {
	float:left;
}

.filters a {
	display:inline-block;
	background-color:#428bca;
	border-radius:3px;
	font-family:Arial;
	font-weight:bold;
	font-size:13px;
	padding:4px 8px;
	margin:0px 0px 4px 4px;
	opacity:0.6;
	transition:.5s ease;
	cursor:default;
}

.filters a:hover, .filters a.active {
	opacity:1;
}

/**
 * RESPONSIVE STYLING
 */
@media screen and (max-width: 900px) {
	#playerinfo .search input {
		width:100%;
		margin-bottom:9px;
	}
}

@media screen and (max-width: 700px) {
	.navbar .right {
		border-right:none;
	}

	.navbar .right a, .navbar .right a:link, .navbar .right a:visited {
		border-left:none;
	}

	.navbar .right span {
		display:none;
	}

	.navbar .right img {
		padding-right:0px;
	}

	.dropdown {
		display:block;
		position:initial;
	}
	
	.dropdown > div {
		left:0px;
	}
	
	input[type="text"], input[type="password"], select {
		width:100%;
		margin-bottom:6px;
	}

	.half {
		width:100%;
		float:initial;
	}

	.half .inner {
		margin:0px;
	}

	#players .server {
		width:100%;
		padding-bottom:12px;
	}

	#players .search input[type="text"] {
		width:60%;
	}
	 
	.dialog {
		position:static;
		width:100%;
		border:none;
		margin-top:0px;
	}
	
	.dialog > div {
		position:static;
	}
	
	.dialog .info {
		width:100%;
	}
	 
	.dialog #skinpreview {
		display:none;
	}
}
 
@media screen and (max-width:420px) {
	h1 {
		font-size:36px;
	}
	
	h1 span {
		font-size:18px;
	}
	
	.navbar h1, .navbar .right {
		float:initial;
	}
	
	.navbar .right a, .navbar .right a:link, .navbar .right a:visited {
		padding:0px 12px 12px 0px;
	}
	
	.login .main {
		max-width:100%;
		margin:12px;
	}
	
	#players .search input {
		font-size:16px;
	}
}