question

[unreal]

The last problem seem to be on my end but this one isn't. Is there any whay to move the sidebar under the header. Right now the sidebar is overlapping the header but I want it to be the other way round. I tried z-index but I didn't get that to work. Live preview at incheons

/* Cleaned CSS: */
/* made by eunkyung
style -- Flexible Squares s2 */

BODY{
margin-left: ;
background-color: #cccccc;
background-image: url("http://i.imgur.com/h6tPe.png");
background-repeat:;
background-position: ;
background-attachment: fixed;
text-align: left;
font-size: 10pt;
color: #cccccc;
font-family: courier new;
}

body{margin: 0; }

a, a:link, a:visited {
font-family: "arial" Helvetica, sans-serif;
cursor: default;
color: #db3950;
font-weight: none;
text-transform: lowercase;
letter-spacing: 0px;
text-decoration: none;
}

a:hover{
font-family: "arial" Helvetica, sans-serif;
cursor: default;
color: #c5c5c5;
font-weight: none;
text-transform: lowercase;
text-decoration: none;
}

blockquote {
margin: 5px 5px;
padding: 4px;
color: #242424;
font-size: 8pt;
border-top: 2px solid #FF69B9;
background: #f1f1f1;
background-repeat: repeat;
text-align: justify;
}

#content {
width: 556px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}

#maincontent {
margin: 0px 0px 0px 0px;
}

/* sidebar */

#sidebar {
width: 516px;
margin-top: -20px;
margin-left: 10px;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
background: #ffffff;
color: #666666;
font-family: courier new;
font-size: 8pt;
line-height: 12pt;
text-align: justify;
float: left;
z-index: 100;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited {
color: #db3950;
text-decoration: none;
font-weight: bold;
}

div#sidebar a:hover {
text-decoration: none;
color: #666666;
}

.defaultuserpic {
text-align: center;
border-color: 10px solid #FEFEFE;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px 3px 0px 3px;
}

.sbarbody2 {
padding: 8px 8px 8px 8px;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
padding-right: 7px; padding-left: 7px;
border: px solid #ddd;
background: #f9f9f9;
text-align: right;
font-family: "arial", Helvetica, sans-serif;
color: #999999;
font-size: 8pt;
display: none;
}

.sbarcalendarposts {
padding-right: 7px; padding-left: 7px;
border: 0px solid #ddd;
background: #f9f9f9;
text-align: right;
font-family: "arial", Helvetica, sans-serif;
color: #73c8cb;
font-size: 8pt;
display: none;
}

ul.sbarlist {
margin-left: 0px;
list-style: none;
padding-left: 0px;
}

li.sbaritem {
margin: 2px 4px 2px 3px;
padding: 2px 2px 2px 13px;
list-style: none;
background: url(http://i147.photobucket.com/albums/r304/snubicons/layouts/greyarrow.gif) left center no-repeat;
border-bottom: 1px #f3f3f3 solid;
}

li.sbaritem:hover {
}

li.sbartitle {
list-style: none;
margin-top: 0px;
margin-left:0px;
text-align: left;
font-weight: normal;
padding: 5px 5px 5px 5px;
color: #000000;
font-family: "arial" Helvetica, sans-serif;
font-size: 12pt;
background: #f1f1f1;
border-bottom: 1px solid #cccccc;
border-top: 0px solid #f1f1f1;
text-transform: uppercase;
letter-spacing: 0px;
display: none;
}

ul.ljtaglist li {
padding: 0px;
margin: 5px;
list-style: decimal-leading-zero;
list-style-position: outside;
background: #ffffff;
}

.nav a {border-bottom: 0px solid #e6dcd6; border-top: 2px solid #e2e7e1; color: #9f8449; display: block; font-family: tahoma; font-size: 8pt; text-transform: lowercase; padding: 3px; line-height: 10px; background-color: #eeeeee;}
.nav a:hover {color: #9f8449; text-decoration: none; background-color: #f5f5f5;}
.nav br {display: none;}

/* header, footer */

#header {
background-image: url("http://i.imgur.com/m0BNr.png");
background-repeat:no-repeat;
color: #db3950;
margin-left: 0px;
margin-right: 0px;
text-align: center;
font-family: courier new;
font-size: 12pt;
font-weight: normal;
text-transform: uppercase;
border-bottom:0px solid #f1f1f1;
padding-top: 5px;
height: 56px;
z-index: -5;
}

#footer {
width: auto;
margin-top: -5px;
padding: 10px 0px 10px 10px;
text-align: right;
text-transform: lowercase;
letter-spacing: 1px;
background: #000;
font-size: 12pt;
color: #FFFFFF;
z-index: 100;
}

div#header a, div#header a:link, div#header a:visited{
font-family: courier new;
color:#666666;
text-transform: uppercase;
padding: 6px;
margin:0 0 0 0px;
}

div#footer a, div#footer a:link, div#footer a:visited {
font-family: courier new;
color: #666666;
font-size: 1em;
padding: 10px 10px 10px 10px;
text-transform: lowercase;
border-top: 0px solid #d3e2eb;
}

div#header a:hover {
font-family: courier new;
color:#b75176;
text-transform: uppercase;
}

div#footer a:hover {
font-family: courier new;
color: #b75176;
font-size: 1em;
padding: 10px 10px 10px 10px;
text-transform: lowercase;
}

ul.navheader{
padding: 6px 0;
margin: 0px;
background-position:left;
}

ul.navheader li {
display: inline;
margin: px 0px 0px;
list-style-type: none;
}

div#header li.view {
padding: 14px;
border-left: 0px solid #232323;
margin:0 -3px 0 0px;
}

#footer .viewing {
display:none;
}

ul.navfooter {
padding: 0px;
margin: 0px;
}

ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}

.clearfoot {
display: none;
clear: both;
}

/* title, substitle */

.title {
text-align: left;
color: #FEFEFE;
font-family: courier new;
font-size: 15pt;
padding-left: 13px;
padding-top: 10px;
text-transform: uppercase;
letter-spacing: 2pt;
background: #db3950;
display: none;
}

.subtitle {
text-align: left;
color: #ffffff;
font-family: "courier new;
font-size: 8pt;
text-transform: lowercase;
letter-spacing: 2pt;
padding-left: 13px;
padding-bottom: 3px;
background: #db3950;
display: none;
}

/* tags page, tags */

.ljtaglist {
list-style-type: none;
padding: 0px;
margin: -1px 20px 0px 20px;
margin-left: 70px; width: 50%;
text-transform: uppercase;
text-align: left;
}

.ljtaglist li {
border-bottom: 1px solid #cccccc;
padding: 5px 2px 5px 20px;
color: #c5c5c5;
}

H2 {
margin: 30px 0px 10px 90px;
text-align: left;
padding: 2px 2px 2px 10px;
line-height: 12px;
font-weight: normal;
font-style: italic;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0px;
font-family: arial;
color: #888888;
background: url('') 0px 2px no-repeat;
}

ul.ljtaglist {
color: #bbb;
font-family: "Tahoma", Helvetica, sans-serif;
font-size: 7pt;
padding: 8px 8px 8px 12px;
border: 0px solid #FEFEFE;
background: #FEFEFE;
text-align: left;
margin-right: auto;margin-left: auto; padding: 35px;
}

.ljtags {
margin-top: 12px;
color: #cccccc;
font-size: 8pt;
font-weight: normal;
background: url(http://i42.tinypic.com/258md5u.png) 1px 1px no-repeat;
padding-left: 18px;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #b75176;
font-size: 8pt;
text-transform: lowercase;
font-weight: light;
}

/* subcontent, entry */
.subcontent {
width: 526px;
margin-left: 10px;
padding-left: 10px;
padding-top: 10px;
background-color: #ffffff;
}

.entry{
padding: 0px 20px 20px 10px;
border-left: 0px solid #ffffff;
border-right: solid #77cfe0 0px;
margin: 0px 0px 0px 0px;
color: #4F4F4F;
font-family: "verdana" Helvetica, sans-serif;
font-size: 9pt;
line-height: 12pt;
text-align: justify;
background: #ffffff;
}

.entry ul li {
padding-left: 10px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

.entry ol li {
padding-left: 0px;
margin-left: 0px;
list-style: decimal-leading-zero;
list-style-position: outside;
}

/* userpic, userpic friends */

.userpic {
display: ;
position: relative;
float: right;
padding: 0px;
margin-right: 10px;
margin-left: 10px;
margin-top: 0px;
z-index: 15;
background-color: #ffffff !important;
margin-left: 10px !important;
text-align: center;
font-family: courier new;
}

.userpicfriends {
display: ;
position: relative;
float: right;
background-color: #ffffff !important;
padding: 0px;
margin-right: 10px;
margin-left: 10px !important;
margin-top: 0px;
z-index: 15;
border: 0px solid #946063;
text-align: center;
font-family: courier new;
font-size: 8pt;
z-index: 15;
}

.userpic img, .userpicfriends img, .defaultuserpic img{
background: #f7d411;
padding:0px; border-width: 0px;
border-color: #cc9999;
border-style: solid;
width: 75px;
height: 75px;}

.userpic font {
color: #d6d5d5 !important;
text-transform: uppercase;
}

.userpicfriends font {
color: #d6d5d5 !important;
text-transform: uppercase;
}

.userpicfriends {font-size: 3; align: right;}

.userpicfriends a{ display: yes;}

.userpicfriends br {
display: block;
height: 0;
}

/* date, subject, comments, currents */

.date{
margin-left: 0px;
margin-top: 0px;
text-align: left;
padding-left: 10px;
color: #bababa;
font-family: "verdana" Helvetica, sans-serif;
font-size: 8pt;
text-transform: lowercase;
background-color: #ffffff;
}

.subject {
padding-left: 10px;
margin-bottom:0px;
padding-top:0px;
font-weight: normal;
padding-bottom: 2px;
color: #787878;
font-family: "georgia" Helvetica, sans-serif;
font-size: 11pt;
border-right: solid #77cfe0 0px;
text-transform: lowercase;
letter-spacing: 1px;
}

.subject a, .subject a:link, .subject a:visited {
font-family: "georgia" Helvetica, sans-serif;
color: #b75176;
text-transform: lowercase;
}

.subject a:hover {
color: #999;
}

.datesubject {
margin-top: 10px;
padding-left: 0px;
background-color: #ffffff;

}

.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #777777;
font-size: 8pt;
text-transform: lowercase;
}

.currents, .currentmood, .currentmusic, .currentlocation {
color: #777777;
font-size: 8pt;
text-transform: lowercase;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #b75176;
font-size: 8pt;
text-transform: uppercase;
font-weight: light;
}

.currentlocation a:hover, .ljtags a:hover {
color: #999;
font-size: 8pt;
font-weight: light;
text-transform: lowercase;
}

.currentlocation {
height: 16px;
background: url('http://img5.imageshack.us/img5/3871/045t.png') 4px 2px no-repeat;
padding-left: 18px;
}

.currentmood {
background: url('http://img25.imageshack.us/img25/9614/035a.png') 4px 2px no-repeat;
padding-left: 18px;
padding-bottom: 2px;
}

.currentmusic {
height: 18px;
background: url('http://img5.imageshack.us/img5/7127/056m.png') 4px 2px no-repeat;
padding-left: 18px;
}

.currentgroups {
padding-left: 20px;
height: 18px;
background: url('http://i43.tinypic.com/x9kir.jpg') 1px 1px no-repeat;
}

.comments {
font-family: "Verdana", sans-serif;
font-size: 7pt;
text-align: right;
font-weight: none;
padding: 8px;
position: relative;
top: 0px;
border-bottom: solid #f3f3f3 1px;
background-image: url(' ');
background-repeat: repeat;
text-transform:lowercase;
letter-spacing: 0px;
}

div.comments a, div.comments a:link, div.comments a:visited {
color: #666666;
text-transform: uppercase;
}

div.comments a:hover {
color: #bbbbbb;
text-transform: uppercase;
}

/* other */

.clear {
display: none;
height: 0px;
}

/* header */

.headerimage {
position: relative;
width: 0px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("");
background-repeat: no-repeat;
}

.separator {
background-color: #f1f1f1;
background-image: url('');
background-repeat: repeat-x;
height: 0px;
}

.datesubjectcomment {
background-color: #ffffff;
padding: 5px;
margin-top: 20px;
color: #c9c9c9;
}

.userpiccomment {
position: relative;
top: -10px;
padding: 4px;
margin: 0px 10px -20px 0px;
z-index: 15;
float: left;
width: 75px;
height: 75px;}
}

.box {
clear: left;
color: #666666;
}

input, textarea {
background-color: #ffffff;
padding: 3px;
font-size: 9pt;
font-family: courier new;
color: #666666;
border: 1px solid #000000;
}

textarea.textbox {
width: 100% !important;
border: 1px solid #000000;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: courier new;
font-size: 9pt;
line-height: 125%;
background-color: #ffffff;
color: #666666;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 9pt;
font-family: courier new;
color: #666666;
}

.commentbox {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}

.skiplinks {
text-align: center;
padding: 10px;
color: #ffffff;
background-color: #ffffff;
}

/* tiny icons */

/* Generated by Malionette's Tiny Icon Generator
http://malionette.net/generator/tinylite.html */

span.i-ljuser img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/2aJvs.png) no-repeat !important; padding: 16px 0 0 18px !important; }
span.i-ljuser img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/vLyZg.png) no-repeat !important; padding: 16px 0 0 18px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://i.imgur.com/K9JN5.png) no-repeat !important; padding: 16px 0 0 16px !important; }