Lock 5

 <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: grey;
font-family: 'Audiowide', cursive;
font-weight: 400;
cursor: url(http://cur.cursors-4u.net/symbols/sym-6/sym597.cur), default;}

a {color: #004A93; text-decoration: none;}
a, a:hover{ cursor: url(http://cur.cursors-4u.net/symbols/sym-6/sym597.cur), default;}
a:hover{ color: gray;}

.BerserkCursor, .BerserkCursor:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-8/ani764.cur), default; }
.BerserkCursor:hover {text-decoration: line-through;}

#whole{ position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:
url(http://i62.tinypic.com/28jcghg.jpg);
background-repeat: no-repeat;
background-size: 100%;
}

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

#container{
  position: absolute;
  bottom: 450px;
  left: 607px;
  height: 220px;
  width: 500px;
  border: 0px solid blue;
  overflow: hidden;
z-index: 10;}

#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;
color: #004A93;
}

#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;
color: #004A93;
}

#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;
color: grey;
}

#selectthis:hover{
color: #004A93;}



#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: 40px;
text-align: center;
overflow: hidden;
font-family: 'Audiowide', cursive;
font-size: 9pt;
}

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

span.dropt {border-bottom: none; }

span.dropt:hover {text-decoration: none; background: black; z-index: 6; }

span.dropt span.name {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.name {
background: transparent;
height: 200px;
width: 400px;
top: 40px;
left: 0px;
overflow: hidden;
border: 0px solid blue;
opacity: 1;
}

#rpgmaker{
position: absolute;
left: 500px;
bottom: 200px;
height: 156px;
width: 720px;
border: 0px solid red;
overflow: hidden;
}

#subrpgmaker{
height: 156px;
width: 720px;
border: 0px solid white;
overflow: hidden;
position: relative;
}

#textbubble{
height: 110px;
width: 650px;
border-radius: 60px 60px 60px 60px;
border: 1px solid grey;
position: absolute;
overflow: hidden;
padding: 20px;
padding-left: 30px;
z-index: 1;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 13pt;
text-align: left;
color: gray;}

#shadow {
height: 150px;
width: 700px;
border-radius: 60px 60px 60px 60px;
border: 0px !important;
background: black;
opacity: .7;
bottom: 204px;
left:500px;
position: absolute; }

#continueselect
{
height: 20px;
width: 20px;
border-radius: 180px;
left: 693px;
top: 127px;
border: 1px solid transparent;
background: black;
opacity: .7;
transition: all 1s;
-webkit-transition: all 1s;
position: absolute;
-moz-padding-start: 5px;
-moz-padding-end: 5px;
width: -moz-fit-content;
}

#continueselect:hover{
border: 1px solid grey;}

 /* Because it was necessary... MUSIC div! */
#musicdiv {height: 132px;
width: 110px;
border: 0px solid blue;
position: absolute;
top: 13px;
left: 2px;
z-index: 2;}

.music2 {left: 112px !important;
}

.music3 {left: 222px !important;
width: 150 !important;
}


</style>





<div id="whole">
<div id="imageblock">
</div>
<div id="container" style="background: black;  opacity: .7; border-radius: 60px 60px 60px 60px; width: 445px; left: 630px; z-index: 0; border: 1px solid gray;">
</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="#kemonozume">
<div id="selectthis"style="top:110px;">
comrades
<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>
<a href="#Credits">
<div id="selectthis" style="top:80px;">
credit
<div id="filler">
</div></div>
</a>
<a href="#Updates">
<div id="selectthis" style="top:110px;">
updates
<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;">
<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 class="name">
<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 class="name">
<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 class="name">
<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><br>
(Your character's going to have to ask!)
</div>
<div id="kemonozume" class="infoexpand">
<br>
<a href="http://roleplaychat.org/profile.php?user=Mikhail" target="_blank" title="The Boyfriend">Mikhail</a><br>
<a href="http://roleplaychat.org/profile.php?user=Karl+Asher" target="_blank" title="The Wild Card">Karl Asher</a><br>
<a href="http://roleplaychat.org/profile.php?user=Koinoru" target="_blank" title="The Revolutionary">Koinoru Nine</a><br>
<a href="http://roleplaychat.org/profile.php?user=Iki+Sai" target="_blank" title="The Laptop Chick -- also The Reluctant Shield">Iki Sai</a><br>
<a href="http://roleplaychat.org/profile.php?user=Sweet+Moon" target="_blank" title="The Broken Arm Benchjumper">Moon Ten</a><br>
<a href="http://roleplaychat.org/profile.php?user=Olie" target="_blank" title="The Backslapping Bubbleblower">Olie</a>
<div id="musicdiv" class="music2" style="padding-top: 6px; height:126px;">
<a href="http://roleplaychat.org/profile.php?user=Velanx" target="_blank" title="The International Masked Man of Mystery">Velanx Geranstis</a><br>
</div>

</div>

<div id="Info" class="infoexpand">
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=Kemonozume+Gakuen" target="_blank">Kemonozume Academy Storyline</a>!
</div>

<div id="Music" class="infoexpand">

<div id="musicdiv">
<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>
<a href="http://youtu.be/l7RvvcHpRog" title="Yppah" target="_blank">
D Song  ♫ </a><br>
<a href="http://youtu.be/KSM_ir1nPrY" title="Protohype & Kewzik" target="_blank">
Hold Your Breath  ♫</a><br>
<a href="http://youtu.be/2SaB-05BpKw" title="Zedd ft. KDrew (Nev's Launchpad S Cover)" target="_blank">
Spectrum ♫</a><br>
<a href="http://youtu.be/a8EAFNNIyv4" title="The Bravery (Moon Version)" target="_blank">
Believe ♫</a>
</div>

<div id="musicdiv" class="music2">
<a href="http://youtu.be/sFv6B-ogkfI" title="Calvin Harris (Dillon Francis remix)" target="_blank">
Feel So Close ♫</a><br>
<a href="http://youtu.be/h6aqJyIvUmA" title="Flinch" target="_blank">
Waiting For You ♫</a><br>
<a href="http://youtu.be/LLVC6CQk_fU" title="Flinch" target="_blank">
Moonlight ♫</a><br>
<a href="http://youtu.be/ycMiMvfv3YQ" title="Flinch" target="_blank">
D.N.Y.L ♫</a><br>
<a href="http://youtu.be/m75r54BwahQ" title="School Food Punishment" target="_blank">
Egoist ♫</a><br>
<a href="http://youtu.be/G6wSyUB7NdU" title="Kaskade feat. Becky Jean" target="_blank">
Empty Streets ♫</a><br>
</div>

<div id="musicdiv" class="music3">
<a href="http://youtu.be/FgtAx_L3l9I" title="Stars" target="_blank">
The Night Starts Here ♫</a><br>
<a href="http://youtu.be/6VtlEGvUp70" title="Stars" target="_blank">
Take Me To The Riot ♫</a><br>
<a href="http://youtu.be/2E74-aXNCtI" title="Stars" target="_blank">
Midnight Coward ♫</a><br>
<a href="http://youtu.be/pA5ppAQB7Jc" title="School Food Punishment" target="_blank">
close, down, back to ♫</a><br>
<a href="http://youtu.be/oRqjVPljSGQ?t=20s" title="Boom Boom Satellites" target="_blank">
On The Painted Streets ♫</a><br>
<a href="http://youtu.be/-capB8JCIss" title="Boom Boom Satellites" target="_blank">
Light My Fire ♫</a>
</div>

</div>


<div id="Credits" class="infoexpand">
I coded the profile myself. Any tips or comments are appreciated.<br>
If you want to use this code, please ask me first. I might even help, if you need it.<br>
Character picture created and animated by
<a href="Http://roleplaychat.org/profile.php?user=Mikhail" target="_blank">
Mikhail</a>.<br><br>
Nor sure where the background is from, since I found it a while ago. If the creator requests it be taken down, I'll do so without a problem. <br><br>
The general theme of the profile is a visual novel. There's nothing important in the 'scenario' created below, it's just something I wanted to have a little fun with. I suggest you go through the options and enjoy it. I'll lengthen it later and add more choices if anyone is that curious or interested.
</div>

<div id="Updates" class="infoexpand">
<br><b>7/4/13</b> Added more music... lots of damn music. Happy 4th!
<br><b>7/5/13</b> Updated scenario, added 'second morning.'
</div>

</div>

</div>
<div id="rpgmaker">



<a name="C1L0"></a>
<div id="subrpgmaker">
<div id="textbubble">Kemonozume Academy<br>
Classroom At Night.<br><br>
Just after beating a new boss in Dark Souls 2, you decide to get some of your homework done. When you look for it, you remember that you left your bookbag at school. Groaning in frustration, you realize that it's already 9pm and have a hard time deciding if it's worth it to walk to school to pick it up.
</div>
<a href="#Choice"><div id="continueselect">x
</div></a>
</div>


<a name="Choice"></a>
<div id="subrpgmaker">
<div id="textbubble">
<a href="#C1L1">Return to the school.</a><br>
<a href="#C1Restart">Go to sleep.</a>
</div>
<a><div id="continueselect">x
</div></a>
</div>


<a name="C1Restart"></a>
<div id="subrpgmaker">
<div id="textbubble">
You decide to go back to sleep. You might not get the homework done in time for class, but no reason to become a smear on the wall because <a class="BerserkCursor">Berserker</a> was out there somewhere roaming around and swinging that huge stick, right?
</div>
<a href="#C1L0"><div id="continueselect">x
</div></a>
</div>

<a name="C1L1"></a>
<div id="subrpgmaker">
<div id="textbubble">You decide it's more important to get your work done tonight.  You walk to the school and go up the stairs, but when you arrive at the door of your classroom you hear sounds of movement from the other side of the door. As you turn the doorknob, there is a sharp curse from inside of the room and the sound of a zipper being quickly pulled shut. You continue inside.
</div>
<a href="#C1L2"><div id="continueselect">x
</div></a>
</div>

<a name="C1L2"></a>
<div id="subrpgmaker">
<div id="textbubble">When you enter the room, you see Logan leaning against the wall with what seemed like a very obvious effort to seem like he'd been casually standing there and not just been rifling through your bag moments before. A new exchange student to the school, he was usually a little quiet aside from when he spoke to Mikhail. The class opinion was that he was a little strange, but not uncute. Still, this was unusual to say the least.<br><br>
(Logan) "Uh... Hey? How's it going?"
</div>
<a href="#Choice2"><div id="continueselect">x
</div></a>
</div>


<a name="Choice2"></a>
<div id="subrpgmaker">
<div id="textbubble">
<a href="#C2L1">You ask him what he's doing.</a><br>
<a href="#C2L10">You ignore him, grab your bag and go home.</a><br>
<a href="#C2L20">You challenge Logan to a fight. To the death, cat!</a>
</div>
<a><div id="continueselect">x
</div></a>
</div>

<a name="C2L10"></a>
<div id="subrpgmaker">
<div id="textbubble">Fuck it, you need sleep. You find your book bag on top of your chair and check through it to make sure everything is still there. It is. Good. Logan waves goodbye, looking both embarrassed and relieved, as you wordlessly turn and leave. You leave the school to go home.
</div>
<a href="#C2Restart1"><div id="continueselect">x
</div></a>
</div>

<a name="C2Restart1"></a>
<div id="subrpgmaker">
<div id="textbubble">
*<i>Crash</i>*<br>*<i>Splat</i>*<br>
Ten feet from the school doors there is a large sound and you are stomped by Megatron in the middle of a fight with a stampeding robot cow.  Your body explodes into a spray of fireworks because Michael Bay loves fireworks.<br><br>
<b>(Megadeath by Megatron, hohoho) Bad end</b>.
</div>
<a href="#C1L0"><div id="continueselect">x
</div></a>
</div>


<a name="C2L20"></a>
<div id="subrpgmaker">
<div id="textbubble">You challenge Logan to a fight, claiming that he looked through your bag. You won't take an apology. Ontop of that, no one's seen his powers which typically means it's something really weak. You'll make a name for yourself as the person who beat the new exchange student. You'll become a bully -- no, the king of the bullies. For Logan, it will be the worst night of his life. But for you, it was a Tuesday!<br>
(Logan) "<i>Well, that makes my decision a little easier...</i>"<br>
Logan moves a hand towards the chain hanging near his left side as you go to attack.
</div>
<a href="#C2L21"><div id="continueselect">x
</div></a>
</div>


<a name="C2L21"></a>
<div id="subrpgmaker">
<div id="textbubble">Your attack is just about to land, and you're surely going to make this guy regret that he'd been searching through your stuff. You've got important things in your bag - your phone, a PS Vita you haven't played since Gravity Rush, and of course your homework. Planning to make Logan into a bad memory, you use no restraint.<br><br>
*<i>Flash</i>*
</div>
<a href="#C2Restart2"><div id="continueselect">x
</div></a>
</div>

<a name="C2Restart2"></a>
<div id="subrpgmaker">
<div id="textbubble">
*<i>Riiiiing</i>*<br>
You wake up in your bed, the alarm clock ringing. Feeling a bit disoriented, you look around. The time is 8:00am, and you're certainly going to be late. Worse, you remember vaguely that you never got your homework done the night before. The thought of your homework clicks something else in your head, and you remember not having your book bag when you returned home. Did you go back to school to get it? You can't quite remember, but you have to get to school.<br>
<b>(No Homework + Late To School) End</b>.
</div>
<a href="#C1L0"><div id="continueselect">x
</div></a>
</div>


<a name="C2L1"></a>
<div id="subrpgmaker">
<div id="textbubble">You ask him what he's doing here, mentioning that the school is closing for the night and that it's almost 10pm.<br><br>
(Logan) "<i>Oh, just... looking around. Not in your bag, though! Nah, there's all sorts of things around to look through. You know, just kinda... Stuff</i>?"
</div>
<a href="#C2L2"><div id="continueselect">x
</div></a>
</div>

<a name="C2L2"></a>
<div id="subrpgmaker">
<div id="textbubble">You have a hard time believing it as you're certain that he kept glancing between you and your book bag. He seems cheered when you swing the bag over your arm and don't seem interested in pursuing that question further. With a shrug, you tell him that you'll see him in the morning and leave.<br><br>
(Logan) "<i>Not if I see you first..! Wait, wait, let me try that again, I don't think that's the right --</i>"<br>
He is cut off as you close the door and begin moving down the hall.
</div>
<a href="#C2L3"><div id="continueselect">x
</div></a>
</div>



<a name="C2L3"></a>
<div id="subrpgmaker">
<div id="textbubble">Your walk home is uneventful, and when you arrive home you realize how tired you feel. You wonder if you should have stayed and asked more questions, but then you remember that you need to at least start on your homework. Deciding that you can ask him about it tomorrow, you try to focus and fall asleep before finishing the first math equation. But at least you have your homework - certainly you can try to catch up on your work tomorrow morning before school.<br><br>
<a href="#C3L1">Continue to the next day.</a>
</div>
<a href="#C1L0"><div id="continueselect">x
</div></a>
</div>


<a name="C3L1"></a>
<div id="subrpgmaker">
<div id="textbubble">When you wake up the next morning, you immediately go to work on your homework from the night before. It doesn't take long for you to come to the conclusion that you really should have gotten this done earlier - but that doesn't bother you too much. There's still an opportunity to get this done on time, if you get to school early and ask one of your friends for the answers. The earlier you arrive, the better your chances of running into someone smart enough to feed you the best info. The smart ones arrive early, right?<br>With this decided, you head to school.
</div>
<a href="#C3L2"><div id="continueselect">x
</div></a>
</div>


<a name="C3L2"></a>
<div id="subrpgmaker">
<div id="textbubble"><b>8 hours later</b>.
<br>You regret not having gotten the work done the night before. When you arrived at school so early, you were snagged by a teacher into an effort to fix a part of the gym that had been destroyed by a conflict earlier the day before. Why it wasn't already fixed, you aren't sure - you're just certain you lucked out. You ended up arriving to class barely on time and covered in sweat. The rest of the day goes well enough, but you're unable to properly enjoy it because of the start. You forget about your homework, but find that it doesn't matter - apparently someone had turned in a copy for you. You don't take time to think about the stroke of luck and simply go home to rest.
</div>
<a href="#C1L0"><div id="continueselect">x
</div></a>
</div>


</div>

<div id="shadow">
</div>

</div>