Lock

<style>
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(http://fonts.googleapis.com/css?family=Audiowide);

.pfor {display: none;}
#profile{background:transparent;
border: none;}

body {background: transparent;
text-align: center;
font-size: 10pt;
color: black;
font-family: 'Audiowide', cursive;
font-weight: 400;}

a {color: black; text-decoration: none;}

#whole{ position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}


#imageblock{
position: absolute;
left: 0px;
bottom: 0px;
height: 872px;
width: 600px;
background-image:
url(http://i58.tinypic.com/oanqqa.jpg);
background-repeat: no-repeat;
border: 0px solid red;}

#container{
  position: absolute;
  bottom: 450px;
  left: 400px;
  height: 220px;
  width: 500px;
  border: 0px solid blue;
  overflow: hidden;}

#categoryselect {
  position: absolute;
  height: 23px;
  width: 220px;
  border: 0px solid red;
  border-left: 1px solid #004A93;
  border-right: 1px solid #004A93;
  top: 20px;
  right: 230px;
  text-align: center;
  transition: all 1s;
  -webkit-transition: all 1s;
}


#filler{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 1000px;
  width: 1000px;
  transition: all 1s;
  -webkit-transition: all 1s;}

#filler:hover{
  background: #004A93;
  opacity: .2;}

#character{
  position: absolute;
  height: 23px;
  width: 110px;
  transition: all 1s;
  -webkit-transition: all 1s;
  color: #004A93;
  overflow: hidden;
  border-right: 1px solid #004A93;
}

#character:hover, #OOC:hover{
  color: grey;}


#OOC{
  position: absolute;
  height: 23px;
  width: 110px;
  left: 110px;
  color:#004A93;
  overflow: hidden;
}


#selectedcategory{
  position: absolute;
  height: 150px;
  width: 110px;
  border: 0px solid red;
  top: 50px;
  right: 342px;
}

#selectedcategory2{
position: absolute;
top: 0px;
height: 0px;
width: 110px;
border: 0px solid #004A93;
transition: all 1s;
-webkit-transition: all 1s;
opacity: 0;
overflow: hidden;
text-align: center;
}

#selectedcategory3{
position: absolute;
top: 0px;
height: 0px;
width: 110px;
border: 0px solid #004A93;
transition: all 1s;
-webkit-transition: all 1s;
opacity: 0;
overflow: hidden;
z-index: 1;
text-align: center;
}

#selectedcategory2:target, #selectedcategory3:target{
opacity: 1;
height: 150px;
z-index: 2;
border-left: 1px solid #004A93;
border-right: 1px solid #004A93;}


#selectthis{
position: absolute;
top: 20px;
width: 110px;
height: 20px;
transition: all 1s;
-webkit-transition: all 1s;
overflow: hidden;
}

#selectthis:hover{
color: grey;}



#informationarea{
  position: absolute;
  height: 150px;
  width: 400px;
  border: 0px solid red;
  top: 50px;
  right: 52px;
}

.infoexpand{
position: absolute;
top: 0px;
left: 0px;
height: 150px;
width: 150px;
border: 0px solid #004A93;
transition: all 1s;
-webkit-transition: all 1s;
transition-delay: .2s;
-webkit-transition-delay: .2s;
overflow: hidden;
z-index: 1;
opacity: 0;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 13pt;
overflow: auto;
text-align: left;
}

.infoexpand:target{
width: 400px;
z-index: 3;
opacity: 1;
border-top: 1px solid #003A93;
border-bottom: 1px solid #004A93;
}
#sublink{
position: absolute;
height: 22px;
width: 124px;
border-right: 1px solid #004A93;
top: 61px;
text-align: center;
overflow: hidden;
font-family: 'Audiowide', cursive;
font-size: 9pt;
}

#subcontainer{
position: absolute;
height: 65px;
width: 397px;
border: 0px solid blue;
overflow: auto;
top: 10px;
text-align: left;
}

span.dropt {border-bottom: none;}
span.dropt:hover {text-decoration: none; background: black; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;
transition: opacity 1s;
-webkit-transition: opacity 1s;
opacity: 0;}
span.dropt:hover span {left:0px ;
background: transparent;
height: 200px;
width: 400px;
border: 1px solid blue;
top: 53px;
overflow: hidden;
border: 0px solid blue;
opacity: 1;}


</style>





<div id="whole">
<div id="imageblock">
</div>
<div id="container">
<div id="categoryselect">
<a href="#selectedcategory2">
<div id="character">
character
<div id="filler">
</div>
</div></a>
<a href="#selectedcategory3">
<div id="OOC">
ooc
<div id="filler">
</div>
</div></a>
</div>

<div id="selectedcategory">
<div id="selectedcategory2">
<a href="#Descrip">
<div id="selectthis">
description
<div id="filler">
</div></div>
</a>
<a href="#Powers">
<div id="selectthis" style="top:50px;">
powers
<div id="filler">
</div></div>
</a>
<a href="#History">
<div id="selectthis" style="top:80px;">
history
<div id="filler">
</div></div>
</a>
<a href="#Baundo">
<div id="selectthis"style="top:110px;">
baundo
<div id="filler">
</div></div>
</a>

</div>
<div id="selectedcategory3">
<a href="#Info">
<div id="selectthis">info
<div id="filler">
</div></div>
</a>
<a href="#Music">
<div id="selectthis" style="top:50px;">
music
<div id="filler">
</div></div>
</a>
</div>
</div>

<div id="informationarea">
<div id="Descrip" class="infoexpand">
<br>Logan Lake<br>
Age 17<br>
Male<br>
Average/Slender build<br>
5'7"<br>
Pansexual
</div>
<div id="Powers" class="infoexpand" style="overflow:hidden;">
<br><i>Infinite Potential</i><br>
- the ability to unlock the 'true potential' of any object

<span class="dropt"><a><div id="sublink">Binding Chain
<div id="filler"></div>
</div></a><span>
<div id="subcontainer">
Thick chain made of iron and covered with a layer of steel. Allows Logan to use unsealed objects and negates the otherwise averse effects of activating the various items. Worn around Logan's waist or hooked into his back pocket as a wallet chain. Allows the use of one unsealed object at a time apart from itself.
</div></span></span>

<span class="dropt"><a><div id="sublink" style="left: 125px;">Pumpkin Spree
<div id="filler"></div>
</div></a><span>
<div id="subcontainer">
Small orange skull-faced pumpkin made of wood. Burns through objects by generating bursts of flame, can be modulated to provide light or mild heat.
</div></span></span>

<span class="dropt"><a><div id="sublink" style="left: 250px; border:0px;">Skull Cost
<div id="filler"></div>
</div></a><span>
<div id="subcontainer">
A small blue skull made of wood roughly the size of a whistle. Operates as an invisible shield that reduces the effectiveness of contact (physical, energy, magical, curse) by diverting the force applied. Logan has this activated at most times.
</div></span></span>


</div>
<div id="History" class="infoexpand">
<br>Exchange student from <i>Somewhere Else</i>
</div>
<div id="Baundo" class="infoexpand">
<br><a href="http://roleplaychat.org/profile.php?user=Baundo+Academy" target="_blank">Baundo Academy</a><br>
<a href="http://roleplaychat.org/profile.php?user=Chiaki" target="_blank">Chiaki</a><br>
<a href="http://roleplaychat.org/profile.php?user=Mikhail" target="_blank">Mikhail</a><br>
<a href="http://roleplaychat.org/profile.php?user=Amari" target="_blank">Amari</a>
</div>
<div id="Info" class="infoexpand">
<br>
Logan's a nice guy, but every other word he says is very likely to be a lie. The guy's got secrets to keep, and while he's at school he's unlikely to just go spilling them. If you suspect the truth to him OOC, and would like to discuss some kind of discovery, feel free -- but don't just throw it out in character.<br><br>Other than that, I'm up for PMs anytime.<br>
Check out the <a href="http://roleplaychat.org/profile.php?user=Baundo+Academy" target="_blank">Baundo Storyline</a>!
</div>
<div id="Music" class="infoexpand">
<br>
<a href="http://youtu.be/lw4mHbJPXKg" title="Peter Bjorn and John" target="_blank">
Young Folks</a><br>
<a href="http://youtu.be/aZnMb93C0Og" title="Zomboy" target="_blank">
Game Time</a><br>
</div>
</div>

</div>

</div>