Не верное позиционирование балуна и его закрытие

Добрый день.

Уже неделю бьюсь и не могу найти решение вопроса. Перерыл всю документацию, нашёл пару примеров но как не применял - эффекта ноль.

Суть: есть кастомная метка и кастомный балун. При открытии, балун хвостиком оказывается не в точке метки а гораздо ниже, т.е. левым верхним углом. Что не есть хорошо. Ну и, собственно, не закрывается при клике.

Подскажите как решать проблему? Ну, или укажите, где внимательно читать доки. Пример расположен тут. Код вызова:

$(document).ready(function() {

   var map = new YMaps.Map(YMaps.jQuery("div#YMapsID-12")[0]);   
   var my = new YMaps.Template(
   '<div class="balloon-oblogka"><div class="my-ballon"><div class="close"></div><div class="name"><h4>$[name]</h4></div><div class="content">$[content]</div></div><div class="tail"></div></div>');
        
        map.setCenter(new YMaps.GeoPoint(37.621297,55.754667), 12, YMaps.MapType.MAP);
        map.addControl(new YMaps.Zoom());
        map.addControl(new YMaps.ToolBar()); 
        map.addControl(new YMaps.TypeControl([
            YMaps.MapType.MAP,
            YMaps.MapType.SATELLITE,
            YMaps.MapType.HYBRID
        ], [0, 1, 2])); 

      


// Базовый стиль
YMaps.Styles.add("my#base", {
    // Стиль значка метки    
    iconStyle : { 
        offset : new YMaps.Point(-16, -42),
        size : new YMaps.Point(51, 40),
        href : "img/small.png" 
    }  
});



// Конкретный стиль
YMaps.Styles.add("my#rule", {
    parentStyle : "my#base",
    balloonStyle : {template : my}
})                                                                                                                                                                               

var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.599785, 55.768154), { style : "my#rule" });
placemark.name = "Большой заголовок";
placemark.content = "содержание балуна";
map.addOverlay(placemark);  




});

Заранее спасибо.