Exael profile 6/19/16

<style>

@import url(https://fonts.googleapis.com/css?family=Slabo+27px);
body {
 background: #010100;
 overflow: hidden;
}

#whole{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;}

#centerhost {
 position: absolute;
top: 0px;
left: 0px;
 right: 0px;
 bottom: -120px;
 margin: auto;
 height: 500px;
 width: 900px;
}

#centerhostback {
 position: absolute;
top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image: url(http://i68.tinypic.com/20r4meq.jpg);
 background-size: auto 100%;
 background-repeat: no-repeat;
 background-position: center;
 -webkit-filter: grayscale(30%) contrast(120%) sepia(50%);
 opacity: 1;
}

#topblur {
 position: absolute;
 top: -10px;
 left: 0px;
 right: 0px;
 height: 30px;
 background: #020201;
 -webkit-filter: blur(8px);
}

#rightblur {
 position: absolute;
 top: 0px;
 bottom: 0px;
 right: 10px;
 width: 30px;
 background: #020201;
 -webkit-filter: blur(8px);
}

#exaelimage {
 position: absolute;
 left: -180px;
 top: -150px;
 height: 800px;
 width: 400px;
 background-image: url(http://i68.tinypic.com/2vnkyzt.jpg);
 background-repeat: no-repeast;
 background-position: center;
 background-size: auto 100%;
 -webkit-filter: sepia(70%);
 filter: sepia(70%);
 -webkit-transition: all 3s;
 transition: all 3s;
}

#exaeltitle {
 position: absolute;
 top: -60px;
 left: 100px;
 height: 50px;
 width: 400px;
 border: 0px solid white;
 text-align: center;
 font-size: 30pt;
 font-style: italic;
 color: black;
 font-family: 'Slabo 27px';
 font-weight: 400;
}

#titlefill {
 position: absolute;
 top: 12px;
 left: 30px;
 right: 400px;
 bottom: 0px;
 background: gold;
 opacity: .6;
 z-index: -1;
 -webkit-filter: blur(30px);
 -webkit-transition: all 3s;
 transition: all 3s;
}

#whole:hover #titlefill {
 -webkit-transition: all 3s;
 transition: all 3s;
 right: 30px;
}

#whole:hover #exaelimage {
 -webkit-transition: all 3s;
 transition: all 3s;
 -webkit-filter: sepia(40%);
}

#menusection {
 position: absolute;
 bottom: -50px;
 left: 200px;
 right: 100px;
 height: 50px;
 border: 0px solid white;
}

#menusection a {
 position: relative;
 margin-left: 70px;
 display: inline;
 text-align: center;
 color: gold;
 border-bottom: 1px solid transparent;
 font-size: 19pt;
 font-family: 'Slabo 27px', Times;
 text-shadow: 0px 0px 6px gold;
 opacity: .3;
 -webkit-transition: all 1s;
 transition: all 1s;
 font-weight: 400;
 text-decoration: none;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
}

#menusection a:hover {
 border-bottom: 1px solid gold;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#turningpages, #turningpages2 {
 position: fixed;
 left: 0px;
 right: 0px;
 top: 0px;
 bottom: 0px;
 margin: auto;
 height: 200px;
 width: 200px;
 border: 0px solid white;
 background-image: url(http://charoreyes.webs.com/Animated_book_page_flip_hg_clr.gif);
 background-size: auto 100%;
 background-repeat: no-repeat;
 background-position: center;
 opacity: 0;
 -webkit-filter: grayscale(70%) sepia(30%);
 filter: grayscale(70%) sepia(30%);
}

#contentarea {
 position: absolute;
 top: 0px;
 left: 100px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 300px;
 width: 500px;
 border: 0px solid white;
}

#contentfill, #contentfill2 {
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 -webkit-filter: blur(10px);
 background: black;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

.infoarea {
 position: absolute;
 top: 20px;
 left: 10px;
 right: 10px;
 bottom: 10px;
 box-sizing: border-box;
 padding-right: 10px;
padding-bottom: 10px;
 border: 0px solid white;
 color: gray;
 overflow: auto;
 text-align: left;
 z-index: 0;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
 font-style: italic;
 font-size: 14pt;
}

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

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

#selection1:target #contentfill,
#selection2:target #contentfill2{
 -webkit-transition: all 1s 2.5s;
 transition: all 1s 2.5s;
 opacity: .9;
}

#selection1:target #turningpages,
#selection2:target #turningpages2{
 -webkit-animation: turninganimation 3s .25s;
 animation: turninganimation 3s .25s;
}

#selection1:target #charinfo,
#selection2:target #OOCinfo{
 -webkit-transition: all 1s 3.0s;
 transition: all 1s 3.0s;
 opacity: 1;
 z-index: 1;
}

#selection1:target #menusection a:nth-child(1),
#selection2:target #menusection a:nth-child(2){
border-bottom: 1px solid gold;}

@-webkit-keyframes turninganimation{
 0%{opacity: 0;}
 10%{opacity: 0;}
 40%{opacity: .7;}
 70%{opacity: .7;}
 90%{opacity: 0;}
 100%{opacity: 0;}
}

@keyframes turninganimation{
 0%{opacity: 0;}
 10%{opacity: 0;}
 40%{opacity: .7;}
 70%{opacity: .7;}
 90%{opacity: 0;}
 100%{opacity: 0;}
}

#whole:hover #menusection a:nth-child(1){
-webkit-transition: all 1s 0s, opacity 1s 1.5s;
transition: all 1s 0s, opacity 1s 1.5s;
opacity: .3;}

#whole:hover #menusection a:nth-child(2){
-webkit-transition: all 1s 0s, opacity 1s 2.2s;
transition: all 1s 0s, opacity 1s 2.2s;
opacity: .3;}

#whole:hover #menusection a:nth-child(3){
-webkit-transition: all 1s 0s, opacity 1s 2.9s;
transition: all 1s 0s, opacity 1s 2.9s;
opacity: .3;}


#musicsection{
position: absolute;
right: 0px;
bottom: 0px;
top: 0px;
margin: auto;
height: 30px;
width: 100px;
border: 0px solid white;
}

#musicfirst{
position: absolute;
left: 0px;
top: 0px;
height: 30px;
width: 60px;
font-size: 30px;
font-family: 'Slabo 27px';
font-style: italic;
border: 0px solid red;
color: gold;
opacity: .4;
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
text-shadow: 0px 0px 6px gold;}

#musicsecond{
position: absolute;
right: -100px;
top: 0px;
height: 30px;
width: 120px;
border: 0px solid green;
-webkit-transition: all 1s;
transition: all 1s;}

#musicsecondA{
position: absolute;
background-image:url(http://25.media.tumblr.com/63f2cf3f1c33fa917f0c75b24be8fa47/tumblr_mrsjqh9YZ91sqb6imo1_500.gif);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
top: 0px;
height: 30px;
width: 45px;
border: 0px solid gray;
-webkit-transition: all 1s;
transition: all 1s;
overflow: hidden;
text-align: right;
height: 30px;
width: 40px;
left: 240px;
}

#musicsecondB{
position: absolute;
left: 0px;
top: 0px;
font-size: 18pt;
font-family: 'Slabo 27px';
border: 0px solid blue;
font-style: italic;
color: gold;
opacity: .4;
text-align: right;
width: 230px;
 text-shadow: 0px 0px 6px gold;}

#musicsecondA audio{
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;}

#musicsection:hover #musicfirst{
-webkit-transition: all 1s;
transition: all 1s;
opacity: 0;}

#musicsection:hover #musicsecond{
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
right: 190px;}

#musicsecondA:hover audio{
opacity: 1;}

.infoarea b{
color: #564800;}

.infoarea a, .infoarea a:hover, .infoarea a:visited{
font-weight: bold;
color: #564800;
text-decoration: none;}

.infoarea a:hover{
text-decoration: underline;}

</style>

<div id="whole">

<div id="selection1">
 <div id="selection2">


 <div id="centerhost">
 <div id="centerhostback">
 <div id="topblur">
 </div>
 <div id="rightblur">
 </div>
 </div>
 <div id="exaelimage">
 </div>
 <div id="exaeltitle">
 <i>Exael, the Librarian</i>
 <div id="titlefill">
 </div>
 </div>

 <div id="menusection">
 <a href="#selection1">Character Info
 </a>
 <a href="#selection2">OOC
 </a>
 <a href="#none">Reset</a>
 </div>

 <div id="contentarea">
 <div id="contentfill">
 </div>
 <div id="contentfill2">
 </div>
 <div class="infoarea" id="charinfo">
<br>
<center style="font-size:11pt; letter-spacing: -1px;">
<b>// Height - 6'3" // Build - Slender // Age - N/A // Gender - Male // Sexuality - Pansexual //</b></center><br>
<b>Exael</b> is a somewhat mysterious figure, the cryptic nature of his background rivaled only by that of 'The Library', the building he calls his eternal charge. Considering himself a civilized person, the feline is rather jovial towards others and especially careful in taking care of those that visit him seeking knowledge. Books and coffee are favorite hobbies that he chooses to indulge in, the first occupying any spare time allowed him from his care taking or supervising duties. Coffee is a pleasure he affords himself only at certain times of the day, usually taken in with the rise of the sun and rarely after.<br><br>
These things are only surface traits, however. While the man is generally swift to befriend any friendly faces he comes across, there is little record remaining of the few whom he has found either distasteful or disagreeable. No proof remains to judge the questionable disappearances other than that within one week of their vanishing, each person had made a noted visit to The Library. No other evidence connects the two incidents, and none of the potential victims left any notes to warn friends or family of a trip out of town. When asked to comment, Exael has time and time again only stated <b>"If I see [the victim] again, I'll have to ask them what they thought of the last chapter."</b><br><br>
In his care: <a href="http://roleplay.chat/profile.php?user=Velvetine" target=_blank>one voodoo panda</a>, <a href="https://www.youtube.com/watch?v=Y9KcMfQhn6w" target=_blank>one Charles Mingus record</a>.
 </div>

 <div class="infoarea" id="OOCinfo">
 No piece of art or music used in this profile belongs to me.<br>
The coding of this profile is <a href="http://roleplay.chat/profile.php?user=Digital" target=_blank>my own</a>.<br><br>
Feel free to PM anytime, but I am completely uninterested in intimate or romantic scenes.
 </div>

 <div class="infoarea">
 </div>

 <div id="turningpages">
 </div>
 <div id="turningpages2">
 </div>

 </div>
 </div>


 </div>
</div>

<div id="musicsection">
<div id="musicfirst">
Music</div>
<div id="musicsecond">
<div id="musicsecondB">
<a title="by Howard Hart">Reflections of Light</a>
</div>
<div id="musicsecondA">
<audio controls src="https://www.dropbox.com/s/i33hwzcdyyuk835/Reflections%20Of%20Light%20-%20Howard%20Hart%20%28Blue%20Rasa%20Music%20Library%29.mp3?dl=1">
</audio>
</div>
</div>
</div>

</div>