profile for Phenchar 2/13/16

<style>

body{overflow: hidden;}

body, a, a:hover, a:active, a:visited {
cursor:url(http://puu.sh/n6Nr5/93416114dc.png), auto !important;}

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

#whole{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url(http://i68.tinypic.com/29ku91h.jpg);
  background-repeat: repeat;
  overflow: hidden;
}

#imageframe{
  position: absolute;
  top: 0px;
  left: -200px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 300px;
  width: 300px;
  background-image:url(http://pre02.deviantart.net/00fb/th/pre/i/2015/332/2/e/det_var_han_by_caicyo-d9fep9m.png);
  background-repeat: no-repeat;
  background-position: top right -100px;
  background-size: auto 300%;
  overflow: hidden;
  z-index: 1;
  opacity: .9;
  box-shadow: 1px 1px 3px 2px black;
  z-index: 5;
-webkit-transition: all 1s;
transition: all 1s;
}

#whole:hover #imageframe{
left: -500px;}

#firstdiv{
  position: absolute;
}

.blurring{
  filter:blur(10px);
  -webkit-filter:blur(10px);
  opacity: 1;
  background: black;
}

#topside{
  position: absolute;
  left: 0px;
  top: -10px;
  right: 0px;
  height: 20px;
}

#leftside{
  position: absolute;
  top: 0px;
  left: -10px;
  bottom: 0px;
  width: 20px;
}

#rightside{
  position: absolute;
  right: -10px;
  top: 0px;
  bottom: 0px;
  width: 20px;
}

#bottomside{
  position: absolute;
  bottom: -10px;
  left: 0px;
  right: 0px;
  height: 20px;
}

#doubleframe{
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
    background-image:url(http://pre02.deviantart.net/00fb/th/pre/i/2015/332/2/e/det_var_han_by_caicyo-d9fep9m.png);
  background-repeat: no-repeat;
  background-position: top right -100px;
  background-size: auto 300%;
  opacity: .5;
-webkit-transition: all 1s;
transition: all 1s;
}

#whole:hover #doubleframe{
opacity: 1;}

#backgroundstuff{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
  opacity: .7;
  background-color: #191F2F;
}

@font-face{ src:url(https://dl.dropboxusercontent.com/u/4556289/Heartbeat%20Synchronicity.ttf);
  font-family:'titlefont';
}

#titlearea{
  position: absolute;
  font-family: 'titlefont';
  font-size: 23pt;
  text-align: center;
top: 0px;
  bottom: 330px;
  left: -200px;
  right: 0px;
  margin: auto;
  height: 50px;
  width: 300px;
  color: black;
  text-shadow: 1px 1px 5px #191F2F;
  text-transform:uppercase;
  letter-spacing: 6px;
  opacity: .8;
-webkit-transition: all 1s;
transition: all 1s;
}

#whole:hover #titlearea{
left: -500px;}

#titlearea b{
  color: #B15419;
  font-weight: 400;
}


/* --------------

SWITCH DIV START

-----------------*/

#contentswitch{
  position: absolute;
  top: 75px;
bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 800px;
  height: 400px;
  border: 0px solid black;
  overflow: hidden;
  -webkit-transition: all 1s;
  transition: all 1s;
  filter:blur(2px);
  -webkit-filter:blur(2px);
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#whole:hover #contentswitch{
  -webkit-transition: all 1s .5s, right 1s, opacity 1s 0s;
  transition: all 1s .5s, right 1s, opacity 1s 0s;
  right: -300px;
  opacity: 1;
  filter:blur(0px);
  -webkit-filter:blur(0px);
}

.contentbox{
  position: absolute;
  height: 294px;
  width: 300px;
  border: 0px solid black;
  left: -300px;
  top: 2px;
  opacity: 0;
  -webkit-transition: all 1s, opacity .4s;
  transition: all 1s, opacity .4s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

/* LINK DETAILS */

.thelink{position: absolute;
bottom: 100px;
left: 0px;
right: 0px;
  margin: auto;
  height: 10px;
  width: 200px;
border: 0px solid black;
background: white;
-webkit-transition: all 1s;
transition: all 1s;
z-index: 0;
background: #080913;
  overflow: hidden;
  border-radius: 7px 7px 7px 7px;
  opacity: .3;
}

#thebar{
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 30px;
  right: 30px;
  background: orange;
  -webkit-transition: all 1s;
  transition: all 1s;
  background: #B15419;
  border-radius: 7px 7px 7px 7px;
-webkit-animation: barpulse 2s infinite;
animation: barpulse 2s infinite;
}

.thelink:hover #thebar{
  left: 10px;
  right: 10px;
}

@-webkit-keyframes barpulse{
0%{background: #B15419;}
50%{ background: orange;}
100%{background: #B15419;}
}

@keyframes barpulse{
0%{background: #B15419;}
50%{ background: orange;}
100%{background: #B15419;}
}

/* CONTENT DETAILS */


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


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


.contentbox *{
  box-sizing: border-box;
  text-align: left;
  border: 0px solid #171823;
}

#basics{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 30px;
  margin: auto;
  height: 28px;
  width: 270px;
  opacity: .9;
}

#personality{
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 20px;
  margin: auto;
  height: 200px;
  width: 230px;
  opacity: .9;
}


#history{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  height: 250px;
  width: 230px;
  opacity: .9;
}

#likes{
  position: absolute;
  left: 0px;
  right: 150px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  height: 230px;
  width: 130px;
  opacity: .9;
}

#dislikes{
  position: absolute;
  left: 150px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  height: 230px;
  width: 130px;
  opacity: .9;
}

#ooc{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  margin: auto;
  height: 170px;
  width: 230px;
  opacity: .9;
}

#backgroundfiller{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #171823;
  opacity: .5;
  border: 0px;
}

#innercontent{
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  border: 3px solid #171823;
  text-align: left;
  color: black;
  font-family: 'titlefont';
  font-size: 11pt;
  overflow: hidden;
  letter-spacing: 2px;
  padding-left: 2px;
}

#innercontent b{
  letter-spacing: 1.5px;
  color: #995127;
  text-shadow: 1px 1px 5px black;
  font-style: italic;
  text-transform: uppercase;
}

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

#innercontent2{
  position: absolute;
  top: 20px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: auto;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 5px;
  font-size: 11pt;
  font-family:'textfont';
  font-weight: 600;
  letter-spacing: 1px;
}

/* NEUTRAL */

#firstbox{
  left: 250px;
  opacity: 1;
}

#firstlink{
  z-index: 1;
}


/* condition 1 */
#condition1:target #secondlink{
  z-index: 2;
}

#condition1:target #secondbox{
  left: 250px;
  opacity: 1;
}

#condition1:target #firstbox{
  left: 1000px;
  opacity: 0;
}

/* condition 2 */

#condition2:target #thirdlink{
  z-index: 2;
}

#condition2:target #thirdbox{
  left: 250px;
  opacity: 1;
}

#condition2:target #secondbox{
  left: 1000px;
}

#condition2:target #firstbox{
  left: 1000px;
  opacity: 0;
}


/* condition 3 */

#condition3:target #fourthlink{
  z-index: 2;
}

#condition3:target #fourthbox{
  left: 250px;
  opacity: 1;
}

#condition3:target #thirdbox{
  left: 1000px;
}

#condition3:target #firstbox{
  left: -300px;
  opacity: 0;
}

/* condition 4 */

#condition4:target #fourthbox{
  left: 1000px;
}

#condition4:target #firstbox{
  left: 250px;
  opacity: 1;
}

/* all conditions */

#condition1:target #secondbox,
#condition2:target #thirdbox,
#condition3:target #fourthbox,
#condition4:target #firstbox{
  -webkit-transition: all 1s, opacity .4s .35s;
}

/* --------------

SWITCH DIV END

-----------------*/

/* MUSIC PLAYER */

#musiccontainer{
  position: absolute;
  bottom: 10px;
  left: 10px;
  height: 20px;
  width: 21px;
  border: 0px solid black;
background: #11101A;
-webkit-transition: all 1s;
transition: all 1s;
overflow: hidden;
}

#musiccontainer:hover{
width: 200px;}

#playerhold{
  position: absolute;
  left: 0px;
  top: 0px;
  height: 20px;
  width: 200px;
  border: 0px solid black;
overflow: hidden;
}

#playerholdzoom{
  position: absolute;
  height: 100%;
  width: 35px;
  border: 0px solid red;
  overflow: hidden;
margin-left: -25px;
margin-top: 0px;
zoom: 200%;
}

#detailshold{
  position: absolute;
  left: 22px;
  top: 0px;
  height: 20px;
  width: 180px;
  font-family: 'titlefont';
  font-size: 11pt;
  letter-spacing: 3px;
  color: black;
box-sizing: border-box;
padding-left: 2px;
padding-top: 1px;
color: #545863;
overflow: hidden;
text-transform: uppercase;
}

#detailshold b{
color: #B15419; }

</style>

<div id="whole">
  <div id="imageframe">
    <div id="topside" class="blurring">
    </div>
    <div id="leftside" class="blurring">
    </div>
    <div id="rightside" class="blurring">
    </div>
    <div id="bottomside" class="blurring">
    </div>
    <div id="doubleframe">
    </div>
  </div>

  <div id="backgroundstuff">
  </div>

  <div id="titlearea">
    <b>C</b>haracter <b>N</b>ame
  </div>



<div id="condition1">
  <div id="condition2">
    <div id="condition3">
      <div id="condition4">


        <div id="contentswitch">

          <div id="firstbox" class="contentbox">
            <div id="basics">
              <div id="backgroundfiller">
              </div>
              <div id="innercontent" style="text-align: center;">
                <b>name</b> / age / <b>species</b> / M/F</b>
              </div>
            </div>

            <div id="personality">
              <div id="backgroundfiller">
              </div>
              <div id="innercontent">
                <b>personality</b>
                <div id="innercontent2">
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.
                  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>
          </div>

          <div id="secondbox" class="contentbox">
            <div id="history">
                            <div id="backgroundfiller">
              </div>
              <div id="innercontent">
                <b>history</b>
                <div id="innercontent2">
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.
                  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>
          </div>
          <div id="thirdbox" class="contentbox">

            <div id="likes">
                            <div id="backgroundfiller">
              </div>
              <div id="innercontent"><b>likes</b>
                <div id="innercontent2">
                  likes<br>
                  likes<br>
                  likes<br>
                  likes<br>
                  likes<br>
                </div>
              </div>
            </div>

            <div id="dislikes">
                            <div id="backgroundfiller">
              </div>
              <div id="innercontent">
                <b>dislikes</b>
                <div id="innercontent2">
                  dislikes<br>
                  dislikes<br>
                  dislikes<br>
                  dislikes<br>
                  dislikes<br>
                </div>
              </div>
            </div>

          </div>
          <div id="fourthbox" class="contentbox">
            <div id="ooc">
                            <div id="backgroundfiller">
              </div>
              <div id="innercontent">
                <b>ooc</b>
                <div id="innercontent2">
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.
                  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>
          </div>

          <a href="#condition1" id="firstlink" class="thelink">
            <div id="thebar">
            </div>
          </a>
          <a href="#condition2" id="secondlink" class="thelink">
            <div id="thebar">
            </div>
          </a>
          <a href="#condition3" id="thirdlink" class="thelink">
            <div id="thebar">
            </div>
          </a>
          <a href="#condition4" id="fourthlink" class="thelink">
            <div id="thebar">
            </div>
          </a>

        </div>

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


<div id="musiccontainer">
<div id="playerhold">
<div id="playerholdzoom">
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://puu.sh/n6LvG/c9fb36c577.mp3&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
</div>
</div>
<div id="detailshold">
    <div id="marqueeholder">
     <marquee direction="left" scrollamount="5">
       <b>H</b>AYWYRE / <b>I AM YOU</b> / <b>T</b>WO FOLD, PT. 2
      </marquee>

</div>
</div>

</div>