Jieret

<style>


 ::-webkit-scrollbar {
 width: 4px;
 background-color: transparent;
}


::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: #FD640A;
 border-radius: 10px;
}



body{
 overflow: hidden;
 background-image:url(http://i.imgur.com/1UsRYS0.png);
 background-color:#433836;
}

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/NOsferatu.TTF);
 font-family:'titlefont';
}

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/TreeFTR.ttf);
 font-family:'bodyfont';
}

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/thefire.ttf);
 font-family:'contentfont';
}

#whole{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i.imgur.com/8tEuGzs.png);
 background-repeat: no-repeat;
 background-size: auto 110%;
 background-position: bottom -10px left;
 box-sizing: border-box;
 border: 10px solid black;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#titlething{
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 35vw;
 margin: auto;
 height: 100px;
 width: 240px;
 font-family:'titlefont';
 font-size: 55pt;
 font-weight: 600;
 color: black;
 border: 0px solid black;
 text-align: right;
 font-style: italic;
 text-shadow: 4px 4px 1px rgba(159, 91, 23, .65);
}

.shifter{
 animation: colorshift 6s infinite linear;
 -webkit-animation: colorshift 6s infinite linear;
 -webkit-transition: all 1s;
 transition: all 1s;
}

@-webkit-keyframes colorshift{
 0%{text-shadow: 4px 4px 1px rgba(159, 91, 23, .45);}
 60%{text-shadow: 4px 4px 1px #354126; }
 100%{text-shadow: 4px 4px 1px rgba(159, 91, 23, .45);}
}

@keyframes colorshift{
 0%{text-shadow: 4px 4px 1px rgba(159, 91, 23, .45);}
 60%{text-shadow: 4px 4px 1px #354126;}
 100%{text-shadow: 4px 4px 1px rgba(159, 91, 23, .45);}
}

#otherdetails{
 position: absolute;
 height: 40px;
 top: 3px;
 bottom: 0px;
 margin: auto;
 left: 530px;
 width: 400px;
 border: 0px solid black;
 font-family:'bodyfont';
 font-size: 16pt;
 color: black;
 color: #774924;
 font-weight: 600;
 letter-spacing: 2px;
 text-align: left;
 margin: auto;
 box-sizing: border-box;
 padding-top: 3px;
 padding-left: 10px;
 text-shadow: 2px 2px 4px #313F26;
 font-style: italic;
 background: rgba(0, 0, 0, .6);
 border-radius: 20px 20px 20px 20px;
 -webkit-transition: all 2s;
 transition: all 2s;
}

.inselect{
 cursor: default;
 float: left;
 margin-left: 10px;
 -webkit-transition: all 1s;
 transition: all 1s;
 z-index: 1;
}

.inselect:hover,
#div1:checked ~ #whole #div11,
#div2:checked ~ #whole #div22,
#div3:checked ~ #whole #div33,
#div4:checked ~ #whole #div44{
 color: black;
 text-shadow: 1px 1px 2px rgba(159, 91, 23, .45);
 font-size: 17pt;
 margin-left: 6px;
}

.inselect:nth-last-child(1){
 margin-left: 20px;
}

.contentdrop{
 position: absolute;
 margin-left: -20px;
 margin-top: 15px;
 z-index: -0;
 height: 120px;
 width: 150px;
 border: 0px solid red;
 opacity: 0;
 -webkit-transition: all .5s;
 transition: all .5s;
 box-sizing: border-box;
 border-radius: 10px;
 box-shadow: 0px 0px 3px 2px #774924;
 background: rgba(0, 0, 0, 0.85);
 font-family: 'Times';
 font-size: 10pt;
 color: transparent;
 overflow: auto;
 text-align: left;
 text-shadow: 1px 1px 3px black;
 font-weight: 600;
 padding: 7px;
 padding-right: 3px;
}

#div11 .contentdrop{
 margin-left: -30px;
}

#div22 .contentdrop{
 margin-left: -40px;
}

#div33 .contentdrop{
 margin-left: -28px;
}

#div44 .contentdrop{
 margin-left: -40px;
}

#blockdiv{
 position: absolute;
 top: 40px;
 height: 200px;
 left: -40px;
 right: -40px;
 border: 0px solid black;
 z-index: 2;
}

#div1, #div2, #div3, #div4, #div5{
 opacity: 0;
}

#div1:checked ~ #whole #div11 .contentdrop,
#div2:checked ~ #whole #div22 .contentdrop,
#div3:checked ~ #whole #div33 .contentdrop,
#div4:checked ~ #whole #div44 .contentdrop{
 opacity: 1;
 -webkit-transition: all 1s, color 1s .3s;
 transition: all 1s, color 1s .3s;
 z-index: 20;
 color: #774924;
}


#audiocontain{
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: 41vw;
 margin: auto;
 height: 100px;
 width: 200px;
 border: 1px solid black;
 z-index: 10;
 overflow: hidden;
 opacity: 0;
}

#audiocontain audio{
 zoom: 1000%;
}

#audiocontain:hover ~ #titlething .shifter{
 color: #B8B1AF;
 -webkit-transition: color 1s;
 transition: color 1s;
}

#audioblock{
 position: absolute;
 top: 0px;
 bottom: 0px;
 height: 105px;
 width: 205px;
 left: 41vw;
 margin: auto;
 border: 3px solid red;
 z-index: 9;
 -webkit-transition: all 0.2s 0s, height 1s 9999s, width 1s 9999s;
 transition: all 0.2s 0s, height 1s 9999s, width 1s 9999s;
 opacity: 0;
z-index: 20;
 height: 1px;
 width: 1px;
}

#audiocontain:active ~ #audioblock{
 -webkit-transition: all 0s 0s;
 transition: all 0s 0s;
 height: 105px;
 width: 205px;
 left: 91vw;
}

#othercontainer{
 position: absolute;
 margin-left: -250px;
 margin-top: -38px;
 opacity: 0;
 -webkit-transition: all 1s, opacity 0s 999999s, margin 2s 0s;
 transition: all 1s, opacity 0s 999999s, margin 2s 0s;
z-index: 100;
}

#audiocontain:active ~ #titlething #othercontainer{
 -webkit-transition: all 0s 0s;
 transition: all 0s 0s;
 margin-left: -100px;
 opacity: 1;

}

#audiocontain:active ~ #titlething #otherdetails{
 -webkit-transition: all 0s 0s;
 transition: all 0s 0s;
 opacity: 0;
}

</style>

<input type="radio" name="selectswitch" id="div1">
<input type="radio" name="selectswitch" id="div2">
<input type="radio" name="selectswitch" id="div3">
<input type="radio" name="selectswitch" id="div4">
<input type="radio" name="selectswitch" id="div5">

<div id="whole">

 <div id="audiocontain">
 <audio controls src="http://k003.kiwi6.com/hotlink/7qjat9ebd8/GROVES_-_Ride_Official_Audio_VOL.mp3" loop=3>

 </div>

 <div id="audioblock">
 </div>

 <div id="titlething">
 <span class="shifter"> Jieret</span>

 <div id="othercontainer">
 <div id="otherdetails">
 <label class="inselect" for="div1" id="div11">Sun God.
 <div class="contentdrop">
Is a pagan Sun God and one of the earliest of the earth's Children.<br><br>
 Far stronger than he looks, but is generally possessed of a congenial temperament and tends to be reserved about displays of power.<br><br>
 As he isn't a currently celebrated God and has few Followers, he is considered a Lesser God and has far fewer Miracles that he can perform.
 </div>
 </label>
 <label class="inselect" for="div2" id="div22">Ageless.
 <div class="contentdrop">
 Stands at 6'1".<br>
 Slender build.<br>
 Fox in appearance.<br><br>
 Normal Clothing:<br>
 Tan jacket, no shirt. Jeans, usually either black or navy blue.
 </div>
 </label>
 <label class="inselect" for="div3" id="div33">All-loving.
 <div class="contentdrop">
 Enjoys intimacy with creatures of all ilk equally, but does not find everyone equally attractive.
 </div>
 </label>
 <label class="inselect" for="div4" id="div44">(OOC)
 <div class="contentdrop">
 Code is my own.<br>
 Art is owned.<br>
 PM friendly.
 </div>
 </label>
 <label for="div5" class="inselect">
 |x</label>
 <div id="blockdiv">
 </div>
 </div>
 </div>
 </div>

<div style="position: absolute;
right: 0px;
bottom: 0px;
font-family:'Arial';
font-size: 10pt;
color: gray;
font-weight: 800;
background: black;
opacity: 1;
padding-left: 2px;">
Profile plays music when the name is clicked.</div>

</div>