CSS/DIV LAYOUT 121a

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

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

ALL COLORS CAN BE CHANGED.For color changes, see the color palette section in About Me.  There are a ton of color schemes online.  It won't take you long to change the color set-up on this profile.


There are div ids/classes, img classes and tables (<table><tr><td>) in this layout.  Be VERY, VERY, VERY careful not to drop off any of the coding.


............................
MUSIC PLAYER

REPLACE MY MUSIC PLAYER WITH YOUR OWN.  The height must be 200px and the width no greater than 20px.

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

Hover Image Panels
To replace the images in the hover panels, replace my image url with your own wherever you see div id image urls like this:

<div id="CIRCLE" style="background-image:url(http://i.imgur.com/D3vrTwl.png);">

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

ADD BUTTON

The add button for your profile is at the bottom of LIKE TO MEET. Don't forget to put your id number instead of the XXXXXX. If your profile is private you can remove this entire line of code below.


<div id="addsign"><a title="Add" class="third" href="/invite_friend.php?friend_id=xxxxxx">+</a></div>


_______________________________________________




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

     </td></tr></table></td></tr></table></td></tr></table></div>

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Tangerine:400,700|Quattrocento|Just+Another+Hand);

/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */

.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}



.vicarious{Background Properties // BODY COLOR IS IN THE COLOR PALETTE SECTION}
body {
background-image:url();
background-repeat:repeat;
background-position: top center;
background-attachment:fixed;
}

.vicarious{ Google Chrome Scrollbar }
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {border: 1px solid ;}
::-webkit-scrollbar-thumb {border: 1px solid ;}

.vicarious { Font Styles }

a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  {
font-family: tahoma;
font-size: 8pt ;
line-height: 90% ;
text-decoration:none;
}

P { text-align:justify; }
I { font-size:12pt;font-family: Tangerine; text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); }
EM {font-size:13pt; display:block; text-align:center; font-family: times new roman; text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); }

B  {
font-family: arial narrow;
font-size:8pt;
font-weight:bold;
text-transform:uppercase;
line-height:100%;
letter-spacing: 0pt;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {
font-family: arial narrow;
font-size:9pt;
text-align:center;
text-transform:uppercase;
line-height:30px;
height:30px;
width:77px;
display:block;
font-weight:bold;
text-decoration:none;
-webkit-transition: all 2.4s ease-out;
-moz-transition: all 2.4s ease-out;transition:
all 2.4s ease-out;
margin-bottom:2px;
}

a.second, a.second:link, a.second:active, a.second:visited {
width:auto;
line-height:18px;
height:18px;
letter-spacing:1pt;
margin-bottom:4px;
text-align:left;
padding-left:5px;
}

a.third, a.third:link, a.third:active, a.third:visited {
font-family: tahomat;
font-size: 30pt ;
line-height:100%;
text-align:center;
display:block;
text-transform:uppercase;
text-decoration:none;
-webkit-transition: all 1.4s ease-out;
-moz-transition: all 1.4s ease-out;transition:
all 1.4s ease-out;
}

.h1, .h2, .h3, .h4, .h5 {
font-family: copperplate gothic light;
text-transform:uppercase;
line-height:100%;
text-align:center;
display:block;
font-size: 11pt ;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.h1   {
font-family: 'Quattrocento', serif;
font-size: 20pt ;
margin:20px 0px 10px;
letter-spacing:2pt;
}


.h2  {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
}


.h3  {
font-family: 'Quattrocento', serif;
font-size: 10pt ;
margin:5px 0px;
letter-spacing:2pt;
}


.h4  {
font-family: 'Quattrocento', serif;
font-size: 14pt ;
margin:10px 0px;
padding:10px 0px;
letter-spacing:2pt;
}

.h5  {
font-family: georgia;
font-size: 12pt ;
margin:10px 0px;
letter-spacing:2pt;
}


.vicarious { Div IDS/Class Styles }
#addsign {
width:50px;
height:50px;
margin-left:25px;
margin-bottom:25px;
z-index:4;
visibility:visible;
left:0%;
bottom:0%;
position:fixed;
overflow:hidden;
}


#links, #circleback, #top, #line, #music, #connections, #vicmain, #circle, #circleb     {
visibility:visible;
left:0%;
top:0%;
position:fixed;
overflow:hidden;
}

#links  {
width:250px;
height:auto;
margin-left:10px;
margin-top:315px;
z-index:1;
}

#circleback  {
width:350px;
height:350px;
margin-left:190px;
margin-top:115px;
z-index:2;
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
}

#top  {
width:100%;
height:255px;
margin-left:0px;
margin-top:0px;
z-index:3;
}

#line  {
width:100%;
height:50px;
margin-left:0px;
margin-top:255px;
z-index:4;
text-align:left;
}

#music  {
width:150px;
height:20px;
margin-left:0px;
margin-top:270px;
z-index:5;
text-align:left;
}

#circle, #circleb   {
width:300px;
height:300px;
margin-left:200px;
margin-top:125px;
z-index:5;
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
border:15px solid;
}

#circleb {
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 1.6s ease-out;
-moz-transition: all 1.6s ease-out;
-ms-transition: all 1.6s ease-out;
-o-transition: all 1.6s ease-out;
transition: all 1.6s ease-out;
}


#circleb:hover  {
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

.circletext{
border:50px solid ;
overflow:auto;
width:200px;
height:200px;
}


#conimg {
width:162px;
height:162px;
overflow:hidden;
}

#context {
width:154px;
height:154px;
overflow:hidden;
padding:4px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
text-align:left;
overflow:hidden;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}

#context:hover {
overflow:auto;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

#connections, #vicmain {
z-index:6;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
border-bottom-left-radius: 20px;
-webkit-transition: all 1.6s linear;
-moz-transition: all 1.6s linear;
-ms-transition: all 1.6s linear;
-o-transition: all 1.6s linear;
transition: all 1.6s linear;
}

#connections {
width:195px;
height:250px;
margin-left:10px;
margin-top:-230px;
}

#connections:hover {
margin-top:0px;
}
.connect {
width:185px;
height:170px;
overflow:auto;
margin:0px 10px 0px 5px;
 }

#vicmain {
width:500px;
height:auto;
margin-left:550px;
margin-top:0px;
position:absolute
}


.buffer  {
width:500px;
height:25px;
}

.about  {
width:480px;
height:200px;
overflow:auto;
margin:0px 5px 5px;
padding:0px 5px 5px;
}

.about2  {
width:480px;
height:auto;
overflow:none;
margin:0px 5px 5px;
padding:0px 5px 5px;
}

.stats {
width:200px;
height:250px;
overflow:auto;
padding:0px 5px 5px;
text-align:left;
}

.about3 {
width:270px;
height:250px;
overflow:auto;
padding:0px 5px 5px;
text-align:justify;
}


.vicarious{ Color Palette}

 body, #circleback { background-color:1a1a1a; }
::-webkit-scrollbar-track {background-color:000000 ; border-color:121212;}
::-webkit-scrollbar-thumb {background-color:750000;   border-color:121212 ;}
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  { color:3f4245; }
I { color:900000; }
EM { color:c1c1c1; }
B { color:6b6b6b; }
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited { color:939393; background-color:510000; }
a.first:hover, a.second:hover  {color:a10000; background-color:000000;  }
a.third, a.third:link, a.third:active, a.third:visited {color:7c0000;  }
a.third:hover {color:d6d6d6;  }
.h1 { color:d0d0d0;  }
.h3 {color:000000;   background-color:520000;}
.h4 {color:d0d0d0;   background-color:121212;}
.h2, .h5  { color:b2b2b2;  }
#circle, #circleb, #context, .stats, .connect, .about, .about2, .about3 { background-color:121212; }
.circletext  {background-color:121212; border-color:#121212;}
#vicmain, #connections {  background-color:510000;  }
#circle {border-color: #510000; }
#circleb {border-color: #820000; }
#line{  background-color:510000;  }
#addsign {background-color:transparent;}
#top { background-color:030000;}



/* - - CSS!! NO TOUCHY!!! - - */

img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable { display:none; }
.vicholder img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .vicsc a { visibility:hidden; }
 .hidenav {display:none}
 div.profileWidth {margin-top: -30px !important;}
 div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}
 div.profileWidth div.clearfix, hidenav hidenav hidenav,
 div.profileWidth div div {filter:none; opacity:0.9999}
 div.profileWidth div.clearfix {position:relative; top:30px}
table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
table table table embed,  .vicholder div embed {position:static !important; width:auto; height:auto; }
.text, table table table table a,table table table table div,table table table table div a {visibility:visible;}
.vicsc { display:none; }
.text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
table table, table table td {padding:0px; height:0px;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }
.vicholder div, .vicholder div font, .vicholder div a, .vicholder div div, .vicholder font a, .vicholder span, .vicholder div table a, .vicholder div table img, .vicholder div

table font, .vicholder div table, .vicholder div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}
.vicDiv {content:"Layouts available @ http://vicarious-hs.tumblr.com";}
/* - - - - - - - */


 .vicarious{ Hide Codes }
.userProfileURL { display:none; }
.profileInfo { display:none; }
.friendsComments { display:none; }
.friendSpace { display:none; }
.blurbs {display: none;}
.contactTable {display: none;}
.latestBlogEntry {display: none;}
.extendedNetwork {display: none;}
.interestsAndDetails {display: none;}
.userprofiledetail {display: none;}
.userAlbums { display:none; }
.whitetext12{visibility:hidden; display:none;}
.orangetext15{visibility:hidden; display:none;}
.lightbluetext8{visibility:hidden; display:none}
table table table table td {width:0px;}
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
.profile { display:none !important;visibility:hidden!important; }
table tr td[id='footerWarpper']{display:none !important;visibility:hidden!important;}



</style>

<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>



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

</td></tr></table></td></tr></table></td></tr></table></div><DIV class="vicholder">


<div id="links">
<a class="second" href="/logincomplete.php">Home</a>
<a class="second" href="/send_message.php?member_id=XXXXXX">Message</a>
<a class="second" href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
<a class="second" href="/gallery.php?member_id=XXXXXX">Photos</a>
<a class="second" href="/view_member_blog.php?member_id=XXXXXX">Blogs</a>
</div>

<div id="circleback"></div><div id="top"></div><div id="line"></div><div id="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="#510000" />
    <param name="FlashVars" value="mp3=http%3A//k003.kiwi6.com/hotlink/0yub2m0o8m/amel_larrieux_-_sweet_misery_www.mp3fiber.com_.mp3&autoplay=1&bgcolor=510000&loadingcolor=000000&buttoncolor=000000&slidercolor=000000" />
</object>



</div><div id="circle" style="background-image:url(http://i.imgur.com/5phAIuH.png);"></div>

<div id="circleb"><div class="circletext">

<p><font class="h2">Verses</font>
<center><b>
<br>Verse 1 - Verse 2 - Verse 3- Verse 4
<BR>Verse 5 - Verse 6 - Verse 7 - Verse 8
</b></center>

<p><font class="h2">Notations</font>
<BR>Multi-para only.  OOC=Messages.  IC Exchanges=Comments.

<p><font class="h2">Obligations</font>
<br>Owe_________ a starter
<BR>Owe_________ a comment

</div></div>




<div id="connections">

<font class="h4">Connections</font>
<div class="connect">

<a class="second" href="LINK TO PROFILE">Friend Name</a>
<a class="second" href="LINK TO PROFILE">Friend Name</a>
<a class="second" href="LINK TO PROFILE">Friend Name</a>
<a class="second" href="LINK TO PROFILE">Friend Name</a>
<a class="second" href="LINK TO PROFILE">Friend Name</a>
<a class="second" href="LINK TO PROFILE">Friend Name</a>
<a class="second" href="LINK TO PROFILE">Friend Name</a>
<a class="second" href="LINK TO PROFILE">Friend Name</a>
<a class="second" href="LINK TO PROFILE">Friend Name</a>
<a class="second" href="LINK TO PROFILE">Friend Name</a>


</div></div><div id="vicmain">
<font class="h1">Character Name Here</font>
<IMG SRC="http://i.imgur.com/pGW0mw7.png">
<font class="h5">Character Tagline Here</font>


<div class="about">

<p><b>Bold</b> <i>Italic</i>  Lorem ipsum dolor sit amet, consectetur adipisicing 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><em>Put a block quote, lyrics or a few lines of text for emphasis here</em>


<p><b>Bold</b> <i>Italic</i>  Lorem ipsum dolor sit amet, consectetur adipisicing 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><table><TR><td valign="top"><div class="stats">

<p><font class="h3">Legal</font>
<BR><b>NAME:</b> Input info
<BR><b>NICKNAMES:</b> Input info
<BR><b>ALIASES:</b> Input info
<BR><b>DATE OF BIRTH:</b> Input info
<BR><b>PLACE OF BIRTH:</b> Input info
<BR><b>CURRENT RESIDENCE:</b> Input info

<p><font class="h3">Physical</font>
<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

<p><font class="h3">Personality</font>
<BR><b>Traits:</b> Input Info
<BR><b>Disorders:</b> Input Info
<BR><b>Addictions:</b> Input Info
<BR><b>Likes:</b> Input Info
<BR><b>Dislikes:</b> Input Info
<BR><b>Quirks:</b> Input Info

<p><font class="h3">Education</font>
<BR><b>High School</b> Input Info
<br><b>College</b> Input Info
<br><b>Major</b> Input Info
<br><b>Degree</b> Input Info

<p><font class="h3">Employment</font>
<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

<p><font class="h3">Family</font>
<BR><b>MOTHER:</b> Input info
<BR><b>FATHER:</b> Input info
<BR><b>SISTER(S):</b> Input info
<BR><b>BROTHER(S):</b> Input info
<BR><b>Other Family:</b> Input info

<p><font class="h3">Relationships</font>
<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><td valign="top"><div class="about3">

<font class="h3">Origins/History</font>

<p><b>Bold</b> <i>Italic</i>  Lorem ipsum dolor sit amet, consectetur adipisicing 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>

<font class="h1">Main Connections</font>

<table><TR><td valign="top">

<div id="conimg" style="background-image:url(http://i.imgur.com/522MVWS.png);">

<div id="context">

<b>Name 1 Here</b>

<p>CONNECTION BOX 1 TEXT

</div></div></td><td valign="top">


<div id="conimg" style="background-image:url(http://i.imgur.com/522MVWS.png);">

<div id="context">

<b>Name 2 Here</b>

<p>CONNECTION BOX 2 TEXT

</div></div></td><td valign="top">


<div id="conimg" style="background-image:url(http://i.imgur.com/522MVWS.png);">

<div id="context">

<b>Name 3 Here</b>

<p>CONNECTION BOX 3 TEXT

</div></div></td> </TR></table>


<font class="h1">Copyright & Disclaimer</font>

<p><CENTER><b>COPYRIGHT 2013. ALL RIGHTS RESERVED.</b></CENTER>

<div class="about2">

<p>This page contains material protected under International and Federal Copyright Laws and Treaties. Any unauthorized reprint or use of this material is prohibited. No part of this page may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage and retrieval system without express written permission from the author.


<p>I am not the person in the photographs.  This profile is for creative purposes only.

</div><div class="buffer"></div></div>

<div id="addsign"><a title="Add" class="third" href="/invite_friend.php?friend_id=xxxxxx">+</a></div>

</div><div class="ficsc"><table><tr><td><table><tr><td><table><tr><td>