.soon{
	position: absolute;
	background: url(../resources/soon.png) center center repeat;
	z-index: 1000;
	opacity: 0.5;
}

.title{
	position: relative;
	margin: 170px 0px 10px -450px;
	width: 900px;
	color: #fff;
	font-family: Economica;		
	font-size: 32px;	
	text-align: left;
	border-bottom: 1px solid #eee;
}

.title span.type{
	font-size: 15px;
	font-family: 'Open Sans';
	color: #555;
	text-transform: uppercase;
	text-shadow: none;
	margin-left: 0px;
	font-weight: normal;
}

.title div.details{
	position: relative;
	float: right;
	font-size: 15px;
	text-align: right;
}

.title div.details h4{
	display: inline-block;
	margin: 0px;
	font-family: 'Economica';
	color: #ccc;
	text-transform: uppercase;
	cursor: pointer;
}

.title span.name {
  color: #C29100;
}


.title div.details h4:not(.active):hover{
	color: #900;
}

.title div.details h4.active{
	color: #471;
}

.title div.details span{
	font-size: 12px;
	font-family: 'Open Sans';
	text-align: right;
	font-weight: normal;
	color: #555;
  	text-shadow: 0px 0px 0px #333;	
}

.title > a{
	font-family: Lato;
	font-size: 22px;
	font-weight: bold;
	color: #F5B800;
	height: auto;
	padding: 3px 8px 0px 8px;	
}

.panel{
	text-align: center; 
	height: auto;
	min-height: 80px; 
	width:900px; 

	position: relative;
	margin: 4px 0px 10px -450px;

	background: #111;
	border: 1px solid #333;
	color: #fff;

}

#main1 .panel-header{
	position: absolute;
	right: -1px;
	top: -221px;
	z-index: 10;
	width: 450px;
	height: 235px;

	background: transparent url(../resources/header-image-riki.png) bottom right no-repeat; 
}

.panel-block{
	width: 100%;
	background: #000 url(https://res.rankedgaming.com/resources/walls/roshan2.jpg) center top;
}


.pages {
	position: relative;
	float: right;
	margin-right: 3px;
	margin-top: 2px;
	height: 25px;
	width: 40px;
	cursor: pointer;
	border: 1px solid #333;
	background: #222;
	font-family: 'Roboto Condensed';
	font-size: 18px;
	font-weight: bold;
	padding-top: 1px;
	text-align: center;
}


#gamesloading{
	position: absolute; 
	top: 45%;
	left: 49%;
}

#gamespage{
	width: 100%; 
	height: auto; 
	position: relative; 
	top: 0px; 
	left: 0px; 
	background:#111; 
	display: none;
}

#gamespage .container{
	position: relative; 
	color: #fff; 
	margin: 10px; 
	width: 900px; 
	height: auto;
}

#gamespage .container .header{
	position: relative; 
	width: 880px;
	height: 24px; 
	background: url(../resources/row-header-games-player.png) no-repeat top left;
}

#gamespage .container .header div{
	position: relative;
	float: left;
	top: 0px;
	height: 35px;
	background: #fff;
	cursor: pointer;
	opacity: 0;

	background-image: url(https://findicons.com/files/icons/1688/web_blog/48/control_down.png);
	background-repeat: no-repeat;
	background-color: transparent;
}

#gamespage .container .header div.active{
	opacity: 1;
}

#gamespage .container .header div:hover{
	opacity: 1;
}


#gamespage .container .row{
	position: relative; 
	height: 30px; 
	width: 880px; 
	margin-bottom: 3px; 
	font-family: 'Verdana'; 
	font-weight: normal;
	overflow: hidden;
	cursor: pointer;
}

#gamespage .container .row .block{
	position: relative;
	float: left;
	margin-left: 3px; 
	height: 28px; 
	text-align: center; 
	font-size: 14px; 
	font-family: Lato;	
	line-height: 29px;	
	border: 1px solid #252525;
	overflow: hidden;
	padding-left: 5px;
	padding-right: 5px;
	color: #fff;
	text-shadow: 1px 1px 1px #000;

	background-position: center center;
	background-repeat: no-repeat;
	background-color: #191919;	
}


#gamespage .container .row:hover .block{
background-color: #aa5400; border-color: #783b00;
}

#gamespage .container .row .details{ width: 30px;  padding:0px; background-image: url('../resources/gamerecorded.png'); }
#gamespage .container .row .vs{ width: 30px; padding:0px; font-size: 18px; line-height: 22px; color:#f00;}

#gamespage .container .row.green .status{ width: 30px; padding:0px; background-image: url('../resources/statusW.png'); }
#gamespage .container .row.orange .status{ width: 30px; padding:0px; background-image: url('../resources/statusL.png'); }
#gamespage .container .row.blue .status{ width: 30px; padding:0px; background-image: url('../resources/statusR.png');}
#gamespage .container .row.red .status{ width: 30px; padding:0px;  background-color: #a00; border-color: #700;}

#gamespage .container .row .score {text-shadow: 1px 1px 1px #000; line-height: 28px; font-family: 'Roboto Condensed'; text-align: center; color: #fff;} 
#gamespage .container .row .xp{ width: 18px; font-size: 14px; font-family: 'Roboto Condensed'; color: #369; }

.generated-results{color:#ccc;width:440px;margin-top: 0px;position:relative;text-align:left;left:-450px;font-family:'Roboto Condensed', sans-serif;font-size:12px;text-transform:uppercase;}


#gamespage .container .row.red .block{ background-color: #a00;	border-color: #700;	}
#gamespage .container .row.blue2 .block{ background-color: #0044aa;	border-color: #003078;	}
#gamespage .container .row.orange2 .block{ background-color: #aa5400;	border-color: #783b00;	}
#gamespage .container .row.green2 .block{ background-color: #009800;	border-color: #006c00;	}



#gamespage .container .row.red .vs,
#gamespage .container .row.red .xp,
#gamespage .container .row:hover .vs,
#gamespage .container .row:hover .xp{
	color: #fff !important;
}
.generated-results{color:#ccc;width:440px;margin-top: 0px;position:relative;text-align:left;left:-450px;font-family:'Roboto Condensed', sans-serif;font-size:12px;text-transform:uppercase;}
#choose-form{
	display: inline-block;
	position: relative;
}

#select-graph{
	position: absolute;
	top: 2px;
	right: 230px;

	font-family: Lato;
	font-size: 22px;
	font-weight: bold;
	color: #F5B800;
	background: #000;
	border: #444;
	height: auto;
	border-radius: 3px;
	z-index: 20;
	padding: 3px 8px 0px 8px;
	overflow: hidden;
	cursor: pointer;
	text-align: right;
}

#select-graph .list{
	padding-top: 2px;
	height: 0px;
}

#select-graph .list a{
	position: relative;
	width: 100%;
	height: 0px;
	font-size: 18px;
	font-family: 'Roboto Condensed';
	font-weight: normal;
	color: #bbb;
	display: block;
	height: auto;
}

#select-graph .list hr{
	background: #333;
	border:0px;
	height: 1px;
}


#select-graph .list .current{ color: #fff !important; }
#select-graph .list a:hover{ color: #d00 !important;} 

.stats-bar{
	float: left; 
	height: 26px; 
	opacity: 0.7;

	-webkit-transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;	
}

.stats-bar:hover{
	opacity: 0.85;
}

#main-profile{
	background: transparent;
	border: 0px;
 
	height: 230px;
	margin-top: 15px;
	z-index: 20;
}

#avatar-container{
	position: relative;
	float: left;
	width: 200px;
	height: 230px;

	background: #111;
	border: 1px solid #222;
	border-radius: 3px;	
}

#avatar-container .avatar{
	position: relative;
	float: left;
	width: 188px;
	height: 148px;
	border-radius: 3px;
	margin: 6px 0px 0px 6px;

	background-color: #000;
	background-position: top center;
	background-repeat: no-repeat;
}

#avatar-container .avatar-status{
	width: 180px;
	height: 62px;

	position: absolute;
	bottom: 0px;
	left: 0px;

	background: url(../resources/avatar-status.png);
}

#avatar-container .progressbar{
	position: relative;
	float: left;
	width: 190px;
	height: 30px;
	border-radius: 5px;
	background: #000;
	margin: 0px 0px 0px 5px;
	cursor: pointer;
}

#avatar-container .progressbar .progress{
	position: absolute;
	background-color: #471;
	border: 1px solid #491;
	top: 2px;
	left: 2px;
	width: 184px;
	height: 24px;
	border-radius: 2px;
}

#avatar-container .progressbar.red .progress{   
	background-color: #900;
	border: 1px solid #a00;
}

#avatar-container .progressbar.blue .progress{   
	background-color: #245586;
	border: 1px solid #246597;
}



#avatar-container .progressbar .text{
	position: absolute;
	top: 2px;
	left: 2px;
	width: 184px;
	height: 26px;
	text-align: center;
	color: #fff;
	font-family: Calibri;
	text-shadow: 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000 ,0px 0px 1px #000;
	line-height: 26px;
	font-size: 15px;	
}

#avatar-container .avatar-status .text2{
	width: 180px;
	height: 26px;

	position: absolute;
	bottom: 2px;
	left: 0px;

	text-align: center;
	color: #000;
	font-family: Lato;
	font-size: 14px;
	line-height: 25px;
}

#avatar-container .avatar-status .progress{
	width: 124px;
	height: 26px;

	position: absolute;
	bottom: 2px;
	left: 1px;
	background: url(../resources/progressbar/green-bg.png);
	border-left: 1px solid #289815;
	border-right: 1px solid #289815;
}



#compare-button{
	width: 108px;
	height: 34px;
	position: absolute;
	bottom: -13px;
	right: 20px;

	background: url(../resources/compare.png);
	cursor: pointer;
}


#stats-container{
	position: relative;
	float: left;
	width: 230px;
	height: 230px;
	background: #111;
	border: 1px solid #222;
	border-radius: 3px;
	margin-left: 5px;
	cursor: pointer;
}

#stats-container .won{
	position: absolute;
	top: 6px;
	right: 6px;
	color: #471;
	font-size: 14px;
	font-family: 'Open Sans';
}

#stats-container .lost{
	position: absolute;
	bottom: 6px;
	left: 6px;
	color: #b00;
	font-size: 14px;
	font-family: 'Open Sans';
}

#stats-container .rmk{
	position: absolute;
	top: 6px;
	left: 6px;
	color: #369;
	font-size: 14px;
	font-family: 'Open Sans';
}

#stats-container .left{
	position: absolute;
	bottom: 6px;
	right: 6px;
	color: #B35900;
	font-size: 14px;
	font-family: 'Open Sans';
}

#kda-container{
	position: relative;
	float: right;
	width: 238px;
	height: 230px;
}

#kda-container > div{
	position: relative;
	float: left;
	width: 112px;
	height: 64px;
	padding-top: 8px;
	background: #111;
	border: 1px solid #222;
	border-radius: 3px;
	margin: 0px 0px 5px 5px;
	font-family: 'Open Sans';
	font-size: 12px;
	color: #777;
	line-height: 12px;
}

#kda-container > div h4{
	color: #ddd;
	font-family: Economica;
	font-size: 36px;
	line-height: 36px;
	text-shadow: 0px 0px 0px #000, 0px 0px 0px #000, 0px 0px 0px #000;
	margin: 0px 0px 0px 0px;
}

#info-container{
	position: relative;
	float: left;
	width: 223px;
	height: 240px;
}

#info-container > div{
	position: relative;
	float: right;
	margin-left: 5px;
	background: #111;
	border: 1px solid #222;
	border-radius: 3px;
	width: 67px;
	height: 56px;
	font-family: 'Open Sans';
	font-size: 12px;
	color: #777;
	line-height: 10px;
	padding-top:8px;
	margin-bottom: 5px;
}

#info-container > div h4{
	color: #ddd;
	letter-spacing: -1px;
	font-family: Economica;
	font-size: 30px;
	line-height: 36px;
	text-shadow: 0px 0px 0px #000, 0px 0px 0px #000, 0px 0px 0px #000;
	margin: 0px 0px 0px 0px;
}

#info-container > .compare{
	margin-bottom: 0px;
	width: 215px;
	height: 88px;
	-webkit-perspective: 1000;
	perspective: 1000;
	padding-top: 0px;
	background: transparent;
	border: 1px solid transparent;
}

#info-container > .compare .button{
	position: absolute;
	top: -1px;
	left: -1px;
	margin-bottom: 0px;
	width: 215px;
	height: 90px;
	margin: 0px;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

#info-container > .compare > .button > .front{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 215px;
	height: 80px;

	line-height: 11px;
	color: #aaa;
	background: #800;
	border: 1px solid #a00;
	cursor: pointer;
	font-family: Verdana;
	font-size: 11px;
	border-radius: 3px;
	padding-top: 8px;
	transform: rotateX(0deg);
	backface-visibility: hidden;	
	z-index: 2;
}

#info-container > .compare > .button > .back{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 215px;
	height: 88px;

	line-height: 11px;
	color: #aaa;
	cursor: pointer;
	font-family: Verdana;
	font-size: 11px;
	border-radius: 3px;

	backface-visibility: hidden;
	transform: rotateX(180deg);
}

#info-container > .compare > .button > .back input{
	position: relative;
	float: left;
	margin: -2px 0px 5px 0px;
	width: 143px;
	height: 42px;
	line-height: 42px;
	text-align: center;
	font-family: 'Open Sans';
	font-size: 16px;
	color: #000;
	background: #8F6B00;
	border: 1px solid #C29100;
	border-radius: 3px;
}

 
#info-container > .compare > .button > .back input::-webkit-input-placeholder { color: #000;}
#info-container > .compare > .button > .back input:-moz-placeholder { color: #000; }
#info-container > .compare > .button > .back input::-moz-placeholder { color: #000; }
#info-container > .compare > .button > .back input:-ms-input-placeholder{ color: #000; }


#info-container > .compare > .button > .back .mode{
	position: relative;
	float: right;
	width: 67px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-family: 'Open Sans';
	color: #000;
	background: #264D73;
	border: 1px solid #336699;
	border-radius: 3px;
	margin: -2px -2px 5px 0px;
	font-size: 15px;
	font-weight: normal;
	text-transform: uppercase;
}

#info-container > .compare > .button > .back .compare{
	position: relative;
	float: right;
	margin-right: -2px;
	width: 141px;
	height: 41px;
	line-height: 30px;
	text-align: center;
	font-family: 'Open Sans';
	color: #000;
	background: #471;
	border: 1px solid #491;
	border-radius: 3px;
}

#info-container > .compare > .button > .back .close{
	position: relative;
	float: left;
	width: 67px;
	height: 41px;
	line-height: 30px;
	text-align: center;
	font-family: 'Open Sans';
	color: #eee;
	background: #800;
	border: 1px solid #a00;
	border-radius: 3px;
}

#info-container > .compare > .button > .back h4{
	line-height:  41px;
	margin-top: 0px;
	font-size: 24px;
}


#info-container div.compare .button.flip{
	transform: rotateX(180deg);
}


#info-container div.compare h4{
	color: #000;
	margin-top: 10px;
	letter-spacing: -1px;
}



#main-graph{
	height: 320px;
	background: #111;
	border: 1px solid #222;
	border-radius: 3px;
	cursor: pointer;
}

#main-graph #graphLoading{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
 	background: url(../resources/wait.gif) no-repeat center center;
}

#main-graph #chartContainer{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;	
}

 
#main-games{
	background: transparent;
	border: 0px;	
	height: auto;
	border-radius: 3px;
	cursor: pointer;
}

#main-games .row{
	width: 902px;
}


#main-games .row{
	position: relative;
	width: 906px;
	height: auto;
}



#main-games .row .block{
	position: relative;
	float: left;
	min-width: 38px;
	width: auto;
	height: 38px;
	background-color: #111;
	border: 1px solid #222;
	border-radius: 3px;
	margin: 0px 5px 5px 0px;
	line-height: 38px;
	font-size: 15px;
	font-family: 'Open Sans';
	font-weight: normal;
 
	color: #ddd;
}


#main-games  a:nth-child(2n+1) .row .block{
  background-color: #181818;
  border-color: #292929;	
}

#main-games .row:nth-child(2n+1) a .block {
  background-color: #181818;
  border-color: #292929;	
}



#main-games .row:hover .block {
  background-color: #222 !important;
  border-color: #333 !important;	
}

#main-games .row:active .block {
  background-color: #221600 !important;
  border-color: #342200 !important;		
}

#main-games .row .block.green,
#main-games a .row .block.green,
#main-games .row a .block.green{
	background-color: #325014;
	border-color: #407d1b;
	text-shadow: none;
 
	color: #FFF;
	font-size: 16px;
}

#main-games .row .block.red,
#main-games a .row .block.red,
#main-games .row a .block.red{
	background-color: #800;
	border-color: #a00;
	text-shadow: none;
	color: #FFF;
	font-size: 16px;	
}

#main-games .row .block.blue,
#main-games a .row .block.blue,
#main-games .row a .block.blue{
	background-color: #192d41;
	border-color: #24415e;
	text-shadow: none;
	color: #FFF;
	font-size: 16px;
}

#main-games .row .block.orange,
#main-games a .row .block.orange,
#main-games .row a .block.blue{
	background-color: #735a0d;
	border-color: #9d7a11;
	text-shadow: none;
	color: #FFF;
	font-size: 17px;
}







#main-games .row .block.text{
	padding: 0px 8px;
	font-size: 14px;
}


#main-games .row > div.hero > div{
	position: relative;
	width: 38px;
	height: 38px;
	background-image: url('../resources/hero-sprite-40x40.png');
	margin: 0px;
}

#main-games .row .status0{ background: #111 url(../resources/statusR.png) center center no-repeat;}
#main-games .row .status1{ background: #111 url(../resources/statusW.png) center center no-repeat;}
#main-games .row .status2{ background: #111 url(../resources/statusL.png) center center no-repeat;}
#main-games .row .status3{ background: #111 url(../resources/statusQ.png) center center no-repeat;}
#main-games .row .status4{ background: #111 url(../resources/statusQ.png) center center no-repeat;}
#main-games .row .status5{ background: #111 url(../resources/statusQ.png) center center no-repeat;}

#main-games .row .link{ background: #111 url(../resources/gamerecorded.png) center center no-repeat;}

/*#main-games .row.status0 > div{ border: 1px solid #13263A;}
#main-games .row.status1 > div{ border: 1px solid #1F3509;}
#main-games .row.status2 > div{ border: 1px solid #382A00;}*/
#main-games .row.status3 > div, #main-games .row.status3 > a > div{ border: 1px solid #300 !important; background-color: #200 !important;}
#main-games .row.status4 > div, #main-games .row.status3 > a > div{ border: 1px solid #300 !important; background-color: #200 !important;}
#main-games .row.status5 > div, #main-games .row.status3 > a > div{ border: 1px solid #300 !important; background-color: #200 !important;}

 /*FOR ACHIEVEMENTS*/
	#main-achievements{
		background: transparent;
		border: 0px;
		height: auto;
		margin-top: 15px;
		z-index: 20;	
	}	

	#list-achievements{
		position: relative;
		float: left;
		width: 900px;
	}

	#list-achievements .info{
		position: relative;
		float: left;
		margin-right: 0px;
		background: #111;
		border: 1px solid #222;
		border-radius: 3px;
		width: 123px;
		height: 78px;
		font-family: 'Open Sans';
		font-size: 12px;
		color: #777;
		line-height: 15px;
		padding-top: 8px;
	}

	#list-achievements .info.link{
		background: #700;
		border: 1px solid #900;
		color: #ddd;

		float: right;
		width: 78px;
		cursor: pointer;
		transition: 100ms all linear;
	}

	#list-achievements .info.link:active{
		transform: scale(0.95, 0.95);
	}	

	#list-achievements .info h4{	
		letter-spacing: -1px;
		font-family: Economica;
		font-size: 40px;
		line-height: 50px;		
		margin: 0px 0px 0px 0px;
	}

	.achievement{
		position: relative;
		float: left;
		margin: 0px 5px 5px 0px ;
		width: 131px;
		height: 86px;

		background-color: #111;
		border: 1px solid #222;
		border-radius: 3px;
		cursor: pointer;
		transition: transform 100ms linear;
	}

	#details-achievements .achievement{
		border: none;
		background: transparent;
		margin: 8px 0px 0px 16px;
		width: 162px;
		height: 105px;
	}

	#details-achievements .achievement .text{
		font-size: 12px;
	}	
 
	.achievement.disabled{
		background-color: #050505;
		border: 1px solid #111;
/*		opacity: 0.3;*/
	}

	.achievement.disabled .logo,
	.achievement.disabled .wings,
	.achievement.disabled .text{
		opacity: 0.25;
	}

 	.achievement .logo{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-position: 0px 6px;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.achievement .wings{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-image: url(../resources/achievements/wings.png);
		background-position: 0px 6px;
		background-repeat: no-repeat;
		background-size: 100% auto;
		color: #EEE;
	}

	.achievement .new{
		position: absolute;
		top: -4px;
		right: -4px;
		width: 48px;
		height: 64px;
		background-image: url(../resources/achievements/new.png);
		display: none;
	}
 
	.achievement-info .achievement .new{
	    top: -9px;
	    right: -29px;
	}

	.achievement .text{
		position: absolute;
		bottom: 3px;
		left: 0px;
		width: 100%;
		height: 20px;
		font-family: 'Shojumaru', cursive;
		text-transform: uppercase;
		text-align: center;
		font-size: 10px;
	}

	.achievement .level{
		position: absolute;
		bottom: 3px;
		left: 15px;
		width: 120px;
		height: 4px;
		white-space: nowrap;
		overflow: hidden;
	}

	.achievement .level div{
		position: relative;
		float: left;
		height: 100%;
		height: 3px;
		background-color: #060606;
		margin-bottom: 2px;
		border: 1px solid #000;
		border-radius: 1px;
	}

	.achievement[data-maxlevel="1"] .level div{ width: 95px; margin-left: 2px; }
	.achievement[data-maxlevel="2"] .level div{ width: 44px; margin-left: 3px; }
	.achievement[data-maxlevel="3"] .level div{ width: 28px; margin-left: 3px; }
	.achievement[data-maxlevel="4"] .level div{ width: 21px; margin-left: 2px; }
	.achievement[data-maxlevel="5"] .level div{ width: 16px; margin-left: 2px; }

	.achievement[data-level="1"] .level div:nth-child(-n+1){ background: #471; border: 1px solid #481;}
	.achievement[data-level="2"] .level div:nth-child(-n+2){ background: #471; border: 1px solid #481;}
	.achievement[data-level="3"] .level div:nth-child(-n+3){ background: #471; border: 1px solid #481;}
	.achievement[data-level="4"] .level div:nth-child(-n+4){ background: #471; border: 1px solid #481;}
	.achievement[data-level="5"] .level div:nth-child(-n+5){ background: #471; border: 1px solid #471;}


	.achievement[data-maxed="true"]{ border: 1px solid #4A3500; }
	.achievement[data-maxed="true"] .wings{ background-image: url(../resources/achievements/wings-gold.png); }
	.achievement[data-maxed="true"] .text{ color: #eca700; }
	.achievement[data-maxed="true"] .level div{ background: #eca700 !important; border: 1px solid #FFB405 !important; }

	.achievement[data-new="true"] .new { display: block; }
 

 /*FOR HERO STATS*/
#main-heroes{
	background: transparent;
	border: 0px;
	height: auto;
	margin-top: 15px;
	z-index: 20;	
}

#list-heroes{
	/* margin: 5px 5px 10px 10px; */
	position: relative;
	float: left;
	width: 698px;	
}

#list-heroes .hero{
	position: relative;
	float: left;
	margin: 0px 2px 2px 0px;
	padding: 4px;
	background-color: #111;
	border: 1px solid #444;
	border-radius: 3px;
	cursor: pointer;

}
 
#list-heroes .hero .img{
	position: relative;
	width: 38px;
	height: 38px;
	background-image: url('../resources/hero-sprite-40x40.png');
	margin: 0px;
}

#list-heroes .hero:hover {
	padding: 4px;
	border-width: 1px;
}

#list-heroes .hero { padding: 0px; border-width: 5px; border-style: solid;}
#list-heroes .hero.disabled {   border-color: #090909 !important; }
#list-heroes .hero.INT{ border-color: #204060; }
#list-heroes .hero.AGI{ border-color: #1F3608; }
#list-heroes .hero.STR{ border-color: #4D0000; }


/*#list-heroes .hero.disabled .img{
	background-image: url('../resources/hero-sprite-40x40.png');
}
*/

#list-heroes .tavern{
	position: relative;
	float: left;

	margin: 0px 15px 35px 0px;
	width: 222px;
	height: 310px;
 
}

#list-heroes .tavern:nth-child(3n+3){
	margin-right: 0px;
}

.panel .details{
	position: relative;
	float: right;
	width: 200px;
	background: #111;
	border: 1px solid #222;
	border-radius: 3px;
	min-height: 20px;
	height: auto;
	padding: 10px 0px;
	margin-bottom: 10px;
	cursor: pointer;	
}

.panel .details .progressbar{
	position: relative;
	float: left;
 	width: 164px;
	height: 30px;
	border-radius: 5px;
	background: #000;
	margin: 0px 0px 0px 16px;
}

.panel .details .progressbar .progress{
	position: absolute;
	background-color: #471;
	border: 1px solid #491;
	top: 2px;
	left: 2px;
	width: 100px;
	height: 24px;
	border-radius: 2px;
	transition: width 550ms linear;
}
 
.panel .details .progressbar.gold .progress{
	background-color: #900;
	border: 1px solid #a00;					
}

.panel .details .progressbar.blue .progress{
	background-color: #245586;
	border: 1px solid #246597;					
}				

.panel .details .progressbar .text {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 158px;
	height: 26px;
	text-align: center;
	color: #fff;
	font-family: Calibri;
	text-shadow: 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000 ,0px 0px 1px #000;
	line-height: 26px;
	font-size: 15px;
}


#main-heroes .details .hero{
	position: relative;
	float: left;
	width: 28px;
	height: 28px;

	background-image: url('../resources/sprite-icons.jpg');
	border:2px solid #000;
	border-radius: 5px;
	margin: 0px 2px 3px 0px;
	clear: right;
}

#main-heroes .details .top{
	position: relative;
	height: auto;
	margin: 10px 15px;
}

#main-heroes .details .top .progressbar{
	width: 133px;
	height: 32px;
	margin: 0px 0px 3px 3px;
}

#main-heroes .details .top .progressbar .progress{
	height: 26px;
	left: auto;
	right: 2px;
}

#main-heroes .details .top .progressbar .text{
	width: 122px;
	padding-right: 5px;
	height: 32px;
	text-align: right;
}

#main-heroes .details .heroBig{
	position: relative;
	float: left;
	margin: 0px 2px 2px 0px;
	padding: 4px;
	background-color: #111;
	border: 1px solid #444;
	border-radius: 3px;
	cursor: pointer;
	transition: transform 100ms linear;
}

#main-heroes .details .heroBig .img{
	position: relative;
	width: 28px;
	height: 28px;

	background-image: url('../resources/sprite-icons.jpg');
	box-shadow: 0px 0px 2px 0px #000;
}

#main-heroes .details .heroBig.INT{ border: 1px solid #204060;}
#main-heroes .details .heroBig.AGI{ border: 1px solid #1F3608;}
#main-heroes .details .heroBig.STR{ border: 1px solid #4D0000;}

#main-heroes .details .name{
	position: relative;
	float: left;
	width: auto;
	text-align: left;
	line-height: 18px;
	margin-left: 4px;
	font-family: Economica;
	font-size: 19px;
	font-weight: 700;


}

#main-heroes .details .name.INT{ color: #369; text-shadow: 0px 0px 0px #369;}
#main-heroes .details .name.STR{ color: #900; text-shadow: 0px 0px 0px #900;}
#main-heroes .details .name.AGI{ color: #471; text-shadow: 0px 0px 0px #471;}

#main-heroes .details .name span{
	color: #777;
	line-height: 20px;
	font-size: 14px;
	text-shadow: none;
	font-family: 'Open Sans';
	font-weight: normal;
}


#main-heroes .details .info{
	position: relative;
	float: left;
	clear: both;
	width: 160px;
	margin: 8px 0px 0px 18px;

	color: #fff;
	font-family: Calibri;
	text-shadow: 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 1px #000 ,0px 0px 1px #000;
	line-height: 18px;
	font-size: 15px;
	text-align: left;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;	
}

#main-heroes .details .info span{
	text-align: right;
	float: right;
}

#main-heroes .details .info hr{
	margin: 10px 0px;
	border: none;
	height: 1px;
	background-color: #040404;
}

#main-heroes #hero-stats.details{ display: none; }
#main-heroes #hero-played.details{ display: block; }
#main-heroes #hero-wins.details{ display: block; }


.clrfx{
	position: relative;
	clear: both;
}


.generated-time{
	text-align: center;
	margin-top: 0px;
}

#popBox{
	position: absolute;
	z-index: 23;
	background: rgba(255,255,255,0.75);
	padding: 6px 12px !important;
	border: 1px solid rgba(255,255,255,0.5);
	display: none;
	top: 100px;
	left: 200px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000;
	box-shadow: 3px 3px 8px 2px #000;
	text-shadow: none;
	border-radius: 3px;
}