[dohtml]<link href="https://fonts.googleapis.com/css?family=Muli|Yeseva+One|Source+Serif+Pro" rel="stylesheet">
<style>

#opendoors {
 background: #f6f6f6;
 width: 500px;
 height: 600px;
 margin: auto;
 position: relative;
 border: 1px solid #ddd;
 overflow: hidden;
 line-height: 100%;
}

.od-img {
 background-size: cover;
 width: 250px;
 height: 400px;
 position: absolute;
 right: 50px;
 top: 70px;
 border: 1px solid #ddd;
}

.od-compass {
 background-image: url(https://78.media.tumblr.com/1427e0778ae46808f204988f9fcc16e6/tumblr_pcw575MYHX1w9k5uao1_1280.png);
 background-size: cover;
 height: 70px;
 width: 70px;
 position: absolute;
 top: 333px;
 right: 65px;
 z-index: 3;
 transition: 0.6s;
 -webkit-transition: 0.6s;
}

.od-whitebox {
 width: 250px;
 height: 400px;
 position: absolute;
 background: #f6f6f6;
 border: 1px solid #ddd;
 top: 140px;
 left: 40px;
 overflow: hidden;
}



#opendoors label {
 color: #cc3d3d;
 cursor: pointer;
 font-family: yeseva one;
 display: block;
 text-align: left;
 line-height: 135%;
 top: 335px;
 position: relative;
 transition: 0.2s;
 -webkit-transition: 0.2s;
 left: 300px;
 font-size: 13px;
}

#opendoors input {
 display:none
}

#intro:checked+label, #friends:checked+label, #enemies:checked+label, #lovers:checked+label {
 color: #333;
 font-style: italic;
}

.od-textbox {
 width: 230px;
 height: 380px;
 position: relative;
 margin: 15px;
 background: white;
 top: -73px;
 left: 36px;
 transition: 0.6s;
 -webkit-transition: 0.6s;
 z-index: 2;
line-height: 150%;

}

.od-contain {
 width: 500px;
 height: 400px;
 position: absolute;
 overflow: hidden;
 top: 141px;
 line-height: 100%;
}

#friends:checked ~ .od-textbox {
 top: -468px;
}

#friends:checked ~ .od-compass {
 transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
}

#enemies:checked ~ .od-textbox {
 top: -863px;
}

#enemies:checked ~ .od-compass {
 transform: rotate(180deg);
 -webkit-transform: rotate(180deg);
}

#lovers:checked ~ .od-textbox {
 top: -1257px;
}

#lovers:checked ~ .od-compass {
 transform: rotate(270deg);
 -webkit-transform: rotate(270deg);
}
.od-name {
 color: #cc3d3d;
 font-family: yeseva one;
 position: absolute;
 font-weight: 800;
 font-size: 30px;
 line-height: 110%;
 display: inline-block;
 top: 73px;
 left: 40px;
}


.od-textbox text {
 display: block;
 color: #333;
 font-family: source serif pro;
 width: 200px;
 height: 360px;
 position: relative;
 top: 10px;
 left: 10px;
 text-align: justify;
 font-size: 12px;
 overflow: auto;
 padding-right: 10px;
 line-height: 170%
}

.od-textbox text::-webkit-scrollbar{width:3px}
.od-textbox text::-webkit-scrollbar-thumb{border:none!important;background:#cc3d3d!important}
.od-textbox text::-webkit-scrollbar-track{background:none!important;border:none!important}

.od-textbox b {
 background: #cc3d3d;
 color: white;
 padding: 1px 2px;
 margin: 2px;
}

.od-textbox title {
 display: block;
 font-family: yeseva one;
 color: #cc3d3d;
 font-size: 20px;
}
 

</style>
<div id="opendoors">
 <div class="od-img" style="background-image: url(http://placehold.it/250x400)"></div>
 <div class="od-name">Name<br>McName</div>
<div class="od-whitebox">
 </div>
 <div class="od-contain">
   
<input type="radio" id="intro" name="shipper" checked>
<label for="intro">INTRO</label>
<input type="radio" id="friends" name="shipper">
<label for="friends">FRIENDS</label>
<input type="radio" id="enemies" name="shipper">
<label for="enemies">ENEMIES</label>
<input type="radio" id="lovers" name="shipper">
<label for="lovers">LOVERS</label>
<div class="od-compass"></div>
<div class="od-textbox">
  <text>

This is where the intro goes!

    <title>This is a Title</title>
This is <b>bold text</b>

   
  </text>
</div>
 <div class="od-textbox">
  <text>

This is where friends go!

    <title>This is a Title</title>
This is <b>bold text</b>
   
  </text>
</div>
 <div class="od-textbox">
    <text>

This is where enemies go!

    <title>This is a Title</title>
This is <b>bold text</b>
   
  </text>
</div>
  <div class="od-textbox">
    <text>
This is where lovers go!

    <title>This is a Title</title>
This is <b>bold text</b>
   
  </text>
</div>

 
 </div>

</div>
<center><a href="http://cttw.jcink.net/index.php?showuser=18033" style="color:#ccc;font-size:7px;letter-spacing:5px;">MONTY</a></center>[/dohtml]