FINAL Arc

<style>

@import url(//fonts.googleapis.com/css?family=Press+Start+2P);

.pfor {display: none;}
#profile{background: transparent; border: 0px;}

a,
a:hover {
  text-decoration: none;
  color: black;
}

body {}

#whole {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url(http://i57.tinypic.com/2rdxovs.jpg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
color: black;
}

#bigbackground {
  position: absolute;
  background-image: url(http://i59.tinypic.com/qsa0wo.jpg);
  background-repeat: no-repeat;
  background-size: auto 110%;
  background-position: 500px;
  background-color: transparent;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
-webkit-filter:grayscale(0%);
filter:grayscale(0%);
-webkit-transition: all 3s;
transition: all 3s;
}

#menu {
  position: absolute;
  left: 100px;
  top: 100px;
  height: 300px;
  width: 300px;
  border: 0px solid black;
  font-family: 'Press Start 2P', Times;
  font-size: 7pt;
  text-align: center;
}

#box1 {
  position: absolute;
  top: 10px;
  left: 0px;
  height: 40px;
  width: 200px;
  border: 0px solid red;
}

#box2 {
  position: absolute;
  top: 50px;
  left: 0px;
  height: 40px;
  width: 200px;
  border: 0px solid red;
}

#box3 {
  position: absolute;
  top: 90px;
  left: 0px;
  height: 40px;
  width: 200px;
  border: 0px solid red;
}

#box4 {
  position: absolute;
  top: 130px;
  left: 0px;
  height: 40px;
  width: 200px;
  border: 0px solid red;
}

#sec1A {
  position: absolute;
  top: 1px;
  right: 0px;
  height: 30px;
  width: 60px;
  border: 2px solid black;
  background-color: #E62041;
  box-sizing: border-box;
  box-shadow: -4px 0px 2px black;
  z-index: 3;
  padding-top: 8px;
  transition: all 1s;
  -webkit-transition: all 1s;

}

#sec1B {
  position: absolute;
  top: -1px;
  right: 15px;
  height: 30px;
  width: 60px;
  border: 2px solid black;
  background-color: #681D21;
  box-sizing: border-box;
  box-shadow: -2px 0px 2px black;
  z-index: 2;
  padding: 7px;
  transition: all 1s;
  -webkit-transition: all 1s;

}

#sec1C {
  position: absolute;
  top: -3px;
  right: 25px;
  height: 30px;
  width: 60px;
  border: 2px solid black;
  background-color: #312227;
  box-sizing: border-box;
  box-shadow: -1px 0px 2px black;
  z-index: 1;
  padding: 7px;
  transition: all 1s;
  -webkit-transition: all 1s;

}

.smoothspread {}

.smoothspread:hover #sec1A,
.smoothspread:hover #sec1B,
.smoothspread:hover #sec1C {
  box-shadow: 0px 0px 0px black;
}

.smoothspread:hover #sec1B {
  top: 1px;
  right: 65px;
}

.smoothspread:hover #sec1C {
  right: 131px;
  top: 1px;
  transition: all 1s .03s;
  -webkit-transition: all 1s .03s;
}

#sec1A:hover,
#sec1B:hover,
#sec1C:hover {
  -webkit-animation: blinker .6s infinite;
}

#sec1A:active,
#sec1B:active,
#sec1C:active{
background: white !important;
 transition: all .1s;
  -webkit-transition: all .1s;
}

@keyframes blinker {
  0% {
    border: 2px solid transparent;
  }

  50% {
    border: 2px solid black;
  }
  100% {
    border: 2px solid transparent;
  }
}

@-webkit-keyframes blinker {
  0% {
    border: 2px solid transparent;
  }
  50% {
    border: 2px solid black;
  }
  100% {
    border: 2px solid transparent;
  }
}

#middleline {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 0%;
  border: 1px solid #393939;
  background: #C12A49;
  opacity: .5;
  z-index: -1;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.middlecontent {
  position: absolute;
  top: 0px;
  bottom: 8px;
  left: 240px;
  margin: auto;
  height: 0px;
  width: 300px;
  border: 0px solid black;
  box-sizing: border-box;
  z-index: 2;
  color: black;
  font-size: 8pt;
  font-family: 'Press Start 2P', Times;
  padding-top: 15px;
  transition: height: ;
  -webkit-transition: all 1s;
  overflow: hidden;
opacity: 0;
text-align: left;
}

.middlecontent:target {
  height: 50px;
  z-index: 3;
}


#whole:hover #middleline{
  height: 8%;
  transition: all 1s;
  -webkit-transition: all 1s;
}

#whole:hover .middlecontent {
opacity: 1;
}

#whole:hover #bigbackground{
-webkit-filter:grayscale(0%);
filter:grayscale(0%);}

#musicman {position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: white;
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;
overflow: hidden;
box-sizing: border-box;
padding-top: 6px;}
#musicman:hover {opacity: 1;}



</style>


<div id="whole">

  <div id="bigbackground">
  </div>
  <div id="menu">


    <div id="box1" class="smoothspread">
      <a href=#S1A>
        <div id="sec1A">ARC
        </div>
      </a>
      <a href=#S1B>
        <div id="sec1B">STORY
        </div>
      </a>
      <div id="sec1C">????
      </div>
    </div>

    <div id="box2" class="smoothspread">
      <a href=#S2A>
        <div id="sec1A" style="background:#939391;">STATS
        </div>
      </a>
      <a href=#S2B>
        <div id="sec1B" style="background:#958B89;">PWRS
        </div>
      </a>
      <a href=#S2C>
        <div id="sec1C" style="background:#452B2E;">INV
        </div>
      </a>
    </div>

    <div id="box3" class="smoothspread">
      <a href=#S3A>
        <div id="sec1A" style="background:#732F3C;">EXTRA
        </div>
      </a>
<a href="http://www.thiscrush.com/~arcsenal" target="_blank">
      <div id="sec1B" style="background:#491517;">CRUSH
      </div>
      </a>
<a href="http://ask.fm/arcsenal" target="_blank">
      <div id="sec1C" style="background:#2A201F;">ASK?
      </div>
      </a>
    </div>

    <div id="box4" class="smoothspread">
      <a href=#S4A>
        <div id="sec1A" style="background:#A5A8BB">OOC
        </div>
      </a>

        <div id="sec1B" style="background:#737780;">MUSIC
          <div id="musicman">
<div style="width: 14px; position: absolute; overflow: hidden; left: 6px; top: -4px; zoom:200%;">
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="129" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
    <param name="wmode" value="transparent" />
    <param name="FlashVars" value="mp3=https://www.dropbox.com/s/sy5hdlnyip4ymb7/Mystery%20Skulls%20-%20Paralyzed%20%5BOfficial%20Music%20Video%5D.mp3?dl=1&autoplay=1&loop=1&volume=10&bgcolor1=ffffff&bgcolor2=ffffff&slidercolor1=000000&slidercolor2=000000&buttoncolor=E62041" />
</object>
</div>

</div>
        </div>

      <a href="http://i61.tinypic.com/dwuk1z.jpg" target="_blank">
        <div id="sec1C" style="background:#32345B">IMAGE
        </div>
      </a>
    </div>
  </div>

  <div id="middleline">
  </div>

  <div id="S1A" class="middlecontent">Arc Arsenal / Male / ??? / Pansexual
  </div>

  <div id="S1B" class="middlecontent">Background information.
  </div>

  <div id="S1C" class="middlecontent">Enter information here 2.
  </div>

  <div id="S2A" class="middlecontent">6'2" / Average-Athletic Build / Crimson

Eyes / Auburn Hair / <a href="http://roleplay.chat/profile.php?user=Kalypso"

target="_blank" style="color:pink;">Taken</a>
  </div>

  <div id="S2B" class="middlecontent"><font style="letter-spacing:10px;

color: red;">Devil Driver</font><br>
Contracts devils to reproduce demonic abilities.
  </div>

  <div id="S2C" class="middlecontent">Has stuff.
  </div>

  <div id="S3A" class="middlecontent">Various content... at some point.
  </div>

  <div id="S3B" class="middlecontent">
  </div>

  <div id="S3C" class="middlecontent">
  </div>

  <div id="S4A" class="middlecontent">
    Profile is a WIP. Code is <a href="http://roleplay.chat/profile.php?

user=Exael" target="_blank" style="color: silver;">mine</a>.
    Art is not. Song is <a href="https://www.youtube.com/watch?v=MdPupUIncgc"

target="_blank" style="color:silver;">Paralyze</a>.
  </div>

  <div id="S4B" class="middlecontent">
    Music links here.
  </div>

  <div id="S4C" class="middlecontent">
    Nothing here.
  </div>

</div></div></center>