CSS/DIV Layout 144a

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

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

INSTRUCTIONS ARE LOCATED IN LIKE TO MEET

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

IMAGES PSD

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


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

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=Raleway:400,900|Oswald|Dynalight|Roboto+Condensed:400,700|Lato:300,400,700|Ruthie);

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

.vicarious { Structure }

body{
width:100%;
height:100%;
padding:0px;
margin:0px;
background-color:326d7e;
background-image:url(http://i62.tinypic.com/2lvl8gw.jpg);
background-position:center center;
background-attachment:fixed;
background-repeat:repeat;
}

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

.vicarious{ Google Chrome Scrollbar }

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track { border: 1px solid #2b6879; background-color:transparent; }
::-webkit-scrollbar-thumb { border: 1px solid #2b6879; background-color:c8bda5; }


.vicarious { GENERAL TEXT }

a, b, i, p, table, tr, td, li, div, .text, .btext {
font-family:calibri;
font-size:7.5pt;
line-height:95%;
color: beb8a2;
padding:0px;
margin:0px;
text-decoration:none;
text-transform:none;
word-spacing:-1px;
}

a { display:block; }

p {
text-align:justify;
margin-top: 5px;
text-indent:3px;
}

p:first-line {
font-weight:bold;  }

p:first-letter {
font-size: 9pt;
font-family: 'Ruthie', cursive;
padding-left:5px;
}

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

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

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

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

.strong, strong {
font-family:courier new;
font-size: 9pt;
text-transform:uppercase;
color:ddc9aa;
font-weight:900;
}

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

.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, .lyric, lyric, .lyric2, lyric2, .lyric3, lyric3, .lyric4, lyric4, .lyric5, lyric5, .lyric6, lyric6, .lyric7, lyric7, small, big  {
padding:0px;
margin:0px;
line-height:auto;
}

.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 {
display:block;
}

big {
font-size:36pt;
text-transform:uppercase;
font-family: 'Dynalight', cursive;
}

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


p {text-align:justify;}


.vicarious{ Div Commons }

/* MAIN ATTRIBUTES SHARED BY DIVS FROM VARIOUS SECTIONS */



/* Background X mark images for Divs ( Same as profile body background ) */

#SIDEBAR #default, .pic .mask,  .stats .block, .m11 .bae, .m22 .mask  {
background-image:url(http://i62.tinypic.com/2lvl8gw.jpg);
background-position:center center;
background-repeat:repeat;
}

#MAIN1, #MAIN2, #LINX, #SIDEBAR, #LINE1, #LINE2, #LINE3 {
visibility:visible;
top:0%;
left:50%;
z-index:2;
overflow:hidden;
}

#MAIN1, #MAIN2 { position:absolute; }

#LINX, #SIDEBAR, #LINE1, #LINE2, #LINE3  {position:fixed;}
#LINX, #SIDEBAR, #MAIN2 {background-color:transparent; }


.vicarious{ Divs }


/* SIDEBAR */

#SIDEBAR #default, #SIDEBAR:hover  #default, #SIDEBAR #info, #SIDEBAR:hover #info  {
-webkit-transition: all .6s ease 1s;
-moz-transition: all .6s ease 1s;
-o-transition: all .6s ease 1s;
-ms-transition: all .6s ease 1s;
transition: all .6s ease 1s;
}

#sidebar #namefield, #SIDEBAR #lower {
transition:All .6s linear 0s;
-webkit-transition:All .6s linear 0s;
-moz-transition:All .6s linear 0s;
-o-transition:All .6s linear 0s;
-ms-transition: all .6s ease 0s;
}

#SIDEBAR   {
margin-top:0px;
margin-left:-575px;
padding:0px;
width:310px;
height:100%;
}

#SIDEBAR #default  {
position:absolute;
overflow:hidden;
margin-left:0px;
margin-top:100px;
z-index:3;
padding:0px;
width:300px;
height:400px;
padding:0px;
background-color:829893 ;
border:5px solid #c8bda5;
}

#SIDEBAR:hover  #default {
opacity:0;
}

#default img {
overflow:hidden;
margin:5px;
width:280px;
height:380px;
border:5px solid #2b6879;
}

#SIDEBAR #info  {
position:absolute;
overflow:hidden;
margin-left:0px;
margin-top:100px;
z-index:3;
padding:0px;
width:300px;
height:400px;
opacity:0;
background-color:2b6879;
border:5px solid #c8bda5;
}

#SIDEBAR:hover #info {
opacity:1;
}

#info .textbox {
position:absolute;
height:250px;
width:250px;
overflow:auto;
margin-top:0px;
margin-left:20px;
padding:5px;
opacity:0;
background-color: rgba(255,255,255,0.05);
transition:All .6s linear 0s;
-webkit-transition:All .6s linear 0s;
-moz-transition:All .6s linear 0s;
-o-transition:All .6s linear 0s;
-ms-transition: all .6s ease 0s;
}

#SIDEBAR:hover .textbox {
opacity:1;
margin-top:20px;
transition:All 1.6s linear 3.6s;
-webkit-transition:All 1.6s linear 3.6s;
-moz-transition:All 1.6s linear 3.6s;
-o-transition:All 1.6s linear 3.6s;
-ms-transition: all 1.6s ease 3.6s;
}

#SIDEBAR .h1, #SIDEBAR h1 {
margin:10px 0px;
background-color:829893;
font-size:14pt;
font-family: 'Oswald', sans-serif;
font-weight:700;
font-style:italic;
text-align:center;
padding:0px 10px;
text-transform:none;
line-height:60%;
}


#info .contact {
position:absolute;
overflow:hidden;
margin-top:305px;
margin-left:5px;
height:25px;
width:280px;
padding:0px 5px;
opacity:0;
color:2b6879;
background-color:c8bda5;
font-size:9pt;
line-height:25px;
font-family: 'Oswald', sans-serif;
display:block;
text-align:center;
text-transform:none;
transition:All .2s linear 0s;
-webkit-transition:All .2s linear 0s;
-moz-transition:All .2s linear 0s;
-o-transition:All .2s linear 0s;
-ms-transition: all .2s ease 0s;
}

#SIDEBAR:hover .contact{
opacity:1;
margin-top:365px;
transition:All 1.6s linear 4s;
-webkit-transition:All 1.6s linear 4s;
-moz-transition:All 1.6s linear 4s;
-o-transition:All 1.6s linear 4s;
-ms-transition: all 1.6s ease 4s;
}


#sidebar #namefield {
position:fixed;
overflow:hidden;
margin-top:100px;
margin-left:0px;
height:60px;
line-height:60px;
width:290px;
opacity:0;
background-color:829893;
font-size:16pt;
z-index:5;
font-family: 'Oswald', sans-serif;
font-weight:700;
font-style:italic;
display:block;
text-align:center;
padding:0px 10px;
text-transform:none;
-webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    0px 5px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         0px 5px 5px 0px rgba(0, 0, 0, 0.75);
}

#SIDEBAR:hover #namefield {
margin-top:400px;
opacity:1;
transition:All 1.6s linear 2s;
-webkit-transition:All 1.6s linear 2s;
-moz-transition:All 1.6s linear 2s;
-o-transition:All 1.6s linear 2s;
-ms-transition: all 1.6s ease 2s;
}


#SIDEBAR #lower {
position:fixed;
overflow:hidden;
margin-top:100px;
margin-left:0px;
height:105px;
width:300px;
opacity:0;
background-color:2b6879;
border:5px solid #c8bda5;
}

#SIDEBAR:hover #lower {
margin-top:515px;
opacity:1;
transition:All 2s linear  2s;
-webkit-transition:All 2s linear  2s;
-moz-transition:All 2s linear  2s;
-o-transition:All 2s linear 2s;
-ms-transition: all 2s ease  2s;
}

#lower .quote {
width:280px;
height:60px;
padding:5px;
margin:5px;
display:block;
font-family: 'Dynalight', cursive;
font-size:14pt;
overflow:hidden;
text-align:center;
background-color: rgba(255,255,255,0.05);
}

#lower .music {
width:300px;
height:20px;
text-align:center;
display:block;
overflow:hidden;
margin-bottom:5px;
}


/* MAIN AREA 1 */

#MAIN1  {
margin-top:25px;
margin-left:-240px;
padding:0px;
width:700px;
height:510px;
background-color:2b6879;
border:5px solid #c8bda5;
}

#MAIN1 .title   {
position:absolute;
width:285px;
height:55px;
margin-top:5px;
margin-left:5px;
}

#MAIN1 .h1, #MAIN1 h1 {
height:25px;
line-height:25px;
padding:5px;
font-size:25px;
text-align:center;
background-color:829893;
font-family: 'Oswald', sans-serif;
}

#MAIN1 .h2, #MAIN1 h2  {
height:10px;
line-height:10px;
padding:5px;
font-size:10px;
text-align:right;
color:2b6879;
background-color:c8bda5;
font-family: 'Oswald', sans-serif;
}

#MAIN1 .about {
position:absolute;
width:265px;
height:400px;
padding:10px;
overflow:auto;
margin-top:65px;
margin-left:5px;
background-color: rgba(255,255,255,0.05);
}

#MAIN1 .pic {
position:absolute;
background-image:repeat:no-repeat;
width:400px;
height:480px;
background-size:400px 480px;
overflow:hidden;
margin-top:5px;
margin-left:295px;
}

.pic .mask, .pic:hover .mask, .pic .stats, .pic:hover .stats {
-webkit-transition: all .6s linear 0s;
-moz-transition: all .6s linear 0s;
-o-transition: all .6s linear 0s;
-ms-transition: all .6s linear 0s;
transition: all .6s linear 0s;
}

.pic .mask, .pic .stats {
position:absolute;
opacity:0;
overflow:hidden;
}

.pic .mask {
width:400px;
height:480px;
margin-top:0px;
margin-left:0px;
outline:solid;
outline-offset:-10px;
outline-width:2px;
color:2b6879;
background-color:829893;
}

.pic .stats {
padding:10px;
width:330px;
height:410px;
margin-top:20px;
margin-left:20px;
border:5px solid #c8bda5;
opacity:0;
background-color: rgba(255,255,255,0.05);
background-color:829893;
text-align:left;
}

.stats .block {
float:right;
width:175px;
height:175px;
margin:0px 0px 5px 5px;
overflow:hidden;
outline:solid;
outline-offset:-10px;
outline-width:5px;
color:2b6879;
background-color:c8bda5;
}

.block .photo {
margin-top:25px;
margin-left:25px;
width:140px;
height:140px;
padding:20px;
background-size:140px 140px;
background-repeat:no-repeat;
background-position:top left;
-webkit-border-radius: 360px;
-moz-border-radius: 360px;
border-radius:360px;
background-color:2b6879;
-webkit-box-shadow: -2px -2px 6px 0px rgba(0, 0, 0, 0.30);
-moz-box-shadow:    -2px -2px 6px 0px rgba(0, 0, 0, 0.30);
box-shadow:         -2px -2px 6px 0px rgba(0, 0, 0, 0.30);
}

.stats .h3, .stats h3 {
outline:solid;
outline-offset:-5px;
outline-width:2px;
color:6c857f;
height:20px;
line-height:20px;
font-size:15px;
padding:5px 10px 5px 5px;
margin:5px 0px;
text-align:right;
background-color:c8bda5;
font-family: 'Roboto Condensed', sans-serif;
font-weight:700;
}

.pic:hover .mask, .pic:hover .stats {opacity:1;}

.pic:hover .stats {overflow:auto;}

#MAIN1 #more {
z-index:3;
position:absolute;
overflow:hidden;
width:700px;
height:20px;
margin-top:490px;
margin-left:0px;
background-color:2b6879;
-webkit-transition: all .6s linear .5s;
-moz-transition: all .6s linear .5s;
-o-transition: all .6s linear .5s;
-ms-transition: all .6s linear .5s;
transition: all .6s linear .5s;
}

#MAIN1 #more:hover {
margin-top:0px;
height:500px;
-webkit-transition: all .6s linear .5s;
-moz-transition: all .6s linear .5s;
-o-transition: all .6s linear .5s;
-ms-transition: all .6s linear .5s;
transition: all .6s linear .5s;
}

#more .plus {
z-index:3;
position:absolute;
width:700px;
height:20px;
line-height:20px;
font-size:10px;
display:block;
overflow:hidden;
margin-top:0px;
margin-left:0px;
background-color: rgba(255,255,255,0.05);
opacity:1;
-webkit-transition: all .6s linear 1s;
-moz-transition: all .6s linear 1s;
-o-transition: all .6s linear 1s;
-ms-transition: all .6s linear 1s;
transition: all .6s linear 1s;
}

#more:hover .plus {
height:0px;
opacity:0;
-webkit-transition: all .0s linear 1s;
-moz-transition: all .0s linear 1s;
-o-transition: all .0s linear 1s;
-ms-transition: all .0s linear 1s;
transition: all .0s linear 1s;
}

#more .pic, #more .about, #more .title, #more:hover .pic, #more:hover .about, #more:hover .title {
-webkit-transition: all .6s linear 1s;
-moz-transition: all .6s linear 1s;
-o-transition: all .6s linear 1s;
-ms-transition: all .6s linear 1s;
transition: all .6s linear 1s;
}

#more .pic, #more .about, #more .title {
opacity:0;
}

#more:hover .pic, #more:hover .about, #more:hover .title {
opacity:1;
overflow:auto;
}


/* MAIN AREA 2 */

#MAIN2  {
margin-top:550px;
margin-left:-240px;
padding:0px;
width:710px;
height:260px;
}

#MAIN2 .m11, #MAIN2 .m22, #MAIN2 .m33 {
position:absolute;
margin-top:0px;
padding:0px;
height:250px;
background-color:2b6879;
border:5px solid #c8bda5;
}

#MAIN2 .m11 {
margin-left:0px;
width:300px;
overflow:hidden;
}

#MAIN2 .m22 {
margin-left:315px;
width:250px;
overflow:hidden;
}

#MAIN2 .m33 {
margin-left:580px;
width:120px;
overflow-y:auto;
overflow-x:hidden;
}

.m11 .bae {
float:right;
width:140px;
height:140px;
margin:0px 0px 0px 5px;
overflow:hidden;
color:2b6879;
outline:solid;
outline-offset:-10px;
outline-width:1px;
background-color:2b6879;
}

.bae .conn5 {
margin-top:10px;
margin-left:10px;
width:120px;
height:120px;
background-size:120px 120px;
background-repeat:no-repeat;
background-color:2b6879;
}

.m11 .about {
width:280px;
height:230px;
padding:5px;
margin:5px;
overflow:auto;
font-size:7pt;
background-color:67898b;
text-align:left;
}

.m11 p {
font-size:7pt;
}

.m11 b {
color:34626f;
font-size:10pt;
}

.m11 big {
font-family: 'Ruthie', cursive;
font-size:20pt;
padding-right:5px;
}

.m11 .strong, .m11 strong {
font-family: 'Dynalight', cursive;
font-size: 10pt;
text-transform:none;
font-weight:normal;
}

.m11 .h5, .m11 h5 {
padding:10px 5px;
margin:0px 0px 5px 0px;
font-size:13pt;
text-align:right;
border-bottom:2px solid #c8bda5;
font-style:italic;
-moz-border-radius-bottomleft: 90px;
-webkit-border-bottom-left-radius: 90px;
border-bottom-left-radius: 90px
}

#MAIN2 .h4, #MAIN2 h4 {
font-family: 'Dynalight', cursive;
font-size:16pt;
text-align:right;
padding:5px;
border-bottom:2px solid #2b6879;
color:2b6879;
}

.m22 .conn1, .m22 .conn2, .m22 .conn3, .m22 .conn4 {
position:absolute;
padding:0px;
width:125px;
height:125px;
z-index:1;
background-size:125px 125px;
-webkit-transition: all .4s ease 0s;
-moz-transition: all .4s ease 0s;
-o-transition: all .4s ease 0s;
-ms-transition: all .4s ease 0s;
transition: all .4s ease 0s;
}

.m22 .conn1, .m22 .conn2 {margin-top:0px;}
.m22 .conn3, .m22 .conn4 {margin-top:125px;}
.m22 .conn1, .m22 .conn3 {margin-left:0px;}
.m22 .conn2, .m22 .conn4 {margin-left:125px;}


.m22 .conn1:hover, .m22 .conn2:hover, .m22 .conn3:hover, .m22 .conn4:hover {
width:250px;
height:250px;
margin-top:0px;
margin-left:0px;
z-index:2;
background-size:250px 250px;
-webkit-transition: all .4s ease .2s;
-moz-transition: all .4s ease .2s;
-o-transition: all .4s ease .2s;
-ms-transition: all .4s ease .2s;
transition: all .4s ease .2s;
}

.m22 .mask {
overflow:hidden;
position:relative;
 width:250px;
height:250px;
margin-top:0px;
margin-left:0px;
-webkit-transition: all .4s ease 0s;
-moz-transition: all .4s ease 0s;
-o-transition: all .4s ease 0s;
-ms-transition: all .4s ease 0s;
transition: all .4s ease 0s;
opacity:0;
background-color:c8bda5;
outline:solid;
outline-offset:-10px;
outline-width:5px;
color:2b6879;
}

.conn1:hover .mask, .conn2:hover .mask, .conn3:hover .mask, .conn4:hover .mask {
-webkit-transition: all .6s ease 1.6s;
-moz-transition: all .6s ease 1.6s;
-o-transition: all .6s ease 1.6s;
-ms-transition: all .6s ease 1.6s;
transition: all .6s ease 1.6s;
opacity:1;
}

.m22 .about {
overflow:hidden;
position:absolute;
width:200px;
height:200px;
margin-top:20px;
margin-left:20px;
padding:5px;
-webkit-transition: all .4s ease 0s;
-moz-transition: all .4s ease 0s;
-o-transition: all .4s ease 0s;
-ms-transition: all .4s ease 0s;
transition: all .4s ease 0s;
opacity:0;
background-color:829893;
}

.conn1:hover .about, .conn2:hover .about, .conn3:hover .about, .conn4:hover .about {
overflow:auto;
-webkit-transition: all .6s ease 1.6s;
-moz-transition: all .6s ease 1.6s;
-o-transition: all .6s ease 1.6s;
-ms-transition: all .6s ease 1.6s;
transition: all .6s ease 1.6s;
opacity:1;
}

.m33 a, .m33 a:hover {
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
}

.m33 a {
overflow:hidden;
text-decoration:none;
font-family: 'Lato', sans-serif;
font-weight:300;
height:20px;
line-height:20px;
color: 2b6879;
margin:0px 1px 1px 1px;
background-color:c8bda5;
border: 2px solid #829893;
text-align:center;
}

.m33 a:hover {
border-left-width:118px;
}

/* PROFILE LINES */

#LINE1, #LINE2, #LINE3 {
margin-top:0px;
padding:0px;
width:20px;
height:100%;
}

#LINE1 {
margin-left:495px;
background-color:829893;
}

#LINE2 {
margin-left:525px;
background-color:c1baa3;
}

#LINE3 {
margin-left:-445px;
width:50px;
background-color:67898b;
}


/* PROFILE LINKS */

#LINX {
overflow:none;
margin-top:-300px;
margin-left:500px;
padding:0px;
width:40px;
height:300px;
text-decoration:none;
background-color:transparent;
-webkit-transition: all 0s linear 0s;
-moz-transition: all 0s linear 0s;
-o-transition: all 0s linear 0s;
-ms-transition: all 0s linear 0s;
transition: all 0s linear 0s;
}

body:hover #LINX  {
margin-top:100px;
-webkit-transition: all .6s linear 0s;
-moz-transition: all .6s linear 0s;
-o-transition: all .6s linear 0s;
-ms-transition: all .6s linear 0s;
transition: all .6s linear 0s;
}

#LINX a {
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    2px 2px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

#LINX a {
font-size:0pt;
margin:5px;
padding:0px;
width:10px;
height:10px;
background-color:2b6879;
border:10px double #c8bda5;
color:2b6879;
outline:solid;
outline-offset:-10px;
outline-width:0px;
}

#LINX a:hover {
outline:solid;
outline-offset:-5px;
outline-width:5px;
background-color:c8bda5;
border:10px double #2b6879;
}



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

PAST THIS INTO LIKE TO MEET FOR REFERENCE.  IT WILL NOT BE VISIBLE ON THE PROFILE.


Instructions

------ > BACKGROUND IMAGES

The background images are see-through X marks.  If you change the color of the background, you will note that the color of the background changes by the X marks remain.  If you don't want the X marks, remove the link under Body {background-image:url (LINK) area in About Me.  There will also an X mark background image in a few of the divs. The same thing applies.  Find the DIV COMMONS in About Me and remove the link if you don't want the X marks to be visible.


------ > IMAGES

A summary of sizes needed are as follows:

One default pic (INTERESTS/ div id="default") of 280px width X 380px height.

Two main pics (MUSIC / div class="pic") of 400px width X 480px height.

For the sake of simplicity, the remaining pics should be 250px width by 250px height. The layout will size them down appropriate if necessary.


------ > TEXT

.vicarious { GENERAL TEXT }

For the most part, text specifications under General Text apply to the full layout. As such, if you want to change the Bold color for the layout, you would do so under General Text / Bold; however sometimes changes for coloring, size, etc will instead be made IN the individual div sections (under About Me) because they apply to JUST that div.

Example - Assume the Bold under General Text is White #FFFFFF and the Bold under a Div1 is Black #000000.  To alter the color for the Bold in Div1, you would go to that div section in About Me and alter the B color there instead of the one in General Text.

------ > Music Player

You will note a line of code that starts with param name="wmode" on the music player itself.  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 line of code will keep the player from displaying improperly on the screen.


</cite>

-----------------------------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="LINE3"></div><div id="sidebar"><div ID="lower"><div class="quote">

Thy soul shall find itself alone 'mid dark thoughts of the gray tombstone; not one, of all the crowd, to pry into thine hour of secrecy.

</div><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="#2b6879" />
<param name="wmode" value="opaque" />
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/v31anstuba/TON_BNO1.mp3&autoplay=1&bgcolor=2b6879&loadingcolor=c8bda5&buttoncolor=c8bda5&slidercolor=c8bda5" />
</object>


</div></div><div ID="default">

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


</div><div id="info"><div class="textbox">

<font class="h1">Verses</font>
Verse | Verse | Verse | Verse

<font class="h1">Writing Style</font>
Multiple Paragraphs to Novella (Word Count = ?)

<font class="h1">Dues</font>
Starters (0) | Comments (0) | Messages (0)

<font class="h1">Brief Bio or Intro</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.

</div><div class="contact">

AIM: CONTACTINFO

</div></div><div id="namefield">

<big>F</big>irstname
<big>L</big>astname

</div></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="main1">

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

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

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

<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

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

<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

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

<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="title">

<font class="h1">History & Origins</font>
<font class="h2">Quote</font>

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

<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><div id="more"><div class="plus">+</div>

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

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

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

<div class="status2"><div class="block">

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

</div></div>

<b>Type</b> Input Info
<br><b>Traits</b> Input Info
<br><b>Quirks</b> Input Info

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

<font class="h1">Present Day</font>
<font class="h2">Quote</font>

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

<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></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="MAIN2"><div class="m11"><div class="about">

<font class="h5">
<big>F</big>irstname
<big>L</big>astname
</font>

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

<font class="strong">

<b>▪</b> Some detail here
<BR><b>▪</b> Some detail here
<BR><b>▪</b> Some detail here
<BR><b>▪</b> Some detail here
<BR><b>▪</b> Some detail here
<BR><b>▪</b> Some detail here
<BR><b>▪</b> Some detail here
</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.

</div></div><div class="m22">

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

<div class="mask"><div class="about">

<font class="h4">Main Name 1</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.

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

<div class="conn2" style="background-image:url(http://i61.tinypic.com/314copt.jpg);">

<div class="mask"><div class="about">

<font class="h4">Main Name 2</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.

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

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

<div class="mask"><div class="about">

<font class="h4">Main Name 3</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.

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

<div class="conn4" style="background-image:url(http://i60.tinypic.com/2lia8le.jpg);">

<div class="mask"><div class="about">

<font class="h4">Main Name 4</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.

</div></div></div></div><div class="m33">

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

</div></div>

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

</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="line1"></div><div id="line2"></div><div id="linx">

<a title="Home" href="/logincomplete.php"></a>

<a title="Add" href="/invite_friend.php?friend_id=xxxxxx"></a>

<a title="Message" href="/send_message.php?member_id=xxxxxx"></a>

<a title="Comment" href="/add_testimonial.php?member_id=xxxxxx"></a>

<a title="Photos" href="/gallery.php?member_id=xxxxxx"></a>

<a title="Blogs" href="/view_member_blog.php?member_id=xxxxxx"></a>

<a title="Extra" href="/#"></a>

</div>