$(document).ready(function(){
  $("#topimage").click(function(){
  $("#topimage").animate({left:'-412px'},900);
  $("#topimage").fadeOut(200);
});
});


                body { background:none; }
#scroller { padding: 35px 0; box-sizing: border-box; }
#profile-container { width:750px;background:#333; }
#profile-container { background: none; }
.pfor {display: none; visibility: hidden;}

a:active, a:link, a:visited {
color:#668877;
text-decoration:none; }

a:hover {
cursor:help;
color:#fff;
text-decoration: line-through; }

::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #666;}

body, a, a:hover { cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur830.cur), auto; }

body{background:#000;}

@font-face{font-family: Raleway;src: url('https://dl.dropboxusercontent.com/s/k3aam9oo52hr0x5/Raleway-Medium.ttf');
}

#holder {
position: absolute;
top: 0px;
left: 200px;
bottom:0px;
right:0px;
}

strong {
background-color: transparent;
color: #44bbaa;
font-size: 10;
font-family: georgia;
margin-top: -1px;
text-align: right;
text-shadow: #1F0606 0px 0px 5px;
}

p.one {
border-left: 5px solid #669999;
border-right: 5px solid #669999;
font-family: Century Gothic;
text-align: center;
letter-spacing: 2px;
font-weight: normal;
font-variant: small-caps;
font-size: 20px;
}

p.tabs {
color: #fff;
line-height: 20px;
padding: 5px;
text-align: justify;
font-family:times new roman;
font-size:10px;
letter-spacing:2px;
}

p {
color: #668877;
font-family: times new roman;
font-size: 12px;
line-height: 11px;
text-align: center;
letter-spacing: 3px;
}

#topimage {
position: absolute;
background-image: url('http://www.wolfworlds.com/wp-content/uploads/Arctic-Wolf_624.jpg');
background-repeat: no-repeat;
background-position:center;
background-size: 100%;
width: 550px;
height: 350px;
top: 100px;
left: 350px;
border: 1px solid #000;
-moz-border-radius: 5px;
z-index: 20;
opacity:1;
}

#picture {
position: absolute;
background-image: url('https://i.imgur.com/PgLLYz3.png');
background-repeat: no-repeat;
background-position: top;
background-size: 270%;
width: 200px;
height: 270px;
top: 130px;
left: 185px;
border: 5px solid #bbcccc;
z-index:1;
}

#textbox {
position: absolute;
background: #1A1A1A;
width: 500px;
height: 300px;
top: 115px;
left: 175px;
opacity: 0.7;
}

#stats {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 140px;
    height: 15px;
    z-index: 1;
    opacity:1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

#stats:hover{
opacity:1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

#stats div.swap {
    font-family: raleway;
    font-size: x-small;
    text-align: center;
    color:#99bbaa;
    letter-spacing: 1px;
    width: 140px;
    height: 15px;
    float: left;
    padding-top: 1px;
    padding-bottom: 2px;
    margin-bottom: -1px;
    margin-left: 0px;
    border: 1px solid #000000;
    line-height: 14px;
    background:#444444;
    display: block;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

#stats div.swap:hover {
    width: 140px;
    letter-spacing: 1px;
    background:#00000c;
    color: #44bbaa;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.swap:hover > .default {
    display: none
}
.swap:hover > .hover {
    display: inline
}

.a {
position: absolute;
top: 140px; left: 200px;
width: 180px;
height: 250px;
background: rgba(255,255,255,.5);
opacity: 0;
z-index:1;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}

.a:hover {
opacity: 1;
}

#buttons{
list-style:none;
position:absolute;
top:400px;
left:410px;
text-align:center;
font-family: Century Gothic;
text-align: center;
letter-spacing: 2px;
font-weight: normal;
font-variant: small-caps;
font-size: 13px;
}

#buttons li{
    display:inline-block;
    padding:10px;
}

#buttons a{
    display:inline-block;
    padding:20px;
}

.section{
position: absolute;
left: 230px;
top: 10px;
width: 250px;
height: 271px;
padding: 5px;
background: #000;
text-align: justify;
overflow: auto;
}

.section:target{
opacity: 1;
z-index: 1;
}

#pic5 {
position: absolute;
top: 220px;
left: 350px;
width: 10px;
height:10px;
overflow: hidden;
opacity: 5;
background-color:#bbcccc;
border-radius: 50em; }

#pic4 {
position: absolute;
top: 200px;
left: 350px;
width: 10px;
height:10px;
overflow: hidden;
opacity: 5;
background-color:#bbcccc;
border-radius: 50em; }

#pic3 {
position: absolute;
top: 180px;
left: 350px;
width: 10px;
height:10px;
overflow: hidden;
opacity: 5;
background-color:#bbcccc;
border-radius: 50em; }

#pic2 {
position: absolute;
top: 160px;
left: 350px;
width: 10px;
height:10px;
overflow: hidden;
opacity: 5;
background-color:#bbcccc;
border-radius: 50em; }

#pic1 {
position: absolute;
top: 140px;
left: 350px;
width: 10px;
height:10px;
overflow: hidden;
opacity: 5;
background-color: #bbcccc;
border-radius: 50em; }

#pic0 {
position: absolute;
top: 120px;
left: 350px;
width: 10px;
height:10px;
overflow: hidden;
opacity: 5;
background-color: #bbcccc;
border-radius: 50em; }


<div id="holder">
<div id="picture"> </div>
<div class="a">
<div id="stats">
<div class="swap"><span class="hover">Fiona <a target="_blank" href="https://youtu.be/Fi3yWK62mnM" target="_blank">Calliopy</a> Jensen</span><span class="default">Name</span></div>
<div class="swap"><span class="hover">Leader Alpha</span><span class="default"></span></div>
<div class="swap"><span class="hover"><a target="_blank" href="https://youtu.be/KrXU-_jrtxY?t=20">Lupine</a></span><span class="default"></span></div>
<div class="swap"><span class="hover">25 years old</span><span class="default"></span></div>
<div class="swap"><span class="hover">5'</span><span class="default"></span></div>
<div class="swap"><span class="hover">110lbs</span><span class="default"></span></div>
<div class="swap"><span class="hover"><a target="_blank" href="http://www.sanguine-lukoi.com/" target="_blank">Northern Abbey</a></span><span class="default"></span></div>
<div class="swap"><span class="hover">Lupa / Former Dancer</span><span class="default"></span></div>
<div class="swap"><span class="hover">Demisexual / <a target="_blank" href="https://roleplay.chat/profile.php?user=Kylan">Him</a></span><span class="default"></span></div>
<div class="swap"><span class="hover"><a target="_blank" href="https://youtu.be/xs8aAaO7OFU" target="_blank">Moondust</a></span><span class="default"></span></div>
</div>
</div>
<div id="textbox">
<div class="section" id="005">
<p class="one">rules and things xoxo</p>
<p class="tabs">My real life comes first.<br>I don't need smut, I've got it.<br>I do not have to RP with you.<br>I do not do private PM rps.<br>Made for Sanguine Lukoi room only.<br>Do not come at me with a post, I will ignore you.<br>Halfway PM friendly, don't be a tool, and I won't be a cunt.</p>
<hr />
</div>
<div class="section" id="004">
<p class="one">friends</p>
<p class="tabs">I might have some.<br>
</div>
<div class="section" id="003">
<p class="one">timeline</p>
<p class="tabs">Stuff will go here.<br>
</div>
<div class="section" id="002">
<p class="one">abilites</p>
<p class="tabs"><strong>Omega Abilities</strong><br /><br /><strong>BEAST SHIFT:</strong> The ability to shift into the form of their species of infection. <br /><br /> <strong>HEIGHTENED SENSES:</strong> All senses will be ten times that of a human. <br /><br /> <strong>HEIGHTENED STRENGTH AND SPEED:</strong> The lycan will have increased speed and more stamina. Their strength will make them resistant to damage. <br /><br /> <strong>SPEED HEALING:</strong> Healing will also be greatly increased. All lycanthropes are susceptible to silver, the injury of a vampire, and the injury of another lycan. which heal at human speed regardless of shifting. <br /><br /> <strong>FAST METABOLISM:</strong> Metabolism is fast for a lycan, helping them to keep from being poisoned or catching diseases. Increased Sense of Body: Even in human form, a lycanthrope can read a body, listening and seeing clues that will let them detect some emotions and if someone is trying to deceive them. <br /><br /> <strong>Beta Abilities:</strong> <br /><br /> <strong>BEAST CONTROL:</strong> After blood, emotion, and sexual training, the Beta lycanthrope is now able to control themselves to keep themselves from shifting in certain situations. However, it is still possible to lose control if there is too much stimuli to the beast. <br /><br /> <strong>ENERGY CONTROL:</strong> After initial Omega training, the Beta is now able to direct their energies to be able to greet others, or interact metaphysically with others. <br /><br /> <strong>DECREASED SHIFT COMA:</strong> As the lycan's body is getting better suited to the lycanthropy, their shift coma time has been decreased down to four hours after shifting back to a human. <br /><br /> <strong>LASHING ENERGIES:</strong> The lycan is able to harness its energies to lash out metaphysically on another, causing metaphysical pain upon the lycan. Note: The real pain will only come to those of your rank and lower. Using this on a rank higher than your lycan will cause very little pain, if any at all. <br /><br /> <strong>SHIELDS:</strong> The lycan is able to shield themselves from lesser lycans, hiding themselves completely metaphysically. Ranks higher than Beta will still be able to sense them through their shields, and break through them if need be. <br /><br /> <strong>Alpha Abilities:</strong> <br /><br /> <strong>BEAST CONTROL:</strong> The Alpha now has more control over their beast, and it would take a very major event in order to cause them to shift against their will. Now, it will most likely be a will to shift, rather than anything beyond their control. <br /><br /> <strong>FORCE SHIFT IN OTHERS:</strong> The Alpha is able to use their metaphysical energies to force the shift of another lycan of their species and of a lower rank than themselves. This isn't always done to hurt the lycan, it can be done in an effort to help a lesser lycan heal from injuries. <br /><br /> <strong>SHIELD II:</strong> The Alpha's shields are stronger now than they were before, able to block out preternaturals of a lesser rank to them. Note: You may only take this ability if you have taken Shields in Beta Powers. <br /><br /> <strong>LASHING ENERGIES II:</strong> The Alpha's lash is far more painful to lesser lycans, packing quite a punch. If used harshly enough and on a rank low enough, it can force a lycan into submission. Resist Rolling: The Alpha is able to look into the eyes of a vampire, and depending on rank, is able to resist the influence of the vampire. The urge, that pull of a vampire will ALWAYS be present, but it's a matter of acknowledging it and being able to resist. Please do not take this ability unless you have a lot of experience with vampires in your lycan's history. <br /><br /> <strong>Leader Alpha Abilities:</strong> <br /><br /> <strong>BEAST CONTROL:</strong> The lycan now has superior control over their own beast, changing only at will and never through the presence of blood or other triggers. This doesn't take away the fact that a lycan will have the urge to change. <br /><br /> <strong>LASHING ENERGIES:</strong> The Leader Alpha is now able to metaphysically lash lesser lycans into submission. The severity of the lash depends on the rank of the lycan. An Omega would instantly submit. A Beta would also submit. However, a stronger Alpha can withstand it, but it will still cause them much pain. <br /><br /> <strong>NO SHIFT COMA:</strong> Leader Alphas no longer have shift comas, and will remain awake after they have shifted back to their human forms. They will also feel no drain on their body's energy whatsoever. <br /><br /> <strong>EASIER SHIFT:</strong> This ability will be a given among Leader Alphas, simply because they would have the experience over the years to make their shifts easier on their bodies. <br /><br /> <strong>SHARE POWER:</strong> The Leader Alpha is able to share their power with their group. It is the gathering of a mass amount of energy within and then dispersing it metaphysically among their group. It is meant to be used as a boost before a battle. <br /><br /> <strong>INTIMIDATION:</strong> The Leader Alpha is able to make themselves look much fiercer and bigger in order to intimidate others. Not only is it physical, but it also is the influence of their metaphysical energies, as a way to maintain their dominance over another. <br /><br /> <strong>REGENERATION:</strong> An ability which allows the lycanthrope to regenerate from massive inflicted wounds without having to go into a full shift to do so. <br /><br /> <strong>SHARING OF BLOOD:</strong> An ability that allows the Leader Alpha to share their blood among their group. Those who drink the blood are given an intense high or rush of energy. This will -not- make them physically stronger, or able to perform in strength past their rank. It is only used as a mental boost prior to battle. This can be used among the entire group, or it can be used on an individual basis.</p>
</div>
<div class="section" id="001">
<p class="one">the past</p>
<p class="tabs">They say that dancing can be one of the most expressive art forms in the world. To watch a person move their body to the beat of the music, is like seeing a piece of their soul come out. But I don't know if that's really true. I've never felt as if my soul was weeping when I danced. Not since ... <br /><br />She was five. She was dancing around the room, and her mother and father were clapping. They were happy. Everybody was happy. Tomorrow was going to be her first big recital. Her father was going to be there. He was going to be filming it with their new camera, the same one that they were using to film her now. Fiona rushed back and forth along the carpet, her pretty sequined dress trailing with her.<br /><br />There was a loud crash. It sounded to Fiona like broken glass, or like something had been thrown through a window. She screamed, and it was shrill and high pitched. Nothing could deafen the sound that came into her ears. When she turned around, her mother was screaming and her father was slumped over on the couch. There was red everywhere. Just, red. Everything was red.<br /><br />He was slack jawed. She remembered that he was sitting there with his mouth hung open. Like the million times he had fallen asleep in his recliner. Sometimes, when she thought she could get away with it, she'd put things in his mouth. But he would wake up and laugh and laugh with her. This time, his mouth was already full of something else: red.<br /><br />Her mom wouldn't stop screaming, or crying. So she did what her father told her to do when something was wrong: she went into the kitchen, pulled down the phone from the wall, and dialed 9-1-1. The lights were bright. She remembered watching them through the window, as she stared at the crystal shattered pieces. They looked so pretty like this, with the nights dew on them. It was sad to think that something so pretty as broken glass could be the cause of something so painful.<br /><br />I joined a dance company in college. I was pretty good at it, too. I played in several plays, mostly the typical ones that people go and see yearly, like the Nutcracker, or the Black Swan. My roles were small for the first few years, but after that I found myself getting the role of main dancer, or understudy, and I even was accepted to do some dance parts into Broadway. Everything was going good for me. I just didn't feel it in my soul. I dance. But not because it's in my soul. I do it because I'm good at it. And it was the last thing my mother can remember before my life changed.<br /><br /><em>It was raining. She loved the rain, because it reminded her that the world was going to change before she knew it. It never stayed dismal for long. He was packing his things and talking to her but she was hardly listening. It must have had something to do with their fight. They always fought. He was always making her feel... <br /><br />"I know that you don't care about anything Calliopy, but you have to. You have to let somebody in. You're like a ray of fucking sunshine, but you just hide behind clouds all Goddamned day." He was mad. He brushed his fingers through his thick blond hair, and grunted at her. She was wetching him through the glare in the window, never turning around. Her arms remained like a prison around her chest, holding all of her pieces in.<br /><br />"Whatever. This is why I can't do this with you anymore. You can't even fucking look at me. Four years of my life were dedicated to you. Four. We could have been married for Christ-sakes. I moved... I moved to be with you. I quit college, to be with you. And you can't even fucking look at me!"<br /><br />He was right. She couldn't. She didn't want him to see the lack of things on her face. The lack of her expression. It was silent. It was just too silent, and when she finally turned to him, all she could say was.. "I thought it might be different this time."<br /> </em></p>
</div>
</div>
</div>
<div id="buttons"><a href="#001" target="_self">history</a><a href="#002" target="_self">abilities</a><a href="#003" target="_self">timeline</a><a href="#004" target="_self">friends</a><a href="#005" target="_self">ooc</a></div>
<div id="for"><a href="pic here pls" target="_blank"> </a></div>
<div style="text-align: center;" id="pic5"><a target="_blank" href="http://i.imgur.com/c97lMEK.gif" target="_blank"> </a></div>
<div style="text-align: center;" id="pic4"><a target="_blank" href="http://i.imgur.com/69VDe8P.gif" target="_blank"> </a></div>
<div style="text-align: center;" id="pic3"><a target="_blank" href="http://i.imgur.com/4uzBMSh.gif" target="_blank"> </a></div>
<div style="text-align: center;" id="pic2"><a target="_blank" href="http://i.imgur.com/xB2COJH.gif" target="_blank"> </a></div>
<div style="text-align: center;" id="pic1"><a target="_blank" href="http://i.imgur.com/XqNBxGv.gif" target="_blank"> </a></div>
<div style="text-align: center;" id="pic0"><a target="_blank" href="http://i.imgur.com/XqNBxGv.gif" target="_blank"> </a></div>
<div style="text-align: center;" id="topimage"></div>