Помогите с оформлением менюшки на аккордионе

вопрос

Всем привет!
Хотелось сделать выдвигающийся блок с обратной связью на главной страничке. Для этого взял меню на аккордионе. В общем ее подогнал почти под свои требования, но есть несколько вопросов.
1) Белая полоска и сам блок, в котором надпись "Написать сообщение" слишком широкие, и выходят за ширину основного блока. Как ее сделать такой же ширины? Ширина основного блока 980px. И убрать белую полоску белую снизу?

Вот скрин как щас выглядит:
Помогите с оформлением менюшки на аккордионе

Помогите с оформлением менюшки на аккордионе

Вот CSS


.wrapper{
    width:980px;
    margin:30px auto;
}
.st-accordion{
    width:100%;
    min-width:270px;
    margin: 0 auto;
}
.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}
.st-accordion ul li:first-child{
    border-top:none;
}
.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 20px;
    display: block;
    position: relative;
    line-height: 100px;
    outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
    -moz-transition:  color 0.2s ease-in-out;
    -o-transition:  color 0.2s ease-in-out;
    -ms-transition:  color 0.2s ease-in-out;
    transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a span{
    background: transparent url(../images/down.png) no-repeat center center;
    text-indent:-9000px;
    width: 26px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: -26px;
    margin-top: -7px;
    opacity:0;
    -webkit-transition:  all 0.2s ease-in-out;
    -moz-transition:  all 0.2s ease-in-out;
    -o-transition:  all 0.2s ease-in-out;
    -ms-transition:  all 0.2s ease-in-out;
    transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
    color: #1693eb;
}
.st-accordion ul li > a:hover span{
    opacity:1;
    right: 10px;
}
.st-accordion ul li.st-open > a{
    color: #1693eb;
}
.st-accordion ul li.st-open > a span{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);
    right:10px;
    opacity:1;
}
.st-content{
    padding: 5px 0px 30px 0px;
}
.st-content p{
    font-size:  16px;
    font-family:  Georgia, serif;
    font-style: italic;
    line-height:  28px;
    padding: 0px 4px 15px 4px; 
}
.st-content img{
    width:125px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}
@media screen and (max-width: 320px){
    .st-accordion ul li > a{
        font-size:36px;
    }
}

2) Когда открывается блок, то отображается только форма, а теги движка почему то на значения не подменяются. Если зайти так: index.php?do=feedback то все работает. Как починить?

Скрин:
Помогите с оформлением менюшки на аккордионе

HTML


        <div class="container">

            <div class="wrapper">
                <div id="st-accordion" class="st-accordion">

                    <ul>
                <li>
                            <a href="#">Написать сообщение<span class="st-arrow">Открыть или закрыть</span></a>
                            <div class="st-content">
    <table class="tableform">
    [not-logged]
        <tr>
            <td class="label">
                Ваше имя:<span class="impot">*</span>
            </td>
            <td><input type="text" maxlength="35" name="name" class="f_input" /></td>
        </tr>
        <tr>
            <td class="label">
                Ваш E-Mail:<span class="impot">*</span>
            </td>
            <td><input type="text" maxlength="35" name="email" class="f_input" /></td>
        </tr>
    [/not-logged]
        <tr>
            <td class="label">
                Кому:<span class="impot">*</span>
            </td>
            <td>{recipient}</td>
        </tr>
        <tr>
            <td class="label">
                Тема:<span class="impot">*</span>
            </td>
            <td><input type="text" maxlength="45" name="subject" class="f_input" /></td>
        </tr>
        <tr>
            <td class="label" valign="top">
                Сообщение:
            </td>
            <td><textarea name="message" style="width: 380px; height: 160px" class="f_textarea" /></textarea></td>
        </tr>
        [sec_code]<tr>
            <td class="label">
                Введите код:<span class="impot">*</span>
            </td>
            <td>
                <div>{code}</div>
                <div><input type="text" maxlength="45" name="sec_code" style="width:115px" class="f_input" /></div>
            </td>
        </tr>[/sec_code]
    </table>
    <div class="fieldsubmit">
        <button name="send_btn" class="fbutton" type="submit"><span>Отправить</span></button>
    </div>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

Ответа пока нет

Fancybox.bind("[data-highslide]", { groupAttr: 'data-highslide', idle:2000, Thumbs: false, caption: (fancybox, slide) => { if( slide.thumbEl && slide.thumbEl.alt ) { return slide.thumbEl.alt } } });

Помогите с оформлением менюшки на аккордионе

Ответа пока нет

Похожие вопросы

Вывод title под соответствующей картинкой

Не отображается модальное окно в IE 10

Картинка в javascript

Как прописать в ajax/freedback.php значение выбранное в календаре?

не работают подгруженные шрифты

Как ограничить параметр стиля?

Сначала видео потом HTML. Как?

Как сделать кнопки слайдеру?

Как перевести табличную вёрстку в html5 ?

Как правильно сделать переключение категорий?