[dohtml]

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<center>
<div class="corion">
<div class="corion2">
<div class="orionhead"><div style="position:relative; top:39px;">first last</div>
<div style="font-family:open sans condensed; text-transform:uppercase; position:relative; top:40px; font-size:10px; line-height:100%; color:#333;">

LIST OF TRAITS GOES HERE</div>
</div>
<a href="http://cttw.jcink.net/index.php?showuser=1108"><div class="orionhead2"></div></a>
</div>
<div class="orions">

<div class="orion">
<input type="radio" id="orion-1" name="orion-group-1" checked>
<label for="orion-1">about</label>
<div class="orionc">
STUFF ABOUT CHARACTER HERE
</div>
</div>

<div class="orion">
<input type="radio" id="orion-2" name="orion-group-1">
<label for="orion-2">friends</label>
<div class="orionc">
STUFF ABOUT FRIENDS HERE
</div>
</div>

<div class="orion">
<input type="radio" id="orion-3" name="orion-group-1">
<label for="orion-3">enemies</label>
<div class="orionc">
STUFF ABOUT ENEMIES HERE
</div>
</div>

<div class="orion">
<input type="radio" id="orion-4" name="orion-group-1">
<label for="orion-4">lovers</label>
<div class="orionc">
STUFF ABOUT LOVERS HERE
</div>
</div>

</div></div>

</center>
<style type="text/css">
.corion {
  width: 400px;
  padding: 15px;
  height: 400px;
  background-color: #fcfcfc;
  background-image:url(http://41.media.tumblr.com/tumblr_m37lmqN7UD1rsx5i6o5_250.png);
  border: 1px solid #eee;
  color:#333;
  }

.corion2 {
  width: 400px;
  height: 150px
  }

.orionhead {
  width: 230px;
  font-family: "Kaushan Script";
  font-size: 32px;
  text-transform: lowercase;
  line-height: 100%;
  position: relative;
  float: left;
  height: 150px;
  color: #333
  }

.orionhead2 {
  width: 150px;
  height: 115px;
  position: relative;
  float: right;
  border: 10px solid #fcfcfc;
  background-image: url(http://placehold.it/150x120);
  background-size:auto 120px;
  -webkit-background-size: auto 120px;
  background-position: center center;
  -webkit-background-position:center center;
  }

.orions {
  position: relative;
  width: 400px;
  height: 250px;
  overflow: hidden
  }

.orion {
  float: left
  }

.orion label {
  background: #f7f7f7;
  height: 25px;
  margin-bottom: 5px;
  position: relative;
  display: block;
  line-height: 25px;
  width: 100px;
  text-align: center;
  text-transform: uppercase;
  font-family: open sans condensed;
  font-weight: 300;
  color:#666;
  }

.orion [type=radio] {
  display: none
  }

.orionc {
  position: absolute;
  top: 40px;
  bottom: 0px;
  left: 0px;
  right: 0;
  width: 358px;
  height: 178px;
  background: white;
  border-bottom:20px solid white;
  border-top:20px solid white;
  padding: 0 20px;
  overflow: auto;
  text-align: justify;
  font-family: arial;
  font-size: 9.5px;
  line-height: 95%;
  outline: 1px solid #eee;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  transition-duration: 0.8s
  }

.orions [type=radio]:checked ~ label {
  background: white;
  z-index: 2;
  color:#333;
  }

.orions [type=radio]:checked ~ label ~ .orionc {
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  z-index: 5
  }

</style>
[/dohtml]