#middleProduitContainer {
    width : 100%;
    height : auto;
    background-image:
    linear-gradient(
            to right,
            #D0AD47,
            #D0AD47 271px,
            #FCFCFC 271px,
            #FCFCFC 689px
    );
}

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

#rightProduitContainer {
    width : 690px;
    min-height : 600px;
    /* background-color : #FCFCFC; */
    display : inline-block;
    vertical-align : top;
    padding-bottom: 20px;
}

#switchBouton {
    font-family: Open-Sans;
    height : 60px;
    width : 100%;
    background-color : #5f6060;
    position : relative;
}

#switchBouton div {
    float : left;
    width : 50%;
    height : 100%;
    background-color : #5f6060;
    color : #FCFCFC;
    text-align : center;
    display: table;
}

#switchBouton div label {
    display: table-cell;
    vertical-align: middle;
}

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

#containerFournisseur {
    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 {
    cursor : pointer;
    text-decoration : underline;
}


.categorieCheckbox {
    float : right;
    margin-right : 6px;
    margin-top : 4px;
}

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

#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 : 58px;
}

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

#containerProduit {
    width : 100%;
    height : auto;
    margin-bottom : 60px;
}

.categorieDeProduit {
    width : 100%;
    margin-bottom : 30px;
}

.categorieDeProduitHeader {
    width : 100%;
    height : 40px;
    background-color : #5f6060;
}

.categorieDeProduitTitle {
    float : left;
    height : 100%;
    color : #FCFCFC;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size : 1.1em;
    width : 100%;
    text-align : center;
}

.categorieDeProduitTitle p {
    margin-top : 9px;
}

.fournisseurProduitHeader {
    width : 100%;
    height : 40px;
    background-color : #4B5A77;
}

.fournisseurDeProduitTitle {
    float : left;
    height : 100%;
    color : #FCFCFC;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size : 1.1em;
    width : 100%;
}

.fournisseurDeProduitTitle p {
    margin-top : 9px;
    margin-left : 15px;
}

.produitContainer {
    width : 100%;
    height : auto;
}

.produitHeader {
    width : 100%;
    height : auto;
    font-family: Open-Sans;
    font-size : 0.8em;
    color: rgb(30,30,30);
    overflow: hidden;
    position : relative;
    border-bottom : 1px solid rgb(120,120,120);
    background-color: #5f6060;
    color: #FCFCFC;
}


.produit {
    width : 100%;
    height : auto;
    font-family: Open-Sans;
    font-size : 0.8em;
    color: rgb(30,30,30);
    overflow: hidden;
    position : relative;
    border-bottom : 1px solid rgb(120,120,120);
}

.produit:nth-child(odd) {background: #E5E5E5;}
.produit:nth-child(even) {background: #FCFCFC;}

.produitTitle {
    float : left;
}

.produitTitle p {
    position : relative;
    margin-left : 10px;
    max-width : 285px;
    padding-top : 4px;
    padding-bottom : 4px;
}

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

.produitPoids {
    height : 100%;
    width : 85px;
    float : left;
    text-align : center;
    position : absolute;
    left : 310px;
    border-right: 2px solid rgb(120,120,120);
    border-left: 2px solid rgb(120,120,120);

}

.produitPoids p {
    position : relative;
    top : 50%;
    margin-top : -9px;
}


.produitPrix {
    height : 100%;
    width : 85px;
    float : left;
    text-align : center;
    position : absolute;
    left : 490px;
    border-right: 2px solid rgb(120,120,120);;

}

.produitPrix p {
    position : relative;
    top : 50%;
    margin-top : -9px;
}

.produitPrixUnitaire {
    height : 100%;
    width : 85px;
    float : left;
    text-align : center;
    position : absolute;
    left : 400px;
    border-right: 2px solid rgb(120,120,120);;

}

.produitPrixUnitaire p {
    position : relative;
    top : 50%;
    margin-top : -9px;
}


.produitQuantite {
    height : 100%;
    width : 40px;
    float : left;
    position : absolute;
    left : 580px;
    border-right: 2px solid rgb(120,120,120);;
}

.produitQuantite input {
    width : 28px;
    margin-left : 4px;
    position : relative;
    top : 15%;
    top : calc(50% - 9px);

}

.produitOption {
    height : 100%;
    width : 68px;
    float : left;
    position : absolute;
    left : 552px;
    border-right: 2px solid rgb(120,120,120);
}

.produitOption button {
    margin-left : 5px;
    position : relative;
    width : 61px;
    height : 20px;
    top : 15%;
    top : calc(50% - 9px);
}


.produitAcheter {
    height : 100%;
    width : 68px;
    float : left;
    position : absolute;
    left : 620px;
    text-align : center;
}


.produitAcheter img{
    position : relative;
    top : 45%;
    margin-top : -15px;
    width : 35px !important;
}

.produitAcheter img:hover{
    cursor : pointer;
}

.produitAcheter button {
    margin-left : 5px;
    position : relative;
    width : 61px;
    height : 20px;
    top : 15%;
    top : calc(50% - 9px);
}

#containerAdvice {
    width : 100%;
    height : 57px;
    text-align : center;
}

#containerAdvice button{
    font-family : Open-Sans;
    color : #5f6060;
    padding-top : 6px;
    padding-bottom : 6px;
    padding-left : 12px;
    padding-right : 12px;
    display : inline-block;
    margin-top : 15px;
}

.fournisseur {
    margin-bottom : 30px;
}

#consulterPanierButton {
    display : inline-block;
    background-color :#5f6060;
    border : none;
    color : #FCFCFC;
    font-family : "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size : 0.9em;
    margin-right : 40px;
    float: right;
    padding: 6px 12px;
}

#leftProduitErrorContainer {
    margin-left: 10px;
    margin-top: 12px;
    float: left;
    width: 950px;
    background-color: #FCFCFC;
    font-weight: bold;
}

#produitsPeriodeCommandesFermee, #produitsBrowserNotSupported {
    font-size: small;
    color: #ff0000;
}