Mute

<style>

body{background-image:url(http://www.transparenttextures.com/patterns/cartographer.png);
 background-size: 250px;
background-color: #e2a7a7;}

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

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


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


#centerhost{
 position: absolute;
 left: -5%;
 top: 0px;
 bottom: 0px;
 right: 0px;
 margin: auto;
 height: 300px;
 width: 300px;
 border: 2px dashed black;
 overflow: hidden;
 border-radius: 360px 360px 360px 360px;
 -webkit-transform:rotate(25deg);
 transform:rotate(25deg);
 box-shadow: 0px 0px 0px black;
}

#floatingsun{
 margin-left: -54px;
 height: 300px;
 width: 462px;
 border: 0px solid black;
}

#actualsun{
position: absolute;
height: 300px;
width: 300px;
margin-top: 0px;
margin-left: 0px;
background-image:url(http://i68.tinypic.com/xmoa2q.jpg);
background-size: auto 105%;
background-repeat: no-repeat;
background-position: center;
background-color: gray;
z-index: 10;
-webkit-transition: all 1s .6s;
transition: all 1s .5s;
 border-radius: 360px 360px 360px 360px;
opacity: 1;
-webkit-filter:saturate(150%);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);}

#whole:hover #actualsun{
-webkit-transition: all 1s .5s, opacity 2s;
transition: all 1s .5s, opacity 2s;
z-index: -5;
opacity: 0;
}

#leftslidelong{
 float: left;
 width: 100px;
}

#leftslideshort{
 float: left;
 width: 50px;
}

#rightslidelong{
 float: right;
 width: 100px;
}

#rightslideshort{
 float: right;
 width: 50px;
}

#leftslidelong,
#leftslideshort,
#rightslidelong,
#rightslideshort{
 height: 10px;
 background: #6C606E;
 border: 1px solid black;
}

#slidebar{float: left;
width: 462px;
height: 48px;
border: 0px solid red;
overflow: hidden;}

#slidebarcontent{
 width: 464px;
 height: 48px;
 -webkit-transition: all 1s;
 transition: all 1s;
 margin-left: 0px;
}

#breakspacer{
 float: left;
 width: 0px;
 height: 10px;
 border: 1px solid black;
 background: transparent;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
}

#slidebarcontent:hover{
 width: 650px;
 margin-left: -70px;
}

#slidebarcontent:hover #breakspacer{
 width: 150px;
}

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

#slidelink{
 position: absolute;
 margin-top: 3px;
 left: 80px;
 height: 40px;
 width:130px;
 border: 0px solid red;
 -webkit-transition: all .5s, opacity 1s .7s;
 transition: all .5s, opacity 1s .7s;
 text-align: center;
 font-family: 'linkfont', Times;
 box-sizing: border-box;
 padding-top: 0px;
 font-size: 35pt;
 letter-spacing: 10px;
 color: black;
 text-decoration: none;
 z-index: -1;
 opacity: 0;
}

#slidebarcontent:hover #slidelink{
 -webkit-transition: all 1s .5s, opacity .2s;
 transition: all 1s .5s, opacity .2s;
 opacity: 1;
 z-index: 1;
 color: #9A1345;

}


#contentarea{
 position: absolute;
 height: 300px;
 width: 300px;
 top: 0px;
 left: -5%;
 right: 0px;
 bottom: 0px;
 margin: auto;
 border: 0px solid white;
 border-radius: 360px 360px 360px 360px;
 -webkit-transition: all 1s, z-index 1s 1s;
 transition: all 1s, z-index 1s 1s;
 transform:rotate(0deg);
 -webkit-transform:rotate(0deg);
 z-index: -1;
}

#link1:target #contentarea,
#link2:target #contentarea,
#link3:target #contentarea,
#link4:target #contentarea{
 -webkit-transition: all 1s;
 transition: all 1s;
 transform:rotate(360deg);
 -webkit-transform:rotate(360deg);
 z-index: 1;
}

#contentareaholder{
 position: absolute;
 height: 300px;
 width: 300px;
 margin-left: 0px;
 margin-top: 0px;
 border: 0px solid red;
 -webkit-transition: all 1.2s .2s;
 transition: all 1.2ss .2s;
 border-radius: 360px 360px 360px 360px;
 background-image:url(http://i65.tinypic.com/am2oi0.jpg);
 background-repeat: no-repeat;
 background-position: center;
 background-size: auto 100%;
 opacity: 0;
 background-color: gray;
}

#link1:target #contentareaholder,
#link2:target #contentareaholder,
#link3:target #contentareaholder,
#link4:target #contentareaholder{
 -webkit-transition: all 1s .2s;
 transition: all 1s .2s;
 opacity: 1;
}

#backgroundfiller{
 position: absolute;
 top: 0px;
 left: 0px;
 width: 300px;
 height: 300px;
 border: 0px solid black;
 border-radius: 360px 360px 360px 360px;
 background: #b7acac;
 opacity: 0;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#link1:target #backgroundfiller,
#link2:target #backgroundfiller,
#link3:target #backgroundfiller,
#link4:target #backgroundfiller{
 opacity: .8;
}

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

.contents{
 position: absolute;
 top: 0px;
 left: 0px;
 width:300px;
 height: 300px;
 border: 0px solid black;
 border-radius: 360px 360px 360px 360px;
 text-align: center;
 font-family: 'contentfont', 'Times';
 font-size: 15pt;
 box-sizing: border-box;
 padding: 10px;
 padding-top: 25px;
 opacity: 0;
 z-index: 0;
 -webkit-transition: all .5s;
 transition: all .5s;
 text-shadow: 0px 0px 10px black;
}

#link1:target #content1,
#link2:target #content2,
#link3:target #content3,
#link4:target #content4{
 opacity: 1;
 z-index: 1;
 -webkit-transition: all 1s .7s;
 transition: all 1s .7s;
}


.closelink{
 position: absolute;
 bottom: 10px;
 left: 0px;
 right: 0px;
 margin: auto;
 height: 22px;
 width: 25px;
 border-radius: 90px 90px 90px 90px;
 border: 1px solid black;
 box-shadow: 1px 1px 5px black;
 text-align: center;
 font-size: 15pt;
 text-decoration: none;
 font-weight: 600;
 color: #981445;
 padding-left: 2px;
 background: #981445;
}

.contents a{
 color: black;
}

.closelink:active{
 box-shadow: 0px 0px 0px black;
}

.contents b{
 color: black;
 font-weight: 600;
text-shadow: 1px 1px 3px gray;
}

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

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

#musiccover{
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
background-image:url(http://i65.tinypic.com/am2oi0.jpg);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: bottom right;
}

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

#statcontent{
 position: absolute;
 top: 0px;
 left: 50px;
 right: 0px;
 bottom: 0px;
 margin: auto;
 height: 180px;
 width: 260px;
 border: 0px solid black;
 overflow-y: scroll;
 box-sizing: border-box;
 font-family: 'contentfont', 'Times';
}

.left1{
 float: left;
 border: 0px solid red;
 height: 20px;
 width: 138px;
 text-align: left;
 font-weight: 400;
 font-size: 12pt;
overflow: none;
}

.left1:nth-child(odd){
 font-weight: 600;
 width: 80px;
 margin-right: 10px;
text-shadow: 1px 1px 3px gray;
}

</style>


<div id="whole">
 <div id="link1">
 <div id="link2">
 <div id="link3">
 <div id="link4">


 <div id="centerhost">
 <div id="actualsun">
</div>
 <div id="floatingsun">

 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

<div id="slidebar">
 <div id="slidebarcontent">
 <a id="slidelink" href="#link1">
 INFO
 </a>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

 </div>
 </div>

 <div id="leftslideshort">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

<div id="slidebar">
 <div id="slidebarcontent">
 <a id="slidelink" href="#link2">
 STATS
 </a>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

 </div>
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

<div id="slidebar">
 <div id="slidebarcontent">
 <a id="slidelink" href="#link3">
 PREFS
 </a>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

 </div>
 </div>

 <div id="leftslideshort">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

 <div id="slidebar">
 <div id="slidebarcontent">
 <a id="slidelink" href="#link4">
 OOC
 </a>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslideshort">
 </div>
 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="breakspacer">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>

 </div>
 </div>

 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>


 <div id="leftslidelong">
 </div>
 <div id="leftslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>
 <div id="rightslidelong">
 </div>
 <div id="rightslideshort">
 </div>




 </div>


 </div>

 <div id="contentarea">
 <div id="contentareaholder">
 <div id="backgroundfiller">
 </div>
 <div class="contents" id="content1" style="padding-top: 40px;">
<div id="statcontent" style="margin-left: -1px;
 padding-right: 50px;
 text-align: justify;
 padding-left: 5px;">A strange, mysterious and incredibly silent figure, Mute is the leader of a gang of cutthroats that call themselves the <i>Silent Knights</i>. Their goal, captured very well in the emblem emblazoned on their flags that depicts a knight helmet in a noose, is no less than the death of every knight and the termination of every monster slaying organization. This is their own crusade, and it will end with no less blood than the others.</div>
 <a href="#nothing" class="closelink">X
 </a>
 </div>
 <div class="contents" id="content2">
 <div id="statcontent">
 <span class="left1">Name
 </span>
 <span class="left1">N/A
 </span>
 <span class="left1">Alias
 </span>
 <span class="left1">Mute
 </span>
 <span class="left1">Age
 </span>
 <span class="left1">N/A
 </span>
 <span class="left1">Species
 </span>
 <span class="left1">Wolf/Dragon Hybrid
 </span>
 <span class="left1">Height
 </span>
 <span class="left1">6'6"
 </span>
 <span class="left1">Build
 </span>
 <span class="left1">Athletic/Slender
 </span>
 <span class="left1">Gender
 </span>
 <span class="left1">Male
 </span>
 <span class="left1">Sexuality </span>
 <span class="left1">Bisexual
 </span>
 <span class="left1">Eyes </span>
 <span class="left1" title="Black Sclera">Grapefruit / Orange*
 </span>
 <span class="left1">Ability 1
 </span>
 <span class="left1">Enhanced Strength
 </span>
 <span class="left1">Ability 2
 </span>
 <span class="left1">Enhanced Agility
 </span>
 <span class="left1">Ability 3
 </span>
 <span class="left1">Breathing Flame
 </span>
 </div>
 <a href="#nothing" class="closelink">X
 </a>
 </div>
 <div class="contents" id="content3">
 <b>Likes</b><br>
 spicy foods<br>
 fighting<br>
 flammability<br>
dead knights<br>
 <br>
 <b>Dislikes</b><br>
 gummy candy<br>
 long conversations<br>
knights
 <a href="#nothing" class="closelink">X
 </a>
 </div>
 <div class="contents" id="content4" style="padding-top: 90px;">
 code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank>mine</a><br>
 art is owned<br>
artist @<a target="_blank" href="http://furaffinity.net/user/ranaohara" target=_blank>ranaohara</a><br>
design @<a target="_blank" href="http://furaffinity.net/user/teaksamin" target=_blank>teaksamin</a><br>
 song is by <a target="_blank" href="https://youtu.be/SZZF4pU3shc" target=_blank>clams casino</a><br><br>
<a title="profile was coded on Chrome and I'm way too lazy to do anything for Firefox right now, I apologize"> WIP*</a>
 <a href="#nothing" class="closelink">X
 </a>
 </div>
 </div>
 </div>


<div id="musicslice" title="clams casino - i'm the devil">
<div id="musiccover">
</div>
<div id="musichidden">
<audio controls src="http://puu.sh/pGZl5/e0d1c4bf3a.mp3" loop=3></audio>
</div>
</div>


</div>