temp. Digi code 2/20/16

<style>

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

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

body {
  font-family: 'bodyfont';
}

#whole {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgb(51, 80, 90);
  overflow: hidden;
}

#imagebox {
  position: absolute;
  bottom: 500px;
  left: 400px;
  height: 200px;
  width: 250px;
  border-left: 1px solid white;
  -webkit-transition: all 1s;
  transition: all 1s;
  overflow: hidden;
  width: 1px;
  height: 0px;
}

#imagefiller{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url(http://i66.tinypic.com/fo1268.jpg);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}

#backgroundfiller {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: silver;
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
  opacity: -1;
}

.headerdiv {
  position: absolute;
  top: 2px;
  left: 10px;
  font-weight: 600;
  text-decoration: underline;
  font-size: 20pt;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  z-index: 0;
color: black;
text-align: left;
}

.bodydiv {
  position: absolute;
  top: 30px;
  left: 13px;
  overflow: auto;
  font-size: 15pt;
  border: 0px solid black;
  height: 160px;
  width: 230px;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  z-index: 0;
  line-height: 10px;
color: black;
text-align: left;
}

#linkone:target #head1,
#linkone:target #body1,
#linktwo:target #head2,
#linktwo:target #body2,
#linkthree:target #head3,
#linkthree:target #body3,
#linkfour:target #head4,
#linkfour:target #body4{
  -webkit-transition: all 1s .5s;
  opacity: 1;
  z-index: 1;
}

#linkone:target #backgroundfiller,
#linktwo:target #backgroundfiller,
#linkthree:target #backgroundfiller,
#linkfour:target #backgroundfiller{
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: .7;
}

#bgdiv {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url(http://i67.tinypic.com/15ogz8m.jpg);
  background-repeat: repeat;
  opacity: .4;
}

#divcontainer {
  position: absolute;
  left: 400px;
  bottom: 150px;
  height: 200px;
  width: 200px;
  border: 0px solid white;
}

.selectiondiv {
  float: left;
  height: 20px;
  width: 200px;
  border: 0px solid red;
  color: white;
  overflow: hidden;
  -webkit-transition: all 1s;
  opacity: 0;
}

.sides {
  float: left;
  -webkit-transition: all 1s;
  transition: all 1s;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 4px;
  font-size: 12pt;
  font-family: 'Times';
}

.middle1 {
  float: left;
  -webkit-transition: width 1s, opacity .5s .8s;
  transition: width 1s, opacity .5s .8s;
  overflow: hidden;
  height: 20px;
  width: 20px;
  text-align: center;
  color: black;
  font-size: 18pt;
}

.middle2 {
  float: left;
  -webkit-transition: opacity .5s, width 1s;
  transition: opacity .5s, width 1s;
  overflow: hidden;
  height: 20px;
  width: 0px;
  text-align: center;
  opacity: 0;
  color: black;
  font-size: 16pt;
  box-sizing: border-box;
  padding-top: 3px;
}

.selectiondiv:hover .middle1 {
  -webkit-transition: opacity .5s, width .5s .5s;
  transition: opacity .5s, width .5s .5s;
  opacity: 0;
  width: 0px;
}

.selectiondiv:hover .middle2 {
  -webkit-transition: width 1s, opacity .5s .5s;
  transition: width 1s, opacity .5s .5s;
  width: 150px;
  opacity: 1;
}

#imageright {
  position: absolute;
  bottom: 10px;
  right: 0px;
  height: 650px;
  width: 550px;
  background-image: url(http://i66.tinypic.com/27zl0gi.jpg);
  background-size: auto 100%;
  background-repeat: no-repeat;
  border: 0px solid black;
  background-position: bottom right;
}


#whole:hover #imagebox{
  height: 200px;
  width: 250px;
  bottom: 410px;
}

#whole:hover #imagefiller{
  opacity: 1;
  -webkit-transition: all .5s 2.2s;
  transition: all .5s 2.2s;
}

#whole:hover .selectiondiv:nth-child(1){
  opacity: 1;
  -webkit-transition: all 1s 1s;
  transition: all 1s 1s;
}

#whole:hover .selectiondiv:nth-child(2){
  opacity: 1;
  -webkit-transition: all 1s 1.2s;
  transition: all 1s 1.2s;
}

#whole:hover .selectiondiv:nth-child(3){
  opacity: 1;
  -webkit-transition: all 1s 1.4s;
  transition: all 1s 1.4ss;
}

#whole:hover .selectiondiv:nth-child(4){
  opacity: 1;
  -webkit-transition: all 1s 1.6s;
  transition: all 1s 1.6s;
}

#whole:hover .selectiondiv:nth-child(5){
  opacity: 1;
  -webkit-transition: all 1s 1.8s;
  transition: all 1s 1.8s;
}

#musiccontainer{
  position: absolute;
  bottom: 10px;
  right: 259px;
  height: 30px;
  width: 100px;
}

</style>


<div id="whole">
  <div id="bgdiv">
  </div>

  <div id="linkone">
    <div id="linktwo">
      <div id="linkthree">
        <div id="linkfour">
          <div id="imagebox">
            <div id="imagefiller">
            </div>
            <div id="backgroundfiller">
            </div>

            <div class="headerdiv" id="head1">
              basic info
            </div>
            <div class="bodydiv" id="body1">
              age / late 20's<br>
eyes/red<br>
height/5'9"<br>
gender/male
            </div>


            <div class="headerdiv" id="head2">
              personality
            </div>
            <div class="bodydiv" id="body2">
              Strives to be as 'cool' as possible.
            </div>


            <div class="headerdiv" id="head3">
              likes and dislikes
            </div>
            <div class="bodydiv" id="body3">
              Likes ><br>
              Nice people.<br><br>
              Dislikes ><br>
              Assholes.
            </div>

            <div class="headerdiv" id="head4">
              ooc
            </div>
            <div class="bodydiv" id="body4">
              Character <u>and</u> code are mine.
Music is <a href="https://youtu.be/SuJ6cHeEx4Q" target=_blank>Kasbo</a>.
            </div>

          </div>


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

  <div id="divcontainer">
    <a class="selectiondiv" href=#linkone>
      <span class="sides">|</span>
      <span class="middle1">1</span>
      <span class="middle2">basic info</span>
      <span class="sides">/</span>
    </a>

    <a class="selectiondiv" href="#linktwo">
      <span class="sides">|</span>
      <span class="middle1">2</span>
      <span class="middle2">personality</span>
      <span class="sides">/</span>
    </a>


    <a class="selectiondiv" href="#linkthree">
      <span class="sides">|</span>
      <span class="middle1">3</span>
      <span class="middle2">likes and dislikes</span>
      <span class="sides">/</span>
    </a>

    <a class="selectiondiv" href="#linkfour">
      <span class="sides">|</span>
      <span class="middle1">4</span>
      <span class="middle2">ooc</span>
      <span class="sides">/</span>
    </a>

    <a class="selectiondiv" href="#blank">
      <span class="sides">|</span>
      <span class="middle1">5</span>
      <span class="middle2">reset</span>
      <span class="sides">/</span>
    </a>

  </div>

  <div id="imageright">
  </div>

  <div id="musiccontainer">
<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=http://puu.sh/nfEC1/7ee1b10b86.mp3&autoplay=1&loop=1&volume=10&bgcolor1=64BC9A&bgcolor2=64BC9A&slidercolor1=4D4853&slidercolor2=4D4853&buttonovercolor=ffffff&sliderovercolor=ffffff&buttoncolor=4D4853" />
</object>

</div>
</div>