Widget:CharacterList

<style>

1. chars a img.thumbborder {

 border: none;

}

1. chars a:hover img.thumbborder {

   -webkit-filter: grayscale(50%) brightness(50%);
   filter: grayscale(70%) brightness(50%) blur(2px);

-webkit-transition : -webkit-filter 250ms linear; transition: filter 250ms linear;

}

1. chars a:hover .tcont{

   opacity: 1;

transition: opacity 250ms linear;

}

1. chars a:hover

{

   text-decoration: none;

} div#chars .tcont{ position: relative; opacity: 0; color:white; font-family: Cinzel Decorative; font-weight: bold; font-size: 14px; display: inline-block; width: 144px; top: -90px; left: 6px; text-align: center;

}

1. chars a {

display: inline-grid; max-width: 150px; max-height: 150px; margin-right: 20px; margin-left:30px; margin-bottom: 30px;

} div#filter{ border: 3px solid #dddddd; border-radius: 200px; overflow: hidden; display: block; }

div#chars { text-align: center; } div#chars #breaker { text-align: left; text-size: 18px; text-weight: bold; }

1. breaker {

display: block; text-align:left; font-size: 20px; font-weight: bold; padding: 5px; }

1. charSelect {

border: 1px solid #000;

   font-size: 14px;
   color: #fff;
   background: #444;
   padding: 2px;
 position: relative;
 width: 220px;

}

1. charTitle{

display: inline-block; text-align:center; font-size: 24px; font-weight: bold; width: 58%; } </style>

<script> window.addEventListener('load',

 function() { 

$("#chars img.thumbborder").wrap("

");

$("div#filter").each(function(){ $(this).after("" + $(this).parent().attr("title") +"") });

$("#chars img").each(function() { var text = $(this).attr("class"); text = text.substring(0, text.indexOf(" ")); $(this).parent().parent("a").attr("class", text); });

var classList = []; $("div#chars a").each(function() { var text = $(this).attr("class"); text = text.substring(0, text.indexOf("-")); if(classList.indexOf(text) < 0){ classList.push(text); } });

var charList = []; $("span.tcont").each(function() { if(charList.indexOf($(this).text()) < 0){ charList.push($(this).text()); } });

var s1List = []; $("div#chars a").each(function() { if($(this).attr("class").startsWith("s1")){ if(s1List.indexOf($(this).find("span.tcont").text()) < 0){ s1List.push($(this).find("span.tcont").text()); } } });

var s2List = []; $("div#chars a").each(function() { if($(this).attr("class").startsWith("s2")){ if(s2List.indexOf($(this).find("span.tcont").text()) < 0){ s2List.push($(this).find("span.tcont").text()); } } });

 }, false);

</script>