CSS/DIV Layout 141b

       					!!!!!!!!!!!!Read It!!!!!!!!!!!!

                                                (⊙.⊙(☉_☉)⊙.⊙)

CAN'T EMPHASIZE THIS ENOUGH:  There are div ids/classes, tables (table, tr, td) and img classes in this layout.  Be VERY, VERY, VERY careful not to drop off any of the coding.

............................

IMAGES

For the sake of simplicity, make all of your images 265px width by 265px height.  The layout will re-size them for you.

If you want to change out the pics but keep the color scheme for the images, the PSD is here: https://drive.google.com/file/d/0B79YHAkeE7SuSnp6MDN0ZTF0bm8

............................

MUSIC PLAYER

REPLACE MY MUSIC PLAYER WITH YOUR OWN.

............................


FOR ROLEPLAYER.ME USERS:

For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:
I code for ALL sites.  Not every website will allow headers to be placed as <h1>Header 1</h1>.  For that reason, I turn them into font classes with a period in front (.h1) in About Me and script them in the tables as I have done below.

<font class="h1">Header 1</font>

If you are on a website like RPer.me that allows regular header, underline, strong, etc coding, you can just use regular header coding for all of the header, lyric, special text labels like so:
<h1>Header</h1> <strike>Strike</strike> etc..

OR just leave them as they are.  They will work for you either way.


///////////////////////////////////////////////////



                        Don't forget to replace the XXXXX with your friend ID number.

                                                     (>‿◠)✌


                *****************************SAVE YOUR WORK AS YOU GO.*******************************


DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.

-----------------------------ABOUT ME---------------------------------

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Abel|Quicksand:700|IM+Fell+English:400,400italic|Alfa+Slab+One|Playfair+Display:400,700italic|Anton:400|Shadows+Into+Light|Raleway:400,900|Yanone+Kaffeesatz:400,300|Oswald|Dynalight|Roboto+Condensed:400,700);

/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */

.vicarious { Structure }

body {
background-color:271d31;
background-image:url();
background-repeat:repeat;
background-attachment:fixed;
background-position:center center;
}

table, tr, td {background-color:transparent;}

 .vicarious{ Google Chrome Scrollbar }
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {border: 1px solid #000000;background-color:transparent;}
::-webkit-scrollbar-thumb {border: 1px solid #000000;background-color:a6c4bc;}

.vicarious { text }

table, tr, td, li, p, div, .text, .btext, a, b, i {
font-family:tahoma;
font-size:7pt;
line-height:100%;
color:5e5468;
padding:0px;
margin:0px;
text-decoration:none;
text-transform:none;
}

p {text-align:justify;}
p:first-line {  }
p:first-letter { font-size: 9pt; }


b {
text-transform:uppercase;
font-family: 'Roboto Condensed', sans-serif;
color:b7dad1;
}

i {
color:655876;
}

.u, u {
color:726482;
text-decoration:underline;
}

.strike, strike {
color:c9dcd7;
text-decoration:line-through;
}

.strong, strong {
font-family:courier new;
font-size: 9pt;
text-transform:uppercase;
color:d4e8e3;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

em {
font-family:brush script mt;
font-size:11pt;
color:b3aeba;
}

.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .one, one, .two, two, .three, three. small, big  {
padding:0px;
margin:0px;
}

.cite {font-size:0px; color:transparent;display:block; height:0px;}


.vicarious { Divs }

#back, #back1,#linx, #namefield1, #namefield2, #bx1, #bx2,  #c1-5, #c6-7, #c8-10 {
left:50%;
top:0%;
visibility:visible;
z-index:1;
position:absolute;
background-color:transparent;
overflow:hidden;
}

#back  {
width:1100px;
height:1090px;
margin-top:0px;
margin-left:-555px;
border-left:0px solid # ;
border-right:0px solid # ;
}

#back1 {
margin-left:-484px;
margin-top:150px;
width:946px;
height:675px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border:4px solid #bde1d7;
}

#linx {
margin-left:-455px;
margin-top:55px;
width:500px;
height:235px;
transform: rotate(315deg) ;
-webkit-transform: rotate(315deg) ;
-moz-transform: rotate(315deg) ;
-o-transform: rotate(315deg) ;
-ms-transform: rotate(315deg) ;
text-align:left;
}

#linx a {
padding-right:5px;
text-align:right;
display:block;
height:29px;
line-height:29px;
margin-bottom:0px;
-moz-border-radius-topright: 90px;
-webkit-border-top-right-radius: 90px;
border-top-right-radius: 90px;
-moz-border-radius-bottomright: 90px;
-webkit-border-bottom-right-radius: 90px;
border-bottom-right-radius: 90px;
font-weight:light;
font-size:7pt;
letter-spacing:1pt;
font-family: 'Oswald', sans-serif;
text-decoration:none;
text-transform:uppercase;
transition:All .6s ease-in-out .2s;
-webkit-transition:All .6s ease-in-out .2s;
-moz-transition:All .6s ease-in-out .2s;
-o-transition:All .6s ease-in-out .2s;
border-width: 4 4 4 15;
border-style:solid;
border-color:bde1d7;
color:d7ebe5 ;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
text-decoration:none;
}

#linx a.LK1 {width:300px; background-color:3f3050;}
#linx a.LK2 {width:325px; background-color:473859;}
#linx a.LK3 {width:350px; background-color:524364;}
#linx a.LK4 {width:375px; background-color:5c4d6e;}
#linx a.LK5 {width:400px; background-color:665877;}
#linx a.LK6 {width:425px; background-color:726482;}

#linx a:hover {border-width: 4px 4px 4px 50px;}

#namefield1, #namefield2 {
margin-left: 45px;
width:415px;
display:block;
text-align:right;
background-color:transparent;
padding-right:6px;
}

#namefield1 {
margin-top:60px ;
padding-top:5px;
height:25px;
line-height:25px;
text-transform:none;
font-size:35px;
font-family: 'Dynalight', cursive;
font-style:italic;
color:e2f4f3;
}

#namefield2 {
margin-top:85px ;
padding-top:0px;
height:55px;
line-height:55px;
text-transform:uppercase;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: none;
font-size:55px;
font-family: "Anton", Helvetica, sans-serif;
color:e5fff8;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 3px 3px 0 rgb(189,225,215) , 6px 6px 0 rgb(82,67,100) , 8px 8px 0 rgb(186,221,212) , 12px 12px 0 rgb(92,77,110) ;
}

#bx1, #bx2 {
width:528px;
height:250px;
overflow:hidden;
margin-left:-85px;
}

#bx1 {margin-top:225px;}
#bx2 {margin-top:485px;}

#bx1 .img1, #bx2 .img1, #bx1 .title, #bx2 .title, #bx1 .about, #bx2 .about {
position:absolute;
background-color:transparent;
}

#bx1 .img1, #bx2 .img1, #bx1 .title, #bx2 .title {
margin-top:0px;
overflow:hidden;
height:50px;
}

#bx1 .img1, #bx2 .img1 {
margin-left:0px;
width:50px;
background-size: 50px 50px;
}

#bx1:hover .img1, #bx2:hover .img1 {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-filter: blur(10px);
}

#bx1 .title, #bx2 .title {
margin-left:55px;
width:468px;
font-family: 'Roboto Condensed', sans-serif;
display:block;
text-align:right;
padding:left:5px;
line-height:50px;
text-transform:none;
font-size:20pt;
color:d1ece5;
background-color:170d21;
}

#bx1 .about, #bx2 .about {
margin-left:55px;
margin-top:55px;
width:473px;
height:195px;
overflow:auto;
}

.circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .circle7, .circle8, .circle9, .circle10 {
border:4px solid #bde1d7;
position:absolute;
background-color:a6c4bc;
overflow:hidden;
}

.circle6:hover, .circle7:hover, .circle8:hover, .circle9:hover, .circle10:hover{
z-index:1000;
}

.circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .circle7, .circle8, .circle9, .circle10, .circle1 .mask, .circle2 .img, .circle3 .img, .circle4 .img, .circle5 .img, .circle6 .img, .circle6 .mask {
-webkit-border-radius: 360px;
-moz-border-radius: 360px;
border-radius: 360px;
}

#c1-5 {
margin-left:-545px;
margin-top:170px;
height:380px;
width:365px;
}

.circle1  {
width:245px;
height:245px;
background-size: 245px 245px;
margin-left:40px;
margin-top:60px;
}

.circle1  {
-webkit-animation: cssAnimation 2s  ease-out 1.5s;
-moz-animation: cssAnimation 2s ease-out 1.5s;
-o-animation: cssAnimation 2s ease-out 1.5s;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(2880deg);}
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg);}
to { -moz-transform: rotate(2880deg);}
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(0deg;);}
to { -o-transform: rotate(2880deg);}
}

.circle1:hover {
transition:All .6s ease-in-out .2s;
-webkit-transition:All .6s ease-in-out .2s;
-moz-transition:All .6s ease-in-out .2s;
-o-transition:All .6s ease-in-out .2s;
}

.circle1:hover, .circle1:hover .inner  {
-moz-transform: rotate(2880deg);
-o-transform: rotate(0deg;);
-webkit-transform: rotate(2880deg) ;
}

.circle1 .inner, .circle1 .mask  {
position:absolute;
margin-left:0px;
margin-top:0px;
opacity:0;
transition:All 1s ease-in-out ;
-webkit-transition:All 1s ease-in-out ;
-moz-transition:All 1s ease-in-out ;
-o-transition:All 1s ease-in-out ;
overflow:hidden;
}

.circle1 .inner {
width:145px;
height:145px;
padding:50px;
}

.circle1 .mask {
background-color:271d31;
width:245px;
height:245px;
}

.circle1:hover .mask, .circle1:hover .inner {opacity:1;}
.circle1:hover .mask {}
.circle1:hover .inner {overflow:auto;}

.circle1, .circle1 p {
color:bde1d7 ;
text-align:center;
}

.circle1 .h1, .circle1 h1 {
background-color:e0f5ef;
color:3f3050;
display:block;
text-transform:none;
text-align:right;
padding:3px 4px 2px 0px;
margin:5px 0px;
border-bottom:4px solid #aac4c2;
font-family: 'Playfair Display', serif;
overflow:none;
font-size:14pt;
}

.circle1 .strong, .circle1strong   {
display:block;
font-size:2pt;
margin-top:15px;
text-align:center;
color:transparent;
transition:All .6s ease-in-out 0.2s;
-webkit-transition:All .6s ease-in-out 0.2s;
-moz-transition:All .6s ease-in-out 0.2s;
-o-transition:All .6s ease-in-out 0.2s;
}

.circle1:hover .strong, .circle1:hover strong {
color:e2f4f3;
font-size:20pt;
transition:All 1.6s ease-in-out 2.2s;
-webkit-transition:All 1.6s ease-in-out 2.2s;
-moz-transition:All 1.6s ease-in-out 2.2s;
-o-transition:All 1.6s ease-in-out 2.2s;
}

.circle2:hover, .circle3:hover, .circle4:hover, .circle5:hover   {
z-index:1000;
width:245px;
height:245px;
margin-left:40px;
margin-top:60px;
}

.circle2, .circle5 {width:45px;height:45px;}
.circle2 {margin-left:80px;margin-top:0px;}
.circle3 {margin-left:0px;margin-top:25px;width:75px;height:75px;}
.circle4 {margin-left:270px;margin-top:245px;  width:80px;height:80px;}
.circle5 {margin-left:240px;margin-top:325px; }

.circle2, .circle3, .circle4, .circle5 {
background-repeat: no-repeat;
overflow:hidden;
transition:All 1.6s ease-in-out 0s;
-webkit-transition:All 1.6s ease-in-out 0s;
-moz-transition:All 1.6s ease-in-out 0s;
-o-transition:All 1.6s ease-in-out 0s;
text-align:left;
}

.circle2:hover, .circle3:hover, .circle4:hover, .circle5:hover { }

.circle2 .img, .circle5 .img {width:45px;height:45px;  background-size: 45px 45px;}
.circle3 .img {width:75px;height:75px;  background-size: 75px 75px;}
.circle4 .img {width:80px;height:80px;  background-size:80px 80px;}

.circle2 .img, .circle3 .img, .circle4 .img, .circle5 .img {
position:absolute;
margin-top:0px;
margin-left:0px;
background-repeat: no-repeat;
transition:All 1.6s ease-in-out 0s;
-webkit-transition:All 1.6s ease-in-out 0s;
-moz-transition:All 1.6s ease-in-out 0s;
-o-transition:All 1.6s ease-in-out 0s;
}

.circle2:hover .img, .circle3:hover .img,.circle4:hover .img,.circle5:hover .img {
margin-top:0px;
margin-left:0px;
width:245px;
height:245px;
background-size: 245px 245px;
}

.circle2 .about, .circle3 .about,.circle4 .about, .circle5 .about {
width:145px;
height:145px;
border:50px solid #271d31;
margin-top:-500px;
margin-left:-500px;
background-color:271d31;
opacity:0;
overflow:hidden;
transition:All .4s ease-in-out 0s;
-webkit-transition:All .4s ease-in-out 0s;
-moz-transition:All .4s ease-in-out 0s;
-o-transition:All .4s ease-in-out 0s;
}

.circle2 .h1, .circle3 .h1, .circle4 .h1, .circle5 .h1, .circle2 h1, .circle3 h1, .circle4 h1, .circle5 h1 {
font-family: 'Roboto Condensed', sans-serif;
font-size:12pt;
text-align:right;
display:block;
margin:5px 0px 2px 0px;
padding:0px 5px 5px 0px;
color:d9f2eb;
border-left:5px solid #bde1d7;
border-bottom:2px solid #bde1d7;
overflow:none;
line-height:95%;
}

.circle2:hover .about, .circle3:hover .about, .circle4:hover .about, .circle5:hover .about {
position:absolute;
margin-top:0px;
margin-left:0px;
padding:0px;
opacity:1;
overflow:auto;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
transition:All 1s ease-in-out 1s;
-webkit-transition:All 1s ease-in-out 1s;
-moz-transition:All 1s ease-in-out 1s;
-o-transition:All 1s ease-in-out 1s;
}

#c6-7 {
margin-left:-500px;
margin-top:585px;
height:300px;
width:400px;
background-color:transparent;
}

.circle6, .circle6 .img, .circle6 .mask, .circle6 .conns {position:absolute;}

.circle6 {
z-index:2;
margin-left:50px;
margin-top:55px;
width:145px;
height:145px;
background-repeat: no-repeat;
overflow:hidden;
transition:All .6s ease-in-out 1.2s;
-webkit-transition:All .6s ease-in-out 1.2s;
-moz-transition:All .6s ease-in-out 1.2s;
-o-transition:All .6s ease-in-out 1.2s;
}

.circle6:hover, .circle6:hover .img {
transition:All .6s ease-in-out .2s;
-webkit-transition:All .6s ease-in-out .2s;
-moz-transition:All .6s ease-in-out .2s;
-o-transition:All .6s ease-in-out .2s;
}

.circle6:hover {
margin-left:25px;
margin-top:20px;
width:265px;
height:265px;
}

.circle6 .img {
margin-top:0px;
margin-left:0px;
width:145px;
height:145px;
background-size: 145px 145px;
background-repeat: no-repeat;
transition:All .6s ease-in-out 1.2s;
-webkit-transition:All .6s ease-in-out 1.2s;
-moz-transition:All .6s ease-in-out 1.2s;
-o-transition:All .6s ease-in-out 1.2s;
}

.circle6:hover .img {
margin-top:0px;
margin-left:0px;
width:265px;
height:265px;
background-size: 265px 265px
}

.circle6 .mask {
width:257px;
height:257px;
margin-top:129px;
margin-left:-129px;
background-color:271d31;
opacity:0;
border:4px dashed #bde1d7;
}

.circle6 .mask, .circle6 .conns {
transition:All 1s ease-in-out .2s;
-webkit-transition:All 1s ease-in-out .2s;
-moz-transition:All 1s ease-in-out .2s;
-o-transition:All 1s ease-in-out .2s;
}

.circle6:hover .mask {
margin-top:0px;
margin-left:0px;
opacity:1;
}

.circle6 .conns {
margin-top:129px;
margin-left:-129px;
opacity:0;
width:170px;
height:170px;
padding:5px;
background-color:transparent;
overflow:hidden;
}

.circle6:hover .conns {
opacity:1;
overflow:auto;
margin-top:40px;
margin-left:40px;
}

.circle6 .h1, .circle6 h1 {
background-color:170d21;
color:d7ebe5;
font-size:13pt;
display:block;
text-align:center;
font-family: 'IM Fell English', serif;
padding:5px 0px;
margin:5px 0px;
text-transform:none;
}

.conns a {
font-size:6pt;
font-weight:light;
text-align:center;
margin-bottom:1px;
padding:0px;
display:block;
text-decoration:none;
letter-spacing:0pt;
text-transform:uppercase;
font-family: 'Raleway', sans-serif;
background-color:bde1d7;
color:473859  ;
transition:All 1.6s ease-in-out 0s;
-webkit-transition:All 1.6s ease-in-out 0s;
-moz-transition:All 1.6s ease-in-out 0s;
-o-transition:All 1.6s ease-in-out 0s;
overflow:hidden;
height:10px;
line-height:10px;
}

.conns a:hover {color:170d21 ;text-decoration:line-through;text-transform:lowercase;letter-spacing:4pt;}
.conns a.LK1 {border-left:15px solid #170d21 ;border-right:5px solid #170d21 ;}
.conns a.LK1:hover {border-left:45px solid #170d21 ;border-right:5px solid #170d21 ;}
.conns a.LK2  {border-left:5px solid #170d21 ;border-right:15px solid #170d21;}
.conns a.LK2:hover {border-left:5px solid #170d21 ;border-right:45px solid #170d21;}


.circle7 {
z-index:1;
background-color:271d31;
overflow:hidden;
background-image:url(http://i61.tinypic.com/2cymogl.jpg);
background-size: 45px 45px;
background-repeat: no-repeat;
margin-left:180px;
margin-top:175px;
width:45px;
height:45px;
line-height:45px;
text-align:center;
transition:All .6s ease-in-out 0s;
-webkit-transition:All .6s ease-in-out 0s;
-moz-transition:All .6s ease-in-out 0s;
-o-transition:All .6s ease-in-out 0s;
}

.circle7 embed, .circle7 object{opacity:0;}
.circle7:hover embed, .circle7:hover object{opacity:1;}

.circle7:hover {
background-image:url(/clear.gif);
width:200px;
height:25px;
padding:20px 0px 0px 10px;
}

#c8-10 {
margin-top:745px;
margin-left:-85px;
width:546px;
height:170px;
background-color:transparent;
}

.circle8, .circle9, .circle10 {
width:162px;
height:162px;
background-size:162px 162px;
margin-top:0px;
background-repeat:no-repeat;
background-position:top left;
transition:All .6s ease-in-out 0s;
-webkit-transition:All .6s ease-in-out 0s;
-moz-transition:All .6s ease-in-out 0s;
-o-transition:All .6s ease-in-out 0s;
}

.circle8 {margin-left:0px; z-index:2; }
.circle9 {margin-left:180px;z-index:1;}
.circle10 {margin-left:370px; z-index:3;}

.circle8:hover, .circle9:hover, .circle10:hover {
width:538px;
margin-left:0px;
-webkit-border-radius: 0px;
-moz-border-radius:0px;
border-radius:0px;
z-index:1000;
}

.circle8 .about, .circle9 .about, .circle10 .about {
position:absolute;
margin-left:172px;
margin-top;0px;
width:356px;
height:152px;
padding:5px;
background-color:271d31;
overflow:hidden;
opacity:0;
}

.circle8:hover .about, .circle9:hover .about, .circle10:hover .about{
overflow:auto;
opacity:1;
}

.circle8 .h1, .circle9 .h1, .circle10 .h1, .circle8 h1, .circle9 h1, .circle10 h1 {
font-family: 'Dynalight', cursive;
font-size:16pt;
text-align:right;
display:block;
margin:0px;
padding:0px;
border-bottom:2px solid #bde1d7;
color:bde1d7;
width:0px;
height:0px;
opacity:0;
overflow:none;
color:d7ebe5 ;
}

.circle8:hover .h1, .circle9:hover .h1, .circle10:hover .h1, .circle8:hover h1, .circle9:hover h1, .circle10:hover h1 {
opacity:1;
width:auto;
height:20px;
line-height:20px;
margin:5px 0px 2px 0px;
padding:0px 5px 5px 0px;
transition:All .6s ease-in-out 1s;
-webkit-transition:All .6s ease-in-out 1s;
-moz-transition:All .6s ease-in-out 1s;
-o-transition:All .6s ease-in-out 1s;
}


 .vicarious{ Hide Codes }
.profileInfo, .userProfileURL, .friendsComments, .blurbs, .blacktext12, .friendSpace, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userProfiledetail,  .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .blacktext12, .navigationBar, tr#groups,  .navigationBar, .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
table table table table td {width:0px;}
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
div div select, div div form {display:none !important;}
select { visibility:hidden!important; WIDTH:0px!important;}
table div {display:none;}
table table div {display:block;}
.clearfix {display:none !important;position:absolute!important;}
div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
.profileInfo tr tr td { visibility:hidden; }
.profileInfo td.text { visibility:visible; }
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
</style></td></tr></table><table style="display:none"><tr><td>

-----------------------------LIKE TO MEET-------------------------

<font class="cite">
LEAVE THIS ARE BLANK
IMAGE INSTRUCTIONS:  For the sake of simplicity, make all of your images 265px width by 265px height.  The layout will re-size them for you.
</font>

-----------------------------INTERESTS-----------------------------

</td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">


<div id="back"></div>
<div id="back1"></div>
<div id="namefield1">FirstName</div>
<div id="namefield2">LastName</div>


<div id="linx">
<a class="LK1" href="/logincomplete.php">Home</a>
<a class="LK2" href="/invite_friend.php?friend_id=xxxxxx">Add</a>
<a class="LK3" href="/send_message.php?member_id=xxxxxx">Message</a>
<a class="LK4" href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
<a class="LK5" href="/gallery.php?member_id=xxxxxx">Photos</a>
<a class="LK6" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
</div>


-----------------------------MUSIC---------------------------------

</td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<div id="bx1">

<div class="img1" style="background-image:url(http://i58.tinypic.com/29uyft5.jpg);"></div>

<div class="title">History/Origins ░</div>

<div class="about">

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?


</div></div><div id="bx2">

<div class="img1" style="background-image:url(http://i62.tinypic.com/2vis8cn.jpg);"></div>

<div class="title">Present Day ░</div>

<div class="about">

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?


</div></div>


-----------------------------MOVIES--------------------------------

 </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<div id="c1-5">

<div class="circle1" style="background-image:url(http://i61.tinypic.com/169f52g.jpg);">

<div class="mask"></div><div class="inner">

<p><font class="h1">Verses</font>
Verse, Verse, Verse, Verse

<p><font class="h1">Dues</font>
S: 0 ║ C: 0 ║ M: 0


<BR><font class="strong">♛</font>

</div></div><div class="circle2">

<div class="img" style="background-image:url(http://i57.tinypic.com/2qd4qhi.jpg);"></div>

<div class="about">
<font class="h1">Legal & Physical</font>
<BR><b>NAME:</b> Input info
<BR><b>NICKNAMES:</b> Input info
<BR><b>ALIASES:</b> Input info
<BR><b>DATE OF BIRTH:</b> Input info
<BR><b>PLACE OF BIRTH:</b> Input info
<BR><b>CURRENT RESIDENCE:</b> Input info
<BR><b>ETHNICITY:</b> Input info
<BR><b>HAIR COLOR:</b> Input info
<BR><b>EYE COLOR:</b> Input info
<BR><b>HEIGHT:</b> Input info
<BR><b>WEIGHT:</b> Input info
<BR><b>BIRTHMARKS/SCARS:</b> Input info


</div></div><div class="circle3">

<div class="img" style="background-image:url(http://i58.tinypic.com/jigad5.jpg);"></div>

<div class="about">
<font class="h1">Family & Relationships</font>
<BR><b>MOTHER:</b> Input info
<BR><b>FATHER:</b> Input info
<BR><b>SISTER(S):</b> Input info
<BR><b>BROTHER(S):</b> Input info
<BR><b>Other Family:</b> Input info
<BR><b>STATUS:</b> Input info
<BR><b>ORIENTATION:</b> Input info
<BR><b>CURRENT:</b> Input info
<BR><b>FORMER:</b> Input info

</div></div><div class="circle4">

<div class="img" style="background-image:url(http://i58.tinypic.com/vi07id.jpg);"></div>

<div class="about">
<font class="h1">Education & Employment</font>
<br><b>High School</b> Input Info
<br><b>College</b> Input Info
<br><b>Major</b> Input Info
<br><b>Degree</b> Input Info
<br><b>OCCUPATION:</b> Input info
<BR><b>JOB DESCRIPTION:</b> Input info
<BR><b>EMPLOYER:</b> Input info
<BR><b>SKILLSET:</b> Input info

</div></div><div class="circle5">

<div class="img" style="background-image:url(http://i59.tinypic.com/2n87xg8.jpg);"></div>

<div class="about">
<font class="h1">Personality</font>
<br><b>Type</b> Input Info
<br><b>Traits</b> Input Info
<br><b>Quirks</b> Input Info

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

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

-----------------------------TELEVISION--------------------------------

</td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<div id="c6-7"><div class="circle6">

<div class="img" style="background-image:url(http://i59.tinypic.com/v78w1w.jpg);"></div>

<div class="mask"></div><div class="conns">

<font class="h1">Connections</font>
<a class="LK1" href="/#">Name Here</a>
<a class="LK2" href="/#">Name Here</a>
<a class="LK1" href="/#">Name Here</a>
<a class="LK2" href="/#">Name Here</a>

<a class="LK1" href="/#">Name Here</a>
<a class="LK2" href="/#">Name Here</a>
<a class="LK1" href="/#">Name Here</a>
<a class="LK2" href="/#">Name Here</a>

<a class="LK1" href="/#">Name Here</a>
<a class="LK2" href="/#">Name Here</a>
<a class="LK1" href="/#">Name Here</a>
<a class="LK2" href="/#">Name Here</a>

</div></div><div class="circle7">

<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k007.kiwi6.com/hotlink/jeig1st9wu/eels_-_fresh_blood_www.mp3fiber.com_.mp3&t0=Fresh Blood&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />

</div></div>
-----------------------------BOOKS--------------------------------
 </td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<div id="c8-10">

<div class="circle8" style="background-image:url(http://i58.tinypic.com/2lsfwbt.jpg);">

<div class="about">
<font class="h1">Connection Name</font>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

</div></div>

<div class="circle9" style="background-image:url(http://i60.tinypic.com/10r69o0.jpg);">

<div class="about">
<font class="h1">Connection Name</font>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?


</div></div>

<div class="circle10" style="background-image:url(http://i57.tinypic.com/vcylfl.jpg);">

<div class="about">
<font class="h1">Connection Name</font>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

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