DIVINE 2/12/16

<style>

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

#whole{
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
background-image:url(http://i68.tinypic.com/1zlfx9z.jpg);
background-repeat: repeat;
z-index: 1;
color: black;
}

#backgroundpattern{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: .1;
background-color: purple;
z-index: -3;}

#backgroundpattern2{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 1;
z-index: -2;
background-image:url();
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center;}

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

@font-face{
 src:url(https://dl.dropboxusercontent.com/u/4556289/BLESD___%2B.ttf);
  font-family:'contentfont';
}

::-webkit-scrollbar {
  width: 4px;
  background-color: #D2C0C1;
}


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

#allcontainer{
  position: absolute;
  top: 0px;
  left: 200px;
  bottom: 0px;
  margin: auto;
  border: 1px solid rgb(141, 98, 126);
  height: 340px;
  width: 200px;
  -webkit-transition: all 1s;
  background: #FAE9DC;
  opacity: 1;
}

.tabdivs{
position: absolute;
height: 8px;
width: 200px;
border: 0px solid black;
left: 0px;
  -webkit-transition: all 1s;
  transition: all 1s;
  background: rgb(141, 98, 126);
}

#tabone{
  top: 175px;
}

#tabtwo{
  top: 200px;
}

#tabthree{
  top: 225px;
}

#tabfour{
  top: 250px;
}

#tabfive{
  top: 275px;
}

#tabreset{
  top: 300px;
}

#mainarea{
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  height: 150px;
  border: 1px solid rgb(141, 98, 126);
  -webkit-transition: all 1s;
  transition: all 1s;
  text-align: center;
  font-size: 50pt;
  box-sizing: border-box;
  padding-top: 15px;
  font-family: 'contentfont';
}

#titlediv{
  position: absolute;
  height: 20px;
  width: 100%;
  top: -6px;
  left: 0px;
  border: 0px solid black;
  font-family:'titlefont';
  text-align: center;
  font-weight: 400;
  font-size: 16pt;
  color: black;
  text-spacing: 20px;
  letter-spacing: 7px;
  overflow: hidden;
}

#titlediv span{
  position: absolute;
  height: 100%;
    width: 100%;
  left: 0px;
  right: 0px;
  top: -3px;
  margin: auto;
  text-shadow: 1px 1px 1px black;
  z-index: 0;
  color: black;
}

/* POSITION ONE */
#positionone:target #tabone{
  top: 10px;
}

#positionone:target #tabtwo{
  top: 220px;
}

#positionone:target #tabthree{
  top: 245px;
}

#positionone:target #tabfour{
  top: 270px;
}

#positionone:target #tabfive{
  top: 295px;
}

#positionone:target #tabreset{
  top: 320px;
}

#positionone:target #mainarea{
  top: 30px;
  height: 170px;
}

/* SECOND POSITION */

#positiontwo:target #tabone{
  top: 10px;
}

#positiontwo:target #tabtwo{
  top: 35px;
}

#positiontwo:target #tabthree{
  top: 245px;
}

#positiontwo:target #tabfour{
  top: 270px;
}

#positiontwo:target #tabfive{
  top: 295px;
}

#positiontwo:target #tabreset{
  top: 320px;
}

#positiontwo:target #mainarea{
  top: 55px;
  height: 170px;
}

/* POSITION THREE */

#positionthree:target #tabone{
  top: 10px;
}

#positionthree:target #tabtwo{
  top: 35px;
}

#positionthree:target #tabthree{
  top: 60px;
}

#positionthree:target #tabfour{
  top: 270px;
}

#positionthree:target #tabfive{
  top: 295px;
}

#positionthree:target #tabreset{
  top: 320px;
}

#positionthree:target #mainarea{
  top: 80px;
  height: 170px;
}

/* POSITION FOUR */

#positionfour:target #tabone{
  top: 10px;
}

#positionfour:target #tabtwo{
  top: 35px;
}

#positionfour:target #tabthree{
  top: 60px;
}

#positionfour:target #tabfour{
  top: 85px;
}

#positionfour:target #tabfive{
  top: 295px;
}

#positionfour:target #tabreset{
  top: 320px;
}

#positionfour:target #mainarea{
  top: 105px;
  height: 170px;
}

/* POSITION FIVE */

#positionfive:target #tabone{
  top: 10px;
}

#positionfive:target #tabtwo{
  top: 35px;
}

#positionfive:target #tabthree{
  top: 60px;
}

#positionfive:target #tabfour{
  top: 85px;
}

#positionfive:target #tabfive{
  top: 110px;
}

#positionfive:target #tabreset{
  top: 320px;
}

#positionfive:target #mainarea{
  top: 130px;
  height: 170px;
}

/* POSITION GENERAL */

#positionone:target #contentone,
#positiontwo:target #contenttwo,
#positionthree:target #contentthree,
#positionfour:target #contentfour,
#positionfive:target #contentfive{
  opacity: 1;
  z-index: 3;
}

.blankthing{
  opacity: 1;
  -webkit-transition: all 1s;
  transition: all 1s;
  text-shadow: 1px 1px 5px black;
  z-index: 1;
  position: absolute;
  height: 100%;
  width: 100%;

}

#positionone:target .blankthing,
#positiontwo:target .blankthing,
#positionthree:target .blankthing,
#positionfour:target .blankthing,
#positionfive:target .blankthing{
  opacity: 0;
  z-index: -3;
}

/* Content Area */

.contentarea{
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  overflow: auto;
  font-family:'contentfont';
  box-sizing:border-box;
  font-size: 19pt;
  line-height: 20px;
  letter-spacing: 1px;
  padding-left: 2px;
  padding-top: 6px;
  padding-right: 2px;
  padding-bottom: 5px;
  text-align: left;
  text-shadow: 1px 1px 3px black;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  z-index: 0;
  background:#D2C0C1;
}

/* FRIEND AREA */

#contentfive{
  text-align: center;
}

#contentfive a{
  float: left;
  height: 60px;
  width: 99%;
  text-align: center;
  border: 0px solid black;
  overflow: hidden;
  margin-bottom: 5px;
  margin-left: 1px;
  border-radius: 3px 3px 3px 3px;
  text-decoration: none;
  color: silver;
}

#contentfive #backgroundfiller{
  height: 100%;
  width: 100%;
  background: black;
  position: relative;
  margin-left: 0px;
  margin-top: 0px;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
}

#contentfive #linkline{
  position: relative;
  height: 100%;
  width: 100%;
  margin-left: 0px;
  margin-top: -60px;
  font-size: 20pt;
  letter-spacing: 3px;
  font-weight: 600;
  box-sizing: border-box;
  padding-top: 20px;
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  color: black;
  font-weight: 600;
  z-index: 1;
}

#contentfive img{
  position: relative;
  top: -60px;
  height:auto;
  width: 100%;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#contentfive a:hover img{
  opacity: .3;
}

#contentfive a:hover #backgroundfiller{
  opacity: .4;
}

#contentfive a:hover #linkline{
  opacity: 1;
}

/* GALLERY SECTION */

#contentfour a{
    float: left;
  height: 60px;
  width: 99%;
  text-align: center;
  border: 0px solid black;
  overflow: hidden;
  margin-bottom: 5px;
  margin-left: 1px;
  border-radius: 3px 3px 3px 3px;
  text-decoration: none;
  color: silver;
}

#contentfour img{
  position: relative;
  top: 0px;
  height:auto;
  width: 100%;
  top: -50px;
  opacity: .4;
  -webkit-transition: all 1s;
  transition: all 1s;
}

#contentfour img:hover{
  opacity: 1;
}

/* MUSIC PLAYLIST */

#musiccontainer{
position: absolute;
height: 22px;
width: 204px;
left: 200px;
bottom: 10px;
overflow: hidden;
text-align: left;
color: black;}

#musicholder{
  position: absolute;
  height: 200px;
  width: 204px;
  border: 0px solid black;
  background: pink;
overflow: hidden;
}

#musicline{
  float: left;
  overflow: hidden;
  height: 20px;
  width: 200px;
  border: 1px solid purple;
}

#playerhold{
  position: relative;
  height: 100%;
  width: 35px;
  border: 0px solid red;
  overflow: hidden;
margin-left: -26px;
margin-top: 0px;
zoom: 200%;
}

#detailhold{
  position: relative;
height: 100%;
width: 170px;
border: 0px solid green;
margin-left: 22px;
margin-top: -19px;
text-align: left;
font-family: 'titlefont';
font-size: 12pt;
font-weight: 600;
box-sizing: border-box;
padding-left: 3px;}

</style>

<div id="whole">

  <div id="positionone">
    <div id="positiontwo">
      <div id="positionthree">
        <div id="positionfour">
          <div id="positionfive">


            <div id="allcontainer">
              <div id="mainarea">
                <div class="blankthing">Character<br>
                  Name</div>
                <div id="contentone" class="contentarea">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis augue eu velit imperdiet, ac pellentesque nibh lacinia. Suspendisse non ipsum quam. Nulla facilisi. Cras finibus massa eu eros fringilla rutrum. Vestibulum et lectus nisi. Nulla id
                  urna egestas, lacinia nisl non, sollicitudin nisi. Sed posuere non odio sagittis scelerisque. Integer congue urna lorem, quis sagittis est suscipit nec. Pellentesque suscipit, nulla nec commodo ullamcorper, tortor sapien dictum elit,
                  in mollis neque enim at libero. Sed quis risus lorem. Donec gravida luctus tortor. Nam risus metus, euismod vitae vulputate sed, cursus nec risus. Praesent rutrum arcu arcu, sed varius est mattis ut. Aliquam ullamcorper, eros id aliquet
                  efficitur, tellus neque elementum odio, in consequat metus risus eget lacus. Proin placerat diam eget pellentesque sollicitudin. Cras dapibus tristique elit non eleifend. Mauris condimentum massa non felis sodales venenatis. Maecenas
                  dignissim bibendum quam, ac tincidunt libero pharetra ac.
                </div>
                <div id="contenttwo" class="contentarea">
                  TWO.
                </div>
                <div id="contentthree" class="contentarea">
                  THREE.
                </div>

                <div id="contentfour" class="contentarea">
                  <a href="http://www.randomwebsite.com/images/head.jpg" title=_blank><img src="http://www.randomwebsite.com/images/head.jpg"></a>
                  <a href="http://www.randomwebsite.com/images/head.jpg" title=_blank><img src="http://www.randomwebsite.com/images/head.jpg"></a>
                  <a href="http://www.randomwebsite.com/images/head.jpg" title=_blank><img src="http://www.randomwebsite.com/images/head.jpg"></a>
                  <a href="http://www.randomwebsite.com/images/head.jpg" title=_blank><img src="http://www.randomwebsite.com/images/head.jpg"></a>
                </div>

                <div id="contentfive" class="contentarea">
                  <a href="" target=_blank>
                    <div id="backgroundfiller">
                    </div>
                    <div id="linkline">
                      Friend.
                    </div>
                    <img src="http://www.wellhappypeaceful.com/wp-content/uploads/2012/09/6190668_f520.jpg"></a>
                  <a href="" target=_blank>
                    <div id="backgroundfiller">
                    </div>
                    <div id="linkline">
                      Friend.
                    </div>
                    <img src="http://www.wellhappypeaceful.com/wp-content/uploads/2012/09/6190668_f520.jpg"></a>

                  <a href="" target=_blank>
                    <div id="backgroundfiller">
                    </div>
                    <div id="linkline">
                      Friend.
                    </div>
                    <img src="http://www.wellhappypeaceful.com/wp-content/uploads/2012/09/6190668_f520.jpg"></a>

                  <a href="" target=_blank>
                    <div id="backgroundfiller">
                    </div>
                    <div id="linkline">
                      Friend.
                    </div>
                    <img src="http://www.wellhappypeaceful.com/wp-content/uploads/2012/09/6190668_f520.jpg"></a>


                </div>
              </div>

              <a id="tabone" class="tabdivs" href=#positionone>
                <div id="titlediv">
                  <span>stats</span>
                </div>
              </a>
              <a id="tabtwo" class="tabdivs" href=#positiontwo>
                <div id="titlediv">
                  <span>historY</span>
                </div>
              </a>
              <a id="tabthree" class="tabdivs" href=#positionthree>
                <div id="titlediv" style="letter-spacing: 3px;">
                  <span>personalitY</span>
                </div>
              </a>
              <a id="tabfour" class="tabdivs" href=#positionfour>
                <div id="titlediv">
                  <span>gallerY</span>
                </div>
              </a>
              <a id="tabfive" class="tabdivs" href=#positionfive>
                <div id="titlediv">
                  <span>friends</span>
                </div>
              </a>
              <a id="tabreset" class="tabdivs" href=#blank>
                <div id="titlediv">
                  <span>RESET</span>
                </div>
              </a>
            </div>

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

<div id="musiccontainer">
  <div id="musicholder">
    <div id="musicline">
      <div id="playerhold">
        <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=https://www.dropbox.com/s/t5vi6o4z1pjzj6g/XXYYXX%20-%20About%20You.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
      </div>
      <div id="detailhold">
Song One.
      </div>
    </div>

    <div id="musicline">
      <div id="playerhold">
        <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/t5vi6o4z1pjzj6g/XXYYXX%20-%20About%20You.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
      </div>
      <div id="detailhold">
Song Two.
      </div>

    </div>

    <div id="musicline">
      <div id="playerhold">
        <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/t5vi6o4z1pjzj6g/XXYYXX%20-%20About%20You.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
      </div>
      <div id="detailhold">
Song Three.
      </div>

    </div>

    <div id="musicline">
      <div id="playerhold">
        <embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=https://www.dropbox.com/s/t5vi6o4z1pjzj6g/XXYYXX%20-%20About%20You.mp3?dl=1&t0=&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />
      </div>
      <div id="detailhold">
        Song Four.
      </div>

    </div>

  </div>
</div>

<div id="backgroundpattern">
</div>

<div id="backgroundpattern2">
</div>

</div>