Sally

<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Spirax');
.pfor { display: none; }
#profile { background-color: transparent; border: none; }
</style>

<style type="text/css">

body {

background-color: #000000;
background-attachment: fixed;
background-position: center center;
background-repeat: repeat;
background-size: auto;
font-family: Spirax;
font-variant: normal;
font-size: 70%;
color: #ffffff;}

#pictureone {


position: fixed;
right: -39px;
bottom: -30px;
margin: 25px;}

#picturetwo {


position: fixed;
left: 266px;
top: 50px;
margin: 25px;}

#navigation{

position: fixed;
right: %;
top: 20%;
opacity: 0.5;
border: ;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;}
#navigation:hover { opacity:1; }

#navigation2{

position: fixed;
right:90%;
top: 40%;
opacity: 0.5;
border: ;

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

#navigation3{

position: fixed;
right: 90%;
top: 60%;
opacity: 0.5;
border:  ;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;}
#navigation3:hover { opacity:1; }

#navigation4{

position: fixed;
left:%;
top: 80%;
opacity: 0.5;
border:;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;}
#navigation4:hover { opacity:1; }


.Name{
position: fixed;
top: 5px;
left: 220px;
color:#ffffff;
font-size: 20px;
line-height: 80px;
letter-spacing: 3px;
font-family: Spirax;
text-shadow: #000 2px 3px 4px;}

a href {
text-decoration: underline;
font-family:Spirax;
color: #ffffff;
letter-spacing: -1px;
}

u {
text-decoration: underline;
font-family:Spirax;
color: #ffffff;
letter-spacing: -1px;
}

b {
color: #ffffff;
font-family:Spirax;
text-transform:none;
letter-spacing: 2px;
}

a:active, a:link, a:visited{
color:#ffffff;
text-transform:none;
font-family:Spirax;
letter-spacing: 1px;
text-decoration:none;
transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}

h1{
font-family: Spirax;
font-size:25;
letter-spacing:1px;
color:#d8a078;
font-style: cursive;
font-weight:light;
text-align: center;
text-transform:none;
}

h1 {

position: fixed;
left: 10px;
bottom: 0px;
font-weight: normal;
font-size: 100%;
color: #ffffff
}


::-webkit-scrollbar {width: 4px;}
::-webkit-scrollbar-thumb:vertical {
height: 10px;background-color: #a8a8a8;}
::-webkit-scrollbar-thumb:horizontal {
height: 10px;background-color: #ffffff;border: 0px ;width: 15px;}


#main{
left:101px;
bottom:75px;
position: fixed;
font-family: Spirax;
font-variant: small-caps;
text-align: justify;
font-size: 25px;

width: 600px;
height: 200px;
overflow: hidden;
align: center;
}


</style>

<h1>Layout © <a href="http://roleplaychat.org/profile.php?user=Liam+Keeler" target="_blank">real niggaz.~</a></h1></div>

<div class="Name">~I sense there's something in the wind.~
</div>

 <div id="pictureone">
<img src="https://i.pinimg.com/736x/65/5b/ee/655beeb5331389d40e97a3e8a973e820--sally-skellington-disney-tattoos.jpg" class="image" width="500px;" height="auto;"></div>

<div id="picturetwo"><img src="http://i.picpar.com/8hCc.png" class="image" width="200px;" height="auto;"></div>



<div id="navigation" class="box">

<a href="#01" title="O.O.C"><img src="http://i.picpar.com/KhCc.png" width="175" height="100"></a>
</div>

<div id="navigation2" class="box">

<a href="#02" title="Information"><img src="http://i.picpar.com/KhCc.png"width="175" height="100"></a>
</div>


<div id="navigation3" class="box">


<a href="#03" title="Persona/abilties"><img src="http://i.picpar.com/KhCc.png" width="175" height="100"></a>

</div>

<div id="navigation4" class="box">
<a href="#04" title="My dear friends"><img src="http://i.picpar.com/KhCc.png" width="175" height="100"></a>
 </div>


<div id="main">

<div style="height: 200px; width: 600px; overflow-y: hidden;">
<a name="01"></a>
<div style="height: 200px; width: 590px; overflow: auto;" align="center">

<b><i>O.O.C</i></b>
<br><br>
<p><img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"> I am very Pm/Rp friendly<img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"></p>

<p><img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"> These boxes scroll, promise.<img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"></p>

 <p><img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"> Smut? Why though? I don't think this character is able to.<img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"></p>
<p><img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"> My muse shifts from time to time.<img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"></p>

<p><img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"> This character is not able to fight...but will make an attempt if need be." <class="image" width="50px;" height="auto;"></p>

<p><img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"> IC and OOC are seperate, don't make things weird. OOC/IC any day.<img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"></p>

<p><img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"> No auto shipping, I am aware of who she's paired up with in cannon...doesn't mean I will be sticking to cannon, if a Jack happens to come along and is interested well....<img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"></p>

<p><img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"> With that being said, here to have fun and sorry for being a slow writer.<img src="http://i.picpar.com/KhCc.png" class="image" width="50px;" height="auto;"></p>
</div>

<div style="height: 200px; width: 600px; overflow-y: hidden;">
<a name="02"></a>
<div style="height: 200px; width: 590px; overflow: auto;" align="center">

<b><i>~<img src="http://i.picpar.com/KhCc.png" class="image" width="43px;" height="auto;">~General information~<img src="http://i.picpar.com/KhCc.png" class="image" width="43px;" height="auto;"> ~</i></b>
<p>Name~ Sally</p>

<p>Age~ Unknown</p>
<p>Height~ Five foot five</p>
<p>Weight~ Unknow</p>
<p>Orientation~ Love is love</p>
<p>Status~ Single</p>

<br><br>

</div>

<div style="height: 200px; width: 600px; overflow-y: hidden;">
<a name="03"></a>
<div style="height: 200px; width: 590px; overflow: auto;" align="center">

<b><i>~<img src="http://i.picpar.com/KhCc.png" class="image" width="43px;" height="auto;">~Peronality/Abilities~<img src="http://i.picpar.com/KhCc.png" class="image" width="43px;" height="auto;">~</i></b>
<br><br>
<p><u>personality</u></p>
<p>Shy, romantic, lonely, kind, clumsy, innocent, honest, quick-thinking, caring, resourceful, clever, sensible, gentle, sweet, soft-spoken, down-to-earth.</p>
<p><u>Abilities</p></u>
<p>Being made of stitched-together body parts, Sally is largely invulnerable to bodily harm, surviving an otherwise deadly fall from Finklestein's tower, albeit in pieces. Her limbs can also move independently from her body, shown when she used one of her legs to distract Oogie Boogie while attempting to save Santa.</P>

<p>Sally has extensive knowledge of potions, having used ingredients such as deadly nightshade to drug her jailor Dr. Finklestein on more than one occasion, and is an expert seamstress, using a needle and thread to stitch herself back together.</p>
<p>Knowledge of potions</p>
<p>Detachability</p>
<p>Expert needlework</p>
<p>Invulnerability (For the most part, is very durable)</p>
Precognition
</div>

<div style="height: 200px; width: 600px; overflow-y: hidden;">
<a name="04"></a>
<div style="height: 200px; width: 590px; overflow: auto;" align="center">
<b><i>“My precious friends”</i></b>
<br><br>
To be added

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