Magi 1/10/16

<style>

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

/*
color - A18A99
*/

#whole {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://i64.tinypic.com/k2ml2a.jpg);
  background-repeat: repeat;
color: black;
text-align: left;
}

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

::-webkit-scrollbar {
  width: 4px;
  background-color: #D2C0C1;
}

::-webkit-scrollbar-thumb {
  border-radius: 0px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: grey;
}

#holder {
  position: absolute;
  left: 300px;
  width: 400px;
  height: 200px;
  border: 0px solid black;
  background: transparent;
  box-sizing: border-box;
  padding-left: 10px;
  padding-top: 10px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  z-index: 4;
  opacity: 0;
  transition: all 1s;
  -webkit-transition: all 1s;
}

#whole:hover #holder{
  transition: all 1s 1.5s;
  -webkit-transition: all 1s 1.5s;
  opacity: 1;
}

.linextend,
.linextend2,
.linextend3,
.linextend4,
.linextend5 {
  float: left;
  width: 2px;
  height: 20px;
  transition: all 1s;
  -webkit-transition: all 1s;
  background: black;
}

#whole:hover .linextend {
  height: 150px;
}

#whole:hover .linextend2 {
  height: 120px;
}

#whole:hover .linextend3 {
  height: 90px;
}

#whole:hover .linextend4 {
  height: 60px;
}

#whole:hover .linextend5 {
  height: 40px;
}

#whole:hover .linextend,
#whole:hover .linextend2,
#whole:hover .linextend3,
#whole:hover .linextend4,
#whole:hover .linextend5{
  transition: all 2s 2s;
  -webkit-transition: all 2s 2s;
}

.selectionthing {
  float: left;
  height: 90px;
  width: 1px;
  border: 0px solid black;
  transition: width 1s, opacity .5s, margin 1s;
  -webkit-transition: width 1s, opacity .5s, margin 1s;
  margin-right: 15px;
  opacity: 0;
  overflow: hidden;
}

.textthing {
  position: relative;
  height: 10px;
  width: 80px;
  transform: rotate(90deg);
  border: 0px solid red;
  margin-left: -30px;
  margin-top: 42px;
  color: black;
  font-family: Arial;
  font-size: 8pt;
  font-weight: 600;
}

.laneselector:hover + .selectionthing,
.laneselector2:hover + .selectionthing,
.laneselector3:hover + .selectionthing,
.laneselector4:hover + .selectionthing,
.laneselector5:hover + .selectionthing {
  transition: width 1s, opacity 1s .5s, margin 1s;
  -webkit-transition: width 1s, opacity 1s .5s, margin 1s;
  width: 20px;
  opacity: 1;
  margin-right: 5px;
}

.laneselector,
.laneselector2,
.laneselector3,
.laneselector4,
.laneselector5 {
  position: absolute;
  height: 160px;
  width: 10px;
  border: 0px solid black;
  transition: all 1s;
  -webkit-transition: all 1s;
  z-index: 1;
}

.laneselector {
  left: 5px;
}

.laneselector2 {
  left: 23px;
}

.laneselector3 {
  left: 41px;
}

.laneselector4 {
  left: 59px;
}

.laneselector5 {
  left: 77px;
}

.laneselector:hover,
.laneselector2:hover,
.laneselector3:hover,
.laneselector4:hover,
.laneselector5:hover {
  width: 23px;
}

.laneselector:hover ~ .laneselector2,
.laneselector2:hover ~ .laneselector3,
.laneselector3:hover ~ .laneselector4,
.laneselector4:hover ~ .laneselector5 {
  margin-left: 10px;
  z-index: 2;
}

#titleholder {
  position: absolute;
  top: -210px;
  bottom: 0px;
  margin: auto;
  left: 294px;
  height: 40px;
  width: 120px;
  border: 0px solid black;
  box-sizing: border-box;
  padding-top: 5px;
  font-weight: 400;
  font-family: Tahoma;
  font-size: 10pt;
  text-align: center;
}

.alettertop,
.blettertop,
.clettertop,
.dlettertop {
  position: absolute;
  top: -60px;
  left: 0px;
  height: 20px;
  width: 20px;
  border: 0px solid black;
  transition: all 1s;
  -webkit-transition: all 1s;
  opacity: 0;
}

.aletterleft,
.bletterleft,
.cletterleft,
.dletterleft {
  position: absolute;
  left: -60px;
  top: 0px;
  height: 20px;
  width: 20px;
  border: 0px solid black;
  transition: all 1s;
  -webkit-transition: all 1s;
  opacity: 0;
}

.aletterright,
.bletterright,
.cletterright,
.dletterright {
  position: absolute;
  left: 60px;
  top: 0px;
  height: 20px;
  width: 20px;
  border: 0px solid black;
  transition: all 1s;
  -webkit-transition: all 1s;
  opacity: 0;
}

.aletterbottom,
.bletterbottom,
.cletterbottom,
.dletterbottom {
  position: absolute;
  left: 0px;
  top: 60px;
  height: 20px;
  width: 20px;
  border: 0px solid black;
  transition: all 1s;
  -webkit-transition: all 1s;
  opacity: 0;
}

.lettercenter {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 20px;
  width: 20px;
  border: 0px solid black;
  transition: all 1s;
  -webkit-transition: all 1s;
  font-weight: 800;
  text-decoration: underline;
  opacity: 0;
}

#letterholder {
  position: absolute;
  margin-left: 3px;
  height: 20px;
  width: 20px;
  border: 0px solid black;
  transition: all 1s;
  -webkit-transition: all 1s;
  z-index: 1;
}

#whole:hover .alettertop,
#whole:hover .aletterleft,
#whole:hover .aletterright,
#whole:hover .aletterbottom {
  transition: all 1s .75s;
  -webkit-transition: all 1s .75s;
  top: 0px;
  left: 0px;
  opacity: 1;
}

#whole:hover .blettertop,
#whole:hover .bletterleft,
#whole:hover .bletterright,
#whole:hover .bletterbottom {
  transition: all 1s .5s;
  -webkit-transition: all 1s .5s;
  top: 0px;
  left: 0px;
  opacity: 1;
}

#whole:hover .clettertop,
#whole:hover .cletterleft,
#whole:hover .cletterright,
#whole:hover .cletterbottom {
  transition: all 1s .25s;
  -webkit-transition: all 1s .25s;
  top: 0px;
  left: 0px;
  opacity: 1;
}

#whole:hover .dlettertop,
#whole:hover .dletterleft,
#whole:hover .dletterright,
#whole:hover .dletterbottom {
  transition: all 1s;
  -webkit-transition: all 1s;
  top: 0px;
  left: 0px;
  opacity: 1;
}

#whole:hover .lettercenter {
  opacity: 1;
  transition: all 1s 2s;
  -webkit-transition: all 1s 2s;
}

#imageholder{
  position: absolute;
  top: -20px;
  bottom: 0px;
  margin: auto;
  left: 450px;
  height: 250px;
  width: 300px;
  border: 0px solid black;
  background-image:url(http://oi58.tinypic.com/anhbp.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  border-radius: 10px;
  overflow: hidden;
  transition: all 1s;
  -webkit-transition: all 1s;
}

#whole:hover #imageholder{
  transition: all 2s 3s;
  -webkit-transition: all 2s 3s;
  filter:grayscale(60%);
  -webkit-filter:grayscale(60%);
}

#borderblurtop{
top: -5px;
left: -5px;
right: -5px;
  height: 20px;}

#borderblurleft{
  top: -5px;
  left: -5px;
bottom: -5px;
width: 20px;}

#borderblurright{
top: -5px;
  right: -5px;
bottom: -5px;
width: 20px;}

#borderblurbottom{
  bottom: -5px;
  left: -5px;
  right: -5px;
  height: 20px;
}

#borderblurtop, #borderblurleft,
#borderblurright, #borderblurbottom{
  position: absolute;
filter:blur(10px);
-webkit-filter:blur(5px);
background: white;
}

#musicloader{position: absolute;
  top: 260px;
  bottom: 0px;
  left: 544px;
  margin: auto;
  height: 20px;
  width: 200px;
  border: 0px solid black;
}



#contentbox {
  position: absolute;
  top: -23px;
  bottom: 0px;
  left: 463px;
  margin: auto;
  height: 233px;
  width: 275px;
  border: 0px solid black;
  z-index: 5;
  box-shadow: 2px 2px 10px black;
  opacity: 0;
  transition: all 1s;
  -webkit-transition: all 1s;
z-index: 4;
border-radius: 3px 3px 3px 3px;
}

#backgroundfiller {
  position: absolute;
  background: white;
  height: 100%;
  width: 100%;
  opacity: .8;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.boxheader {
  position: absolute;
  top: 8px;
  left: 5px;
  height: 20px;
  width: 150px;
  font-family: Calibri;
  font-size: 9pt;
  border: 0px solid black;
  letter-spacing: 3px;
  font-weight: 600;
  opacity: 0;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.textstuff {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 185px;
  overflow: auto;
  border: 0px solid black;
  font-family: 'bodyfont';
  font-size: 10pt;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: left;
  text-indent: 20px;
  color: black;
  opacity: 0;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.statstuff {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 185px;
  overflow: auto;
  border: 0px solid black;
  font-family: 'bodyfont';
  font-size: 10pt;
  font-weight: 400;
  letter-spacing: 2px;
  text-align: left;
  color: black;
  list-style: square;
  box-sizing: border-box;
  line-height: 18px;
  opacity: 0;
  transition: all 1s;
  -webkit-transition: all 1s;
}

#selectcontentbox1,
#selectcontentbox2,
#selectcontentbox3,
#selectcontentbox4{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;}


#selectcontentbox1:target #contentbox,
#selectcontentbox1:target #headerintro,
#selectcontentbox1:target #contentintro,

#selectcontentbox2:target #contentbox,
#selectcontentbox2:target #headerstats,
#selectcontentbox2:target #contentstats,

#selectcontentbox3:target #contentbox,
#selectcontentbox3:target #headerhistory,
#selectcontentbox3:target #contenthistory,

#selectcontentbox4:target #contentbox,
#selectcontentbox4:target #headerooc,
#selectcontentbox4:target #contentooc
{
  opacity: 1;
z-index: 5;
}

</style>

<div id="whole">
<div id="selectcontentbox1">
<div id="selectcontentbox2">
<div id="selectcontentbox3">
<div id="selectcontentbox4">


  <div id="titleholder">

    <div id="letterholder">
      <div class="alettertop">m
      </div>
      <div class="aletterleft">m
      </div>
      <div class="aletterright">m
      </div>
      <div class="aletterbottom">m
      </div>
      <div class="lettercenter">m
      </div>
    </div>

    <div id="letterholder" style="margin-left: 30px;">
      <div class="blettertop">a
      </div>
      <div class="bletterleft">a
      </div>
      <div class="bletterright">a
      </div>
      <div class="bletterbottom">a
      </div>
    </div>

    <div id="letterholder" style="left: 54px;">
      <div class="clettertop">g
      </div>
      <div class="cletterleft">g
      </div>
      <div class="cletterright">g
      </div>
      <div class="cletterbottom">g
      </div>
    </div>

    <div id="letterholder" style="left: 82px;">
      <div class="dlettertop">i
      </div>
      <div class="dletterleft">i
      </div>
      <div class="dletterright">i
      </div>
      <div class="dletterbottom">i
      </div>
    </div>

  </div>

  <div id="holder">

    <div class="linextend">
    </div>
<a href="#selectcontentbox1" class="laneselector">
</a>
    <div class="selectionthing">
      <div class="textthing">
        intro
      </div>
    </div>
    <div class="linextend2">
    </div>
<a href="#selectcontentbox2" class="laneselector2">
</a>
    <div class="selectionthing">
      <div class="textthing">
        stats.
      </div>
    </div>
    <div class="linextend3">
    </div>
<a href="#selectcontentbox3" class="laneselector3">
</a>
    <div class="selectionthing">
      <div class="textthing">
        history.
      </div>
    </div>
    <div class="linextend4">
    </div>
<a href="#selectcontentbox4" class="laneselector4">
   </a>
    <div class="selectionthing">
      <div class="textthing">
        ooc.
      </div>
    </div>
    <div class="linextend5">
    </div>
<a href="#selectcontentbox5" class="laneselector5">
</a>
    <div class="selectionthing">
      <div class="textthing">
        rs
      </div>
    </div>
  </div>


<div id="imageholder">

  <div id="borderblurtop">
  </div>
  <div id="borderblurleft">
  </div>
  <div id="borderblurright">
  </div>
  <div id="borderblurbottom">
  </div>
</div>

  <div id="musicloader">
    <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/C2C%20-%20Down%20The%20Road%20%28Cherokee%20Remix%29.mp3&autoplay=1&loop=1&volume=10&bgcolor1=ffffff&bgcolor2=ffffff&slidercolor1=000000&slidercolor2=000000&buttoncolor=646065&buttonovercolor=ffffff" />
</object>
  </div>

<div style="position: absolute;
right: 20px;
bottom: 20px;">
wip.</div>


  <div id="contentbox">
            <div id="backgroundfiller">
            </div>
            <div id="headerintro" class="boxheader">// intro
            </div>

            <div id="headerstats" class="boxheader">// stats
            </div>

            <div id="headerhistory" class="boxheader">// history
            </div>

            <div id="headerooc" class="boxheader">// ooc
            </div>

            <div id="contenthistory" class="textstuff">
              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.
              <br>
              <br> 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 id="contentintro" class="textstuff">
              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.
              <br>
              <br> 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 id="contentooc" class="textstuff">
              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.
              <br>
              <br> 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 id="contentstats" class="statstuff">
              <ul>
                <li>BOO.</li>
                <li>BOO.</li>
                <li>BOO.</li>
                <li>BOO.</li>
                <li>BOO.</li>
                <li>BOO.</li>
                <li>BOO.</li>
              </ul>
            </div>
          </div>




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