<!--HTML-->

<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<center>
<div id="app">
<div class="tabs">
<input type="radio" id="tabs-1" name="tabs-group-1" checked>
<label for="tabs-1">In General</label> 
<div class="content1">
<div class="title1">In General - - -</div>

!!!!!! GENERAL TEXT GOES HERE !!!!!!

</div></div>

<div style="margin-top: 30px;">
<div class="tabs"> 
<input type="radio" id="tabs-2" name="tabs-group-1">
<label for="tabs-2">Family</label>
<div class="content1"> 
<div class="title1">Family - - -</div>

!!!!!! FAMILY TEXT GOES HERE !!!!!!

</div></div></div>

<div style="margin-top: 60px;">
<div class="tabs">
<input type="radio" id="tabs-3" name="tabs-group-1">
<label for="tabs-3">Traits</label>
<div class="content1">
<div class="title1">Traits - - -</div>

!!!!!! CHARACTER TEXT GOES HERE !!!!!! 

</div></div></div>

<div style="margin-top: 90px;">
<div class="tabs">
<input type="radio" id="tabs-4" name="tabs-group-1">
<label for="tabs-4">Life</label>
<div class="content1">
<div class="title1">Your Life - - -</div> 

!!!!!! LIFE TEXT GOES HERE !!!!!!

</div></div></div>

<div style="margin-top: 120px;">
<div class="tabs"> 
<input type="radio" id="tabs-5" name="tabs-group-1">
<label for="tabs-5">Ending</label>
<div class="content1">
<div class="title1">Ending - - -</div>

<center>
<table cellspacing="5" cellpadding="0" style="margin-top: 50px;">
<tr>
<td style="height: 20px">
<div class="shortfact">Face Claim</div>
<div class="shortfacta">Name fits here</div>
</td> 
<td style="height: 20px">
<div class="shortfact">Name</div>
<div class="shortfacta">Name here ~</div>
</td>
</tr>
<tr>
<td>
<div class="shortfact">Age</div>
<div class="shortfacta">Age here</div>
</td>
<td>
<div class="shortfact">Misc</div>
<div class="shortfacta">text ~</div>
 </td>
</tr>
</table>

</center></div></div></div></div></center>

<style type="text/css"> #app { position: relative; width: 460px; height: 560px; padding: 20px; background-image: url('http://funkyimg.com/i/2dRK3.png'); } 

.tabs { float: right; } 

.tabs label { display: block; width: 70px; padding: 5px; text-align: center; font-family: 'Calibri'; font-size: 11px; text-transform: uppercase; background: #d0d0d0; position: relative; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; top: 100px;  } 

.tabs:hover label { color: #d0d0d0; background: #eeeae3;  -moz-transition-duration: .8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; } 

.tabs [type=radio] { display: none; } 

.content1 { width: 340px; height: 410px; padding: 8px; font-family: 'Verdana'; font-size: 10px; color: #eeeae3; overflow: auto; background: rgba(255, 255, 255, 0.7); opacity: 0; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; position: absolute; top: 115px; right: 120px; text-align: justify; line-height: 1.2em; } 

.content1:hover { background-color: #d0d0d0; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s;  }

.content1::-webkit-scrollbar { width: 5px; background: #d0d0d0; } .content1::-webkit-scrollbar-thumb { background: #eeeae3; } .content1::-webkit-scrollbar-corner { background: #eeeae3; } .content1::-webkit-scrollbar { width: 5px; background: #d0d0d0; } .content1::-webkit-scrollbar-thumb { background: #eeeae3; } .content1::-webkit-scrollbar-corner { background: #eeeae3; } 

[type=radio]:checked ~ label { color: #d0d0d0; background: #eeeae3; z-index: 2; } 

[type=radio]:checked ~ label ~ .content1 { z-index: 1; opacity: 1; }

.title1 { font-family: 'Electrolize'; font-size: 25px; text-transform: uppercase; } 

.shortfact { width: 130px; padding: 3px; background: #eeeae3; font-family: 'Verdana'; font-size: 12px; color: #d0d0d0; text-transform: uppercase; margin: auto; text-align: center; } 

.shortfacta { width: 130px; padding: 3px; background: #3b3b3b; font-family: 'Verdana'; font-size: 7px; color: #d0d0d0; text-transform: uppercase; letter-spacing: 2px; margin: auto; text-align: center; } 

.shortfact a:link { color: #d0d0d0; font-weight: normal; text-shadow: none; text-decoration: none;  }</style>