/* 
    Document   : familyslider
    Created on : 4 mai 2012, 02:10:25
    Author     : akambi fagbohun
    Description:
        Purpose of the stylesheet follows.
*/

/****************
* Définition des styles pour la liste des familles
******************************/

#sidebarFamily {
    position: relative;
    width: 500px;
    height: 150px;
    background: #F7F7F7;
}

#familyListe {
    position: relative;
    height: 100%;
    width: 90%;
    margin: 0 auto;
    padding: 0;
    /*overflow-x: scroll;*/ 
    overflow-x: hidden;
    overflow-y: hidden; 
    /*padding-bottom: 20px; /* pour masquer la scrollbar dans le overflow:hidden du parent */
}

#familyListe li {
    position: absolute;
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#familyListe li div {
    position: relative;
    margin: 0 auto;
}

.ie8 #familyListe li img {
    margin: 0 auto;
}

#familyListe li img {
    width: 100px;
    height: 100px;
    background: #ffffff;
    border: 1px solid #777777; 
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

#familyListe a img.opac {
    opacity: 0.65;
    -moz-opacity: 0.65;
    -khtml-opacity: 0.65;
    filter: alpha(opacity=65);
}

#familyListe a:hover img.opac, #familyListe a.activ img.opac {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
}

#familyListe a span {
    display: none;
    position: absolute;
    top: 20px;
    width: 140px;
    height: 30px;
    padding: 25px 30px;
    color: #ffffff;
    font-size: 84.6%;
    z-index: 20;
}

#familyListe a:hover span {
    display: block;
    left: 150px;
    border: 1px inset #2b2c30;
    text-align: left;
    background: #2b2c30 url("http://www.dior.com/couture/extension/dior/design/dior/_img/infobulle_left.jpg") no-repeat left center;
}

#familyListe a:hover span:hover {
    display: none;
}

#controlFamilySliderLeft, #controlFamilySliderSidebarLeft {
    left: 0;
    float:left;
    background: #F7F7F7 url("../img/left.png") center center no-repeat;
    position: absolute;
    width:22px;
    height: 48px;
    top: 35px;
}

#controlFamilySliderLeft:hover, #controlFamilySliderSidebarLeft:hover {background-color:#F7F7F7}

#controlFamilySliderRight, #controlFamilySliderSidebarRight {
    right: 0;
    float:right;
    background: #F7F7F7 url("../img/right.png") center center no-repeat;    
    position: absolute;
    width:22px;
    height: 48px;
    top: 35px;
}

#main{width:500px; margin-top:1px; margin-bottom:1px; margin-left:auto; margin-right:auto; padding:5px 5px 5px 5px;height: 120px;}