Digital old profile 4/17/16

<style>


/* 78A3B8 */
/* A2A7B8 */

@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: #78A3B8;
 overflow: hidden;
}

#imagebox {
 position: absolute;
 bottom: 500px;
 left: 400px;
 height: 200px;
 width: 250px;
 border-left: 1px solid white;
 -webkit-transition: all 1s, width 1s .7s, height 1s .7s, bottom 1s .7s;
 transition: all 1s, width 1s .7s, height 1s .7s, bottom 1s .7s;
 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: #003147;
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: 12px;
color: #534E5B;
text-align: left;
}

.bodydiv a, .bodydiv a:hover, .bodydiv a:visited{
color:#003147;
text-decoration: none;}

#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;
}

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

.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: rgba(68, 51, 95, 0.95);
 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: rgba(68, 51, 95, 0.95);
 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;
transition: all 1s;
-webkit-transition: all 1s;
}

#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: 70px;
 right: 385px;
 height: 45px;
 width: 100px;
}

/* BACKUP MUSIC PLAYER -- START */

#backupmusic{
 position: absolute;
 left: 30px;
 top: 0px;
 height: 50px;
 width: 50px;
 border-radius: 10px 10px 10px 10px;
 transform:rotate(-45deg);
 -webkit-transform:rotate(-45deg);
 background-color: #71BBA4;
-webkit-animation: backupchanger 2s infinite;
animation: backupchanger 2s infinite;
}

#backupmusic audio{
 position: absolute;
 transform: rotate(45deg);
 -webkit-transform:rotate(45deg);
 top: 10px;
 left: 5px;
 width: 40px;
 opacity: 0;
}

#backupmusicbackground{
 transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 height: 40px;
 width: 40px;
 background-image:url(http://i67.tinypic.com/fp33g7.jpg);
 background-size: 100% auto;
 background-repeat: no-repeat;
 background-position: center;
 left: 5px;
 top: 5px;
 position: absolute;
}

@keyframes backupchanger{
0%{background-color: #71BBA4;}
50%{background-color: #62BB98;
background-color: #98A1A3;}
100%{background-color: #71BBA4;}
}

@-webkit-keyframes backupchanger{
0%{background-color: #71BBA4;}
50%{background-color: #62BB98;
background-color: #98A1A3;}
100%{background-color: #71BBA4;}
}

/* BACKUP MUSIC PLAYER -- END */


#topframer{
position: absolute;
top: 0px;
height: 20px;
width: 100px;
z-index: 1;
opacity: 1;
border-radius: 10px 10px 10px 10px;
font-size: 15pt;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 1s;
}

#bottomframer{
position: absolute;
bottom: 0px;
height: 20px;
width: 100px;
z-index: 1;
opacity: 1;
border-radius: 10px 10px 10px 10px;
font-size: 15pt;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 1s;
}

#topframer:hover i,
#bottomframer:hover i{
 letter-spacing: 6px;}

#topframer:hover,
#bottomframer:hover{
 box-shadow: 0px 0px 1px 2px #F4E3B5;}

#musiccontainer i{
 position: absolute;
 margin-bottom: 3px;
 left: 0px;
 right: 0px;
 text-align: center;
 margin: auto;
 letter-spacing: 2px;
 text-shadow: 0px 0px 5px #F4E3B5;
-webkit-transition: all 1s;
transition: all 1s;}


#topoption{
position: absolute;
top: 0px;
height: 20px;
width: 100px;
background: #64BB9A;
-webkit-transition: all 9999s;
transition: all 9999s;
border-radius: 10px 10px 10px 10px;
opacity: .8;
}

#bottomoption{
position: absolute;
bottom: 0px;
height: 20px;
width: 100px;
background: #64BB9A;
-webkit-transition: all 9999s;
transition: all 9999s;
border-radius: 10px 10px 10px 10px;
opacity: .8;
}

#topframer:active ~ #topoption{
background: #676A77;
-webkit-transition: all 0s;
transition: all 0s;}

#bottomframer:active ~ #bottomoption{
background: #676A77;
-webkit-transition: all 0s;
transition: all 0s;}

#topframer:active ~ #bottomoption{
 -webkit-transition: all 0s;
 transition: all 0s;
 background: #64BB9B;
}

#bottomframer:active ~ #topoption{
 -webkit-transition: all 0s;
 transition: 0s;
 background: #64BB9B;}

</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 id="backgroundfiller">
 </div>

 <div class="headerdiv" id="head1">
 basic info
 </div>
 <div class="bodydiv" id="body1">
alias / DiGiTaL<br>
 age / late 20's<br>
eyes / blue<br>
height / 5'9"<br>
gender / male<br>
presence / physical (?)<br>
roommate / <a href="http://roleplay.chat/profile.php?user=Jynx" target="_blank">Jynx</a>

 </div>


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

 </div>


 <div class="headerdiv" id="head3">
 likes and dislikes
 </div>
 <div class="bodydiv" id="body3">
 Likes ><br>
<a href="https://www.youtube.com/user/MonstercatMedia" target=_blank>Monstercat</a>.<br>
 Nice people.<br>
Having a body (sorta).<br>
Technology (obviously).<br>
<br>
 Dislikes ><br>
 Assholes.<br>
HUAR.
 </div>

 <div class="headerdiv" id="head4">
 ooc
 </div>
 <div class="bodydiv" id="body4">
 Character <u>and</u> code are mine.<br>

<br>Music is <a href="https://youtu.be/MrtTEkwvdYY" target=_blank>Together</a> by Dean Custom.
 </div>

 </div>
</div>


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

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

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


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

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

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

 </div>

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

<div id="musiccontainer">


<div id="REMOVED" style="display: none;">
<div id="topframer" onclick="document.getElementById('digisong').play();"><i>play</i>
</div>
<div id="bottomframer" onclick="document.getElementById('digisong').pause();"><i>pause</i>
</div>
<div id="topoption">
</div>
<div id="bottomoption">
</div>
</div>


<div id="backupmusic">
 <div id="backupmusicbackground">
 </div>
<audio controls src="http://puu.sh/ng1l1/c9fd734c67.mp3" id="digisong">
</audio>
</div>

</div>

</div>
</div>