CSS/DIV LAYOUT 124

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

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

DO NOT LET ALL OF THESE INSTRUCTIONS FOOL YOU.  This is a really simple layout.  I just want everyone to understand how to take away things or make changes to titles, etc if need be.  You will note some of these same instructions will appear in the LIKE TO MEET Section.  I have put them in there for easy reference.




A storyboard is a visual representation of your character's tale.  You may include less pics of you and add to them pictures of the place your character is from, things he/she enjoys doing or images of those connections that are central to your character, etc.  It's really up to you what you put in here.


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

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

For the lines of text that make-up the visible text on the layout itself on non-hover mode (ie "I wish I could have you here", etc), I have put in text codes and letter-spacing so that the area is almost completely filled.  If, however, you change these and the line of text ends up being longer or shorter, you may need to go up into About Me and locate the text div for that area.  Example, if you change victext3's wording from "Bleed me dry" to something longer, go into About Me and find the .victext3 div.  Change the letter spacing from -2pt to -4pt, etc to smash the text together.  OR you can change the font-family from arial narrow to something that is more compact OR you can change the font-size from 50px to 45px, etc.  Just mess with it until your wording fits properly.

.......................................
Extra:
I have left out stats on this layout as I want you to design the content yourself; however if you have need of some general statistical markers, you can add this inside of one of the divs:


<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




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




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

/* - -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; 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:35px;
height:35px;
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:20px;
height:20px;
letter-spacing:1pt;

}


.h1, .h2, .h3, .h4, .h5 {
text-transform:uppercase;
line-height:100%;
text-align:center;
display:block;
font-size: 11pt ;
}

.h1   {

font-family: copperplate gothic light;
font-size: 25pt ;
}


.h2  {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 15pt ;
}


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


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

.h5  {
font-family: 'Six Caps', sans-serif;
font-size: 12pt ;
margin:10px 0px;
letter-spacing:2pt;
}


.vicarious { Div IDS/Class Styles }


.buffer, .victext1, .victext2, .victext3, .victext4, .victext5, .victext6, .victext7, .v710w300h, .v150w355h, .v350w380h, .v300w200h, .v225w255h, .v330w225h, .v100w225h, .v245w75h, .v530w230h, .v230w150h, .v450w150h {
left:50%;
top:0%;
position:absolute;
overflow:hidden;
z-index:1;
 }


.v710w300ha, .v150w355ha, .v350w380ha, .v300w200ha, .v225w255ha, .v330w225ha, .v100w225ha, .v245w75ha, .v530w230ha, .v230w150ha, .v450w150ha {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.9s linear ;
-moz-transition: all 0.9s linear ;
-ms-transition: all 0.9s linear ;
-o-transition: all 0.9s linear
transition: all 0.9s linear ;
overflow:hidden;
text-align:left;
}



.v710w300ha:hover, .v150w355ha:hover, .v350w380ha:hover, .v300w200ha:hover, .v225w255ha:hover, .v330w225ha:hover, .v100w225ha:hover,  .v245w75ha:hover, .v530w230ha:hover, .v230w150ha:hover, .v450w150ha:hover {
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=96)";
filter: alpha(opacity=96);
opacity: .96;
overflow:auto;
}


.vicarious { Div IDS/Class Styles }
.v710w300h {margin-top:75px; margin-left:-600px;}
.v710w300h, .v710w300ha {width:710px; height:300px;  }
.v150w355h {margin-top:20px;margin-left:115px;}
.v150w355h, .v150w355ha {width:150px;  height: 355px;}
.v350w380h {margin-top:50px; margin-left:270px;}
.v350w380h, .v350w380ha {width:350px; height: 380px; }
.v300w200h {margin-top:435px;margin-left:-600px;}
.v300w200h, .v300w200ha {width:300px;height:200px;}
.v225w255h {margin-left:-295px;margin-top:380px;}
.v225w255h, .v225w255ha {width:225px;height:255px;}
.v330w225h {margin-left:-65px;margin-top:435px;}
.v330w225h, .v330w225ha {width:330px;height:225px;}
.v100w225h {margin-left:270px;margin-top:435px;}
.v100w225h, .v100w225ha {width:100px;height:225px;}
.v245w75h {margin-left:375px;margin-top:465px;}
.v245w75h, .v245w75ha {width:245px;height:75px;}
.v530w230h {margin-left:-600px;margin-top:640px;}
.v530w230h, .v530w230ha {width:530px;height:230px;}
.v230w150h {margin-left:-65px;margin-top:665px;}
.v230w150h, .v230w150ha {width:230px;height:150px;}
.v450w150h {margin-left:170px;margin-top:665px;}
.v450w150h, .v450w150ha {width:450px;height:150px;}


.victext1, .victext2, .victext3, .victext4, .victext5, .victext6, .victext7 {
line-height:100%;
text-align:center;
display:block;
text-transform:uppercase;
overflow:hidden;
}



.victext1 {
width:710px;
height:50px;
margin-left:-600px;
margin-top:20px;
font-size: 50px ;
letter-spacing:1pt;
font-family: arial narrow;
}

.victext2{
width:350px;
height:25px;
margin-left:270px;
margin-top:20px;
font-size: 25px ;
letter-spacing:0pt;
font-family: georgia;
}

.victext3 {
width:300px;
height:50px;
margin-left:-600px;
margin-top:380px;
font-size: 50px ;
letter-spacing:-2pt;
font-family: arial narrow;
}

.victext4 {
width:330px;
height:50px;
margin-left:-65px;
margin-top:380px;
font-size: 50px ;
letter-spacing:9pt;
font-family: 'Six Caps', sans-serif;
}

.victext5 {
width:245px;
height:25px;
margin-left:375px;
margin-top:435px;
font-size: 25px ;
letter-spacing:6pt;
font-family: 'Six Caps', sans-serif;
}


.victext6 {
width:245px;
height:115px;
margin-left:375px;
margin-top:545px;
font-size:115px ;
letter-spacing:-6pt;
font-family:arial narrow;
}

.victext7 {
width:685px;
height:50px;
margin-left:-65px;
margin-top:820px;
font-size: 50px ;
letter-spacing:0pt;
font-family: 'Yanone Kaffeesatz', sans-serif;

}

.buffer {
background-color:transparent;
width:1220px;
height:25px;
margin-left:-650px;
margin-top:880px;
}



.vicarious{ Color Palette}
 body{ background-color:121212; }
 .victext1, .victext2, .victext3, .victext4, .victext5, .victext6, .victext7, .v710w300h, .v150w355h, .v350w380h, .v300w200h, .v225w255h, .v330w225h, .v100w225h, .v245w75h, .v530w230h, .v230w150h, .v450w150h {background-color:000000; }
.v710w300ha:hover, .v150w355ha:hover, .v350w380ha:hover, .v300w200ha:hover, .v225w255ha:hover, .v330w225ha:hover, .v100w225ha:hover,  .v245w75ha:hover, .v530w230ha:hover, .v230w150ha:hover, .v450w150ha:hover {
background-color:121212;}
::-webkit-scrollbar-track {background-color:000000 ; border-color:121212;}
::-webkit-scrollbar-thumb {background-color:383a3d;   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:424242; }
I { color:cfd4da; }
EM { color:b0bdcd; }
B { color:6b798a; }
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited { color:9fa6a9; background-color: 151c2c; }
a.first:hover, a.second:hover { color:bac6cb; background-color: 223442; }
.victext1, .victext4, .victext7 { color:6e757d;  }
.victext2, .victext3, .victext5, .victext6 { color:444c57;  }
.h1{ color:7a8087; background-color:122533 ; }
.h2{ color:000000; background-color: 9aabb3; }
.h3{ color:555555; background-color: 0f2733; }
.h4{ color:9fa6a9; background-color: 151c2c; }
.h5{ color:bac6cb; background-color: 223442; }


/* - - 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="victext1">I wish I could have you here</div>
<div class="victext2">Character Name Here</div>
<div class="victext3">Bleed me dry</div>
<div class="victext4">In my clutches</div>
<div class="victext5">Kisses & Kerosene</div>
<div class="victext6">MINE</div>
<div class="victext7">...in a perfect world I would get my wish</div>


<div class="v710w300h" style="background-image:url(http://i.imgur.com/q20TRFK.jpg);">
<div class="v710w300ha">
<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><b>Bold</b> <i>Italic</i> <em>Em</em> Regular text

<p>A storyboard is a visual representation of your character's tale.  You may include less pics of you and add to them pictures of the place your character is from, things he/she enjoys doing or images of those connections that are central to your character, etc.  It's really up to you what you put in here.

<p>ALL COLORS IN THIS LAYOUT CAN BE CHANGED.  Locate a color selector only that will provide you with color codes or use PS, etc on your computer.  Find the Color Palette in About Me and alter the colors in that section.  Everything is marked.  So if you want to change the color of the links in this, change the background-color and the color for the a.first and a.second text markers under Color Palette.

<p>All photo boxes (with the exception of the small pic under "Kisses & Kerosene" and the two tall/skinny pics (where the links are), have been left relatively blank for you to put in whatever you wish.  If you need to title a section, just use one of the header codes above for your titles.

<p>For the lines of text that make-up the visible text on the layout itself on non-hover mode (ie "I wish I could have you here", etc), I have put in text codes and letter-spacing so that the area is almost completely filled.  If, however, you change these and the line of text ends up being longer or shorter, you may need to go up into About Me and locate the text div for that area.  Example, if you change victext3's wording from "Bleed me dry" to something longer, go into About Me and find the .victext3 div.  Change the letter spacing from -2pt to -4pt, etc to smash the text together.  OR you can change the font-family from arial narrow to something that is more compact OR you can change the font-size from 50px to 45px, etc.  Just mess with it until your wording fits properly.

<p<Read the height and width for each image in the actual coding for each section.  In this case the code says v710w300h which translates to a 710px width and a 300px height.

<p>Put your image code where you see background-image:url(.....)

<p>Every image has a scrollbox underneath it.  If you decide you want less hover boxes (just leaving the pics instead), do the following (Example is for this section but the same rule applies to all):
<BR>1. From the second line of code that starts with the < sign and then div class="v710w300ha" and ends in >  Remove that whole line and then TAKE AWAY one of the closed div tags below (the < followed by the /div and closed with >)

<p>Refer to the original instructions if this is in anyway unclear.

</div></div>



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

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


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

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


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


<div class="v100w225h" style="background-image:url(http://i.imgur.com/3lopMXz.jpg);">
<div class="v100w225ha">

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

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

<center>
<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="#121212" />
    <param name="FlashVars" value="mp3=http%3A//k002.kiwi6.com/hotlink/fp1yetap27/rev_2220.mp3&autoplay=1&bgcolor=121212&loadingcolor=444444&buttoncolor=444444&slidercolor=444444" /></object>
</center>

</div></div>

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

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


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


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