/* Ceci est un fichier CSS, appelé "design.css*/

body
{
 background-color: none; /* la couleur du fond*/
 background-image: url('../images/gers.jpg');
 background-repeat: no-repeat ;
 background-position: center;

 width: 760px;
 margin: auto
}

#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url('../images/banniere01.jpg');
   background-repeat: repeat;
   margin-bottom: 10px;
   border-radius: 10px;
}

/* Le menu */

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 130px; /* Très important : donner une taille au menu */
}

.element_menu
{
   background-color: none;
   background-image: url('images/motif.png');
   background-repeat: repeat-x;
   
   border: 2px outset #5b7e60;
   border-radius: 10px;
   margin-bottom: 20px;
   box-shadow: 3px 3px 3px green;
   
}
/* Quelques effets sur les menus */

.element_menu h3
{    
   color:  red;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image: url('../images/puce-fleur.png');
   padding-left: 30px;
   margin-bottom: 5px; margin-left:0px; margin-right:0px; margin-top:0px; padding-right:0px; padding-top:0px; padding-bottom:0px
}

.element_menu a
{
   color:  red;
}

.element_menu a:hover
{
   background-color: none;
   color: green;
}

/* Le corps de la page */

#corps
{
   margin-left: 140px;
   margin-bottom: 20px;
   padding: 5px;
   color: #f5f5f5;
   background-color:  none;
   background-image: url('images/motif.png');
   background-repeat: repeat-x; 
   border: 2px outset #5b7e60;
   border-radius: 10px;
   
}

#corps h1
{
   color: #5b7e60;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

   background-image: url('images/titre.png');
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: red;
   text-align: left
}


/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 3px;
   text-align: right;
   color: white;
   background-color:  none;
   background-image: url('images/motif.png');
   background-repeat: repeat-x;
   border: medium none;
}


 
p /* paragraphe*/
{
 color: darkblue;
 font-size: medium;
 font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
 text-align: justify;
 text-indent: 30px;
 width: 550px;
 border: 3px;
 text-align: justify;
 padding: 3px; /* Marge intérieure  */
 margin: 20px; /* On peut donc demander à ce que le block soit centré avec "auto" */
 margin-bottom: 20px;
 overflow: auto;
}


h1 /*titre1*/
{
 color: red;
 font-size: xx-large;
 font-style: italic;
 text-align: center;
 
}

a
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   color: red; /* Les liens seront en rouge au lieu de bleu */
   font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
}

a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
   color: green; /* Le lien sera écrit en vert quand on pointera dessus */
}

a:active /* Quand le visiteur clique sur le lien */
{
   background-color: #FFCC66;
}

a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration: underline;
   color: #5b7e60;
}

a /* Lien normal */
{
   text-decoration: none;
   color: red;
   font-style: italic;
}

 a img /*Image lien*/
 
 {
   border:5px solid transparent; 
 }
 a:hover img 
 {
   border:5px solid green; /*la bordure d'une image dans un lien sera rouge au survol du lien et de l'image*/
   }

img
{
 border: 5px solid transparent;
}
 .souligne
{
   text-decoration: underline;
}

caption /* Titre du tableau */
{
   caption-side: top; /* Le titre sera placé en haut du tableau  */
   margin: auto;/* Centre le titre du tableau */
   font-family: Arial, Times, "Times New Roman", serif;
   font-weight: bold;
   font-size: 1.2em;
   color: blue;
   margin-top: 20px; /* La marge doit se faire au-dessus et non en-dessous maintenant */
}

table /* Le tableau en lui-même */
{
   margin: auto;
   border: 4px outset green; /* Bordure du tableau avec effet 3D (outset) */
   border-collapse: none; /* Colle les bordures entre elles */
}



th /* Les cellules d'en-tête */
{
   background-color: #006600;
   color: white;
   font-size: 1.1em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}

td /* Les cellules normales */
{
   height: 40px; /* J'agrandis la hauteur des cellules pour que l'on puisse voir l'alignement vertical */
   vertical-align: middle; /* Alignement vertical, le contenu des cellules sera placé au centre */
   border: 1px solid black;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
   color: blue
}

.mosaïque/* Le tableau index des recettes */
{
   margin: auto;
   border: 10px solid transparent; 
   border-collapse: none; /* Colle les bordures entre elles */
}
.mosaïque th
{  
   background-color: #006600;
   color: white;
   font-size: 1.1em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
   padding: 50px;
}
.mosaïque td
{
   height: 60px; /* J'agrandis la hauteur des cellules pour que l'on puisse voir l'alignement vertical */
   vertical-align: middle; /* Alignement vertical, le contenu des cellules sera placé au centre */
   border:solid transparent;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 40px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
   color: blue
}

.mosaïquerecettes caption/* Titre du tableau */
{
   caption-side: top; /* Le titre sera placé en haut du tableau  */
   margin: auto;/* Centre le titre du tableau */
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   font-weight: bold;
   font-size: 1.2em;
   color: blue;
   margin-top: 10px; /* La marge doit se faire au-dessus et non en-dessous maintenant */
}
.mosaïquerecettes/* Le tableau des recettes */
{
   margin: auto;
   border: 10px solid transparent; 
   border-collapse: none; /* Colle les bordures entre elles */
}
.mosaïquerecettes th
{  
   background-color: #006600;
   color: white;
   font-size: 1.1em;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   padding: 50px;
}
.mosaïquerecettes td
{
   height: 60px; /* J'agrandis la hauteur des cellules pour que l'on puisse voir l'alignement vertical */
   vertical-align: middle; /* Alignement vertical, le contenu des cellules sera placé au centre */
   border:solid transparent;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 20px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
   color: blue
}

@font-face { /* Définition d'une nouvelle police nommée LearningCurveProRegular */
    font-family: 'LearningCurveProRegular';
    src: url('LearningCurve_OT-webfont.eot');
    src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
         url('LearningCurve_OT-webfont.woff') format('woff'),
         url('LearningCurve_OT-webfont.ttf') format('truetype'),
         url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
}

/* Mention de copyright */
copyright
{
	margin: 8px 0 0 0;
	font-size: 1em;
	text-align: left;
{