CSS/DIV LAYOUT 127

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

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

..............CODE ALTERED 10-6 TO CONFORM WITH ELITE.............

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

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

Hover Image Panels

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

<div class="v150w355h" style="background-image:url(http://i.imgur.com/GYzifCv.jpg);">

To find out the width and height for the picture in that section, look at the code.  In this case the code says v150w355h.  That means the width is 150px and the height is 355px.  Make your picture using those dimensions.


Every image has a scrollbox underneath it.  If you decide you want less hover boxes (just leaving the pics instead), do the following:

Example:

<div class="v350w380h" style="background-image:url(http://i.imgur.com/wd3CzVS.jpg);">
<div class="v350w380ha">
<p>Put whatever you want here.
</div></div>

To leave just the image, remove:
<div class="v350w380ha">
<p>Put whatever you want here.
</div>

So that you are left with only this:
<div class="v350w380h" style="background-image:url(http://i.imgur.com/wd3CzVS.jpg);">
</div>

Again, be very, very careful not to leave or take away </div> tags.  Make sure if you remove a div you remove a closed div tag too.
.......................................

PICS

If you want to do pics in the same style I have done, it's a simple process.
1.  Layer 1:  Make the image black and white. Sharpen the image if necessary.
2.  Layer 2:  Add an adjustable brighten/contrast layer so you can adjust the pic as needed.  Additionally you can go back to Layer 1 and use the image/adjustments/shadow and highlight function to brighten the image.
3.  Layer 3:  Add a color layer with color code 504b44 and set the layer to hard light.

///////////////////////////////////////////////////
_______________________________________________




                        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|Raleway:400,300|Yanone+Kaffeesatz:400,700);

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

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

/* - -DO NOT REARRANGE MY CODING.  ORDER IS IMPORTANT. - - */

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

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:12px;
height:12px;
display:block;
font-weight:bold;
text-decoration:none;
-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-ms-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
margin:1px 0px;
}

a.second, a.second:link, a.second:active, a.second:visited {
font-size:8pt;
letter-spacing:1pt;
line-height:10px;
height:10px;
}


.h1, .h2, .h3, .h4, .h5 {
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: copperplate gothic light;font-size: 25pt ;  text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);}
.h2  {font-family: 'Yanone Kaffeesatz', sans-serif;font-size: 15pt ;}
.h3  {font-family: 'Raleway', sans-serif; font-size: 10pt ;margin:5px 0px;letter-spacing:2pt;}
.h4  {font-family: 'Raleway', sans-serif; font-size: 10pt ; letter-spacing:0pt;}
.h5  {font-family: copperplate gothic light;font-size: 7.5pt ; letter-spacing:0pt; text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);}

.lyric, .lyric2, .lyric3, .lyric4  {
font-family:georgia;
display:block;
text-align:center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.lyric {
text-align:left;
font-size:18.75pt;
line-height:55%;
margin-top:10px;
padding-left:4px;
font-weight:light;
letter-spacing:3pt;}

.lyric2 {
font-family:courier new;
font-size:11pt;
line-height:30px;
height:30px;
letter-spacing:0pt;}

.lyric3 {
font-family:courier new;
text-align:right;
padding-right:4px;
font-size:14pt;
line-height:125%; }

.lyric4 {
font-size: 25px ;
letter-spacing:0pt;
line-height:100%;
text-transform:uppercase;   }


.vicarious { Div IDS/Class Styles }

.vname, .vtext1, .vtext2, .vtext3, .vtitle1, .vtitle2, .vtitle3, .links, .music, .v350w500h, .connlinks,  .v500w250h,  .v300w125h, .v195w415h, .v710w250h, .connA200w100h, .connB200w100h, .connC200w100h, .connD200w100h, .bottom, .bottom2    {
left:50%;
top:0%;
position:absolute;
overflow:hidden;
z-index:1;
overflow:hidden;
text-align:left;
-webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    2px 2px 1px rgba(0, 0, 0, 0.75);
box-shadow:         2px 2px 1px rgba(0, 0, 0, 0.75);
}


.vname {
width:490px;
height:50px;
padding-right:10px;
margin-left:-780px;
margin-top:275px;
text-align:right;
line-height:75px;
text-transform:uppercase;
font-size:30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: lr-tb;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.vtext1 {
width:705px;
height:25px;
margin-left:-145px;
margin-top:50px;
}

.vtext2 { width:500px;height:50px;margin-left:-145px;margin-top:335px;}
.vtext3 { width:300px;height:30px;margin-left:-145px;margin-top:520px;}

.vtitle1, .vtitle2, .vtitle3 { width:200px;height:15px; text-align:center;text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);}
.vtitle1 { margin-left:360px;margin-top:80px;}
.vtitle2 { margin-left:360px;margin-top:186px;}
.vtitle3 { margin-left:360px;margin-top:228px;}


.music, .links, .connlinks {text-align:center;}

.music { width:200px;height:20px;margin-left:360px;margin-top:203px;overflow:hidden; }
.links { width:200px;height:84px;margin-left:360px;margin-top:97px;overflow:auto;}
.connlinks { width:200px;height:140px;margin-left:360px;margin-top:245px;overflow:auto;}
.bottom { width:1115px;height:25px;margin-left:-555px;margin-top:810px;}
.bottom2 {  width:1115px;height:50px;margin-left:-555px;margin-top:840px;}


.connA200w100h, .connB200w100h, .connC200w100h, .connD200w100h, .connA200w100hPANEL, .connB200w100hPANEL, .connC200w100hPANEL, .connD200w100hPANEL     { width:200px;height:100px;}
.connA200w100h { margin-left:360px;margin-top:390px;}
.connb200w100h { margin-left:360px;margin-top:495px;}
.connC200w100h { margin-left:360px;margin-top:600px;}
.connD200w100h { margin-left:360px;margin-top:705px;}

.v350w500h { margin-left:-500px;margin-top:50px;}
.v500w250h { margin-left:-145px;margin-top:80px; }
.v500w50h { margin-left:-145px;margin-top:335px;}
.v300w125h { margin-left:-145px;margin-top:390px;}
.v195w415h { margin-left:160px;margin-top:390px;}
.v710w250h { margin-left:-555px;margin-top:555px;}

.v350w500h, .v350w500hPANEL  { width:350px;height:500px;}
.v500w250h, .v500w250hPANEL { width:500px;height:250px; }
.v500w50h, .v500w50hPANEL { width:500px;height:50px;}
.v300w125h, .v300w125hPANEL { width:300px;height:125px;}
.v195w415h, .v195w415hPANEL { width:195px;height:415px;}
.v710w250h, .v710w250hPANEL {  width:710px;height:250px;}


.v350w500hPANEL,  .v500w250hPANEL, .v500w50hPANEL, .v300w125hPANEL, .v195w415hPANEL, .v710w250hPANEL, .connA200w100hPANEL, .connB200w100hPANEL, .connC200w100hPANEL, .connD200w100hPANEL   {
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
overflow:hidden;
-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-ms-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
}

.v350w500hPANEL:hover,  .v500w250hPANEL:hover, .v500w50hPANEL:hover, .v300w125hPANEL:hover, .v195w415hPANEL:hover, .v710w250hPANEL:hover, .connA200w100hPANEL:hover, .connB200w100hPANEL:hover, .connC200w100hPANEL:hover, .connD200w100hPANEL:hover   {
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
overflow:auto;
}




.vicarious{ Color Palette}
 body{ background-color:1c1a18; }
.v350w500hPANEL:hover,  .v500w250hPANEL:hover, .v500w50hPANEL:hover, .v300w125hPANEL:hover, .v195w415hPANEL:hover, .v710w250hPANEL:hover, .connA200w100hPANEL:hover, .connB200w100hPANEL:hover, .connC200w100hPANEL:hover, .connD200w100hPANEL:hover  { background-color:2c2f31;  }
::-webkit-scrollbar-track {background-color:191c1e ; border-color:191c1e;}
::-webkit-scrollbar-thumb {background-color:222828;;   border-color:191c1e ;}
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  { color:504b44; }
I { color:6e685f; }
EM { color:515455; }
B { color:676056; }
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited { color:12100d; background-color: 504b44; }
a.first:hover, a.second:hover { color:43403b; background-color: 191c1e; }
.h1, .h5   { color:12100d; background-color: 504b44; }
.h2{ color:504b44; background-color: 292522; }
.h3{ color:43403b; background-color: 191c1e; }
.h4{ color:504b44; background-color: 2b2f30; }
 .vname, .lyric, .lyric2, .lyric3, .lyric4 { color:504b44}



/*Div background color.  This is a gradient background that covers all of the divs.  If you just want a regular color, remove all the inner coding (the code between  { and the ending } and replace it with a normal background-color:2c2f31; line of code.  Use whatever color code number you want */

.vname, .vtext1, .vtext2, .vtext3, .vtitle1, .vtitle2, .vtitle3, .links, .music, .v350w500h, .connlinks,  .v500w250h,  .v300w125h, .v195w415h, .v710w250h, .connA200w100h, .connB200w100h, .connC200w100h, .connD200w100h, .bottom, .bottom2    {
background: -moz-radial-gradient(center, ellipse cover,  rgba(56,64,66,0.51) 0%, rgba(43,48,51,0.87) 74%, rgba(43,48,51,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(56,64,66,0.51)), color-stop(74%,rgba(43,48,51,0.87)), color-stop(100%,rgba(43,48,51,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(56,64,66,0.51) 0%,rgba(43,48,51,0.87) 74%,rgba(43,48,51,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(56,64,66,0.51) 0%,rgba(43,48,51,0.87) 74%,rgba(43,48,51,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(56,64,66,0.51) 0%,rgba(43,48,51,0.87) 74%,rgba(43,48,51,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(56,64,66,0.51) 0%,rgba(43,48,51,0.87) 74%,rgba(43,48,51,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82384042', endColorstr='#2b3033',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    2px 2px 1px rgba(0, 0, 0, 0.75);
box-shadow:         2px 2px 1px rgba(0, 0, 0, 0.75);
}



/* - - 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 class="vname">
Character name here
</div>

<div class="v350w500h" style="background-image:url(http://i.imgur.com/EwGcvyL.jpg);">
<div class="v350w500hPANEL">

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


<div class="vtext1">
<font class="lyric4">These days of rage have left their stain on me</font>
</div>

<div class="vtitle1">
Navigation
</div>


<div class="links">
<a class="first" href="/logincomplete.php">Home</a>
<a class="first" href="/invite_friend.php?friend_id=xxxxxx">Add</a>
<a class="first" href="/send_message.php?member_id=xxxxxx">Message</a>
<a class="first" href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
<a class="first" href="/gallery.php?member_id=xxxxxx">Photos</a>
<a class="first" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
</div>


<div class="vtitle2">
Tunes
</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="#504b44" />
    <param name="FlashVars" value="mp3=http%3A//k002.kiwi6.com/hotlink/w6rk7og5ez/kansas-carry_on_my_wayward_son_www.mp3fiber.com_.mp3&autoplay=1&bgcolor=504b44&loadingcolor=12100d&buttoncolor=12100d&slidercolor=12100d" />
</object>

</div>

<div class="v500w250h" style="background-image:url(http://i.imgur.com/NW2ywbc.png);">
<div class="v500w250hPANEL">

<font class="h1">Header 1</font>
<font class="h2">Header 2</font>
<font class="h3">Header 3</font>
<font class="h4">Header 4</font>
<font class="h5">Header 5</font>

<p><em>Emphasized text</em> <b>Bold text</b> <i>Italic text</i> Regular text

</div></div>


<div class="vtext2">
<font class="lyric">I've pummeled this world to dust</font>
<font class="lyric3">I've broken these men of blood</font>
</div>


<div class="v300w125h" style="background-image:url(http://i.imgur.com/TZMM92j.jpg);">
<div class="v300w125hPANEL">

<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


</div></div>

<div class="vtext3">
<font class="lyric2">Now I wake naked, in the debris</font>
</div>

<div class="v195w415h" style="background-image:url(http://i.imgur.com/mPDCdK8.png);">
<div class="v195w415hPANEL">

You can put whatever you want here.  You can also put additional mains and include smaller pictures in this section.

</div></div>

<div class="v710w250h" style="background-image:url(http://i.imgur.com/lQl1n7e.png);">
<div class="v710w250hPANEL">


<font class="h1">Header 1</font>
<font class="h2">Header 2</font>
<font class="h3">Header 3</font>
<font class="h4">Header 4</font>
<font class="h5">Header 5</font>

<p><em>Emphasized text</em> <b>Bold text</b> <i>Italic text</i> Regular text

</div></div>



<div class="vtitle3">
Connections
</div>

<div class="connlinks">
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
<a class="second" href="LINK HERE">Name</a>
</div>


<div class="connA200w100h" style="background-image:url(http://i.imgur.com/wYkaASb.png);">
<div class="connA200w100hPANEL">
<font class="h4">Main 1 Name</font>
<font class="h5">Relationship/Connection Type</font>
<p>Info goes here.
</div></div>

<div class="connB200w100h" style="background-image:url(http://i.imgur.com/l5jUKuK.png);">
<div class="connB200w100hPANEL">
<font class="h4">Main 2 Name</font>
<font class="h5">Relationship/Connection Type</font>
<p>Info goes here.
</div></div>

<div class="connC200w100h" style="background-image:url(http://i.imgur.com/Kvx8jnd.jpg);">
<div class="connC200w100hPANEL">
<font class="h4">Main 3 Name</font>
<font class="h5">Relationship/Connection Type</font>
<p>Info goes here.
</div></div>

<div class="connD200w100h" style="background-image:url(http://i.imgur.com/JNxd9wC.png);">
<div class="connD200w100hPANEL">
<font class="h4">Main 4 Name</font>
<font class="h5">Relationship/Connection Type</font>
<p>Info goes here.
</div></div>

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