Sol Profile In Progress

<style>

@import url(https://fonts.googleapis.com/css?family=Trade+Winds);

@import url(https://fonts.googleapis.com/css?family=Jura);

@import url(https://fonts.googleapis.com/css?family=Handlee);


body {
}

#whole, #whole2{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
 background: #2E2D3B;
-webkit-transition: all 1s;
transition: all 1s;
}

::-webkit-scrollbar {
 width: 4px;
 background-color: gray;
}


::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
 background-color: #28263B;
}




#imageonright, #imageonright2 {
 position: absolute;
 right: 0px;
 top: 0px;
 bottom: 0px;
 width: 50%;
 background-image: url(http://i64.tinypic.com/2u9mzw3.jpg);
 background-repeat: no-repeat;
 background-size: 100% auto;
 background-position: top 30% center;
 overflow: hidden;
}

#imageonright{
-webkit-transition: all 1s;
transition: all 1s;
z-index: 1;
-webkit-transition: all .7s .5s;
transition: all .7s .5s;}

#imageonright:hover ~ #lefthalf{
opacity: .5;
-webkit-transition: all 1s;
transition: all 1s;
}

#faderdiv {
 position: absolute;
 -webkit-filter: blur(10px);
 background: #2E2D3B;
 opacity: 1;
-webkit-transition: all 1s;
transition: all 1s;
}

.topfade {
 left: 0px;
 right: 0px;
 top: -20px;
 height: 40px;
}

.leftfade {
 top: 0px;
 bottom: 0px;
 left: -20px;
 width: 40px;
}

.bottomfade {
 left: 0px;
 right: 0px;
 bottom: -20px;
 height: 40px;
}

#nonfadediv{
 position: absolute;
 z-index: 1;
 background: #2E2D3B;
 opacity: 1;
-webkit-transition: all 1s;
transition: all 1s;
}

.topnonfade{
 left: 0px;
 right: 0px;
 top: -30px;
 height: 40px;
}

.leftnonfade{
 top: 0px;
 bottom: 0px;
 left: -30px;
 width: 40px;
}

.bottomnonfade{
 left: 0px;
 right: 0px;
 bottom: -30px;
 height: 40px;
}

#lefthalf{
 position: absolute;
 left: 0px;
 top: 0px;
 bottom: 0px;
 width: 50%;
 border: 0px solid white;
 z-index: 3;
overflow: none;
transition: all 1s;
-webkit-transition: all 1s;
z-index: 2;
}

#columns{
 position: absolute;
 top: 0px;
 bottom: 0px;
left: 0px;
right: 0px;
 margin: auto;
 width: 300px;
 height: 80%;
 border: 0px solid black;
 overflow: hidden;
 border-radius: 30px 30px 30px 30px;
-webkit-transition: all 1s;
transition: all 1s;
}

#columns:nth-child(1){
 margin-left: 100px;
}
#columns:nth-child(2){
 margin-left: 450px;
}
#columns:nth-child(3){
 margin-left: 900px;
}

#backgroundfiller{
 position: absolute;
top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: black;
 opacity: .5;
}

#bigtab{
 position: absolute;
 height: 98%;
 width: 90%;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 margin: auto;
 border: 0px solid black;
 font-family: 'Handlee', cursive;
font-family: 'Jura', sans-serif;
 font-size: 10pt;
text-align: left;
box-sizing: border-box;
padding-left: 20px;
 color: gray;
 text-shadow: 1px 1px 8px gray;
overflow: auto;
zoom: 120%;
}

h1 { font-size: 16pt;
font-family: 'Trade Winds', cursive;
color: #d4cece;
font-weight: 800;
margin-bottom: 8px;
margin-top: 43px;
-webkit-transition: all 1s;
transition: all 1s;}

a.contents { color: #d4cece;
font-weight: 800;
text-decoration: none;
transition: all 1s;
-webkit-transition: all 1s; }

a.contents:hover {
text-shadow: 1px 1px 8px white; }

#columns:nth-child(1) a{
cursor:help;
}



#imageonright2{
z-index:1;
opacity: 0;
-webkit-transition: all .7s;
transition: all .7s;}

#selectionone:target ~ #whole #imageonright2{
opacity: 1;
-webkit-transition: all 1s .5s;
transition: all 1s .5s;}

#selectionone:target ~ #whole #imageonright{
-webkit-transition: all .7s;
transition: all .7s;
opacity: 0;}

#imageonright2{
background-image:url(http://i65.tinypic.com/auiqf.jpg);
}

#selectionone:target ~ #whole #imageonright{
-webkit-transition: all 1s;
transition: all 1s;
opacity: 0;
}

#whole2{
background-image:url(http://i65.tinypic.com/4pwgpj.jpg);
background-color: #91271B;
background-color: #5d140c;}

#selectionone:target ~ #whole{
background-color: transparent;}

#selectionone:target ~ #whole #nonfadediv, #selectionone:target ~ #whole #faderdiv{
opacity: 0;}

#selectionone:target ~ #whole a.contents{
color: black;
text-shadow: 0px 0px 8px #2d2a2a;}

#selectionone:target ~ #whole a.contents:hover{
text-shadow: 1px 1px 8px red;}

#selectionone:target ~ #whole h1{
color: black;
text-shadow: 1px 1px 8px gray;}

#selectionone:target ~ #whole #bigtab{
text-shadow: 1px 1px 8px #8e5751;
text-shadow: 1px 1px 8px black;
color: gray;
color: #666262;}

.contentleader{
color: #4F202B;
text-shadow: 1px 1px 8px black; }

#selectionone:target ~ #whole .contentleader{
color: black; text-shadow: 1px 1px 8px red;}

#optionselect{
position: fixed;
height: 40px;
width: 150px;
border: 0px solid black;
right: 10px;
top: 10px;
opacity: .7;}

#optionselect a{
text-decoration: none;
float: left;
height: 30px;
width: 30px;
border: 0px solid black;
border-radius: 2px 2px 2px 2px;
background: #101010;
overflow: hidden;
text-align: center;
color: #818181;
font-size: 18pt;
text-shadow: 1px 1px 3px gray;
box-sizing: border-box;
padding-top: 1px;
margin-right: 2px;
 font-family: 'Handlee', cursive;
font-family: 'Jura', sans-serif;
}

#optionselect a:nth-child(1){
font-size:19pt;
padding-top: 2px;}

#optionselect a:nth-child(3) *{
zoom:110%;}

#optionselect audio{
position: relative;
margin-top: -3px;
margin-left: -10.5px;
}

.extensionss{
position: fixed;
margin-left: 190px;
margin-top: -20px;
width: 200px;
background: black;
color: white;
display: none;
overflow: hidden;
opacity: 0;
box-sizing: border-box;
padding: 5;
border-radius: 3px 3px 3px 3px;
}

a.contents:hover + .extensionss
{display: block;
opacity: .9;
z-index: 6;
}


</style>

<div id="selectionone">
</div>
<div id="whole2">
</div>
<div id="whole">
<div id="imageonright2">
</div>
<div id="imageonright">
 <div id="faderdiv" class="topfade">
 </div>
 <div id="faderdiv" class="leftfade">
 </div>
 <div id="faderdiv" class="bottomfade">
 </div>
 <div id="nonfadediv" class="topnonfade">
 </div>
 <div id="nonfadediv" class="leftnonfade">
 </div>
 <div id="nonfadediv" class="bottomnonfade">
 </div>

</div>

<div id="lefthalf">
 <div id="columns">
 <div id="backgroundfiller">
 </div>

<div id="bigtab">
<h1 style="margin-bottom: 3px; margin-top: 10px;" class="contentleader">Sol Rave</h1>
<h1 style="font-size:9pt; font-weight: 400; margin-top: 3px;" class="contentleader">Legendary 'Grand Chimera'</h1>

<h1 style="font-size:9pt; font-weight: 400; margin-top: 26px;">Physical</h1>
▪ Gender <span style="padding-left: 35px;">▪ Male</span><br>
▪ Height <span style="padding-left: 40px;">▪ 15'3"</span><br>
▪ Build <span style="padding-left: 49px;">▪ Muscular/Heavy</span><br>
▪ Tail Length <span style="padding-left: 13px;">▪ 17'4"</span><br>
▪ Wingspan <span style="padding-left: 18px;">▪ 14'0"</span><br><br>

<h1 style="font-size:9pt; font-weight: 400; margin-top: 14px;">Personality</h1>
▪ Orientation <span style="padding-left: 13px;">▪ Pansexual</span><br>
▪ Anger<span style="padding-left: 46px;">▪ Builds Slowly</span><br>
▪ Humor<span style="padding-left: 43px;">▪ Very Specific</span><br>
▪ Arousal<span style="padding-left: 36px;">▪ Builds Slowly</span><br>
▪ Arrogance<span style="padding-left: 19px;">▪ Very High</span><br>

<h1 style="font-size:9pt; font-weight: 400; margin-top: 26px;">Abilities</h1>
▪ Eyes <span style="padding-left: 49px;">▪ <a class="contents">True Sight</a><div class="extensionss">True Sight -
Eyes perceive the truth through illusions and work as a defensive mechanism against magical persuasion</div></span><br>

▪ Ears <span style="padding-left: 53px;">▪ <a class="contents">Magical Echo</a><div class="extensionss">Magical Echo -
Ears are capable of detecting the potency and location of magic being cast based on the 'frequency'.
General hearing capacity is that of most canines.</div></span><br>

▪ Nose <span style="padding-left: 49px;">▪ <a class="contents">Trace</a><div class="extensionss">Trace -
Nose tracks on scent in a fashion similar to a canine, though with the ability to detect
supernatural or magical hints through smell.</div></span><br>

▪ Mouth <span style="padding-left: 43px;">▪ <a class="contents">Instant Cast</a><div class="extensionss">Instant Cast -
Accesing the 'Ethereal Language', the user can cast spells of various levels without the aid of rituals
or incantations. Often one word or none will do.</div></span><br>

▪ Heart <span style="padding-left: 48px;">▪ <a class="contents">Immortality</a><div class="extensionss">Immortality -
A heart that beats with the energy of creation. Upon death, his memory and body are eventually reconstituted
in the ether and returned to physical form. The amount of time it consumes varies depending on the amount of
of damage taken beforehand.</div></span><br>

▪ Brain <span style="padding-left: 49px;">▪ <a class="contents">Knowledge</a><div class="extensionss">Knowledge -
The information of any age is 'downloaded' into his mind through the connection he maintains to the ether.</div></span><br>

▪ Horns <span style="padding-left: 43px;">▪ <a class="contents">Regeneration</a><div class="extensionss">Regeneration - His body heals from any but the most grievous wounds, relatively quickly. In addition, his physical stamina
and endurance are very high.</div></span><br>

▪ Arms <span style="padding-left: 49px;">▪ <a class="contents">Strength</a><div class="extensionss">Strength -
Supernatural strength that increases depending on the demands of the situation, leading him to be capable
of 'epic feats'.</div></span><br>

▪ Tail <span style="padding-left: 61px;">▪ <a class="contents">Restriction</a><div class="extensionss">Binding -
The wrap of his tail binds things with a fusion of physical strength and magical restriction to both immobilize
and seal off/diminish magical capabilities.</div></span><br>

▪ Wings <span style="padding-left: 42px;">▪ <a class="contents">Infinite Flight</a><div class="extensionss">Infinite Flight -
His ability to fly is without limit, as his wings function with a mix of physical effect and magical levitation.
To attain greater speeds, he requires more space for the movement of his wings.</div></span><br>



 </div>
 </div>
 <div id="columns">
 <div id="backgroundfiller">
 </div>
 <div id="bigtab">
<h1 style="margin-top:21px;">ooc</h1>
■ code is mine<br>
■ main alt is <a target="_blank" href="http://roleplaychat.org/profile.php?user=Digital" target="_blank" class="contents">Digital</a><br>
■ casual actions use (<b>-</b>) or (<b>/</b>)<br>
■ main rp uses quotes and etc<br>
■ sexual rp <a target="_blank" href="http://roleplay.chat/profile.php?user=Lette" target="_blank" style="text-decoration: none; font-weight: 600;" class="contents">isn't happening</a><br>
■ character art is owned by me<br>
<h1 style="margin-top: 8px; margin-bottom: 5px;"> profile </h1>
■ is a wip<br>
■ <a target="_blank" href="http://google.com" target="_blank" class="contents">click</a> or
<a class="contents" title="find out more info like this!">hover</a> on links<br>
■ displays better on larger monitors
<h1 style="margin-top: 15px;">likes</h1>
■ discussing rp in advance<br>
■ long-term scenarios<br>
■ various themes and scenes<br>
■ good sense of humor<br>
■ openness to answering/asking questions<br>
■ honesty
<h1 style="margin-top: 15px;">dislikes</h1>
■ ignorance<br>
■ assholes<br>
■ dishonesty

 </div>
 </div>

</div>
</div>

<div id="optionselect">
<a href="#nadda">1</a>
<a href="#selectionone">2</a>
<a href=""><audio controls src="https://www.dropbox.com/s/7twblb3e5c32zeo/HALCYON.mp3?dl=1"></audio></a>
</div>