Problem with Layout Options

[SyntheticMemorie...]

So I put this code in exactly as it is, and the butterfly doesn't show off and it's really off...I put it in overides in S1...so I don't know whats up.
Here's the code:
<!-- start code provided by createblog.com -->
GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-color: #B1DC77;
background-image:
url(http://images.cbimg4.com/livejournal/15/3702a.jpg);
background-repeat: repeat-y;
background-attachment: fixed;
background-position: 50%;
margin-top: 480px;
color: #236B8E;
}

table, tr, td, .shadowed {
background: transparent;
}

table {
width: 357px;
margin-left: 277px;
}
table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}

html body .shadowed img.x{
z-index: -1;
}
table, .shadowed div{
z-index: 80;
}
html>body table{
position: relative;
}

table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}

.x{
position:absolute;
top:0px;
width: 650px;
left:50%;
margin-left: -325px !important;
margin-left: -324px;}

#sidebar{
position:absolute;
top: 528px;
left: 50%;
margin-left: -310px;
width: 185px;
height: 100%;
visibility: visible;
z-index:2;
font-size:11px;
font-family: Verdana;
font-color: #236B8E;
text-align: justify;
}
#sidebar img{
display:inline;
}
#sidebar a{
text-decoration: none;
font-weight: none;
color:#FFF68F;
}
#sidebar a:hover{
text-decoration: none;
font-weight: none;
color: #33A1C9;
}

p .index {
color: #50A6C2;
}
p table table td.caption {
font-size:11.5px;
font-weight: bold;
color: #05B8CC;
font-family: Verdana;
}
.comments {
font-size: 11px;
font-family: Verdana;
}
BODY, TD {font-family:verdana;color:#236B8E;font-size:11px;}

a:link, a:visited, a:active {
text-decoration: none;
font-weight: none;
color:#33A1C9;
}
a:hover{
text-decoration: none;
font-weight: none;
color: #FFF68F;
}
.entrybox td{
text-align: justify;
font-family: verdana;
}
.entrybox td.index {
text-align: right;
}
-->
</style>
<=GLOBAL_HEAD

LASTN_WEBSITE<=

<div id="sidebar">
<p><b>USERNAME</b>
<p><a href="http://www.livejournal.com/users/USERNAME">Home</a>
<br /><a href="http://www.livejournal.com/login.bml">Sign in</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/info">Info</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/friends">Friends</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/calendar">Calendar</a>
<br /><a href="http://www.livejournal.com/modify.bml?authas=USERNAME">Modify</a>
<br /><a href="http://www.livejournal.com/update.bml">Update</a>
<br /><a href="http://www.livejournal.com/logout.bml">Log out</a>

<p><b>Links</b>
<p>
<a href="http://www.WEBSITEHERE">SITE</a>
<br /><a href="http://www.WEBSITEHERE">SITE</a>
<br /><a href="http://www.createblog.com">createblog</a>

<p><b>Moi:</b>
<p>
Blahblahblah. Talk about who you are, what you like to do, what music you like to listen to, etc…
</div>


<IMG class="x" SRC= "http://images.cbimg4.com/livejournal/15/3702.jpg">

<style type="text/css">
<!--
table table table table .meta

{visibility:hidden;position:absolute;top:1px}
table table table table table .meta

{visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px;
</style>
<=LASTN_WEBSITE


FRIENDS_WEBSITE<=

<div id="sidebar">
<p><b>USERNAME</b>
<p><a href="http://www.livejournal.com/users/USERNAME">Home</a>
<br /><a href="http://www.livejournal.com/login.bml">Sign in</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/info">Info</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/friends">Friends</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/calendar">Calendar</a>
<br /><a href="http://www.livejournal.com/modify.bml?authas=USERNAME">Modify</a>
<br /><a href="http://www.livejournal.com/update.bml">Update</a>
<br /><a href="http://www.livejournal.com/logout.bml">Log out</a>

<p><b>Links</b>
<p>
<a href="http://www.WEBSITEHERE">SITE</a>
<br /><a href="http://www.WEBSITEHERE">SITE</a>
<br /><a href="http://www.createblog.com">createblog</a>

<p><b>Moi:</b>
<p>
Blahblahblah. Talk about who you are, what you like to do, what music you like to listen to, etc…
</div>


<IMG class="x" SRC= "http://images.cbimg4.com/livejournal/15/3702.jpg">

<style type="text/css">
<!--
table table table table .meta

{visibility:hidden;position:absolute;top:1px}
table table table table table .meta

{visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px;
</style>
<=FRIENDS_WEBSITE


CALENDAR_WEBSITE<=

<div id="sidebar">
<p><b>USERNAME</b>
<p><a href="http://www.livejournal.com/users/USERNAME">Home</a>
<br /><a href="http://www.livejournal.com/login.bml">Sign in</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/info">Info</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/friends">Friends</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/calendar">Calendar</a>
<br /><a href="http://www.livejournal.com/modify.bml?authas=USERNAME">Modify</a>
<br /><a href="http://www.livejournal.com/update.bml">Update</a>
<br /><a href="http://www.livejournal.com/logout.bml">Log out</a>

<p><b>Links</b>
<p>
<a href="http://www.WEBSITEHERE">SITE</a>
<br /><a href="http://www.WEBSITEHERE">SITE</a>
<br /><a href="http://www.createblog.com">createblog</a>

<p><b>Moi:</b>
<p>
Blahblahblah. Talk about who you are, what you like to do, what music you like to listen to, etc…
</div>


<IMG class="x" SRC= "http://images.cbimg4.com/livejournal/15/3702.jpg">

<style type="text/css">
<!--
table table table table .meta

{visibility:hidden;position:absolute;top:1px}
table table table table table .meta

{visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px;
</style>
<=CALENDAR_WEBSITE


DAY_WEBSITE<=

<div id="sidebar">
<p><b>USERNAME</b>
<p><a href="http://www.livejournal.com/users/USERNAME">Home</a>
<br /><a href="http://www.livejournal.com/login.bml">Sign in</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/info">Info</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/friends">Friends</a>
<br /><a href="http://www.livejournal.com/users/USERNAME/calendar">Calendar</a>
<br /><a href="http://www.livejournal.com/modify.bml?authas=USERNAME">Modify</a>
<br /><a href="http://www.livejournal.com/update.bml">Update</a>
<br /><a href="http://www.livejournal.com/logout.bml">Log out</a>

<p><b>Links</b>
<p>
<a href="http://www.WEBSITEHERE">SITE</a>
<br /><a href="http://www.WEBSITEHERE">SITE</a>
<br /><a href="http://www.createblog.com">createblog</a>

<p><b>Moi:</b>
<p>
Blahblahblah. Talk about who you are, what you like to do, what music you like to listen to, etc…
</div>


<IMG class="x" SRC= "http://images.cbimg4.com/livejournal/15/3702.jpg">

<style type="text/css">
<!--
table table table table .meta

{visibility:hidden;position:absolute;top:1px}
table table table table table .meta

{visibility:visible;position:relative;top:1px}

tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px;
</style>
<=DAY_WEBSITE
<!-- end code provided by createblog.com -->

Ok so I got the butterfly to work, but the layouts really off.
The link is: www.livejournal.com/one_adoration