.ability {
	height: 548px;
	width: 402px;
	background: url(../images/ability/background-v2.png);
	background-repeat: no-repeat;
	background-position: top left;
	position: relative;
	text-align: center;
	color: gold;
	margin-top:5px;
}
.class-ability {
	width: 100%;
	height: 548px;
	background: url(../images/ability/intro-bg-v2.png);
	font-family: "Roboto Condensed", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	font-size: 12px;
}
.class-ability table {
	width: 100%;
}
.class-ability div.title {
	padding-top: 15px!important;
	height: 55px;
	font-size: 12px;
}
.class-ability div.content {
	overflow-x: auto;
	height: 480px;
	width: 386px;
	margin-top: -5px;
}
.class-ability table tr{
	background-color:inherit !important;
}
.class-ability table tr th {
	padding-bottom: 25px!important;
}
.class-ability table tr td {
	padding: 0px!important;
}
.class-ability table tr td.title-ability {
	text-align: left;
	color: #fff;
	padding-left: 30px!important;
	padding-top: 5px!important;
}
.class-ability table tr.line-ability {
	text-align: left;
	color: #fff;
	padding-left: 30px!important;
}
.class-ability table tr td:first-child {
	padding-left: 30px!important;
	width: 55px;
}
.class-ability table tr td:nth-child(2) {
	padding-left: 7px!important;
	width: 45px;
	color: gold;
	font-weight: bold;
	text-shadow: 0px 0px 5px gold;
}
.class-ability table tr td:nth-child(3) {
	width: 240px;
	color: #ccc;
}
.class-ability table tr td:nth-child(3) span{
	display:block;
	width: 235px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.class-ability table tr td:nth-child(4) {
	color: gold;
}
.class-ability table tr td.title-red {
	background: url(../images/ability/titlev2-red.png) no-repeat center center;
	background-position: 16px 10px;
	height: 40px;
}
.class-ability table tr.line-red {
	background: url(../images/ability/linev2-red.png) no-repeat center center;
	background-position: 20px 1px;
}
.class-ability table tr td.title-blue {
	background: url(../images/ability/titlev2-blue.png) no-repeat center center;
	background-position: 16px 10px;
	height: 40px;
}
.class-ability table tr.line-blue {
	background: url(../images/ability/linev2-blue.png) no-repeat center center;
	background-position: 20px 1px;
}
.class-ability table tr td.title-purple {
	background: url(../images/ability/titlev2-purple.png) no-repeat center center;
	background-position: 16px 10px;
	height: 40px;
}
.class-ability table tr.line-purple {
	background: url(../images/ability/linev2-purple.png) no-repeat center center;
	background-position: 20px 1px;
}
.class-ability table tr td.title-green {
	background: url(../images/ability/titlev2-green.png) no-repeat center center;
	background-position: 16px 10px;
	height: 40px;
}
.class-ability table tr.line-green {
	background: url(../images/ability/linev2-green.png) no-repeat center center;
	background-position: 20px 1px;
}
.class-ability table tr.line-gray {
	background: url(../images/ability/linev2-gray.png) no-repeat center center;
	background-position: 20px 1px;
}
.class-ability table tr.line-gray img {
	filter: grayscale(100%);
}
.class-ability table tr td img {
	margin-top: -2px;
	margin-bottom: 2px;
	max-height: 30px!important;
}
.class-ability table tr td:nth-child(3).active {
	text-shadow: 0px 0px 4px #fff;
	color: #fff!important;
}
.class-ability table tr td:nth-child(4).active {
	text-shadow: 0px 0px 7px gold;
}
.class-ability table tr td img.active-red {
	-webkit-filter: drop-shadow(0px 0px 6px #ff0000);
	filter: drop-shadow(0px 0px 4px #ff0000) brightness(1.3);
}
.class-ability table tr td img.active-blue {
	-webkit-filter: drop-shadow(0px 0px 6px #0095ff);
	filter: drop-shadow(0px 0px 4px #0095ff) brightness(1.3);
}
.class-ability table tr td img.active-green {
	-webkit-filter: drop-shadow(0px 0px 6px #15d133);
	filter: drop-shadow(0px 0px 4px #15d133) brightness(1.3);
}
.class-ability table tr td img.active-purple {
	-webkit-filter: drop-shadow(0px 0px 6px #59319f);
	filter: drop-shadow(0px 0px 4px #59319f) brightness(1.3);
}