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-size: auto 130%;
 background-position: top 15% right;
 background-image:url(http://i.imgur.com/4rL90kb.png);
 background-repeat: no-repeat;
}

#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;
 text-align: left;
 overflow: auto;
 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>
relation - <a 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 href="http://i.imgur.com/4rL90kb.png" class="gallfill" target=_blank><img src="http://i.imgur.com/4rL90kb.png" />
          </a>
          <a href="http://i.imgur.com/eR8vSsI.png" class="gallfill" target=_blank>
            <img src="http://i.imgur.com/eR8vSsI.png" />
          </a>
          <a href="http://i.imgur.com/kU4Lx4O.png" class="gallfill" target=_blank>
            <img src="http://i.imgur.com/kU4Lx4O.png" /></a>
          <a class="gallfill" target=_blank>
          </a>
        </div>
      </div>

      <div class="contentfill" id="content4">
        <h1>ooc</h1>
        <div class="contentfill">
          code is <a href="http://roleplay.chat/profile.php?user=Digital" target=_blank>mine</a><br> still a work in progress.<br> artwork by <a 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">

              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="drop2">
      <div id="musiccontainer">
        <div id="musicbar">
          <div id="musicmarquee">
            <marquee direction="left" scrollamount="3">

              MARION BAND$ - HOLD UP (feat. NIPSEY HUSSLE)
            </marquee>
          </div>
          <audio controls src="http://k003.kiwi6.com/hotlink/dl8tp6b7ec/Marion_Band_-_Hold_Up_feat._Nipsey_Hussle_GTA_V_Soundtrack_VOL.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">

              KREPT AND KONAN - DON'T WASTE MY TIME
            </marquee>
          </div>
          <audio controls src="http://k003.kiwi6.com/hotlink/md84faqmks/krept-and-konan-don-t-waste-my-time_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">

              RUN THE JEWELS - BLOCKBUSTER NIGHT Pt. 1
            </marquee>
          </div>
          <audio controls src="http://k003.kiwi6.com/hotlink/3gcicb4k9v/Run_The_Jewels_-_Blockbuster_Night_Part_1_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">
        king of the fall
      </div>
      </label>

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

        <label for="track3"><div class="songss" id="leak3">
        </div>
              <div class="songtitle" id="song3">
        waste my time
      </div>
      </label>

        <label for="track4"><div class="songss" id="leak4">
        </div>
        <div class="songtitle" id="song4">block night p.1
      </div>
      </label>

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

    </div>

  </div>

</div>