#pun {
    margin-top: 0px;
}

<!-- Правка стиля -->
<style type="text/css">
#pun {position: inherit;}
</style>

<!-- Новогодняя гирлянда из лампочек -->
    <style type="text/css">  
    #garland {
    position:absolute;
    top:0;
    left:0;
    background-image:url('http://s3.uploads.ru/qLMz6.png');
    height:36px;
    width:100%;
    overflow:hidden;
    z-index:99;
    }  
    #nums_1 {padding:100px;}  
    .garland_1 {background-position:0 0;}  
    .garland_2 {background-position:0 -36px;}  
    .garland_3 {background-position:0 -72px;}  
    .garland_4 {background-position:0 -108px;} 

    </style>  
     
    <div id="garland" class="garland_4"><div id="nums_1">1</div></div>  
     
    <script type="text/javascript">  
    function garland() {  
    nums = document.getElementById('nums_1').innerHTML  
    if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}  
    if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}  
    if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}  
    if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}  
    }  
     
    setInterval(function(){garland()}, 300)  
    </script>