<style>

@import url(http://fonts.googleapis.com/css?family=Dancing+Script);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display);

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


body { transparent;
font-family: 'Dancing Script', cursive;
font-weight: 400;}

#whole {
  position: fixed;
  top :0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background: black;
overflow: hidden;}

#window {
  position: absolute;
  height: 300px;
  left: 0px;
  right: 0px;
  top: 100px;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  z-index: 0;
  background: white;
}

#window2 {
position: absolute;
width: 400px;
top: 140px;
bottom: 0px;
right: 0px;
background: white;
z-index: 0;
}

#picture{
  position: absolute;
  top: 104px;
  bottom: 0px;
  width: 400px;
  border: 0px solid red;
  right: 0px;
  background-image:
  url(http://i59.tinypic.com/n5sayo.png);
  background-position: left top;
  background-size: 150%;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: .5;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}

#picturehover {
  position: absolute;
  top: 104px;
  bottom: 0px;
  width: 400px;
  border: 0px solid red;
  right: 0px;
  background: white;
  z-index: 2;
  animation: nameappear2 1000s linear 5s;
  -webkit-animation: nameappear2 1000s linear 5s;}


#picture:hover{
  opacity: 1;}

#namebox{
  position: absolute;
  top: 200px;
  height: 140px;
  width: 580px;
  border: 0px solid red;
  right: 400px;
  font-size: 70pt;
  text-align: right;
  opacity: 0;
  color: #3B7BB5;
  animation: nameappear 1000s linear 6s;
  -webkit-animation: nameappear 1000s linear 6s;}

  @-webkit-keyframes nameappear{
  0% {opacity: 0;}
  0.11% {opacity:1;}
  100% {opacity: 1;}
  }

  @keyframes nameappear{
    0% {opacity:0 }
    0.11% {opacity: 1;}
    100% {opacity: 1;}
  }

  @-webkit-keyframes nameappear2{
    0% {opacity: 1;}
    0.11% {opacity: 0;}
    1% {right: -1000px;}
  }

  @keyframes nameappear2{
    0% {opacity: 1;}
    0.11% {opacity:0;}
    1% {right: -1000px;}
  }

  #titlebox{
  position: absolute;
  left: 850px;
  height: 30px;
  width: 150px;
  top: 470px;
  border: 0px solid white;
  font-size: 15pt;
  color: #3B7BB5;
  text-align: right;
  padding-top: 12px;
  z-index: 1;
  opacity: 1;
  }


  .glide1 {
    animation: nameappear 1000s linear 4s;
    -webkit-animation: nameappear 1000s linear 4s;}

  .glide2 {
    left: 500px !important;
    animation: nameappear 1000s linear 3s;
  -webkit-animation: nameappear 1000s linear 3s;}

  .glide3 {
    left: 150px !important;
    animation: nameappear 1000s linear 2s;
  -webkit-animation: nameappear 1000s linear 2s;}

  #slidebox{
  position: absolute;
  left: 775px;
  height: 200px;
  width: 300px;
  top: 505px;
  border: 1px solid #3B7BB5;
  opacity: 0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  }

  #slidebox:hover{
    opacity: 1;}

  .slide2 {
    left: 425px !important;}

  .slide3 {
    left: 75px !important;}

  #contentbox{
    position: absolute;
    height: 195px;
    width: 292px;
    top: 2px;
    left: 3px;
    overflow: auto;
    border: 0px solid red;
    color: #E0CABC;
    text-align: left;
font-family: 'Playfair Display', serif;
font-size: 9pt;}

</style>




<div id="whole">

<div id="window">
</div>

<div id="window2">
</div>

<a href="http://i60.tinypic.com/2di4mkm.jpg" target="_blank">
<div id="picture">
</div>
</a>

<div id="picturehover">
</div>

<div id="namebox">Character name.
</div>

<div id="titlebox" class="glide1">Category 3.
</div>

<div id="titlebox" class="glide2">Category 2.
</div>

<div id="titlebox" class="glide3">Category 1.
</div>

<div id="slidebox">
<div id="contentbox">
Content here.
</div>
</div>

<div id="slidebox" class="slide2">
<div id="contentbox">
Content here.
</div>
</div>

<div id="slidebox" class="slide3">
<div id="contentbox">
Content here.
</div>
</div>


</div>