CSS/DIV Layout 114

 							UPDATE:

This layout is not overly tall, but people with really small monitors might not see the bottom links.  If you want, you can change the #touchpad div (near the bottom of About Me) from fixed to absolute.  That will allow a scrollbar to fall in on the side of the browser window for those people that can't see the lower links.  I have not put absolute in my coding because that is not an ideal setting for this layout.  I would ONLY change it IF you get complaints about not being able to see links.  Again, the layout is not overly tall space wise, so it should not be an issue on regular computers.


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

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

There are A WHOLE BUNCH of 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.

//#### COLOR PALETTE ####///

ALL COLORS CAN BE CHANGED.For color changes, see the color palette section in About Me.  I have stripped the color markers off of all the codes and put them in one place so you can find and change them easily.

There are a ton of color schemes online.  Put the work in.  It won't take you long to change the color set-up on this profile.


//#### THE GOLDEN TICKETS ####///
You can replace the tickets that are on the 'curtain' of this layout.  You will find it at the END of Like to Meet.
<div id="curtain" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/tickets-animated_zpsc946d210.gif~original);">

I would replace it with an image that is 350x350 and no more than that.  You CAN use something larger as the dimensions of the curtain are 1100px width x 800px height BUT you will have to bear in mind that the welcome intro messages will go on top of it.  Alternatively, you can remove the below to get rid of the message entirely (located below the curtain above):

<div class="intro1">Welcome to the fun house.</div>
<div class="intro2">Enjoy the show...</div>



//#### THE BOOK SHELF (TOP HOVER DIV) ####///
The 'shelf' div is at the top of Like to meet.  The first image is the 'bookend' picture on the left of the 'books' and the second image in that div is the one on the right.  You will replace your link to your images where you see something like this:
<img class="img4" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/02_zps7b1de0b0.png~original">

DON'T DROP OFF THE CLASS="IMG4"


//#### THE SLIDESHOW (LEFT HOVER DIV) ####///
The slide show has 6 images that flip every 10 seconds.  It will not repeat unless you hover off the left side and hover back on.  You will see the 6 slots that look like the below in standard img src mode.  Just replace my images with your own:

<div class="slide3">
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/3_zps29620bf6.png">
</div>

//#### THE BANNER (MAIN IMAGE) AND IT'S CHILDREN ####///

Simple enough.  Find this in Like to Meet and replace my image with your own of the appropriate size:
<DIV ID="backbanner" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/03__1__zps8ccd4ca2.png~original);">

Below that code you will see the 6 hover mini-panels that lay atop the main banner.  Replace my image with your own in these slots:
<div id="panel" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/4308_zpsa01f7487.jpg~original);">


////////////////////////////////////////end/////////////////////


			  ***Replace my music player with one of your own.******



                        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/0B79YHAkeE7SuOUM2NF9VeDBIRjQ");
@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie|Rancho);
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */

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

/* - -TO CHANGE LAYOUT COLORS, SCROLL DOWN TO COLOR PALETTE - - */
/* - -TO CHANGE LAYOUT COLORS, SCROLL DOWN TO COLOR PALETTE - - */
/* - -TO CHANGE LAYOUT COLORS, SCROLL DOWN TO COLOR PALETTE - - */


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





/* - -TEXT - - */

.vicarious{Text in Tables and Standard Link Codes}
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:8.5pt;
line-height:90%;
text-decoration:none;
text-align:left;
}

p  {text-align:justify; }

I {
font-size: 6.5pt ;
style: italic ;
}

B {
font-family: courier;
font-size: 6.0pt ;
font-weight:bold  ;
}

Em {
font-family: 'Reenie Beanie', cursive;
font-size: 11pt;
text-align: center;
}


.vicarious {Shared Styles for Headers }
big, small, .h1, .h2, .h3, .h4, .h5, .h6, .h7, .h8, .h9,  .h10, .h11, .h12, .one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve, .lyric, .lyric2, .lyric3, .lyric4, .lyric5, .lyric6, .lyric7, .lyric8, a.first, a.second, a.third, .name {
display:block;
text-decoration: none ;
line-height: 90% ;
 }

.h1 {
font-family: rancho ;
font-size:20pt ;
text-align: center;
padding: 3px ;
margin:2px 0px;
text-transform: uppercase ;
letter-spacing:4pt;
}

.h2 {
font-family: georgia ;
font-size:8pt ;
text-align: right;
line-height:100%;
border-bottom: 3px solid;
text-transform: uppercase ;
padding-right:5px;
letter-spacing: 2pt;
font-weight:bold;
}

.h3 {
font-family:  rancho;
font-size: 7pt ;
line-height:120%;
letter-spacing:5pt;
text-align:center;
}

.h4 {
font-family: 'Reenie Beanie', cursive;
font-size: 14pt;
text-align: center;
padding:5px 0px;
}


vicarious{Profile Link Codes}
a.first, a.first:link, a.first:active, a.first:visited {
font-family: tahoma ;
font-size:10pt ;
line-height:50px ;
height:50px ;
width:147px;
text-align:center;
text-transform: uppercase ;
letter-spacing:1pt;
margin-bottom:0px;
}

a.first:hover { font-size:7.5pt ;}


/* - - COLOR PALETTE GOOGLE SCROLLBAR - - */

::-webkit-scrollbar-track {background-color:000000 ; border-color:121212 ;}
::-webkit-scrollbar-thumb {background-color:333333;   border-color:121212 ;}



/* - - COLOR PALETTE TEXT - - */

a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  {
font-family: tahoma;
color:424242;
}

I {
color:555555
}

B {
color:444444;
 }

Em {
color:6b6b6b;
 }

.h1 {
background-color:191919;
color:7A7A7A;
}

.h2 {
background-color:121212;
color:7A7A7A;
border-color: 222222;
}

.h3 {
background-color:191919;
color:555555;
}

.h4 {
background-color:000000;
color:444444;
}

vicarious{ Profile Links Color }

a.first, a.first:link, a.first:active, a.first:visited {
color:6b6b6b;
background-color:222222;
}

a.first: hover
background-color:000000;
}

.vicarious { Welcome Text Color }
.vicholder:hover .intro1, .vicholder:hover  .intro2 {
color:ffffff;
}




/* - - COLOR PALETTE DIVS AND BODY - - */


body {
background-color:000000;
}

.vicarious { Curtain (The color overlay over the main div.  It should be the same color as the body of your page) }
#curtain {
background-color: 000000;
}

.vicarious { Frame around main pic }
#left, #top, #right, #bottom {
background-color:191919;
}

.vicarious { #d sets frames (Bckgrnd color represents the 'border' area surrounding the panel pics) }
#d1, #d2, #d3, #d4, #d5, #d6 {
background-color:191919;
 }


.vicarious { Panels (Bkgrnd color represents the color of the text box behind the panel pics) }
#panel1 {
background-color:121212;
 }

.vicarious { Runners (Lines on the inside of main pic frame) }
#b1,  #b2, #b3, #b4 {
background-color:555555;
}

.vicarious { Overlay Boxes (The overall background color of the expanding areas that are revealed on hover over arrows) }
#left2:hover, #top2:hover, #right2:hover, #bottom2:hover {
background-color:171717;
}


.vicarious { About Boxes, music and notes background-color }
.about, .about2, .about3,  .music, .notes   {
background-color:121212;
}

.vicarious { Top Hover Panel/Inner Boxes }
#panel2 {
background-color:121212;
border-left-color: 333333;
}




/* - - 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;}



/* - -The Great Wall of Divs- - */

 #left, #top, #right, #bottom, #left2, #top2, #right2, #bottom2, #leftarrow, #toparrow, #rightarrow, #bottomarrow  {
position:absolute;
z-index:1;
visibility:visible;
left:50%;
top:0%;
overflow:hidden;
}

 #left, #top, #right, #bottom {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
 }

.vicholder:hover #left, .vicholder:hover #top, .vicholder:hover #right, .vicholder:hover #bottom {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}


#left, #top, #right, #bottom {}


#left {
width:100px;
height:0px;
text-align:left;
margin-top:0px;
margin-left:-550px;
}

.vicholder:hover #left { height:700px; }

#top {
width:0px;
height:100px;
margin-left:450px;
margin-top:0px;
}

.vicholder:hover #top {
width:900px;
margin-left:-450px;
}

#right {
width:100px;
height:0px;
margin-left:450px;
margin-top:700px;
}

.vicholder:hover #right {
margin-top:0px;
height:700px;
}

#bottom {
margin-left:-550px;
margin-top:700px;
width:0px;
height:100px;
}

.vicholder:hover #bottom  { width:1100px; }

#left2, #top2, #right2, #bottom2 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
overflow:hidden;
background-color:transparent;
}

#left2:hover, #top2:hover, #right2:hover, #bottom2:hover {
z-index:10001;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

#left2, #right2 {
width:20px;
margin-top:100px;
height:600px;
}

#left2 { margin-left:-470px; }
#right2 { margin-left:450px; }
#left2:hover, #right2:hover  { width:920px; }
#right2:hover  { margin-left:-450px; }

#top2, #bottom2 {
margin-left:-450px;
height:20px;
width:900px;
}

#top2 { margin-top:80px; }
#top2:hover { height:620px; }
#bottom2 { margin-top:700px; }

#bottom2:hover {
margin-top:600px;
height:200px;
}

#rightarrow, #leftarrow, #toparrow, #bottomarrow {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}

.vicholder:hover #rightarrow, .vicholder:hover #leftarrow, .vicholder:hover #toparrow, .vicholder:hover #bottomarrow {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

#rightarrow, #leftarrow { margin-top:400px; }
#rightarrow { margin-left:450px; }
#leftarrow { margin-left:-470px; }
#toparrow, #bottomarrow { margin-left:0px; }
#toparrow { margin-top:80px; }
#bottomarrow { margin-top:700px; }

.vicarious { position div specs }
#b1,  #b2, #b3, #b4 {
position:absolute;
z-index:1000;
visibility:visible;
left:50%;
top:0%;
overflow:hidden;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: .9;
}

.vicholder:hover #b1,  .vicholder:hover #b2, .vicholder:hover #b3, .vicholder:hover #b4 {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

.vicholder:hover #b1  { }
.vicholder:hover #b2  { }
.vicholder:hover #b3  { }
.vicholder:hover #b4  { }

 #b1{
margin-left:-450px;
margin-top:697px;
width:0px;
height:3px;
}

.vicholder:hover #b1  { width:900px; }

 #b2{
margin-left:447px;
margin-top:699px;
width:3px;
height:0px;
}

.vicholder:hover #b2  {
height:599px;
margin-top:100px;
}

#b3{
margin-left:449px;
margin-top:100px;
width:0px;
height:3px;
}

.vicholder:hover #b3  {
margin-left:-449px;
width:898px;
}

 #b4{
margin-left:-450px;
margin-top:100px;
width:3px;
height:0px;
}

.vicholder:hover #b4  { height:599px; }


 #curtain {
background-position:center center;
background-repeat: no-repeat;
width:1100px;
height:800px;
text-align:center;
z-index:50000;
position:absolute;
visibility:visible;
left:50%;
top:0%;
overflow:hidden;
margin-left:-550px;
margin-top:0px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

.vicholder:hover #curtain {
margin-top:-800px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity:.5;
}

.intro1, .intro2 { background-color:transparent; }
.vicholder:hover .intro1, .vicholder:hover  .intro2 {  }
.vicholder:hover  .intro1 { }
.vicholder:hover  .intro2 { }

.intro1, .intro2 {
overflow:hidden;
text-align:center;
color:transparent;
font-size:0em;
letter-spacing:0pt;
font-family:arial bold;
}

.intro1 {  margin-top:700px; }
.intro2 { margin-top:25px;  }

.vicholder:hover .intro1, .vicholder:hover .intro2 {
font-size:2.5em;
letter-spacing:1px;
}

#touchpad {
background-color: transparent;
background-position: top center;
background-repeat: no-repeat;
width:100%;
height:100%;
overflow:none;
position:fixed;
visibility:visible;
z-index:1;
left:0%;
top:0%;
margin-left:0px;
margin-top:0px;
}

#backbanner {
background-color: transparent;
background-position: top center;
background-repeat: no-repeat;
width:900px;
height:600px;
overflow:none;
position:absolute;
z-index:99;
left:50%;
top:0%;
margin-left:-450px;
margin-top:100px;
visibility:visible;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}

.vicholder:hover #backbanner {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

#d1, #d2, #d3, #d4, #d5, #d6, #panel1   {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}

#d1:hover,  #d2:hover, #d3:hover, #d4:hover, #d5:hover, #d6:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

#d1, #d2, #d3, #d4, #d5, #d6 {
width:300px;
height:300px;
overflow:hidden;
position:absolute;
}

#d1, #d2, #d3  { margin-top:0px; }
#d4, #d5, #d6  { margin-top:300px; }
#d1, #d4 { margin-left:0px; }
#d2, #d5 { margin-left:300px; }
#d3, #d6 { margin-left:600px; }


#panel {
background-position:center center;
background-repeat: no-repeat;
width:250px;
height:250px;
overflow:hidden;
margin:25px;
}

#panel1 {
width:240px;
height:240px;
overflow:auto;
padding:5px;
}

#panel1:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: .95;
}

.slide1, .slide2, .slide3, .slide4, .slide5, .slide6 {
margin-left:20px;
width: 600px;
height:600px;
overflow: hidden;
}

#left2:hover .slide2, #left2:hover .slide3, #left2:hover .slide4, #left2:hover .slide5, #left2:hover .slide6   { margin-top:-600px; }
.slide1 { margin-top:0px; z-index:1;}
#left2:hover .slide2 { z-index:2; }
#left2:hover .slide3 { z-index:3; }
#left2:hover .slide4 { z-index:4; }
#left2:hover .slide5 { z-index:5; }
#left2:hover .slide6 { z-index:6; }


.shelf {
width:802px;
height:504px;
margin:50px;
overflow:hidden;
}

#panel2 {
border-left-width:50px  ;
border-left-style:solid;
width:0px;
height:500px;
overflow:hidden;
}

#panel2:hover { width:270px; }


.about, .about2, .about3  {
overflow:auto;
padding:0px 5px;
margin:10px;
}

 .about  {
width:425px;
height:580px;
}

 .about2 {
width:240px;
height:480px;
}

.about3 {
width:415px;
height:580px;
}

.music, .notes {
overflow:auto;
margin:10px 0px;
padding:0px 5px;
height:115px;
}

.music {
text-align:center;
}

.notes {
text-align:left;
}

.img4 {
margin:0px 9px;
}

/* - - CSS!! NO TOUCHY!!! - - */
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 ID="touchpad"><div id="b1"></div><div id="b2"></div><div id="b3"></div><div id="b4"></div><div id="bottom"></div><div id="left"></div><div id="top"></div><div id="right"></div><div id="toparrow"><big>▼</big></div><div id="leftarrow"><big>►</big></div><div id="rightarrow"><big>◄</big></div><div id="bottomarrow"><big>▲</big></div>


<div id="top2"><div class="shelf"><table><tr><td valign="top">

<img class="img4" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/02_zps7b1de0b0.png~original">



</td><td valign="top"><div id="panel2"><div class="about2">


<font class="h1">Header 1</font>
<font class="h2">Header 2</font>

<p>This is expanding (accordion) area 1.  Input whatever you want here.


<p>Notes from Jane:  DIV ID TOP2 is the top dropdown of the overall div (where the arrow is up top).  The image src code that starts this section off represents the left image that flanks the 5 middle collapsed boxes.  The image src code at the end of this section is the image on the left.


</div></div></td><td valign="top"><div id="panel2"><div class="about2">


<font class="h1">Header 1</font>
<font class="h2">Header 2</font>
<p>This is expanding (accordion) area 2.  Input whatever you want here.


</div></div></td><td valign="top"><div id="panel2"><div class="about2">


<font class="h1">Header 1</font>
<font class="h2">Header 2</font>
<p>This is expanding (accordion) area 3.  Input whatever you want here.



</div></div></td><td valign="top"><div id="panel2"><div class="about2">


<font class="h1">Header 1</font>
<font class="h2">Header 2</font>
<p>This is expanding (accordion) area 4.  Input whatever you want here.



</div></div></td><td valign="top"><div id="panel2"><div class="about2">



<font class="h1">Header 1</font>
<font class="h2">Header 2</font>
<p>This is expanding (accordion) area 4.  Input whatever you want here.



</div></div></td><td valign="top">


<img class="img4" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/e_zps829a6969.png~original">


</td></tr></table></div></div>





<div id="left2"><table><tr><td valign="top"><div class="about3">

<font class="h1">Header 1</font>
<font class="h2">Header 2</font>
<font class="h3">Header 3</font>
<font class="h4">Header 4</font>
<p>This box is to the left of the mock slide show.  Input whatever you want in here.

<p>Notes from Jane:  DIV ID LEFT2 is the left slide div of the overall div (where the arrow is on the left).  The image src codes below are the 6 images that will change every 10 seconds.  They play once and do not repeat.  If you don't want all six images in here, remove what you don't need.  IE if you only want five images, take out everything between the "<>" (div class="slide6"....img src=..../div).



</div></td><td valign="top">


<div class="slide1">
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/1_zpsb5a830d3.png">
</div>


<div class="slide2">
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/2_zps3b9b869a.png">
</div>


<div class="slide3">
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/3_zps29620bf6.png">
</div>


<div class="slide4">
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/4_zpsd54e1fda.png">
</div>


<div class="slide5">
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/5_zpsf35fd91c.png">
</div>


<div class="slide6">
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/6_zpsd3eb2967.png">
</div>



</td></tr></table></div><div id="right2"><table><tr><td valign="top"><div class="about">

<font class="h1">Header 1</font>
<font class="h2">Header 2</font>
<font class="h3">Header 3</font>
<font class="h4">Header 4</font>
<p>Right slider; left side box.  Input whatever you want in here.


</div></td><td valign="top"><div class="about">

<font class="h1">Header 1</font>
<font class="h2">Header 2</font>
<font class="h3">Header 3</font>
<font class="h4">Header 4</font>
<p><p>Right slider; right side box.  Input whatever you want in here.



</div></td></tr></table></div><div id="bottom2"><center><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="/add_testimonial.php?member_id=xxxxxx">Comment</a></td>
<td><a class="first" href="/send_message.php?member_id=xxxxxx">Message</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><tr><th colspan="2"><div class="notes">

<font class="h4">Notes</font>
<p>Bottom hover/left side of music.  Put some notes here.

</div></th><th colspan="2"><div class="music">

<font class="h4">Tunes</font>


<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="#000000" />
    <param name="FlashVars" value="mp3=http%3A//k007.kiwi6.com/hotlink/jeig1st9wu/eels_-_fresh_blood_www.mp3fiber.com_.mp3&autoplay=1&loadingcolor=444444&buttoncolor=444444&slidercolor=444444" />
</object>




</div></th><th colspan="2"><div class="notes">


<font class="h4">Owes</font>
<p>Bottom hover/right side of music.  Put your owes list, etc here.


</div></th></tr></table></center></div>


<DIV ID="backbanner" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/03__1__zps8ccd4ca2.png~original);">


<div id="d1">

<div id="panel" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/4308_zpsa01f7487.jpg~original);">

<div id="panel1">


<font class="h4">Header 4</font>
<p>This is top panel 1.

<p>Notes from Jane:  These are the overlay panels that go on top of your main background image. Fill them in with connections, moderators, characters for mcrp, stats or whatever you want.


</div></div></div><div id="d2">


<div id="panel" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/4308_zpsa01f7487.jpg~original);">


<div id="panel1">

<font class="h4">Header 4</font>
<p>This is top panel 2.


</div></div></div><div id="d3">


<div id="panel" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/4308_zpsa01f7487.jpg~original);">
<div id="panel1">


<font class="h4">Header 4</font>
<p>This is top panel 3.


</div></div></div><div id="d4">


<div id="panel" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/4308_zpsa01f7487.jpg~original);">

<div id="panel1">


<font class="h4">Header 4</font>
<p>This is bottom panel 1.


</div></div></div><div id="d5">


<div id="panel" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/4308_zpsa01f7487.jpg~original);">

<div id="panel1">

<font class="h4">Header 4</font>
<p>This is bottom panel 2.


</div></div></div><div id="d6">


<div id="panel" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/4308_zpsa01f7487.jpg~original);">


<div id="panel1">

<font class="h4">Header 4</font>
<p>This is bottom panel 3.


</div></div></div></div>


<div id="curtain" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/tickets-animated_zpsc946d210.gif~original);">



<div class="intro1">Welcome to the fun house.</div>
<div class="intro2">Enjoy the show...</div>


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