Konnor

@import url('https://fonts.googleapis.com/css?family=Alegreya|Alex+Brush|Audiowide');

body {
background-image: url("https://i.imgur.com/UMOwIWK.png");
background-attachment: fixed;
background-position: top;
color: #004f39;
background-color: #80A79C;
font-family: "Alegreya";
font-size: 16px;
}

#credit {
Position: fixed; bottom: 10px; left: 10px;
font-family: "Audiowide";
font-size: 14px;
text-shadow: 2px 0 0 #4C9DCC, -2px 0 0 #4C9DCC, 0 2px 0 #4C9DCC, 0 -2px 0 #4C9DCC, 1px 1px #4C9DCC, -1px -1px 0 #4C9DCC, 1px -1px 0 #4C9DCC, -1px 1px 0 #4C9DCC;
z-index: 99;
}

#CenterPic{
position: fixed; left: 0px; right: 0px; top: -275px; bottom: 0px; margin: auto;
height: 255px;
width: 255px;
border-radius: 50%;
z-index: 99;
background-image: url('https://data.whicdn.com/images/69865100/original.gif');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:absolute;
}

#CenterPicFrame{
position: fixed; left: 0px; right: 0px; top: -275px; bottom: 0px; margin: auto;
background-image: url("https://i.imgur.com/A0bOwgU.png");
background-color: #004f39;
background-position: center;
background-attachment:fixed;
background-size: 400 400;
height: 285px;
width: 285px;
border-radius: 50%;
z-index: 98;
}

#LeftPic{
position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;
width: 255px;
height: 550px;
z-index: 5;
background-image: url('https://media.giphy.com/media/MHGpNXUrj9jry/giphy.gif');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:absolute;}

#LeftPicFrame{
position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;
background-image: url("https://i.imgur.com/A0bOwgU.png");
background-color: #004f39;
background-position: center;
background-attachment:fixed;
background-size: 400 400;
width: 285px;
height: 580px;
z-index: 4;
}

#RightPic{
position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
width: 255px;
height: 550px;
z-index: 5;
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQGQ5Zf2SOIWxIdrx5GdTQ6nutoFOrK9f1PJp0YtEX2RL1cFW0');
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:absolute}

#RightPicFrame{
position: fixed; left: 0px; right: -800px; top: 0px; bottom: 0px; margin: auto;
background-image: url("https://i.imgur.com/A0bOwgU.png");
background-color: #004f39;
background-position: center;
background-attachment:fixed;
background-size: 400 400;
width: 285px;
height: 580px;
z-index: 4;
}

#LineOne{
position: fixed; left: 0px; right: 0px; top: -275px; bottom: 0px; margin: auto;
background-image: url("https://i.imgur.com/A0bOwgU.png");
background-color: #004f39;
background-position: center;
background-attachment:fixed;
background-size: 400 400;
width: 100%;
height: 50px;
z-index: 1;
}

#LineTwo{
position: fixed; left: 0px; right: 0px; top: 0px; bottom: -120px; margin: auto;
background-image: url("https://i.imgur.com/A0bOwgU.png");
background-color: #004f39;
background-position: center;
background-attachment:fixed;
background-size: 400 400;
width: 100%;
height: 50px;
z-index: 1;
}

#LineThree{
position: fixed; left: 0px; right: 0px; top: 0px; bottom: -380px; margin: auto;
background-image: url("https://i.imgur.com/A0bOwgU.png");
background-color: #004f39;
background-position: center;
background-attachment:fixed;
background-size: 400 400;
width: 100%;
height: 50px;
z-index: 1;
}

#Box{
position: fixed; left: 0px; right: 0px; top: 0px; bottom: -220px; margin: auto;
background-color: #C0D3CE;
width: 400px;
height: 225px;
padding: 10px;
padding-top: 20px;
z-index: 3;
}

#tab{
position: fixed; left: 0px; right: 0px; top: 0px; bottom: -220px; margin: auto;
background-color: #C0D3CE;
width: 400px;
height: 225px;
padding: 10px;
padding-top: 20px;
z-index: 3;
overflow: auto;
visibility: hidden;
}

#OOC #tab {
visibility: visible;
}

#Stats:target #tab, #Personality:target #tab, #Abilities:target #tab, #History:target #tab, #Associates:target #tab, #OOC:target #tab {
visibility: visible;
z-index: 90;
}

#BoxFrame{
position: fixed; left: 0px; right: 0px; top: 0px; bottom: -255px; margin: auto;
background-image: url("https://i.imgur.com/A0bOwgU.png");
background-color: #004f39;
background-position: center;
background-attachment:fixed;
background-size: 400 400;
width: 450px;
height: 325px;
z-index: 1;
}

#Navigation{
position: fixed; left: 0px; right: 0px; top: 0px; bottom: -530px; margin: auto;
width: 440px;
height: 20px;
z-index: 5;
}

.NaviTab{
display: inline-block;
background-color: #C0D3CE;
width: 54px;
height: 20px;
z-index: 5;
margin: 0 8 0 8;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

.NaviTab:hover {
background-color: white;
}

.friendpic {
border: 5px solid #004f39;
width: 100px;
height: 100px;
margin: 7px;
border-radius: 50%;
padding: 0;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

.friendpic:hover {
border: 5px solid #0c8dbc;
border-radius: 50%;
}

a.credit:link {color:#f0f0f0; font-family: "Audiowide"; font-size: 16px; z-index: 99;}
a.credit:visited {color:#f0f0f0;}
a.credit:hover {color:#6f52be;}
a.credit {text-decoration:none;}

a {color:#00281D; font-family: "Alex Brush"; font-size: 16px; text-decoration:none;
-webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;}
a:visited {color:#00281D;}
a:hover {color:#0c8dbc;}

b {color:#00281D;}

h1 {
 overflow: hidden;
 text-align: center;
 font-size: 20px;
 padding: 0px;
 margin: 0px;
}

h1:before,
h1:after {
 border-top: 3px solid #004f39;
 border-bottom: 3px solid #004f39;
 content: "";
 display: inline-block;
 height: .25em;
 position: relative;
 vertical-align: middle;
 width: 50%;
 margin-bottom: .15em;
}

h1:before {
 right: 0.5em;
 margin-left: -50%;
}

h1:after {
 left: 0.5em;
 margin-right: -50%;
}

::-webkit-scrollbar {
width: 0px;
height: 1px;
}

::-webkit-scrollbar-track {
border-radius: 0px;
}

::-webkit-scrollbar-thumb {
background: transparent;
}
</style>

<img id="CenterPic"></div>

<img id="LeftPic"></div>

<img id="RightPic"></div>

<div id="CenterPicFrame"></div>
<div id="LeftPicFrame"></div>
<div id="RightPicFrame"></div>
<div id="LineOne"></div>
<div id="LineTwo"></div>
<div id="LineThree"></div>
<div id="BoxFrame"></div>
<div id="Box"></div>
<div id="Navigation">
<a href="#Stats"><div class="NaviTab"></div></a>
<a href="#Personality"><div class="NaviTab"></div></a>
<a href="#Abilities"><div class="NaviTab"></div></a>
<a href="#History"><div class="NaviTab"></div></a>
<a href="#Associates"><div class="NaviTab"></div></a>
<a href="#OOC"><div class="NaviTab"></div></a>
</div>

<div id="Stats">
<div id="tab">
<h1>Stats</h1>
<b>Name:</b><font style=float:right>Konnor</font><br>
<b>Age:</b><font style=float:right>Appears 24</font><br>
<b>Gender:</b><font style=float:right>Male</font><br>
<b>Species:</b><font style=float:right>Familiar</font><br>
<b>Rank:</b><font style=float:right>Rhaeli</font><br>
<b>Hair:</b><font style=float:right>Dark Brown</font><br>
<b>Eyes:</b><font style=float:right>Ice Blue</font><br>
<b>Height:</b><font style=float:right>6'0</font><br>
<b>Weight:</b><font style=float:right>185 pounds</font><br>
<b>Orientation:</b><font style=float:right>Heterosexual</font><br>
<b>Status:</b><font style=float:right>Undisclosed</font><br>
<b>Residence:</b><font style=float:right>Nibiru</font><br>
</div></div>

<div id="Personality">
<div id="tab">
<h1>Personality</h1>
Konnor can be quite an idiot at times. He's forever cracking a joke or his comments are sarcastic. Full of energy, far more than the average person and always, always grinning.
</div></div>

<div id="Abilities">
<div id="tab">
<h1>Abilities</h1>
<b>Ability name:</b> Ability description.<br>
<b>Ability name:</b> Ability description.<br>
<b>Ability name:</b> Ability description.<br>
<b>Ability name:</b> Ability description.<br>
<b>Ability name:</b> Ability description.<br>
<b>Ability name:</b> Ability description.<br>
<b>Ability name:</b> Ability description.<br>
<b>Ability name:</b> Ability description.<br>
<b>Ability name:</b> Ability description.<br>
<b>Ability name:</b> Ability description.
</div></div>

<div id="History">
<div id="tab">
<h1>History</h1>
Konnor was not born in the conventional sense. In fact, he was made, summoned, created for the sole purpose of shielding those The Order deemed necessary to protect. Given the task of watching over 'specials', be it human, Fae, lycans, witches or mages. Entrusted with a set of skills, and marked by a symbol, a chosen few are sent out on the mission to protect. And it is to the death.
</p>
<p>
A grueling and intense training regime that lasts a period of four years, in which time Konnor is assigned his first witch. It wasn't without trial and error however, and the young familiar grew a strong attachment to the witchling. It wasn't to be however, and Konnor risked his life only for the witch to perish at the hands of those that sought to eradicate any form of unnatural beings.
He returned to Nibiru, a place where the Elders reside and teach the young ones the ways in which they abide. There, the Order is etablished, governed by twelve individuals whose souls are as ancient as the Gods themselves.
</p>
<p>
Over the decades, Konnor is assigned to others, though some are fleeting. Until he is sanctioned to protect one of the 'Few'. Not much is known about this grouping, though their power is immense. One can go through an entire existance without knowing they are of those Few. Konnor was entrusted to one, keeping his presence near untraceable until those abilities begane to take form.A tradegy took the sanity of the mage and it was that Konnor lay down his life, sacrificing his existence in order to save the one he was chosen to protect. It was the only way he knew how. He gifted the mage with his own shifting abilities, giving up everything to see his promise held true.Death does not stop a familiar's reign. The body is recovered, consecrated and reborn. From the very ashes in which scorching fire burns the flesh to cinders. A blank slate, save for the one burning purpose branded into each familiar's soul. Protect.
</div></div>

<div id="Associates">
<div id="tab">
<h1>Associates</h1>
<center>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
<a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="PICHERE" class="friendpic" title="DESCRIPTION OF FRIEND HERE"></a>
</center>
</div></div>

<div id="OOC">
<div id="tab">
<h1>Out of Character</h1>
<b>01.</b> DM Friendly.<br>
<b>02.</b> IC is not OOC. Know the difference.<br>
<b>03.</b> Room RP Preferred.<br>
<b>04.</b> Snowball writer. Shit post to multi para.<br>
<b>05.</b> Story/Smut. Story is adored.<br>
<b>06.</b> Don't be a cunt, I won't be a dick.<br>
<b>07.</b> FC - Matt Lanter
</div></div>

<div id="credit"><a class="credit" href="https://roleplay.chat/profile.php?user=Spaceman+Codes">Spaceman</a></div>