@charset "utf-8";
Title with a background color
/* souligner */
underline {
text-decoration: underline;
}
button {
display: inline-block; /* Un élément en inline-block peut recevoir une valeur de vertical-align qui, par défaut, ne semble pas être la même sur IE et sur les autres navigateurs. */
background-color: transparent; /* couleur arrière plan */
border-radius: 10px;
border: 4px double #cccccc;
color: #eeeeee;
text-align: center;
font-size: 15px;
padding: 5px;
width: 80px; /*largeur cadres*/
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
font-family: sans-serif;
vertical-align: middle;
}
.myButton {
box-shadow:inset 0px 1px 0px 0px #caefab;
background:linear-gradient(to bottom, #77d42a 5%, #5cb811 100%);
background-color:#77d42a;
border-radius:6px;
border:1px solid #268a16;
display:inline-block;
cursor:pointer;
color:#306108;
font-family:Arial;
font-size:12px;
font-weight:normal;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #aade7c;
}
.myButton:hover {
background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%);
background-color:#5cb811;
}
.myButton:active {
position:relative;
top:1px;
}
.yourButton { /* page active */
box-shadow:inset 0px 1px 0px 0px transparent;
background:linear-gradient(to bottom, transparent 5%, transparent 100%);
background-color:transparent;
border-radius:10px; /* arrondi forme */
border:0px solid #060113;
display:inline-block;
cursor:pointer;
color:#e7f50f; /*Couleur police dans cadre*/
font-family:Arial;
font-size:80%;
font-weight:100;
text-decoration:none;
vertical-align: 50%;
}
.yourButton:hover {
background:linear-gradient(to bottom, #7b7b74 5%, #5e5e54 100%);
background-color: transparent ;
}
.yourButton:active {
position:center;
top:10px;
}
.herButton {
box-shadow:inset 0px 1px 0px 0px transparent;
background:linear-gradient(to bottom, transparent 5%, transparent 100%);
background-color:transparent;
border-radius:10px; /* arrondi forme */
border:0px solid #060113;
display:inline-block;
cursor:pointer;
color: #fdfcfc ;
font-family:Arial;
font-size:80%;
font-weight:100;
text-decoration:none;
vertical-align: 50%;
}
.herButton:hover {
background:linear-gradient(to bottom, #7b7b74 5%, #5e5e54 100%);
background-color: #9e9e98 ;
}
.herButton:active {
position:center;
top:1px;
}
.emptyButton {
box-shadow:inset 0px 1px 0px 0px transparent;
background:linear-gradient(to bottom, transparent 5%, transparent 100%);
background-color:transparent;
border-radius:10px; /* arrondi forme */
border:0px solid #060113;
display:inline-block;
cursor:pointer;
color:#060113;
font-family:Arial;
font-size:80%;
font-weight:100;
text-decoration:none;
vertical-align: 50%;
}
.emptyButton:hover {
background:linear-gradient(to bottom, #e8f3e8 5%, #c1f4c0 100%);
background-color:#9e9e98;
}
.emptyButton:active {
position:center;
top:1px;
}/*FIN Nouveaux boutons*/
.ourButton {
box-shadow:inset 0px 1px 0px 0px transparent;
background:linear-gradient(to bottom, transparent 5%, transparent 100%);
background-color:transparent;
border-radius:10px; /* arrondi forme */
border:0px solid #060113;
display:inline-block;
cursor:pointer;
color: #fdfcfc ;
font-family:Arial;
font-size:80%;
font-weight:100;
text-decoration:none;
vertical-align: 50%;
width: 150px; /*largeur cadres*/
}
.ourButton:hover {
background:linear-gradient(to bottom, #7b7b74 5%, #5e5e54 100%);
background-color: #9e9e98 ;
}
.ourButton:active {
position:center;
top:1px;
}
img {
border:0px;
}
#banniere{
width: 100%;
height: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.divLargeEcran{
width: 100%;
}
.right { float:right; margin:50 500px 100 500px; }
.center { float:center; margin:5 20px 10 20px; }
.cadretext{
width: 95%;
margin: 2%;
border: 0px solid #A0A0A0;
text-align: justify-all;
background: #f9e79f;
display: inline-block;
position: relative;
float: right;
padding:10px 15px 15px 15px;
font-size: 20px;
font-family: sans-serif, Impact, "Arial Black", Arial, Verdana;
}
.cadretext12 {/* cadre à droite ... */
width: 45%;
margin: 2 px;
border: 0px solid #A0A0A0;
text-align: justify;
background: transparent;
display: inline-block;
position: relative;
float: middle;
padding:5px 5px 5px 5px;
line-height : 1
}
.cadretext11
{/* cadre à gauche ... */
width: 45%;
margin: 2 px;
border: 0px solid #A0A0A0;
text-align: justify;
background: transparent;
display: inline-block;
position: relative;
float: left;
padding:5px 5px 5px 5px;
line-height : 1
}
.cadretext10
{ /* cadre à droite ... */
width: 90%;
margin: 2 px;
border: 0px solid #A0A0A0;
text-align: center;
background: transparent;
display: inline-block;
position: relative;
float: middle;
padding:5px 5px 5px 5px;
line-height : 1
}
.cadretext9
{/* cadre 5 mais centré ... */
width: 95%;
margin: 2 px;
border: 0px solid #A0A0A0;
text-align: center;
background: transparent;
display: inline-block;
position: relative;
float: middle;
padding:5px 5px 5px 5px;
line-height : 1
}
.cadretext8{/* cadre à ... */
width: 45%;
margin-left: 50px;
padding-left: 50px;
border: 0px ;
solid : #A0A0A0;
text-align: justify;
background: transparent;
display: inline-block;
position: left;
float: left;
padding:5px 10px 5px 10px;
line-height : 1
}
.cadretext7{/* cadre à ... */
width: 45%;
margin-left: 50px;
padding-left: 50px;
border: 0px ;
solid : #A0A0A0;
text-align: justify;
background: transparent;
display: inline-block;
position: left;
float: left;
padding:5px 10px 5px 10px;
line-height : 1
}
.cadretext6{ /* cadre vide */
width: 100%;
position: relative;
display: inline-block;
}
.cadretext5{/* cadre à ... */
width: 90%;
margin: 2 px;
border: 0px solid #A0A0A0;
text-align: left;
background: transparent;
display: inline-block;
position: relative;
float: middle;
padding:5px 5px 5px 5px;
line-height : 1
}
.cadretext4{/* cadre au */
width: 45%;
margin-left:5%;
border: 0px solid #A0A0A0;
background: transparent;
float: center;
padding:0px 15px 15px 0px;
font-size: 10px;
font-family: Brush Script MT, Impact, "Arial Black", Arial, Verdana;
}
.cadretext3{/* cadre à droite... */
width: 90%;
margin-left: 0%;
border: 0px solid #A0A0A0;
background: transparent;
float: right;
padding:0px 0px 0px 0px;
font-size: 10px;
font-family: Brush Script MT, Impact, "Arial Black", Arial, Verdana;
}
.cadretext2{/* cadre au centre... */
width: 100%;
margin-left: 10%;
margin-right: 10%;
border: 0px solid #A0A0A0;
background: transparent;
float: center;
padding: 0px 0px 0px 0px;
font-size: 6px;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
}
.cadretext1{/* cadre à gauche ... */
width: 30%;
margin-left:0%;
border: 0px solid #A0A0A0;
background: transparent;
float: left;
padding:0px 0px 0px 0px;
font-size: 10px;
font-family: Brush Script MT, Impact, "Arial Black", Arial, Verdana;
}
.body { /* pour toute le corps de la page */
font-family: source-sans-pro;
background-color: white;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 100%;
}
.hero_header {
padding-left: 10px;
padding-right: 10px;
line-height: 22px;
text-align: center;
}
.about {
padding-left: 25px;
padding-right: 25px;
padding-top: 35px;
display: inline-block;
background-color: #5067e8;
margin-top: 0px;
}
#pied #page #page1 #page2 #haut {
width: 100%;
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
padding-left : 10px;
float: center;
text-align: center;
-webkit-box-shadow: inset 0px 0px #9BD9E0;
box-shadow: inset 0px 0px #9BD9E0;
background-color: #CDF698;
font-size: 8px;
font-family: Brush Script MT, Impact, "Arial Black", Arial, Verdana;
}
#haut #ol #img {
float: none;
font-weight: lighter;
vertical-align: middle;
padding-left: 10px;
padding-top: 0px;
}
.element-centre {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
nav ul li {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
text-align: center;
}
/* fin tatonnements */
/*définit la taille des caractères*/
p
{
font-variant: script; font-size: 20px;
color: #fdfdfd ;
}
h1
{
font-size: 35px; /* Titres de 40 pixels */
color : red;
font-family: sans-serif, Impact, "Arial Black", Arial, Verdana;
text-decoration: blink;
text-align: left;
}
h2
{
font-size: xx-large;
font-size: 30px;
color : #fdfdfd ;
font-family: sans-serif, Impact, "Arial Black", Arial, Verdana;
text-decoration: underline;
text-align: left;
}
h3
{
font-size: large; font-size: 25px;color: #fdfdfd;
}
h4
{
font-size: 25px; line-height : 1em;color: #fdfdfd;
}
h5
{
font-size: large; font-size: 15px;
text-align: center; color: #fdfdfd;
line-height : 1em ;
padding: 0;
margin: 0;
}
h6
{
text-align: left;color: #fdfdfd;
font-size: 15px;
font-size: small;
text-align: left;
vertical-align: middle;
line-height : 1,5em ;
font-family: sans-serif;
}
h7
{
font-size: 10px; line-height : 1em;color: #fdfdfd ;
}
balise
{
font-family: police1, police2, police3, police4;
}
/*définit la police des caractères*/
title
{
font-family: sans-serif, Impact, "Arial Black", Arial, Verdana;
}
ol
{
font-family: sans-serif, Impact, "Arial Black", Arial, Verdana;
}
/*définit la décoration (souligné, barré) des caractères*/
.imageflottante
{
float: left;
}
/*définit une image flotante*/
.imageflottante
{
float: left;
}
.dessous
{
clear: both;
}
/*définit la couleur de caractère avec un code hexa qu'on peut définir avec colorpicker*/
table
{
border: solid;
}
th {
text-align: justify;
border: 1px solid rgb(190, 190, 190);
padding: 10px;
}
td
{
padding:0px 20px 0px 20px;
}
table1
{
border-collapse: collapse;
}
th1 {
border: 0px solid rgb(190, 190, 190);
padding: 10px;
}
td1
/* {border-width: medium;} enlever les bordures *//* Mettre une bordure sur les td ET les th */
{
border: 0px solid rgb(190, 190, 190);
padding:0px 15px 0px 15px;
}
.exemple {
table-layout: auto;
}
}
thead,
tfoot {
background-color: #333;
color: #fff;
}
span.ingredient {
margin-left:2%;
margin-right: 2%;
padding:0px 0px 0px 5px;
font-size: 15px;
color : black;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
}
audio {
width : 250px ;
height : 12px ;
background-color: transparent;
position: relative;
margin:2 auto;
border: 0px solid #000;
border-radius: 4px
}
span.ingredient1 {
color: #ff335b;
}
span.ingredient2 {
color: #cc2e10;
}
span.ingredient3 {
color: #066d1c;
}
span.ingredient4 {
color: #2874a6
;
}
span.ingredient5 {
color: fafaf7;
}
/* BOUTONS like */
.texteSouligne{
text-decoration: underline;
}
.margin{
display: block;
margin-left: 500px ;
}
.text_column1 {
border: 0px solid #A0A0A0;
width: 100%;
text-align: justify;
font-weight: 80%;
line-height: 25px;
float: center;
padding:0px 10px 0px 10px;
color: #fdfdfd;
font-family: sans-serif;
font-size:100%;
}
.text_column2 {
border: 0px solid #A0A0A0;
width: 100%;
text-align: left;
font-weight: 80%;
line-height: 25px;
float: center;
padding:0px 2px 0px 2px;
color: #fdfdfd;
font-family: sans-serif;
font-size:100%;
}
.text_column3 {
border: 0px solid #A0A0A0;
width: 80%;
text-align: justify;
font-weight: 90%;
line-height: 20px;
float: center;
padding:0px 10px 0px 10px;
color: #fdfdfd;
font-family: sans-serif;
font-size:80%;
}
/* DIAPORAMA */
//* DIAPORAMA */
/*html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}*/
img {
max-width: 100%;
}
.diaporama {
animation: slide 8.5s ease infinite 1s;
width: 400%;
}
.slider-container {
max-width: 800px;
position: relative;
margin: auto;
height: 350px;
overflow: hidden;
}
.menu {
position: absolute;
left: 0;
z-index: 11;
width: 100%;
bottom: 0;
text-align: center;
}
.menu label {
cursor: pointer;
display: inline-block;
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50px;
margin: 0 0.2em 1em;
}
.menu label:hover,.menu label:focus {
background: #1c87c9;
}
.slide-input{
opacity: 0;
}
.slide-img {
width: 100%;
height: 250px;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
transition: left 3s 1.75s;
/*animation: slide 13.5s ease infinite 0s; DIAPORAMA */
}
[id^="slide"]:checked +
.slide-img {
left: 0;
z-index: 100;
transition: left 1.65s ease-out;
}
/* Fin DIAPORAMA */