I have a page where I need to use 2 different FancyBox styles for different elements on the page. To achieve that, I added tpl option and modified stylesheet accordingly. Here is what I have:

$(document).ready(function() {
$(".login").fancybox({
    closeClick  : false,
    closeBtn : true,
    tpl: {
        wrap     : '<div class="fancybox-wrap1" tabIndex="-1"><div class="fancybox-skin1"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
        closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'
        }
    });
});

In my CSS, I added new styles for .fancybox-wrap1 and .fancybox-skin1. Styles work great BUT on the FancyBox with modified template "close" button completly disappears! I tried both adding and deleting closeBtn from tpl but it doesn't seem to make any difference.

I also have a demo here (eventually I will need different background-images for FancyBox, not just background-color, that's why I'm doing it).

What am I doing wrong? Any help will be greatly appreciated!