Edge

<style>

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

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/Imagination%20Station.ttf);
 font-family:'titlefont';
}

/*
E6992F
A61E1C
*/

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

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

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


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


body{
 overflow: hidden;
}

body, a, a:hover, label {cursor: url(http://cur.cursors-4u.net/cursors/cur-7/cur641.cur), progress !important;}

#whole *{
 box-sizing: border-box;
}

#whole{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-color: #c75b2e;
background-color: #bd6a48;
 background-image:url(http://i.imgur.com/GDNO65o.png);
border: 10px solid black;
}

#topimage{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 90vh;
 width: 65vh;
 background-image:url(http://i.imgur.com/j2ycW8q.png);
 background-repeat: no-repeat;
 background-size: auto 100%;
 background-position: center;
 box-shadow: 5px 5px 10px black;
 border-radius: 2px 2px 2px 2px;
}

#menuselect{
 position: absolute;
 top: 0px;
 bottom: 0px;
 left: -23vh;
 width: 20vh;
 box-shadow: 5px 5px 10px black;
 border-bottom: 5px solid #3D2F2A;
 border-right: 5px solid #3D2F2A;
 border-radius: 5px 2px 2px 0px;
 padding-top: .5px;
 background-color: rgba(199, 91, 46, 0.66);
}

.selectbox{
 position: relative;
 margin-bottom: 1vh;
 width: 100%;
 height: 17vh;
 overflow: hidden;
 -webkit-transition: all 1s;
 transition: all 1s;
}

.selectbox .topbox{
 width: 100%;
 float: left;
 height: 4vh;
 font-family:'titlefont';
 font-size: 2.5vh;
 color: black;
 font-weight: 600;
 letter-spacing: .5vh;
 padding: 5px;
 text-align: right;
 box-shadow: 0px 1px 3px black;
 -webkit-transition: all .2s;
 transition: all .2s;
}

.firstfloat{
 float: left;
 height: 3vh;
 width: 100%;
 overflow: hidden;
 font-family:'subfont';
 font-size: 1.7vh;
 font-weight: 600;
 text-align: right;
 padding-right: 1.9vh;
 margin-top: 1vh;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

.firstfloat:before{
 content: '››';
 text-align: left;
 float: left;
 margin-left: 1vh;
}

#whole .selectbox{
 height: 5vh;
}

#div1sel:checked ~ #whole .selectbox:nth-child(1),
#div2sel:checked ~ #whole .selectbox:nth-child(2),
#div3sel:checked ~ #whole .selectbox:nth-child(3),
#div4sel:checked ~ #whole .selectbox:nth-child(4),
#div5sel:checked ~ #whole .selectbox:nth-child(5){
 height: 17vh;
}

#div1sel:checked ~ #whole .selectbox:nth-child(1) .firstfloat,
#div2sel:checked ~ #whole .selectbox:nth-child(2) .firstfloat,
#div3sel:checked ~ #whole .selectbox:nth-child(3) .firstfloat,
#div4sel:checked ~ #whole .selectbox:nth-child(4) .firstfloat,
#div5sel:checked ~ #whole .selectbox:nth-child(5) .firstfloat{
 opacity: 1;
 -webkit-transition: all 1s .1s;
 transition: all 1s .1s;
}

#div1sel:checked ~ #whole .selectbox:nth-child(1) .topbox,
#div2sel:checked ~ #whole .selectbox:nth-child(2) .topbox,
#div3sel:checked ~ #whole .selectbox:nth-child(3) .topbox,
#div4sel:checked ~ #whole .selectbox:nth-child(4) .topbox,
#div5sel:checked ~ #whole .selectbox:nth-child(5) .topbox{
 background-color: rgba(0, 0, 0, 0.2);
}

#contentarea1{
 position: absolute;
 border: 5px solid #c75b2e;
 top: .3vh;
 left: .3vh;
 height: 35vh;
 width: 32vh;
}

#contentarea2{
 position: absolute;
 border: 5px solid #c75b2e;
 top: .3vh;
 right: .3vh;
 height: 35vh;
 width: 32vh;
}

#contentarea3{
 position: absolute;
 top: 35.7vh;
 left: .3vh;
 right: .3vh;
 height: 15vh;
 border: 5px solid #c75b2e;
}

#contentarea4{
 position: absolute;
 top: 51vh;
 left: .3vh;
 right: .3vh;
 height: 25vh;
 border: 5px solid #c75b2e;
}

#contentarea5{
 position: absolute;
 bottom: .3vh;
 left: .3vh;
 right: .3vh;
 height: 13.4vh;
 border: 5px solid #c75b2e;
}

#contentarea1:before,
#contentarea2:before,
#contentarea3:before,
#contentarea4:before,
#contentarea5:before{
 content: '';
 position: absolute;
 top: 2px;
 left: 2px;
 right: 2px;
 bottom: 2px;
 box-shadow: 0px 0px 3px 3px black;
 background: rgba(199, 91, 46, 0.72);
 background: rgba(218, 197, 188, 0.75);
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
}


#contentarea1,
#contentarea2,
#contentarea3,
#contentarea4,
#contentarea5{
 -webkit-transition: all 1s .5s;
 transition: all 1s .5s;
 opacity: 0;
}

#div1sel:checked ~ #whole #contentarea1,
#div2sel:checked ~ #whole #contentarea2,
#div3sel:checked ~ #whole #contentarea3,
#div4sel:checked ~ #whole #contentarea4,
#div5sel:checked ~ #whole #contentarea5
{
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 1;
}

#div1sel:checked ~ #whole #contentarea1:before,
#div2sel:checked ~ #whole #contentarea2:before,
#div3sel:checked ~ #whole #contentarea3:before,
#div4sel:checked ~ #whole #contentarea4:before,
#div5sel:checked ~ #whole #contentarea5:before{
 -webkit-transition: all 1s .5s;
 transition: all 1s .5s;
 opacity: 1;
}

.contents{
 position: absolute;
 top: 0px;
 left: 0px;
 right: .2vh;
 bottom: 0px;
 overflow: auto;
 color: black;
 font-weight: 400;
 font-family:'contentfont';
 font-size: 2vh;
 padding: 5px;
 text-align: left;
 z-index: 1;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
line-height: 22px;
}

.contents a{
color: black;
font-weight: 600;
text-decoration: none;
-webkit-transition: all .3s;
transition: all .3s;}

.contents a:hover{
color: #c75b2e; }

.contents ul{
margin-left: -2vh;}

.contents ul li{
margin-left: 3vh;}

#sel11:checked ~ #whole #content11,
#sel12:checked ~ #whole #content12,
#sel13:checked ~ #whole #content13,
#sel21:checked ~ #whole #content21,
#sel22:checked ~ #whole #content22,
#sel23:checked ~ #whole #content23,
#sel31:checked ~ #whole #content31,
#sel32:checked ~ #whole #content32,
#sel41:checked ~ #whole #content41,
#sel42:checked ~ #whole #content42,
#sel43:checked ~ #whole #content43,
#sel51:checked ~ #whole #content51,
#sel52:checked ~ #whole #content52,
#sel53:checked ~ #whole #content53{
 opacity: 1;
 -webkit-transition: all 1s .5s;
 transition: all 1s .5s;
 z-index: 2;
}

#content21, #content22, #content23{
padding-top: 1vh;}

#content21 ul, #content22 ul, #content23 ul{
font-weight: 600;
margin-top: .6vh;
margin-bottom: 0px;
margin-left: -3vh;
}

#content42 ol{
font-weight: 600;
margin-left: -2vh;
}

#content21 li, #content22 li, #content23 li, #content42 li{
font-weight: 400;
margin-bottom: 0px;}

#content42 li{
margin-left: 2vh;}

#content13 a{
font-style: italic;
margin-left: 2vh;
margin-right: .5vh;}


#sel11:checked ~ #whole .selectbox:nth-child(1) .firstfloat:nth-child(2):before,
#sel12:checked ~ #whole .selectbox:nth-child(1) .firstfloat:nth-child(3):before,
#sel13:checked ~ #whole .selectbox:nth-child(1) .firstfloat:nth-child(4):before,
#sel21:checked ~ #whole .selectbox:nth-child(2) .firstfloat:nth-child(2):before,
#sel22:checked ~ #whole .selectbox:nth-child(2) .firstfloat:nth-child(3):before,
#sel23:checked ~ #whole .selectbox:nth-child(2) .firstfloat:nth-child(4):before,
#sel31:checked ~ #whole .selectbox:nth-child(3) .firstfloat:nth-child(2):before,
#sel32:checked ~ #whole .selectbox:nth-child(3) .firstfloat:nth-child(3):before,
#sel41:checked ~ #whole .selectbox:nth-child(4) .firstfloat:nth-child(2):before,
#sel42:checked ~ #whole .selectbox:nth-child(4) .firstfloat:nth-child(3):before,
#sel43:checked ~ #whole .selectbox:nth-child(4) .firstfloat:nth-child(4):before,
#sel51:checked ~ #whole .selectbox:nth-child(5) .firstfloat:nth-child(2):before,
#sel52:checked ~ #whole .selectbox:nth-child(5) .firstfloat:nth-child(3):before,
#sel53:checked ~ #whole .selectbox:nth-child(5) .firstfloat:nth-child(4):before{
 color: #DAC5BC;
}


/* MUSIC PLAYER */

#musiccontainer{
 position: absolute;
 bottom: 10px;
 left: 10px;
 height: 24px;
 width: 23px;
 border: 0px solid black;
background: #ED8722;
-webkit-transition: all 1s;
transition: all 1s;
overflow: hidden;
border-radius: 3px 3px 3px 3px;
 opacity: .8;
zoom: 130%;
}

#musiccontainer:hover{
width: 200px;}

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

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

#detailshold{
 position: absolute;
 left: 22px;
 top: 1px;
 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>

<input type="checkbox" id="div1sel">
<input type="checkbox" id="div2sel">
<input type="checkbox" id="div3sel">
<input type="checkbox" id="div4sel">
<input type="checkbox" id="div5sel">
<input type="radio" name="select1" id="sel11">
<input type="radio" name="select1" id="sel12">
<input type="radio" name="select1" id="sel13">
<input type="radio" name="select2" id="sel21">
<input type="radio" name="select2" id="sel22">
<input type="radio" name="select2" id="sel23">
<input type="radio" name="select3" id="sel31">
<input type="radio" name="select3" id="sel32">
<input type="radio" name="select4" id="sel41">
<input type="radio" name="select4" id="sel42">
<input type="radio" name="select4" id="sel43">
<input type="radio" name="select5" id="sel51">
<input type="radio" name="select5" id="sel52">
<input type="radio" name="select5" id="sel53">

<div id="whole">
 <div id="topimage">

 <div id="menuselect">
 <div class="selectbox">
 <label class="topbox" for="div1sel">
 Main Info.
 </label>
 <label class="firstfloat" for="sel11">
 History
 </label>
 <label class="firstfloat" for="sel12">
 Personality
 </label>
 <label class="firstfloat" for="sel13">
 Likes / Dislikes
 </label>
 </div>

 <div class="selectbox">
 <label class="topbox" for="div2sel">
 StaT Info.
 </label>
 <label class="firstfloat" for="sel21">
Personal Info
 </label>
 <label class="firstfloat" for="sel22">
Physical Info
 </label>
 <label class="firstfloat" for="sel23">
 Abilities
 </label>
 </div>

 <div class="selectbox">
 <label class="topbox" for="div3sel">
 Events.
 </label>
 <label class="firstfloat" for="sel31">
 The Deal
 </label>
 <label class="firstfloat" for="sel32">
 The LounGe
 </label>
 </div>

 <div class="selectbox">
 <label class="topbox" for="div4sel">
 The Lounge.
 </label>
 <label class="firstfloat" for="sel41">
 Description
 </label>
 <label class="firstfloat" for="sel42">
 Rules
 </label>
 <label class="firstfloat" for="sel43">
 Mods
 </label>
 </div>

 <div class="selectbox">
 <label class="topbox" for="div5sel">
 OOC.
 </label>
 <label class="firstfloat" for="sel51">
 Gallery
 </label>
 <label class="firstfloat" for="sel52">
 Credits
 </label>
 <label class="firstfloat" for="sel53">
 Contact info
 </label>
 </div>

 </div>

 <div id="contentarea1">
 <div class="contents" id="content11">
 The future 'best fighting gamer', or so Hell and a deal to sell his soul would have him be, <b>Edge Crafton</b>'s contract amounted to very little in the way of actual results. You'll find the guy practically anywhere but a tournament these days, more likely turning up on a bar counter or on the floor.</div>
 <div class="contents" id="content12">
 Despite his situation, Edge is a mostly carefree kind of canine. He finds joy in simple interactions with others and affection whenever it happens to come his way. Beware that he's more than a little silly, a fact that can be combined with his very large size to result in unpredictably ridiculous situations.</div>
 <div class="contents" id="content13">
 <b>Likes</b><br>
Fighting games, First person shooters, Racing games, physical combat, pizza, affection, sex, being a little crazy.<br><br>
<b>Dislikes</b><br>
Liars, assholes, grumps.<br><br>
<b>Friends</b><br>
<a href="http://roleplay.chat/profile.php?user=Envy" target=_blank>N-V</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Chocolate" target=_blank>Chocobon</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Jovana" target=_blank>Jova</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Mnemosyne" target=_blank>Moops</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Moo+Moo" target=_blank>Moomoochi</a>*<br>
<a href="http://roleplay.chat/profile.php?user=NikaEvanlish" target=_blank>Nika</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Pixel" target=_blank>Pixpal</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Rylee" target=_blank>Rynoon</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Jahseh" target=_blank>Jah Rule</a>*<br>
<a href="http://roleplay.chat/profile.php?user=iNev" target=_blank>iNavel</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Orangie" target=_blank>Orangella</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Caramelle" target=_blank>Carmangelo</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Amaranthe" target=_blank>Amaretto</a>*<br>
<a href="http://roleplay.chat/profile.php?user=Citadel" target=_blank>Citydeli</a>*<br></div>
 </div>


 <div id="contentarea2">
 <div class="contents" id="content21">

<ul>Name
<li>Edge Crafton</li>
</ul>

<ul>Hometown
<li>Driftwood Valley</li>
</ul>

<ul>Education
<li>Some College</li>
</ul>

<ul>Family
<li>Edge Crafton</li>
</ul>

<ul>Status
<li>Unrestrained (Open)</li>
</ul>

<ul>Occupation
<li>Professional Gamer, Bouncer</li>
</ul>

<ul>Personality
<li>Laid-back, Affectionate</li>
</ul>

<ul>Dress Style
<li>Loose pants, often shirtless</li>
</ul>

<ul>Hobbies
<li>Fighting games, Anime</li>
</ul>

</div>



 <div class="contents" id="content22">

<ul>Species
<li><i title="Canine with aspects of him altered from the transformative nature of his deal.">Hallowed Canine</i>*</li>
</ul>

<ul>Sex
<li>Male</li>
</ul>

<ul>Age
<li>Thirty-Four</li>
</ul>

<ul>Height
<li>7'8"</li>
</ul>

<ul>Build
<li>Light-Middleweight</li>
</ul>

<ul>Length
<li>16"</li>
</ul>

<ul>Girth
<li>5"</li>
</ul>


</div>
 <div class="contents" id="content23">
 <ul>- Spark -
<li>
When focusing, Edge channels the energies of hell into his mind to increase his mental and physical capabilities. More agile and able to think more tactically, it gives him a strong edge against any random he happens across online.</li>
</ul>

<ul>- Surge -
<li>
If Edge concentrates <b>Spark</b> for too long or too strongly, there is a resulting physical transformation of his body as he's infused with hell's power. His muscle mass and the size of his limbs increase while his mind becomes more primal, temporarily leaving him extremely focused but less coherent.</li>
</ul>

</div>
 </div>



 <div id="contentarea3">
 <div class="contents" id="content31">
Pretty simple story.<br>
Edge made a deal with hell in exchange for 'the tools' to make him the best fighting gamer of all time.<br><br>
Things got a little more difficult when he realized that without completing his end of this deal, Edge could not die - any death before his goal was accomplished would invalidate the deal. This effectively meant Edge was immortal 'until further notice', which has led to an intentional delay in his goal to become 'the best' as his life will be eternally sustained this way. Not forever, of course, as his putting effort into his wish is also part of the deal.<br><br>
Currently, Edge is waiting for another 'caseworker' to be assigned.</div>
 <div class="contents" id="content32">
As a motivation tool, perhaps as a hint of what life would or could be like without accomplishing his goals, he was assigned to be the bouncer for <b>The Anthro Lounge</b>. Rarely doing his duties, you can usually find his body strewn across the bar instead.</div>
 </div>


 <div id="contentarea4">

 <div class="contents" id="content41">
<i>"What was once in a former life an old run down church, Repurposed into a gathering place for anthros, Demons and otherwise resides at the end of the road near the woods. It still looks run down but inside it stands a totally different look. Any matter of metal or alternative plays through the speakers, There's plenty of tables and couches around leading patrons to know this isn't a typical bar. Fully stocked with cold beer and booze at one end, There's also a sauna and a few hot tubs in the basement for anyone's enjoyment."</i></div>
 <div class="contents" id="content42">
<ol>Rules
<li> No harrassment. Playful banter, jokes, etc. allowed as long as it does not cause harm. Do not force actions on another player's character.</li>
<li> No smut is allowed in the main chat. Suggestive material is allowed.</li>
<li> Banned topics of conversation are race (including racial slurs) and politics.</li>
<li>Any aggressive or hostile behavior will be warned against and then given a temporary ban. Intervention at mod discretion.</li>
<li> No nude/sexual portrayals of underage characters in main.</li></ol></div>
 <div class="contents" id="content43">
<br><i>Room owner is <a href="http://roleplay.chat/profile.php?user=Citadel" target=_Blank>Citadel</a></i> *<br>
<ul><i>Current Room Mods</i>
<li><a href="http://roleplay.chat/profile.php?user=Edge" target=_blank>Edge</a>*</li>
<li><a href="http://roleplay.chat/profile.php?user=Jovana" target=_blank>Jovana</a>*</li>
<li><a href="http://roleplay.chat/profile.php?user=Orangie" target=_blank>Orangie</a>*</li>
<li><a href="http://roleplay.chat/profile.php?user=Jahseh" target=_blank>Jahseh</a>*</li>
<li><a href="http://roleplay.chat/profile.php?user=Breck" target=_blank>Breck</a>*</li>
</ul></div>

 </div>


 <div id="contentarea5">

 <div class="contents" id="content51">
 Gallery's going here, please be patient.</div>
 <div class="contents" id="content52">
This profile is still a work in progress, please check back for new information.<br>
 All coding is <a href="http://roleplay.chat/profile.php?user=Digital" target=_blank>my own</a>*. Please don't steal.<br>
Artwork is by <a href="http://furaffinity.net/user/mewyfox" target=_blank>MewyFox</a>*.<br><br>
If you're not on the friends list and feel you should be, just tell me.</div>
 <div class="contents" id="content53">
 I'm a pretty easygoing person most of the time.<br>
I've got a <b>skype</b>, <b>Discord</b> and... well, yeah that's it. Just ask for them.<br>
My gamer tags are <b>Riot Trigger</b> (XBL) and <b>Riot_Z32</b> (PSN).<br><br>
If you want a profile, I will do very basic formats for free. Commissions start at <b>$30</b>.</div>

 </div>

 </div>


<div id="musiccontainer">
 <div id="playerhold">
 <div id="playerholdzoom">

 <audio controls src="http://k003.kiwi6.com/hotlink/vidnanpjvd/01_-_The_GatewayVOL.mp3" id="edgesong" style="margin-left:7px;" loop=3>
</audio>

 </div>
 </div>
 <div id="detailshold">
 <div id="marqueeholder">
 <marquee direction="left" scrollamount="5">
<b>S</b>AM <b>G</b>ELLAITRY // <b>THE GATEWAY</b>
 </marquee>

 </div>
 </div>

 </div>


</div>