Blog Layout 3b

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

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

There are div ids/classes in this layout.  Be VERY, VERY, VERY careful not to drop off any of the coding.

The 575px width banner is in the Blog Header section.
Profile links, Content links (the 12 long lines behind the left side photo) and Extra links (the round pic areas) are near the bottom of the Blog Stylesheet section.

///Left Side Pic///
Put your 200px width x 300px height image url in the spot between the ( and ) near the bottom of the Blog Stylesheet section.  It looks like this:

<div id="vicbox1" style="background-image:url(http://i.imgbox.com/abm0s7N7.png);"></div>

//////////////


///Right Trio of Pics///
Put your 150px width by 150px height image urls in the spots between the ( and ) near the bottom of the Blog Stylesheet secton.  They will look like this:


<div id="vicpic3" style="background-image:url(http://i.imgbox.com/adu6WYL6.png);"></div>

///////////////


                                        !!!!!!!!!!!!TIP!!!!!!!!!!!!

Since you are making a blog for content, it should be relatively blank as the meat of the blog is going to be accessed via the content links.  When they click on a content link, it will take them to the appropriate blog.

1) Create a 'Content' blog (Titled content with a short description or just a period for the body of the text.
2) Disable Kudos & Comments
3) Put a link to this content blog on your profile.


                        Don't forget to replace the XXXXX with your friend ID number.

                                                     (>‿◠)✌


                *****************************SAVE YOUR WORK AS YOU GO.*******************************

----------------------Blog Header------------------------

<center>
<big>TITLE GOES HERE</big>
<BR>
<img src="http://i.imgbox.com/adkoYjtY.png">
</center>

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


<style type="text/css">

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



 body, .main, #vicleft, #viclinks, #vicbox1, #vicbox1a, #vicpic1, #vicpic1a, #vicpic2, #vicpic2a, #vicpic3, #vicpic3a    {
left:0%;
top:0%;
}

 #vicleft, #viclinks, #vicbox1, #vicbox1a, #vicpic1, #vicpic1a, #vicpic2, #vicpic2a, #vicpic3, #vicpic3a       {
position: fixed;
z-index: 9;
}

.main, #vicpic1, #vicpic2, #vicpic1a, #vicpic2a, #vicpic3a, #vicpic3, #vicleft, a.content, a.content:link, a.content:active, a.content:visited {
background: rgb(119, 0,180);
background: -moz-linear-gradient(30deg, rgb(119, 0, 180) 0%, rgb(0, 0, 0) 100%);
background: -webkit-linear-gradient(30deg, rgb(119, 0, 180) 0%, rgb(0, 0, 0) 100%);
background: -o-linear-gradient(30deg, rgb(119, 0, 180) 0%, rgb(0, 0, 0) 100%);
background: -ms-linear-gradient(30deg, rgb(119, 0, 180) 0%, rgb(0, 0, 0) 100%);
background: linear-gradient(120deg, rgb(119, 0, 180) 0%, rgb(0, 0, 0) 100%);
}

#vicbox1a, #vicpic1a, #vicpic2a, #vicpic3a, a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited, a.content, a.content:link, a.content:active, a.content:visited,

.v1, .v2, .v3, .v4, .v5, .v6, .v7, .v8, .v9, .v10, .v11, .v12 {
-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;
}

#vicpic1, #vicpic2, #vicpic3, #vicpic1a, #vicpic2a, #vicpic3a, a.second, a.second:link, a.second:active, a.second:visited   {
-webkit-border-radius: 180px;
-moz-border-radius: 180px;
border-radius: 180px;
}

#vicleft, #viclinks, a.first, a.first:link, a.first:active, a.first:visited  {
-moz-border-radius-bottomright: 90px;
-webkit-border-bottom-right-radius: 90px;
border-bottom-right-radius: 90px;
-moz-border-radius-bottomleft: 90px;
-webkit-border-bottom-left-radius: 90px;
border-bottom-left-radius: 90px;
}

.blogcomments, .blogcommentsprofile, p.blogtimestamp, .blog     {
background-color:transparent!important;
}


.vicarious{Background/Blog Properties}

body{
background-color: #000000 !important;
background-image:url("")!important;
background-repeat: repeat!important;
background-attachment:fixed;
background-position:bottom right;
visibility:visible;
z-index:1;
margin-left:200px;
margin-top:-100px;
position:absolute;
}

.blog {
width:500px!important;
}

.main {
width:500px!important;
visibility:visible;
z-index:1;
margin-left:100px;
margin-top:125px;
position:absolute;
padding:0px 0px 50px !important;
-webkit-border-radius: 90px;
-moz-border-radius: 90px;
border-radius: 90px;
}


.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, a.second, a.second:link, a.second:active, a.second:visited, big, p.blogtimestamp, .blogsubject   {
font-family: tahoma  !important;
visibility: visible!important;
color: #a8a8a8 !important;
text-decoration:none !important;
font-size:6pt  !important;
line-height:90%  !important;
text-align:left  !important;
background-color:transparent !important;
}

big, a.first, a.first:link, a.first:active, a.first:visited, a.content, a.content:link, a.content:active, a.content:visited, a.second, a.second:link, a.second:active, a.second:visited, .blogsubject {
display:block!important;
}

.blogsubject, #viclinks, #vicbox1a, #vicbox1     {
background-color: #000000 !important;
}

big, a.first, a.first:link, a.first:active, a.first:visited, a.content, a.content:link, a.content:active, a.content:visited  {
color: #000000 !important;
}

big, a.first, a.first:link, a.first:active, a.first:visited, a.content, a.content:link, a.content:active, a.content:visited, a.second, a.second:link, a.second:active, a.second:visited, p.blogtimestamp  {
text-transform:uppercase !important;
font-weight:bold !important;
}

big, a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {
text-align:center !important;
}

.vicarious{Text Properties}

.blogsubject {
width:100%!important;
font-family: copperplate gothic light !important;
font-size: 21pt !important;
color:9e80ad !important;
letter-spacing:-1pt !important;
line-height:100% !important;
padding:5px !important;
text-align: right !important;
text-transform:lowercase !important;
-moz-border-radius-topleft: 90px;
-webkit-border-top-left-radius: 90px;
 border-top-left-radius: 90px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 90px;
-webkit-border-bottom-left-radius: 90px;
border-bottom-left-radius: 90px;
}


p.blogtimestamp {
color: #8d8d8d !important;
letter-spacing:1pt !important;
text-align:right !important;
}

i {
color: #555555 !important;
font-style:italic !important;
}

b {
color:  #cccccc !important;
font-weight:bold  !important;
}

big {
font-family:copperplate gothic light !important;
font-size:26pt!important;
line-height:100% !important;
padding:15px 20px !important;
color:9e80ad !important;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}

.vicarious{Profile Link Codes}
a.first, a.first:link, a.first:active, a.first:visited {
background-color: #7700b4 !important;
color:9e80ad !important;
height:10px!important;
line-height:10px!important;
width:100px!important;
margin:0px 0px 5px 35px  !important;
padding: 0px 15px 5px !important;
}

a.first:hover{
color:000000 !important;
}

.vicarious{Content Link Codes}
a.content, a.content:link, a.content:active, a.content:visited {
font-family:arial narrow  !important;
font-size: 10pt !important;
width:300px;
height: auto;
padding-left:5px;
margin-bottom:2px;
}

a.content:hover{
color:9e80ad !important;
}

.vicarious{Extra Links}
a.second, a.second:link, a.second:active, a.second:visited {
color: #cccccc  !important;
height:130px!important;
line-height:130px!important;
width:130px!important;
margin:10px !important;
 }

a.second:hover{
-webkit-transform:   rotate(720deg);
-moz-transform:   rotate(720deg);
-o-transform:   rotate(720deg);
-ms-transform:   rotate(720deg);
transform:    rotate(720deg);
}

.vicarious{Div Style Classes}
.v1, .v2, .v3, .v4, .v5, .v6, .v7, .v8, .v9, .v10, .v11, .v12 {
position: relative;
}


.v1   {margin-left:100px;}
.v1:hover  {margin-left:50px;}

.v2   {margin-left:75px;}
.v2:hover  {margin-left:-40px;}

.v3   {margin-left:-25px;}
.v3:hover  {margin-left:0px;}

.v4   {margin-left:-45px;}
.v4:hover  {margin-left:0px;}

.v5   {margin-left:25px;}
.v5:hover  {margin-left:-15px;}

.v6   {margin-left:-40px;}
.v6:hover  {margin-left:10px;}

.v7   {margin-left:-75px;}
.v7:hover  {margin-left:0px;}

.v8   {margin-left:-25px;}
.v8:hover  {margin-left:0px;}

.v9   {margin-left:-45px;}
.v9:hover  {margin-left:15px;}

 .v10  {margin-left:-45px;}
.v10:hover  {margin-left:15px;}

.v11  {margin-left:45px;}
.v11:hover   {margin-left:0px;}

.v12  {margin-left:105px;}
.v12:hover {margin-left:-40px;}


.vicarious{Div ID Shared Commons}

#vicbox1a, #vicpic1a, #vicpic2a, #vicpic3a {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}

#vicbox1a:hover, #vicpic1a:hover, #vicpic2a:hover, #vicpic3a:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
overflow:hidden;
}


#viclinks, #vicleft:hover #viclinks {
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
}


.vicarious{Div IDs}

#vicleft {
width:250px;
height: 450px;
overflow: hidden;
margin-left: 25px;
}

#viclinks {
text-align:left;
width: 200px;
height: auto;
overflow: none;
margin-left:50px;
padding-bottom:20px;
}


#vicleft:hover #viclinks {
margin-top: 225px;
border-top: 85px solid;
border-color:#000000 !important;
}

#vicbox1 {
width: 200px;
height:300px;
overflow:auto;
margin-left:50px;
-moz-border-radius-bottomright: 90px;
-webkit-border-bottom-right-radius: 90px;
border-bottom-right-radius: 90px;
-moz-border-radius-bottomleft: 90px;
-webkit-border-bottom-left-radius: 90px;
border-bottom-left-radius: 90px;
}

#vicbox1a {
width: 350px;
height:180px;
overflow:hidden;
margin-left:-50px;
padding:20px 0px 0px 50px;
-moz-border-radius-topleft: 90px;
-webkit-border-top-left-radius: 90px;
 border-top-left-radius: 90px;
-moz-border-radius-bottomleft: 90px;
-webkit-border-bottom-left-radius: 90px;
border-bottom-left-radius: 90px;
-webkit-transform:   rotate(270deg);
-moz-transform:   rotate(270deg);
-o-transform:   rotate(270deg);
-ms-transform:   rotate(270deg);
transform:    rotate(270deg);
}

#vicbox1a:hover {
}

#vicpic1, #vicpic1a, #vicpic2, #vicpic2a, #vicpic3, #vicpic3a {
overflow:hidden;
visibility:visible;
height:150px;
width:150px;
}

#vicpic1, #vicpic1a {
margin-left:950px;
margin-top:50px;
}

#vicpic2, #vicpic2a {
margin-left:1000px;
margin-top:200px;
}

#vicpic3, #vicpic3a {
margin-left:950px;
margin-top:350px;
}


 .vicarious{Hide Codes}
.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; }
.vicarious {Blog Layouts available @ http://vicarious-bloglayouts.tumblr.com/}
</style>

<div id="vicpic1" style="background-image:url(http://i.imgbox.com/adu6WYL6.png);"></div>
<div id="vicpic1a"><a class="second" href="LINK GOES HERE" >Ask</a></div>

<div id="vicpic2" style="background-image:url(http://i.imgbox.com/adu6WYL6.png);"></div>
 <div id="vicpic2a"><a class="second" href="LINK GOES HERE" >Tumblr</a></div>

<div id="vicpic3" style="background-image:url(http://i.imgbox.com/adu6WYL6.png);"></div>
 <div id="vicpic3a"><a class="second" href="LINK GOES HERE" >Formspring</a></div>


<DIV ID="vicleft">


<div id="viclinks">

<a class="first" href="/logincomplete.php">Home</a>
<a class="first"href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
<a class="first"href="/send_message.php?member_id=xxxxxx">Message</a>
<a class="first"href="/gallery.php?member_id=xxxxxx">Photos</a>

</div>



<div id="vicbox1" style="background-image:url(http://i.imgbox.com/abm0s7N7.png);"></div>




<div id="vicbox1a">

<div class="v1"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v2"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v3"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v4"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v5"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v6"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v7"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v8"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v9"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v10"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v11"><a class="content" href="LINK HERE">Content Link Title</a></div>
<div class="v12"><a class="content" href="LINK HERE">Content Link Title</a></div>

</div>




</DIV>