Jawn

<style>



#holdit {position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden;
background-image:url(http://i68.tinypic.com/npffjt.jpg);}
.workit {position: absolute; top: 0; left: 0; height: 100%; width: 100%; }
.workit img {height: 100%; width: auto; }
body {background-color: #ADADAD; }

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


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


@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/Austie%20Bost%20Roman%20Holiday%20Sketch.ttf);
 font-family:'titlefont';
}

.contentbox{
 position: absolute;
 top: 10px;
 left: 0px;
 right: 0px;
 margin: auto;
 height: 100px;
 width: 400px;
 border: 0px solid black;
 border-radius: 10px;
 text-align: center;
 font-family:'titlefont';
 font-size:15pt;
 color:black;
 overflow: hidden;
 z-index: 1;
 text-decoration: none;
}

.contentbox:before{
 content:'';
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: black;
 -webkit-filter:blur(30px);
 filter:blur(30px);
 z-index:-2;
}

.contentbox:after{
 content:'';
 position: absolute;
 top: 6px;
 left: 6px;
 right: 6px;
 bottom: 6px;
 background-image:url(http://i68.tinypic.com/npffjt.jpg);
 background-repeat: no-repeat;
 background-size: 100% auto;
 background-position: center center;
 opacity: 1;
 background-color: gray;
 border-radius: 5px;
 z-index:-1;
}

.contentbox h1{
 font-size:60pt;
 margin-top: 5px;
 font-style: italic;
 letter-spacing: -2px;
 opacity: .8;
}

#concealer{
 position: absolute;
 top: 110px;
 left: 0px;
 right: 0px;
 height: 241px;
 width: 350px;
 margin: auto;
 overflow: hidden;
 border: 0px solid red;
 border-radius: 0px 0px 5px 5px;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
}

#quickfill{
  border: 0px solid black;
 position: absolute;
 left:600px;
 top: -260px;
 height: 500px;
 width: 500px;
 opacity: 1;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#linefill{
 height: 3px;
 width: 150%;
 transform:rotate(-20deg);
 background: black;
 float: right;
 margin-top: 3px;
 margin-left: -100px;
 opacity: .9;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#bottomselection{
 position: absolute;
 bottom: 0px;
 right: 0px;
	height: 0;
	border-top: 130px solid transparent;
	border-right: 360px solid #151515;
	border-bottom: 0px solid transparent;
 overflow: hidden;
-webkit-transition: all 1s;
transition: all 1s;
 opacity: 0;
}

#bottomselection2{
 position: absolute;
 bottom: 0px;
 right: 140px;
	height: 0;
	border-top: 79px solid transparent;
	border-right: 219px solid #151515;
	border-bottom: 0px solid transparent;
 overflow: hidden;
 opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
}

@font-face{
 font-family:'linkfont';
 src:url(https://dl.dropboxusercontent.com/u/4556289/Sketch%20Script%20Cool.otf);
}


.selection1{
 position: absolute;
 bottom: 0px;
 width: 117px;
 height: 39px;
 left: 90px;
 z-index: 3;
 text-align: center;
 font-family:'linkfont';
 font-size:20pt;
 color: gray;
 text-decoration: none;
-webkit-transition: all 1s;
transition: all 1s;
 box-sizing: border-box;
 opacity: 0;
}

#selectiondiv{
position: absolute;
bottom: 0px;
left: 207px;
height: 79px;
width: 3px;
background: black;
z-index: 3;}

.selection2{
 position: absolute;
 bottom: 0px;
 width: 137px;
 height: 120px;
 box-sizing: border-box;
 padding-top: 82px;
 border: 0px solid white;
 left: 210px;
 z-index: 3;
 text-align: center;
 font-family:'linkfont';
 font-size:20pt;
 color: gray;
 text-decoration: none;
-webkit-transition: all 1s;
transition: all 1s;
 opacity: 0;
}

#holdall{
 position: absolute;
 height: 400px;
 width: 500px;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 border: 0px solid black;
}

.selection1:hover ~ #bottomselection2,
.selection2:hover ~ #bottomselection{
 border-right-color: #6B6B6B;
}

.selection1:hover, .selection2:hover{
 color: black;
}

#playercontent{
 position: absolute;
 top: 0px;
 left: 0px;
 height: 112px;
 width: 350px;
 border: 0px solid red;
 box-sizing: border-box;
 padding: 5px;
 z-index:1;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#playercontent:before{
 content:'';
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background: #4F4F4F;
 opacity: .9;
}

#oocsection{
 position: absolute;
 top: 110px;
 left: 0px;
 border: 0px solid white;
 width: 300px;
 height: 120px;
 text-align: left;
 z-index: 2;
 padding: 5px;
 font-size: 13pt;
 letter-spacing: 2px;
 font-family:'titlefont';
 color: gray;
 font-weight: 600;
 text-shadow: 2px 2px 1px black;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#playercontent a,
#oocsection a{
 text-decoration: none;
 font-style: italic;
 color: #BCA28B;
}

#bottomfill{
 position: absolute;
 bottom: -1px;
 right: 0px;
	height: 0;
	border-top: 130px solid transparent;
	border-right: 360px solid black;
	border-bottom: 0px solid transparent;
 overflow: hidden;
-webkit-transition: all 1s;
transition: all 1s;
 transform:rotate(180deg);
 opacity: 0;
 z-index: 2;
}

#tab1,#tab2{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 text-align: center;
 font-size: 15pt;
    text-shadow: 0px 0px 9px #161616;
    font-weight: 600;
    color: black;
 font-family:'titlefont';
 text-align: justify;
 text-justify: inter-word;
 box-sizing: border-box;
 overflow: auto;
 z-index: 1;
 padding: 5px;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#call1:target #bottomselection2,
#call2:target #bottomselection{
 border-right-color: #6B6B6B;
}

#call1:target .selection1,
#call2:target .selection2{
 color: black;
}

#call1:target #playercontent,
#call2:target #playercontent{
 opacity: 1;
}

#call1:target #tab1,
#call2:target #tab2{
 -webkit-transition: all 1s .7s;
 transition: all 1s .7s;
 opacity: 2;
 z-index: 3;
}

#call1:target #oocsection,
#call2:target #oocsection{
 opacity: 1;
}

#call1:target #bottomfill,
#call2:target #bottomfill{
 opacity: .89;
}

/* MUSIC AREA */

#musicslice{
position: fixed;
top: 5%;
right: 20px;
height: 50px;
width: 50px;
border: 1px solid black;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 0s;
box-shadow: 1px 1px 3px 0px black;
background: transparent;}

#musicslice:active{
-webkit-transition: all 0s;
transition: all 0s;
box-shadow: 1px 1px 0px 0px black;}

#musiccover{
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
background-image:url(http://i66.tinypic.com/11hs7ds.jpg);
background-size: auto 95%;
background-repeat: no-repeat;
background-position: center;
}

#musichidden{
position: absolute;
left: -10px;
top: 0px;
height: 50px;
width: 50px;
zoom: 180%;
opacity: 0;
z-index: 1;
overflow: hidden;}

#bottomselection,
#bottomselection2,
#selection1,
#selection2{
 -webkit-transition: all 1s;
 transition: all 1s;
}

#holdit:hover #bottomselection,
#holdit:hover #bottomselection2,
#holdit:hover .selection1,
#holdit:hover .selection2{
 opacity: 1;
}

#holdit:hover #bottomselection2{
 -webkit-transition: all 1s;
 transition: all 1s;
}

#holdit:hover .selection1,
#holdit:hover .selection2{
 -webkit-transition: all 1s;
 transition: all 1s;
}

#holdit:hover #quickfill{
  -webkit-transition: all 2s ease-in;
  transition: all 2s ease-in;
  left: 0px;
  top: -50px;
}

#holdit:hover #concealer{
 opacity: 1;
}

</style>


<div id="holdit">

 <div id="call1">
 <div id="call2">

<div class="workit">
<img src="http://puu.sh/qpEx4/96bbfbecb6.png">
</div>

 <div id="holdall">
 <a href="#none"class="contentbox">
 <h1>May Johnson</h1>
 </a>

 <div id="concealer">
 <div id="quickfill">
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 <div id="linefill">
 </div>
 </div>
 <a href="#call1" class="selection1">
 ONE
 </a>
<div id="selectiondiv">
</div>
 <a href="#call2" class="selection2">
 TWO
 </a>
 <div id="bottomfill">
 </div>
 <div id="bottomselection">
 </div>
 <div id="bottomselection2">
 </div>

 <div id="playercontent">
 <div id="tab1">
 Name: May Johnson<br />
 Height: 5'3" <br />
 Occupation: Secretary at a Law Firm<br />
 Orientation: Whatever. <br />
 Status: Single, and not looking yet. <br />
 Demeanor: Calm, calculating.<br />
 Interests: Sushi, Sake, and Hard Cold Cash.
 </div>
 <div id="tab2">
 Don't take this feline too lightly, just because she's a secretary. If you're around the same group of people long enough every day, you end up picking up their tricks; no?<br /><br />
 She's calculating of every move you make, though she remains quiet and considerate... So be careful, or you might end up disappearing some day without a trace.
 </div>
 </div>
 <div id="oocsection">
 Rarely ooc, but PM friendly.<br>
 My character, my art.<br>
 <a target="_blank" href="http://furaffinity.net/user/koaudo" target="_blank">Want to see more?</a><br>
 <a target="_blank" href="http://roleplay.chat/profile.php?user=digital" target=_blank>digiformat</a>.
 </div>
</div>

</div>
</div>



 <div id="musicslice" title="flight facilities - crave you">
<div id="musiccover">
</div>
<div id="musichidden">
<audio controls src="http://puu.sh/r7278/2d2392cfb4.mp3"></audio>
</div>



 </div>
</div>

</div>