Layout 149b

       				        !!!!!!!!!!!!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

Image dimensions are located in Like to Meet.

If you elect to keep the color scheme/overlays for pics, the psd is here:

https://drive.google.com/file/d/0B79YHAkeE7SuSEU1MlF4OW01QWc
 ............................

MUSIC PLAYER

REPLACE MY MUSIC PLAYER WITH YOUR OWN.

Read the cited note under the music player for additional instructions.

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


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=Halant:300,400,500,600,700|Vast+Shadow|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Raleway:400,800,100,200,300,500,600,700,900|Oswald:300,400,700|Dynalight|Tangerine:400,700|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-image:url();
background-color:f0efe2;
background-repeat:repeat;
background-attachment:fixed;
background-position:center center;
}

table, tr, td { background-color:transparent; border:0px; padding:0px; margin:0px; }

.vic-LEFT-SIDE_table, .vic-RIGHT-SIDE_table  {
visibility:visible;
z-index:2;
position:absolute;
top:0%;
left:50%;
border:0px;
margin-top:270px;
height:auto;
display:inline-block;
padding:0px;
}

.vic-LEFT-SIDE_table { width:250px; height:auto; margin-left:-250px;}
.vic-LEFT-SIDE_table tr { }
.vic-LEFT-SIDE_table td { margin:0px; max-width:250px;}

.vic-RIGHT-SIDE_table { width:500px; height:auto; margin-left:10px; }
.vic-RIGHT-SIDE_table tr { }
.vic-RIGHT-SIDE_table td { margin:0px; max-width:500px;}


.vic_table {
width:100%;
margin-bottom:4px;
border:2px solid #760d0b;
background-color: f0efe2;
overflow:hidden;
display:block;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
}

.vic_table tr { }
.vic_table td { width:100%; }

 .vicarious{ Google Chrome Scrollbar }

::-webkit-scrollbar {width: 10px;}

::-webkit-scrollbar-track {
border: 1px solid #000000 ;
background-color:transparent;
}

::-webkit-scrollbar-thumb {
border:1px solid #cba865;
background-color:760d0b;
-moz-border-radius-topright: 90px;
-webkit-border-top-right-radius: 90px;
border-top-right-radius: 90px;
-moz-border-radius-bottomleft: 90px;
-webkit-border-bottom-left-radius: 90px;
border-bottom-left-radius: 90px;
}

.vicarious { General Text }

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

p {
text-align:justify;
margin-top: 5px;
text-indent:10px;
word-wrap: break-word;
}

p::first-line {  }
p::first-letter {   }

b {
font-family: 'Roboto Condensed', sans-serif;
color:760d0b;
font-size:8pt;
text-transform:uppercase;
}

i {
font-family: 'Dynalight', cursive;
color:940300;
font-size:10pt;
}

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

.strike, strike {
color:b80300;
text-decoration:line-through;
letter-spacing:1pt;
}

.strong, strong {
font-family: "Oswald", Helvetica, sans-serif;
color:790200;
font-size: 9pt;
text-transform:uppercase;
line-height:110%;
}

em {
font-family: 'Tangerine', cursive;
color:c60400;
font-weight:700;
font-size:19pt;
}

.vicarious { Headers }

.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .h13, h13, .h14, h14, .h15, h15, .one, one, .two, two, .three, three, .blockquote, blockquote {
margin:0px;
padding:0px;
display:block;
text-transform:none;
line-height:100%;
}

.h1, h1 {
margin:10px 0px;
height:50px;
line-height:50px;
font-size:33px;
overflow:hidden;
text-align:center;
padding:0px 10px;
color:f0efe2;
background-color:cba865;
font-family: 'Vast Shadow', cursive;
text-transform:uppercase;
letter-spacing:-1pt;
text-shadow:  -1px -1px 0 #760d0b, 1px -1px 0 #760d0b, -1px 1px 0 #760d0b, 1px 1px 0 #760d0b;
}

.h2, h2 {
letter-spacing:1pt;
margin-bottom:6px;
font-size:10px;
text-align:center;
text-transform:uppercase;
padding:5px 0px;
color:cba865;
background-color:760d0b;
font-family: 'Roboto Condensed', sans-serif;
width:500px;
}

.h3, h3 {
margin:5px 0px;
line-height:100%;
font-size:12px;
overflow:hidden;
text-align:left;
padding:5px;
color:760d0b;
background-color:transparent;
font-family: 'Raleway', sans-serif;
font-weight:700;
border-width:4px 0px 4px 0px;
border-style:double;
border-color:000000;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
}

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

.vicarious { Divs }

/* Background2 */

#color2 {
visibility:visible;
position:fixed;
background-color:760d0b;
top:0%;
left:50%;
z-index:1;
margin-top:0px;
margin-left:-395px;
width:100%;
height:100%;
padding:0px;
border-left:10px solid #cba865;
}

/* Top */
#top {
visibility:visible;
position:absolute;
top:0%;
left:50%;
z-index:3;
margin-top:10px;
margin-left:-250px;
width:760px;
height:250px;
background-color:760d0b;
padding:0px;
border:2px solid #352f2c;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
}

/* Music */

#music {
visibility:visible;
position:fixed;
bottom:0%;
left:0%;
z-index:4;
margin-bottom:10px;
margin-left:10px;
width:20px;
height:20px;
background-size:20px 20px;
background-image:url(http://i61.tinypic.com/bgzmhf.jpg);
background-repeat:repeat;
background-position:center;
}

#music .player {
position:absolute;
margin-top:0px;
margin-left:0px;
width:20px;
height:20px;
background-color:760d0b;
overflow:hidden;
opacity:0;
-webkit-transition: all 0.2s linear 0.1s;
-moz-transition:all 0.2s linear 0.1s;
-ms-transition:all 0.2s linear  0.1s;
-o-transition: all 0.2s linear 0.1s;
transition: all 0.2s linear 0.1s;
}

#music:hover .player {
width:200px;
overflow:none;
opacity:1;
}

/* Sidebar */

#sidebar {
visibility:visible;
position:fixed;
top:0%;
left:50%;
z-index:3;
margin-top:0px;
margin-left:-575px;
width:270px;
height:100%;
background-color:rgba(0,0,0,0);
padding:0px;
border:0px;
}

#sidebar .name {
z-index:4;
position:absolute;
margin-top:80px;
margin-left:0px;
width:180px;
height:20px;
overflow:hidden;
font-size:20px;
line-height:20px;
font-family: 'Halant', serif;
color: 000000;
}


#sidebar .contact {
z-index:3;
position:absolute;
margin-top:100px;
margin-left:0px;
width:180px;
height:10px;
overflow:hidden;
font-size:10px;
line-height:10px;
font-family: 'Halant', serif;
color: 000000;
opacity:0;
-webkit-transition: all 0.2s linear 0.1s;
-moz-transition:all 0.2s linear 0.1s;
-ms-transition:all 0.2s linear  0.1s;
-o-transition: all 0.2s linear 0.1s;
transition: all 0.2s linear 0.1s;
}

#sidebar:hover .contact {
opacity:1;
margin-top:300px;
}


#sidebar .vicbox {
z-index:4;
float:left;
position:absolute;
margin-top:100px;
margin-left:0px;
width:250px;
height:175px;
overflow: hidden;
border:10px solid #cba865;
background-color: ecebdd;
}

.vicbox .mask  {
width:250px;
height:175px;
position: absolute;
overflow: hidden;
top:0px;
left:0px;
opacity: 1;
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-ms-transform: translateX(-300px);
-o-transform: translateX(-300px);
transform: translateX(-300px);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition:all 0.4s ease-in-out;
-ms-transition:all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
background-color: ecebdd;
}

.vicbox img {
display: block;
position: relative;
width:250px;
height:175px;
overflow:hidden;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.vicbox big {
font-family: "Oswald", Helvetica, sans-serif;
display:block;
color:cba865;
background-color: 760d0b;
text-align: center;
margin:10px 0px 5px 0px;
font-size: 15px;
line-height:15px;
padding: 2px;

}

.vicbox .the411 {
background-color:transparent;
position: relative;
text-align: center;
margin:10px;
width: 220px;
height: 145px;
padding: 5px;
overflow:auto;
-webkit-transition: all 0.2s linear 0.1s;
-moz-transition:all 0.2s linear 0.1s;
-ms-transition:all 0.2s linear  0.1s;
-o-transition: all 0.2s linear 0.1s;
transition: all 0.2s linear 0.1s;
}

#sidebar:hover .mask {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
}


#sidebar:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-ms-transform: translateX(300px);
-o-transform: translateX(300px);
transform: translateX(300px);
transition-delay: 0.1s;
}

#sidebar:hover .the411 {
transition-delay: 0.4s;
}

#sidebar .linx {
z-index:3;
position:absolute;
margin-top:295px;
margin-left:190px;
width:100px;
height:200px;
overflow:none;
}

#sidebar a  {
text-decoration:none;
text-transform:none;
display:block;
width:100%;
font-size:10px;
height:2px;
line-height:2px;
overflow:none;
text-align:left;
font-family: 'Roboto', sans-serif;
font-weight:300;
color:ecebdd;
border-left:0px solid #cba865;
padding-left:5px;
letter-spacing:1pt;
-webkit-transition: opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
-moz-transition: opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
-ms-transition: opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
-o-transition:  opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
transition:  opacity .8s ease 0s, margin .8s ease 0s,  color .6s ease .6s, border .6s ease .8s,letter-spacing .6s ease .9s ;
margin:-20px 0px 0px 0px;
opacity:0;
}

#sidebar:hover a {
margin:20px 0px 10px 0px;
opacity:1;
}

#sidebar a:hover {
color: cba865;
border-left-width:15px;
letter-spacing:2pt;
letter-spacing:0pt;
}

/* Right Side of Profile */

.about {
width:480px;
height:150px;
margin:5px;
padding:5px;
overflow:auto;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
}

.threegifs {
width:500px;
height:255px;
overflow:hidden;
}

.threegifs .Gifs {
position:absolute;
padding:5px;
overflow:hidden;
background-color:760d0b;
border:4px solid #cba865;
background-repeat:no-repeat;
background-position:center center;
}

.gifs-a  {
width:150px;
height:150px;
background-size:150px 150px;
margin-top:10px;
margin-left:10px;
}

.gifs-b {
width:125px;
height:125px;
background-size:125px 125px;
margin-top:50px;
margin-left:50px;
}

.gifs-c {
width:100px;
height:100px;
background-size:100px 100px;
margin-top:100px;
margin-left:100px;
}


.threegifs .title {
position:absolute;
margin-top:225px;
margin-left:10px;
width:203px;
height:20px;
padding:2px;
overflow:hidden;
font-family: "Oswald", Helvetica, sans-serif;
font-size:10px;
line-height:16px;
color:8c7f78;
text-transform:uppercase;
text-align:center;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
}

.threegifs .textbox {
position:absolute;
margin-top:10px;
margin-left:255px;
width:225px;
height:225px;
padding:5px;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
overflow:auto;
}

.conns {
width:500px;
height:110px;
overflow:hidden;
}

.conns .imgA, .conns .imgB, .conns .imgC {
position:absolute;
margin-top:5px;
width:100px;
height:100px;
overflow:hidden;
}

.conns .imgA { margin-left: 185px; }
.conns .imgB { margin-left: 290px; }
.conns .imgC { margin-left: 395px; }


.conns .first, .conns .last {
position:absolute;
line-height:20px;
font-size:20px;
width:150px;
height:20px;
display:block;
color:760d0b;
overflow:hidden;
}

.conns .first {
transform: rotate(338deg) ;
-webkit-transform: rotate(338deg) ;
-moz-transform: rotate(338deg) ;
-o-transform: rotate(338deg) ;
-ms-transform: rotate(338deg) ;
text-align:right;
padding-right:20px;
margin-left:0px;
margin-top:30px;
border-bottom:2px solid #cba865;
}

.conns .last {
transform: rotate(158deg) ;
-webkit-transform: rotate(158deg) ;
-moz-transform: rotate(158deg) ;
-o-transform: rotate(158deg) ;
-ms-transform: rotate(158deg) ;
text-align:left;
padding-left:20px;
margin-left:10px;
margin-top:50px;
}

.connsImg {
float:left;
margin:5px 0px 5px 5px;
width:250px;
height:150px;
overflow:hidden;
}

.connsImg img {
width:250px;
height:150px;
overflow:hidden;
}

.connsInfo {
float:right;
margin:5px 5px 5px 0px;
width:225px;
height:140px;
padding:5px;
overflow:auto;
}


/* Left Side of Profile */

.personality {
width:230px;
height:195px;
margin:5px;
padding:5px;
overflow:auto;
-webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    1px 1px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         1px 1px 5px 0px rgba(0, 0, 0, 0.75);
}

.stats {
width:230px;
height:75px;
padding:5px;
margin:5px;
overflow:auto;
}

.connLinks {
width:250px;
height:120px;
overflow:auto;
}

.connLinks a {
text-decoration:none;
text-transform:uppercase;
display:block;
font-size:8px;
height:12px;
line-height:12px;
overflow:none;
text-align:center;
font-family: "Oswald", Helvetica, sans-serif;
padding:2px;
margin-bottom:2px;
color:760d0b;
background-color:ecebdd;
border-width:1px 5px 1px 5px;
border-style:solid;
border-color: #cba865;
letter-spacing:2pt;
-webkit-transition: all .8s ease 0s;
-moz-transition:all .8s ease 0s;
-ms-transition:all .8s ease 0s;
-o-transition: all .8s ease 0s;
transition: all .8s ease 0s;
}

.connLinks a:hover {
border-color: #ecebdd;
color:ecebdd;
background-color:cba865;
}

 .vicarious{ Hide Codes }
.profileInfo, .userProfileURL, .friendsComments, .blurbs, .friendSpace, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userProfiledetail,  .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .blacktext12, .navigationBar, .btext, .redlink, .redtext, .blacktext10,  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">

===Image sizes===

Top Banner:  760px width by 250px height

Sidebar Image: 250px width by 175px height

Left Side of Profile
Image below Personality: 250px width by 350px height (height doesn't matter)
Image below Stats: 250px width by 300px height (height doesn't matter)

Right Side of Profile
Bookworm Banner: 500px width by 300px height (height doesn't matter)
3 Gif images (Stacked diagonally): Make 1 image at 150px width by 150px height.  The layout will re-size two of them for the overlay effect.
3 Connection Images: 100px width by 100px height
Single Connection image: 250px width by 150px height

</font>

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

   </td></tr></table></td></tr></table></td></tr></table><table  cellspacing="0" cellpadding="0"><tr><td valign="top" padding="0"><table cellspacing="0" cellpadding="0"><tr><td>

<div id="color2"></div>
<div id="top">
<img src="http://i60.tinypic.com/dyt1ye.jpg">
</div>

<div id="sidebar"><div class="vicbox">

<img src="http://i57.tinypic.com/65pfkg.jpg">


<div class="mask"><div class="the411">

<big>Verses</big>
Verse | Verse | Verse | Verse

<big>Writing Style</big>
Multi-Para to Novella

<big>Dues</big>
Starters (0) Comments (0) Messages (0)



</div></div></div><div class="Name">

Display Name

</div><div class="Contact">

AOL: Contactinfo

</div><div class="linx">

<a href="/logincomplete.php">Home</a>
<a href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
<a href="/send_message.php?member_id=xxxxxx">Message</a>
<a href="/gallery.php?member_id=xxxxxx">Photos</a>
<a href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
<a href="/invite_friend.php?friend_id=xxxxxx">Add Me</a>
<a href="/#">Extra</a>
<a href="/#">Extra</a>


</div></div>


<div id="music"><div class="player">

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
    <param name="bgcolor" value="#f0efe2" />
<param name="wmode" value="opaque" />
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/zfht3iyjtu/FATM_RH.mp3&autoplay=1&bgcolor=f0efe2&loadingcolor=760d0b&buttoncolor=760d0b&slidercolor=760d0b" />
</object>


<font class="cite">You will note a line of code that starts with param name="wmode" above.  The normal player that you add from flash-mp3-player.net does not contain this.  If you are replacing the full player, make sure to add it into your code.  Firefox can be buggy with flash players. The extra code will keep it hidden until the sidebar has been hovered over.</font>



</div></div>

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


   </td></tr></table></td></tr></table></td></tr></table><table class="vic-LEFT-SIDE_table" cellspacing="0" cellpadding="0"><tr><td valign="top" padding="0"><table cellspacing="0" cellpadding="0"  style="width:250px;"><tr><td>

<font class="cite">

Left column of profile.

The above table code must remain at the top.  FULL tables below can be rearranged.</font>

</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<font class="h3">Personality</font>

<div class="personality">

 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.


</div>


</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<img src="http://i57.tinypic.com/2ch3vk7.jpg">



</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<font class="h3">Legal & Physical</font>

<div class="stats">
<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>

</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<font class="h3">Family & Relationships</Font>

<div class="stats">
<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>Sexual Orientation:</B> Input Info
<BR><b>Relationship Status:</B> Input Info
<BR><b>Current Relationship(S):</B> Input Info
<BR><b>Past Relationship(S):</B> Input Info

</div>

</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>


<font class="h3">Education & Employment</Font>

<div class="stats">
<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>Skills:</B> Input Info


</div>


</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<img src="http://i57.tinypic.com/20z7hiw.jpg">

</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<div class="connLinks">

<a href="/#">Name Here</a>
<a href="/#">Name Here</a>
<a href="/#">Name Here</a>
<a href="/#">Name Here</a>
<a href="/#">Name Here</a>
<a href="/#">Name Here</a>

</div>


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

</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<div style="width:240px; height:100px; padding:5px; overflow:auto;">

Extra Table

 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

</div>

-----------------------------TV---------------------------

 </td></tr></table></td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" class="vic-RIGHT-SIDE_table"><tr><td valign="top"><table cellspacing="0" cellpadding="0"  style="width:500px;"><tr><td>

<font class="cite">

Right column of profile.

The above table code must remain at the top.  FULL tables below can be rearranged.
</font>


</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>


<font class="h1">Hermione Granger</font>

<div class="about">

 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

<BR>

<em>Emphasized</em>
<b>Bold</b>
<i>Italics</i>
<font class="u">underline</font>
<font class="strike">strike</font>
<font class="strong">strong</font>


 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.



</div>


<font class="h2">I’ve tried a few simple spells just for practice and it’s all worked for me. I’ve learned all our course books by heart, of course.</font>

</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<img src="http://i62.tinypic.com/15dtjeq.jpg">


 </td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<div class="ThreeGifs">

<font class="cite">
Put the image url for your gif trio in the slot below. It will apply to all three gif spots.  If you decide you want three different images, delete <style.... to .../style> below and just put normal img src tags between the div tags on each of the below three gif divs.

</font>

<style>
.gifs {Background-image:url(http://i62.tinypic.com/fknu6h.jpg);}
</style>


<div class="gifs gifs-a"> </div>
<div class="gifs gifs-b"> </div>
<div class="gifs gifs-c"> </div>


<div class="title">I’m hoping to do some good in the world!</div>


<div class="textbox">

 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

 <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.


</div></div>


-----------------------------BOOKS--------------------------------

</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<div class="conns">

<div class="first">Ronald Weasley</div>
<div class="last">Gryffindor</div>

<img class="imga" src="http://i58.tinypic.com/2ur076g.jpg">
<img class="imgb" src="http://i60.tinypic.com/51xa87.jpg">
<img class="imgc" src="http://i60.tinypic.com/f9jl2c.jpg">

</div>

<div class="ConnsImg"><img src="http://i58.tinypic.com/2ijrwnn.jpg"></div>

<div class="ConnsInfo">

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

</div><table><tr><td><font class="h2">

Next time there’s a ball, ask me before someone else does, and not as a last resort!
</font></td></tr></table>


</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<div class="conns">

<div class="first">Harry Potter</div>
<div class="last">Gryffindor</div>

<img class="imga" src="http://i61.tinypic.com/2j0z0bt.jpg">
<img class="imgb" src="http://i57.tinypic.com/e6zkmu.jpg">
<img class="imgc" src="http://i62.tinypic.com/33k41m8.jpg">

</div>

<div class="connsImg"><img src="http://i60.tinypic.com/fcjuc6.jpg"></div>

<div class="connsInfo">

<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.


</div>
<table><tr><td>
<font class="h2">Books! And cleverness! There are more important things -- friendship and bravery.</font>
</td></tr></table>



-----------------------------HEROES-------------------------------

</td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0"><tr><td>

<div style="width:490px; height:100px; padding:5px; overflow:auto;">

Extra Table.  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

</div>