/**
 * Voici une feuille de style type, bien entendu vous pouvez ajouter
 * ou supprimer des propriétés CSS en fonction de vos besoins.
 */

/**
 * Éléments principaux
 */


/*
* Grille du site
* Barres et page
*/
#contentLeft {
}
#contentRight {
}
#contentSite {
}

/* Bannière */
header {
}

/* Titre de la bannière */
header span {
}

/* Menu */
nav {
}

/* Items du menu */
nav a {
}

/* Items au survol du menu */
nav a:hover {
}

/* Item courant du menu */
nav a.active {
}

/* Menu latéral */
/* aspect des puces */
ul #menuSide {
}
/* Block menu à droite */
#menuSideRight {
}
/* Block menu à gauche */
#menuSideLeft {
}


/* Bas de page */
footer {
}

footer #footersite, #footerbody {
}

/* Liens du bas de page */
footer #footersite, #footerbody a {
}

/* footer bloc gauche */
footer #footersiteLeft, #footerbodyLeft {
}

/* footer bloc central */
footer #footersiteCenter, #footerbodyCenter {
}

/* footer bloc droite */
footer #footersiteRight, #footerbodyRight {
}



/**
 * Éléments de contenu
 */

/* Titres */
h1,
h2,
h3,
h4 {
}

/* Liens */
a {
}

/* Liens au survol */
a:hover {
}

/* Liens au clic */
a:active {
}

/* Boutons */
.button,
button[type='submit'],
.pagination a {
}

/* Boutons au survol */
.button:hover,
button[type='submit']:hover,
.pagination a:hover {
}

/* Boutons au clic */
.button:active,
button[type='submit']:active,
.pagination a:active {
}

/* Cases à cocher */
input[type='checkbox']:checked + label:before {
}

/* Cases à cocher au survol */
input[type='checkbox']:not(:active):checked:hover + label:before,
input[type='checkbox']:active + label:before {
}

/* Champs de formulaire */
input[type='text'],
input[type='password'],
.inputFile,
select,
textarea {
}

/* Champs de formulaire au survol */
input[type='text']:hover,
input[type='password']:hover,
.inputFile:hover,
select:hover,
textarea:hover {
}

/* Modules News et Blog */

.blogDate {
}

.blogPicture {
}

.blogPicture img {
}

.blogComment {
}

.blogTitle {
}

.blogContent {
}

.newsTitle {
 /*background-color: grey;*/
}

.newsContent {
}

.newsSignature {
 color: #404040;
}

/* Texte défilant source https://codepen.io/jreaux62/pen/EZYBeW*/
/* Adapté pour Zwii par Sylvain Lelièvre */

/* Adapter votre css pour les lignes commentées uniquement*/

/* Réglages du bandeau */
.messagedefilant {
 z-index: 1;
 overflow: hidden;
 position: fixed;
 bottom: 0; /* top : texte en haut, bottom : texte en bas */
 left: 0;
 width: 100%;
 height: 1.5rem; /* hauteur de la bannière */
 background-color : rgba(163,113,212,0.7); /* couleur et transparence de la bannière */
}

.messagedefilant div {
 position: absolute;
 min-width: 100%;
}

/* Réglages de l'aspect du texte */
.messagedefilant_1, .messagedefilant_2 {
 display: inline-block;
 white-space: nowrap;
 margin-top: 0.2rem; /* décalage du texte par rapport au haut de la bannière*/
 font-size: 1rem; /* taille du texte */
 color: white; /* couleur du texte */
 font-family: cursive; /* police */
 font-weight : bold; /* graisse */
 font-style : normal; /* style normal, italic ou oblique*/
}

/* Réglages de l'animation */
.messagedefilant_1, .messagedefilant_2 {
 animation-duration : 10s; /* durée d'un défilement */
 animation-iteration-count : infinite; /* nombre de défilements ou infinite */
 animation-timing-function: linear; /* déroulement de l'animation à chaque cycle */
 animation-direction: normal; /* direction de l'animation normal, reverse ou alternate */
}

.messagedefilant_1 {
 position: relative;
 animation-name: defilement;
}

.messagedefilant_2 {
 position: absolute;
 top: 0; left: 0;
 animation-name: defilement2;
}

@keyframes defilement2 {
 0% { margin-left: 100%; }
 100% { margin-left: 0%; }
}

@keyframes defilement {
 0% { margin-left: 0%; }
 100% { margin-left: -100%; }
}

/* Fin du texte défilant */

/* ********** Bannière défilante ********** */

/* Les valeurs à régler ont un commentaire, les 3 premiers sont obligatoires si votre bannière ne comporte pas 5 images */

@keyframes slidy {
 0% { margin-left: 0%; }
 100% { margin-left: -400%; } /* -100% x (nombre d'images - 1) soit -400% pour 5 images */
}

.bannieredefilante {
 border:0px solid;
 overflow: hidden;
 font-size: 0px;
}

.bannieredefilante figure img {
 width: 20%; /* 100% / nombre d'images soit 20% pour 5 images*/
 float: left;
}

.bannieredefilante figure {
 display:block;
 position: relative;
 width: 500%; /* 100% x nombre d'images soit 500% pour 5 images*/
 animation-name: slidy;
 animation-duration : 40s; /* durée d'un défilement */
 animation-iteration-count : infinite; /* nombre de défilements ou infinite */
 animation-timing-function: linear; /* déroulement de l'animation à chaque cycle */
 animation-direction: normal; /* direction de l'animation normal, reverse ou alternate */
}

/* ********** Fin de la bannière défilante ********** */


.shadowbox {
 width: 13em;
 border: 1px solid #333;
 box-shadow: 8px 8px 5px #444;
 padding: 8px 12px;
 background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}