/*----------------------------------------------------------------------------*/
/* This is the property of */
/* Noël COURTHALIAC born the 1967-12-24 in Lyon France. */
/*----------------------------------------------------------------------------*/
/* Name: index164-201405240646.css */
/*----------------------------------------------------------------------------*/
/* Creation date: 2014-06-17 */
/*----------------------------------------------------------------------------*/
/* Updated the 2021-05-09 by Noël COURTHALIAC */
/* Reason: */
/* Updated to manage copy of recipe in menu thru drag and drop. */
/*----------------------------------------------------------------------------*/
/* Updated the 2021-12-27 by Noël COURTHALIAC */
/* Reason: */
/* Style009 added to manage SmartPhone specificities. */
/*----------------------------------------------------------------------------*/
/* Updated the 2025-07-05 by Noël COURTHALIAC */
/* Reason: */
/* Block005 display content updated and miscellaneous updates. */
/*----------------------------------------------------------------------------*/
/* Module Function: */
/* This css is used to define the site style. */
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* BLOCK ---------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* Html: Couleur du fond */
/*----------------------------------------------------------------------------*/
html
{
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Body: Couleur du fond */
/*----------------------------------------------------------------------------*/
body
{
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block000 affiche l'image du fond de faciliste */
/*----------------------------------------------------------------------------*/
.Block000
{
position:relative;
left:0px;
top:0px;
z-index:1;
width:500px; /* largeure du fond */
height:240px; /* Bas du logo */
margin:auto; /* Permet de centrer le fond sur la page */
padding:0px 0px 0px 0px;
background-image:url(medias/entete.jpg); /* Insertion de l'image */
background-repeat:no-repeat; /* Mais une seule fois */
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block002 */
/* Détermine l'emplacement de l'image d'accueil */
/* Il est inséré dans le Block010 */
/*----------------------------------------------------------------------------*/
.Block002
{
position:relative;
left:74px; /* 59 = (500 - 352 ) / 2 */
width: 352px;
height: auto;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block003 */
/* Détermine l'emplacement du texte d'accueil */
/*----------------------------------------------------------------------------*/
.Block003
{
float: left;
width: 500px;
height: auto;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block004 */
/* Détermine l'emplacement de la publicité */
/*----------------------------------------------------------------------------*/
.Block004
{
position:absolute;
left:15px;
top:100px;
z-index:1;
width:470px;
height:60px;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block005 */
/* Positionne l'aide */
/*----------------------------------------------------------------------------*/
.Block005
{
float:left;
display: block flow;
width: 500px;
height: auto;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block006 */
/* Détermine l'emplacement du logo */
/*----------------------------------------------------------------------------*/
.Block006
{
position:absolute;
left:15px;
top:200px;
z-index:1;
width:470px;
height:100px;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block007 */
/* Détermine l'emplacement de l'image de connexion, password et inscription. */
/* Il est inséré dans le Block010 */
/*----------------------------------------------------------------------------*/
.Block007
{
float:left;
width:500px;
height:auto;
padding:0 0 0 0;
margin:0 0 0 0;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block008 */
/* Détermine l'emplacement du premier menu de navigation */
/*----------------------------------------------------------------------------*/
.Block008
{
position:absolute;
left:5px;
top:300px;
z-index:1;
width:490px;
height:60px;
margin:0px 0px 0px 0px;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block009 */
/* Détermine l'emplacement des elements du premier menu de navigation */
/* Il fait suite au Block008. */
/*----------------------------------------------------------------------------*/
.Block009
{
float:left;
width:92px;
height:60px;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block010 */
/* Fait suite au Block 007 et/ou Block 008 pour positionner la suite */
/*----------------------------------------------------------------------------*/
.Block010
{
position:absolute;
left:0px;
top:360px;
width: 500px;
height:auto;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block016 */
/* Détermine l'emplacement des lignes de navigation */
/*----------------------------------------------------------------------------*/
.Block016
{
float:left;
width:500px;
height:auto;
background-color:#fff;
}
/*----------------------------------------------------------------------------*/
/* Le contenu du div class Block018 */
/* Détermine l'emplacement d'une recette */
/*----------------------------------------------------------------------------*/
.Block018
{
float:left;
width:auto; /* Size is define in Style003_Size003 */
height:auto; /* Size is define in Style003_Size003 */
background-color:#f6e8bf;
}
/*----------------------------------------------------------------------------*/
/* STYLE ---------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* Style000 */
/* Ce style détermine les polices de caractères du site. */
/*----------------------------------------------------------------------------*/
.Style000
{
font-family:arial, Helvetica,sans-serif;
font-size:12px; /* Taille de la police */
color:#333; /* Couleur de la police */
}
/*----------------------------------------------------------------------------*/
/* Style001 */
/* Ce style est utilisé pour le premier menu 'ACCUEIL etc...' */
/*----------------------------------------------------------------------------*/
.Style001
{
font-weight:bold;
font-size:10px;
letter-spacing:0;
line-height:60px;
text-align:center;
list-style-type:none;
color:#f26522;
background-color:#fff;
background-image:url(medias/menu_ovale0.jpg);
background-size: 100% 50%;
background-position:center;
background-repeat:no-repeat;
}
.Style001 #right
{
text-align:right;
}
/* Style001 pour la balise -----------------------------------------------*/
.Style001 a
{
background-color:#fff;
color:#982068;
display:block;
text-decoration:none;
}
/* Style001 pour le passage de souris sur la balise ----------------------*/
.Style001 a:hover
{
color:#f26522;
}
/*----------------------------------------------------------------------------*/
/* Style002 */
/* Ce style est utilisé pour le texte d'accueil de la page d'accueil */
/* Ce style est utilisé pour l'aide */
/*----------------------------------------------------------------------------*/
.Style002
{
text-align: justify;
color:#666;
padding: 10px 0px 10px 0px;
}
.Style002 h1
{
font-weight:lighter;
color:#666;
font-size:22px;
}
.Style002 h2
{
font-weight:lighter;
color:#666;
font-size:20px;
}
.Style002 h3
{
font-weight:lighter;
color:#666;
font-size:18px;
margin:15px 0 5px 0;
padding:0;
line-height:20px;
letter-spacing:0;
}
.Style002 h4
{
font-weight:lighter;
color:#666;
font-size:16px;
margin:15px 0 0 0;
padding:0;
line-height:20px;
letter-spacing:0;
}
.Style002 ul
{
list-style-type:none; /* Supprime les bullet d'origine */
padding:20px 0 0 0;
}
.Style002 ul li
{
background-image:url(medias/puce.jpg);
background-repeat:no-repeat;
background-position:2px 3px;
padding:0 0 10px 20px;
margin:0;
font-size:12px;
line-height:16px;
color:#666;
}
.Style002 a
{
font-weight:lighter;
color:#666;
margin:15px 0 0 0;
font-weight:bold;
font-size:12px;
text-decoration: none;
}
.Style002 a:hover
{
color:#e3b526;
}
.Style002 p
{
font-size:12px;
}
.Style002 p#contact
{
color:#982068;
}
.Style002 p#contact a
{
color:#982068;
text-decoration: underline;
}
.Style002 b
{
font-size:16px;
}
.Style002 br
{
font-size:15px;
}
.Style002_Center
{
text-align: center;
padding:10px 0 10px 0;
}
.Style002 hr
{
width:100%;
}
/*----------------------------------------------------------------------------*/
/* Style003 */
/* Ce style est utilisé pour afficher les images */
/*----------------------------------------------------------------------------*/
.Style003_Size01
{
width:5px;
height:auto;
transition: transform .2s;
}
.Style003_Size01:hover
{
transform: scale(2.0);
}
.Style003_Size02
{
width:60px;
height:auto;
transition: transform .2s;
}
.Style003_Size02:hover
{
transform: scale(1.5);
}
.Style003_Size03
{
width:226px; /* It should be 250 but there is a 2px margin and a 10px padding in style007 ... 226 = 235 - 2 x (10 + 2)*/
height:140px;
transition: transform .2s;
}
.Style003_Size03:hover
{
transform: scale(1.0);
}
.Style003_Size04
{
width:455px;
height:auto;
transition: transform .2s;
}
.Style003_Size04:hover
{
transform: scale(1.0);
}
.Style003_Size05
{
width:auto;
height:auto;
transition: transform .2s;
}
.Style003_Size05:hover
{
transform: scale(1.0);
}
.Style003_Size06
{
transition: transform .2s;
}
.Style003_Size06:hover
{
transform: scale(1.5);
}
.Style003_Size07
{
width:20px;
height:auto;
}
/*----------------------------------------------------------------------------*/
/* Style004 */
/* Ce style est utilisé sur la troisième ligne de lien */
/* Ce style est utilisé pour les titre orange 'Consulter les recettes'... */
/*----------------------------------------------------------------------------*/
.Style004
{
float:right;
display:block;
padding:0px;
margin: 10px 0px 0px 10px;
text-align:left;
color:#F66522;
font-size:16px;
font-weight:bold;
}
.Style004 a
{
text-decoration: none;
color:#F66522;
}
.Style004 a:hover
{
color:#e3b526;
}
/*----------------------------------------------------------------------------*/
/* Style005 */
/* Ce style est utilisé sur la quatrième ligne de lien */
/* Ce style est utilisé pour les lien 'Retour à la page d'acceuil'... */
/*----------------------------------------------------------------------------*/
.Style005
{
float:right;
display:block;
padding:0px;
margin: 10px 0px 0px 10px;
text-align:left;
color:#666;
font-size:10px;
font-weight:bold;
}
.Style005 a
{
text-decoration: none;
color:#666;
}
.Style005 a:hover
{
color:#e3b526;
}
/*----------------------------------------------------------------------------*/
/* Style006 */
/* Ce style est utilisé pour les titre de page */
/*----------------------------------------------------------------------------*/
.Style006
{
display:block;
padding:0px;
margin: 20px 0px 30px 0px;
text-decoration: none;
text-align:center;
color:#bf73ae;
font-size:16px;
font-weight:bold;
}
.Style006 a
{
text-decoration: none;
}
.Style006 a:hover
{
color:#e3b526;
}
/*----------------------------------------------------------------------------*/
/* Style007 */
/* Ce style est utilisé pour afficher les recettes dans la page d'accueil */
/* Ce style est utilisé pour les lien 'Retour à la page d'acceuil'... */
/*----------------------------------------------------------------------------*/
.Style007
{
float:left;
display:block;
padding: 10px 10px 10px 10px; /* Marge interieure */
margin: 2px 2px 2px 2px; /* Marge exterieure */
text-align:center;
color:#666;
font-size:12px;
font-weight:bold;
bottom: 0;
}
.Style007 a
{
text-decoration: none;
color:#666;
}
.Style007 a:hover
{
color:#e3b526;
}
/*----------------------------------------------------------------------------*/
/* Style007 */
/* Ce style est utilisé pour afficher certains états de l'étape 7. */
/*----------------------------------------------------------------------------*/
.Style008
{
display:block;
padding:2px;
margin: 2px;
font-size:8px;
color:#ffffff;
font-weight:bold;
}
.Style008 td#step7
{
border-color:#bf73ae;
border-width: 3px;
border-style: solid;
border-radius: 15px;
background-color:#ffffff;
color:#bf73ae;
font-size:8px;
font-weight:bold;
}
.Style008 td a
{
text-decoration:none;
color:#ffffff;
}
.Style008 td a:hover
{
font-size:16px;
color:#ffffff;
}
/*----------------------------------------------------------------------------*/
/* Style009 */
/* Ce style est identique au Style002 */
/* Il est simplement adapté aux petit écrans et utilisé dans : */
/* - Index044.php - Formulaire de connexion */
/*----------------------------------------------------------------------------*/
.Style009
{
text-align: justify;
color:#666;
padding: 10px 0px 10px 0px;
}
.Style009 h1
{
font-weight:lighter;
color:#666;
font-size:22px;
}
.Style009 h2
{
font-weight:lighter;
color:#666;
font-size:20px;
}
.Style009 h3
{
font-weight:lighter;
color:#666;
font-size:18px;
margin:15px 0 5px 0;
padding:0;
line-height:20px;
letter-spacing:0;
}
.Style009 h4
{
font-weight:lighter;
color:#666;
font-size:16px;
margin:15px 0 0 0;
padding:0;
line-height:20px;
letter-spacing:0;
}
.Style009 ul
{
list-style-type:none; /* Supprime les bullet d'origine */
padding:20px 0 0 0;
}
.Style009 ul li
{
background-image:url(medias/puce.jpg);
background-repeat:no-repeat;
background-position:2px 3px;
padding:0 0 10px 20px;
margin:0;
font-size:18px;
line-height:16px;
color:#666;
}
.Style009 a
{
font-weight:lighter;
color:#666;
margin:15px 0 0 0;
font-weight:bold;
font-size:12px;
text-decoration: none;
}
.Style009 a:hover
{
color:#e3b526;
}
.Style009 p
{
font-size:12px;
}
.Style009 p#contact
{
color:#982068;
}
.Style009 p#contact a
{
color:#982068;
text-decoration: underline;
}
.Style009 b
{
font-size:16px;
}
.Style009 br
{
font-size:15px;
}
.Style009_Center
{
text-align: center;
padding:10px 0 10px 0;
}
.Style009 hr
{
width:100%;
}
.Style009 input
{
font-size:22px;
}
/*----------------------------------------------------------------------------*/
/* menu2 */
/*----------------------------------------------------------------------------*/
/* menu ----------------------------------------------------------------------*/
/* Menu pour 'Afficher les autres fonctions ----------------------------------*/
/*----------------------------------------------------------------------------*/
div#menu2
{
width:500px;
overflow-x: scroll;
overflow-y: hidden;
}
div#menu2 div#menu
{
margin:0;
padding:30px 0 0 0px;
}
div#menu2 div#menu ul
{
/*opacity:0.5;*/
clear:both;
background-image:url(medias/menu2.jpg);
background-size: 130% 100%;
/*background-repeat: no-repeat;*/
padding:0; margin:0 0 0 0;
list-style-type:none;
width:500px;
height:14px;
line-height:14px;
background-color:#fff;
}
div#menu2 div#menu ul li
{
font-weight:bold;
font-size:10px;
text-align:left;
color:#e3b526;
padding:0;
margin:0px 2px 0px 2px;
height:14px;
letter-spacing:0;
float:left;
width:auto;
}
div#menu2 div#menu ul li.li1
{
font-size:10px;
width:100px;
margin:0px 20px 0px 5px;
}
div#menu2 div#menu ul li.li4
{
width:100px;
margin:0 0 0 83px;
}
div#menu2 div#menu ul li a
{
font-weight:lighter;
float:left;
letter-spacing:0;
font-size:10px;
color:#d1b49e;
letter-spacing:0;
padding:0; margin:0;
height:15px;
display:block;
text-decoration:none;
}
div#menu2 div#menu ul li.li2 a
{
/*color:#9f6f4b;*/
color:#885f40;
/*color:#c5a085;*/
font-weight:bold;
width:115px;
}
div#menu2 div#menu ul li.li3 a
{
/*color:#9f6f4b;*/
color:#885f40;
/*color:#c5a085;*/
width:96px;
}
div#menu2 div#menu ul li.li4 a
{
color:#885f40;
font-weight:bold;
width:115px;
}
div#menu2 div#menu ul li.li5 a
{
width:115px;
}
div#menu2 div#menu ul li.li6 a
{
width:96px;
}
div#menu2 div#menu ul li a:hover
{
color:#e3b526;
}
/* menu2 ---------------------------------------------------------------------*/
div#menu2 p
{
padding:0;
margin: 0px 0 10px 0; /* Valeur d'origine -35px 0 10px 0 */
text-align:center;
color:#bf73ae;
font-size:16px;
font-weight:bold;
}
div#menu2 a
{
float:right;
display:block;
padding:0; margin:20px;
color:#d59c29;
font-size:10px;
font-weight:normal;
}
div#menu2 a p
{
display:block;
padding:0; margin:20px;
}
/* Table --------------------------------------------------------------*/
div#menu2 table#premier
{
clear:both;
width:500px;
overflow-x: scroll;
overflow-y: hidden;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
div#menu2 table#premier table#tablemenu
{
background-color:#ffffff;
}
div#menu2 table#second
{
clear:both;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
div#menu2 table#troisieme
{
clear:both;
padding:0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
/* Taille de la police dans les cellules : les § et les listes */
div#menu2 table p
{
font-size:10px;
color:#333;
line-height:13px;
font-weight:normal;
padding:5px;
margin:0px 0;
}
/* Listes */
div#menu2 table tr td ul
{
font-size:10px;
color:#333;
line-height:13px;
list-style-type:none;
text-align:left;
margin:0 0 0 0;
padding:0 0 0 0;
width:100%;
}
/* Colonnes */
div#menu2 table tr td
{
background-color:#f6e8bf;
/*width:auto;*/
/* padding: 5px 5px 5px 5px;*/
}
div#menu2 table tr td.highlight
{
background-color:#ffffff;
text-align:center;
/* width:105px; /* Mettre en comentaire pour libérer les colonnes */
padding: 5px 5px 5px 5px;
}
/* Colonne 1 */
div#menu2 table tr td.td1
{
font-size:10px;
font-weight:bold;
padding: 5px 5px 5px 5px;
}
/* Colonne 1 */
div#menu2 table tr td.td1special
{
cursor:default;
font-size:10px;
font-weight:bold;
padding: 5px 5px 5px 5px;
background-color:#bf73ae;
color:#fff;
}
/* Colonne 1 */
div#menu2 table tr td.td1special p
{
cursor:default;
font-size:10px;
font-weight:bold;
font-style:italic;
padding: 5px 5px 5px 5px;
background-color:#bf73ae;
color:#fff;
}
/* Colonne info */
div#menu2 table td#info
{
background-color:#f6e8bf;
color:#666;
font-weight:bold;
font-size:10px;
padding: 5px 5px 5px 5px;
}
/* Colonne info1 */
div#menu2 table td#info1
{
/*background-color:#f6e8bf;*/
color:#666;
font-weight:bold;
font-size:10px;
padding: 5px 5px 5px 5px;
vertical-align: super;
}
/* Colonne info gauche */
div#menu2 table td#info_gauche
{
/*background-color:#f6e8bf;*/
color:#666;
font-weight:bold;
font-size:10px;
padding: 5px 5px 5px 5px;
vertical-align: super;
text-align:left;
}
/* Colonne passive */
div#menu2 table td#passive
{
background-color:#f6e8bf;
color:#666;
font-weight:bold;
font-size:10px;
padding: 5px 5px 5px 5px;
}
/* This is used to well separate item in list when making purchase */
div#menu2 table td#passive hr
{
width:100%;
border: 1px solid;
border: 1px solid;
color:#ffffff;
}
div#menu2 table td#passive a
{
float:none;
margin:0;
padding:0;
text-decoration:none;
color:#bf73ae;
font-weight:bold;
font-size:10px;
border-style:none;
}
/* This is used to decrease the size of item in list when food purchase is done */
div#menu2 table td#passive s a
{
font-size:5px;
}
div#menu2 table td#passive a:hover
{
font-size:10px;
color:#e3b526;
}
div#menu2 table td#passive a#special
{
float:none;
margin:0;
padding:0;
text-decoration:none;
color:#000000;
font-weight:bold;
font-size:10px;
}
div#menu2 table td#passive .special a
{
float:none;
margin:0;
padding:0;
text-decoration:none;
color:#000000;
font-weight:bold;
font-size:10px;
}
div#menu2 table td#passive a#special:hover
{
color:#e3b526;
}
div#menu2 table td#passive .special a:hover
{
color:#e3b526;
}
/* Colonne active */
div#menu2 table td#active
{
background-color:#8c1969;
font-size:10px;
font-weight:bold;
padding: 5px 5px 5px 5px;
}
div#menu2 table td#active p, div#menu2 table td#active ul
{
color:#fff;
}
div#menu2 table td#active p
{
color:#fff;
font-weight:normal;
}
div#menu2 table td#active a
{
float:none;
margin:0;
padding:0;
text-decoration:none;
color:#fbf315;
font-weight:bold;
}
div#menu2 table td#active a:hover
{
color:#e3b526;
}
div#menu2 table td#active a#bouton
{
float:none;
margin:0;
padding:0;
text-decoration:none;
color:#fbf315;
font-weight:normal;
font-size:22px;
}
div#menu2 table td#active a#bouton:hover
{
color:#e3b526;
}
/* Ligne 1 */
div#menu2 table tr.tr1
{
height:30px;
font-size:10px;
}
/* Colonnes de la Ligne 1 */
div#menu2 table tr.tr1 td
{
cursor:default;
background-color:#bf73ae;
color:#fff;
font-weight:bold;
}
/*----------------------------------------------------------------------------*/
/* MESSAGE -------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/* Boite d'affichage des message type 01 - se place dans font */
/*----------------------------------------------------------------------------*/
div #message01
{
display: none; /* Par défaut la boite n'est pas affichée */
z-index: 1; /* rang de priorité verticale */
position: absolute; /* Indique que la position de la boite est indiqué à partir du bord haut-gauche du conteneur */
left: 85px; /* Positionne la boite par rapport au bord gauche de la page */
top: 0px; /* Positionne la boite par rapport au haut de la page */
width: 300px; /* Largeur de la boite */
height: auto; /* Hauteur de la boite */
border: solid 5px #bf73ae; /* Epaisseure et couleur du bord */
background-color: #fff; /* couleur du fond de la boite */
padding: 0.5em; /* Espace entre le texte et le bord de la boite */
text-decoration: none; /* aucun sur, sous ... lignage */
color:#F66522; /* Couleur de la police */
font-size:24px; /* Taille de la police */
font-weight:bold; /* Type de police */
}