Layout 151a

       				        !!!!!!!!!!!!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 Sizes are located at the top of Like to Meet.

If you elect to keep the color scheme for pics, the psd is here:
https://drive.google.com/file/d/0B79YHAkeE7SuTnB2V3oyS1ZaTUE

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

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=PT+Sans+Narrow:400,700|Poiret+One|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);

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

.vicarious { Structure }
body {
width:100%;
height:100%;
background-color:0a003a;
background-image:url();
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:10px;
height:auto;
display:inline-block;
padding:0px;
}

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

.vic-RIGHT-SIDE_table { width:502px; 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:1px solid #0a003a;
background-color: e3e3e3;
overflow:hidden;
display:block;
}

.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  #000000;background-color:ededee; }

.vicarious { General Text }

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

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

b {
font-family: 'Roboto Condensed', sans-serif;
font-weight:700;
font-size:8pt;
text-transform:uppercase;
color:6c6688;
}

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

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

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

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

em {
font-family: 'Tangerine', cursive;
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, big, small {
margin:0px;
padding:0px;
display:block;
text-transform:none;
line-height:100%;
}

.h1, h1 {
font-family: 'Oswald', sans-serif;
font-weight:700;
font-size:80px;
line-height:100px;
height:100px;
text-transform:uppercase;
letter-spacing:2px;
text-align:center;
text-shadow:  -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

.h2, h2 {
font-family: 'PT Sans Narrow', sans-serif;
color:ffffff;
font-size:15px;
height:20px;
line-height:20px;
text-transform:uppercase;
text-align:right;
padding-right:15px;
background-color:0a003a;
border-bottom:10px double #ffffff;
}

.h3, h3 {
font-family: 'Poiret One', cursive;
font-size:18px;
height:20px;
line-height:20px;
padding:5px;
text-transform:uppercase;
text-align:center;
border-width:2px 0px;
border-style:solid;
border-color:0a003a;
margin-bottom:10px;
 }

.h4, h4 {
font-family: 'Roboto Condensed', sans-serif;
font-weight:700;
font-size:22px;
line-height:110%;
text-transform:uppercase;
text-align:center;
background-color:e6e5eb;
border-bottom:5px solid #0a003a;
margin:5px;
padding:5px;
}

.h5, h5 {
font-family: 'Dynalight', cursive;
font-size:25px;
line-height:25px;
height:25px;
text-transform:none;
text-align:right;
padding:5px;
border-width:2px 0px 2px 0px;
border-style:solid;
border-color: #0a003a;
text-shadow:  -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

.h6, h6 {
font-family: 'Oswald', sans-serif;
font-weight:700;
font-size:16px;
line-height:20px;
height:20px;
text-transform:uppercase;
letter-spacing:2px;
text-align:center;
color:ffffff;
padding:5px;
margin:5px 0px;
background-color: 0a003a;
}

.h7, h7 {
font-family: 'Roboto Condensed', sans-serif;
font-weight:300;
font-style:italic;
font-size:12px;
height:40px;
line-height:40px;
text-transform:uppercase;
letter-spacing:2px;
text-align:center;
border-width:7px 0px;
border-style:solid;
border-color:ffffff;
background-color:0a003a;
color:f3f3f3;
}

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


.vicarious { Divs }


/* Back Area */

#line, #line2, #back {
visibility:visible;
position:fixed;
top:0%;
z-index:-1;
padding:0px;
background-color:f3f3f3;
}

#line {
left:50%;
margin-top:0px;
margin-left:-500px;
width:20px;
height:100%;
}

#line2 {
left:0%;
margin-top:310px;
margin-left:0px;
width:100%;
height:20px;
}

#Back {
left:50%;
margin-top:0px;
margin-left:-310px;
width:830px;
height:100%;
}

/* Left Sidebar */

#sidebar {
visibility:visible;
position:fixed;
top:0%;
left:50%;
z-index:3;
margin-top:0px;
margin-left:-660px;
width:320px;
height:100%;
padding:0px;
}

#sidebar .vicbox {
margin-top:100px;
float:left;
width:300px;
height:400px;
overflow: hidden;
position: relative;
background-color:f3f3f3;
border:5px solid #e3e3e3;
padding:5px;
}

#sidebar .mask  {
width:150px;
height:400px;
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;
}

#sidebar .vicbox img {
opacity:1;
display: block;
position: relative;
width:300px;
height:400px;
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;
}

#sidebar .the411 {
position: relative;
text-align: center;
margin:0px;
width:150px;
height:400px;
padding: 0px;
overflow:hidden;
-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 {
opacity: 0.2;
-webkit-transform: translateX(150px);
-moz-transform: translateX(150px);
-ms-transform: translateX(150px);
-o-transform: translateX(150px);
transform: translateX(150px);
transition-delay: 0.1s;
}

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

#sidebar a {
text-decoration:none;
text-transform:none;
display:block;
width:100px;
font-size:10px;
height:15px;
line-height:15px;
overflow:none;
text-align:left;
font-family: 'Roboto', sans-serif;
font-weight:300;
background-color:f3f3f3;
padding-left:5px;
letter-spacing:1pt;
margin:2px 0px;
color:0a003a;
border-left-width:0px;
border-left-style: solid;
border-left-color: #0a003a;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#sidebar a:hover {
border-left-width:100px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#sidebar .linx {
text-align:center;
opacity:0;
z-index:4;
position:absolute;
margin-top:100px;
margin-left:190px;
width:100px;
height:auto;
overflow:hidden;
-webkit-transition: all .5s linear 0.1s;
-moz-transition:all .5s linear 0.1s;
-ms-transition:all .5s linear 0.1s;
-o-transition: all .5s linear 0.1s;
transition: all .5s linear 0.1s;
}

#sidebar:hover .linx {
margin-top:225px;
opacity:1;
-webkit-transition: all .5s linear 0.1s;
-moz-transition:all .5s linear 0.1s;
-ms-transition:all .5s linear 0.1s;
-o-transition: all .5s linear 0.1s;
transition: all .5s linear 0.1s;
}

.codrops { divs}

.ch-grid {
margin: 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 130px;
}

.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}

.ch-grid:after {
clear: both;
}

.ch-grid li {
width: 130px;
height: 130px;
display: block;
margin: 3px 10px;
}

.ch-item {
width: 100%;
height: 100%;
position: relative;
-webkit-perspective: 900px;
-moz-perspective: 900px;
-o-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;
}

.ch-info {
position: absolute;
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-position: center center;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}

.ch-info .ch-info-front {
-webkit-box-shadow: inset 0px 0px 0px 10px rgba(255, 255, 255, 0.4);
-moz-box-shadow:    inset 0px 0px 0px 10px rgba(255, 255, 255, 0.4);
box-shadow:         inset 0px 0px 0px 10px rgba(255, 255, 255, 0.4);
background-size: 130px 130px;
}

.ch-info .ch-info-back {
-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background-color:f3f3f3;
opacity: 0;
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow:    inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
box-shadow:         inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5);
}

.ch-info .about {
padding: 5px;
margin: 5px;
overflow:auto;
width:110px;
height:110px;
text-align:left;
}

.ch-info small {
font-family: 'Dynalight', cursive;
text-transform:none;
border-bottom: 2px solid #0a003a;
font-size:16pt;
line-height:100%;
padding:0px;
margin:5px 0px;
overflow:hidden;
text-align:right;
}

.ch-item:hover .ch-info-front {
-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;
}

.ch-item:hover .ch-info-back {
-webkit-transform: rotate3d(1,0,0,0deg);
-moz-transform: rotate3d(1,0,0,0deg);
-o-transform: rotate3d(1,0,0,0deg);
-ms-transform: rotate3d(1,0,0,0deg);
transform: rotate3d(1,0,0,0deg);
opacity: 1;
}


/* Left Side Tables */

.ImgBlock {
width:300px;
height:auto;
overflow:hidden;
}

.ImgBlock .left {float:left; width:145px;}
.ImgBlock .right {float:right; width:145px;}

.ImgBlock .img1, .ImgBlock .img2, .ImgBlock .img3 {
overflow:hidden;
width:145px;
}
.ImgBlock .img1 {height:50px;}
.ImgBlock .img2 {height:90px;  margin-top:5px; }
.ImgBlock .img3 {height:145px;}

.ImgBlock .spacer {margin-top:10px;}

.music {
width:300px;
height:auto;
text-align:center;
display:block;
overflow:none;
}

.Stats_Table {
position:relative;
width:300px;
height:250px;
overflow:hidden;
}

.Stats_Table .title {
display:block;
position:absolute;
margin-top:100px;
margin-left:-100px;
width:240px;
height:40px;
overflow:hidden;
color:ffffff;
font-family: "Oswald", Helvetica, sans-serif;
font-size:20px;
line-height:40px;
text-align:left;
padding:5px;
text-transform:uppercase;
transform: rotate(270deg) ;
-webkit-transform: rotate(270deg) ;
-moz-transform: rotate(270deg) ;
-o-transform: rotate(270deg) ;
-ms-transform: rotate(270deg) ;
background-color:0a003a;
}


.Stats_Table .stats {
position:absolute;
margin-top:5px;
margin-left:55px;
padding:5px;
width:230px;
height:130px;
overflow:auto;
background-color:f3f3f3;
}

.Stats_Table img {
position:absolute;
margin-top:150px;
margin-left:50px;
 }

.connLinks {
width:141px;
height:132px;
padding:2px;
overflow:auto;
background-color:0a003a;
}

.connLinks .left {
float:left;
}

.connLinks .right {
float:left;
}

.connLinks a.Lk1, .connLinks a.Lk2 {
font-family: 'PT Sans Narrow', sans-serif;
text-decoration:none;
text-align:center;
padding:0px;
margin:1px;
text-transform:uppercase;
display:block;
font-size:8px;
height:12px;
line-height:12px;
color:0a003a;
letter-spacing:0px;
-webkit-transition: all .3s ease-in-out 0s;
-moz-transition:all .3s ease-in-out 0s;
-ms-transition:all .3s ease-in-out 0s;
-o-transition: all .3s ease-in-out 0s;
transition: all  .3s ease-in-out 0s;
 }

.connLinks a.Lk1 {
background-color:e6e5eb;
color:6c6688;
 }

.connLinks a.Lk2 {
background-color:dcdcdc;
}

.connLinks a:hover {
background-color:0a003a;
color:ffffff;
letter-spacing:2px;
}

/* Right Side Tables */

.Outside {
width:500px;
height:400px;
overflow:hidden;
-webkit-box-shadow: inset 0px 0px 0px 10px rgba(255, 255, 255, 0.8);
-moz-box-shadow:    inset 0px 0px 0px 10px rgba(255, 255, 255, 0.8);
box-shadow:         inset 0px 0px 0px 10px rgba(255, 255, 255, 0.8);
}

.about1 {
background-color:f3f3f3;
width:430px;
height:330px;
margin:20px;
padding:5px;
overflow:auto;
border:10px double #0a003a;
}

.about2 {
background-color:f3f3f3;
width:205px;
height:200px;
padding:5px;
overflow:auto;
border:10px solid #e6e5eb;
margin:5px;
-webkit-box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.54);
-moz-box-shadow:    3px 3px 7px 0px rgba(0, 0, 0, 0.54);
box-shadow:         3px 3px 7px 0px rgba(0, 0, 0, 0.54);
}

.about2 .left {float:left;  }
.about2 .right {float:right; }

.conn {
width:500px;
height:245px;
overflow:hidden;
}

.connImg {
position:relative;
float:left;
height:245px;
width:245px;
overflow:hidden;
background-size:245px 245px;
background-position:center center;
background-repeat:no-repeat;
-webkit-transition: all .3s ease-in-out 0s;
-moz-transition:all .3s ease-in-out 0s;
-ms-transition:all .3s ease-in-out 0s;
-o-transition: all .3s ease-in-out 0s;
transition: all  .3s ease-in-out 0s;
}

.conn:hover .connImg {
background-size:225px 225px;
-webkit-transition: all .3s ease-in-out 0s;
-moz-transition:all .3s ease-in-out 0s;
-ms-transition:all .3s ease-in-out 0s;
-o-transition: all .3s ease-in-out 0s;
transition: all  .3s ease-in-out 0s;
}

.connImg .mask {
background-color:0a003a;
width:100%;
height:100%;
 opacity:0;
position:absolute;
top:0;
bottom:0;
-webkit-transition: all .8s linear 0s;
-moz-transition:all .8s linear 0s;
-ms-transition:all .8s linear 0s;
-o-transition: all .8s linear 0s;
transition: all .8s linear 0s;
-webkit-box-shadow: inset 0px 0px 0px 10px rgba(255, 255, 255, 0.7);
-moz-box-shadow:    inset 0px 0px 0px 10px rgba(255, 255, 255, 0.7);
box-shadow:         inset 0px 0px 0px 10px rgba(255, 255, 255, 0.7);
}

.conn:hover .mask {
opacity:0.7;
-webkit-transition: all .8s linear 0s;
-moz-transition:all .8s linear 0s;
-ms-transition:all .8s linear 0s;
-o-transition: all .8s linear 0s;
transition: all .8s linear 0s;
}

.connText {
float:right;
margin:5px;
padding:5px;
height:225px;
width:225px;
overflow:auto;
background-color:f3f3f3;
}

.connImg big {
font-family: 'Dynalight', cursive;
opacity:0;
position:absolute;
margin-top:50px;
left:0%;
font-size:20px;
height:25px;
line-height:25px;
width:100%;
text-transform:none;
color:ffffff;
text-align:center;
-webkit-transition: all .8s linear 0s;
-moz-transition:all .8s linear 0s;
-ms-transition:all .8s linear 0s;
-o-transition: all .8s linear 0s;
transition: all .8s linear 0s;
text-shadow: 4px 4px 2px rgba(0, 0, 0, 1);
}

.conn:hover big {
opacity:1;
margin-top:110px;
}

.connImg  .line, .connImg  .line2 {
opacity:0;
position: absolute;
top:50%;
left:50%;
width: 90%;
height: 1px;
background-color:ffffff;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}

.conn:hover .line {
opacity: 0.8;
-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
transform: translate3d(-50%,-50%,0) rotate(45deg);
}

.conn:hover .line2 {
opacity: 0.8;
-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
transform: translate3d(-50%,-50%,0) rotate(-45deg);
}


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

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

<font class="cite">

Image Dimensions

Sidebar:
Main Image = 300px width by 400px height
3 Images Each = 130px by 130px

Left Side:
Box Set
  Img1 (small) = 145px width by 50px height
  Img2 (medium) = 145px width by 90px height
  Img3 (large) = 145px by 145px
Stats Pics = 250px width by 100px height

Right Side:
Banner = 500px width by 300px height (height doesn't matter)
Connection Image = 245px width by 245px height

</font>



<div id="line"></div><div id="line2"></div> <div id="back"></div>

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

<img src="http://i61.tinypic.com/nmc7ki.jpg">

<div class="mask"><div class="the411"><ul class="ch-grid"><li><div class="ch-item"><div class="ch-info">

<div class="ch-info-front" style="background-image: url(http://i61.tinypic.com/n4cuuo.jpg);">

</div><div class="ch-info-back">

<div class="about">
<small>Verses</small>

<BR>▪ Verse Name
<BR>▪ Verse Name
<BR>▪ Verse Name
<BR>▪ Verse Name

</div></div></div></div></li><li><div class="ch-item"><div class="ch-info">

<div class="ch-info-front" style="background-image: url(http://i60.tinypic.com/2lvd3cj.jpg);">

</div><div class="ch-info-back">

<div class="about">
<small>Writing Style</small>

<BR>☐ One-liners
<BR>☐ Para
<BR>☑ Multi-para
<BR>☑ Novella

</div></div></div></div></li><li><div class="ch-item"><div class="ch-info">

<div class="ch-info-front" style="background-image: url(http://i61.tinypic.com/rvynfa.jpg);">

</div><div class="ch-info-back">

<div class="about">
<small>Dues</small>

<BR>✎ Starters (0)
<BR>✎ Comments (0)
<BR>✎ Messages (0)


</div></div></div></div></li></ul></div></div></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>
<a href="/#">Extra</a>

</div></div>





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

</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:300px;"><tr><td>

<font class="cite">
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>

<div class="ImgBlock"><div class="left">

<img class="img1" src="http://i61.tinypic.com/2ly23xl.jpg">

<img class="img2" src="http://i61.tinypic.com/30mlqqe.jpg">

<img class="img3 spacer" src="http://i58.tinypic.com/23vdtlj.jpg">


</div><div class="right">

<img class="img3" src="http://i61.tinypic.com/2s94meq.jpg">

<img class="img1 spacer" src="http://i58.tinypic.com/219z7yv.jpg">

<img class="img2" src="http://i59.tinypic.com/sxgghc.jpg">


</div></div>


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

<div class="music">

<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="#e3e3e3" />
<param name="wmode" value="opaque" />
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/qkml5dj7yn/DG_BB_F_SG.mp3&autoplay=1&bgcolor=e3e3e3&loadingcolor=0a003a&buttoncolor=0a003a&slidercolor=0a003a" />
</object>

</div>

<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, leaving the player 'on top' of everything even when it is supposed to be hidden. While the extra code is not necessary in this particular layout, it's a good idea to get in the habit of adding it.</font>

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

<div class="Stats_Table">
<div class="title">Personality</div>
<div class="stats">

<b>Traits:</B> Input Info
<BR><b>Quirks:</B> Input Info
<BR><b>Habits:</B> Input Info

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<img src="http://i61.tinypic.com/28sy0q0.jpg">

</div>


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

<div class="Stats_Table">
<div class="title">Legal & Physical</div>
<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>

<img src="http://i59.tinypic.com/34g5b2x.jpg">

</div>



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

<div class="Stats_Table">
<div class="title">Family & Relationships</div>
<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>

<img class="img1" src="http://i59.tinypic.com/21npcow.jpg">

</div>



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


<div class="Stats_Table">
<div class="title">Education & Employment</div>
<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>

<img class="img1" src="http://i58.tinypic.com/amfez8.jpg">

</div>

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


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

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

<font class="h4">Title</font>
<font class="h2">Title</font>

<DIV STYLE="WIDTH:280PX; HEIGHT:100PX; MARGIN:5PX; PADDING:5PX; OVERFLOW:AUTO;">

Extra Table for the left side of profile.

</div>

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

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

<font class="h4">Title</font>
<font class="h2">Title</font>

<DIV STYLE="WIDTH:280PX; HEIGHT:100PX; MARGIN:5PX; PADDING:5PX; OVERFLOW:AUTO;">

Extra Table for the left side of profile.

</div>

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

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

<font class="cite">
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="cite">Tip: If your name is long, go to About Me and search for H1 in General Text.  Alter the font-size or letter-spacing to make the font smaller.</font>

<font class="h1">Mrs. Smith</font>
<font class="h2">Quote goes here.</font>

<div class="outside"><div class="about1">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<b>Bold</b>
<i>Italic</i>
<em>Emphasize</em>
<font class="u">Underline</font>
<font class="strike">strike</font>
<font class="strong">strong</font>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


</div></div>

<font class="h3">Something goes here.</font>



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

<img src="http://i59.tinypic.com/r87d79.jpg">



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

<font class="h4">Title Goes Here</font>

<div class="about2 left">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<div class="about2 right">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

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

<font class="h5">Before Anyone Else</font>

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

<div class="conn">

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

<div class="mask"></div><div class="line"></div><div class="line2"></div>

<big>Connection Name</big>

</div><div class="conntext">

<p>You can duplicate this entire table to add additional connection spots. Make sure to duplicate the Quote table below it as well.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div></div>

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

<font class="h7">Quote goes here here and here.</font>

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

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


<font class="h4">Title</font>
<font class="h2">Title</font>

<DIV STYLE="WIDTH:480PX; HEIGHT:100PX; MARGIN:5PX; PADDING:5PX; OVERFLOW:AUTO;">

Extra Table for the right side of profile.

</div>
-----------------------------HEROES-------------------------------

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


<font class="h4">Title</font>
<font class="h2">Title</font>

<DIV STYLE="WIDTH:480PX; HEIGHT:100PX; MARGIN:5PX; PADDING:5PX; OVERFLOW:AUTO;">

Extra Table for the right side of profile.

</div>