Apathy post-fall

<style>


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

@font-face{
 src: url(https://dl.dropboxusercontent.com/s/d9ihnqs25298288/somepx.ttf?dl=0);
 font-family: 'bodyfont';
}

@font-face{
src:url(https://dl.dropboxusercontent.com/s/94hr6y0cm4un4at/secuencia.ttf?dl=0);
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 110%;
 background-position: bottom right 10%;
 background-image: url(http://i.imgur.com/a3zTV5I.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;
}

/* Fall Version

#fallbg{
 position: fixed;
 top: 0px;
 right: 0px;
 left: 50vw;
 bottom: 0px;
 background-image:url(https://i.imgur.com/1mR9504.png);
 background-position: 30% 50%;
 background-size: auto 120%;
}

#fallbg:before{
 content:'';
 position: absolute;
 left: -1vw;
 width: 5%;
 background: #4B312C;
 top: -4vh;
 bottom: -4vh;
 z-index: 3;
 -webkit-filter:blur(5px);
}

body{
 background-image:url(https://i.imgur.com/7mqTPLs.png);
 background-color: #A7361B ;
}

#straightline{
 border-top-color: #4b312c;
 border-bottom-color: #4b312c;
background: rgba(166, 78, 57, 0.55);
}

#dropdown{
background: #29120c;}

*/

/* End Of Fall */

/* Start of Winter version. */

body{
 background-image:url(https://www.transparenttextures.com/patterns/connected.png);
 background-color: #272931;
}

#straightline{
 border-top-color: #9e9e9e;
 border-bottom-color: #9e9e9e;
background: rgba(19, 25, 53, .75);
}

#dropdown{
background: rgba(19, 25, 53, 1);}

/* End of Winter */

</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="fallbg">
 </div>

 <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>
orient. - <a target="_blank" href="http://www.thiscrush.com/~jackadope" target=_blank>all</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/puccaruu" target=_blank>@puccaruu</a> and others, owned by myself.<br>
 </div>
 </div>

 </div>

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

 ADIAN COKER - BLUE COLLAR
 </marquee>
 </div>
 <audio controls src="http://k003.kiwi6.com/hotlink/wliln9k4er/Adian_Coker_-_Blue_Collar_-_Kitsun_Hot_Stream_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="drop1">
 <div id="musiccontainer">
 <div id="musicbar">
 <div id="musicmarquee">
 <marquee direction="left" scrollamount="3">

 VASSER - RETRACT
 </marquee>
 </div>
 <audio controls src="http://k003.kiwi6.com/hotlink/p52j8nx6rr/Vasser_-_Retract-_VOL.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="track3"><div class="songss" id="leak1">
 </div>
 <div class="songtitle" id="song1">
 blue collar
 </div>
 </label>

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

 <label for="track1"><div class="songss" id="leak3">
 </div>
 <div class="songtitle" id="song3">
 retract
 </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>