@import "characterone.css";
@import "charactertwo.css";
@import "characterthree.css";
@import "characterfour.css";
@import "characterfive.css";

.characterinactive{
	opacity: 0.7
}

.leftcharacterstatusinactive:before{
	content:"";
	position: absolute;
	top:0;
	width: 100%;
	bottom:0;
	border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 6px;
	border-top-right-radius: 6px;
	background: rgba(0,0,0,0.4);
    z-index: 10;
}

.rightcharacterstatusinactive:before{
	content:"";
	position: absolute;
	top:0;
	width: 100%;
	bottom:0;
	border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
	background: rgba(0,0,0,0.4);
    z-index: 10;
}

.leftcharacterstatus{
	position: relative;
    height: 70px;
    width: 240px;
    float: left;
	box-shadow: 0px 4px 17px 0px rgba(0,0,0,0.75);
    border-bottom-left-radius: 40px;
    border-top-left-radius: 40px;
	border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}

.characterprofileleft{
left: 0;
}

.characterprofileright{
right: 0;
}

.characterprofile{
	width: 70px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    top: 0;
    
        
}

.characterprofileimgbackground{
	background-image: url(character/background/yellow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 5px;
	overflow: hidden;
	text-align:center
}

.charactercontent{
	width: 200px;
    height: 65px;
    position: absolute;
    z-index: 1;
    top: 0;
    
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.5) 100%);
	    border-radius: 6px;
		   
}

.charactercontentleft{
	left: 35px;
	 border-bottom: 5px solid ;
			border-right: 5px solid;
}

.charactercontentright{
	right: 35px;
	 border-bottom: 5px solid ;
			border-left: 5px solid;
}

.characterprofilenamewrapper{
	    height: 25px;
    overflow: hidden;
    position: relative;
}

.characterprofilename{
	    height: 25px;
    text-align: center;
    line-height: 25px;
    color: #333;
    width: 100%;
    z-index: 1;
	
    width: 165px;
	
}

.characterprofilenameleft{
	padding-left: 38px;
}

.characterprofilenameright{
	padding-right: 38px;
}

.charactermoney{
	color: #F8D642;
    text-align: center;
    height: 40px;
    vertical-align: middle;
    display: table-cell;

	
    width: 165px;
    font-size:20px
}

.charactermoneyleft{
	padding-left: 38px;
}

.charactermoneyright{
	padding-right: 38px;
}



#firstcharacterstatus .characterprofilename{
	background: #F8D642;
}

#firstcharacterstatus .characterprofile{
	background: #F8D642
}

#firstcharacterstatus .characterprofileimgbackground{
	background-image: url(character/background/yellow.png);
}

#firstcharacterstatus .charactercontentleft{
	left: 35px;
	border-color: #F8D642;
}

#secondcharacterstatus .charactermoney{
	color: #F8D642;
}

#secondcharacterstatus .characterprofile{
	background: #4EAEE2
}

#secondcharacterstatus .characterprofileimgbackground{
	background-image: url(character/background/blue.png);
}

#secondcharacterstatus .characterprofilename{
	background: #4EAEE2;
}

#secondcharacterstatus .charactercontentright{

	border-color: #4EAEE2;
}

#secondcharacterstatus .charactermoney{
	color: #4EAEE2;
}


#threecharacterstatus .characterprofilename{
	background: #CFCBC4;
}

#threecharacterstatus .characterprofile{
	background: #CFCBC4
}

#threecharacterstatus .characterprofileimgbackground{
	background-image: url(character/background/white.png);
}

#threecharacterstatus .charactercontentleft{
	left: 35px;
	border-color: #CFCBC4;
}

#threecharacterstatus .charactermoney{
	color: #CFCBC4;
}


#fourcharacterstatus .charactermoney{
	color: #25d2a0;
}

#fourcharacterstatus .characterprofile{
	background: #25d2a0
}

#fourcharacterstatus .characterprofileimgbackground{
	background-image: url(character/background/green.png);
}

#fourcharacterstatus .characterprofilename{
	background: #25d2a0;
}

#fourcharacterstatus .charactercontentright{

	border-color: #25d2a0;
}

#fourcharacterstatus .charactermoney{
	color: #25d2a0;
}

#fivecharacterstatus{
	bottom:0px
}

#fivecharacterstatus .charactermoney{
	color: #F280A0;
}

#fivecharacterstatus .characterprofile{
	background: #F280A0
}

#fivecharacterstatus .characterprofileimgbackground{
	background-image: url(character/background/pink.png);
}

#fivecharacterstatus .characterprofilename{
	background: #F280A0;
}

#fivecharacterstatus .charactercontentright{

	border-color: #F280A0;
}

#fivecharacterstatus .charactermoney{
	color: #F280A0;
}

.rightcharacterstatus{
	position:relative;
	float:right;
	    height: 70px;
    width: 240px;
	box-shadow: 0px 4px 17px 0px rgba(0,0,0,0.75);
    border-bottom-right-radius: 40px;
    border-top-right-radius: 40px;
	border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}

#characteronewraper, #charactertwowraper, #characterthreewraper, #characterfourwraper, #characterfivewraper {
	scale: 0.8;
}