Herald

<style>

.pfor {display: none;}
#profile{background: transparent; border: 0px;}

/* 404047 */

body{
 overflow: hidden;
 background: #0E0E10;
}

::-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: gray;
}

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


#second{position:absolute;
right: 0px;
top: 0px;
bottom: 0px;
left: 0px;
 -webkit-filter:blur(10px);
background: #0E0E10;
 background-image:url(http://i64.tinypic.com/29awoli.png);
 background-size: auto 90%;
 background-repeat: repeat;
opacity: .9;}


#practicebox{position: absolute;
right: 0px;
left: 0px;
 height: 100px;
 width: 400px;
 top: 0px;
 bottom: 0px;
 margin: auto;
 border: 1px solid transparent;
 border-radius: 10px 10px 10px 10px;
 overflow: hidden;
}

#backgroundfiller{
 height: 100%;
 width: 100%;
 background-image:url(http://i68.tinypic.com/30k7g5h.jpg);
 background-repeaT: no-repeat;
 opacity: .8;
}

#wireframe{
 position: absolute;
 top: 4px;
 right: 4px;
 bottom: 4px;
 left: 4px;
 border:1px solid black;
 border-radius: 10px 10px 10px 10px;
 opacity: .6;
}

#textinfo{position:absolute;
top: 30px;
left: 10px;
right: 10px;
bottom: 10px;
font-family: Times;
font-style: italic;
letter-spacing: 25px;
 font-size: 11pt;
color: gray;
color: #BC8745;
 text-align: center;
line-height: 22px;
 text-shadow: 2px 2px 3px black;
text-indent: 36px;}

.smalls, .smalls a{font-size: 9pt;
font-family: times;
 letter-spacing: 1px;
 color: gray;
font-style: italics;
line-height:30px;
text-shadow: 1px 1px 3px white;
text-decoration: none;
-webkit-transition: all 2s;
transition: all 2s;
opacity: .8;}

.smalls a:hover,
#choosesooth:target #textinfo a:nth-child(3),
#choosesooth2:target #textinfo a:nth-child(2){
text-shadow: 1px 1px 1px gray;
-webkit-transition: all 1s .3s, text-shadow 1s;
transition: all 1s .3s, text-shadow 1s;
color: white;
opacity: 1;}

#choosesooth:target #textinfo a:nth-child(3),
#choosesooth2:target #textinfo a:nth-child(2){
text-decoration: line-through;
}

#soothimage{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(http://i65.tinypic.com/553qs1.jpg);
background-size: auto 90%;
background-position: left 16% center;
background-repeat: no-repeat;
opacity: .5;
-webkit-filter:grayscale(0%);
-webkit-transition: all 1s .7s;
transition: all 1s .7s;}

#soothimage2{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-image:url(http://i64.tinypic.com/29nxh7m.jpg);
background-size: auto 70%;
background-position: left 16% bottom;
background-repeat: no-repeat;
opacity: 0;
-webkit-filter:grayscale(0%);
-webkit-transition: all 1s;
transition: all 1s;}

#choosesooth2:target #soothimage2{
opacity: .5;
-webkit-transition: all 1s .7s;
transition: all 1s .7s;
}

#choosesooth2:target #soothimage{
-webkit-transition: all 1s;
transition: all 1s;
opacity: 0;}

#choosesooth:target #soothbox,
#choosesooth2:target #soothbox2{
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
height: 200px;
}

#choosesooth:target #soothbox #contents,
#choosesooth2:target #soothbox2 #contents{
-webkit-transition: all 1s 1.2s;
transition: all 1s 1.2s;
opacity: 1;
z-index: 2;}

#soothbox, #soothbox2{
position: absolute;
display: block;
left: 0px;
right: 0px;
margin: auto;
margin-top: 110px;
margin-left: 40px;
width: 300px;
height: 0px;
border: 0px solid green;
opacity: 1;
overflow: hidden;
-webkit-transition: all .7s;
transition: all .7s;}

#soothbox2:before, #soothbox:before{
content:'';
z-index:0;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 5px 5px 5px 5px;
background: black;
opacity: .7;}

#emptycontainer{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
height: 100px;
width: 100px;}

#contents{
position: absolute;
top: 0px;
left: 0px;
height: 194px;
width: 300px;
box-sizing: border-box;
padding: 10px;
padding-bottom: 5px;
overflow: auto;
font-size: 10pt;
font-family: 'Times';
font-style: italic;
color: gray;
text-align: justify;
text-justify: inter-word;
z-index: 1;
text-shadow: 1px 1px 3px black;
letter-spacing: 1px;
line-height: 18px;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
}

#contents b{
color: #BC8745;
text-shadow: 1px 1px 3px black;
letter-spacing: 3px;
}

#contents br{
line-height: 20px;}

#bottomsection{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
height: 50px;
background: transparent;
z-index: 3;
-webkit-transition: all 1s;
transition: all 1s;
}

#scrollimagecontainer{
-webkit-transition: all 1s 1s;
transition: all 1s 1s;
opacity: 1;}

#bottomsection:hover #scrollimage{
-webkit-animation-play-state: paused;
animation-play-state: paused;
opacity: 0 !important;}

#bottomsection:hover #scrollimagecontainer{
-webkit-transition: all 1s;
transition: all 1s;
opacity: 0;}

#scrollimage{
position: absolute;
right: 1%;
top: 5px;
height: 40px;
width: 40px;
border: 0px solid white;
background-image:url(http://i66.tinypic.com/1zqvbes.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
-webkit-animation: blinker 4s infinite linear;
animation: blinker 4s infinite linear;
-webkit-filter:grayscale(70%);
filter:grayscale(70%);}

@-webkit-keyframes blinker{
0%{opacity:.7;}
50%{opacity:0;}
100%{opacity:.7;}
}

@keyframes blinker{
0%{opacity:.7;}
50%{opacity:0;}
100%{opacity:.7;}
}

#bottombar{
position: absolute;
left: 0px;
right: 0px;
bottom: -50px;
height: 50px;
-webkit-transition: all 1s;
transition: all 1s;
}

#bottomsection:hover #bottombar{
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
bottom: 0px;}

#bottombar:before{
content:'';
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background:black;
opacity: .3;}

#bottommenu{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
z-index: 1;
width: 600px;
height: 50px;
border: 0px solid white;
text-align: center;
box-sizing: border-box;
padding-top: 10px;
}

#bottommenu .linkish{
margin-right: 50px;
color: gray;
text-shadow: 2px 2px 4px black;
font-family: fantasy;
letter-spacing: 5px;
font-size: 13pt;
text-transform: lowercase;
cursor: default;
-webkit-transition .5s;
transition: .5s;
}

#bottommenu .linkish:hover{
color: white;
}

#bottommenu .linkish:nth-child(3){
margin-right: 0px;}

.popup{
position: absolute;
left: 0px;
right: 0px;
bottom: 50px;
margin: auto;
width: 400px;
height: 0px;
overflow: hidden;
}

.popup:before{
position: absolute;
content: '';
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: #101012;
opacity: .9;
z-index: 0;}

.popup #contents2{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
height: 200px;
width: 300px;
border: 0px solid white;
z-index: 1;
text-align: center;
font-size: 11pt;
font-family: fantasy;
text-shadow: 1px 1px 2px black;
letter-spacing: 2px;
color: gray;
box-sizing: border-box;
padding: 10px;
opacity: 0;
-webkit-transition: all 1s .3w;
transition: all 1s .3s;
}

#pop1, #pop2{
-webkit-transition: all 1s .3s;
transition: all 1s .3s;}

#bottommenu .linkish:nth-child(2):hover ~ #pop1,
#pop1:hover,
#bottommenu .linkish:nth-child(3):hover ~ #pop2,
#pop2:hover{
-webkit-transition: all 1s;
transition: all 1s;
height: 200px;
z-index:2;}

#bottommenu .linkish:nth-child(2):hover ~ #pop1 #contents2,
#pop1:hover #contents2,
#bottommenu .linkish:nth-child(3):hover ~ #pop2 #contents2,
#pop2:hover #contents2{
-webkit-transition: all 1s .5s;
transition: all 1s .5s;
opacity: 1;}

#sceneselect{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
height: 0px;
width: 0px;
background-image:url(http://i64.tinypic.com/2cctac3.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center center;
opacity: 0;
-webkit-transition:all 1s 1s, opacity 1s, z-index 1s 1s;
transition: all 1s 1s, opacity 1s, z-index 1s 1s;
}

#bottommenu .linkish:nth-child(1):hover ~ #sceneselect{
-webkit-transition: all 0s 0s, opacity 1s .2s, z-index 1s;
transition: all 0s 0s 0s, opacity 1s .2s, z-index 1;
height: 90%;
width: 100%;
opacity: 1;
}

#audiocontainer{
overflow: hidden;
height: 31px;
width: 32px;
opacity: .6;
left: 258px;
top: -24px;
position: relative;}

#contents2 br{
line-height: 20px;}

</style>

<div id="whole">

<div id="second">
</div>
<div id="choosesooth">
<div id="choosesooth2">
<div id="soothimage">
</div>
<div id="soothimage2">
</div>


<div id="emptycontainer">
<div id="practicebox">
 <div id="backgroundfiller">
 </div>
 <div id="wireframe">
 </div>
 <div id="textinfo">
soothsayer
 <font class="smalls"><br>
<a href="#choosesooth2"> the heralding beast</a> / <a href="#choosesooth">the ominous hunter</a>
 </font>
 </div>
</div>

<div id="soothbox">
<div id="contents">
<b>Though the hunter himself is ever elusive,</b> it is his task to pursue those who would think to escape their destiny or remain ignorant of it. The hand of fate can work through many mechanisms, but so too can the mind of a particularly difficult person through whose fingers the strings of <b>fate</b> happen to pass. It is thereby this Herald's <b>charge</b> to keep the gears turning. To ensure that each actor plays the part for which they were selected...<br><br>
Or, as has happened in some chapters of the long tale of the world, to exit the stage entirely.
</div>
</div>

<div id="soothbox2">
<div id="contents">
<b>The speaker of destiny</b>, Soothsayer is the beast through whom <b>the true path's writ</b> is often transcribed. His presence is a <b>fixture</b> in the universe, though it is rumored that once he was <b>a man</b> who simply craved to know the secrets of it. A man who would claim <b>the knowledge of time in its entirety</b>, who was not contented by a religious assurance that would have him rely on the words of books scribed by ancients. That, if ever it was the case, was very long ago... For now there is only <b>The Herald</b>, the creature and <b>sage</b> to whom those would would <b>claim</b> their destiny must come to know the path to it.<br><br>
<b>Legendary swords</b> that would name a King, <b>great spells</b> that would revive an ailing loved one, <b>armor</b> and <b>an army</b> that could subdue an entire kingdom; these items are known to him. Their <b>abilities</b>, their <b>history</b>, even their <b>current location</b>. These things he can tell you, though the resulting outcome of any tale is <b>rarely ever</b> laid bare to the one would take it... <br><br>
For it is a <b>fool</b> who comes to seek his knowledge ill-prepared, but then fools too are roles that must be filled. All men are agents through which the will of the universe will act, and it is <b>Soothsayer's</b> task to ensure this.
</div>
</div>

</div>

<div id="bottomsection">

<div id="scrollimagecontainer">
<div id="scrollimage">
</div></div>

<div id="bottombar">
<div id="bottommenu">
<a href="#none" class="linkish" style="text-decoration:none;">scene</a>
<a href="#none" class="linkish" style="text-decoration:none;">music</a>
<a href="#none" class="linkish" style="text-decoration:none;">ooc</a>

<div class="popup" id="pop1">
<div id="contents2" style="padding-top: 40px; text-align: left;">
// Fever Ray - If I Had A Heart //<div id="audiocontainer"><audio controls src="http://puu.sh/r0fSW/6bc0a16a39.mp3" loop=3></audio></div>
<br>
// Kenji - Spirited Away //<div id="audiocontainer"><audio controls src="http://puu.sh/r0eYj/ec83ee8019.mp3" loop=3></audio></div>
</div>
</div>

<div class="popup" id="pop2">
<div id="contents2">
Click any of the buttons below to reset the main content areas.<br><br>
All images used in this profile are owned by myself and their respective artists. All music is credited to the artists.<br><br>
Code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" style="color:gray;" target=_blank>my own</a>.
</div>
</div>

<div id="sceneselect">
</div>

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


</div>
</div>

</div>