Lock 1.0

 <style type="text/css">
.pfor {
display: none;
}

#profile {
border: 0px;
background-color: transparent;
}

a:link, a:visited { text-decoration: bold; color:#000000; }

a.a2:link, a.a2:visited { text-decoration: none; font-style: italic; color:#004A93; }
a.a2:hover { font-style: bold; color:black; }

a.b2 { text-decoration: none; font-style:none; color: #000000;}

a.ooc:hover { text-decoration: none; font-style: italic; cursor: default; }

body {
overflow: hidden;
background-color: white;
font-family: "Times New Roman", Arial;
font-size: 13px;
color:   #004A93;
background-image: url('http://i452.photobucket.com/albums/qq250/thesoubi/Oc%20chara%20pics/Volcaronafull1127034_zpscb41bfe0.jpg');
background-repeat: no-repeat;
background-position: bottom right;
height: 800px;
width: 800px;
}


#textstretch
{
margin-top: 100px;
background: transparent;
margin-left: 100px;
width: 450px;
height: 100px;
overflow: hidden;
border: 0px solid black;
position: fixed;
transition: height 1s;
-webkit-transition: height 1s;
}

#textstretch:hover{
  height: 290px;
}

#text {
left: 0px;
position: absolute;
border: 0px solid black;
background-color:transparent;
text-align: left;
border-top: 1px solid #004A93;
border-left: 1px solid #004A93;
width: 400px;
height: 30px;
padding: 10px;
margin-left: 0px;
}


#text2 {

position: absolute;
bottom: 0px;
border: 0px solid black;
background-color:transparent;
text-align: left;
border-bottom: 1px solid #004A93;
border-right: 1px solid   #004A93;
height: 30px;
width: 400px;
padding: 10px;
}

#opentext {
float: left;
  margin-left: 10px;
border: 0px solid black;
background-color:transparent;
text-align: left;
width: 60px;
height: 100px;
margin-top: 100px;
padding-top: 0px;
}

#opentext2 {
text-align: left;
  float: left;
  width: 300px;
  border: 0px black solid;
  height: 100px;
  margin-top:100px;
  margin-left: 20px;
  padding-left: 5px;
  overflow: auto;
  padding-right: 13px;
}

h1.h0
{font-size:14px; font-style: oblique; font-weight:thick; margin: 0; padding: 0; display:inline;}

span.drop {border-bottom: none; color:black;}
span.drop:hover {text-decoration: none;  z-index: 6; font-style:italic;}
span.drop span {position: absolute; left: -9999px;
  margin: -205px 0 0 -5.8px; padding: 1px 1px 1px 5px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;
opacity: 0.1;
transition: opacity 1s;
-webkit-transition: opacity 1s;
  }
span.drop:hover span {left: 2%; background: white;
width: 80px;
height: 150px;
padding-top: 56px;
overflow: hidden;
border: 0px #7CF105 dashed;
text-align: left;
font-size: 13px;
opacity: 0.1;
font-family: Times New Roman, Verdana, Geneva, Arial, sans-serif;
opacity: 1.0;
}

#imagehoverdiv { height: 100%;
right: 0px;
top: 0px;
bottom: 0px;
right: 0px;
width: 50%;
border: 0px dotted blue;
position: fixed;
background-image:
url('http://i452.photobucket.com/albums/qq250/thesoubi/Oc%20chara%20pics/volcarona_gijinka_by_thecutetoxicbunny-d4ogt7m_zpsfb861f2b.png');
background-size:85%;
background-repeat: no-repeat;
opacity: 0;
background-color: white;
-transition: opacity 1s;
-webkit-transition: opacity 1s;
}

#imagehoverdiv:hover{
  opacity: 100;}

#version {position: absolute;
background: transparent;
height: 20px;
width: 300px;
border: 0px;
color: black;
font-family: 'Times New Roman', Times;
font-size: 13px;
font-style: italic;
left: 0px;
bottom: 0px;
}


</style>


<div id="version">
updated 4/2/14: 'OOClinks'
</div>


<div id="whole">
<div id="textstretch">
<div id="text">
Nirsano Kirvalto<br>
<i>Nirsano</i>
<br>
</div>

<div id="opentext">
<b>Stats</b>
<br>
<i>Male<br>
20<br>
Single<br>
Pansexual<br>
6'8 in human form 5'2 in moth form, excluding wings."</i></div>

<div id="opentext2">
<a href="#SectionOne" class="b2">(I)</a>
<a href="#SectionTwo"class="b2"> (II)</a>
<a href="#SectionThree" class="b2"> (III)</a>
<a href="#OOC" class="b2"> (OOC)</a>
<br>
<h1 class="h0">A</h1> Was once a fire moth with beautiful wings, then got mutated into having a human form as well. Very capable of strong fire magic of course. Though often prefferes to stay as a fire moth. PRetty curious and friendly for the most part,t hough does have a temper, and when the moth is angry, things will burn, including people. Be nice to him, and he'll be nice back.<br><br>
<a name="SectionTwo"></a>
<h1 class="h0">Will add as a story happens.</h1><br><br>
<a name="SectionThree"></a>
<h1 class="h0">
<br><br>
<a name="OOC"></a>
<b>OOC</b><br>
<a title="Don't lie about shit, you'll get burnt baddly. And don't touch the wings without permission! Also don't even consider me apart of the pokemon group, NOT HAPPENING! Also, code credit to Lock." class="ooc">Annoyances</a><br>
<a title="Around daily mostly, off and on of course that is. " class="ooc">Hours</a><br>
<a title="Self explanitory, I don't do ic only relationships." class="ooc">Not interested.</a>
</div>

<div id="text2">
Likes:<span class="drop"> Friends
<span>
<br>
<a href="" target="_blank" title="♪♪">  ♪</a><a class="a2" href="" title="" target="_blank"></a><br>
<a href="" target="_blank" title="♪ ♪">  ♪</a>
<a class="a2" " title="" target="_blank"> </a><br>
<a href="" target="_blank" title="♪♪">  ♪</a>
<a class="a2" href="" title="" target="_blank"></a><br>
<a href="" target="_blank" title="♪  ♪">  ♪</a>
<a class="a2" href="" title="" target="_blank"></a><br>
</span></span>, Food, people, warm places.<br>
Dislikes: Silence, boredom, being cold.
</div>
</div>


</div>

<div id="imagehoverdiv">
</div>