tutorial series part 2 base

<!-- base code by Ans @ Ettudis-->

<!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" xml:lang="en" lang="en">
<head>
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />

<meta name="color:background" content="#FFFFFF" />
<meta name="color:sidebar background" content="#000000" />
<meta name="color:sidebar text" content="#FFFFFF" />
<meta name="color:sidebar title" content="#FFFFFF" />
<meta name="color:sidebar title hover" content="#333333" />
<meta name="color:sidebar link border" content="#eeff2e" />
<meta name="color:sidebar link border hover" content="#FFFFFF" />
<meta name="image:background" content=""/>
<meta name="image:sidebar background" content=""/>
<meta name="image:sidebar" content=""/>
<meta name="if:showportrait" content="0"/>

<style type="text/css">
body{
	margin:0px;
	padding:0px;
	background:{color:background} url('{image:background}');
}
#sidebar {
	position: absolute;
	left: 150px;
	top: 30px;
	width: 150px;
	margin:0px;
	padding:5px;
	font: 11px Consolas, Geneva, Arial, Helvetica, sans-serif;
	color: {color:sidebar text};
	background:{color:sidebar background} url('{image:sidebar background}');
}
#sidebar img{
	max-width:150px;
}
#title a{
	display: block;
	font-style: italic;
	text-decoration: none;
	text-transform: uppercase;
	color: {color:sidebar title};
	border-bottom: 1px solid {color:sidebar title};
}
#title a:hover {
	color: {color:sidebar title hover};
}
#description a{
	display:block;
	padding:0px 3px;
	margin:1px;
	text-align:right;
	text-decoration: none;
	text-transform: lowercase;
	color: {color:sidebar text};
	border-right: 7px solid {color:sidebar link border};
}
#description a:hover{
	border-right: 15px solid {color:sidebar link border hover};
}
</style>
<body>
<div id="sidebar">
{block:ifsidebarimage}<img src="{image:sidebar}" />{/block:ifsidebarimage}
<div id="title"><a href="/">{title}</a></div>
<div id="description">
	{block:ifshowportrait}<img src="{PortraitURL-30}" style="margin:3px;float:left;"/>{/block:ifshowportrait}
	{block:description}{description}{/block:description}
	<p>
	<a href="/archive">archives</a><a href="/ask">message</a><a href="http://ettudis.three-words.net">theme</a>
	</p>
</div>
</div>
</body>
</html>