Элемент top в шапке шаблона

помогите Пожалуйста, я вот создала шаблон в css , доделываю шапку, на данный момент шапка выглядит так:



но хочется, чтобы этот визуальный рулончик был тоже на палочке, чтобы выглядывали концы и было так:



Шапка состоит из 2 разных элементов

1. #header {

height: 100px;
background: #CC3333 url(../images/logo.jpg) 0 0 no-repeat;
position:relative;
}


и

#top {
background: #2c3740 url(../images/topmenu.gif) repeat-y 50% 0;
font-weight: bold;
border:0;
margin:0;
padding:0;
width:100%;
height: 45px;
}



Подскажите пожалуйста, кто разбирается, что надо поменять в теге #top {}, чтобы кончики были видны, а то уже все испробывала никак не хотят вылазить.

Ссылка на сайт: http://devel.gamesrv.org/anabella/

 

Вот что у меня получилось:


Как:

Код (CODE):

1. #top {
2. background: url(topmenu.gif) repeat-y 50% 0;
3. font-weight: bold;
4. border:0;
5. margin:0 0 0 -64px;
6. padding:0;
7. width:1078px;
8. height: 45px;
9. }
10.  
11. #wrap {
12. width: 953px;
13. text-align:left;
14. margin:0 auto;
15. }

Вот надо подогнать либо картинку, либо ширину страницы. Крутить цифры 953px, и -64px;

 

спасибо, помогло, код выглядит так:

#top {
background: #2c3740 url(../images/topmenu.gif) repeat-y 50% 0;
font-weight: bold;
border:0;
margin:0 -60px;
padding:0;
width:1078px;
height: 45px;
}



но, почему прозрачные концы стали темным фоном, что исправить надо и почему так?

 

это цвет background: #2c3740 дал такое потемнение, надо его удалить. Картинка там gif прозрачная, так что все будет хорошо

 

все, я разобралась, спасибо)))