FINAL Sol Rave

<style>

@import url(https://fonts.googleapis.com/css?family=Trade+Winds);

@import url(http://fonts.googleapis.com/css?family=Jura);

@import url(http://fonts.googleapis.com/css?family=Handlee);

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

body, a, a:hover {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=5161), auto;
}


#whole {position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: #a52222;}

#divbar {position: absolute;
background: black;
}


#coveralldiv{position: absolute;
height: 700px;
width: 1000px;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto;
border: 0px solid white;}

#centerdiv {position: absolute;
width: 600px;
height: 600px;
border: 1px solid black;
top: 0px;
bottom: 0px;
left: 10px;
margin: auto;
background-image:url(http://i57.tinypic.com/2ccxerq.jpg);
background-repeat: no-repeat;
background-size: 100%;}

#selectiondivs{position: absolute;
height: 30px;
width: 600px;
border: 0px solid black;
top: 15px;
left: 10px;
overflow: hidden;}

#linkdivs{
  position: absolute;
  top: 5px;
  height: 20px;
  width: 100px;
  background: black;
box-sizing: border-box;
overflow: hidden;
  transition: all 1s;
-webkit-transition: all 1s;
border-radius: 20px 20px 20px 20px;
padding: 3px 1px 1px 10px;}

#textspace{
  position: absolute;
  top: 2px;
  left: 0px;
  right: 0px;
  margin: auto;
  z-index: 1;
  color: black;
  text-align: center;
  font-size: 10pt;
  letter-spacing: 5px;
}

#zoomspace{
  height: 15px;
  width: 80px;
  background: #A52222;
  z-index: 0;
  margin-left: -1000px;
  transition: all 7s;
-webkit-transition: all 7s;
border-radius: 30px 30px 30px 30px;
}

#linkdivs:hover > #zoomspace{
  transition: all .5s;
-webkit-transition: all .5s;
  margin-left: -10px;
}

#transformdiv{
  position: absolute;
  z-index: 20;
  background: transparent;
  left: 612px;
  top: 40px;
  height: 620px;
  width: 300px;
  overflow: hidden;
}


#friendbar{
  position: absolute;
  width: 36px;
  height: 600px;
  background: #A52222;
  left: 1px;
  top: 10px;
  z-index: 0;
  }

#frienddiv{
  width: 125px;
  height: 25px;
  box-sizing: border-box;
  border: 3px solid black;
  transform:rotate(90deg);
  margin-top: 105px;
  margin-left: -45px;
  text-align: center;
  transition: all 1s;
-webkit-transition: all 1s;
   background: #A52222;

}

#frienddiv:hover{
  background: black;
  color: #A52222;
}

#friendbar a{text-decoration: none; color: black;}

#friendblock{
  position: absolute;
  width: 37px;
  height: 600px;
  background: black;
  left: 1px;
  top: 10px;
  z-index: 1;
  transition: all 1s;
-webkit-transition: all 1s;
  }

.contentbox{position: absolute;
height: 590px;
width: 250px;
 box-sizing: border-box;
border: 4px solid black;
top: 0px;
bottom: 0px;
left: 38px;
margin: auto;
opacity: 0;
z-index: 0;
  background: #A52222;
transition: all 1s;
-webkit-transition: all 1s;
color: black;
border-radius: 0px 30px 30px 0px;
text-align: left;
overflow: hidden;
font-weight: 500;}

#contentblocker{
  position: absolute;
height: 600px;
width: 250px;
border: 0px solid black;
top: 0px;
bottom: 0px;
left: 38px;
margin: auto;
  opacity: 1;
border-radius: 0px 30px 30px 0px;
  background: black;
  transition: all 1s;
-webkit-transition: all 1s;
  z-index: 2;
overflow: hidden;
}

.contentbox:target{
  z-index: 2;
}

#transformdiv:hover .contentbox{
  opacity: 1;
}

#transformdiv:hover #contentblocker{
  height: 0px;
}

#transformdiv:hover #friendblock{
  transition: all 2s;
-webkit-transition: all 2s;
  left: -50px;
}

.titlediv{position: absolute;
  font-family: 'Trade Winds', cursive;
  font-size: 40pt;
  top: -6px;
  text-align: center;
  left: 600px;
  z-index: 40;
  height: 60px;
  width: 300px;
  border: 0px solid black;
  color: #A52222;
  transition: all 1s;
-webkit-transition: all 1s;
}

#transformdiv:hover ~ .titlediv{
color: black;
}

#scriptleft {position: absolute;
top: 10px;
 left: 5px;
 bottom: 10px;
  width: 100%;
border: 2px solid #A52222;
border-right: 0px solid transparent;}

#scriptright {
  position: absolute;
 top: 10px;
 right: 10px;
 bottom: 10px;
 width: 100%;
  border: 2px solid #A52222;
border-left: 0px solid transparent;
  border-radius: 0px 30px 30px 0px;
overflow: hidden;
}


#bigtab{
  position: absolute;
  height: 98%;
  width: 90%;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  border: 0px solid black;
 font-family: 'Handlee', cursive;
font-family: 'Jura', sans-serif;
  font-size: 10pt;
text-align: left;
box-sizing: border-box;
padding-left: 20px;
}

h1 { font-size: 14pt;
font-family: 'Trade Winds', cursive;
color: black;
font-weight: 800;
margin-bottom: 8px;
margin-top: 43px;}

a.contents { color: black;
font-weight: 800;
text-decoration: none;
transition: all 1s;
-webkit-transition: all 1s; }

a.contents:hover { color: rgb(116, 107, 98);
color: 3a2a2a; }

.musiccolumn{
  position: absolute;
  top: 100px;
  left: 10px;
  width: 170px;
  height: 15px;
  border: 0px solid black;
  border-radius: 30px 30px 30px 30px;
  background: transparent;
  transition: all 1s .6s;
  overflow:hidden;
  box-sizing: border-box;
}

#musfirst {
  position: absolute;
  left: 10px;
  height: 10px;
  width: 90px;
  top: 2.9px;
  border: 0px solid black;
  font-size: 7pt;
  background: transparent;
  text-align: center;
  transition: all 1s;
  z-index: 1;
font-weight: 800;
Font-family: 'Trade Winds', serif;
}

#mussecond {
  position: absolute;
  right: 10px;
  height: 10px;
  width: 50px;
  top: 2.9px;
  border: 0px solid black;
  font-size: 7pt;
  text-align: center;
  opacity: 0;
  transition: all 1s .2s;
  z-index: 1;
overflow: hidden;
}

#musback {
  position: absolute;
  width: 100px;
  height: 10px;
  border-radius: 30px 30px 30px 30px;
  border: 0px solid green;
  margin-top: 3px;
  background: #A52222;
  transition: all 1s .4s;
  left: -310px;
}

.musiccolumn:hover{
  transition: all 1s;
  background: black;
}

.musiccolumn:hover #mussecond{
  transition: all 1s .4s;
  opacity: 1;}

.musiccolumn:hover #musback{
  left: 10px;}

.musiclinks {
color: black;
text-decoration: none;}

.musiclinks:hover{
color: black;}

#seekdrop{
  position: absolute;
  right: 10px;
  top: 20px;
  height: 20px;
  width: 20px;
  border: 0px solid black;
Font-family: 'Trade Winds', serif;
Transition: all 1s .5s;}

#minimizer {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
color: red;
font-size: 8pt;
padding-top: 4px;
padding-left: 3px;
opacity: 0;
animation: zooming 1s infinite;
-webkit-animation: zooming 1s 1s infinite;
}

#minimizer2 {
position: absolute;
top: 2px;
left: -1px;
right: 0px;
bottom: 0px;
margin: auto;
color: red;
font-size:4pt;
padding-top: 5.5px;
padding-left: 7px;
animation: zooming 1s infinite;
-webkit-animation: zooming 1s 1.5s infinite;
}

#music1:hover ~ #seekdrop{
top:97px;
transition: all 1s;
-webkit-transition: all 1s;}

#music2:hover ~ #seekdrop{
top:147px;
transition: all 1s;
-webkit-transition: all 1s;}

#music3:hover ~ #seekdrop{
top:197px;
transition: all 1s;
-webkit-transition: all 1s;}

#music4:hover ~ #seekdrop{
top:247px;
transition: all 1s;
-webkit-transition: all 1s;}

#music5:hover ~ #seekdrop{
top:297px;
transition: all 1s;
-webkit-transition: all 1s;}

#music6:hover ~ #seekdrop{
top:347px;
transition: all 1s;
-webkit-transition: all 1s;}

#music7:hover ~ #seekdrop{
top:397px;
transition: all 1s;
-webkit-transition: all 1s;}
@-webkit-keyframes zooming{
0% {opacity: 1;;}
100% {opacity: 0;}
}

@keyframes zooming {
0% {opacity: 1;;}
100% {opacity: 0;;
}

</style>

<div id="whole">

<div id="divbar" style="top: 0px;
width: 100%; height: 30px;">
</div>

<div id="divbar" style="bottom: 0px;
width: 100%; height: 30px;">
</div>

<div id="divbar" style="top: 0px;
width: 30px; height: 100%;
left: 0px;">
</div>

<div id="divbar" style="top: 0px;
width: 30px; height: 100%;
right: 0px;">
</div>

<div id="coveralldiv">

<div id="centerdiv">
</div>
<div id="selectiondivs">

  <a href=#first><div id="linkdivs" style="left:40px;">
  <div id="textspace">
    basics
  </div>
  <div id="zoomspace">
  </div>
  </div></a>

<a href=#second><div id="linkdivs" style="left: 175px;">
  <div id="textspace">
    lore
  </div>
  <div id="zoomspace">
  </div>
  </div></a>

  <a href=#third><div id="linkdivs" style="left: 320px;">
    <div id="textspace">
    music
  </div>
  <div id="zoomspace">
  </div>
  </div></a>

  <a href=#fourth><div id="linkdivs" style="left: 450px;">
    <div id="textspace">
    ooc
  </div>
  <div id="zoomspace">
  </div>
  </div></a>
</div>

 <div id="transformdiv">

<div id="first" class="contentbox">

<div id="bigtab">
<h1 style="margin-bottom: 3px;">Sol Rave</h1>
<h1 style="font-size:9pt; font-weight: 400; margin-top: 3px;">Legendary 'Grand Chimera'</h1>

<h1 style="font-size:9pt; font-weight: 400; margin-top: 26px;">Physical</h1>
▪ Gender <span style="padding-left: 35px;">▪ Male</span><br>
▪ Height <span style="padding-left: 40px;">▪ 10'3"</span><br>
▪ Build  <span style="padding-left: 49px;">▪ Muscular/Heavy</span><br>
▪ Tail Length  <span style="padding-left: 13px;">▪ 8'4"</span><br>
▪ Wingspan <span style="padding-left: 18px;">▪ 14'0"</span><br><br>

<h1 style="font-size:9pt; font-weight: 400; margin-top: 14px;">Personality</h1>
▪ Orientation <span style="padding-left: 13px;">▪ Pansexual</span><br>
▪ Anger<span style="padding-left: 46px;">▪ Builds Slowly</span><br>
▪ Humor<span style="padding-left: 43px;">▪ Very Specific</span><br>
▪ Arousal<span style="padding-left: 36px;">▪ Builds Slowly</span><br>
▪ Arrogance<span style="padding-left: 19px;">▪ Very High</span><br>

<h1 style="font-size:9pt; font-weight: 400; margin-top: 26px;">Abilities</h1>
▪ Eyes <span style="padding-left: 49px;">▪ <a class="contents" title="True Sight -
Eyes perceive the truth through illusions and work as a defensive mechanism against magical persuasion.">True Sight</a></span><br>

▪ Ears <span style="padding-left: 53px;">▪ <a class="contents" title="Magical Echo -
Ears are capable of detecting the potency and location of magic being cast based on the 'frequency'.
General hearing capacity is that of most canines.">Magical Echo</a></span><br>

▪ Nose <span style="padding-left: 49px;">▪ <a class="contents" title="Trace -
Nose tracks on scent in a fashion similar to a canine, though with the ability to detect
supernatural or magical hints through smell.">Trace</a></span><br>

▪ Mouth <span style="padding-left: 43px;">▪ <a class="contents" title="Instant Cast -
Accesing the 'Ethereal Language', the user can cast spells of various levels without the aid of rituals
or incantations. Often one word or none will do.">Instant Cast</a></span><br>

▪ Heart <span style="padding-left: 48px;">▪ <a class="contents" title="Immortality -
A heart that beats with the energy of creation. Upon death, his memory and body are eventually reconstituted
in the ether and returned to physical form. The amount of time it consumes varies depending on the amount of
of damage taken beforehand.">Immortality</a></span><br>

▪ Brain <span style="padding-left: 49px;">▪ <a class="contents" title="Knowledge -
The information of any age is 'downloaded' into his mind through the connection he maintains to the ether.">Knowledge</a></span><br>

▪ Horns <span style="padding-left: 43px;">▪ <a class="contents" title="Regeneration -
His body heals from any but the most grievous wounds, relatively quickly. In addition, his physical stamina
and endurance are very high.">Regeneration</a></span><br>

▪ Arms <span style="padding-left: 49px;">▪ <a class="contents" title="Strength -
Supernatural strength that increases depending on the demands of the situation, leading him to be capable
of 'epic feats'.">Strength</a></span><br>

▪ Tail <span style="padding-left: 61px;">▪ <a class="contents" title="Binding -
The wrap of his tail binds things with a fusion of physical strength and magical restriction to both immobilize
and seal off/diminish magical capabilities.">Restriction</a></span><br>

▪ Wings <span style="padding-left: 42px;">▪ <a class="contents" title="Infinite Flight -
His ability to fly is without limit, as his wings function with a mix of physical effect and magical levitation.
To attain greater speeds, he requires more space for the movement of his wings.">Infinite Flight</a></span><br>

</div>
</div>

 <div id="second" class="contentbox">
<div style="position: absolute;
left: 20px; top: 10px;">
Coming soon and stuff.</div>
</div>

  <div id="third" class="contentbox">

<div style="position: absolute;
top: 20px;
left: 30px;
font-size: 13pt;
font-family: 'Trade Winds', cursive;">
Playlist
</div>

<div id="music1" class="musiccolumn">
<div id="musfirst">
<a href="https://youtu.be/cO_U-jcvQT8" target="_blank" title="C21 FX - Ancient Evil" class="musiclinks">main theme</a>
</div>
<div id="mussecond" >
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/7b876l64j1hbgfk/C21%20FX%20-%20Ancient%20Evil%20%5BEpic%20Dramatic%20Orchestral%5D.mp3?dl=1&t0=Ancient&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
</div>
<div id="musback">
</div>
</div>


<div id="music2" class="musiccolumn" style="top: 150px;">
<div id="musfirst">
<a href="https://youtu.be/DM63Z7Yx-hE" target="_blank" title="R. Armando Moribito - Invictus" class="musiclinks">Invictus</a>
</div>
<div id="mussecond" >
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/t6iimvgxwa9iuxc/R.%20Armando%20Morabito%20-%20Invictus%20%28feat.%20Uyanga%29%20%5BPowerful%20Vocal%20Drama%5D.mp3?dl=1&t0=Invictus&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
</div>
<div id="musback">
</div>
</div>


<div id="music3" class="musiccolumn" style="top:200px;">
<div id="musfirst">
<a href="https://youtu.be/j07TXZ3MRGQ" target="_blank" title="Magnus H. Tellman - Exile" class="musiclinks">Exile</a>
</div>
<div id="mussecond" >
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/1hmizzvh127my56/Arvenas%20-%20Exile.mp3?dl=1&t0=Exile&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
</div>
<div id="musback">
</div>
</div>


<div id="music4" class="musiccolumn" style="top:250px;">
<div id="musfirst">
<a href="https://youtu.be/z_1Iw37Mx8o" target="_blank" title="Sub Pub Music - Iron Giant" class="musiclinks">Iron Giant</a>
</div>
<div id="mussecond" >
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/pamd9uy64q9z1v6/Sub%20Pub%20Music%20-%20Iron%20Giant.mp3?dl=1&t0=Iron Giant&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
</div>
<div id="musback">
</div>
</div>

<div id="music5" class="musiccolumn" style="top:300px;">
<div id="musfirst">
<a href="https://youtu.be/t2p9b78rqJ4" target="_blank" title="C21 FX - Halcyon" class="musiclinks">Halcyon</a>
</div>
<div id="mussecond" >
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/7twblb3e5c32zeo/HALCYON.mp3?dl=1&t0=Halcyon&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
</div>
<div id="musback">
</div>
</div>

<div id="music6" class="musiccolumn" style="top:350px;">
<div id="musfirst">
<a href="https://youtu.be/zPIyakbNnUc" target="_blank" title="Audiomachine - Ascendance" class="musiclinks">Ascendance</a>
</div>
<div id="mussecond" >
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/jbzttmr0evbu25w/Audiomachine%20-%20Ascendance%20%5BEpic%20Intense%20Drama%20-%20True%20384kbps%5D.mp3?dl=1&t0=Ascendance&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
</div>
<div id="musback">
</div>
</div>

<div id="music7" class="musiccolumn" style="top:400px;">
<div id="musfirst">
<a href="https://youtu.be/8QGZaY1f0lE" target="_blank" title="Patryck Scelina - Sky Is Not A Limit" class="musiclinks">Sky</a>
</div>
<div id="mussecond" >
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/y8btg8znhl0n81m/Patryk%20Scelina%20-%20Sky%20Is%20Not%20A%20Limit.mp3?dl=1&t0=Sky&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
</div>
<div id="musback">
</div>
</div>


<div id="seekdrop">
<div style="position:absolute;
top:1px;
left:0px;">
◄
</div>

<div id="minimizer">
◄
</div>

<div id="minimizer2">
◄
</div>

</div>


<div style="position: absolute;
top: 0px;
right: 40px;
height: 100%;
background: black;
width: 5px;">
</div>

<div style="position: absolute;
top: 59px;
width: 100%;
height: 5px;
background: black;">
</div>

</div>

  <div id="fourth" class="contentbox">

<div id="bigtab">

<h1 style="margin-top:21px;">ooc</h1>
■ code is mine<br>
■ main alt is <a href="http://roleplaychat.org/profile.php?user=Exael" target="_blank" class="contents">Exael</a><br>
■ casual actions use (<b>-</b>) or (<b>/</b>)<br>
■ main rp uses quotes and etc<br>
■ sexual rp is rare<br>
■ art is not mine<br>
<h1 style="margin-top: 8px; margin-bottom: 5px;"> profile </h1>
■ is a wip<br>
■ <a href="http://google.com" target="_blank" class="contents">click</a> or
<a class="contents" title="find out more info like this!">hover</a> on links<br>
■ playlist has links and player<br>
■ displays better on larger monitors
<h1 style="margin-top: 15px;">likes</h1>
■ discussing rp in advance<br>
■ long-term scenarios<br>
■ various themes and scenes<br>
■ good sense of humor<br>
■ openness to answering/asking questions<br>
■ honesty
<h1 style="margin-top: 15px;">dislikes</h1>
■ ignorance<br>
■ assholes<br>
■ dishonesty

</div>
</div>

  <div class="contentbox" style="z-index:1; opacity: 1;">
   </div>

  <div id="friendbar">
   <a href="" target="_blank"><div id="frienddiv">friend one
     </div></a>
   <a href="" target="_blank"><div id="frienddiv">friend two
     </div></a>

    <a href="" target="_blank"><div id="frienddiv">friend three
      </div></a>

    <a href="" target="_blank"><div id="frienddiv">friend four
      </div></a>

   </div>

   <div id="friendblock">
<div id="scriptleft">
</div>
   </div>

  <div id="contentblocker">
<div id="scriptright">

<div style="font-family: 'Trade Winds', cursive;
font-size: 10pt;
color: #A52222;;
text-align: center;
height: 90%;
width: 90%;
margin-top: 10px;
margin-left: 0px;
letter-spacing: -0.5px;
line-height: 60px;
text-transform: uppercase;">
There are few things worth <br>
<span style="letter-spacing: 10px;">dying for</span>●<br>
There are few things worth<br>
<span style="letter-spacing: 10px;">living for</span>●<br>
<span style="letter-spacing: -1.2px;">Land is not enough for either</span>●<br>
<span style="letter-spacing: 5px;">It's only dust</span>●<br>
<span style="letter-spacing: 4px;">And under that</span><br>
<span style="letter-spacing: 3px;">The corpses buried</span><br>
<span style="letter-spacing: 1px;">For six thousand years</span>●
</div>

</div>
  </div>

  </div>

<div class="titlediv">
  Sol Rave
  </div>

 <div class="titlediv" style="z-index: 41; color: black; left: 601.5px; top:-9.5px;">
  Sol Rave
  </div>

  </div>


</div>