Solovin 9/28/16

<style>


@import url(//fonts.googleapis.com/css?family=Poiret+One|Herr+Von+Muellerhoff|Audiowide);


body{background-image:url(http://www.gainesvilleconnect.com/images/footer-patterns/footer-pattern-03.png);
background-size: auto 100%;
background-color: gray;
}

#whole{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-image:url(http://i64.tinypic.com/fyd09g.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: bottom -15px left 10%;}

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

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

}



@font-face{
src:url(https://dl.dropboxusercontent.com/u/4556289/FOY1CND.TTF);
font-family:'titlefont';}

@font-face{
src:url(https://dl.dropboxusercontent.com/u/4556289/Saniretro.ttf);
font-family:'bodyfont';}

#titlediv{
position: absolute;
top: 20%;
left: 0px;
right: 0px;
margin: auto;
height: 40px;
width: 200px;
font-family:'titlefont', Times, Arial;
text-decoration: none;
letter-spacing: 5px;
font-size: 100pt;
color: black;
text-shadow: 2px 2px 5px #FED76E;}

#bodyoftext{
position: relative;
top: 0px;
left: 0px;
height: 200px;
width: 447px;
text-align: justify;
color: #FED76E;
text-shadow: 0px 0px 7px black;
font-size: 12pt;
font-family: 'bodyfont', 'Times';
border-left: 5px solid black;
border-right: 1px solid black;
overflow: auto;
box-sizing: border-box;
padding-left: 5px;
padding-right: 5px;
letter-spacing: 2px;
}

/* CONTENT AREA */

#linkcontainer{
position: relative;
 top: 5px;
 left: 6px;
 height: 35px;
 width: 435px;
 box-sizing: border-box;
 border-bottom: 1px solid #737373;
 border-top: 1px solid #737373;
}

#linkcontainer:before{
 content:'';
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: silver;
 z-index: -1;
 opacity: .6;
}

.droplink{
 float: left;
 margin-right: 0px;
 height: 28px;
 width: 145px;
 text-align: center;
 -webkit-transition: all 1s;
 transition: all 1s;
 color: black;
 box-sizing: border-box;
 padding-top: 0px;
box-sizing: border-box;
 border-bottom: 1px solid transparent;
 -webkit-transition: all 1s;
 transition: all 1s;
 text-decoration: none;
font-family:'titlefont', Times;
overflow: hidden;
letter-spacing: 5px;
color: #FED76E;
text-shadow: 2px 2px 3px black;

}

.droplink b{
position: relative;
 font-size: 18pt;
 font-weight: 800;
top: -4px;}

.droplink:hover{
 background: silver;
}

#contentbox{
 position: relative;
 left: -5px;
 top: 0px;
 height: 0px;
width: 446px;
 border-bottom: 1px solid #737373;
 overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#contentbox:before{
 content:'';
 position: absolute;
 top: 5px;
 left: 5px;
 right: 5px;
 bottom: 5px;
 background: silver;
 opacity: .6;
}

.contentboxed{
 position: absolute;
 top: 5px;
 left: 0px;
 right: 0px;
 bottom: 5px;
 overflow: auto;
 z-index: 0;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
 box-sizing: border-box;
 padding: 5px;
 border-left: 5px solid black;
font-size: 12pt;
font-family:'bodyfont';
text-shadow: 0px 0px 0px black;
color: black;
letter-spacing: 1px;
text-align: left;
}

.contentboxed a{
text-decoration: none;
color: black;
text-shadow: 0px 0px 8px #FED76E;
font-weight: 600;}

#firstlinked{
line-height: 20px;
letter-spacing: 2px;}

#secondlinked{
text-align: left;}

#statbox{
float: left;
height: 20px;
width: 49%;
text-align: center;}

#statboxafter{
float: left;
content:'-';
right: 0px;
height: 20px;
width: 5px;
font-size: 8pt;
font-weight: 800;
}

#link1st:target ~ #linkcontainer,
#link2nd:target ~ #linkcontainer,
#link3rd:target ~ #linkcontainer{
 border-bottom: 1px solid transparent;
}

#link1st:target ~ #linkcontainer .droplink,
#link2nd:target ~ #linkcontainer .droplink,
#link3rd:target ~ #linkcontainer .droplink{
 -webkit-transition: all 1s;
 transition: all 1s;
 border-bottom: 3px solid #7E7E7E;
}

#link1st:target ~ #linkcontainer #firstlink,
#link2nd:target ~ #linkcontainer #secondlink,
#link3rd:target ~ #linkcontainer #thirdlink{
 border-bottom: 1px solid transparent;
}

#link1st:target ~ #linkcontainer #firstlinked,
#link2nd:target ~ #linkcontainer #secondlinked,
#link3rd:target ~ #linkcontainer #thirdlinked{
 -webkit-transition: all 1s, opacity 1s .5s;
 transition: all 1s, opacity 1s .5s;
 z-index: 1;
 opacity: 1;
}

#link1st:target ~ #linkcontainer #contentbox,
#link2nd:target ~ #linkcontainer #contentbox,
#link3rd:target ~ #linkcontainer #contentbox{
 -webkit-transition: all 1s;
 transition: all 1s;
 height: 105px;
border-bottom: 1px solid silver;
}

/* CONTENT AREA -- END */

/* MUSIC CONTAINER */

#musiccontainer{
 position: absolute;
 top: 10px;
 right: 10px;
 height: 24px;
 width: 23px;
 border: 0px solid black;
background: silver;
-webkit-transition: all 1s;
transition: all 1s;
overflow: hidden;
border-radius: 3px 3px 3px 3px;
 opacity: .8;
}

#musiccontainer:hover{
-webkit-transition: all 2s ease-out;
transition: all 2s ease-out;
width: 200px;}

#playerhold{
 position: absolute;
 right: 0px;
 top: 0px;
 height: 24px;
 width: 200px;
 border: 0px solid black;
overflow: hidden;
}

#playerholdzoom{
right: 0px;
 position: absolute;
 height: 115%;
 width: 24px;
 border: 0px solid red;
 overflow: hidden;
margin-left: -12px;
margin-top: -4px;
}

#detailshold{
 position: absolute;
 right: 24px;
 top: 0px;
 height: 20px;
 width: 180px;
 font-family: 'Audiowide';
 font-size: 11pt;
 letter-spacing: 3px;
 color: black;
box-sizing: border-box;
padding-left: 2px;
padding-top: 2px;
color: #21232A;
overflow: hidden;
text-transform: uppercase;
}

#detailshold b{
color: black; }



</style>

<div id="whole">

<div id="titlediv">
<a href="#none" style="text-decoration:none; color:black;">SOLOVIN</a>

<div id="bodyoftext">
A Kirin mercenary with a fairly high-minded sense of justice, Solovin finds himself at odds with a job that he's more than a natural fit for as far as his physical capabilities. Rather than allowing this to limit his sense of self, he's decided to continue his profession with a very select set of requirements for his hiring while aiming to outperform anyone else in the field.<br><br>
Due to his these convictions and the flair that he accomplishes any task with, he's gained a nickname as 'THE KIRO (kee-roh)', or Kirin Hero. While laughing it off or openly resisting the moniker in public, Solovin is privately pleased with the title as his inspiration for this actually comes from a mix of respect for his ancestral traits and an admiration for classical Super Heroes in comic books. While the two subjects are actually somewhat juxtaposed to glance at in comparison, the mercenary feels that there's a nicely paired symmetry in the goals of the two that simply comes off differently to most readers.<br><br>
In this fusion he has found his way through life -- to spread hope and affection around him while avoiding giving injury at any time not necessary... and when it is necessary, to be as brutal and direct as possible to ensure the recipient either cannot, or has no interest in, harming anyone again.
</div>

 <div id="link1st">
</div>
<div id="link2nd">
</div>
<div id="link3rd">
</div>
<div id="linkcontainer">
 <a class="droplink" id="firstlink" href="#link1st">
<b> stats</b>
 </a>
 <a class="droplink" id="secondlink" href="#link2nd">
<b> rules</b>
 </a>
 <a class="droplink" id="thirdlink" href="#link3rd">
<b> ooc</b>
 </a>

<div id="contentbox">
 <div class="contentboxed" id="firstlinked">

<div id="statbox">
Species
</div>
<div id="statboxafter">
╳
</div>
<div id="statbox">
Kirin
</div>

<div id="statbox">
Gender
</div>
<div id="statboxafter">
╳
</div>
<div id="statbox">
Male
</div>

<div id="statbox">
Height
</div>
<div id="statboxafter">
╳
</div>
<div id="statbox">
9'0"
</div>

<div id="statbox">
Build
</div>
<div id="statboxafter">
╳
</div>
<div id="statbox">
Heavy / Muscular
</div>

<div id="statbox">
Orientation
</div>
<div id="statboxafter">
╳
</div>
<div id="statbox">
Pansexual
</div>

<div id="statbox">
Disposition
</div>
<div id="statboxafter">
╳
</div>
<div id="statbox">
Confident
</div>
<div id="statbox">
</div>
<div id="statbox">
'Heroic'
</div>
<div id="statbox">
</div>
<div id="statbox">
Affectionate
</div>

<div id="statbox">
Profession
</div>
<div id="statboxafter">
╳
</div>
<div id="statbox">
Mercenary
</div>

 </div>

 <div class="contentboxed" id="secondlinked">
 <ul>
<li>Sex isn't going to happen.</li>
<li>I prefer story-based play.</li>
</ul>

 </div>
 <div class="contentboxed" id="thirdlinked">
<ul>
<li> Code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank>mine</a>. Please don't steal.</li>
<li>Art is owned. Artist is <a target="_blank" href="http://furaffinity.net/user/joojoo" target=_blank>JooJoo.</a></li>
<li>Music is <a target="_blank" href="https://youtu.be/X70VMrH3yBg" target=_blank>Boom Boom.</a></li>.
</ul>
 </div>
 </div>

</div>


</div>

</div>


<div style="zoom:150%;">
 <div id="musiccontainer">
 <div id="playerhold">
 <div id="playerholdzoom">

 <audio controls src=" https://puu.sh/rqMLs/10738413f8.mp3" style="margin-left:-4px;">
</audio>

 </div>
 </div>
 <div id="detailshold">
 <div id="marqueeholder">
 <marquee direction="left" scrollamount="5">
<b>J</b>OHN <b>L</B>EE <b>H</b>OOKER // <b>BOOM BOOM</b>
 </marquee>
</div>
</div>
</div>