<script>
$('li.pa-respect img[alt="+"]').each(function() { $(this).attr('src', 'адрес картинки на плюс'); });
$('li.pa-respect img[alt="-"]').each(function() { $(this).attr('src', 'адрес картинки на минус'); });
</script>

<style>
.button {
   border: 1px solid #0a3c59;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   padding: 10.5px 21px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #7ea4bd 0 1px 0;
   color: #06426c;
   font-size: 14px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
 .button:hover {
   border: 1px solid #0a3c59;
   text-shadow: #1e4158 0 1px 0;
   background: #3e779d;
   background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
   background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
   background: -moz-linear-gradient(top, #65a9d7, #3e779d);
   background: -ms-linear-gradient(top, #65a9d7, #3e779d);
   background: -o-linear-gradient(top, #65a9d7, #3e779d);
   background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
   color: #fff;
   }
 .button:active {
   text-shadow: #1e4158 0 1px 0;
   border: 1px solid #0a3c59;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
   color: #fff;
}
   </style>

<!--Скрипт Карусель/Галерея картинок-->
<style type="text/css">
.block-img{
position: relative;
display:inline;
}
.expando{
position: relative;
vertical-align: middle;
border: 0;
text-align: center;
margin-right:-5px;
}
#prev{float:left;height:31px;margin-top:7px;}
#next{float:right;height:31px;margin-top:7px;}
#d0,#d1,#d2,#d3,#d4{
position: absolute;
bottom:40px;
}
#d5,#d6,#d7,#d8{
position: absolute;
bottom:40px;
margin-right:-44px;
right:50%;
}
</style>
<!--Увеличиваем картинки в галерее-->
<script type="text/javascript">
if (document.images){
 (function(){
  var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
  var expConIm = function(im){
   im = im || window.event;
   if (!expConIm.r.test (im.className))
    im = im.target || im.srcElement || null;
   if (!im || !expConIm.r.test (im.className))
    return;
   var e = expConIm,
   widthHeight = function(dim){
    return dim[0] * cos + dim[1] + 'px';
   },
   resize = function(){
    cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
    im.style.width = widthHeight (e.ims[i].w);
    im.style.height = widthHeight (e.ims[i].h);
    if (e.ims[i].d && times > e.ims[i].jump){
     ++e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    } else if (!e.ims[i].d && e.ims[i].jump > 0){
     --e.ims[i].jump;
     e.ims[i].timer = setTimeout(resize, speed);
    }
   }, d = document.images, i = d.length - 1;
   for (i; i > -1; --i)
    if(d[i] == im) break;
   i = i + im.src;
   if (!e.ims[i]){
    e.ims[i] = {im : new Image(), jump : 0};
    e.ims[i].im.onload = function(){
     e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
     e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
     e (im);
    };
    e.ims[i].im.src = im.src;
    return;
    }
   if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
   e.ims[i].d = !e.ims[i].d;
   resize ();
  };
  expConIm.ims = {};
 })();
}
</script> 
<!--Блок куда ставятся и увеличиваются картинки-->
<center>
<span id="prev" onmouseover="inc()" onmouseout="inc1()"><img src="http://www.sdws.ru/pictures/prev.png" style="cursor:pointer" width="10" height="13" ></span>
<div class="block-img">
<span id="d0"></span>
<span id="id0" class="expando" onmouseover = "d0.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d0.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d1"></span>
<span id="id1" class="expando" onmouseover = "d1.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d1.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d2"></span>
<span id="id2" class="expando" onmouseover = "d2.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d2.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d3"></span>
<span id="id3" class="expando" onmouseover = "d3.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d3.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d4"></span>
<span id="id4" class="expando" onmouseover = "d4.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d4.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d5"></span>
<span id="id5" class="expando" onmouseover = "d5.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d5.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d6"></span>
<span id="id6" class="expando" onmouseover = "d6.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d6.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d7"></span>
<span id="id7" class="expando" onmouseover = "d7.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d7.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d8"></span>
<span id="id8" class="expando" onmouseover = "d8.innerHTML = '<img src='+event.target.src+'>'"  onmouseout="d8.innerHTML = ''"></span>
</div>
<span id="next" onmouseover="dec()" onmouseout="dec1()"><img src="http://www.sdws.ru/pictures/next.png" style="cursor:pointer" width="10" height="13"></span>
</center>
<!--Прокрутка картинок в карусели
//Сюда же ставим ссылки на картинки и ссылки на сайты-->
<script type="text/javascript">
var arr= [
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',
 '<a href="http://адрес форума" target=_blank title="альтернативный текст"><img src="http://ссылка на картинку" class="expando" border="0" width= "88"  height= "31"></a>',] 
 circularList={name:arr[0]};
 circularList.next=circularList;
 circularList.prev=circularList;
 
for(var i=1;i<arr.length;i++){
  circularList ={name:arr[i],prev:circularList,next:circularList.next};
  circularList.next.prev=circularList ;
  circularList.prev.next=circularList ;
}
// количество видимых элементов в карусели
var citycount = 9;
var it = 0;
 function print(){
   var point=circularList;
   for(var i =0;i<citycount ;i++){
       document.getElementById("id"+i).innerHTML = point.name + "&nbsp;&nbsp;";
       point=point.next;
   }
 }
 function dec(){
   circularList=circularList.prev;
	timeoutdec=setTimeout(dec , 500)
   print();
 } 
 function dec1(){
 clearTimeout(timeoutdec)
 }
 function inc(){
   circularList=circularList.next;
	timeoutinc=setTimeout(inc , 500)
   print();
 }
 function inc1(){
 clearTimeout(timeoutinc)
 }
print();
</script>

<style type="text/css">
#pun-navlinks .container{
display: none;
}
</style>

<script type="text/javascript">
var images = new Array();
 
function preloadImages(){
    for (i=0; i < preloadImages.arguments.length; i++){
         images[i] = new Image();
        images[i].src = preloadImages.arguments[i];
    }
}
 
preloadImages("files/three_1.png", "files/three_1a.png", "files/arrow_over.png");
 
cdgHover = function() {
        var cssRule;
        var newSelector;
        for (var i = 0; i < document.styleSheets.length; i++)
                for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
                        {
                        cssRule = document.styleSheets[i].rules[x];
                        if (cssRule.selectorText.indexOf("LI:hover") >= 0)
                        {
                                 newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
                                document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
                        }
                }
        var getElm = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<getElm.length; i++) {
                getElm[i].onmouseover=function() {
                        this.className+=" iehover";
                }
                getElm[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" iehover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", cdgHover);

</script>

<div class='nav'>
 <ul id='nav'>
   <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 1</strong></span></a>
      <ul class='sub'>
	     <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 1</strong></a>
           <ul>  
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
	          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>  
   </ul>
           </li>
 <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
           <ul>
	          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>	  
   </ul>
           </li>
 <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 3</strong></a>
           <ul>                                  
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
	          <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>	  
   </ul>
          </li>
  	   </ul>
    </li>	   
   <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span class='down'><strong>Меню. Кнопка 2</strong></span></a>
      <ul class='sub'>
	     <li><a href='Ваша ссылка' ><strong>Меню первого уровня. 1</strong></a></li>
         <li><a href='Ваша ссылка' class='fly'><strong>Меню первого уровня. 2</strong></a>
      <ul>
	    <li><a href='Ваша ссылка'><strong>Меню второго уровня. 1</strong></a></li>
<li><a href='Ваша ссылка'><strong>Меню второго уровня. 2</strong></a></li>
<li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 3</strong></a>
   <ul>
	          <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 1</strong></a></li>
      <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 2</strong></a></li>
	  <li><a href='Ваша ссылка'><strong>Меню третьего уровня. 3</strong></a></li>	  
   </ul>
                 </li>      
<li><a href='Ваша ссылка' class='fly'><strong>Меню второго уровня. 4</strong></a>
   <ul>
	          <li><a href='Ваша ссылка' class='fly'><strong>Меню третьего уровня. 1</strong></a>
	    <ul>
    <li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 1</strong></a></li>
	<li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 2</strong></a></li>
	<li><a href='Ваша ссылка'><strong>Меню четвертого уровня. 3</strong></a></li>
</ul>
</li>
      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 3</strong></a></li>
                      <li><a href='Ваша ссылка'><strong>Меню второго уровня. 4</strong></a></li>	  
   </ul>
                 </li>
	  </ul> 
  </li>
  <li><a href='Ваша ссылка' ><strong>Меню первого уровня. 3</strong></a></li>
	   </ul>
    </li>	
   <li class='top'><a href='Ваша ссылка' id='' class='top_link'><span><strong>Меню. Кнопка 2</strong></span></a></li>
    </ul>
</div>

<style type="text/css">
/*------------------------------- Меню ------------------------------------*/
#nav {width: 100%; top:0; left:0; padding:0; margin: 0; list-style:none; height:35px; background:transparent url(http://s2.uploads.ru/Vgpzo.png) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#D1EEEE; text-decoration:none; font-size:18px; font-weight:normal; padding: 0 0 0 4px; cursor:pointer; background: url(http://s2.uploads.ru/Vgpzo.png);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/Vgpzo.png) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://s2.uploads.ru/vObBI.png) no-repeat right top;}
 
#nav li:hover a.top_link,
#nav li.iehover a.top_link {color:#fff; background: url(http://s3.uploads.ru/JvITO.png) no-repeat; cursor:pointer;}
#nav li:hover a.top_link span,
#nav li.iehover a.top_link span {background: url(http://s3.uploads.ru/JvITO.png) no-repeat right top; cursor:pointer;}
#nav li:hover a.top_link span.down,
#nav li.iehover a.top_link span.down {background: url(http://s2.uploads.ru/qQOKD.png) no-repeat right top; cursor:pointer;}
 
/* Моделирование списка по умолчанию */
 
#nav li:hover {position:relative; z-index:200; cursor:pointer;}
 
#nav li:hover ul.sub
{left:1px; top:35px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; height:auto; z-index:300; cursor:pointer;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:245px; font-weight:normal; cursor:pointer;}
#nav li:hover ul.sub li a
{display:block; font-size:12px; height:18px; width:242px; line-height:18px; text-indent:5px; color:#ccc; text-decoration:none; border:1px solid #1F242B; cursor:pointer;}
#nav li ul.sub li a.fly
{background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; cursor:pointer;}
#nav li:hover ul.sub li a:hover
{background:#607B8B; color:#000; border-color:#fff; cursor:pointer;}
#nav li:hover ul.sub li a.fly:hover
{background:#68838B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#fff; cursor:pointer; left:1px;}
 
 
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:245px; top:-4px; background: #1F242B; padding:3px; border:1px solid #000; white-space:nowrap; width:245px; z-index:400; height:auto;}
 
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#607B8B url(http://s2.uploads.ru/YMr8N.png) 229px 6px no-repeat; color:#000; border-color:#fff;}
 
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#1F242B url(http://s3.uploads.ru/kzSlM.png) 229px 6px no-repeat; color:#ccc; border-color:#fff; border:1px;}
</style>

<!--Рейтинг-->
<script type="text/javascript">
$(document).ready(function(){
$('#pun').find('#userhero').map(function(){ 
$('#heroes').tipsy({live: true,gravity: 'e',fade: true});
$.get('/userlist.php?username=&show_group=-1&sort_by=respect','',processRespect);
function processRespect(data){
$(data).find('div.usertable tbody tr:lt(5)').each(function(){  
var JUser=$(this).find('span.usersname').text();
var ulink=$(this).find('span.usersname a').attr('href');
var UsId=ulink.slice(ulink.indexOf('id=')+3);
var UsPlus=$(this).find('td.tc3:first').text();
var numPlus=Number(UsPlus)/2;
$.get('/profile.php?section=avatar&id='+UsId,'',GetImg);
function GetImg(data) {
$(data).find('td#profile-left li div, div.fs-box').map(function () {
var ZAva = $(this).find('img').attr('src');
if (ZAva == undefined) {ZAva = 'http://petushki-city.ru/files/0002/10/47/50167.gif'};
$('#userhero').append('<tr><td width="3%" style="padding: 0;"><a href="'+ulink+'" style="padding-left: 15px;text-decoration: none;"><img id="heroes" style="border:1px solid #696969;border-radius: 7px 0 0 7px;margin: 3px 0 -2px 5px;padding: 3px;" src="/'+ZAva+'" width="26" height="26" original-title="'+JUser+'"></a></td></td><td><h1 style="background:#FF8C00;border-radius: 0 9px 9px 0;box-shadow: 20px 0 15px #40310A inset;color: #fff;font-size: 1em;font-weight: bold;height: 20px;margin-top: 2px;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );width:'+numPlus+'px !important;">&nbsp;'+UsPlus+'&nbsp;</h1></td></tr>'); 
});};});};});});
</script>
<table id="userhero" cellpadding="0" cellspacing="0" ></table>

<!--Рейтинг-->
<script type="text/javascript">
$(document).ready(function(){
$('#pun').find('#userhero').map(function(){ 
$('#heroes').tipsy({live: true,gravity: 's',fade: true});
$.get('/userlist.php?username=&show_group=-1&sort_by=respect','',processRespect);
function processRespect(data){
$(data).find('div.usertable tbody tr:lt(5)').each(function(){  
var JUser=$(this).find('span.usersname').text();
var ulink=$(this).find('span.usersname a').attr('href');
var UsId=ulink.slice(ulink.indexOf('id=')+3);
var UsPlus=$(this).find('td.tc3:first').text();
$.get('/profile.php?section=avatar&id='+UsId, '',GetImg);
function GetImg(data) {
$(data).find('td#profile-left li div, div.fs-box').map(function () {
var ZAva = $(this).find('img').attr('src');
if (ZAva == undefined) {ZAva = 'http://petushki-city.ru/files/0002/10/47/50167.gif'};
$('#userhero').append('<li style="display: inline-block;padding: 5px;text-align: center;"><a href="'+ulink+'" style="text-decoration: none;"><figure><img id="heroes" style="border:1px solid #696969;border-radius: 7px 7px 7px 7px;" src="/'+ZAva+'" width="52" height="52" original-title="'+JUser+'"><figcaption style="background:#99CC33;border-radius: 0 0 7px 7px;box-shadow: 0 0 10px #40310A inset;color: #fff;font-size: 1em;font-weight: bold;height: 20px;margin-top: -20px;position: relative;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2 );">'+UsPlus+'</figcaption></figure></a></li>'); 
});};});};});});
</script>
<ul id="userhero"></ul>