Hydralisk Profile.

<style>

body{
  background: black;
}

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

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

#whole{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:url(http://i.imgur.com/DawkpYL.png);
  background-repeat: no-repeat;
  background-size: auto 80%;
  background-position: bottom right;
}

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


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

#contentarea{
  position: absolute;
  left: 20%;
  top: 20%;
  height: 540px;
  width: 500px;
  border: 0px solid black;
}

#linkarea{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 50px;
  border: 0px solid black;
}

.linkers{
  height: 45px;
  width: 45px;
  background-image:url(http://i65.tinypic.com/351gxed.jpg);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition: all 1s;
  transition: all 1s;
  border-radius: 360px 360px 360px 360px;
  background-color: #3c3c34;
  display: block;
}

#linkcontain:hover .linkers{
  background-color:whitesmoke;
  -webkit-animation: rotating 2s infinite linear;
  animation: rotating 2s infinite linear;
}

.linkers:last-child{
  margin-right: 0px;
}

@-webkit-keyframes rotating{
  0%{-webkit-transform:rotate(0deg);
  transform:rotate(0deg);}
  100%{-webkit-transform:rotate(360deg);
  transform:rotate(360deg);}
}

@keyframes rotating{
  0%{-webkit-transform:rotate(0deg);
  transform:rotate(0deg);}
  100%{-webkit-transform:rotate(360deg);
  transform:rotate(360deg);}
}

.linknotice{
  position: absolute;
  margin-left: -20px;
  margin-top: -66px;
  border: 0px solid white;
  height: 25px;
  width: 80px;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
  font-size: 10pt;
  font-family:'bodyfont', Arial;
  color: gray;
  text-align: center;
  font-weight: 800;
  text-transform: uppercase;
}

#linkcontain{
  float: left;
  height: 45px;
  width: 45px;
  margin-right: 38px;
}

#linkcontain:hover .linknotice{
  opacity: 1;
}

#headerdiv{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 66px;
  height: 50px;
  border: 0px solid red;
}

.headerss{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  text-align: center;
  font-family:'headerfont', Times, Arial;
  font-size: 25pt;
  letter-spacing: 3px;
  color: gray;
  box-sizing: border-box;
  padding-top: 10px;
  opacity: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
  z-index: 0;
}

#divhead1{
  opacity: 1;
  z-index: 1;
}

#contentholder{
  position: absolute;
  top: 140px;
  left: 50px;
  right: 50px;
  bottom: 50px;
  border-bottom: 1px solid gray;
}

.contentss{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 7px;
  overflow: auto;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 8px;
  text-align: center;
  border: 0px solid red;
  opacity: 1;
  color: gray;
  text-align: left;
  -webkit-transition: all 1s;
  font-size: 13pt;
  font-style: italic;
  z-index: 0;
  opacity: 0;
  font-family: 'bodyfont', Times, Arial;
  font-weight: 600;
}

#div1:target ~ #contentarea #divv1,
#div2:target ~ #contentarea #divv2,
#div3:target ~ #contentarea #divv3,
#div4:target ~ #contentarea #divv4,
#div5:target ~ #contentarea #divv5,
#div6:target ~ #contentarea #divv6{
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
  z-index: 2;
  opacity: 1;
}

#divv1{
  opacity: 1;
  z-index: 1;
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
}

#div2:target ~ #contentarea #divv1,
#div3:target ~ #contentarea #divv1,
#div4:target ~ #contentarea #divv1,
#div5:target ~ #contentarea #divv1,
#div6:target ~ #contentarea #divv1{
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  z-index: 0;
}

#div1:target ~ #contentarea #divhead1,
#div2:target ~ #contentarea #divhead2,
#div3:target ~ #contentarea #divhead3,
#div4:target ~ #contentarea #divhead4,
#div5:target ~ #contentarea #divhead5,
#div6:target ~ #contentarea #divhead6{
  -webkit-transition: all 1s .5s;
  transition: all 1s .5s;
  z-index: 2;
  opacity: 1;
}

#div2:target ~ #contentarea #divhead1,
#div3:target ~ #contentarea #divhead1,
#div4:target ~ #contentarea #divhead1,
#div5:target ~ #contentarea #divhead1,
#div6:target ~ #contentarea #divhead1{
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  z-index: 0;
}

#div1:target ~ #contentarea #linkcontain:nth-child(1) .linkers,
#div2:target ~ #contentarea #linkcontain:nth-child(2) .linkers,
#div3:target ~ #contentarea #linkcontain:nth-child(3) .linkers,
#div4:target ~ #contentarea #linkcontain:nth-child(4) .linkers,
#div5:target ~ #contentarea #linkcontain:nth-child(5) .linkers,
#div6:target ~ #contentarea #linkcontain:nth-child(6) .linkers{
  background-color: whitesmoke;
  -webkit-animation: rotating 2s infinite linear;
  animation: rotating 2s infinite linear;
}

#musicslice{
position: fixed;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
border: 1px solid gray;
overflow: hidden;
-webkit-transition: all 1s;
transition: all 0s;
box-shadow: 1px 1px 3px grey;
zoom:150%;}

#musicslice:active{
-webkit-transition: all 0s;
transition: all 0s;
box-shadow: 0px 0px 0px black;}

#musiccover{
position: absolute;
left: 0px;
top: 0px;
height: 50px;
width: 50px;
background-image:url(http://i.imgur.com/hnQDeMD.png);
background-size: auto 110%;
background-repeat: no-repeat;
background-position: center;
}

#musichidden{
position: absolute;
left: -3px;
top: 0px;
height: 50px;
width: 50px;
zoom: 180%;
opacity: 0;
z-index: 1;
overflow: hidden;}

</style>

<div id="whole">
  <div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>
  <div id="div4">
  </div>
  <div id="div5">
  </div>
  <div id="div6">
  </div>
  <div id="contentarea">
    <div id="linkarea">

<a id="linkcontain"  href="#div1">
  <div class="linkers">
        </div>
        <div class="linknotice">
          link 1.
        </div>
      </a>

<div id="linkcontain">
  <a class="linkers" href="#div2">
        </a>
        <div class="linknotice">
          History
        </div>
      </div>

<div id="linkcontain">
  <a class="linkers" href="#div3">
        </a>
        <div class="linknotice">
          Friends
        </div>
      </div>

<div id="linkcontain">
  <a class="linkers" href="#div4">
        </a>
        <div class="linknotice">
          Images
        </div>
      </div>

<div id="linkcontain">
  <a class="linkers" href="#div5">
        </a>
        <div class="linknotice">
          OOC
        </div>
      </div>

<div id="linkcontain">
  <a class="linkers" href="#div6">
        </a>
        <div class="linknotice">
          Credit.
        </div>
      </div>

    </div>

    <div id="headerdiv">
      <div class="headerss" id="divhead1">
        First Link
      </div>
      <div class="headerss" id="divhead2">
        History
      </div>
      <div class="headerss" id="divhead3">
        Ones Held Dear
      </div>
      <div class="headerss" id="divhead4">
        Reference Images
      </div>
      <div class="headerss" id="divhead5">
        Out Of Character
      </div>
      <div class="headerss" id="divhead6">
        Code Credit
      </div>
    </div>


    <div id="contentholder">
      <div class="contentss" id="divv1">
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 class="contentss" id="divv2">
Far away in the deep, outer space of the Koprulu Sector, there is a colossal and highly advanced shuttle, owned by the powerful and mysterious Protoss... During it's fully operational state, every Protoss normally worked on the ship, but...there was a small breach that later doomed the entire shuttle. A small larva, devouring and killing the other alien race one by one then to finally become a Brood Mother through a number of evolution stages...a Brood Mother under the name Niadra. After just a couple of hours, the entire shuttle was infested and taken over by her menacing and nightmarish Brood. Noone was left alive...only the vile creatures had an entire ship in their control. Niadra herself started creating a small hive cluster inside the shuttle, slowly diving throughout the space, her own, small Brood raising in power. The Brood Mother obviously began evolving her underlings, for example Hydralisks reaching their next stage of evolution. Hunter-Killers. But there was one, specific creature like this. Seemed like a simple, intelligent Hydralisk, yet his intelligence slowly started reaching the level of a Zerg cerebrate, soon he was able to telepatically speak, think and even feel. After a couple of years Niadra started absorbing one of the more intelligent underlings she had, every one consumed raised her a little bit higher to the level Queen of Blades had. Obviously, the specific Hydralisk wanted to keep his life. When the breach happened, Protoss warriors and workers started using the escape pods, but before they were able to lauch, they were turned into a pile of burning rubble by Zerglings. But..there was one pod left. One unused, still operational escape pod. The Hunter-Killer sneaked to it of course, ejecting himself and setting a random course... Able to travel through worlds, resist nearly anything, highly intelligent and able to communicate, the Hydralisk now under a simple name Alpha begun his long life as a renegade Zerg, yet still within Niadra's Brood due to few purple markings on his carapace...
      </div>

      <div class="contentss" id="divv3">
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 class="contentss" id="divv4">
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 class="contentss" id="divv5">
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 class="contentss" id="divv6">
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>
  </div>


<div id="musicslice" title="zerg briefing room">
<div id="musiccover">
</div>
<div id="musichidden">
<audio controls src="http://puu.sh/ru7Gj/922b3c02ad.ogg" loop=3></audio>
</div>
</div>

</div>