html, body {
	margin: 0;
	padding: 0;	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body {
	color: #000;
	background: url(../img/background.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-color: #151515;
	overflow-y:scroll;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #222; 
}

::-webkit-scrollbar-thumb {
    background: #111; 
}

::-webkit-scrollbar-thumb:hover {
    background: #090909; 
}

header {
	background-color: #000;
	width: 100%;
	height: 96px;
	display: block;
}

#logo {
	width: 526px;
	height: 88px;
	margin-left: 20px;
	display: inline-block;
	background-image: url("../img/logo.png");
	vertical-align: bottom;
}

#small_logo {
	width: 388px;
	height: 67px;
	margin: -5px auto -5px;
	display: block;
	background-image: url("../img/small_logo.png");
	vertical-align: bottom;
}

#filter {
	display: inline-table;
	margin-top: 20px;
	padding: 10px 15px 10px 10px;
	background-color: #000;
	color: #FFF;
	border-radius: 8px;
}

#filter input[type="checkbox"] {
	display: none;
}

#filter input[type="number"] {
    display: inline-block;
    float: left;
    border: 1px solid #000;
    background-color: #000;
    font-weight: bold;
    color: #4ca0ff;
    width: 50px;
    height: 25px;
    font-size: 20px;
    margin-top: 5px;
    text-align: center;
}

#filter div {
	display: inline-block;
	white-space: nowrap;
	//width: 350px;
}

#filter div:not(:last-child) {
	margin-right: 30px;
}

#filter span {
	float: left;
	font-size: 20px;
	font-family: Arial;
	line-height: 35px;
	margin-left: 10px;
	margin-right: 10px;
}

.tank-icon, .bruiser-icon, .healer-icon, .support-icon, .melee-icon, .ranged-icon {
	width: 33px;
	height: 33px;
	background-size: 26px 26px;
	background-position: 5px 5px;
	background-repeat: no-repeat;
	//top: 3px;
	//margin: 0 5px;
	//position: relative;
}

.tank-icon		{ background-image: url('../img/role/tank.png'); }
.bruiser-icon	{ background-image: url('../img/role/bruiser.png'); }
.healer-icon	{ background-image: url('../img/role/healer.png'); }
.support-icon	{ background-image: url('../img/role/support.png'); }
.melee-icon		{ background-image: url('../img/role/melee.png'); }
.ranged-icon	{ background-image: url('../img/role/ranged.png'); }

.unchecked-icon.tank-icon		{ background-image: url('../img/role/tank_unchecked.png'); }
.unchecked-icon.bruiser-icon	{ background-image: url('../img/role/bruiser_unchecked.png'); }
.unchecked-icon.healer-icon		{ background-image: url('../img/role/healer_unchecked.png'); }
.unchecked-icon.support-icon	{ background-image: url('../img/role/support_unchecked.png'); }
.unchecked-icon.melee-icon		{ background-image: url('../img/role/melee_unchecked.png'); }
.unchecked-icon.ranged-icon		{ background-image: url('../img/role/ranged_unchecked.png'); }

#results {
	color: #FFF;
	border-radius: 8px;
	margin: auto;
}

h1 {
	font-family: Arial;
	margin: 0;
	margin-top: -40px;
	margin-left: -10px;
	min-width: 200px;
	max-width: 200px;
	border-top: 1px solid #111;
	border-radius: 20px 20px 0 0;
	padding: 10px;
	font-size: 24px;
	text-align: center;
	font-weight: normal;
	background-color: #000;
}

h2 {
	font-family: Arial;
	margin: 0;
	font-size: 20px;	
}

h6 {
	font-family: Arial;
	margin: 5px 0 15px;
	font-size: 16px;
}

.player {
	padding: 10px 10px 10px 10px;
	display: inline-block;
	background-color: #000;
	color: #FFF;
	border-radius: 8px;
	margin: 20px 20px 0 20px;
}

.Ta_bg, .Br_bg, .He_bg, .Su_bg, .Me_bg, .Ra_bg, .AR_bg {
    background-position: 30px 24px;
    background-size: 20px 20px;
    background-repeat: repeat-x;
	display: inline-block;
}

.Ta_bg { background-image: url(../img/Ta_bg.png); }
.Br_bg { background-image: url(../img/Br_bg.png); }
.He_bg { background-image: url(../img/He_bg.png); }
.Su_bg { background-image: url(../img/Su_bg.png); }
.Me_bg { background-image: url(../img/Me_bg.png); }
.Ra_bg { background-image: url(../img/Ra_bg.png); }
.AR_bg { background-image: url(../img/AR_bg.png); }

.roleBox {
	display: block !important;
}

.tanks, .bruisers, .healers, .supports, .melees, .rangeds, .allRoles {
    background-position: 30px 24px;
    background-size: 20px 20px;
    background-repeat: repeat-x;
	border-radius: 8px;
	display: inline-block;
	//max-width: 100%;
	//overflow-x: auto;
	//white-space: nowrap;
    //clear: both;
}

.heroIcon {
	display: inline-block;
	background-position: center center;
	background-size: 59px 59px;
    background-repeat: no-repeat;
	//height: 59px;
	//width: 59px;
	height: 65px;
	width: 65px;
	margin: 1px 6px;
	border-radius: 50px;
}

.circle canvas {
	margin-left: -1px;
	margin-top: -1px;
}

.ui-tooltip {
	position: absolute;
	z-index: 100;
	background-color: #000;
    padding: 10px 20px;
    color: white;
    border: 1px solid #555;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
    //width: 200px;
}

.ui-helper-hidden-accessible{
	display: none;
}

#details table td {
	text-align: left;
	padding: 2px;
}