Dash 10/15/16

<style>

body{
 background: #A62F43;
}

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

::-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: #511B1A;
}

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

#wholecolor{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: blue;
 opacity: 0.1;
}

#centerhost{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 645px;
 width: 530px;
 border: 0px solid black;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#dashimage{
 position: absolute;
 margin-top: 5px;
 margin-left: 5px;
 height: 600px;
 width: 400px;
 background-image:url(http://i63.tinypic.com/iwtzxh.jpg);
 background-repeat: no-repeat;
 background-size: auto 109%;
 background-position: center;
 box-shadow: 1px 1px 5px 2px black;
}

.glasspanels{
 position: absolute;
 margin-top: 5px;
 margin-left: 6px;
 height: 600px;
 width: 30px;
 border: 0px solid black;
 background-image:url(http://i39.tinypic.com/2djcjtd.png);
 background-size: auto 100%;
 box-shadow: 2px 2px 5px black;
 -webkit-transition: all 2s;
 transition: all 2s;
 box-sizing: border-box;
 -webkit-transition: all 1s;
 transition: all 1s;
 overflow: hidden;
}

.glasspanels:nth-child(2){
 margin-left: 415px;
 background-position: left;
}

.glasspanels:nth-child(3){
 margin-left: 450px;
 background-position: center;
}

.glasspanels:nth-child(4){
 margin-left: 485px;
 background-position: right;
}

.glasspanels:before{
 position: absolute;
 content:'';
 height: 100%;
 width: 100%;
 background: #BACEB8;
 opacity: .9;
 z-index: -1;
}

.glassreset{
 position: absolute;
 top: 610px;
 left: 5px;
 width: 400px;
 height: 5px;
 background: silver;
 box-sizing: border-box;
 box-shadow: 0px 0px 3px 1px black;
}

.glassbottom{
 position: absolute;
 top: 610px;
 height: 5px;
 width: 30px;
 background: silver;
 box-sizing: border-box;
 box-shadow: 0px 0px 3px black;
 -webkit-transition: all 1s;
 transition: all 1s;
}

.glassbottom:hover{
 -webkit-transition: all 1s;
 transition: all 1s;
 background: white;
}

.glassreset:hover{
 -webkit-transition: all 1s;
 transition: all 1s;
 background: white;
}

.glassbottom:nth-child(5){
 margin-left:415px;
}

.glassbottom:nth-child(6){
 margin-left: 450px;
}

.glassbottom:nth-child(7){
 margin-left: 485px;
}

#div1:target ~ #centerhost .glasspanels:nth-child(2),
#div1:target ~ #centerhost .glassbottom:nth-child(5),
#div2:target ~ #centerhost .glasspanels:nth-child(3),
#div2:target ~ #centerhost .glassbottom:nth-child(6),
#div3:target ~ #centerhost .glasspanels:nth-child(4),
#div3:target ~ #centerhost .glassbottom:nth-child(7){
 width: 220px;
}

#div1:target ~ #centerhost .glassbottom:nth-child(5),
#div2:target ~ #centerhost .glassbottom:nth-child(6),
#div3:target ~ #centerhost .glassbottom:nth-child(7){
 background: white;
}

#div1:target ~ #centerhost .glasspanels:nth-child(3),
#div1:target ~ #centerhost .glassbottom:nth-child(6){
 margin-left: 640px;
}

#div1:target ~ #centerhost .glasspanels:nth-child(4),
#div1:target ~ #centerhost .glassbottom:nth-child(7),
#div2:target ~ #centerhost .glasspanels:nth-child(4),
#div2:target ~ #centerhost .glassbottom:nth-child(7){
 margin-left: 675px;
}

#div1:target ~ #centerhost,
#div2:target ~ #centerhost,
#div3:target ~ #centerhost{
 width: 720px;
}

.divcontainer{
 position: absolute;
 top: 2px;
 left: 2px;
 height: 595px;
 width: 215px;
 overflow: auto;
 box-sizing: border-box;
 border: 0px solid black;
 opacity: 0;
 -webkit-transition: all .7s;
 transition: all .7s;
 font-family:'bodyfont', Times, Arial;
 font-size: 13pt;
 text-align: justify;
 padding-right: 6px;
}

#div1:target ~ #centerhost .glasspanels:nth-child(2) .divcontainer,
#div2:target ~ #centerhost .glasspanels:nth-child(3) .divcontainer,
#div3:target ~ #centerhost .glasspanels:nth-child(4) .divcontainer{
 -webkit-transition: all 1s .8s;
 transition: all 1s .8s;
 opacity: 1;
}

.placemarker{
 position: absolute;
 top: 620px;
 left: 5px;
 width: 400px;
 height: 21px;
 z-index: -1;
 border: 0px solid black;
 background: silver;
 box-shadow: 1px 1px 3px black;
 -webkit-transition: all 1s;
 transition: all 1s;
 font-family:'bodyfont', Times, Arial;
 font-size: 14pt;
 letter-spacing: 10px;
 text-align: center;
 font-weight: 800;
 opacity: 0;
}

#div1:target ~ #centerhost .placemarker:nth-child(9),
#div2:target ~ #centerhost .placemarker:nth-child(10),
#div3:target ~ #centerhost .placemarker:nth-child(11)
{
 -webkit-transition: all 1s .8s;
 transition: all 1s .8s;
 opacity:1;
z-index: 1;}

.glasspanels:nth-child(3) .divcontainer a{
 display: block;
 position: relative;
 background-image:url(http://i68.tinypic.com/2jbwnjp.jpg);
 background-size:400px;
 background-position: left;
 background-repeat: no-repeat;
 width: 200px;
 height: 55px;
 margin-left: 5px;
 margin-bottom: 10px;
 margin-top: 10px;
 overflow: hidden;
 border-radius: 5px 5px 5px 5px;
 -webkit-filter:grayscale(90%);
 filter:grayscale(90%);
 -webkit-transition: all 1s;
 transition: all 1s;
}

.glasspanels:nth-child(3) .divcontainer a:hover{
 -webkit-filter:grayscale(0%);
 filter:grayscale(0%);
 margin-top: 25px;
 margin-bottom: 25px;
}

.glasspanels:nth-child(4) .divcontainer{
 padding-left: 10px;
 padding-top: 15px;
 padding-right: 10px;
}

.glasspanels:nth-child(4) .divcontainer a{
 text-decoration: none;
 color: black;
 font-style: italic;
}

.glasspanels:nth-child(4) .divcontainer a:hover{
 text-decoration: underline;
}

/* MUSIC CONTAINER */

#musiccontainer{
 position: absolute;
 top: 10px;
 right: 10px;
 height: 24px;
 width: 23px;
 border: 0px solid black;
background: #BACEB8;
-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: 'bodyfont', Times, Arial;
 font-size: 11pt;
 letter-spacing: 3px;
 color: black;
box-sizing: border-box;
padding-left: 2px;
padding-top: 4px;
color: #21232A;
overflow: hidden;
text-transform: uppercase;
}

#detailshold b{
color: black; }

.linkdiv{
position: absolute;
display: block;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 10;}

#div1:target ~ #centerhost .glasspanels:nth-child(2) .linkdiv,
#div2:target ~ #centerhost .glasspanels:nth-child(3) .linkdiv,
#div3:target ~ #centerhost .glasspanels:nth-child(4) .linkdiv{
display: none;
}

.glasspanels:nth-child(2):hover ~ .glassbottom:nth-child(5),
.glasspanels:nth-child(3):hover ~ .glassbottom:nth-child(6),
.glasspanels:nth-child(4):hover ~ .glassbottom:nth-child(7){
background: white;}

.glasspanels:nth-child(2) .divcontainer{
text-align: center;
overflow-x: hidden;
overflow-y: auto;}

.glasspanels:nth-child(2) .divcontainer a{
color: black;
text-decoration: none;
font-weight: 600;}

.glasspanels:nth-child(2) .divcontainer a:hover{
text-decoration: underline;}

.headerdiv{
position: relative;
text-align: left;
font-family:'bodyfont';
font-weight: 600;
color: black;
height: 20px;
width: 213px;
margin-left: 1.5px;
background: gray;
box-sizing: border-box;
padding-left: 3.5px;
text-align: left;
margin-top: 10px;
}

.headerfollow{
position: relative;
margin-top: -20px;
margin-left: 190px;
height: 20px;
width: 20px;
border: 0px solid black;
background: gray;
z-index: 1;
font-weight: 800;
cursor: help;}

.headerfollow2{
position: relative;
margin-top: -20px;
margin-left: 190px;
height: 20px;
width: 20px;
border: 0px solid red;
background: gray;
z-index: 2;
opacity: 1;
font-weight: 800;
cursor: help;
-webkit-transition: all 0s 999999s;
transition: all 0s 9999999s;}

.headerfollow2:active{
-webkit-transition: all 0s;
transition: all 0s;
z-index: 0;
opacity: 0;}

.headerfollow:active + .headerfollow2{
-webkit-transition: all 0s;
transition: all 0s;
opacity: 0.9 !important;
z-index: 3 !important;}

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

.headerdrop{
position: relative;
overflow: auto;
height: 0.01px;
width: 205px;
font-size: 16pt;
-webkit-transition: all 0s 99999s;
transition: all 0s 99999s;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
color: black;
box-sizing: border-box;
padding-right: 6px;
padding-left: 3px;
text-align: left;
font-family:'textfont', Times, Arial;
line-height:15px;
}

.headerfollow2:active ~ .headerdrop{
-webkit-transition: all 0s;
transition: all 0s;
height: 100px;}

.headerfollow:active ~ .headerdrop{
-webkit-transition: all 0s;
transition: all 0s;
height: .0011px;
}

.headerdrop::-webkit-scrollbar {
 width: 3px;
 background-color: transparent;
}


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

</style>

<div id="whole">

 <div id="wholecolor">
 </div>

 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
 <div id="centerhost">
 <div id="dashimage">
 </div>
 <div class="glasspanels">
 <div class="backgroundfill">
 </div>
<a class="linkdiv" href="#div1">
</a>
 <div class="divcontainer">
<div class="headerdiv">
<br>
Name</div>
Dash Cross

<div class="headerdiv">
Aliases</div>
Old Big Bad , Mr. X , Piggy Eater

<div class="headerdiv">
Age</div>
Late 30's

<div class="headerdiv">
Gender</div>
Male

<div class="headerdiv">
Species</div>
Werewolf

<div class="headerdiv">
Height</div>
6'8"

<div class="headerdiv">
Build</div>
Medium-Heavy / Athletic

<div>
<div class="headerdiv">
Partner</div>
<div class="headerfollow">
-
</div>
<div class="headerfollow2">
+
</div>
<a href="http://roleplay.chat/profile.php?user=Qii" target=_blank>Qii</a>
<div class="headerdrop">
A succubus currently (and eternally?) in control of his soul. Qii must assist Dash in his task and follow his commands when specifically stated, she's quite skilled at wiggling out of his orders. Originally contracted with the intention of completing a single assignment, the two have now become a single unit tasked with handling various supernatural orders.
</div>
</div>


<div>
<div class="headerdiv">
Personality</div>
<div class="headerfollow">
-
</div>
<div class="headerfollow2">
+
</div>
Aggressive, Confident.
<div class="headerdrop">
Aggressively sexual. Potentially narcissistic. Not entirely apathetic to the plight of others, but often very cavalier with their lives or possessions. Discreet when necessary, he is very easily irritated and occasionally quite brash. A thrill-seeker.
</div>
</div>


<div>
<div class="headerdiv">
Occupation</div>
<div class="headerfollow">
-
</div>
<div class="headerfollow2">
+
</div>
Specialist / Operator Assistant.
<div class="headerdrop">
Dash's core occupation is as an 'Assistant' to Operators, usually involving work as either a 'Cleaner' (disposal of bodies, media focus aversion) or a 'Travel Agent' (discovering target itinerary, arranging drop points). Still, when necessary he easily slips back into the role of a Specialist and, as of recently, a <b>Supernatural Specialist</b>.
</div>
</div>


<div>
<div class="headerdiv">
Skills / Talents / Abilities</div>
<div class="headerfollow">
-
</div>
<div class="headerfollow2">
+
</div>
Multi-talented.
<div class="headerdrop">
Capable of bursts of incredible speed and super-human strength, Dash's Werewolf heritage has blessed him with phenomenal reflexive abilities. Rather than a trained combatant, Dash relies on his natural instincts in a fight paired with vast experience and some medical knowledge. His skills as a Driver are second to only a small few when taking into account his endurance and ability to maintain focus during both high speed and tense situations.
</div>
</div>



 </div>
 </div>

 <div class="glasspanels">
 <div class="backgroundfill">
 </div>
<a class="linkdiv" href="#div2">
</a>
 <div class="divcontainer">
 <a target="_blank" href="http://d.facdn.net/art/thisisnotras/1469993191/1469993191.thisisnotras_dash_full.jpg" style="background-image:url(http://d.facdn.net/art/thisisnotras/1469993191/1469993191.thisisnotras_dash_full.jpg); background-position: top center;" target=_blank></a>
 <a target="_blank" href="http://d.facdn.net/art/thisisnotras/1469924445/1469924445.thisisnotras_adjvduf.png" style="background-image:url(http://d.facdn.net/art/thisisnotras/1469924445/1469924445.thisisnotras_adjvduf.png); background-position: top -93px center;" target=_blank></a>
 <a target="_blank" href="http://d.facdn.net/art/thisisnotras/1469363508/1469363508.thisisnotras_holding_the_phone.png" style="background-image:url(http://d.facdn.net/art/thisisnotras/1469363508/1469363508.thisisnotras_holding_the_phone.png); background-position: top -60px center;" target=_blank></a>
 <a target="_blank" href="http://d.facdn.net/art/thisisnotras/1469222777/1469222777.thisisnotras__ko_audo__by_kardie-dab3dej.jpg" style="background-image:url(http://d.facdn.net/art/thisisnotras/1469222777/1469222777.thisisnotras__ko_audo__by_kardie-dab3dej.jpg); background-position: top -70px center;" target=_blank></a>
 </div>
 </div>

 <div class="glasspanels">
 <div class="backgroundfill">
 </div>
<a class="linkdiv" href="#div3">
</a>
 <div class="divcontainer">
 <b>CODE</b><br>
 Code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank>mine</a>.<br>
 Profile is a WIP.
 <br><br>
 <b>ART</b><br>
Main image is by <a target="_blank" href="http://furaffinity.net/user/nerior" target=_blank>Nerior</a>.<br>
 All character art is owned by myself and created by various artists.
 </div>
 </div>
 <a class="glassbottom" href="#div1">
 </a>
 <a class="glassbottom" href="#div2">
 </a>
 <a class="glassbottom" href="#div3">
 </a>
 <a class="glassreset" href="#none">
 </a>

 <div class="placemarker">Information
 </div>
 <div class="placemarker">Gallery
 </div>
 <div class="placemarker">Out Of Character
 </div>

 </div>

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

 <audio controls src="http://puu.sh/rKnZv/e7ecd43dca.mp3" style="margin-left:-4px;" loop=3>
</audio>

 </div>
 </div>
 <div id="detailshold">
 <div id="marqueeholder">
 <marquee direction="left" scrollamount="5">
<b>K</b>ari <b>S</b>igurdsson // <b>BEYOND THE HORIZON</b>
 </marquee>
</div>
</div>


</div>