ThornsWiki ThornsWiki

<style> .coc-row {

   margin: 10px auto;

}

/* Add padding BETWEEN each column */ .coc-row, .coc-row > .coc-column {

   padding: 5px;

}

/* Create three equal columns that floats next to each other */ .coc-column {

   float: left;
   width: 32.15%;

/*min-width:250px;*/ /*max-width:350px;*/

   display: none; /* Hide all elements by default */

}

/* Clear floats after rows */ .coc-row:after {

   content: "";
   display: table;
   clear: both;

}

/* Content */ .card-content {

   background-color: #403c39;
   padding: 0px 0px;
   color:#ccc5b9;
   border: 4px solid #deb975;

}

h4.charname { background-color:#deb975;

   padding:10px;
   color:#fffcf2;
   display:block;
   width:100%;
   text-align:center;
   margin:-5px auto;
   font-family: 'Metamorphous', cursive;
   font-size:.9em; }

p { padding:0px 20px;

  }
  

/* Race Colors */ .tint img { display: block; }

.tint {

 position: relative;
 float: left;
 cursor: pointer;
 width:100%;
 margin-left:0px;
 margin-top:0px;

}

.tint:before {

 content: "";
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(148, 124, 84, 0.45);
 transition: all .3s linear;

}

.tint:hover:before { background: none; }

.galdor:before { background: rgba(255,234,119, 0.45);

    }

.human:before { background: rgba(204, 128, 63, 0.45); } .passive:before { background: rgba(190, 183, 164, 0.45);

}

.raen:before { background: rgba(89, 159, 160, 0.45); } .wick:before { background: rgba(203, 232, 150, 0.45);

}

/* The "show" class is added to the filtered elements */ .show {

 display: block;

}

/* Style the buttons */

1. btn-group button {

background-color: #403c39; color: #fffcf2; padding: 10px 30px; float: left; font-family: 'Open Sans', sans-serif; font-size: .75em; text-transform: uppercase; border: 1px solid #deb975; display: block; max-width: 100%; margin: 0px 13px; border-radius: 0px !important; }

/* Clear floats (clearfix hack) */

1. btn-group:after {

   content: "";
   clear: both;
   display: table;

}

/*#btn-group button:not(:last-child) {

   border-right: none; 

}*/

/* Add a background color on hover */

1. btn-group button:hover {

   background-color: #403c39;
   color:#deb975;

}

1. btn-group button:active {

   background-color: #403c39;
   color:#deb975;

}

1. btn-group button.active {

   background-color: #deb975;
   color:#403c39;

}

/* Character Links */ .cs-link { display: block; border: 1px solid #deb975; padding: 10px; text-decoration: none; color: #fffcf2; background-color: #242422; width: 75%; margin: 10px auto; }

.cs-link a { color:#fffcf2;; text-decoration:none; }

.cs-link a:hover { color:#403c39; text-decoration:none; }

.cs-link:hover { background: #deb975; color:#403c39; }

/* GLOBAL NAV */ .staticnav { background-color:#474440; overflow:hidden; margin-top:-30px; margin-bottom:20px; border-bottom:2px solid #deb975; }

.staticnav a:link, .staticnav a:visited { float:left; display:block; Text-align:center; Padding:15px 20px; Text-decoration:none; Font-size:0.85em; Font-family:'Metamorphous', serif; text-transform:uppercase; color:#ccc5b9; }

.staticnav a:first-child { margin-left:30px; }

.staticnav a:hover { Background-color: #ccc5b9; Color:#474440; }

.staticnav.active { Background-color: #ccc5b9; Color:#474440; }

.staticnav .icon {

   display: none;

}

@media screen and (max-width: 600px) {

   .staticnav a {
       float: none;

margin:0px auto; width: 100%; }

.staticnav a:first-child { margin-left:0px; }

   }

</style>

<script> filterSelection("all") function filterSelection(c) {

 var x, i;
 x = document.getElementsByClassName("column");
 if (c == "all") c = "";
 for (i = 0; i < x.length; i++) {
   w3RemoveClass(x[i], "show");
   if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
 }

}

function w3AddClass(element, name) {

 var i, arr1, arr2;
 arr1 = element.className.split(" ");
 arr2 = name.split(" ");
 for (i = 0; i < arr2.length; i++) {
   if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
 }

}

function w3RemoveClass(element, name) {

 var i, arr1, arr2;
 arr1 = element.className.split(" ");
 arr2 = name.split(" ");
 for (i = 0; i < arr2.length; i++) {
   while (arr1.indexOf(arr2[i]) > -1) {
     arr1.splice(arr1.indexOf(arr2[i]), 1);     
   }
 }
 element.className = arr1.join(" ");

}

// Add active class to the current button (highlight it) var btnContainer = document.getElementById("btn-group"); var btns = btnContainer.getElementsByClassName("btn"); for (var i = 0; i < btns.length; i++) {

 btns[i].addEventListener("click", function(){
   var current = document.getElementsByClassName("active");
   current[0].className = current[0].className.replace(" active", "");
   this.className += " active";
 });

} </script>

           <button  class="btn active" onclick="filterSelection('all')"> Show all</button>
           <button  class="btn" onclick="filterSelection('galdori')"> Galdor</button>
           <button  class="btn" onclick="filterSelection('humans')"> Human</button>
           <button class="btn" onclick="filterSelection('passives')"> Passive</button>
           <button  class="btn" onclick="filterSelection('raen')"> Raen</button>
           <button  class="btn" onclick="filterSelection('wicks')"> Wick</button>