code fixer 1/31/16

<style>

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

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

#whole {
  position: absolute;
  top: 0px;
  left: -5px;
  right: 0px;
  bottom: 0px;
  background-image: url(http://i68.tinypic.com/8zkw9i.jpg);
  background-size: auto 120%;
  background-position: bottom 55px left;
  background-repeat: no-repeat;
  background-color: #111111;
  overflow: hidden;
}

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

* {
  box-sizing: border-box;
}

#startbar {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  background: blue;
}

#backgroundfiller {
  position: absolute;
  top: 50px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  opacity: .7;
  box-shadow: -10px 10px 10px 65px #0082FE;
  box-sizing: border-box;
}

#startbutton {
  position: absolute;
  top: 7px;
  left: 20px;
  height: 30px;
  width: 100px;
  border-radius: 90px 90px 90px 90px;
  background: white;
  box-sizing: border-box;
  box-shadow: 0px 0px 4px 2px black;
  background: #111111;
  -webkit-transition: all .4s;
  transition: all .4s;
}

#startbutton:hover {
  box-shadow: 0px 0px 4px 0px black;
  -webkit-transition: all .2s;
  transition: all .2s;
}

#startbutton .additional {
  color: white;
  text-decotation: none;
  font-style: none;
  font-size: 9pt;
  text-align: center;
  float: left;
  margin-top: 8px;
  margin-left: 23px;
  letter-spacing: 6px;
  font-family: Arial;
  font-weight: 600;
  text-shadow: 1px 1px -1px white;
  -webkit-transition: all .5s;
  transition: all .5s;
}

#startbutton:hover .additional {
  -webkit-transition: all .1s;
  transition: all .1s;
  text-shadow: 1px 1px 5px white;
}

#startmenu {
  position: absolute;
  left: 0px;
  bottom: -45px;
  height: 450px;
  width: 260px;
  border: 0px solid black;
  z-index: -10;
  -webkit-transition: all 1s 10s;
  transition: all 1s 10s;
}

#startbutton:active #startmenu {
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
  z-index: 1;
}

#startmenu:hover {
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
  z-index: 2;
}

#option1 {
  position: absolute;
  height: 50px;
  width: 160px;
  border: 1px solid red;
}

#option2 {
  position: absolute;
  height: 50px;
  width: 160px;
  border: 1px solid red;
}

#option3 {
  position: absolute;
  height: 50px;
  width: 160px;
  border: 1px solid red;
}

#option4 {
  position: absolute;
  height: 50px;
  width: 160px;
  border: 1px solid red;
}

#option1,
#option2,
#option3,
#option4 {
  border-radius: 10px 10px 10px 10px;
  border: 0px solid white;
  opacity: 0;
  z-index: -10;
  margin-top: 10px;
  color: black;
  bottom: 0px;
  -webkit-transition: all 0s 10s, opacity 1s 9s, bottom 1s 9s;
  transition: all 0s 10s, opacity 1s 9s, bottom 1s 9s;
}

#startmenu:hover #option1,
#startmenu:hover #option2,
#startmenu:hover #option3,
#startmenu:hover #option4 {
  -webkit-transition: all 0s .5s, opacity 1s 0s, bottom 1s 0s;
  transition: all 0s .5s, opacity 1s 0s, bottom 1s 0s;
  opacity: 1;
  z-index: 0;
  margin-top: 0px;
}

#startmenu:hover #option1 {
  bottom: 295px
}

#startmenu:hover #option2 {
  bottom: 240px
}

#startmenu:hover #option3 {
  bottom: 185px
}

#startmenu:hover #option4 {
  bottom: 130px;
}

#titlesign {
  position: absolute;
  height: 100%;
  width: 89px;
  border: 0px solid white;
  z-index: 1;
  font-family: ;
  font-size: 25pt;
  letter-spacing: -1px;
  font-family: 'buttonfont';
  text-align: center;
  padding-top: 5px;
  margin-left: 45px;
}

#emblemsign {
  position: absolute;
  height: 100%;
  width: 50px;
  border: 0px solid white;
  z-index: 1;
  background-image: url();
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 0px;
}

#arrowsign {
  position: absolute;
  margin-left: 140px;
  height: 100%;
  width: 19px;
  border-left: 2px dashed black;
  background-image: url(http://i65.tinypic.com/1534qhy.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}

#backgroundfiller2 {
  box-shadow: 0px 0px 0px;
  background: white;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
  opacity: .7;
}

#option1:hover #backgroundfiller2,
#option2:hover #backgroundfiller2,
#option3:hover #backgroundfiller2,
#option4:hover #backgroundfiller2 {
  ;
}

#optioncontainer {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
  border-radius: 10px 10px 10px 10px;
}

#optioncontainer{
  overflow: hidden;
}

#dropmenu {
  position: absolute;
  height: 50px;
  width: 100px;
  border: 1px solid black;
  margin-left: 1070px;
  -webkit-transition: all 2s 1.1s, opacity .5s 1s ;
  transition: all 2s 1.1s, opacity .5s 1s;
  opacity: 0;
  z-index: -10;
  }

#option1:active #dropmenu,
#option2:active #dropmenu,
#dropmenu:hover {
  -webkit-transition: all 0s;
  transition: all 0s;
  opacity: 1;
  z-index: 1;
  margin-left: 170px;
}

#optioncontainer2{
  position: absolute;
  overflow: none;
  border-radius: 0px 0px 0px 0px;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#selectionmenu{
float: left;
  width: 100%;
  height: 17px;
  text-align: center;
  font-family:'buttonfont';
  letter-spacing: 2px;
  font-size:10px;
  border-bottom:2px solid black;
  -webkit-transition: all .5s;
  transition: all .5s;
}

#selectionmenu:hover{
  background: #005AFE;
}

#selectionmenu:active + #notepaddiv
{
  opacity: 1;
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
  z-index: 10;
    top: 100px;
  left: 400px;
}

#selectionmenu:active + #notepaddiv2{
  top:130px; left:435px;
    opacity: 1;
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
  z-index: 10;

}

#selectionmenu:active + #notepaddiv3{
  top:160px; left: 480px;
    opacity: 1;
  -webkit-transition: all 0s 0s;
  transition: all 0s 0s;
  z-index: 10;

}

#notepaddiv, #notepaddiv2, #notepaddiv3{
  position: fixed;
  top: -300px;
  left: -400px;
  height: 250px;
  width: 300px;
  overflow: hidden;
  background: transparent;
  border-radius: 30px 30px 30px 30px;
  z-index: -10;
  opacity: 0;
  -webkit-transition: all 0s 2s, z-index 0s 0s;
  transition: all 0s 2s, z-index 0s 0s;
}

#notepaddiv:hover{
  z-index: 120;
  opacity: 1;
    top: 100px;
  left: 400px;
}

#notepaddiv2:hover{
    z-index: 120;
  opacity: 1;
  top:130px; left:435px;
}
#notepaddiv3:hover{
    z-index: 120;
  opacity: 1;
  top:160px; left: 480px;
}

#notebar{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
    height: 30px;
  border-bottom: 2px solid black;
  z-index: 1;
  font-family:'buttonfont';
  text-align: center;
  font-size: 15pt;
}

#notebody{
  position: absolute;
  top: 32px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: gray;
  z-index: 1;
  font-family:'buttonfont';
  font-size: 15pt;
  text-align: left;
  padding-left: 2px;
  border-radius: 0px 0px 30px 30px;
}

#musicplayer{
  position: fixed;
  right: 0px;
  bottom: 220px;
  height: 220px;
  width: 200px;
  border: 0px solid white;
  overflow: hidden;
  padding-top: 2px;
  -webkit-transition:z-index 0s, all 1s;
  transition: z-index 0s, all 1s;
  z-index: -10;
  opacity: 0;
}


#songselect{
  float: left;
  height: 30px;
  width: 100%;
  border-radius: 5px 5px 5px 5px;
  border: 0px solid red;
  margin-bottom: 4px;
  overflow: hidden;
  font-family:'buttonfont';
  font-size: 12pt;
  padding-top: 4px;
  letter-spacing: 5px;
  text-align: center;
  background: gray;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#songselect:hover{
  background: #0082FE;
}


#playlist{
  position: fixed;
  right: 100px;
  bottom: 100px;
  height: 100px;
  width: 200px;
  border: 0px solid white;
  overflow: hidden;
  z-index: -10;
  opacity: 0;
    -webkit-transition: z-index 0s, all 1s;
  transition: z-index 0s, all 1s;
}

#nowplaying1A,#nowplaying1B,
#nowplaying1C,#nowplaying1D,
#nowplaying1E{
  position: absolute;
  height: 98px;
  width: 198px;
  border: 0px solid red;
  z-index: -2;
  opacity: 0;
  color: black;
    -webkit-transition: all 1s;
  transition: all 1s;
  border-radius: 70px 70px 70px 70px;
  overflow: hidden;
  font-family: 'buttonfont';
  text-align: center;
}

#nowplayingtitle{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 25px;
  border-bottom: 2px solid black;
  padding-top: 1px;
  letter-spacing: 5px;
  z-index: 1;
}

#nowplayingmarquee{
  position: absolute;
  top: 25px;
  left: 0px;
  right: 0px;
  height: 40px;
  width: 100%;
  padding-top: 5px;
  z-index: 1;
  font-size: 20pt;
}

#nowplayingartist{
  position: absolute;
  top: 65px;
  height: 35px;
  width: 100%;
  border-top: 2px solid black;
  padding-top: 5px;
  z-index: 1;
}

#backgroundfill{
  position: absolute;
  z-index: 0;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  opacity: .4;
  background: #0082FE;
}

#list1:target #musicplayer,
#list1A:target #musicplayer,
#list1B:target #musicplayer,
#list1C:target #musicplayer,
#list1D:target #musicplayer,
#list1E:target #musicplayer{
  z-index:1;
  opacity: 1;
  right: 100px;
}

#list1A:target #nowplaying1A,
#list1B:target #nowplaying1B,
#list1C:target #nowplaying1C,
#list1D:target #nowplaying1D,
#list1E:target #nowplaying1E
{opacity: 1;
  -webkit-transition: z-index 0s, opacity 1s .2s;
  transition: z-index 0s, opacity 1s .2s;
z-index: 1;}

#list1A:target #playlist,
#list1B:target #playlist,
#list1C:target #playlist,
#list1D:target #playlist,
#list1E:target #playlist
{z-index:1;
opacity: 1;}

#song1A, #song1B, #song1C, #song1D, #song1E{
  position: fixed;
  opacity: 0;
  top: -300px;
  display: none;
}

#list1A:target #song1A,
#list1B:target #song1B,
#list1C:target #song1C,
#list1D:target #song1D,
#list1E:target #song1E{
  display: block;
}




</style>


<div id="whole">

  <div id="startbar">
    <div id="backgroundfiller" style="background: blue;">
    </div>
    <div id="startbutton">
      <a class="additional">
        start</a>
      <div id="startmenu">

        <div id="option1">

          <div id="optioncontainer">
            <div id="emblemsign" style="background-image:url(http://i66.tinypic.com/j63frm.jpg);">
            </div>
            <div id="titlesign">notes
            </div>
            <div id="arrowsign">
            </div>
            <div id="backgroundfiller2">
            </div>
          </div>

          <div id="dropmenu">
            <div id="optioncontainer2">
              <div id="selectionmenu">coding
              </div>

              <div id="notepaddiv">
                <div id="notebar">
                  coding.
                </div>
                <div id="notebody">
                  I <s>will</s> may code a profile for you.
                </div>
                <div id="backgroundfiller2">
                </div>
              </div>

              <div id="selectionmenu">fixing
              </div>


              <div id="notepaddiv2">
                <div id="notebar">
                  fixing.
                </div>
                <div id="notebody">
                  I <s>will</s> may fix your code.
                </div>
                <div id="backgroundfiller2">
                </div>
              </div>

              <div id="selectionmenu">ooc
              </div>

              <div id="notepaddiv3">
                <div id="notebar">
                  ooc.
                </div>
                <div id="notebody">
                  Please ask nicely.
                  <br>I'm an <b>amateur</b> coder.
                  <br> Profile is WIP.
                  <br>Hover on notes to keep them in place.
                </div>
                <div id="backgroundfiller2">
                </div>
              </div>


            </div>
            <div id="backgroundfiller2">
            </div>
          </div>
        </div>

        <div id="option2">
          <div id="optioncontainer">

            <div id="emblemsign" style="background-image:url(http://i65.tinypic.com/x2qfzd.jpg);">
            </div>
            <div id="titlesign">music
            </div>
            <div id="arrowsign">
            </div>
            <div id="backgroundfiller2">
            </div>
          </div>

          <div id="dropmenu">
            <div id="optioncontainer2">
              <a href=#list1>
                <div id="selectionmenu">list 1
                </div>
              </a>
              <div id="selectionmenu">list 2
              </div>
              <div id="selectionmenu">list 3
              </div>


            </div>
            <div id="backgroundfiller2">
            </div>
          </div>

        </div>

        <div id="option3">
          <div id="optioncontainer">
            <div id="backgroundfiller2">
            </div>

          </div>
        </div>

        <div id="option4">
          <div id="optioncontainer">
            <div id="backgroundfiller2">
            </div>
          </div>
        </div>

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

  <div id="list1">
    <div id="list1A">
      <div id="list1B">
        <div id="list1C">
          <div id="list1D">
            <div id="list1E">

              <div id="song1A">
                <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/nd475uchysfy4a5/01%20Go%20Straight.mp3?dl=1&autoplay=1&loop=1&volume=7&bgcolor1=808080&bgcolor2=808080&slidercolor1=000000&slidercolor2=000000&buttoncolor=000000&buttonovercolor=AA220F" />
</object>
              </div>


              <div id="song1B">
               <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/46au6c92bpbzf1x/01-Ruthless.mp3?dl=1&autoplay=1&loop=1&volume=7&bgcolor1=808080&bgcolor2=808080&slidercolor1=000000&slidercolor2=000000&buttoncolor=000000&buttonovercolor=AA220F" />
</object>
              </div>

              <div id="song1C">
               <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/vqp3zwltan8hxle/1-02%20Turn%20It%20Down%20%28with%20Rebecca%20%26%20Fi.mp3?dl=1&autoplay=1&loop=1&volume=7&bgcolor1=808080&bgcolor2=808080&slidercolor1=000000&slidercolor2=000000&buttoncolor=000000&buttonovercolor=AA220F" />
</object>
              </div>

              <div id="song1D">
               <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/s3kbnokw4zt33oq/102%20-%20AIM%20TO%20WIN%20%28Character%20Select%29.mp3?dl=1&autoplay=1&loop=1&volume=7&bgcolor1=808080&bgcolor2=808080&slidercolor1=000000&slidercolor2=000000&buttoncolor=000000&buttonovercolor=AA220F" />
</object>
              </div>


              <div id="song1E">
               <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://dl.dropboxusercontent.com/u/4556289/Prefuse%2073%20-%20Drum%20Machine%2C%20Cello%2C%20Headwrap.mp3&autoplay=1&loop=1&volume=7&bgcolor1=808080&bgcolor2=808080&slidercolor1=000000&slidercolor2=000000&buttoncolor=000000&buttonovercolor=AA220F" />
</object>
              </div>


              <div id="musicplayer">
                <a href=#list1A>
                  <div id="songselect">
                    go straight

                  </div>
                </a>
                <a href=#list1B>
                  <div id="songselect">
                    ruthless
                  </div>
                </a>
                <a href=#list1C>
                  <div id="songselect">
                    turn it down
                  </div>
                </a>
                <a href=#list1D>
                  <div id="songselect">
                    aim to win
                  </div>
                </a>
                <a href=#list1E>
                  <div id="songselect" style="letter-spacing: 0px;">
                    drum machine, cello, headwrap
                  </div>
                </a>
                <a href=#cancel>
                  <div id="songselect">
                   (CANCEL)
                  </div>
                </a>



              </div>
              <div id="playlist">
                <div id="nowplaying1A">
                  <div id="nowplayingtitle">now playing
                  </div>
                  <div id="nowplayingmarquee">

     <marquee direction="left" scrollamount="3">
       GO STRAIGHT (STREETS OF RAGE 2)
      </marquee>

                  </div>
                  <div id="nowplayingartist">yuzo koshiro
                  </div>
                  <div id="backgroundfill">
                  </div>

                </div>
                <div id="nowplaying1B">

                  <div id="nowplayingtitle">
                    now playing
                  </div>
                  <div id="nowplayingmarquee">

     <marquee direction="left" scrollamount="3">
       RUTHLESS (MAX ANARCHY)
      </marquee>

                  </div>
                  <div id="nowplayingartist">tre-dot
                  </div>
                  <div id="backgroundfill">
                  </div>
                </div>

                <div id="nowplaying1C">
                  <div id="nowplayingtitle">now playing
                  </div>
                  <div id="nowplayingmarquee">

     <marquee direction="left" scrollamount="3">
       TURN IT DOWN (with Rebecca & Fiona) / FIRE & ICE
      </marquee>

                  </div>
                  <div id="nowplayingartist">kaskade
                  </div>
                  <div id="backgroundfill">
                  </div>
                </div>


                <div id="nowplaying1D">
                  <div id="nowplayingtitle">now playing
                  </div>
                  <div id="nowplayingmarquee">
                            <marquee direction="left" scrollamount="3">
       AIM TO WIN (character select) / tekken tag tournament 2
      </marquee>

                  </div>
                  <div id="nowplayingartist">akitaka tohyama
                  </div>
                  <div id="backgroundfill">
                  </div>
                </div>


                <div id="nowplaying1E">
                  <div id="nowplayingtitle">now playing
                  </div>
                  <div id="nowplayingmarquee">
     <marquee direction="left" scrollamount="3">
       DRUM MACHINE, CELLO, HEADWRAP / EXTINGUISHED: OUTTAKES
      </marquee>

                  </div>
                  <div id="nowplayingartist">prefuse 73
                  </div>
                  <div id="backgroundfill">
                  </div>
                </div>
              </div>

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

</div>