CSS/DIV Layout 139

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

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

CAN'T EMPHASIZE THIS ENOUGH:  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.

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


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---------------------------------
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Merriweather:400,400italic|Playfair+Display:400,700italic|Oswald );

/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */

.vicarious { Structure }

body {
background-color:d9d9d9;
background-image:url(http://i59.tinypic.com/294o1fs.jpg);
background-repeat:repeat;
background-attachment:fixed;
background-position:center center;
}

table, tr, td {background-color:transparent;}

 .vicarious{ Google Chrome Scrollbar }
::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {border: 1px solid #222222;background-color:transparent;}
::-webkit-scrollbar-thumb {border: 1px solid #222222;background-color:dadada;}

.vicarious { text }

table, tr, td, li, p, div, .text, .btext, a, b, i {
font-family:tahoma;
font-size:7pt;
line-height:100%;
color:777777;
padding:0px;
margin:0px;
text-decoration:none;
text-transform:none;
}

p {text-align:justify;text-indent:10px;}
p:first-line { font-style:italic;}
p:first-letter { font-size: 9pt; }


b {
text-transform:uppercase;
font-family:courier new;
letter-spacing:-1pt;
color:424242;
}

i {
color:444444;
}

.u, u {
color:000000;
text-decoration:underline;
}

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

.strong, strong {
font-family:courier new;
background-color:000000;
font-size: 8pt;
text-transform:uppercase;
color:ffffff;
line-height:120%;
padding:0px 2px;
 }

.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .h7, h7, .h8, h8, .h9, h9, .h10, h10, .h11, h11, .h12, h12, .one, one, .two, two, .three, three. small, big  {
text-decoration:none;
text-transform:uppercase;
font-family: georgia;
line-height:100%;
text-align:center;
display:block;
font-size: 16pt ;
padding:0px;
margin:5px 0px;
color:7a7a7a;
font-weight:bold;
}

.h1, h1 {
font-family: 'Playfair Display', serif;
font-size: 14pt ;
text-transform:uppercase;
color:000000;
line-height:200%;
}

#side1 .h1, #side1 h1 {padding-left:10px;}
#side2 .h1, #side2 h1 {padding-right:10px;}

.h2, h2  {
font-size: 44pt ;
font-family: 'Jolly Lodger', cursive;
margin:0px;
letter-spacing:5pt;
color:cccccc;
line-height:70px;
}

.h3, h3  {
text-transform:none;
line-height:60%;
text-align:right;
padding-right:15px;
font-size: 26pt ;
margin:0px 0px 10px 0px;
letter-spacing:0pt;
}

small {
font-size:14pt;
font-family:monotype corsiva;
}

.cite {font-size:0px; color:transparent;display:block; height:0px;}


.vicarious { Divs }

#back, #thangs, #thangs2, #thangs3, #thangs4,  #thangs5, #p1_500w_500h, #txt1, #p2_350w_200h, #p3_350w_290h, #txt2, #txt3, #txt4, #bigPic, #bigPicOverlay, #title1, #title2, #title3, #title4, #title5, #title6, #title7, #pic4_430w_200h, #cn1_150w_250h, #cn2_150w_250h, #cn3_150w_250h, #title8, #p5_470w_470h, #side1, #side2 {
left:50%;
top:0%;
visibility:visible;
z-index:1;
position:absolute;
overflow:none;
background-color:f3f3f3;
}

#back {
width:1070px;
height:2000px;
margin-top:0px;
margin-left:-545px;
border:10px solid #f3f3f3;
}

#thangs, #thangs2, #thangs3, #thangs4, #thangs5 {
margin-top:1050px;
width:245px;
height:245px;
overflow:hidden;
border:20px solid #f3f3f3;
background-color:222222;
transition:All 1s ease-in-out;
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
transform: rotate(0deg) scale(0.10) translate(0px);
-webkit-transform: rotate(0deg) scale(0.10) translate(0px);
-moz-transform: rotate(0deg) scale(0.10) translate(0px);
-o-transform: rotate(0deg) scale(0.10) translate(0px);
-ms-transform: rotate(0deg) scale(0.10) translate(0px);
-webkit-box-shadow: 7px 7px 0px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    7px 7px 0px 0px rgba(0, 0, 0, 0.75);
box-shadow:         7px 7px 0px 0px rgba(0, 0, 0, 0.75);
text-align:justify;
padding:5px;
}

 #thangs, #thangs2, #thangs3, #thangs4, #thangs5, #thangs p, #thangs2 p, #thangs3 p, #thangs4 p, #thangs5 p {
color:transparent;
}

#thangs {margin-left:-30px; }
#thangs2 {margin-left:60px; }
#thangs3 {margin-left:150px; }
#thangs4 {margin-left:240px; }
#thangs5 {margin-left:330px; }

#thangs:hover, #thangs2:hover, #thangs3:hover, #thangs4:hover, #thangs5:hover {
border:0px solid #000000;
transform: rotate(0deg) scale(1) translate(-75px, 0px);
-webkit-transform: rotate(0deg) scale(1) translate(-75px, 0px);
-moz-transform: rotate(0deg) scale(1) translate(-75px, 0px);
-o-transform: rotate(0deg) scale(1) translate(-75px, 0px);
-ms-transform: rotate(0deg) scale(1) translate(-75px, 0px);
z-index:1000;
overflow:auto;
}

#thangs:hover, #thangs2:hover, #thangs3:hover, #thangs4:hover, #thangs5:hover, #thangs:hover p, #thangs2:hover p, #thangs3:hover p, #thangs4:hover p, #thangs5:hover p {
color:f3f3f3;
}

#name {
position:absolute;
width:500px;
height:60px;
margin-top:220px;
margin-left:220px;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
color:white;
font-family: 'Oswald', sans-serif;
font-style:italic;
text-align:left;
padding-left:0px;
line-height:60px;
font-size:40pt;
background-color:000000;
transform: rotate(90deg) ;
-webkit-transform: rotate(90deg) ;
-moz-transform: rotate(90deg) ;
-o-transform: rotate(90deg) ;
-ms-transform: rotate(90deg) ;
opacity:.5;
z-index:900;
transition:All 1s ease-in-out;
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
}

#p1_500w_500h:hover #name {
opacity:0;
transition:All .0s ease-in-out;
-webkit-transition:All .0s ease-in-out;
-moz-transition:All .0s ease-in-out;
-o-transition:All .0s ease-in-out;
}

#p1_500w_500h {
width:500px;
height:500px;
margin-top:10px;
margin-left:-535px;
}

#overlay {
width:350px;
height:150px;
left: 0px;
margin-top:300px;
opacity:0;
background-color:red;
transition: all 0.5s linear;
}

#p1_500w_500h:hover #overlay {
transition: all 0.5s linear;
opacity:1;
margin-top:100px;
}

#txt1 {
width:200px;
height:500px;
margin-top:10px;
margin-left:-25px;
overflow:auto;
text-align:justify;
}

#p2_350w_200h {
width:350px;
height:200px;
margin-top:10px;
margin-left:185px;
}

#p3_350w_290h {
width:350px;
height:290px;
margin-top:220px;
margin-left:185px;
}

#txt2, #txt3, #txt4 {
width:190px;
height:240px;
padding:5px;
margin-top:520px;
text-align:justify;
overflow:auto;
}

#txt2 {margin-left:-75px; }
#txt3 {margin-left:130px; }
#txt4 {margin-left:335px; }

#bigPic, #bigPicOverlay {
margin-left:-535px;
margin-top:520px;
width:1070px;
height:720px;
}


#bigPicOverlay {
background-color:transparent;
}


#title1, #title2, #title3, #title4 {
margin-left:-535px;
padding-right:10px;
height:50px;
background-color:000000;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
color:white;
font-family: 'Playfair Display', serif; cursive;
font-style:italic;
text-align:right;
line-height:50px;
font-size:30pt;
}

#title1 {margin-top:890px;width:200px;}
#title2 {margin-top:950px;width:275px;}
#title3 {margin-top:1010px;width:375px;}
#title4 {margin-top:1070px;width:430px;}

#title5 {
margin-top:780px;
margin-left:150px;
padding-right:15px;
width:370px;
height:370px;

color:white;
background-color:transparent;
font-family: 'Playfair Display', serif;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
font-style:italic;
text-align:right;
line-height:90%;
font-size:80pt;
}

#title6 {
margin-top:1165px;
margin-left:-535px;
width:430px;
height:75px;
color:000000;
font-family: 'Oswald', sans-serif;
text-align:center;
line-height:75px;
font-size:45pt;
text-transform:uppercase;
}


#pic4_430w_200h {
margin-top:1250px;
margin-left:-535px;
width:430px;
height:200px;
}


#title7 {
margin-left:-95px;
margin-top:1250px;
width:140px;
height:190px;
font-family: 'Merriweather', serif;
color:000000;
text-align:center;
font-size:29pt;
text-align:right;
padding:5px;
text-transform:uppercase;
font-style:italic;
line-height:102%;
}

#title8 {
margin-top:1460px;
margin-left:-535px;
width:590px;
height:40px;
background-color:000000;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
color:white;
font-family: 'Oswald', sans-serif;
text-align:center;
line-height:40px;
font-size:28pt;
text-transform:uppercase;
}

#cn1_150w_250h, #cn2_150w_250h, #cn3_150w_250h {
margin-top:1250px;
width:150px;
height:250px;
}

#cn1_150w_250h {margin-left:65px;}
#cn2_150w_250h {margin-left:225px;}
#cn3_150w_250h {margin-left:385px;}

#p5_470w_470h {
margin-left:65px;
margin-top:1510px;
width:470px;
height:470px;
}

#side1, #side2 {
margin-top:1510px;
overflow:auto;
height:460px;
text-align:justify;
padding:5px;
width:285px;
}

#side1 {margin-left:-535px;}
#side2 {margin-left:-240px;}

.HB1, .HB2 {
margin: 0px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
}

.HB1 {
width:150px;
height:250px;
}

.HB2 {
width: 100%;
height: 100%;
margin: 0px;
}

.HB1 .mask,
.HB1 .content,
.HB2 .mask,
.HB2 .content {
position: absolute;
overflow: hidden;
top: 0;
left: 0
}

.HB1 .mask,
.HB1 .content {
width:150px;
height:250px;
}

.HB2 .mask,
.HB2 .content {
width: 80%;
height: 80%;
padding: 10%;
}

.HB1 .mask,
.HB2-lrg .mask {
background-color: rgba(255, 255, 255, 0.7);
opacity: 0;
}

.HB1 .mask {
transition: all 0.5s linear;
}

.HB2-lrg .mask {
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
transition: all 0.3s ease-out 0.5s;
}

.HB1:hover .mask {
opacity: 1;
}

.HB2-lrg:hover .mask {
opacity: 1;
top: 0px;
transition-delay: 0s;
animation: bounceY 0.9s linear;
}


.HB1 img, .HB2 img {
display: block;
position: relative;
}

.HB1 img {
transform: scaleY(1);
transition: all 0.7s ease-in-out;
}

.HB2 img { }

.HB1:hover img {
transform: scale(10);
opacity: 0;
}

.HB1 big {
display:block;
line-height:100%;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 14pt;
font-weight:bold;
padding: 0px 2px;
margin: 20px 0px 10px 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
transform: scale(0);
transition: all 0.5s linear;
opacity: 0;
}

.HB1 .about {
position: relative;
opacity: 0;
transform: scale(0);
transition: all 0.5s linear;
}

.HB1 big {
display:block;
line-height:100%;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 14pt;
font-weight:bold;
padding: 0px 2px;
margin: 20px 0px 10px 0px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
transform: scale(0);
transition: all 0.5s linear;
opacity: 0;
}

.HB1 a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.HB1 a.info:hover {
    box-shadow: 0 0 5px #000
}

.about {
display:block;
width:140px;
padding:5px;
height:140px;
overflow:auto;
background-color:eeeeee;
margin-bottom:5px;
transform: scale(0);
transition: all 0.5s linear;
opacity: 0;
}

.HB1:hover big,
.HB1:hover .about,
.HB1:hover a.info {
transform: scale(1);
opacity: 1;
}

.HB2 big {
display:block;
text-transform: uppercase;
color: ffffff;
text-align: center;
line-height:100%;
font-size: 15pt;
padding: 15px 0px;
font-family: 'Oswald', sans-serif;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0px 20px 0px;
position: relative;
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.1s;
}

.HB2:hover big {
transform: translateY(0px);
transition-delay: 0.4s;
}

.HB2 a.info  {
width:110px;
display: inline-block;
text-decoration: none;
padding: 7px 0px;
background-color: 000000;
color: ffffff;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
transform: translateY(-200px);
transition:  all 0.2s ease-in-out 0.3s;
}

.HB2 a.info:hover  {
background: rgba(0, 0, 0, 0.3);
}

.HB2:hover a.info  {
transform: translateY(0px);
transition-delay: 0s;
}

.links {
display:inline-block;
margin-bottom:5px;
}

.music {
display:block;
margin: 5%;
padding: 2%;
height:25px;
overflow:hidden;
}

.quotable {
display:block;
margin: 5%;
padding: 2%;
height:100px;
overflow:auto;
font-size:14pt;
color:000000;
font-family: 'Playfair Display', serif;
font-style:italic;
text-shadow: 2px 2px 3px rgba(255, 255, 255, 1);
transform: scale(0);
transition: all 0.5s linear;
opacity: 0;
}

.HB2 .quotable {
opacity: 1;
transform: translateY(-200px);
transition: all 0.2s ease-in-out 0.2s;
}

.HB2:hover .quotable {
transform: translateY(0px);
transition-delay: 0.2s;
}

@keyframes bounceY {
    0% { transform: translateY(-205px);}
    40% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}


 .vicarious{ Hide Codes }
.profileInfo, .userProfileURL, .friendsComments, .blurbs, .blacktext12, .friendSpace, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userProfiledetail,  .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .blacktext12, .navigationBar, tr#groups,  .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
table table table table td {width:0px;}
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
div div select, div div form {display:none !important;}
select { visibility:hidden!important; WIDTH:0px!important;}
table div {display:none;}table table div {display:block;}
.clearfix {display:none !important;position:absolute!important;}
.navigationBar { display: none; }
div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
.profileInfo tr tr td { visibility:hidden; }
.profileInfo td.text { visibility:visible; }
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
</style>

</td></tr></table><table style="display:none"><tr><td>



-----------------------------LIKE TO MEET-------------------------

<font class="cite">LEAVE THIS BLANK</font>

-----------------------------INTERESTS-----------------------------

</td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<div id="back"></div>

<font class="cite">THESE SECTIONS REPRESENT THE TOP OF THE LAYOUT PIC/NAME, TEXT, 2 PICS</font>



<div id="p1_500w_500h">

<div id="name">
Rick Grimes
</div>

<div class="HB2 HB2-lrg">

<img src="http://i60.tinypic.com/2dl3lo0.jpg">

<div class="mask">

<big>The Walking Dead</big>

<div class="quotable">

I screwed up too many times. Those calls you gotta make, I start down that road... I almost lost my boy - who he was. Whatever else this place needs, I'm here for it.

</div>

<div class="links">
<a class="info" href="/logincomplete.php">Home</a>
<a class="info" href="/invite_friend.php?friend_id=xxxxxx">Add</a>
<a class="info" href="/send_message.php?member_id=xxxxxx">Message</a>
</div>

<div class="links">
<a class="info" href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
<a class="info" href="/gallery.php?member_id=xxxxxx">Photos</a>
<a class="info" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
</div>

<div class="links">
<a class="info" href="/#">Extra</a>
<a class="info" href="/#">Extra</a>
<a class="info" href="/#">Extra</a>
</div>


<div class="music">

<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://k002.kiwi6.com/hotlink/656165c1p8/the_walking_dead_theme_www.mp3fiber.com_.mp3&t0=TWD Theme&f1= &t1= &f2= &t2= &total=3" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />

</div>


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

<div id="txt1">

<p>Maybe we got a second chance. Not many people get that.


<font class="strong">Strong</font>
<font class="u">Underline</font>
<font class="strike">Strike</font>
<b>Bold</b>
<i>Italic</i>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<p><font class="strong">We don't kill the living.</font>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


</div>


<div id="p2_350w_200h">
<img src="http://i58.tinypic.com/9uyvb7.jpg">
</div>

<div id="p3_350w_290h">
<img src="http://i60.tinypic.com/mrefm1.jpg">
</div>


-----------------------------MUSIC---------------------------------

</td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<font class="cite">
THE CENTER PIC HAS A PHOTO OVERLAY ON TOP OF IT THAT PUTS CORNERS ON THE TOP RIGHT AND LOWER LEFT SIDE. YOU MAY NEED TO TOSS THE OVERLAY INTO PHOTOSHOP SO YOU CAN PROPERLY POSITION YOUR UNDERLAY PHOTO.  IN THE EXAMPLE ON THE PAGE, RICK IS VISUALLY POSITIONED ON THE LEFT SIDE.  YOU SHOULD DO SOMETHING SIMILAR.  THE PIC DIMENSIONS ARE WIDTH:1070px; HEIGHT:720px;
</font>


<div id="bigPic">
<img src="http://i59.tinypic.com/2hx64p.jpg">
</div>

<div id="bigPicOverlay">
<img src="http://i59.tinypic.com/f066hw.jpg">
</div>


<div id="title1">❝They're </div>
<div id="title2">screwing with</div>
<div id="title3">the wrong people.❞ </div>
<div id="title4"> - Rick Grimes</div>
<div id="title5">Fear the living</div>

<font class="cite">
THE BELOW = THREE TEXT BOXES OVER THE CENTER PIC AND OVERLAY.
</font>


<div id="txt2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
</div>

<div id="txt3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
</div>


<div id="txt4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.
</div>


-----------------------------MOVIES--------------------------------

</td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<font class="cite">
THESE ARE THE SMALL BLACK BOXES UNDER THE 'FEAR THE LIVING' TITLE
</font>


<div id="thangs">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>


<div id="thangs2">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<div id="thangs3">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<div id="thangs4">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<div id="thangs5">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>


-----------------------------TELEVISION--------------------------------

</td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<font class="cite">THIS IS THE BOTTOM LEFT SIDE OF THE LAYOUT.
</font>


<div id="pic4_430w_200h">
<img src="http://i58.tinypic.com/6gx6di.jpg">
</div>

<div id="title6">You don't know</div>
<div id="title7"> what it's like out there.</div>
<div id="title8">You may think you do but you don't.</div>


<div id="side1">
<div style="float: right; width: 0px; height: 150px"></div>
<div style="float: right; clear: right"><font class="h1">Who Will</font>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.



</div>


<div id="side2">

<div style="float: left; width: 0px; height: 150px"></div>
<div style="float: left; clear: left"><font class="h1">Survive?</font>
</div>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

</div>


-----------------------------BOOKS--------------------------------


</td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<font class="cite">THESE ARE THE THREE HOVER PICS (DARYL, CARL, MICHONNE).
</font>


<div id="cn1_150w_250h">

<div class="HB1">

<img src="http://i62.tinypic.com/4qgzgm.jpg">

<div class="mask">

<big>Daryl Dixon</big>

<div class="about">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<a class="info" href="/#">View Profile</a>


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


<div id="cn2_150w_250h">

<div class="HB1">

<img src="http://i60.tinypic.com/2wrhrom.jpg">

<div class="mask">

<big>Carl Grimes</big>

<div class="about">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<a class="info" href="/#">View Profile</a>


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


<div id="cn3_150w_250h">

<div class="HB1">

<img src="http://i59.tinypic.com/34zaypc.jpg">

<div class="mask">

<big>Michonne</big>

<div class="about">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<a class="info" href="/#">View Profile</a>

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


-----------------------------HEROES--------------------------------

</td></tr></table></td></tr></table><table cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="word-wrap:break-word">

<font class="cite">THIS IS THE BOTTOM RIGHT SIDE OF THE LAYOUT.  HOVER BOX=CONNECTIONS LINKS.
</font>


<div id="p5_470w_470h">

<div class="HB2 HB2-lrg">

<img src="http://i58.tinypic.com/10fx72u.jpg">

<div class="mask">

<big>Connections</big>

<div class="links">
<a class="info" href="/#">Connection Name</a>
<a class="info" href="/#">Connection Name</a>
<a class="info" href="/#">Connection Name</a>
</div>

<div class="links">
<a class="info" href="/#">Connection Name</a>
<a class="info" href="/#">Connection Name</a>
<a class="info" href="/#">Connection Name</a>
</div>

<div class="links">
<a class="info" href="/#">Connection Name</a>
<a class="info" href="/#">Connection Name</a>
<a class="info" href="/#">Connection Name</a>
</div>

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