Код:

<style>
.nav {margin: 0 -5px 0 0px;}
.punbb .nav a{display: block; color:#000000; background-color: #c6ad7b; text-align: center; width:170px; padding: 2px; margin: 1px; text-decoration: none}
.punbb .nav a:hover{background-color: #291e09; color:#ffffff}
</style>

<script type="text/javascript">
//cookies
function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
var aimg = {
open: '-',
close: '+'
}
function categorytoggle(el){
var cat = $(el).parents('div.category');
cat.children('div.container').toggle('slow');
el.innerHTML = el.innerHTML == aimg.open ? aimg.close : aimg.open;
var catc = getcookie(cat.attr('id'));
catc = catc == 'close' ? 'open' : 'close';
setcookie(cat.attr('id'),catc,3600*24*30*1000);
}
</script>


<style>
.btitle { 
   text-align: center; 
   font-size: 40px; 
   color: #8d5934; 
   font-family: Terminal Dosis Light; 
}

.btitle2 { 
   background-color: #c7c7c7; 
   color: #fefefe; 
   weight: 220px;
   font-size: 8px; 
   padding: 3px; 
   text-align: center; 
   letter-spacing: 3px; 
   text-transform: uppercase; 
   font-weight: bold;
}

.btitle3 { 
   text-align: center; 
   font-size: 25px; 
   color: #8d5934; 
   font-family: Terminal Dosis Light; 
}

.blurb { 
   width: 220px; 
   background-color: #ede6e6; 
   padding: 5px; 
   text-align: justify; 
   font-size: 10px; 
   line-height: 98%; 
   color: #685e5e; 
   border-left: #8d5934 5px solid;  
}

</style>



<div id="sidebar">
<div class="btitle">название раздела</div>
<img src=""картинка до наведения" onmouseover="document.banner1.src='картинка при наведении';" onmouseout="document.banner1.src='картинка после наведения'';" name="banner1">
<div class="btitle2">фраза под картинкой</div>
<center><div class="blurb">описание</div></center>


<div class="btitle">название раздела</div>
<img src=""картинка до наведения" onmouseover="document.banner2.src='картинка при наведении';" onmouseout="document.banner2.src='картинка после наведения';" name="banner2">
<div class="btitle2">фраза под картинкой</div>
<center><div class="blurb">описание</div></center>


<div class="btitle">название раздела</div>
<img src=""картинка до наведения" onmouseover="document.banner3.src='картинка при наведении';" onmouseout="document.banner3.src='картинка после наведения';" name="banner3">
<div class="btitle2">фраза под картинкой</div>
<center><div class="blurb"><div style="text-align: center;"><table>

<center><div class="nav"> 
ссылки
</div></center>
<td></td>
<td></td></tr>
<tr><td></td>
<td></td>
<td></td></tr>
<tr><td></td>
<td></td>
<td></td></tr></table></div></div></center>

<div class="btitle">название раздела</div>
<img src="картинка до наведения" onmouseover="document.banner5.src='картинка при наведении';" onmouseout="document.banner5.src='картинка после наведения';" name="banner5">
<div class="btitle2">фраза под картинкой</div>
<center><div class="blurb"> <div style="text-align:center">
О дизайне+баннер<br>
</div></div></center>

</div>

<style>

#sidebar { 
            background-image: url(http://s2.uploads.ru/qiSMp.png);
            width: 240px;
            height: 100%;
            padding: 5px;
            margin-left: -262px;
            position: absolute;
            float: left;
            border: 2px dashed #dddddd;
}

</style>

<style type="text/css">
li#navawards {display: none;}
</style>
<style>
.lastedit {display:none;}
</style>
<style type="text/css">
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}
</style>