bad heart layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>bad heart</title>

<style type="text/css">

/*------------------------------
Name: Bad Heart
By: ariestrash
Site: http://www.ariestrash.com
-------------------------------*/

body  {
	background:#FFF url('http://i42.tinypic.com/30cpu6u.jpg') no-repeat;
	text-align: normal;
	margin: 00px 0 00px 0 }

div,body {
	font: 10px Arial, Helvetica, san-serif;
	color: #333;
	line-height: 15px; }

blockquote {
	background-color: #fff;
	width: 300px;
	margin-left: 8px;
	padding: 10px; }


/*CONTENT-------------------------------*/

#content {
	position:absolute;
	width:335px;
	left:350px;
	top:60px;
	text-align: justify;
	background-color:#FFF9F9;
	padding: 0px 12px;
	border-top: 12px solid #000;
	z-index:1; }

#content h1 {
	background-color:none;
	width: 100%;
	text-align: right;
	font-family: arial, helvetica, sans-serif;
	font-size: 14px;
	color:#000;
	font-weight: normal;
	letter-spacing: 3px;
	text-transform: lowercase;
	padding: 2px;
	margin-bottom:10px;
	margin-top:20px;
	border-bottom: 1px dashed #aaa; }

#content a:link, a:visited, a:active {
	color: #404040;
	font-weight:none;
	text-decoration: none; }

#content a:hover {
	background-color: #fff;
	color: #000;
	font-weight:none;
	text-decoration: none; }


/* NAVIGATION----------------------------*/

#navi { position: absolute;
	top: 70px;
	left: 730px;
	z-index: 3;}

#navi a:link, a:visited, a:active {
	display: block;
	width: 160px;
	background-color:#FFF;
	color: #000;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 4px;
	padding: 2px; }

#navi a:hover {
	background-color: #fffeac; }


/* SIDEBAR-------------------------------*/

#side {
	position:absolute;
	width:160px;
	left:170px;
	top:330px;
	text-align: justify;
	z-index:2 }

#side h2 {
	background-color:#000;
	width: 100%;
	text-align: right;
	font-family: trebuchet ms, san-serif;
	font-size: 9px;
	color:#fff;
	font-weight: normal;
	margin-bottom:6px;
	margin-top:0px;
	margin-left:-10px;
	padding-right:20px;
	text-transform: uppercase;
	letter-spacing: 3px;    }

#side a:link, a:visited, a:active {
	color: #404040;
	font-weight:none;
	text-decoration: none; }

#side a:hover	{
	background-color: #fffeac;
	color: #000;
	font-weight:none;
	text-decoration: none; }

ul {
	list-style-type:circle;
	color:b8b59e;
	line-height: 12px; }


b {color: #333; font-weight: 400px;}
i {color: #edb7c5;}
u {color : #8aebf4; text-decoration: underline;}
s {color:#535353;}

</style>
</head>


<body>

<div id="header"></div>

<!--START OF CONTENT-->
<div id="content">
<h1>welcome</h1>
<p><b>bad heart</b> was just an experiment. it came out quite nice though! it has a very retro feel and the code is quite simple. please, if you use, do not remove the credit. thanks.</p>

<h1>this is a header</h1>
<p>lorem ipsum dolor sit amet, consectetur timide concitatis. maturius remota tractatione meliorem, summis honeste animi accommodatior videmus, iudices opere omnem magnificentius censores ad modo magno esse. et sit veneficii vivendi eas animi quosdam. certum partitionem quosdam omnem adiuvet criminibus summis reticendo directam concitatis retentam ad. tris iudicii iucunde temperantiam iudices ad? ego seditiose iudicium perspicio, voluptatibus ut ad brevis exquisitaque altera. virtutes honeste animadverteretur habere, remota in neque vivi ingeniis foris tractatione. pars alieno voluisse facere summum graeco iudices meditati quam ingeniis animadverteretur haec invidiosum lege. facere iudicii et partem altera.</p>

<blockquote>lorem ipsum dolor sit amet, consectetur timide concitatis. maturius remota tractatione meliorem, summis honeste animi accommodatior videmus, iudices opere omnem magnificentius censores ad modo magno esse. et sit veneficii vivendi eas animi quosdam. certum partitionem quosdam omnem adiuvet criminibus summis reticendo directam concitatis retentam ad. tris iudicii iucunde temperantiam iudices ad? ego seditiose iudicium perspicio, voluptatibus ut ad brevis exquisitaque altera. virtutes honeste animadverteretur habere, remota in neque vivi ingeniis foris tractatione. pars alieno voluisse facere summum graeco iudices meditati quam ingeniis animadverteretur haec invidiosum lege. facere iudicii et partem altera.</blockquote>

<p><a href="http://link.com">link</a> - <b>bold</b>  -  <i>Italic</i>  -  <u>underlined</u>  -  <s>strikethrough</s></p>

</div>
<!--END OF CONTENT-->


<!--START OF NAVIGATION-->
<div id=navi>
	<a href="link">home</a>
	<a href="link">about</a>
	<a href="link">site</a>
	<a href="link">contact</a>
</div>
<!--END OF NAVIGATION-->


<!--START OF SIDEBAR-->
<div id="side">

<h2>about</h2>
<p>about me here. lorem ipsum dolor sit amet, consectetur timide concitatis. maturius remota tractatione meliorem, summis honeste animi accommodatior videmus, iudices opere omnem magnificentius censores ad modo magno esse. et sit veneficii vivendi eas animi quosdam.</p>

<br><br>

<h2>credit</h2>
<center>layout design by: <a href="http://www.ariestrash.com">ariestrash</a></center>
</div>
<!--THE END OF SIDEBAR-->


</body>
</html>