Rico Update

<style>

#whole{
 position: fixed;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-image:url(http://i64.tinypic.com/2ppc809.jpg);
 background-size: auto 50%;
 background-color: #111317;
}

@font-face{
 font-family:'font1';
 src:url(https://dl.dropboxusercontent.com/s/t9at4dycupzi76a/Pixel%20Countdown.ttf?dl=0);
}

@font-face{
 font-family:'font2';
 src:url(https://dl.dropboxusercontent.com/s/94hr6y0cm4un4at/secuencia.ttf?dl=0);
}

@font-face{
 font-family:'font3';
 src:url(https://dl.dropboxusercontent.com/s/y5k1xc915u885x0/alarm%20clock.ttf?dl=0);
}

#centerhost{
 position: absolute;
 height: 610px;
 width: 310px;
 border: 0px solid white;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 overflow: hidden;
 -webkit-transition: all 2s;
 transition: all 2s;
}


 .centerimage{
 position: absolute;
 left: 5px;
 top: 5px;
height: 600px;
 width: 300px;
 background: gray;
 border-radius: 160px 160px 160px 160px;
 box-shadow: 3px 3px 6px 3px black;
 border: 1px solid pink;
 overflow: hidden;
 -webkit-transition: all 2s;
 transition: all 2s;
 z-index: 5;
}

#visfilter{
position: absolute;
top: -500px;
left: -500px;
right: -500px;
bottom: -500px;
background-image:url(http://i65.tinypic.com/298z6o.jpg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
opacity: .3;
-webkit-animation: visanim .03s infinite;
animation: visanim .03s infinite;
}

@-webkit-keyframes visanim{
0%{opacity:.6;}
100%{opacity:1;}
}

@keyframes visanim{
0%{opacity:.6;}
100%{opacity:1;}
}

#selection1:target #visfilter,
#selection2:target #visfilter,
#selection3:target #visfilter,
#selection4:target #visfilter{
-webkit-animation: none;
animation: none;
opacity: .5 !important;}

#pictureinpicture{
 position: absolute;
 top: 0px;
 left: -100px;
 right: -100px;
 bottom: -100px;
 background-image:url(http://i67.tinypic.com/11ug6td.jpg);
 background-repeat: no-repeat;
 background-size: 600px auto;
 background-position: center top;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#selection1:target #centerhost,
#selection2:target #centerhost,
#selection3:target #centerhost,
#selection4:target #centerhost{
 -webkit-transition: all 2s;
 transition: all 2s;
 height: 700px;
 width: 700px;
}

#selection1:target .centerimage,
#selection2:target .centerimage,
#selection3:target .centerimage,
#selection4:target .centerimage{
 -webkit-transition: all 2s, width 2s 1s ease-in;
 transition: all 2s, width 2s 1s ease-in;
 border-radius: 0px 0px 0px 0px;
 width: 500px;
 height: 100px;
 top: 200px;
 left: 100px;
}

#selection1:target .centerimage #pictureinpicture,
#selection2:target .centerimage #pictureinpicture,
#selection3:target .centerimage #pictureinpicture,
#selection4:target .centerimage #pictureinpicture{
 left: -200px;
 top: -100px;
 -webkit-transition: all 2s, left 2s 1s ease-in;
 transition: all 2s, left 2s 1s ease-in;
}

#selectionmenu{
position: absolute;
 top: 330px;
 left: 30px;
height: 30px;
width: 650px;
text-align: center;
 border: 0px solid white;
letter-spacing: 3px;
word-spacing: 10px;
color: white;
box-sizing: border-box;
padding-top:5px;
color: pink;
 opacity: 0;
-webkit-transition: all .5s;
transition: all .5s;}

#selectionmenu a{
 height: 30px;
 letter-spacing: 2px;
 font-size: 10pt;
 font-family: 'font1', 'Times', Arial;
 background: #AE6573;
 box-sizing: border-box;
 padding-left: 20px;
 padding-right: 20px;
 color: black;
 text-decoration: none;
 font-weight: 600;
 -webkit-transition: all 1s;
 transition: all 1s;
 border: 2px solid transparent;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 1;
}

#selectionmenu a:hover,
#selection1:target #selectionmenu :nth-child(1),
#selection2:target #selectionmenu a:nth-child(2),
#selection3:target #selectionmenu a:nth-child(3),
#selection4:target #selectionmenu a:nth-child(4){
 background: transparent;
 color: #AE6573;
 border: 2px solid pink;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#selection1:target #selectionmenu,
#selection2:target #selectionmenu,
#selection3:target #selectionmenu,
#selection4:target #selectionmenu{
 -webkit-transition: all 1s 1.3s;
 transition: all 1s 1.3s;
 opacity: 1;
}

#contentarea,
#contentarea2,
#contentarea3,
#contentarea4{
 position: absolute;
 top: 380px;
 left: 100px;
 width: 500px;
 height: 0px;
 border: 0px solid white;
 opacity: 0;
 -webkit-transition: all .5s;
 transition: all .5s;

}

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


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


#selection1:target #contentarea,
#selection2:target #contentarea2,
#selection3:target #contentarea3,
#selection4:target #contentarea4{
 -webkit-transition: all 1s 1s;
 transition: all 1s 1s;
 opacity: 1;
 height: 150px;
}

#contentarea:before,
#contentarea2:before,
#contentarea3:before,
#contentarea4:before{
 content:'';
 position:absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: #AE6573;
 opacity: .8;
 z-index: -1;
}

.contents{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 color: black;
 text-align: left;
 font-family: 'font2', 'Times', Arial ;
 font-size: 12pt;
 letter-spacing: 1px;
 box-sizing: border-box;
 padding: 5px;
 overflow: auto;
}


/* HEXAGON */

.hexagon {
 position: fixed;
 top: 20px;
 right: 20px;
 width: 50px;
 height: 28.87px;
 background-color: #B07395;
 margin: 14.43px 0;
 -webkit-animation: hexanimation 6s infinite;
 animation: hexanimation 6s infinite;
}

.hexagon:before,
.hexagon:after {
 content: "";
 position: absolute;
 width: 0;
 border-left: 25px solid transparent;
 border-right: 25px solid transparent;
}

.hexagon:before {
 bottom: 100%;
 border-bottom: 14.43px solid #B07395;
}

.hexagon:after {
 top: 100%;
 width: 0;
 border-top: 14.43px solid #B07395;
}

@-webkit-keyframes hexanimation{
 0%{transform:rotate(0deg);
 -webkit-transform:rotate(0deg);}
 25%{transform:rotate(90deg);
 -webkit-transform:rotate(90deg);}
 50%{transform:rotate(180deg);
 -webkit-transform:rotate(180deg);}
 75%{transform:rotate(270deg);
 -webkit-transform:rotate(270deg);}
 100%{transform:rotate(360deg);
 -webkit-transform:rotate(360deg);}
}

@keyframes hexanimation{
 0%{transform:rotate(0deg);
 -webkit-transform:rotate(0deg);}
 25%{transform:rotate(90deg);
 -webkit-transform:rotate(90deg);}
 50%{transform:rotate(180deg);
 -webkit-transform:rotate(180deg);}
 75%{transform:rotate(270deg);
 -webkit-transform:rotate(270deg);}
 100%{transform:rotate(360deg);
 -webkit-transform:rotate(360deg);}
}

#audiohold{
 position: fixed;
 top: 10px;
 right: 10px;
 z-index: 2;
 height: 70px;
 width: 70px;
 border: 0px solid white;
 overflow: hidden;
}
#audiohold *{
 position: relative;
 zoom:320%;
 opacity: 0;
 left: -5px;
 top: -4px;
}

#audiodrop{
 position: fixed;
 height: 25px;
 width: 0px;
 background: transparent;
 top: 85px;
 right: 10px;
 -webkit-transition: all 1s;
 transition: all 1s;
 overflow: hidden;
 opacity: 0;
 color: #AE6573;
 border-top: 1px solid transparent;
 border-bottom: 1px solid transparent;
 font-family: 'font3', 'Times', Arial;
 text-align: center;
 font-size: 10pt;
}

#audiodrop b{
 position: absolute;
 width: 200px;
 left: 0px;
 top: 10px;
}

#audiohold:hover ~ #audiodrop{
 opacity: 1;
 width: 200px;
 border-color: pink;
}

#titlediv{
 position: absolute;
 top: 161px;
 height: 51px;
 width: 500px;
 left: 130px;
 font-family: 'font3', 'Times', Arial;
 border: 0px solid white;
 z-index: 6;
 color: pink;
 text-align: right;
 text-shadow: 2px 2px 4px black;
 font-size: 30pt;
 z-index: 0;
 opacity: 0;
 -webkit-transition: all 1s .2s, opacity .3s;
 -webkit-transition: all 1s .2s, opacity .3s;
 text-transform: uppercase;
}

#selection1:target #titlediv,
#selection2:target #titlediv,
#selection3:target #titlediv,
#selection4:target #titlediv{
 -webkit-transition: all 1s 1s, opacity 1s 1.5s;
 transition: all 1s 1s, opacity 1s 1.5s;
 opacity: 1;
 z-index: 6;
}

@-webkit-keyframes letvanish{
 0%{
 opacity:0;
 }
 50%{
 opacity: 1;
 }
 100%{
 opacity:0;
 }
}

@keyframes letvanish{
 0%{
 opacity:0;
 }
 50%{
 opacity: 1;
 }
 100%{
 opacity:0;
 }
}

#titlediv a{
 -webkit-animation: letvanish 2s infinite;
 animation: letvanish 2s infinite;
 text-decoration: none;
 color: white;
}

/* HEXAGON -- END */

#centerhost{
-webkit-filter:grayscale(80%);
 filter:grayscale(80%);
 right: 400px;
}

#introdiv{
 position: absolute;
 left: 250px;
 top: 40px;
 bottom: 0px;
 right: 0px;
 margin: auto;
 height: 400px;
 width: 300px;
 border: 0px solid white;
 text-align: left;
 box-sizing: border-box;
 color: pink;
 font-family:'font3', 'Times', Arial;
 font-size: 15pt;
 text-transform: uppercase;
 line-height: 30px;
 -webkit-transition: all 1s 2s;
 transition: all 1s 2s;
}

#introdiv a{
 font-weight: 600;
 color: pink;
 text-decoration: none;
}

#whole:hover #introdiv a{
 -webkit-animation: letvanish 1s infinite;
 animation: letvanish 1s infinite;
}

#introdiv a:hover{
 text-decoration: underline;
}

#selection1:target #introdiv,
#selection2:target #introdiv,
#selection3:target #introdiv,
#selection4:target #introdiv{
 -webkit-transition: all .5s;
 transition: all .5s;
 opacity: 0;
}

#selection1:target #centerhost,
#selection2:target #centerhost,
#selection3:target #centerhost,
#selection4:target #centerhost{
 -webkit-filter:grayscale(0%);
 filter:grayscale(0%);
 right: 0px;
 z-index: 2;
}

.contents a{
 font-weight:600;
 text-decoration: none;
 color: black;
 -webkit-animation: letvanish 1s infinite;
 animation: letvanish 1s infinite;
}

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

</style>

<div id="whole">

 <div id="selection1">
 <div id="selection2">
 <div id="selection3">
 <div id="selection4">
 <div id="centerhost">

 <div id="titlediv">
 DOSSIER: RICOCHET<a href=#none>_</a>
 </div>

 <div class="centerimage">
 <div id="pictureinpicture">
<div id="visfilter">
</div>
 </div>
 </div>
 <div id="selectionmenu">
 |
 <a href="#selection1">Vitals</a> |
 <a href="#selection2">Bio</a> |
 <a href="#selection3">Gear</a> |
 <a href="#selection4">ooc</a> |
 </div>

 <div id="contentarea">
 <div class="contents">
<b>Handle</b>: Ricochet<br>
<b>AKA</b>: Rico<br>
<b>Profession</b>: Mercenary<br>
<b>Job Specialty</b>: Assassination - Infiltration - Espionage - Interrogation<br>
<b>Job Knowledge</b>: Demolition - Hacking - Abduction - Escort<br>
<b>Price</b>: Negotiable<br>
<b>Payment</b>: 50% Up front, 50% upon completion<br>
<center><hr color="#000000"><br>
<b>OFF THE RECORD</b></center><br><br>
<b>Proper name</b>: Roxanne<br>
<b>Age</b>: 27<br>
<b>Gender</b>: Female<br>
<b>Height</b>: 5'7<br>
<b>Species</b>: Lapine (possible hybrid)<br>
<b>Orientation</b>: Whatever the job calls for<br>
 </div>
 </div>

 <div id="contentarea2">
 <div class="contents">
Ricochet specializes in covert operations, or in more specific terms, missions where she is not meant to directly engage hostile forces. She much prefers viewing targets through the scope of her rifle, or from the deeply shadowed corner of an unlit room. She does not have any formal combat training, but what she lacks in this she more than makes up for it in her ingenuity in coming up with escape plans.<br><br>
Potential employers will find Ricochet quite easy to work with, as she is quite personable when talking business. She also works well in team situations, as her skill set allows her to provide reconnaissance for others, as well as suppression and cover fire.<br>
<center><hr color="#000000"><br>
<b>OFF THE RECORD</b></center><br><br>
Ricochet, born Roxanne, is a woman who prides herself on her own strength and independence. She is, after all, a mercenary for hire, typically working outside the law in cases where the law itself is being used for wrongdoing. Sometimes, however, it's just a job to make money to ensure she has some way of living. What she never speaks about is WHY she chose to go into this line of work, and how much her attitude and job are mostly just to cover up her own insecurities and weaknesses.<br><br>
Roxanne, because of the strange mutation that caused her to grow horns, was thought to be illegitimate by her father, and to make amends for the assumed infidelity of her mother, was sold off into slavery. It was never discovered who her true father was, and to this day she doesn't know why she has those horns. All she knows is that her early life was miserable, and while she is so ashamed of it, she can't fully separate herself from the mindset it gave her. She does not see herself as strong, or powerful, and in truth she doesn't believe she is making an impact on the world, all because she was made to feel she was weak and worthless, just to keep her obedient. In a way, by becoming a mercenary, she is maintaining her obedience to whoever hires her, only now, at least she gets paid for it.<br><br>
She was fortunate to eventually be bought by someone not looking to exploit her, and instead began teaching her more useful life skills. From there, she began to work her way into her new life. She started a rumor that her father was a demon in order to explain the horns. After all, what known species has females with horns that large? She may have subconscious doubts about herself, but she will rarely let it show.
 </div>
 </div>

 <div id="contentarea3">
 <div class="contents">
<b>Ocular Implant</b>: This augment is for quickly identifying targets, threats, and other items of significance. It can view multiple spectrums, including infrared, ultraviolet, magnetic fields, and more. One eye is left natural to ensure she isn't entirely blinded in the event of an EMP.<br><br>
<b>Tactical Rifle</b>: Mainly used as a sniping weapon, it is outfitted with a long range scope, various forms of target acquisition, options for sound and heat suppression to maintain stealth, as well as the capability of being modified for a wide variety of rounds, from standard bullets, energy based ammunition, and even darts for non-lethal threat suppression.<br><br>
<b>Energy Baton</b>: Basic close-range armament for emergency situations. Designed to quickly incapacitate enemies to allow escape, but can also be used to overload electrical equipment. Comprised of two chargeable wands which can be extended into a staff, or separated into two short batons.<br><br>
<b>Augment Suit</b>: Designed as a low profile exo-skeleton for the purpose of increasing physical abilities, such as running speed, jumping height, lifting power, etc. Also allows for various armor attachments. Powered by liquid energy cells, and is used to power other equipment when needed.
 </div>
 </div>

 <div id="contentarea4">
 <div class="contents">﴾●﴿ Code by <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank>only the most awesome dude and friend ever!</a><br>
﴾●﴿ Seeking serious story driven RP, anything naughty should be earned within the context therein.<br>
﴾●﴿ All RP is mood dependent.<br>
﴾●﴿ <br>


 </div>
 </div>

 </div>


<div id="introdiv">
 USERNAME: XXXXX _<br><br>

 PASSWORD: XXXXX _<br><br>
 ACCESS GRANTED<br><br>
 ENTER PARAMETERS: MERCENARY _<br><br>
 SEARCHING . . .<br><br>
 TOP RESULT: <a href="#selection1">RICOCHET</a> _
 </div>


 <div class="hexagon">
 </div>
 <div id="audiohold">
 <audio controls src="http://k003.kiwi6.com/hotlink/656wyj6z6b/09_Scorpions_VOLUME.mp3" loop=3>
 </audio>
 </div>

 <div id="audiodrop">
 <b> SCORPIONS - NERO</b>
 </div>

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