Evans

<style>

body{overflow: hidden;}

/* 991641
6E181B
802F2F */

* {
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://i68.tinypic.com/o72dt4.jpg);
 background-repeat: no-repeat;
 background-position: top center;
 background-size: auto 150%;
 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://i68.tinypic.com/o72dt4.jpg);
 background-repeat: no-repeat;
 background-position: top center;
 background-size: auto 150%;
 opacity: .8;
-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: .85;
 background-color: #3A0707;
}

@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: #8E0E0D;
 font-weight: 400;
text-shadow: 1px 1px 1px black;}


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

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;
-webkit-transition: all 1s;
transition: all 1s;
z-index: 0;
background: #633E3E;
 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: #8E0E0D;
 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: #8E0E0D;}
50%{ background: black;}
100%{background: #8E0E0D;}
}

@keyframes barpulse{
0%{background: #8E0E0D;}
50%{ background: black;}
100%{background: #8E0E0D;}
}

/* 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: white;
 opacity: .7;
 border: 0px;
}

#innercontent{
 position: absolute;
 top: 2px;
 left: 2px;
 right: 2px;
 bottom: 2px;
 border: 3px solid #251718;
 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: #8E0E0D;
 text-shadow: 1px 1px 1px 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: 23px;
 border: 0px solid black;
background: #0C0708;
-webkit-transition: all 1s;
transition: all 1s;
overflow: hidden;
border-radius: 3px 3px 3px 3px;
}

#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: -8px;
margin-top: -4px;
}

#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: 3px;
color: #545863;
overflow: hidden;
text-transform: uppercase;
}

#detailshold b{
color: white; }

</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>A</b>rcher <b>E</b>vans
 </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; letter-spacing: 1px;">
 <b>archer evans</b> / 34 / <b>human</b> / male</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">
 challenges<br>
 plans<br>
 goals<br>
 authority<br>
 good times<br>
 </div>
 </div>
 </div>

 <div id="dislikes">
 <div id="backgroundfiller">
 </div>
 <div id="innercontent">
 <b>dislikes</b>
 <div id="innercontent2">
 urban environs<br>
 chaos<br>
 cigarettes<br>
 <br>
 <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">
Profile is a WIP.<br>
Not interested in anything OOC except conversation.<br>
I aim to be friendly, willing to assist with coding.<br>
<br>Code's mine, art isn't.
<br>Absolutely inspired by <b>Archer</b>, 100%, but is not that character.
 </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="https://dl.dropboxusercontent.com/u/4556289/player_mp3.swf?autoplay=1&mp3=http://puu.sh/nEew0/8707699f56.mp3&bgcolor1=0C0708&bgcolor2=0C0708&buttoncolor=ffffff&slidercolor1=ffffff&slidercolor2=ffffff" wmode="transparent" height=30/>
0C0708
</div>
</div>
<div id="detailshold">
 <div id="marqueeholder">
 <marquee direction="left" scrollamount="5">
 <b>F</b>RENCH <b>H</b>ORN <b>R</b>EBELLION / <b>FEEL THE LOVE (Majestique Remix)</b> / <b>F</b>OOLIN <b>A</b>ROUND
 </marquee>

</div>
</div>

</div>