/*
Мы определили, что изображения будут величиной 150px,
следовательно элемент <li>, в котором находятся изображения, 
можно сделать чуть больше и создать тем самым дополнительные отступы.
Будем делать каждый <li> шириной 160px.
Дополнительно в области находятся плашки "Вперед" и "Назад", шириной 22px каждая.
Следовательно, вся область должна быть шириной: 160*3 + 22*2 = 524px
*/
div.slider{
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 954px;
}
    /*Строчка с общим количеством элементов
    и ссылкой 'Развернуть/Свернуть'*/
    .slider .view_all{
        clear: both;
        /*Задаем высоту элемента, 
        чтобы не было скачков при загрузке страницы*/
        height: 15px; 
    }

    /*Кнопки 'Вперед' и 'Назад'*/
    .slider a#next,
    .slider a#back{
        width: 22px;
        height: 186px;
        display: block;
        overflow: hidden;        
        text-indent: -10000em; /*Скрываем текст ссылок*/
        cursor: pointer;
        margin: 13px 0 0 0;
    }
    /*Кнопка 'Вперед' */
    .slider a#next{
        float: right;
        background: url(images/next.png) top left no-repeat;
    }
    /*Кнопка 'Назад' */
    .slider a#back{
        float: left;
        background: url(images/back.png) top left no-repeat;
       
    }
    /*Кнопка 'Вперед' при наведении*/
    .slider a#next:hover{
        background: url(images/next_h.png) top left no-repeat;
    }
    /*Кнопка 'Назад' при наведении*/
    .slider a#back:hover{
        background: url(images/back_h.png) top left no-repeat;
    }
    
    /*Основная область со слайдером
    Ширину области рассчитываем как:
    [ширина_каждого_элемента_списка] * [колво_видимых_элементов]
    160 * 3 = 480px
    */
    #image_slider{
        display: block;
        width: 910px;
        overflow: hidden;
        padding: 0; 
        position: relative;       
    }
        /*Список с изображениями*/        
        #image_slider ul{
            padding: 0;

            /*Требуется для анимации, 
             которая производится посредством 
             изменения CSS-значений 'left' и 'right'*/
             position: relative;
             left: 1px;
             
             /*Задаются для того, чтобы при загрузке страницы и ДО
             срабатывания скрипта слайдера на пользователей
             не вываливался весь табун изображений, которые сворачиваются 
             в слайдер только после того, как сработает плагин*/
             overflow: hidden; /**/
             height: 186px; 
             
             margin: 12px 0 0 0;           
        }
            /*контейнер <li>, в нутри которого находится изображение*/
            
            #image_slider ul li{
                padding: 0;
             	overflow: hidden;
                z-index: -1;
                display: block;
                float: left;
                /*width: 186px;
                height: 186px;*/
            }