/***
codes couleurs utilisés
fond           FFFFFF
texte          000000
couleur        4140C0  (bleu)   -> gris clair
couleur        D6D6D6  (gris)
couleur        808080  (gris moyen)
couleur        DFDFDF  (gris clair)


***/

/*************  HTML     *****************/
html {
margin: 0;
padding: 0;
height: 100%;
}
/*************  BODY     *****************/
body{
background-color:     #333333;
color:                #C0C0C0;
font-family:          Verdana, Tahoma, Arial, sans-serif;
font-size:            small;        /* taille de police  */
text-align:           center;
height:               100%;
}

div{
margin: 0px;
border: 0px solid white;  /* définition de bordure par defaut pour tous les blocs */
margin-left: auto;
margin-right: auto;
}

img {
border:               0;
}

/********************* link a ************************/
a:link   { text-decoration:none; }
a:visited{ text-decoration:none; }
a:hover  { text-decoration:none;font-weight:bold;}
a:active { text-decoration:none; }

a {
        color:                #000000;
        }
a.lien_menu {
        color:                #C0C0C0;
        }
a.lien_pied {
        color:                #C0C0C0;
        }
a.lien_box_titre {
        color:                #FFFFFF;
        font-weight:          bold;
        }
a.lien_box_soustitre {
        color:                #ffffff;
        }
a.lien_box {
        color:                #000000;
        }
/********************* image ************************/
img.img_annuaire {
        border:               0;
        width:                150px;
        }
/********************* header ************************/
h1{
        color:                #FFFFFF;
        font-size:            small;
        font-weight:          bold;
        display:              inline;
        margin-left:          10px;
        }
h2{
        color:                #FFFFFF;
        font-size:            small;
        font-weight:          bold;
        display:              inline;
        }
h3{
        color:                #000000;
        font-size:            small;
        font-weight:          bold;
        display:              inline;
        }
/********************* paragraphe ************************/
p {
        font-size:            small;
        text-align:           center;
}
p.contenuprincipal{
        padding:              15px;
        text-align:           justify;
        }
p.pied{
        font-size:            x-small;
        text-align:           center;
        }
p.collecte_oui{
        color:                #000000;
        display:              inline;

        }
p.collecte_non{
        color:                #FFFFFF;
        font-weight:          bold;
        display:              inline;
        }
p.collecte_remove{
        color:                #000000;
        display:              inline;
        }
p.adresse{
        padding:              15px;
        }
p.contenu_news{
        padding:              5px;
        }
p.bandeau{
        font-size:            small;
        color:                #FF8000;
        }
p.annuaire{
        font-size:            small;
        font-weight:          bold;
        }
p.boutique1{
        display:              inline;
        text-align:           center;
}
p.boutique2{
        text-align:           justify;
        padding:              15px;
}
p.boutique_prix{
        display:              inline;
        color:                #FF8000;
        font-size:            medium;
        font-weight:          bold;
        }
p.boutique_prix_barre{
        display:              inline;
        color:                #000000;
        font-size:            small;
        text-decoration:      line-through;
        }
p.boutique_prix_remise{
        display:              inline;
        color:                #000000;
        font-size:            small;
        }
p.boutique_prix_remise_xtra{
        display:              inline;
        color:                #FF0000;
        font-size:            small;
        }
p.message{
        display:              inline;
        color:                #FF0000;
        font-size:            small;
        font-weight:          bold;
        }
p.boutique_menu{
        display:              inline;
        }
p.panier_titre{
        display:              inline;
        font-weight:          bold;
        }
p.panier_texte{
        display:              inline;
        color:                #000000;
        }
p.panier_texte_manquant{
        display:              inline;
        color:                #FF0000;
        }
/***  boutons boutique et panier   ***/
p.box_titre{
        display:              inline;
        color:                #FFFFFF;
        font-size:            small;
        font-weight:          bold;
        }
p.boutique_panier{
        display:              inline;
        color:                #FFFFFF;
        font-weight:          bold;
        }
p.bouton_panier{
        display:              inline;
        color:                #FFFFFF;
        font-size:            small;
        font-weight:          bold;
        }
/********************* TABLE **************************************/
table {
        border:               0px solid;
        height:               100%;
        width:                100%;
}
td, th {
        border:               0px;
        vertical-align:       middle;
}
td.bandeau_logo {
        border:               0px solid;
        text-align:           center;
        color:                #000000;
        font-size:            small;
        font-weight:          bold;
}

/********************* structure générale ************************/
#global {
        margin: 2px auto;     /* bloc centré avec une marge en haut et en bas de 2 pixels */
        width:                1100px;
	height:               auto;
	background-color:     #000000;
	background-image:     url(../design/lignehordegradee.jpg);
	background-repeat:    repeat-y;
	}
/* BANDEAU */
#entete {
	width:                1100px;
	min-height:           140px;
	background-image:     url(../design/lignehordegradee.jpg);
	background-repeat:    repeat-y;

	}
  .entete_bandeau {
        width:                1100px;
        height:               140px;
	}
  .pixel_hor {
	width:                1100px;
        height:               5px;
        background-image:     url(pixel.jpg);
        background-repeat:    repeat-x;
        background-position:  50%
	}
/* MENU */
#menu {
        width:                1100px;
	height:               30px;
	background-image:     url(../design/lignehordegradee.jpg);
	background-repeat:    repeat-y;
	}
  .menu_gauche {
	float:                left;
        width:                500px;
	text-align:           left;
        color:                #C0C0C0;
        margin-left:          50px;
	}
/*  */
.research {
        display:              inline;
        }
/* CORPS DE PAGE contenu */
#contenu {
	width:                1100px;
	height:               auto;
	text-align:           center;
	background-image:     url(../design/lignehordegradee.jpg);
	background-repeat:    repeat-y;
	}
#gauche {
        float:                left;
	width:                180px;
        height:               auto;
        margin-left:          15px;
}
#text {
        float:                left;
	width:                710px;
	min-height:           600px;
	}
#news {
        float:                left;
	width:                180px;
        min-height:           600px;
        margin-right:         15px;
	}
/* PIED */
#pied {
	width:                1100px;
	height:               100px;
	background-image:     url(../design/lignehordegradee.jpg);
	background-repeat:    repeat-y;
	}
	
.clr {
  clear: both;
  font-size:0;
  line-height:0;
  border: 0px;
  }	
/********************* blocs dans contenu ************************/
.accueil_titre {
	width:                600px;
	height:               20px;
	background-image:     url(../design/bandeau_box_600.jpg);
	background-repeat:    no-repeat;
        background-color:     #000000;
	text-align:           left;
	color:                #FFFFFF;
	}
.accueil_text {
	width:                600px;
	height:               auto;
	background-color:     #C0C0C0;
	color:                #000000;
	background-image:     url(../design/bandeau_box_txt600x50.jpg);
	background-repeat:    no-repeat;
	text-align:           justify;
        border-top:           1px solid #FF8000;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        border-bottom:        2px solid #FF8000;
	}
.accueil_img {
        width:                150px;
        float:                left;
	background-color:     #C0C0C0;
	margin-top:           15px;
	margin-left:          15px;
	}
/*********** news **************/
.news_titre {
	width:                120px;
	height:               20px;
        background-image:     url(../design/bandeau_box_120.jpg);
	background-repeat:    no-repeat;
	background-color:     #000000;
	color:                #FFFFFF;
	}
.news_text {
	width:                120px;
	height:               auto;
	background-image:     url(../design/bandeau_box_txt120x50.jpg);
	background-repeat:    no-repeat;
	background-color:     #C0C0C0;
        border-top:           1px solid #FF8000;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        border-bottom:        2px solid #FF8000;
	}
.news_img {
	margin-top:           5px;
	}
/*** Pictures             ***/
/* les petites images  */
.pic          {left: 1px; top: 0px;  position: relative; }
/* les grandes images non encore agrandies  */
.pic a .large {left: -1px; top: -1px; position: absolute; width: 0px; height: 0px; border: 0; display: block;}
 /* les petites images  */
.pic a img    { border: 0px solid #4140C0; }


/* les petites images quand les grandes apparaissent  */
.pic a.p2, .pic a.p2:visited {left: 0;     top: 0;    border: 0px solid #000000; display: block; position: relative;  }
/* les petites images quand les grandes apparaissent */
.pic a.p2:hover              {text-decoration: none; }
/* les grandes images affichées */
.pic a.p2:hover .large       {left: -25px; top: -205px; border: 1px solid #ff8000; display: block; position: absolute; width:200px; height:200px; }

/************   *************/
.box_message_titre {
	width:                120px;
	height:               20px;
	background-image:     url(../design/bandeau_box_120.jpg);
	background-repeat:    no-repeat;
        background-color:     #000000;
	color:                #FFFFFF;
	}
.box_message_text {
	width:                120px;
	height:               auto;
	background-image:     url(../design/bandeau_box_txt120x50.jpg);
	background-repeat:    no-repeat;
	background-color:     #C0C0C0;
        border-top:           1px solid #FF8000;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        border-bottom:        2px solid #FF8000;
	}
.box_flash_titre {
	width:                120px;
	height:               50px;
	background-image:     url(../design/bandeau_box_flash120.jpg);
	background-repeat:    no-repeat;
        background-color:     #000000;
	}
.box_boutique {
	width:                120px;
	height:               40px;
	background-image:     url(../design/shopcr.jpg);
	background-repeat:    no-repeat;
	vertical-align:       middle;
	color:                #FFFFFF;
	}
.annuaire_titre {
	width:                600px;
	height:               auto;
        background-image:     url(../design/bandeau_box_600.jpg);
        background-repeat:    no-repeat;
	background-color:     #000000;
	text-align:           left;
	}
.annuaire_img {
        width:                150px;
        float:                left;
	background-color:     #C0C0C0;
	margin-top:           15px;
	margin-left:          15px;
	}
.annuaire_text {
	width:                600px;
  	min-height:           120px;
	background-image:     url(../design/bandeau_box_txt600x50.jpg);
	background-repeat:    no-repeat;
	background-color:     #C0C0C0;
	vertical-align:       middle;
        border-top:           1px solid #FF8000;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        border-bottom:        2px solid #FF8000;
	}
.collecte_text {
	width:                600px;
	height:               auto;
	background-color:     #C0C0C0;
	background-image:     url(../design/bandeau_box_txt600x50.jpg);
	background-repeat:    no-repeat;
	vertical-align:       middle;
        border-top:           1px solid #FF8000;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        border-bottom:        2px solid #FF8000;
	}
.boutique {
	width:                670px;   /*plus grand que 600px carge marges...  */
	height:               auto;
	}
.message {
	width:                600px;
	height:               auto;
	background-image:     url(../design/bandeau_box_txt600x50.jpg);
	background-repeat:    no-repeat;
	background-color:     #C0C0C0;
	border:               1px solid;
	border-color:         #FF8000;
	}
.message_resrecherche {
	width:                620px;    /*Plus grand car contient des boite de 600px le large */
	height:               auto;
	border:               1px solid;
	border-color:         #FF8000;
	}
.bondecde {
	width:                600px;
	height:               auto;
	background-color:     #ffffff;
	border:               1px solid;
	border-color:         #000000;
	}

/*****   boutique, affichage des articles par 3 de large   *****/	
.boutique_enveloppe {
        float:                left;
        width:                200px;
        height:               220px;
        margin:               5px;
        padding:              5px;
        }
.boutique_titre {
        width:                200px;
        height:               20px;
        background-image:     url(../design/bandeau_box_200.jpg);
        background-repeat:    no-repeat;
        background-repeat:    no-repeat;
        background-color:     #000000;
        color:                #FFFFFF;
        }
.boutique_text {
        color:                #000000;
        background-color:     #C0C0C0;
        width:                200px;
        height:               200px;
	background-image:     url(../design/bandeau_box_txt200x50.jpg);
	background-repeat:    no-repeat;
        border-top:           1px solid #FF8000;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        border-bottom:        2px solid #FF8000;
        }
/*****   boutique extras, affichage des articles par 6 de large   *****/
.boutique_extras {
        width:                648px;    /* pour afficher 6 sur la largeur   */
	height:               125px;
	}
.boutique_enveloppe_x {
        float:                left;
        width:                100px;
        height:               125px;
        margin:               2px;
        padding:              2px;
        }
.boutique_enveloppe_xr {
        width:                100px;
        height:               125px;
        margin:               2px;
        padding:              2px;
        }
.boutique_titre_x {
        width:                100px;
        height:               15px;
        background-image:     url(../design/bandeau_box_100.jpg);
        background-repeat:    no-repeat;
        background-color:     #000000;
        color:                #FFFFFF;
        font-size:            x-small;
        font-weight:          bold;
        }
.boutique_text_x {
        color:                #000000;
        background-color:     #C0C0C0;
       	background-image:     url(../design/bandeau_box_txt100x50.jpg);
	background-repeat:    no-repeat;
        width:                100px;
        height:               105px;
        border-top:           1px solid #FF8000;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        border-bottom:        2px solid #FF8000;
        }
/*****   boutique, affichage d'un seul article   *****/
.boutique_article_titre {
        width:                500px;
        height:               20px;
        background-image:     url(../design/bandeau_box_500.jpg);
        background-repeat:    no-repeat;
        background-color:     #000000;
        color:                #FFFFFF;
        font-weight:          bold;
        }
.boutique_article {
        color:                #000000;
        background-color:     #C0C0C0;
        width:                500px;
        height:               auto;
       	background-image:     url(../design/bandeau_box_txt500x50.jpg);
	background-repeat:    no-repeat;
        border-top:           1px solid #FF8000;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        text-align:           center;
        }
 .boutique_article_texte {
        color:                #000000;
        background-color:     #C0C0C0;
        width:                500px;
        height:               auto;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        }
  .boutique_article_fintexte {
        color:                #000000;
        background-color:     #C0C0C0;
        width:                500px;
        height:               auto;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        border-bottom:        2px solid #FF8000;
        text-align:           center;
        }
/*****   Le panier   *****/
.panier_titre {
        width:                500px;
        height:               20px;
        background-image:     url(../design/bandeau_box_500.jpg);
        background-repeat:    no-repeat;
        background-color:     #000000;
        color:                #FFFFFF;
        font-weight:          bold;
        }
.panier_entetes {
        background-color:     #333333;
        color:                #FFFFFF;
        font-weight:          bold;
        }
.panier_article {
        color:                #000000;
        background-color:     #C0C0C0;
        width:                500px;
        height:               auto;
        border-top:           1px solid #FF8000;
        border-left:          1px solid #FF8000;
        border-right:         2px solid #FF8000;
        border-bottom:        2px solid #FF8000;
        }
.payer {
        width:                400px;
	height:               auto;
        }
.payer_paypal {
        float:                left;
        width:                180px;
	height:               107px;
	color:                #000000;
	font-size:            small;
	font-weight:          bold;
	}
.payer_cheque {
        float:                right;
        width:                180px;
	height:               107px;
	color:                #000000;
	font-size:            small;
	font-weight:          bold;
	}
/************  ETAPES PANIER ***/
.etape_global {
        width:                450px;
        height:               30px;
        }
.etape_texte {
        float:                right;
        width:                100px;
        height:               30px;
        }
.etape_1oui {
        float:                left;
        width:                150px;
        height:               30px;
        background-image:     url(../design/etape1.jpg);
        background-repeat:    no-repeat;
        color:                #000000;
        }
.etape_2oui {
        float:                left;
        width:                150px;
        height:               30px;
        background-image:     url(../design/etape2.jpg);
        background-repeat:    no-repeat;
        color:                #000000;
        }
.etape_3oui {
        float:                left;
        width:                150px;
        height:               30px;
        background-image:     url(../design/etape3.jpg);
        background-repeat:    no-repeat;
        color:                #000000;
        }
.etape_1non {
        float:                left;
        width:                150px;
        height:               30px;
        background-image:     url(../design/etape1no.jpg);
        background-repeat:    no-repeat;
        color:                #000000;
        }
.etape_2non {
        float:                left;
        width:                150px;
        height:               30px;
        background-image:     url(../design/etape2no.jpg);
        background-repeat:    no-repeat;
        color:                #000000;
        }
.etape_3non {
        float:                left;
        width:                150px;
        height:               30px;
        background-image:     url(../design/etape3no.jpg);
        background-repeat:    no-repeat;
        color:                #000000;
        }
/************  FORMULAIRES ***/
.champs {
        background:           #FFFFFF;
        color:                #000000;
        border:               1px solid #FF8000;
        }
.champs:hover, 
.champs:focus {
        background:           #C0C0C0;
        border:               1px solid #FF8000;
        }
.bouton {
        background:           #333333;
        color:                #FFFFFF;
        font-weight:          bold;
        border:               2px solid #333333;
        border-bottom-color:  #ff8000;
        border-right-color:   #ff8000;
        cursor:               pointer;
        }
.bouton_payer {
        width:                180px;
        font-weight:          bold;
        border:               0px solid;
        cursor:               pointer;
        }
.bouton:hover {
        background:           #333333;
        color:                #ffffff;
        font-weight:          bold;
        border:               2px solid #333333;
        border-bottom-color:  #ff8000;
        border-right-color:   #ff8000;
        cursor:               pointer;
        }
.bouton:focus { 
        background:           #333333;
        color:                #ffffff;
        font-weight:          bold;
        border:               2px solid #333333;
        border-bottom-color:  #ff8000;
        border-right-color:   #ff8000;
        cursor:               pointer;
        }
.etiquette {
        background:           #C0C0C0;
        color:                #000000;
        font-weight:          bold;
        cursor:               pointer;
        }

.erreur_serveur_titre {
        width:                500px;
        height:               20px;
        background:           #333333;
        color:                #FFFFFF;
        font-size:            medium;
        font-weight:          bold;
        border:               2px solid #FFFFFF;
}
.erreur_serveur_texte {
        width:                500px;
        height:               auto;
        background:           #FFFFFF;
        color:                #333333;
        font-size:            small;
        font-weight:          bold;
        border:               2px solid #666666;
}