/*
...........................................reset css................................................
j'ai séparé les ul+ol+li sinon je perd les puces par défaut pour les listes.
cela pose un pb pour les menus mais je préfère les traiter séparément.
*/
body, p, h1, h2, h3, h4, h5, p, img, a , ul, ol, li {
	text-decoration: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
body, p, h1, h2, h3, h4, h5, p, img, a {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	list-style-type: none;
}
/*
...........................................reset css................................................
*/


/* la partie stratégique du formatage des pages est restée dans le common.css 
pour une question de lisibilité */


#page{
	margin: auto;
	width: 960px;
/*  background-color: blue;*/
}

  /* .......................... HEADER ..............................*/

  #header{
    height:90px;
    margin-bottom: 10px;
  /*  background-color:pink;*/
  }

    #logo {
      width:120px;
      height:90px; 
      float:left ;
      /*background-color: #ff66ff;*/
    }
    #logo img {
      margin-left:10px;
    }
    #pub {
      /*120 logo + 700 pub < 960 => il reste un emplacement de libre entre les 2 si n�cessaire */
      border-width:2px;
      border-style:solid;
      width:696px ; /* 700 - -2 (bord) -2(bord) */
      height:86px; /*90 -2 (bord) -2 (bord) */
      float:right;
      color:red;
      /*background-color: #ffcccc;*/
    }

    
  /* ..........................FORMAT 1 = INTRO 2 COLONNES................*/  
    
  #container_page_intro {
    margin-top:10px;
  /*  background-color:red;*/
    height:698px; 
  }

    /* surface exploitable à partir d'ici = 960 * 618 */
  
    #news {
      width:220px; 
      height:100%; /* prend la hauteur de son papa = container_page_intro */
      float:left;
/*      background-color: #ff0099;*/
    }

    #choix_rubriques {
      width:740px; 
      height:100%; /* prend la hauteur de son papa = container_page_intro */
      float:right;
/*      background-color: #cc00cc;*/
    }
    
     /* surface exploitable à partir d'ici = 740 * 618 */
      
     #centrage_caroussel_horizontal {
        position:relative; 
       /* 
          pour la largeur : (740 exp - 600 caroussel - 80 (2 boutons)) / 2 = 30 
          pour la hauteur : (618 exp - 300 caroussel) / 2 = 159
       */
        top:159px; 
        left:30px;
      }

        #container_caroussel_horizontal {
          margin-left: 50px; /* pour �carter les boutons */
          margin-right: 50px;
          width:500px; /* + marge = 600 */
          height:300px; 
          float:left ;
        }
      
  /* .........................OU FORMAT 2 et 3 = CATALOGUE ET COMPTE..........*/
        
    /* surface exploitable à partir d'ici = 960 * infinie */

    #navigation {
      width:178px;
      min-height:702px;  
      float:left;
    }
    
    /* surface exploitable à partir d'ici = 782 * infinie */

    /* ............. OU FOMAT 2 = CATALOGUE 3 COLONNES........................*/
    
    #panier {
      border:5px solid #e1caab;
      /* 178 -5 -5 */
      width:158px; 
      /* 698 -5 -5  et min-heigt comme çà on la laisse s'agrandir en fonction 
      du nombre de lignes mais au moins on a la même taille de chaque coté */
      min-height:692px; 
      float:right;

      /*background-color: black;*/
      /*color:white;*/
      font-size:14px;
      padding-left:5px;
      padding-right:5px;
      padding-top:5px;
    }

    #catalogue {
      margin-left:182px; /* 178 du menu + marge de 4 */
      margin-right:182px; /* 178 du panier + marge de 4 */
    /*  background-color: pink;*/
    }

      #selection {
        min-height:40px;
/*        background-color: pink;*/
        border-width:5px;
        border-style:solid;
      }

        .navigation_pages_articles {
          min-height:30px;
          text-align: center;
          padding-top: 10px;
/*          background-color: yellow;*/
        }

      /* surface exploitable pour la liste d'articles (960 - 182 - 182) 
      => 596 * infinie */  

    /* .............. COMPTE ...................................*/

    #compte {
      width:782px;
      height:698px;
      float:right;
      /*background-color: pink;*/
    }
    
  /* ....................... FOOTER ......................................*/
    
  #footer {
    margin-top:5px;
    height:40px;
    background-image: url(../images/foot.jpg)
    /*background-color: green;*/
  }
  
/* ...... POUR TOUTES LES PAGES ..........................................*/

.autre_page {
  margin-left:200px; 
}
  
.bouton {
  width:40px;
  height:40px;
  display: block;
}

.bouton_suppression_panier {
  width:14px;
  height:14px;
  display:block;
  background: url(../images/suppression_panier.gif) no-repeat transparent;
  float:left; 
  margin-right: 4px;
  margin-top: 3px;
  margin-bottom: 3px;
}

.bouton_texte_menu, .bouton_texte_panier, .bouton_texte_autre {
  line-height:30px; 
  display: inline-block;
  border-style: solid;
  border-width: 3px;
  text-align: center;
  padding-left:5px;
  padding-right:5px;
}

.bouton_texte_menu {
  margin-top: 20px;
  width:140px;
  margin-left: 4px;
}

.bouton_texte_panier {
  margin-top: 30px;
  width:140px;
}

.bouton_texte_autre {
  width:200px;
}

.bulle {
  border: solid 2px #663821 ;
  min-height:50px;
/*  abandonné car non compatible w3css 
  border-radius: 20px; css3
  -webkit-border-radius: 20px; Google et Safari = moteur webkit
  -moz-border-radius: 20px; Firefox = moteur Gecko*/
  padding:7px;

  position:absolute; /* attention : absolute par rapport au body  par défaut */
  z-index: 9999; /* pour qu'elle passe au dessus du footer par exemple */
}

#pub_des_autres, #pub_a_moi {
  width:50%; /* 50/50 on partage l'espace pub (div pub)*/
  height:100%;
  float:left;
}
#pub_des_autres div {
  float:left;
}
#pub_a_moi div {
  float:right;
}

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

#footer {
  text-align: center;
  position:relative;
}
#cssok {
  position:absolute;
  right:-5px;
}


  /* pour les formulaires */

.formulaire ul, .formulaire li { /* petit reset css juste pour la gestion des formulaires */
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
	padding-left:0px;
	list-style-type:none;
}

.formulaire legend {
  font-size:26px;
}

.formulaire li label {
  /* block pour que le label prenne sa taille et aligne tout le monde + inline sinon l'un en dessous de l'autre */
  display:inline-block; 
}

.formulaire li .label_block {
  display:block; 
}

.formulaire li {
  margin-left:20px;
  margin-top:10px;
}

.formulaire .etiquette {
  width:150px;
}

.formulaire .obligatoire {
  color:red;
}
  



  /* gestion des couleurs communes */

#footer * { /* pour le footer tout en marron, ancre et texte */
  color:#573722; /* marron clair */
}
.navigation_pages_articles a:hover, .bouton_texte_menu:hover, 
.bouton_texte_panier:hover, .bouton_texte_autre:hover {
  background-color:#45260a; /* marron foncé */
}

#footer a:hover, #choix_presentation #navigation_en_cours, 
#caroussel_horizontal span, legend, #selection, .navigation_pages_articles *, 
.bouton_texte_menu, .bouton_texte_panier, .bouton_texte_autre, #panier,
.image_absente { 
  color:#45260a; /* marron foncé */
}

#pub, #choix_presentation, #menu, fieldset, #selection, 
.navigation_pages_articles a, .bouton_texte_menu, .bouton_texte_panier, 
.bouton_texte_autre{
  border-color: #e1ccab; /* marron moyen */
}

#choix_presentation, #menu, #selection, .bulle, .bouton_texte_menu, 
.bouton_texte_panier, .bouton_texte_autre, #panier, .image_absente {
  background-color:#eee6d9;  /*marron clair*/ 
}

.navigation_pages_articles a:hover, .bouton_texte_menu:hover, 
.bouton_texte_panier:hover, .bouton_texte_autre:hover {
  color:#e1caab; /* marron foncé */
}

.warning, .formulaire_erreur {
  color:red ;
}