div.carousel
{
    position: relative;
    float: left;
    height: 80px;
    width: 390px;
    margin-top: 10px;
   overflow: hidden;
}

#viewport
{
    width: 390px; /* Defines the size of the visible part of the carousel 		Attention : if you only want to see plain items in the viewport, 		the width of the viewport should take into account of : 		- the items width 		- the right and left padding of items 		- the number of items you want to see in the viewport 	 */
    overflow: hidden; /* Hides extra elements, those outside the viewport area */
}
#viewport ul
{
    position: relative; /* Enables positionning of elements inside viewport */
    padding: 0; /* Resets default - User Agent - style */
}
#viewport li.resultItem
{
    width: 55px; /* Defines the size of inner element */
    height: 50px;
    float: left; /* Places list items side by side*/
    list-style: none; /* Resets default - User Agent - style */ /* Cosmetic */
    margin: 0 1px;
    padding: 10px;  
    text-align: center;
}

#viewport .bigEmosSimpleListe  li.resultItem
{
    width: 390px!important;
    height: 50px;
    float: left; /* Places list items side by side*/
    list-style: none; /* Resets default - User Agent - style */ /* Cosmetic */
    margin: 0 1px;
    padding: 10px 0px!important;  
    text-align: center;
}

/* Cosmetic */
#simplePrevious, #simpleNext
{
    cursor: pointer;
    position: absolute;
    top: 0px;
    display: block;
    width: 24px;
    height: 80px;
    z-index: 10;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

#simplePrevious:hover, #simpleNext:hover
{
    opacity: 0.4;
    filter: alpha(opacity=40);
}

div.carousel #simplePrevious
{
    background: url(/Content/Images/Utils/previous.gif);
    left: 0px;
}


div.carousel #simpleNext
{
    background: url(/Content/Images/Utils/next.gif);
    right: 0px;
}