Blog Layout 13b

*Updated with an additional hide code 9-12-2013

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


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

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

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

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





                        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.

-----------------------------Blog Stylesheet---------------------------------




<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Tangerine:400,700|Quattrocento|Just+Another+Hand);
.vicarious {BE RESPECTFUL TO THE LAYOUT CODER/CREATOR.  DO NOT REMOVE THE .VICARIOUS CREDIT!  Blog Layouts available @ http://vicarious-bloglayouts.tumblr.com/}


.vicarious{Cross Type Shared Commons}

.blogcommentsprofile, p.blogtimestamp, .blog     {background-color:transparent!important;}
.blogcomments { border-top:1px solid!important;border: 1px solid!important;  }

.vicarious{Background/Blog Properties}

body{
background-image: url("");
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center;
margin-top:-100px;
margin-left:0px;
}


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


.blog {
width:480px!important;
}

.main {
border:1px solid !important;

width:500px!important;
visibility:visible;
z-index:100;
left:50%;
top:0%;
position:absolute;
margin-left:-140px;
margin-top:0px;

padding-top: 100px!important;
}


img { max-width:450px!important;   }

.vicarious{Text Shared Commons}

a, a:link, a:active, a:visited, a:hover, td, .text, table, td.txt_label , tr, td, li, p, div, input, txt, i, b, .main u, .main font, a.first,

a.first:link, a.first:active, a.first:visited, a.content, a.content:link, a.content:active, a.content:visited, big, p.blogtimestamp,

.blogsubject {
font-family: tahoma  !important;
visibility: visible!important;
text-decoration:none !important;
line-height:90%  !important;
background-color:transparent !important;
font-size: 9pt !important;
}

p { text-align:justify!important;   }

.vicarious{Text Properties}

.blogsubject, big, small {
font-family: 'Quattrocento', serif!important;
font-size: 16pt !important;
line-height:100%!important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align:center!important;
text-transform:uppercase !important;
}

big { font-size: 13pt !important;   display:block; margin-bottom:10px!important;}
small{ font-size: 11pt !important;  display:block; }
p.blogtimestamp { text-align:right !important;    }
i { font-family: Tangerine!important;   }

b {
font-family: 'Just Another Hand', cursive!important;
font-size:9pt!important;
font-weight:bold!important;
 }



a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {
font-family: 'Just Another Hand', cursive!important;
font-size:12pt!important;
text-align:center!important;
text-transform:uppercase!important;
line-height:30px !important;
height:30px !important;
width:77px;
display:block !important;
font-weight:norma!important;
text-decoration:none!important;
-webkit-transition: all 2.4s ease-out;
-moz-transition: all 2.4s ease-out;transition:
all 2.4s ease-out;
margin-bottom:2px !important;
}

a.second, a.second:link, a.second:active, a.second:visited {width:auto; line-height:16px!important;  height:16px!important; font-size:11pt!important;  }

a.third, a.third:link, a.third:active, a.third:visited {
font-family: copperplate gothic light!important;
font-size: 12pt !important;
line-height:100%!important;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align:center!important;
margin:10px 0px;
display:block;
text-transform:uppercase!important;
text-decoration:none!important;
-webkit-transition: all 1.4s ease-out;
-moz-transition: all 1.4s ease-out;transition:
all 1.4s ease-out;
}



.vicarious{Div Style Classes}

#sidebar  {
width:250px;
height:1200px;
margin-left:-400px;
overflow:none;
border:1px solid ;
visibility:visible;
left:50%;
top:0%;
position:fixed;
z-index:2;
margin-top:0px;
text-align:center !important;
 }

#sidebartext, #sidebar:hover #sidebartext,  #context {
-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;
}

#sidebartext,  #context {
text-align:left !important;
overflow:hidden;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}

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


#sidebarimg {
width:250px;
height:350px;
}

#sidebartext {
width:220px;
height:320px;
overflow:auto;
padding:15px;
text-align:left!important;
}





 .vicarious{ Color Palette }

 body { background-color:554159 !important; }
::-webkit-scrollbar-track {background-color:000000  !important; border-color:735f77  !important;}
::-webkit-scrollbar-thumb {background-color:dac4df !important;  border-color:735f77 !important;}
a, a:link, a:active, a:visited, a:hover, td, .text, table, td.txt_label , tr, td, li, p, div, input, txt, i, b, .main u, .main font {color:79617e !important; }
big, .blogsubject, small { color:e0d4e3 !important;}
I { color:b690be !important; }
p.blogtimestamp, B { color:c7b7ca !important; }
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {
color:d8c9db !important; background-color:68576c !important;  }
a.first:hover, a.second:hover  {color:3a2d3d !important; background-color:bb97c3 !important;  }
a.third, a.third:link, a.third:active, a.third:visited { color:e0d4e3 !important;}
a.third:hover {color:ada2b1 !important; }
.main, #sidebar, #sidebartext   { background-color:b0a2b3 !important; border-color: #735f77 !important; }
 td.txt_label  { background-color:b0a2b3 !important; }
.blog,  .blogcomments  { background-color:554159 !important; }
 .blogcomments  {  border-color: #554159  !important; }



 .vicarious{Hide Codes}
.blogContentInfo{ display:none !important;visibility:hidden!important; }
.profile { display:none !important;visibility:hidden!important; }
.nav, .spacer, .googleafc, .commentspacer, hr {display: none!important;}
#ctl00_cpMain_googlead   { display:none !important;visibility:hidden!important; }
images/spacer.gif{ display:none !important;visibility:hidden!important; }
.st_sharethis_hcount, .st_facebook_hcount, .st_twitter_hcount, .st_pinterest_hcount  { display:none !important;visibility:hidden!important; }
#IL_IF_RIGHT, .IL_BASE { display:none !important;visibility:hidden!important; }
.vicarious {Blog Layouts available @ http://vicarious-bloglayouts.tumblr.com/}

</style>




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

<div id="sidebartext">

<big>Content</big>

<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>
<a class="second" href="LINK TO BLOG HERE">Title of Blog</a>

</div></div>


<p><big>➳ IM: Screename ➳</big>


<center><table><tr>
<td><a class="first" href="/logincomplete.php">Home</a></td>
<td><a class="first" href="/send_message.php?member_id=xxxxxx">Message</a></td>
<td><a class="first" href="/add_comment.php?member_id=xxxxxx">Comment</a></td>
</tr><tr>
<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>
<td><a class="first" href="/invite_friend.php?friend_id=xxxxxx">Add</a></td>
</tr></table><center>

<a class="third" href="PUT THE LINK TO YOUR PROFILE HERE">Back to Profile</a>


<BR><BR>

MUSIC PLAYER HERE


</center></div>