CastofCharacters
From 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 */
- 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) */
- btn-group:after {
content: ""; clear: both; display: table;
}
/*#btn-group button:not(:last-child) {
border-right: none;
}*/
/* Add a background color on hover */
- btn-group button:hover {
background-color: #403c39; color:#deb975;
}
- btn-group button:active {
background-color: #403c39; color:#deb975;
}
- 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>
<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>