#middleContainer {
    width : 100%;
    height : auto;
    overflow-y : auto;
    background-image:
    linear-gradient(
            to right,
            #D0AD47,
            #D0AD47 271px,
            #FCFCFC 271px,
            #FCFCFC 689px
    );
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#leftContainer {
    width : 270px;
    min-height : 600px;
    height : 731px;
    background-color : #D0AD47;
    float : left;
}

#rightContainer {
    width : 690px;
    min-height : 600px;
    background-color : #FCFCFC;
    float : left;
}

#titlePage {
    width : 100%;
    height : auto;
    border-bottom : 2px solid #5f6060;
    font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size : 2em;
    margin-top : 43px;
    color : #5f6060;
    margin-bottom : 20px;
}

#titlePage p {
    margin-left : 20px;
}

#containerBoutonsTri {
    width : 100%;
    height : 32px;
}

#containerBoutonsTri label {
    padding-bottom : 6px;
    padding-top : 6px;
    padding-right : 12px;
    padding-left : 12px;
    background-color : #4B5A77;
    font-family : Open-Sans;
    color : #FCFCFC;
    font-size : 0.9em;
}

#containerBoutonsTri label:hover {
    cursor : pointer;
}

#containerRecettes {
    width : 670px;
    margin-left : 20px;
    overflow : auto;
    margin-top : 15px;
}

.recettes {
    float : left;
    width : 140px;
    margin-right : 30px;
    margin-bottom : 25px;
}

.recettesImg {
    width : 100%;
    height : 160px;
    border : 2px solid rgb(220,220,220);
    background-image: url('../images/marmelade.jpg');
    background-size: cover;
    background-position: center;
}


.recettesImg:hover {
    cursor : pointer;
}

.nomRecette {
    font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-weight : bold;
    font-size : 0.9em;
    max-width : 95%;
    margin-left : auto;
    margin-right : auto;
    color : #4B4C4C;
    margin-top : 7px;
}

.nomRecette:hover {
    cursor : pointer;
    text-decoration : underline;
}

.preparationRecette {
    font-family : Open-Sans;
    font-weight : bold;
    font-size : 0.76em;
    max-width : 95%;
    margin-left : auto;
    margin-right : auto;
    color : #5f6060;
    margin-top : 7px;
}

.tempsRecette {
    font-family : Open-Sans;
    font-weight : bold;
    font-size : 0.76em;
    max-width : 95%;
    margin-left : auto;
    margin-right : auto;
    color : #5f6060;
    margin-top : 4px;
}


#containerCategorie {
    width : 100%;
    height : auto;
}

.categorie {
    width : 100%;
    height : auto;
    font-family: Open-Sans;
    font-size : 0.8em;
    color: rgb(240,240,240);
    overflow: auto;
}

.categorieTitle {
    float : left;
    padding-top : 4px;
    padding-bottom : 4px;
}

.categorieTitle p {
    position : relative;
    margin-left : 10px;
    max-width : 230px;
}

.categorieTitle p:hover {
    text-decoration: underline;
    cursor : pointer;
}

.categorie:nth-child(even) {background: #D0AD47;}
.categorie:nth-child(odd) {background: #B28E27;}

#containerTitleContainerCategorie {
    width : 100%;

    height : 81px;
    border-bottom : 2px solid #B28E27;
    color : rgb(248,248,248);
    font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size : 1.5em;
    text-align : center;
}

#containerTitleContainerCategorie p{
    position : relative;
    top : 28px;
    text-decoration : underline;

}