Kaliboo prof.

<style>

body {text-align: left;
  color: black;
background: black;}

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

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

@font-face {
 font-family:'otherfont';
 src:url(https://dl.dropboxusercontent.com/u/4556289/Crazy%2BThoughts.ttf);
 src:url(https://dl.dropboxusercontent.com/u/4556289/Saniretro.ttf);
}

a, a:hover{ color: black; text-decoration: none;
font-style: normal;}

#whole {position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: #4C2135;
  background-image:url(http://i63.tinypic.com/2hherkz.jpg);
}

#backgroundtime{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 800px;
  width: 100%;
  background-color: transparent;
  background-image:url(http://i65.tinypic.com/2j3o5nc.jpg);
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow:0px 0px 5px 3px black;
}

#pictureholder
{ position: absolute;
top: 320px;
left: 0px;
right: 0px;
height: 60px;
  border-bottom: 1px solid #EAD175;
background-image:
url();
background-repeat: no-repeat;
background-size: auto 1000px;
background-position: top -410px right -100px;
 -webkit-transition: all 1s;
 transition: all 1s;
overflow: hidden;}

#pictureholder:before{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: black;
  opacity: .7;
}

#linkholder {
 position: absolute;
 left: 0px;
 right: 0px;
 top: 275px;
 height: 40px;
 background: transparent;
  border-top: 1px solid #EAD175;
-webkit-transition: all 1s;
transition: all 1s;
}

#linkholder:before{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: black;
  opacity: .7;
}

#textstretch{
 position: absolute;
 top: 0px;
bottom: 0px;
right: 150px;
width: 100px;
overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;
box-sizing: border-box;
padding-top: 2px;}

@font-face{
  font-family:'kalifont';
  src:url(https://dl.dropboxusercontent.com/u/4556289/FoglihtenNo04-070.otf);
}

#linker {
 float: left;
 height: 100%;
 font-size: 20pt;
 width: 20px;
 letter-spacing: 200px;
 font-weight: 400;
 font-family:'kalifont', 'Times';
 margin-right: 3px;
 -webkit-transition: all 1s;
 transition: all 1s;
 text-shadow: 2px 1px 3px gold;
}

#linker:hover {
 text-shadow: 2px 2px 3px black;}

.spelet{
 color: black;
-webkit-transition: all 1s;
 transition: all 1s;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px transparent !important;
}

#nameparts{
 position: absolute;
 top: 330px;
 left: 100px;
 height: 200px;
 width: 400px;
 border: 0px solid black;
 font-family:'titlefont';
text-align: left;
  color: gold;
  text-shadow: 2px 2px 3px black;
  opacity: .4;
}

#nameC{position: absolute;
font-size: 120pt;
top: 0px;
left: 10px;
 height: 200px;
 width: 140px;
overflow: hidden;
-webkit-transition: all .4s 0s;
transition: all .4s;
opacity: 0;}

#nametop{
 position: absolute;
 font-size: 20pt;
top: 60px;
left: 120px;
 height: 30px;
 width: 0px;
overflow: hidden;
-webkit-transition: all .3s 0s;
transition: all .3s 0s;}

#namebottom{
 position: absolute;
 font-size: 20pt;
top: 90px;
left: 103px;
 height: 30px;
 width: 0px;
overflow: hidden;
-webkit-transition: all .3s 0s;
transition: all .3s 0s;}

#whole:hover #pictureholder{
 height: 200px;
background-position: top -360px right -100px;
-webkit-transition: all 4s;
 transition: all 4s;
}

#whole:hover #textstretch{
right: -100px;
width: 100%;
-webkit-transition: all 2s;
transition: all 2s;}

#whole:hover #linker{
 width: 100px;
 margin-right: 70px;
 letter-spacing: 3px;
 -webkit-transition: margin 1s 1s, letter-spacing 2s 0s, width 2s 1s;
transition: margin 1s 1s, letter-spacing 2s 0s, width 2s 1s;
}

#whole:hover .spelet{
 color: gold;
  box-shadow: 1px 1px 3px black;
 -webkit-transition: all 1s 1s;
 transition: all 1s 1s;
  font-family:'kalifont', Times;
}

#whole:hover #nametop{
 width: 280px;
 -webkit-transition: 1s 3s;
 transition: 1s 3s;
}

#whole:hover #namebottom{width: 250px;
-webkit-transition: 1s 4s;
transition: 1s 4s;}

#whole:hover #nameC{opacity: 1;
-webkit-transition: 0s 5s;
transition: 0s 5s;}

.middlebox{position: absolute;
left: 500px;
top: 0px;
bottom: 0px;
 margin: auto;
 height: 150px;
 width: 300px;
overflow: hidden;
border: 0px solid black;
border-radius: 10px 10px 10px 10px;
z-index: 0;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;}

.middlebox:target{z-index: 1;}

.slideleft1{
 position: absolute;
 left: -500px;
 height: 30px;
width: 300px;
 background: #9B8514;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;}

.slideright1{
 top: 30px;
 left: 800px;
 position: absolute;
 height: 30px;
width: 300px;
 background: #9B8514;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;
}
.slideleft2{
 top: 60px;
 left: -500px;
 position: absolute;
 height: 30px;
width: 300px;
 background: #9B8514;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;
}
.slideright2{
 top: 90px;
 left: 800px;
 position: absolute;
 height: 30px;
width: 300px;
 background: #9B8514;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;
}
.slideleft3{
 top: 120px;
 left: -500px;
 position: absolute;
 height: 30px;
width: 300px;
 background: #9B8514;
 -webkit-transition: all 1s .5s;
transition: all 1s .5s;
}
.contenthold{
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
position: absolute;
z-index: 1;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
border: 0px solid red;
overflow: hidden;
text-align: left;}

#topleft{ font-family: 'kalifont', Arial;
font-size: 12pt;
position: absolute;
top: 6px;
left: 8px;
color: black;
  font-weight: 800;
  letter-spacing: 3px;
}

#thecontent ul:nth-child(1){
  margin-top: 5px;
}

#thecontent ul{
  margin-left:-16px;
}

#thecontent li{
  margin-bottom: 2px;
}

#thecontent li ul li{
  margin-top: -5px;
  font-family:'Times';
  font-style:Italic;
}

#thecontent a{
  -webkit-transition: all 1s;
  transition: all 1s;
  text-shadow: 0px 0px 2px black;
  font-style: italic;
}

#thecontent a:hover{
  text-shadow: 0px 0px 5px black;
}

.linkhover{
  position: fixed;
  top: 322px;
  margin-left: 260px;
  color: #9B8514;
  font-size: 10pt;
  font-family:'Times';
  opacity: 0;
  width: 240px;
  z-index: -1;
  border-radius: 20px;
  -webkit-transition: all .3s;
  transition: all .3s;
  overflow: hidden;
  text-align: justify;
  text-justify: inter-word;
  box-sizing: border-box;
  padding: 10px;
  font-style: italic;
  display: none;
  border-left: 1px solid #9B8514;
  border-right: 1px solid #9B8514;
}

#link3 .linkhover{
  top: 350px;
  margin-left: 300px;
}

a:hover + .linkhover, .linkhover:hover{
  opacity: 1;
  z-index:1;
  display: block;
}

.linkhover:before{
  content:'';
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: black;
  opacity: .4;
  z-index: -1;
}

@font-face{
  font-family:'contentfont';
  src:url(https://dl.dropboxusercontent.com/u/4556289/elegant_script.ttf);
}
#thecontent{
 font-family:'contentfont', 'Times';
 font-size: 12pt;
 position: absolute;
box-sizing: border-box;
padding-right: 3px;
 top: 30px;
 left: 7px;
 height: 115px;
 width: 287px;
 border: 0px solid white;
 overflow: auto;
 color: black;
text-align: left;
word-spacing: 2px;
  line-spacing: 8px;
}


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

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
	background-color: black ;
  border: 1px solid black;

}


.middlebox:target .slideleft1, .middlebox:target .slideright1, .middlebox:target .slideleft2, .middlebox:target .slideright2, .middlebox:target .slideleft3 {left:0px;
-webkit-transition: all 1s 1s;
transition: all 1s 1s;}

.middlebox:target .contenthold {opacity: 1;
-webkit-transition: all 1s 1.6s;
transition: all 1s 1.6s;}

#whole:hover .middlebox{opacity:1;}

#musicslice{
position: fixed;
top: 30px;
right: 20px;
height: 50px;
width: 50px;
border: 2px solid black;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 0s;
box-shadow: 1px 1px 3px 1px gold;
background: #AB721B;}

#musicslice:active{
-webkit-transition: all 0s;
transition: all 0s;
box-shadow: 1px 1px 0px 0px gold;}

#musiccover{
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
background-image:url(http://i67.tinypic.com/etcz9e.jpg);
background-size: auto 90%;
background-repeat: no-repeat;
background-position: center;
}

#musichidden{
position: absolute;
left: -10px;
top: 0px;
height: 50px;
width: 50px;
zoom: 180%;
opacity: 0;
z-index: 1;
overflow: hidden;}

</style>




<div id="whole">
  <div id="backgroundtime">
  </div>

 <div id="linkholder">

<div id="textstretch">

 <a href=#link2><div id="linker">
 <font class="spelet">K</font>aliona</div></a>
 <a href=#link1><div id="linker">
 <font class="spelet">A</font>pple</div></a>
 <a href=#link5><div id="linker">
 <font class="spelet">L</font>iger</div></a>
 <a href=#link3><div id="linker">
 <font class="spelet">I</font>shka</div></a>

 </div>

 </div>

 <div id="pictureholder">



 <div class="middlebox" id="link1">
 <div class="slideleft1">
 </div>
 <div class="slideright1">
 </div>
 <div class="slideleft2">
 </div>
 <div class="slideright2">
 </div>
 <div class="slideleft3">
 </div>
 <div class="contenthold">
 <div id="topleft">
 THE GODDESS
 </div>
 <div id="thecontent">
 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
 </div>
 </div>
 </div>

 <div class="middlebox" id="link2">
 <div class="slideleft1">
 </div>
 <div class="slideright1">
 </div>
 <div class="slideleft2">
 </div>
 <div class="slideright2">
 </div>
 <div class="slideleft3">
 </div>
 <div class="contenthold">
 <div id="topleft">
 basics
 </div>
 <div id="thecontent">
<ul>
<li>Sex.
  <ul><li>Female.</li></ul></li>
<li>Age.
    <ul><li>Twenty-four.</li></ul></li>
<li>Species.
  <ul><li>Goddess Smilodon.</li></ul></li>
<li>Status.
  <ul><li><a href="http://www.thiscrush.com/~alu" target=_blank>Courted ♥</a>.
    </li></ul></li>
<li>Orientation
  <ul><li><a href="http://www.urbandictionary.com/define.php?term=demisexual" target=_blank>Demisexual</a>.
    <div class="linkhover">
Demisexuals are characterized by a lack of sexual attraction toward any person unless they become deeply emotionally or romantically connected with a specific person or persons. The level of connection it takes for sexual desire to form is dependent on how close the relationship is rather than initial attraction. It is an orientation that is not chosen.</div>    </li></ul></li>
<li>Height
  <ul><li>Five-feett and one inch.</li></ul></li>
<li>Weight
  <ul><li>One-hundred twelve pounds.</li></ul></li>
<li>Build
  <ul><li>Athletic.</li></ul></li>
<li>Fur
  <ul><li>Black body, gold stripes, as well as gold spots.</li></ul></li>
<li>Attire
  <ul><li>A goddess wears what she will.</li></ul></li>
<li>Personality
  <ul><li>Outgoing, affectionate, blunt, slightly ridiculous.</li></ul></li>
<li>Likes
  <ul><li>Attention, affection, intelligence, cuddles. Bells, sparkly things.</li></ul></li>
<li>Dislikes
  <ul><li> Feet. Liars, cheaters, sappy individuals and two faced bitches.</li></ul></li>

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

 <div class="middlebox" id="link3">
 <div class="slideleft1">
 </div>
 <div class="slideright1">
 </div>
 <div class="slideleft2">
 </div>
 <div class="slideright2">
 </div>
 <div class="slideleft3">
 </div>
 <div class="contenthold">
 <div id="topleft">
others
 </div>
 <div id="thecontent">
   <a href="http://roleplay.chat/profile.php?user=???" target=_blank>???</a>
   <div class="linkhover">A blurb about this person/</div><br>
   <a href="http://roleplay.chat/profile.php?user=???" target=_blank>???</a>
   <div class="linkhover">A blurb about that person.</div><br>
   <a href="http://roleplay.chat/profile.php?user=???" target=_blank>???</a>
   <div class="linkhover">A blurb about some kinda person.</div><br>
 </div>
 </div>
 </div>

 <div class="middlebox" id="link5">
 <div class="slideleft1">
 </div>
 <div class="slideright1">
 </div>
 <div class="slideleft2">
 </div>
 <div class="slideright2">
 </div>
 <div class="slideleft3">
 </div>
 <div class="contenthold">
 <div id="topleft">
 ooc
 </div>
 <div id="thecontent">
 OOC stuff.
 </div>
 </div>
 </div>


 </div>

 <div id="nameparts">
 <div id="nameC">
 D
 </div>
 <div id="nametop">eath.
 </div>
 <div id="namebottom">Is Only The Beginning.
 </div>
 </div>

 <div id="musicselection">
 <a target="_blank" href="http://i57.tinypic.com/w89kdw.jpg" target=_blank style="
 background-image:url(http://i60.tinypic.com/bjagdk.jpg);">
 </a>
 <a href=#nonono style="background-image:url(http://i60.tinypic.com/2d2agj5.jpg);">
 </a>
 </div>

</div>


 <div id="musicslice" title="grace - you don't own me">
<div id="musiccover">
</div>
<div id="musichidden">
<audio controls src="http://k003.kiwi6.com/hotlink/cm334752pj/Grace_-_You_Don_t_Own_Me.mp3"></audio>
</div>
</div>