for Diva

<style>

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

#whole {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url(http://i.imgur.com/yXwlTiD.png);
  background-repeat: no-repeat;
  background-position: left center -10%;
  background-size: auto 130%;
  background-color: #9FE2FF;
}

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

@font-face {
  font-family: 'Free Agent Bold Semi-Italic';
  src: url('https://dl.dropboxusercontent.com/u/4556289/freeagentboldsemital.ttf');
}

#bigdiv {
  position: absolute;
  left: 40%;
  top: 0px;
  bottom: 0px;
  margin: auto;
  height: 300px;
  width: 320px;
  color: #1f495b;
  border: 1px solid black;
  background-image: url(http://i62.tinypic.com/124uet3.jpg);
  background-repeat: repeat;
  background-size: 70%;
  font-family: 'Distillated', Arial;
  font-size: 13pt;
  transition: all 1s;
  -webkit-transition: all 1s;
}

#bigdiv:hover {
  height: 450px;
}

#div1 {
  position: absolute;
  top: 10px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 280px;
  height: 130px;
  border: 1px solid transparent;
  background: #9FE2FF;
}

#div2 {
  position: absolute;
  bottom: 10px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 280px;
  height: 130px;
  background: #9FE2FF;
  border: 1px solid transparent;
}

#div3 {
  position: absolute;
  top: 148px;
  bottom: 148px;
  left: 0px;
  right: 0px;
  width: 280px;
  border: 1px solid #9FE2FF;
  margin: auto;
  background: #77b4ce;
  overflow: hidden;
}

#div3menu {
  position: absolute;
  top: 3px;
  height: 15px;
  margin: auto;
  left: 20px;
  right: 20px;
  border: 0px solid black;
  text-align: center;
}

#div3menu a {
  height: 15px;
  box-sizing: border-box;
  padding-left: 3px;
  padding-right: 3px;
  border: 1px solid #9FE2FF;
  font-size: 9pt;
  color: black;
  text-decoration: none;
  background: transparent;
  font-family: 'Free Agent Bold Semi-Italic', Arial;
  transition: all 1s;
  -webkit-transition: all 1s;
  margin-left: 1px;
  margin-right: 1px;
}

#div3menu a:hover {
  background: #9FE2FF;
  margin-left: 5px;
  margin-right: 5px;
}

#div3container {
  position: absolute;
  bottom: 1px;
  left: 2px;
  right: 2px;
  top: 25px;
  border: 1px solid #9FE2FF;
}

.div3sub {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  opacity: 0;
  overflow: hidden;
  transition: all .5s;
  -webkit-transition: all .5s;
  z-index: 0;
}

.div3sub:target {
  opacity: 1;
  transition: all 1s;
  -webkit-transition: all 1s;
  z-index: 1;
}

</style>

<div id="whole">
  <div id="bigdiv">
    <div id="div1">lorem ipsum stuff
    </div>
    <div id="div2">lorem ipsum stuff
    </div>
    <div id="div3">
      <div id="div3menu">
        <a href=#history>history</a>
        <a href=#gallery>gallery</a>
        <a href=#ooc>ooc</a>
      </div>
      <div id="div3container">
        <div id="history" class="div3sub">
          lorem ipsum
        </div>
        <div id="gallery" class="div3sub">
          lorem ipsum2
        </div>
        <div id="ooc" class="div3sub">
          loremipsum3
        </div>

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