CSS/DIV LAYOUT 131c

       					!!!!!!!!!!!!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, tables (table, tr, td) and img 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.

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

To Change pics in the control buttons, locate the four images that look like this coding wise and put in your 150x150 image pic between the ()


<TD><a class="third" href="#stats" style="background-image:url(http://i.imgur.com/jyWMG2p.png);">
<div class="hbox1">Stats</div></a></TD>

((((((FOR ALL PIC SIZES, SEE THE INSTRUCTIONS IN THE ACTUAL LAYOUT CODING.)))))))

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


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

</td></tr></table></td></tr></table></td></tr></table></div><style type="text/css">@import url("https://googledrive.com/host/0B79YHAkeE7SuTVFzeTc0blZXekE");@import url(http://fonts.googleapis.com/css?family=Special+Elite|Rancho|Qwigley|Dorsa|Mystery+Quest|Voltaire|Righteous);
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */

.vicarious { CSS/DIV Layout 131c // 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(http://i.imgur.com/JVMqw13.jpg);
background-repeat:no-repeat;
background-position: bottom left;
background-attachment:fixed;
}
.vicarious{ Google Chrome Scrollbar }
::-webkit-scrollbar {width: 15px;}
::-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: 100% ;
text-decoration:none;
}

I {
font-size:12pt;
font-family: brushscript mt;
}

EM {
font-size:16pt;
font-family: 'Qwigley', cursive;
}

.strike, strike {
text-decoration:line-through;
}

.u, u {
text-decoration:underline;
font-size:10pt;
}

.strong, strong {
font-weight:bolder;
font-size:11pt;
}

B, .B2, B2 {
font-weight:bold;
text-transform:uppercase;
line-height:100%;
letter-spacing: 0pt;
}

B {
font-family:georgia;
font-size:8pt;
}

.B2, B2  {
font-family:copperplate gothic light;
font-size:7pt;
}


a.first, a.first:link, a.first:active, a.first:visited {
font-family: arial narrow;
font-size:9pt;
text-align:center;
text-transform:uppercase;
line-height:35px;
height:35px;
width:100px;
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;
padding:0px;
display:block;
letter-spacing:0pt;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
margin-top:5px;
}


a.first:hover   {
text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
}

a.third, a.third:link, a.third:active, a.third:visited {
margin:20px 0px 0px 20px;
display:block;
}

 .h1, .h2, .h3,  .h4, .h5, .h6, .h7, .h8, .h9, h1, h2, h3, h4, h5, h6, h7, h8, h9, small, big {
font-family: copperplate gothic light;
line-height:100%;
text-align:center;
display:block;
font-size: 11pt ;
padding:0px;
margin:0px;
text-decoration:none;
}

.h1, h1   {
font-size: 12pt ;
margin:5px 0px 0px;
text-align:left;
border-bottom:2px solid;
font-weight:bold;
}

.h2, h2  {
font-family: 'Righteous', cursive;
letter-spacing:1pt;
font-size:20pt;
text-align:center;
line-height:100%;
margin:5px 0px;
text-transform:uppercase;
border-left:20px solid;
border-right:20px solid;
}

.h3, h3 {
text-align:left;
padding:5px 0px 0px 5px;
line-height:120%;
font-size: 12pt ;
font-family: 'Mystery Quest', cursive;
border-bottom:6px solid;
}

.h4, h4 {
padding:5px 0px 0px 5px;
text-align:left;
font-size: 12pt ;
font-family: 'Voltaire', sans-serif;
border-bottom:2px solid;
}

.h5, h5 {
font-weight:bold;
font-size: 46pt ;
letter-spacing:1pt;
text-align:center;
font-family: 'Dorsa', sans-serif;
}

.h6, h6  {
letter-spacing:1pt;
font-size:20pt;
text-align:center;
}

.h7, h7  {
font-family: 'Rancho', cursive;
letter-spacing:-1pt;
font-size:20pt;
text-align:center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

.h8, h8 {
font-family: 'Dorsa', sans-serif;
font-weight:bold;
letter-spacing:2pt;
font-size:18pt;
text-align:center;
line-height:120%;
margin-bottom:5px;
}

small {
font-weight:bold;
font-family: 'Dorsa', sans-serif;
letter-spacing:3pt;
font-size:20pt;
text-align:center;
text-transform:uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

big {
font-family: 'Voltaire', sans-serif;
letter-spacing:0pt;
font-size:28pt;
text-align:center;
text-transform:uppercase;
}

.lyric, .lyric2, .lyric3, .lyric4, .lyric5, .lyric6, .lyric7, lyric, lyric2, lyric3, lyric4, lyric5, lyric6, lyric7  {
font-family: 'Special Elite', cursive;
text-decoration:none;
line-height:60%;
padding:0px;
margin:0px;
}

.lyric, lyric {Font-size:14pt;}
.lyric2, lyric2 {Font-size:12pt;}
.lyric3, lyric3 {Font-size:13pt;}
.lyric4, lyric4 {Font-size:10pt;}
.lyric5, lyric5 {Font-size:12pt;letter-spacing:1.8pt;}
.lyric6, lyric6 {Font-size:13pt;}
.lyric7, lyric7 {Font-size:15pt;letter-spacing:1pt;}

.vicarious { Cross Commons }

.backimg, .conns, .connimg, a.first, a.third {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    2px 2px 5px rgba(0, 0, 0, 0.75);
box-shadow:         2px 2px 5px rgba(0, 0, 0, 0.75);
}

.vicarious { Div IDS/Class Styles }

.vicframe, .backimg, .buffer {
left:50%;
top:0%;
position:absolute;
overflow:hidden;
z-index:1;
}

.vicframe {
height:500px;
width:1000px;
margin-left:-500px;
margin-top:100px;
text-align:left;
}

.backimg {
background-position:top right;
background-repeat:no-repeat;
height:500px;
width:500px;
margin-left:-50px;
margin-top:100px;
}


.viccontrol {
margin-top:50px;
margin-left:20px;
overflow:hidden;
}

.bottom, .top  {
position:fixed;
overflow:hidden;
z-index:10000;
display:block;
}

.bottom {
right:0%;
bottom:0%;
height:40px;
width:50%;
margin-right:0px;
margin-bottom:0px;
-moz-border-radius-topleft: 90px;
-webkit-border-top-left-radius: 90px;
 border-top-left-radius: 90px;
text-align:right;
padding-top:15px;
border:2px solid;
}

.top    {
left:0%;
top:0%;
height:55px;
width:95%;
margin-left:0px;
margin-top:0px;
 -moz-border-radius-bottomright: 90px;
-webkit-border-bottom-right-radius: 90px;
border-bottom-right-radius: 90px;
text-align:left;
border:2px solid;
}

.hbox1 {
width:150px;
height:150px;
line-height:150px;
overflow:hidden;
text-align:left;
font-size:25px;
text-align:center;
text-transform:uppercase;
display:block;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-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;
}

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

.conns {
text-align:justify;
width:210px;
height:150px;
padding:0px 5px;
overflow:auto;
}

.connimg {
width:150px;
height:150px;
overflow:hidden;
}

.innerbox {
width:400px;
height:400px;
overflow:auto;
padding:25px;
margin:25px;
}

.buffer{
background-color:transparent;
height:60px;
width:1000px;
margin-left:-500px;
margin-top:610px;
}

.vicarious{ Color Palette}

body { background-color:161616; }

::-webkit-scrollbar-track {background-color:000000 ; border-color:222222;}
::-webkit-scrollbar-thumb {background-color:303030; border-color:222222 ;}
.innerbox { background-color:191919;}
.conns { background-color:121212;}
.hbox1 { color: a0a0a0; background-color:121212;}
.bottom, .top  {background-color:730001; border-color:000000;}
.vicframeimg a {background-color:730001;}

a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  { color:333333; }
I { color:979797; }
EM { color:9d0001; }
B { color:5e5e5e; }
.B2, B2 { color:6f0001; }
.strong, strong { color:e6e6e6; }
.u, u { color:383b3e; }

a.first, a.first:link, a.first:active, a.first:visited  { color:ffffff; }
a.first:hover  { color:2a0000;  }

.h1, h1  { color:6d0001; border-color:222222;  }
.h2, h2  { color:ffffff; background-color:222222;  border-color:730001;  }
.h3, h3  { color:666666; background-color:222222; border-color:444444; }
.h4, h4  { color:8e8e8e; background-color:161616; border-color:333333;  }
.h5, h5  { color:7a7a7a; background-color:222222;   }
.h6, h6 { color:888888;   }
.h7, h7  { color:dadada; background-color:730001;   }
.h8, h8  { color:555555; background-color:121212;   }

big { color:454545;   }
small { color:c3c3c3; background-color:730001;   }

.lyric, lyric { color:444444;   }
.lyric2, lyric2 { color:720302;   }
.lyric3, lyric3 { color:cecece;   }
.lyric4, lyric4 { color:333333;   }
.lyric5, lyric5 { color:666666;   }
.lyric6, lyric6 { color:730001;   }
.lyric7, lyric7 { color:c4c4c4;   }

/* - - 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="top"><TABLE><TR>

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



</TR></TABLE></div>

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

<div class="vicframe"><div class="viccontrol"><TABLE><TR>

<TD><a class="third" href="#stats" style="background-image:url(http://i.imgur.com/mQE9knu.png);">
<div class="hbox1">Stats</div></a></TD>
<TD><a class="third" href="#about" style="background-image:url(http://i.imgur.com/3AvjEEJ.png);">
<div class="hbox1">About</div></a></TD>
</tr><tr>
<TD><a class="third" href="#mains" style="background-image:url(http://i.imgur.com/ZkOqEHp.png);">
<div class="hbox1">Mains</div></a></TD>
<TD><a class="third" href="#info" style="background-image:url(http://i.imgur.com/oKITUdh.gif);">
<div class="hbox1">Info</div></a></TD>
</TR></TABLE></div>

<div class="vicframeimg"><a id="stats" href="#">

<div class="innerbox">
<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></a><a id="about" href="#"><div class="innerbox">


<p><small>The background images</small>

<p>The TRUE 'background' image of this layout is the AHS logo on the lower lefthand side.  You can replace it, but as to size, just make it something small if you want it to be in the corner as it is here.  No larger than 250px height by 500px width should be good, but every monitor will be different.

<p>The secondary background image is the image of Tate.  Scroll back up in Like to Meet and you will see backimg div class with the background-img:url() style.  The image in this section is 500px width by 500px height.


<p><small>Control Panel images & Connection Images</small>
<p>All of these images are 150px height by 150px width

<font class="h1">Header1</font>
<font class="h2">Header2</font>
<font class="h3">Header3</font>
<font class="h4">Header4</font>
<font class="h5">Header5</font>
<font class="h6">Header6</font>
<font class="h7">Header7</font>
<font class="h8">Header8</font>

<font class="lyric">Line 1 of lyrics</font>
<font class="lyric2">Line 2 of lyrics</font>
<font class="lyric3">Line 3 of lyrics</font>
<font class="lyric4">Line 4 of lyrics</font>
<font class="lyric5">Line 5 of lyrics</font>
<font class="lyric6">Line 6 of lyrics</font>
<font class="lyric7">Line 7 of lyrics</font>

<BR><B>Bold</b> <i> Italic</i> <em>Emphasized text</em>

<BR>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 etc between < these > brackets.  For that reason, I turn them into font classes with a period in front and script them as I have done below.  If you are on a website that allows regular header, underline, strong, etc coding, you can just use regular header coding for all of the header, lyric, special text labels OR just leave them as they are.  They will work for you either way.  SEE THE INSTRUCTIONS FOR THIS LAYOUT FOR SPECIFIC DETAILS AND EXAMPLES.
<BR><BR>
<font class="b2">Bold2</font>
<font class="strong">Strong</font>
<font class="strike">Strike</font>
<font class="u">Underline</font>

<BR><BR>I have also included the below two special text classes that are fine as is and need no modification on any site.

<big>big</big>
<small>Small</small>







</div></a><a id="mains" href="#"><div class="innerbox">


<table><tr><td><div class="conns">
<font class="h4">Connection Name Here</font>
<p>Pics are linked to the user's profile.  Make sure to put in their friend ID number.
<p>Each connection table starts with a Table tag(Table with < and > around it) and ends with a page break (BR with < and > around it).
<p>I have separated these full tables with spaces so you can see where one starts and the next begins.  If you need more connections, just copy the full table and past it below the last connection table in this section.
<P>This first table has the image on the right side.  The second table will have the image on the left side.  When you add a table for another connection, be sure to pick what type of table will come next (left or right image).
</div></td><td>
<a href="/FriendID">
<img class="connimg" src="http://i.imgur.com/0YABRWA.png">
</a></td></tr></table><BR>



<table><tr><td>
<a href="/FriendID">
<img class="connimg" src="http://i.imgur.com/HzGXrvR.png">
</a></td><td><div class="conns">
<font class="h4">Connection Name Here</font>
<p>Text.
</div></td></tr></table><BR>


<table><tr><td><div class="conns">
<font class="h4">Connection Name Here</font>
<p>Text.
</div></td><td>
<a href="/FriendID">
<img class="connimg" src="http://i.imgur.com/qJJMtNf.png">
</a></td></tr></table><BR>


<table><tr><td>
<a href="/FriendID">
<img class="connimg" src="http://i.imgur.com/tIeBizf.png">
</a></td><td><div class="conns">
<font class="h4">Connection Name Here</font>
<p>Text.
</div></td></tr></table><BR>


<table><tr><td><div class="conns">
<font class="h4">Connection Name Here</font>
<p>Text.
</div></td><td>
<a href="/FriendID">
<img class="connimg" src="http://i.imgur.com/e1ZFzoI.png">
</a></td></tr></table><BR>

<table><tr><td>
<a href="/FriendID">
<img class="connimg" src="http://i.imgur.com/HKavyw8.png">
</a></td><td><div class="conns">
<font class="h4">Connection Name Here</font>
<p>Text.
</div></td></tr></table><BR>

<table><tr><td><div class="conns">
<font class="h4">Connection Name Here</font>
<p>Text.
</div></td><td>
<a href="/FriendID">
<img class="connimg" src="http://i.imgur.com/tjM8QJY.png">
</a></td></tr></table><BR>



</div></a><a id="info" href="#"><div class="innerbox">

<p><font class="h1">Verses</font>
<BR>Verse 1, Verse 2, Verse 3, Verse 4


<p><font class="h1">Notations</font>
<br>Multi-para to novella only?
<br>Third person POV format?
<BR>Role play in comments only?
<Br>Put a couple of notations here.


<p><font class="h1">Obligations</font>
<br>Owe _________ a starter
<br>Owe _________ a comment


<p><font class="h1">Contact Info</font>
<br>AIM: ___________
<BR>YAHOO: ____________






</div></a></div></div><div class="bottom">

<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="#730001" />
    <param name="FlashVars" value="mp3=http%3A//k004.kiwi6.com/hotlink/iu2l8vxzp6/type_0_negative_-_wolf_moon_www.mp3fiber.com_.mp3&amp;autoplay=1&amp;bgcolor=730001&amp;loadingcolor=ffffff&amp;slidercolor=ffffff" />
</object>

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