Karnilla final

<style type="text/css">

@import url(https://fonts.googleapis.com/css?family=Ruthie);
@import url(https://fonts.googleapis.com/css?family=Homemade+Apple);

html, body{
background-color:#1D052D;
background-image:url();
background-position: bottom left;
background-size:80%;
background-repeat:no-repeat;}

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

.pfor {display: none}


::-webkit-scrollbar-button:vertical:{
background-color: #280B52;}

::-webkit-scrollbar-thumb:vertical {
background-color:#280B52;
height:150px;}

::-webkit-scrollbar-thumb:horizontal {
background-color:#fff;
height:60px;}


::-webkit-scrollbar {
height:60px;
width:5px;
background-color:#fff;}

#splashart {
   position: fixed;
   left: 0%;
   bottom: 0%;}
#splashart img {
   height: 100%;}


#image {
background-color:#C0C0C0;
width: 400px;
height:400px;
margin:auto;
position: absolute;
right:15px;
top:300px;
background-image:url("http://i.imgur.com/kJQfLzP.jpg");
background-repeat:no-repeat;
background-position:center;
background-size:100% 100%;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
z-index:2;
border-left: #D2B6FC solid 4px;
border-right: #D2B6FC solid 4px;
}

#container {
width: 600px;
margin: 0px;
border: none;
height: 400px;
background-color: #54167A;
background-image:url(http://i.imgur.com/bG6k2SJ.jpg);
opacity: 0.8;
position: absolute;
right: 260px;
top: 300px;
z-index:1;
border-top: #D2B6FC solid 2px;
border-bottom: #D2B6FC solid 2px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

#nav {
width: 400px;
margin: 0px;
border: none;
height: 400px;
background-color:transparent;
position: absolute;
left: -1px;
bottom: 3px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
}

.button{
position:absolute;
top:0px;
right:0px;
width:50px;
background:;
height:40px;
overflow:hidden;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

#content {
background-color:#4D2A81;
width: 394px;
height:330px;
margin:auto;
position: absolute;
left: 45px;
bottom:35px;
text-align:left;
z-index:2;
}

#header {
background-color:#transparent;
width: 400px;
height:40px;
margin:auto;
position: absolute;
left: 40%;
top: 0%;
font-family:ruthie;
font-size:100px;
font-weight:lighter;
font-style:none;
color:#A896C1;
letter-spacing:8px;
text-align:left;
z-index:2;
}

#miscbox {
 position: fixed;
 right: 2%;
 top: 7%;
 font-size: 16px;
 text-decoration: none;
 border: 3px double #;
 background-color: #;
 width: 224px;
 height: 300px;
 padding:5px;}

.clear img{
width:35px;
height:40px;
padding:0px;
background:transparent;
float: center;
border: 1px solid plum;
border-radius: 50%;
margin:5px 5px 0px 0px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
}

.clear img:hover{
width:45px;
height:50px;
padding:0px;
float: center;
background:transparent;
border: 1px solid orcid;
border-radius: 20%;
margin:5px 5px 0px 0px;}


div, table, td, p, .text, font, textarea, input {
  font-family:Comic Sans MS;
  font-size:12px;
  color:#fff;
  letter-spacing:1px;
  word-spacing:-1px;
  text-decoration:none!important;
}


a:link, a:active, a:visited
{
font-family: arial;
font-size: 12px;
color:#c0c0c0;
letter-spacing: 1px;
text-decoration: none;
text-align: left;
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
}

a:hover {
background-color: transparent;
font-family: arial;
font-size: 11px;
font-weight: none;
color: #87CEEB;
text-decoration: none;
text-transform: none;
text-align: left;
}


#nav a, #nav a:link, #nav a:visited {
display:block;
background: #CCAAE2;
color: #000;
height: 20px;
width:10px;
margin-left:2px;
margin-top:5px;
padding:5px;
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

#nav a:active, #nav a:hover {
display:block;
height: 20px;
width:20px;
padding:5px;
text-decoration:none;
background: #675089;
color: #fff;
margin-left:5px;
margin-top:5px;
-webkit-transition-duration: 1.5s;
-moz-transition-duration: 1.5s;
}

h1 {
margin-top:2px;
margin-bottom:7px;
padding-top:5px;
font-family: homemade apple;
font-size:14px;
font-style: bold;
color:#CCAAE2;
letter-spacing:3px;
text-align:left;
border-bottom: #280B52 solid 1px;
}

b {
color: #CCAAE2;
font-family: Comic Sans MS;
font-size: 12px;
font-weight:normal;
letter-spacing: 1px;
}

u {
font-family: ruthie;
font-size: 30px;
font-weight:normal;
letter-spacing: 1px;
}
</style>

<div id="splashart"><img src="http://i.imgur.com/wAoq84O.png"></div>

<div id="image">
<div id="nav">
<div class="button" style="top:57px; left:52px;"> <a href="#stats">I</a> </div>
<div class="button" style="top:96px; left:24px;"> <a href="#about">II</a> </div>
<div class="button" style="top:142px; left:6px;"> <a href="#power">III</a> </div>
<div class="button" style="top:190px; left:2px;"> <a href="#love">IV</a> </div>
<div class="button" style="top:236px; left:10px;"> <a href="#me">V</a> </div>
<div class="button" style="top:280px; left:30px;"> <a href="#ooc">VI</a> </div>
</div>
</div>


<div id="header">Karnilla</div>
<div id="container">
<div id="content">
<div style="width: 394px; height: 290px; overflow-y: hidden;">

<a name="stats"></a>
<div style="width: 394px; height: 290px; overflow: auto;" align="center">
<h1>Dossier</h1>
<b>Name:</b> Karnilla<br>
<b>Alias / Titles:</b>  The Norn Queen<br>
<b>Afilliations:</b> <br>
<b>Age:</b>  Unknown<br>
<b>Species:</b>  Asgardian<br>
<b>Gender:</b>  Female<br>
<b>Hair:</b>  Black<br>
<b>Eyes:</b>  Purple<br>
<b>Height:</b>  6'6"<br>
<b>Weight:</b>  475 lbs (Has no clue how..)<br>
<b>Alignment:</b>  Neutral / Misunderstood<br>
<b>Occupation:</b>  Queen of Nornheim / <br>
<b>Residence:</b>  None<br>
<b>Sexuality:</b>  Straight <br>
<b>Relationship Status:</b>  Single<br>

</div>

<a name="about"></a>
<div style="width: 394px; height: 290px; overflow: auto;" align="center">
<h1>History</h1>
The birth and early life of Karnilla were shrouded in mystery. All that was really known of her early past is that she had lived in Nornheim, the Asgardian province where the Three Norns dwelt. They were the goddesses of destiny, and Karnilla became one of the most accomplished practitioners in the arts of sorcery within the Asgardian dimension. Although, Nornheim sat on the Asgardian land mass within Asgard's own dimension, and Karnilla was apparently of the Asgardian race, she did not consider herself to be subject to Asgardian rule. Nornheim was an independent country, of which Karnilla was absolute Monarch.
Karnilla lived opulently in the ancient fastness of Nornkeep, attended by her servant, the aged minor sorceress Haag, and troops of guardian demons. Although there were many demons among her subjects, Karnilla's realm was also populated by humanoid immortals, just as was Asgard proper. Karnilla's relationship to the goddesses of destiny was unknown, although they were clearly beyond her jurisdiction.
<br><br>
In the past Karnilla often proved to be an enemy of Asgard, and acted in alliance with the Asgardian god of evil, Loki. However, Karnilla was long in love with Asgard's noblest warrior, Balder the Brave. On Balder's request (on behalf of Asgard's monarch Odin), Karnilla allied herself and her army with Asgard in the war with Surtur. After years of resisting Karnilla's advances, Balder finally became Karnilla's lover. Some of Balder's Asgardian friends disapproved of the relationship, regarding Karnilla as a figure of evil. Karnilla regarded herself, however, as a harsh but just ruler.
<br><br>
Balder was called away from Nornkeep to join the Asgardian prince Thor in his mission to rescue souls of Earth human beings from Hel. During Balder's absence, Karnilla was taken prisoner by the Frost Giants of Jotunheim, who were preparing an invasion of Asgard and first intended to eliminate Asgard's allies. The Frost Giants also transformed Karnilla's subjects into stone. On his return, Balder set out to rescue Karnilla, and ultimately met with success.
<br><br>
Her present activities are unknown at this time.

</div>




<a name="power"></a>
<div style="width: 394px; height: 290px; overflow: auto;" align="left">
<h1>Abilities ~ Equipment ~ Transport</h1>
✦ <a href="http://marvel.wikia.com/wiki/Allspeak"><u>Allspeak:</u></a> Thanks to the Allspeak she can communicate in all of the languages of the Nine Realms, Earth's dialects, and various alien languages.<br>
✦ Has extensive knowledge of ancient and arcane magic.<br>
✦ Karnilla possesses the normal superhuman strength of an Asgardian woman of her physical age, height, and build, and can lift (press) at least 25 tons.
<br><br>
<center><b>Equipment</b></center>
✦ Possesses a host of magical items, such as the Norn Stones.<br>
✦ Also wears Asgardian garments.
<br><br>
<center><b>Transportation</b></center>
<center>Asgardian horses, teleportation, possibly flight.</center>


</div>


<a name="love"></a>
<div style="width: 394px; height: 290px; overflow: auto;" align="center">
<h1>The One She Loves</h1>
<a href="http://roleplay.chat/profile.php?user=Balder" target="_blank"><img src="http://i.imgur.com/v2VGCNu.jpg" width="150" height="150"></a><br><br>
<a href="profile.php?user=Balder" target="_blank"><u>Balder</u></a><br>
It is funny how love works. It sneaks up on you when you least expect it. And for this man it bit and bit hard. He is my obsession and my passion. The only thing that I want and need. I am addicted to him and can't get enough. I am sad when he is gone and can't sleep at night. He must stay in my arms for without him I am nothing. My heart is his and forever and always shall it be. I don't care if he doesn't like to admit it I know that he loves me. This is the only man for me.

</div>

<a name="me"></a>
<div style="width: 394px; height: 290px; overflow: auto;" align="center">
<h1>Gallery</h1>
<a href="http://i.imgur.com/yLBTsXJ.jpg" target="_blank"><img src="http://i.imgur.com/yLBTsXJ.jpg" width="71" height="88"></a>
<a href="http://i.imgur.com/PBqzHpx.jpg" target="_blank"><img src="http://i.imgur.com/PBqzHpx.jpg" width="71" height="88"></a>
<a href="http://i.imgur.com/zWMcqWM.jpg" target="_blank"><img src="http://i.imgur.com/zWMcqWM.jpg" width="71" height="88"></a>
<a href="http://i.imgur.com/0kez1bU.jpg" target="_blank"><img src="http://i.imgur.com/0kez1bU.jpg" width="71" height="88"></a>
<a href="http://i.imgur.com/z9lI2BE.jpg" target="_blank"><img src="http://i.imgur.com/z9lI2BE.jpg" width="71" height="88"></a>
<a href="http://i.imgur.com/cs2BGu9.jpg" target="_blank"><img src="http://i.imgur.com/cs2BGu9.jpg" width="71" height="88"></a>
<a href="http://i.imgur.com/2kFC5S1.jpg" target="_blank"><img src="http://i.imgur.com/2kFC5S1.jpg" width="71" height="88"></a>
</div>

<a name="ooc"></a>
<div style="width: 394px; height: 290px; overflow: auto;" align="left">
<h1>Break the Rules I break you!</h1>
<big><b>☑</big></b> Marvel Canon Characters ONLY!
<br><big><b>☑</big></b> Do I look like I want smut? Screw off.
<br><big><b>☑</big></b> NO DRAMA!
<br><big><b>☑</big></b> IC is not OOC
<br><big><b>☑</big></b> Real life first. I can get busy. Be patient or go away.
<br><big><b>☑</big></b> 3rd person point of view ONLY!
<br><big><b>☑</big></b> I mirror posts. I will get the writing bug. You get what you give.
<br><big><b>☑</big></b> I do not own any of the pictures.
<br><big><b>☑</big></b> Try to let me know if you have to leave.
<br><big><b>☑</big></b> I am NOT always pm friendly. Don't send me a stupid post!
<br><big><b>☑</big></b> I have the right to refuse any rp. Don't become an ass. Just accept it and move on.
<br><big><b>☑</big></b> Friend coded and let me borrow it. I edited it. Please don't steal.
</div>
</div>
</div>

<div id="miscbox">
<div style="height: 100%; overflow-y: hidden;">
<a name="misc"></a>
<div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="Left">
<div class="clear">
<a href="http://roleplay.chat/profile.php?user=Balder" title="Her love ♥ Balder"><img src="http://i.imgur.com/WGFHAjy.jpg" width="71" height="88"></a>
<a href=" " target="_blank"><img src=" " width="71" height="88"></a>
<a href=" " target="_blank"><img src=" " width="71" height="88"></a>
<a href=" " target="_blank"><img src=" " width="71" height="88"></a>
<br>
<a href=" " target="_blank"><img src=" " width="71" height="88"></a>
<a href=" " target="_blank"><img src=" " width="71" height="88"></a>
<a href=" " target="_blank"><img src=" " width="71" height="88"></a>
<a href=" " target="_blank"><img src=" " width="71" height="88"></a>
</center>
</div>
</div>
</div>