Widget:TestTabs

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script> <style>

1. charPanel button {

       background-color: #b36e14;
       border: 1px solid #64320d;
       outline: none;
       cursor: pointer;
       padding: 0px 10px;
       transition: 0.3s;
       display: inline;
       color: white;
       height: 25px;
   }

1. breaker {

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

div.charFilter select{ border: 1px solid #000;

   color: #fff;
   background: #444;
   position: relative;
   width: 150px;
   float: left;
   height: 25px;
   margin-right: 5px;

} div.charFilter{ display: inline-block;

   padding-left: 15px;

padding-right: 15px;

   width: 100%;

} div.filterLeft{ float: left; } div.filterRight{ float: right; } div.charBox {

       display: inline-block;
   padding: 3px;
   position: relative;
   width: calc((100% / 6) - 3px);
   border: 2px solid rgba(0,0,0,0.0);
   filter:  opacity(70%);	
   transition: filter .6s;

border-radius:7px; overflow: hidden;

    margin-bottom:-6px;

} .charBox:hover .charName, .charBox.hovered .charName {

   display: block;

} div#charPanel {

   text-align: center;
 background: rgba(68,68,68,0.2);
 border-radius: 15px;
 border: 2px solid #8b4513;
 padding: 10px;

}

div.charBox a{ display: block;

   height: 100%;
   color: #F9E4CA;

} .charBox.hovered {

   filter:  opacity(100%);	

}

.charBox:hover { border-color:#F9E4CA;

   filter:  opacity(100%);	

}

div.charName{

   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   text-align: center;
   font-weight: bold;
   display: none;
   background: rgba(15,15,15,0.7);
   padding: 3px;

font-family: "Cinzel Decorative";

}

div.charBox img { width:150px; } </style>

<img id="loading" src="/images/4/42/Loading.gif">

<script>

$("div#charHolder").append("

Hello is this working!

");

</script>