Apathy

<style>

body{
 background: gray;
 background-image:url(http://i.imgur.com/gD841Nx.png);
 overflow: hidden;
}

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

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

::-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: white;
}

#whole{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 background-repeat: no-repeat;
 background-size: auto 123%;
 background-position: top 15% right -10%;
 background-image: url(http://i.imgur.com/vEIo7gu.png);
}

#straightline{
 position: absolute;
 top: 0px;
 bottom: 0px;
 width: 100%;
 left: 0px;
 margin: auto;
 height:40px;
 border-top: 5px solid #403535;
 border-bottom: 5px solid #403535;
 box-sizing: border-box;
 background: rgba(0, 0, 0, 0.61);
 z-index: 5;
}

#infocontent{
 position: absolute;
 left: 20%;
 top: 0px;
 height: 30px;
 width: 185px;
 overflow: hidden;
 font-family: 'bodyfont2';
 font-size: 16pt;
 color: white;
 box-sizing: border-box;
 text-align: center;
 border-radius: 0px;
 background: transparent;
 padding-left: 10px;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#floatspread{
 float: left;
 height: 30px;
 border-size: border-box;
 padding-top: 3px;
 overflow: hidden;
 text-align: left;
}

#floatspread b{
 font-weight: 400;
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

.spread1, .spread2, .spread3, .spread4, .spread5, .spread6, .spread7, .spread8{
 width: 20px;
 letter-spacing: 4px;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#whole:hover #infocontent,
#div1:target ~ #whole #infocontent{
 width: 700px;
 -webkit-transition: all 2s, background 2s 2s, border-radius 1s 2s;
 transition: all 2s background 2s 2s, border-radius 1s 2s;
 background: rgba(0, 0, 0, 0.75);
 border-radius: 5px;
}

#whole:hover #floatspread b,
#div1:target ~ #whole #floatspread b{
 -webkit-transition: all 1s 2s;
 transition: all 1s 2s;
 opacity: .5;
}

#whole:hover .spread1,
#div1:target ~ #whole .spread1{
 width: 120px;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#whole:hover .spread2,
#div1:target ~ #whole .spread2{
 width: 95px;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#whole:hover .spread4,
#div1:target ~ #whole .spread4{
 width: 110px;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#whole:hover .spread5,
#div1:target ~ #whole .spread5{
 width: 110px;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#whole:hover .spread6,
#div1:target ~ #whole .spread6{
 width: 140px;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#whole:hover .spread7,
#div1:target ~ #whole .spread7{
 width: 60px;
 -webkit-transition: all 1.5s 1s;
 transition: all 1.5s 1s;
}

#whole:hover .spread8,
#div1:target ~ #whole .spread8{
 width: 13px;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#whole:hover .spread9,
#div1:target ~ #whole .spread9{
 width: 10px;
 -webkit-transition: all 2s;
 transition: all 2s;
}

#dropdown{
 position: absolute;
 left: 20%;
 margin-left: 3px;
 width: 30px;
 top: 40px;
 height: 10px;
 background: black;
 box-sizing: border-box;
 border-radius: 1px;
 -webkit-transition: all 1s;
 transition: all 1s;
 overflow: hidden;
 opacity: .4;
 color: white;
 line-height: 40px;
 letter-spacing: 0px;
 font-family: 'bodyfont2';
 text-align: left;
 padding-left: 4px;
 font-size: 11pt;
}

#whole:hover #dropdown{
 opacity: .9;
}

#div1:target ~ #whole #dropdown{
 -webkit-transition: all 1s 1s, height 1.5s, opacity 1s;
 transition: all 1s 1s, height 1.5s, opacity 1s;
 border-radius: 5px;
 height: 195px;
 opacity: .9;
}

#dropdown a{
 text-decoration: none;
 opacity: .8;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#dropdown a:hover{
 text-decoration: underline;
 opacity: 1;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#switch1,#switch2,#switch3,#switch4, #switch5{
 opacity: 0;
}

#switch1:checked ~ #whole .switcher1,
#switch2:checked ~ #whole .switcher2,
#switch3:checked ~ #whole .switcher3,
#switch4:checked ~ #whole .switcher4{
 text-decoration: underline;
 opacity: 1;
}

#contentarea{
 position: absolute;
 top: 40px;
 left: 20%;
 margin-left: 48px;
 height: 10px;
 width: 10px;
 background: rgba(0,0,0,.85);
 -webkit-transition: all 2s;
 transition: all 2s;
 opacity: .5;
}

#div1:target ~ #whole #contentarea{
 -webkit-transition: all 1.5s, border-radius 1s 1s;
 transition: all 1.5s, border-radius 1s 1s;
 height: 195px;
 border-radius: 2px;
 opacity: 1;
 overflow: hidden;
}

#switch1:checked ~ #whole #contentarea,
#switch2:checked ~ #whole #contentarea,
#switch3:checked ~ #whole #contentarea,
#switch4:checked ~ #whole #contentarea{
 height: 195px;
 border-radius: 5px;
 opacity: 1;
 width: 556px;
}

.contentfill{
 position: absolute;
 left: 10px;
 top: 10px;
 bottom: 10px;
 right: 10px;
 background: black;
 -webkit-transition: all 1s;
 transition: all 1s;
 opacity: 0;
 z-index: 0;
 text-align: left;
 font-family:'bodyfont';
 font-size: 17pt;
 color: gray;
 overflow: auto;
 box-sizing: border-box;
}

#switch1:checked ~ #whole #content1,
#switch2:checked ~ #whole #content2,
#switch3:checked ~ #whole #content3,
#switch4:checked ~ #whole #content4{
 -webkit-transition: all 2s .9s;
 transition: all 2s .9s;
 opacity: 1;
 z-index: 1;
}

.contentfill h1{
 position: absolute;
 font-family:'bodyfont2';
 font-size: 16pt;
 text-decoration: underline;
 text-transform: lowercade;
 top: 5px;
 left: 5px;
 margin-top: 0px;
 margin-bottom: 0px;
}

.contentfill .contentfill{
 opacity: 1;
 z-index: 1;
 background: transparent;
 top: 35px;
 bottom: 0px;
 right: 0px;
}

.contentfill a, .contentfill a:visited{
 color: white;
 font-weight: 400;
 text-decoration: none;
 -webkit-transition: all 1s;
 transition: all 1s;
}

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

.statfill{
 float: left;
 height: 130px;
 box-sizing: border-box;
 width: 110px;
 overflow: auto;
overflow-x: hidden;
 line-height: 15px;
 margin-right: 15px;
 padding-right: 2px;
 text-align: left;
 word-spacing: 3px;
}

.statfill ::-webkit-scrollbar {
 width: 2px;
 background-color: gray;
}


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


.statfill:nth-child(last){
 margin-right: 0px;
}

.statfill b{
 font-family:'bodyfont2';
 font-size: 12pt;
 font-style: italic;
}

.statfill i{
 font-family:'bodyfont';
 font-size: 14pt;
}

.gallfill{
 float: left;
 filter:grayscale(90%);
 -webkit-filter:grayscale(90%);
 -webkit-transition: all 1s;
 transition: all 1s;
 height: 130px;
 box-sizing: border-box;
 width: 110px;
 text-align: left;
 overflow: hidden;
 background-color: gray;
 margin-right: 5px;
}

.gallfill:hover{
 filter:grayscale(0%);
 -webkit-filter:grayscale(0%);
}

.gallfill img{
 height: 170%;
 overflow: hidden;
}

#musiccontainer{
 opacity: 0;
 -webkit-transition: all 1s;
 transition: all 1s;
}

#whole:hover #musiccontainer,
#div1:target ~ #whole #musiccontainer{
 opacity: 1;
 -webkit-transition: all 2 .5ss;
 transition: all 2s .5s;
}

#musicbar{
 position: absolute;
 bottom: 40px;
 left: 20%;
 height: 15px;
 width: 281px;
 background: rgba(0, 0, 0, 0.61);
 box-shadow: 0px 0px 2px black;
 z-index: 1;
 border-radius: 2px;
 -webkit-transition: all .2s;
 transition: all .2s;
overflow: hidden;
}

#musicbar:active{
background-color: #4E0000 !important; }

#musicbar:hover{
 background: rgba(0, 0, 0, 0.91);
}

#musicbar audio{
 zoom: 1000%;
 opacity: 0;
 margin-top: -13px;
 margin-left: -2px;
}

#musicmarquee{
 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;
 border: 0px solid red;
 z-index: -1;
 text-align: center;
 color: white;
 font-family: 'bodyfont', Times, Arial;
 font-size: 17pt;
 box-sizing: border-box;
 margin-top: -5px;
}

#songselect{
 position: absolute;
 bottom: 35px;
 left: 20%;
 margin-left: 300px;
 height: 20px;
 width: 100px;
 border: 0px solid black;
 box-sizing: border-box;
}

.songss{
 float: left;
 height: 15px;
 width: 15px;
 background: black;
 border-radius: 0px;
 box-sizing: border-box;
 box-shadow: 0px 0px 0px 0px black;
 margin-right: 10px;
 -webkit-transition: all 1s;
 transition: all 1s;
}

.songss:nth-child(4){
 margin-right: 0px;
}

.songss:hover{
 box-shadow: 0px 0px 2px 1px black;
 background: transparent;
 border-radius: 3px;
}

.songtitle{
 position: absolute;
 bottom: 27px;
 left: 0px;
 z-index: -1;
 height: 20px;
 width: 100px;
 box-sizing: border-box;
 background: transparent;
 -webkit-transition: all .5s;
 transition: all .5s;
 opacity: 0;
 box-shadow: 0px 0px 3px black;
 font-family:'bodyfont';
 font-size: 15pt;
 color: black;
 border-radius: 2px;
 font-weight: 600;
 letter-spacing: -1px;
 text-align: center;
}

#leak1:hover ~ #song1,
#leak2:hover ~ #song2,
#leak3:hover ~ #song3,
#leak4:hover ~ #song4{
 opacity: 1;
 z-index: 1;
}

#track1, #track2, #track3, #track4{
 opacity: 0;
}

.songdrop #musicbar{
 -webkit-transition: margin 1s, opacity 1s;
 transition: margin 1s, opacity 1s;
}

#drop2 #musicbar,
#drop3 #musicbar,
#drop4 #musicbar{
margin-bottom: 30px;
 opacity: 0;
}

#drop1 #musicbar{
 opacity: 1;
 margin-bottom: 0px;
}

#track2:checked ~ #whole #drop2 #musicbar,
#track3:checked ~ #whole #drop3 #musicbar,
#track4:checked ~ #whole #drop4 #musicbar{
 margin-bottom: 0px;
 opacity: 1;
}

#track2:checked ~ #whole #drop1 #musicbar,
#track3:checked ~ #whole #drop1 #musicbar,
#track4:checked ~ #whole #drop1 #musicbar{
 opacity: 0;
 margin-bottom: 30px;
}

</style>

<div id="div1">
</div>

<input type="radio" name="divswitch" id="switch1">
<input type="radio" name="divswitch" id="switch2">
<input type="radio" name="divswitch" id="switch3">
<input type="radio" name="divswitch" id="switch4">
<input type="radio" name="divswitch" id="switch5">

<input type="radio" name="songswitch" id="track1">
<input type="radio" name="songswitch" id="track2">
<input type="radio" name="songswitch" id="track3">
<input type="radio" name="songswitch" id="track4">

<div id="whole">

 <div id="straightline">
 <a id="infocontent" href="#div1">

 <div id="floatspread" class="spread1">A<b>rtificial</b>
 </div>

 <div id="floatspread" class="spread2">P<b>artner</b>
 </div>

 <div id="floatspread" class="spread3">:
 </div>

 <div id="floatspread" class="spread4">A<b>nalyze,</b>
 </div>

 <div id="floatspread" class="spread5">T<b>heorize,</b>
 </div>

 <div id="floatspread" class="spread6">H<b>omogenize</b>
 </div>

 <div id="floatspread" class="spread7">(<b>ver.</b>
 </div>

 <div id="floatspread" class="spread8">Y
 </div>

 <div id="floatspread" class="spread9">)</div>

 </a>

 <div id="dropdown">
 <label for="switch1" class="switcher1"><a>v. 1</a></label><br>
 <label for="switch2" class="switcher2"><a>v. 2</a></label><br>
 <label for="switch3" class="switcher3"><a>v. 3</a></label><br>
 <label for="switch4" class="switcher4"><a>v. 4</a></label><br>
 <label for="switch5" class="switcher5"><a>[ x ]</a></label>

 </div>

 <div id="contentarea">
 <div class="contentfill" id="content1">
 <h1>info</h1>
 <div class="contentfill">

 <div class="statfill">

 <b>species</b><br>
 <i>jackalope-type synthesite created for emulating diverse behaviors and cultures.</i>
 </div>

 <div class="statfill">
 <b>selection</b><br>
 <i>APATHY identifies as male and is equipped with a male reproductive organ</i>
 </div>

 <div class="statfill">
 <b>personality</b><br>
 <i>a malfunctioning synthesite, APATHY has been shown to be careless and aggressive.
 </div>

 <div class="statfill">
 <b>stats</b><br>
 <i>height - 6'1"<br>
 build - average<br>
 equip. - 13"<br>
 rating - mature<br>
friend - <a target="_blank" href="http://roleplay.chat/profile.php?user=Amaranthe" title="The Bunbabe." target=_blank>Retto</a><br>
sexually - <a target="_blank" href="http://www.thiscrush.com/~jackadope" target=_blank>open</a><br>

 </i>
 </div>


 </div>
 </div>

 <div class="contentfill" id="content2">
 <h1>history</h1>
 <div class="contentfill">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
 desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 </div>
 </div>

 <div class="contentfill" id="content3">
 <h1>gallery</h1>
 <div class="contentfill">
 <a target="_blank" href="http://i.imgur.com/4rL90kb.png" class="gallfill" target=_blank>
<img src="http://i.imgur.com/4rL90kb.png" /></a>

 <a target="_blank" href="http://i.imgur.com/eR8vSsI.png" class="gallfill" target=_blank>
 <img src="http://i.imgur.com/eR8vSsI.png" /></a>

 <a target="_blank" href="http://i.imgur.com/kU4Lx4O.png" class="gallfill" target=_blank>
 <img src="http://i.imgur.com/kU4Lx4O.png" /></a>

 <a target="_blank" href="http://i.imgur.com/yma3CaF.png" class="gallfill" target=_blank>
<img src="http://i.imgur.com/yma3CaF.png"></a>

 </div>
 </div>

 <div class="contentfill" id="content4">
 <h1>ooc</h1>
 <div class="contentfill">
 code is <a target="_blank" href="http://roleplay.chat/profile.php?user=Digital" target=_blank>mine</a>.<br> still a work in progress.<br> artwork by <a target="_blank" href="http://furaffinity.net/user/koaudo" target=_blank>@koaudo</a> and others, owned by myself.<br>
 </div>
 </div>

 </div>

 <div class="songdrop" id="drop1">
 <div id="musiccontainer">
 <div id="musicbar">
 <div id="musicmarquee">
 <marquee direction="left" scrollamount="3">

 XXX - FLIGHT ATTENDANT
 </marquee>
 </div>
 <audio controls src="http://k003.kiwi6.com/hotlink/bmeyp3s9dc/XXX_-_Official_MV_VOL.mp3" loop=3>
 </audio>
 </div>
 </div>
 </div>


 <div class="songdrop" id="drop2">
 <div id="musiccontainer">
 <div id="musicbar">
 <div id="musicmarquee">
 <marquee direction="left" scrollamount="3">

 HIGH KLASSIFIED - 1250
 </marquee>
 </div>
 <audio controls src="http://k003.kiwi6.com/hotlink/90linpzes2/High_Klassified_1250.mp3" loop=3>
 </audio>
 </div>
 </div>
 </div>


 <div class="songdrop" id="drop3">
 <div id="musiccontainer">
 <div id="musicbar">
 <div id="musicmarquee">
 <marquee direction="left" scrollamount="3">

 THE WEEKND - KING OF THE FALL
 </marquee>
 </div>
 <audio controls src="http://puu.sh/tweog/0b3d4183ef.mp3" loop=3>
 </audio>
 </div>
 </div>
 </div>


 <div class="songdrop" id="drop4">
 <div id="musiccontainer">
 <div id="musicbar">
 <div id="musicmarquee">
 <marquee direction="left" scrollamount="3">

 METAFIVE - LUV U TOKIO
 </marquee>
 </div>
 <audio controls src="http://k003.kiwi6.com/hotlink/s35rip1ufy/METAFIVE_-_Luv_U_Tokio_-Video_Edit-VOL.mp3" loop=3>
 </audio>
 </div>
 </div>
 </div>


 <div id="musiccontainer">
 <div id="songselect">

 <label for="track1"><div class="songss" id="leak1">
 </div>
 <div class="songtitle" id="song1">
 flight attend.
 </div>
 </label>

 <label for="track2"><div class="songss" id="leak2">
 </div>
 <div class="songtitle" id="song2">
 1250
 </div>
 </label>

 <label for="track3"><div class="songss" id="leak3">
 </div>
 <div class="songtitle" id="song3">
 king of the fall
 </div>
 </label>

 <label for="track4"><div class="songss" id="leak4">
 </div>
 <div class="songtitle" id="song4">luv u tokio
 </div>
 </label>

 <div class="songtitle" id="song4">
 </div>
 </div>

 </div>

 </div>

</div>