VXR Tracker 1

[doHTML]
<link href="https://fonts.googleapis.com/css?family=Overpass+Mono|Share+Tech+Mono|VT323" rel="stylesheet">

<style type="text/css">

img:hover {
opacity: 1.0;
}

a.trackerbox {
font-size: 9px;
transition: color 1s ease-in-out;
-webkit-transition: color 1s ease-in-out;
-moz-transition: color 1s ease-in-out;
}

a.trackerbox:hover {
color: #999;
}
</style>

<div style="width: 500px; height: 275px; border: 1px solid #111; overflow-y: scroll; background: rgba(0, 0, 0, 0.5); box-sizing: border-box; padding: 5px; margin: auto; text-align: center;">

<h1 style="color: #FF0099;" font-family: Share Tech Mono; width: 100%; margin: auto; margin-top: 10px; font-size: 14px; text-transform: lowercase !important;">Character's Tracker</h1>

<img src="http://placehold.it/100x100" style="margin: auto; border: 1px solid #FF0099; margin: 0px 10px; opacity: 0.7; transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out;" />

<h3 style="font-family: VT323; color: #999; text-transform: uppercase;">blurb or quote or something here</h3>

<h1 style="background: #transparent; width: 100%; margin: auto;"><a href="thread 1" class="trackerbox" style="color: #FF0099;">active thread</a>
<br><a href="thread 2" class="trackerbox" style="color: #0066CC;">active thread</a>
<br><a href="thread 3" class="trackerbox" style="color: #FF9900;">active thread</a>
<br><a href="thread 4" class="trackerbox" style="color: #00FF33;">active thread</a></h1>
</div>
</div>
[/doHTML]