/* FEUILLE DE STYLE CSS pour le FRONT-OFFICE */



/*------------------------------------------------------------------------------------
                Mise en page générale
------------------------------------------------------------------------------------*/

html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,div
{
    padding : 0;
    margin : 0;
}


html,body
{
    font-size : 0.9em;
    font-family : arial,helvetica,verdana,sans-serif;
    background-color : rgb(169,27,25);
}


a
{
    color : #000;
    text-decoration : none;
}


img
{
    border : none;
}



.rouge
{
    color : rgb(169,27,25);
}

.titre
{
    text-align : left;
    text-indent : 20px;
    font-weight : bold;
    border-bottom : 2px solid rgb(169,27,25);
    margin-bottom : 10px;
}


.intro
{
    text-indent : 20px;
    font-weight : normal;
    margin-bottom : 10px;
    text-align : justify;
}



.petite_info
{
    font-size : 0.8em;
    font-style : italic;
}


.succes
{
    color : #009900;
    font-weight : bold;
}

.erreur
{
    color : red;
    font-weight : bold;
}


/*------------------------------------------------------------------------------------
                Mise en page des éléments du bandeau (bannière) supérieur
------------------------------------------------------------------------------------*/

#banniere
{
    background-color : #FFF;
}


#logo
{
    width : 298px;
    height : 88px;
    background-color : #FFF;
}



#langues
{
    position : absolute;
    top : 10px;
    right : 170px;
    font-weight : bold;
    color : #000;
    float : right;
    background-color : #FFF;
}

#langues a
{
  padding-right : 20px;
}

#langues a:hover
{
    text-decoration : underline;
}


#player
{
    position : absolute;
    top : 40px;
    right : 110px;
    height : 38px;
    background-color : #FFF;
}



#deco_plante
{
    position : absolute;
    right : 0px;
    top : 0px;
    width : 88px;
    height : 106px;
    background-image : url("../../images/front/fleur_droite.gif");

}


/*------------------------------------------------------------------------------------
                Mise en page des éléments du menu horizontal
------------------------------------------------------------------------------------*/


#deco_petite_fleur
{
    position : absolute;
    top : 90px;
    left : 20px;

    width : 40px;
    height : 41px;
    background-image : url("../../images/front/petite_fleur.gif");
}


#menu_top
{
    clear : both;
    background-color : #000;
    text-align : right;
    border-top : 3px solid rgb(169,27,25);
}



#menu_top a
{
    text-transform : uppercase;
    color : #FFF;
    font-weight : bold;
}


#menu_top ul
{
    padding : 7px 80px 7px 0px;
}


#menu_top li
{
    display : inline;
    padding-right : 15px;
}


/*------------------------------------------------------------------------------------
                Mise en page de l'affichage de l'utilisateur connecté
------------------------------------------------------------------------------------*/

#etiquette_user
{
    position : absolute;
    right : 0px;
    top : 129px;
    width : 400px;
    height : 40px;
    color : #000;
    text-align : right;

}

#etiquette_user a
{
    color : rgb(169,27,25);
}


#etiquette_user a:hover
{
    text-decoration : underline;
}

span.texte
{
    background-color : rgb(235,220,177);
    padding : 2px 10px;
}


/*------------------------------------------------------------------------------------
                Mise en page des éléments du menu vertical
------------------------------------------------------------------------------------*/


#colonne_left
{
    width : 30%;
    background-color : rgb(169,27,25);
    float :left;
    padding-top :10px;
}


#colonne_left a:hover
{
    color : #FFF;
}


#menu_left li.categ
{
    font-size : 1em;
    font-weight : bold;

    margin-bottom : 5px;
    padding-bottom : 5px;

    list-style-image : url("../../images/front/puce_liste_categories.gif");
    list-style-position : inside;
    border-bottom : 2px solid black;
}

#menu_left li.categ a
{
    color : rgb(199,234,10);
}

#menu_left li.categ a:hover
{
    color : #FFF;
}


#menu_left li.sous_categ
{
    font-size : 1em;
    font-weight : bold;

    margin-bottom : 5px;
    padding-bottom : 5px;

}


#grande_plante_left
{
    width : 202px;
    height : 301px;
    background-image : url("../../images/front/grande_plante_left.gif");
}


#contenu
{
    background-color : rgb(169,27,25);
    background-image : url("../../images/front/plante_droite.gif");
    background-repeat : no-repeat;
    background-position : right top;
    float : right;
    width : 66%;
    height : 475px;
    padding : 0px 5px 10px 0px;
    margin-left : 20px;

}

html>body>#contenu
{
    min-height : 475px;
    height : auto;
}

/*------------------------------------------------------------------------------------
               Adexos
------------------------------------------------------------------------------------*/

#adexos
{
    background-color : rgb(169,27,25);
    text-align : right;
    clear : both;
    width : 100%;
    height : 42px;
}



/*-----------------------------------------------------------------------------
                Styles des BOUTONS
-----------------------------------------------------------------------------*/


.bouton_retour
{      
    text-align : left;
    width : 49%;
    float : left;
}


.bouton_continuer
{   
    text-align : right;
    width : 49%;
    float : right;
}


.boutons
{
    clear : both;
    margin : 20px;
    text-align : center;
}



/*-----------------------------------------------------------------------------
                Styles des FORMULAIRES
-----------------------------------------------------------------------------*/


.form_row
{
    clear : both;
    padding-top : 5px;
}


.label
{
    display : inline;
    float: left;
 	width: 35%;
 	text-align: right;
 	margin-right : 20px;
}

.champ
{
    float: right;
 	width: 59%;;
 	text-align: left;
}


.requis
{
    color : rgb(169,27,25);
    font-weight : bold;
}


.fieldset
{
    margin : 20px 0;
    padding : 10px;
}

.legend
{
    color : rgb(169,27,25);
    font-weight : bold;
}



/*-----------------------------------------------------------------------------
 Cette partie de la feuille de style CSS génère l'onglet présent sur l'encadré
 du contenu
-----------------------------------------------------------------------------*/


#onglet
{
    padding : 30px 0 0 0;
}


#onglet #onglet_left
{
    background-image : url("../../images/front/onglet_left.gif");
    width : 7px;
    height : 21px;
    float : left;
}


#onglet #onglet_center
{
    background-image : url("../../images/front/onglet_center.gif");
    background-repeat : repeat-x;
    text-align : center;
    font-weight : bold;
    height : 17px;
    padding : 2px 0;
    width : auto;
    float : left;
}


#onglet #onglet_right
{
    background-image : url("../../images/front/onglet_right.gif");
    width : 8px;
    height : 21px;
    float : left;
}



/*-----------------------------------------------------------------------------
 Cette partie de la feuille de style CSS génère le menu de navigation
 de la partie COMPTE CLIENT (CUSTOMER ACCOUNT).
-----------------------------------------------------------------------------*/


#onglet ul
{
    list-style-type : none;
}


#onglet li
{
    display : inline;
    border-right : 1px solid #000;
    padding : 0 8px;
    margin : 5px 0;
}

#onglet .lastLi
{
    border-right : none;
}


#onglet li a
{
    text-decoration : none;
}

#onglet a:hover
{
    color : rgb(169,27,25);
    text-decoration : underline;
}




/*-----------------------------------------------------------------------------
                Styles du MAIN_CADRE
-----------------------------------------------------------------------------*/


#main_cadre
{
    clear : both;
    width : 90%;
    padding : 10px;
    background-color : #FFF;
    background-image : url("../../images/front/cadre_liste_produits.gif");
}

#main_cadre a
{
    text-decoration : none;
    color : rgb(169,27,25);
}


#main_cadre a:hover
{
    text-decoration : underline;
}



/*-----------------------------------------------------------------------------
 Cette partie de la feuille de style CSS génère le cadre de loi de protection
 des données personnelles de l'utilisateur.
-----------------------------------------------------------------------------*/

.loi_donnees_persos
{
    margin-top : 10px;
    background-color : #FFF;
    clear : both;
    width : 90%;
    padding : 10px;
    font-weight : normal;
    font-style : italic;
    font-size : 0.9em;
}

.loi_donnees_persos a
{
    color : rgb(169,27,25);
}

.loi_donnees_persos a:hover
{
    text-decoration : underline;
}