<script src="js/jquery.min.v1.4.2.js"></script>

<style type="text/css">
a {
outline: none;
}

#help {
display: block;
font-size: 12px;
position: fixed;
right: 0;
top: 250px;
width: 279px;
z-index: 5;
font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
}

#help img{
border: 0px;
}

#help-panel {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
display: none;
float: right;
width: 240px;
}

#help-panel .collapse {
display: none;
float: left;
padding: 15px 10px;
font-size: 12px;
line-height: 15px;
}

#help-panel .collapse a {
font-size: 11px;
color: black;
text-decoration: underline;
font-size: 12px;
}

#support-header {
background: url("/plugins/helper/images/24-7-bg.gif") repeat-x scroll 0 0 transparent;
height: 17px;
padding: 2px 0 0 10px;
}

#help-panel .main {
background: url("/plugins/helper/images/item-bg.gif") repeat-x scroll 0 0 transparent;
float: left;
height: 37px;
width: 240px;
}

#help-panel a.title {
background: url("/plugins/helper/images/but-right.gif") no-repeat scroll 10px 15px transparent;
color: #444;
display: block;
font-weight: bold;
padding: 12px 10px 12px 22px;
font-size: 12px;
}

#help-panel a.title span {
color: #666;
display: block;
font-weight: bold;
font-size: 12px;
}

#help-panel a.selected {
background: url("/plugins/helper/images/but-down.gif") no-repeat scroll 10px 15px transparent;
}

#help a {
text-decoration: none;
}

#help-button {
float: right;
}

</style>

<div id="help">

<div id="help-panel" style="display: none;">

<!-- Блок перехода к форме заказа -->
<div class="main"><a class="title" title="Перейти к форме заказа" href="#zakaz">Перейти к форме заказа</a></div>


<!-- Блок перехода к частым вопросам -->
<div class="main"><a class="title" title="Частые вопросы" href="#faq_block">Частые вопросы</a></div>


<!-- Блок телефонов -->
<div class="main"><a class="title" href="javascript:void(0);">Телефоны</a></div>
<div class="collapse">
<strong>8-911-301-0-987</strong><br />
ПН-ПТ с 9.00 до 17.00,<br />
СБ с 10.00 до 15.00,<br />
ВС - выходной,<br />
время указано московское.

</div>


<!-- Блок службы поддержки -->
<div class="main"><a class="title" href="javascript:void(0);">Служба поддержки</a></div>
<div class="collapse">
<a href="http://www.evgeniypopov.ru/index.php?_m=knowledgebase&_a=view" target="_blank">Ответы на частые вопросы</a><br />
<a href="http://www.evgeniypopov.ru/index.php?_m=tickets&_a=submit" target="_blank">Задать свой вопрос</a>
</div>

</div>

<a id="help-button" href="javascript:void(0);"><img alt="" src="/plugins/helper/images/button.png"/></a>

</div>

<script type="text/javascript">
$(function(){

var current_index = null;

$('#help-button').click(function(){
$('#help-panel').toggle(300);
});


$('a.title').click(function(){

if(current_index != $('a.title').index(this)){
$('.collapse:visible').slideUp(500);
$('a.title').removeClass('selected');
}

if($(this).parent().next().attr('class') == 'collapse'){

if($(this).parent().next().is(":hidden")){
$(this).addClass('selected');
} else if($(this).parent().next().is(":visible")) {
$(this).removeClass('selected');
}
$(this).parent().next().slideToggle(500);
}

current_index = $('a.title').index(this);
});
});
</script>