/* importation de la police à utiliser pour les petits titres */
@font-face {
font-family: 'EdoSZ';
src: url('font/edosz.eot');
src: local('EdoSZ'), local('Edo SZ'),
    url('font/edosz.woff') format('woff'),
    url('font/edosz.ttf') format('truetype'),
    url('font/edosz.svg') format('svg');
}

/*style général du site*/

html{
    height: 100%;
}

body{
    position: relative;
    margin: 0;
    font-family: Arial;
    height: 100%;
}

div#content-background{
    position: fixed;
    height: 100%;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0;
}

div#content{
    position: relative;
    width: 1000px;
    margin: auto;
}
            
div#corps{
}

    .outlined, a.tag{
        transition-duration: 0.2s;
    }
    
    .outlined:hover, a.tag:hover{
        opacity: 0.8;
        cursor: pointer;

        transition-duration: 0.1s;
    }

    .cadre, .cadre25, .cadre50, .cadre75, .cadre100{
        float: left;
        padding: 5px;
        margin: 10px 0 0 10px;
    }
    
    .cadre25{   width: 228px;}
    .cadre50{   width: 475px;}
    .cadre75{   width: 722px;}
    .cadre100{  width: 970px;}
    
        .cadre h3, .cadre25 h3, .cadre50 h3, .cadre75 h3, .cadre100 h3{
            margin: 5px 0 5px 0;
            padding: 0;

            font-size: 18px;
            font-weight: normal;
            text-align: center;
            font-family: EdoSZ;
        }

        .cadre h4, .cadre25 h4, .cadre50 h4, .cadre75 h4, .cadre100 h4{
            margin: 5px 0 5px 0;
            padding: 0;

            font-size: 18px;
            font-weight: normal;
            text-align: left;
            font-family: EdoSZ;
            
            overflow: hidden;
            text-overflow: '...';
            white-space: nowrap;
        }
        
        a.toutvoir{
            position: absolute;
            display: block;
            padding: 5px;
            opacity: 0.8;
            cursor: pointer;
            
            text-decoration: none;
            font-size: 14px;
        }
        
        a.toutvoir:hover{opacity: 1;}
        
        .cadre25 a.toutvoir{    margin-left: 165px;}
        .cadre50 a.toutvoir{    margin-left: 410px;}
        .cadre75 a.toutvoir{    margin-left: 650px;}
        .cadre100 a.toutvoir{   margin-left: 905px;}

       

    .cadre100.descr{
        height: 200px;
    }
    .cadre100.descr > div{
        padding: 0;
        text-align: justify;
    }
    .cadre100.descr > div > p{
        padding: 10px 10px 0 10px;
        margin: 0;
        
        text-indent: 20px;
    }
    
    div.cadretag{
        width: 455px;
        height: 75px;
        overflow: hidden;
        padding: 10px;
        margin-top: 15px;
        text-align: justify;
    }
    
    div.listetag{
        height: 40px;
        width: 500px;
        margin: auto;
        overflow-x: scroll;
        white-space: nowrap;
        padding: 10px 0;
    }
    
    div.listetaglibre{
        position: relative;
        padding: 10px 10px 0 10px;
        margin: auto;
        text-align: center;
    }

    a.tag, label.tag{
        display: inline-block;
        padding: 6px;
        margin: 0px 0px 12px 0px;
        
        text-decoration: none;
        font-size: 16px;
    } 

    a.load-more, a.load-separateur{
        display: block;
        width: 100%;
        float: left;
        margin-top: 10px;

        text-align: center;
        font-size: 18px;
        text-decoration: none;

        transition-duration: 0.2s;
    }
        a.load-more{height: 35px; padding-top: 10px;}
        a.load-more:hover{transition-duration: 0.1s;}
        a.load-separateur{height: 25px; padding-top: 4px;}
    
    .fluxactu{
        height: 140px;
        overflow: hidden;
    }

    .fluxactu > img{
        min-height: 110px;
        max-width: 228px;
    }
    
    div.album{
        text-align: center;
    }
    
    .album > img{
        display: inline;
        margin: 10px;
    }