/* ----------------------- Charte graphique ------------------------------- *
Beige clair / 		#F2EBE1 : Couleur de fond globale
Beige + sombre / 	#e2d4ba : Couleur de fond du cadre central
Beige clair 2 /		#e4d7c0 : Couleur de fond des conteneurs
Noir clair /		#1a1a1a : Départ du dégradé noir du header & co
Gris foncé /		#383838 : Fin du défradé + couleur des textes
Brun foncé /		#35240c : Couleur des titres
Blanc / 			#ffffff : Divers
Bleu clair /		#85a2ff : Liens de la colonne gauche
Rouge / 			#ff0000 : Liens hover
orange foncé /      #dc7b00 : Textes

Police Menu et titre colonne gauche : font-family: "Plantagenet Cherokee", calibri, serif;
Police des titres et texte des input : font-family: "Trajan Pro", calibri, serif;
Police des titres de cadres boutique : font-family: "Berlin Sans FB Demi", calibri, serif;
* ------------------------------------------------------------------------ */
 #header, #centre, #footer, #menu_gauche { border-radius: 6px; } 

a.none{text-decoration: none;}
body 
{ 
	background: linear-gradient(#fdf6a7, #8c5504);
	font-family: Arial;
	font-size: 14px;
}
.i-large,
.i-medium,
.i-small {
	position : absolute;
	top: 0; right: 0; bottom: 0; left: 0;
}
.i-large {
	background: url("/image/flocon_6.png") repeat 0px 0px;
	animation: dropFlowParticles 5s linear infinite;
	z-index:-1;
}
.i-medium {
	background: url("/image/flocon_5.png") repeat 0px 0px;
	animation: dropFlowParticles 12s linear infinite;
	margin-left:-100px;
	z-index:-1;
}
.i-small {
	background:url("/image/flocon_4.png") repeat 0px 0px;
	animation: dropFlowParticles 27s linear infinite;
	z-index:-1;
}
@keyframes dropFlowParticles {
	0%   {background-position: 0 0;}
	50%  {background-position: 200px 300px;}
	100%   {background-position: 0px 600px;}
}

/* ----------------------- Cadre de traitement et avertissement ----------------------- */
.cadre_erreur, .cadre_valide, .cadre_information, #formulaire_erreur {
	clear: both;
	margin-bottom: 10px;
	padding: 7px 7px 7px 15px;
	border-radius: 6px;
}
.cadre_erreur img, .cadre_valide img, .cadre_information img, .cadre_cron img, #formulaire_erreur img {
	margin-bottom: -3px; margin-right: 5px;
}
.cadre_erreur img.fermeture, .cadre_valide img.fermeture, .cadre_information img.fermeture, .cadre_cron img.fermeture, #formulaire_erreur img.fermeture {
	float: right; margin-left: 15px; cursor: pointer;
}
.cadre_erreur a:hover, .cadre_valide a:hover, .cadre_information a:hover, .cadre_cron a:hover, #formulaire_erreur a:hover {
	color: black;
}

.cadre_erreur, #formulaire_erreur {
	border: 1px solid red;
	background-color: #FFF7F7;
}
.cadre_valide {
	border: 1px solid green;
	background-color: #F7FFF7;
}
.cadre_information {
	border: 1px solid #FFC71C;
	background-color: #FFFFCC;
}

#centre .avertissement{
	color: red;
	font-weight: bold;
}
#centre form .error {
	border: 1px solid red;
	background: #FFF4F4;
}
#centre form .success {
	border: 1px solid green;
	background: green;
}

#centre .texte_success {
	color: green;
}
#centre .texte_error {
	color: red;
}
.cadre_cron {
	clear: both;
	margin-bottom: 10px;
	padding: 7px 7px 7px 15px;
	border-radius: 6px;
	border: 1px solid blue;
	background-color: cyan;
	position:fixed;
	width: 400px;
	height:300px;
	overflow:auto;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -150px;
	color:orange;
	font-weight: bold;
}
.admin {
	padding: 7px 7px 7px 15px;
	border-radius: 6px;
	border: solid 2px rgba(0, 0, 255, .1);
	background-image: url(/image/filigrane_moderateur.png);
	background-repeat: repeat;
}
/* ----------------------- Cadre de traitement et avertissement ----------------------- */
/* ----------------------- header ------------------------------- */
#header {
	width: 100%;
}
#banniere_header {
	width:468px;
	height:60px;
	margin-left:104px;
}
#avatar { 
	width:141px;
	height:182px;
	background-image: url(/image/haut/mascotte.png); /* background-image: url(/image/haut/mascotte_noel.png);  */
	background-repeat: no-repeat;
}
/* ----------------------- header ------------------------------- */
/* ----------------------- Menu haut ------------------------------- */
a.menu_haut{
	text-decoration: none;
	color:#337AB7;
	font-weight : bold;
}
a.menu_haut:hover{
	text-decoration: none;
	color:#dc7b00;
	font-weight : bold;
}
table[class=menu_haut] {
	border: 3px #9C681F dashed;
	background-color:#fff788;
	border-radius: 10px;
	background: linear-gradient(to top, #eee0b3, #b28f52);
	
}
/* ----------------------- Menu haut ------------------------------- */
/* ----------------------- Menu gauche ------------------------------- */
#menu_gauche {
	width: 12%;
	position:absolute;
}
#bloc_gauche {
	background-color:#fff788;
	border:4px solid #9C681F;
	border-radius: 10px;
	background: linear-gradient(to left, #eee0b3, #b28f52);
}

a.lien_menu_gauche {text-decoration: none;color:grey;}
a.lien_menu_gauche:hover {text-decoration: none;font-size: 150%;color:#dc7b00;}

#bloc_gauche input[type="text"], #bloc_gauche input[type="password"]{
	border: 0;
	background: #ffdf3c;
	width: 90px;
	color: #65570e;
	padding-left: 5px;
	padding-right: 5px;
	height: 20px;
	margin-bottom: 5px;
}

#bloc_gauche input[type="submit"]{
	border: 3px dashed grey;
	background: #ffdf3c;
	color: #58ACFA;
	font-size: 110%;
	border-radius: 10px;
}
#bloc_gauche input[type="submit"]:hover{
	border: 3px dashed grey;
	background: #ffdf3c;
	color: #0040FF;
	font-size: 130%;
	border-radius: 10px;
}

/* ----------------------- Menu gauche ------------------------------- */
/* ----------------------- Centre ------------------------------- */
.fil_ariane { margin-bottom: 10px; font-size: 15px; float:left; }
.fil_ariane a { text-decoration: none; }
.fil_ariane a:hover { color: black; text-decoration: underline; }
#centre {
	position:relative;
	width: 76%;
	margin-left:13%;
	display: inline-block;
	background: linear-gradient(to bottom, #eee0b3, #b28f52);
	text-align:center;
}
table[class=design] {
	text-align: left;
	padding-left: 12px;
	line-height: 15px;
	border:1px solid #3B170B;
}
table[class=design] tr:hover {
	background: #d4c5b3;
}
table[class=design] th {
	text-align: center;
}
table[class=design] a {
	text-decoration: none;
	color:silver;
}
table[class=design2] {
	border: 1px solid #424242 !important;
	width: 100%;
	max-width: 100%;
}
table[class=design2] tr:nth-of-type(odd){
	background-color: rgba(180,95,4,0.5);
}
table[class=design2] tr:hover{
	background-color: #d4c5b3;
}
table[class=design2] td,th{
	border: 1px solid #424242 !important;
}
table[class=design2] a {
	text-decoration: none;
	color:#424242;
}
table[class=design2] a:hover {
	text-decoration: none;
	color:#dc7b00;
}
table[class=messagerie] td{
	text-align: left;
	padding-left: 8px;
}

table[class=messagerie] .message_non_lu {
	font-weight: bold;
}
table[class=messagerie] .message_lu {
	font-size:0.9em;
	font-weight: normal;
}
.concours_jeu {
	width: auto;
	height: auto;
	border: 1px dashed #766451;
	border-radius: 6px;
	background: linear-gradient(to bottom, #eee0b3, #b28f52);
	opacity:0.6;
}
.contour_pointille {
	display: inline-block;
	vertical-align: top;
	height: auto;
	width: auto;
	border: 1px dashed #766451;
	padding: 10px;
	border-radius: 10px;
	text-align: justify;
	margin-top: 20px;
}
h1
{
  font-size: 32px;
  text-shadow: -1px -1px #FCAC52, 1px 1px #8E510C, -3px 0 4px #000;
  font-family:Arial, Helvetica, sans-serif;
  color:#FA8500;
  padding:16px;
  font-weight:lighter;
  text-align:center;
  display:block;
  margin:10px; 
}
h2
{
  font-size: 25px;
  text-shadow: -1px -1px #FCAC52, 1px 1px #8E510C, -3px 0 4px #000;
  font-family:Arial, Helvetica, sans-serif;
  color:#FA8500;
  padding:16px;
  font-weight:lighter;
  text-align:center;
  display:block;
  margin:5px; 
}
.bouton_boxe_message {
	float: right; clear: both; cursor: pointer;
	
	font-size: 14px;
	font-family: "Plantagenet Cherokee", calibri, serif;
	color: #2d2d2d;
	line-height: 28px;
	border: 1px solid white;
	background-color:yellow;
	text-align: center;
	
	padding-left: 15px;
	padding-right: 15px;
	margin-right: 7px;
	margin-left: 10px;
	margin-bottom: 10px;
	min-width: 120px;
	border-radius: 4px;
}
.bouton_boxe_message:hover {
	background-position: 0 -80px;
	color: #444444;
}
.bouton_boxe_message a {
	text-decoration: none;
	display: block;
}
.bouton_boxe_message a:hover {
	 color: #444444;
}
.cadre_cache {
	background-color:grey;
	border-radius:6px;
	border:2px dashed silver;
}
.menu_interne a {
	display: block;
	background-color:grey;
	border-radius:6px;
	border:2px dashed white;
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	margin:10px;
	color:silver;
}
.menu_interne a:hover {
	display: block;
	background-color:silver;
	border:2px dashed orange;
	border-radius:6px;
	text-decoration: none;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	margin:10px;
	color:#dc7b00;
	font-size: 150%;
}
.infobulle { cursor: pointer; }
.infobulle .disparaitre {
	position: absolute; display: none; z-index: 100; margin-top: -5px;
	background: white; border: 1px solid #B49B7A;
}
.infobulle .reaparaitre:hover .disparaitre{ display: block; }

.infobulle .reaparaitre:hover .disparaitre { color: #383838; }
.infobulle img { vertical-align: middle; }
.infobulle.statistique table { margin: 0px; border: none; }
.infobulle.statistique table th, .infobulle.statistique table td { border: none; padding-right: 7px; background: white; line-height: 20px; width: auto; }
.infobulle.statistique table th:first-child, .infobulle.statistique table td:first-child { width: 230px; }

.toggle-button {
  position: relative;
  display: inline-block;
  color: #fff; }
  .toggle-button label {
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left; }
  .toggle-button input {
    display: none; }
  .toggle-button__icon {
    cursor: pointer;
    pointer-events: none; }
    .toggle-button__icon:before, .toggle-button__icon:after {
      content: "";
      position: absolute;
      top: 45%;
      left: 35%;
      transition: 0.2s ease-out; }
.toggle-button--aava label {
  height: 50px;
  line-height: 50px;
  transition: all 0.2s;
  border-radius: 2rem; }
  .toggle-button--aava label:before, .toggle-button--aava label:after {
    position: absolute;
    right: 1.5rem;
    transition: all 0.2s .1s ease-out; }
  .toggle-button--aava label:before {
    content: attr(data-on-text); }
  .toggle-button--aava label:after {
    content: attr(data-off-text); }

.toggle-button--aava input[type=checkbox] + label {
  width: 120px;
  background: #FF5335; }
  .toggle-button--aava input[type=checkbox] + label:before {
    opacity: 0;
    transform: translate(0, 20px); }
  .toggle-button--aava input[type=checkbox] + label:after {
    opacity: 1;
    transform: translate(0, 0); }

.toggle-button--aava input[type=checkbox]:checked ~ label {
  width: 120px;
  background: #61B136; }
  .toggle-button--aava input[type=checkbox]:checked ~ label:before {
    opacity: 1;
    transform: translate(0, 0); }
  .toggle-button--aava input[type=checkbox]:checked ~ label:after {
    opacity: 0;
    transform: translate(0, -20px); }

.toggle-button--aava input[type=checkbox]:checked ~ .toggle-button__icon:before {
  transform: translate(-10%, 100%) rotate(45deg);
  width: 16.66667px; }

.toggle-button--aava input[type=checkbox]:checked ~ .toggle-button__icon:after {
  transform: translate(30%) rotate(-45deg); }

.toggle-button--aava .toggle-button__icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 50px;
  width: 50px; }
  .toggle-button--aava .toggle-button__icon:before, .toggle-button--aava .toggle-button__icon:after {
    height: 3px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }
  .toggle-button--aava .toggle-button__icon:before {
    width: 25px;
    transform: rotate(45deg); }
  .toggle-button--aava .toggle-button__icon:after {
    width: 25px;
    transform: rotate(-45deg); }
/* ----------------------- Centre ------------------------------- */
/* ----------------------- Menu droite ------------------------------- */
#menu_droite {
	display: inline-block;
	width: 10%;
	height:600px;
	float:right;
	max-width:200px;
	position:relative;
	background: linear-gradient(to right, #eee0b3, #b28f52);
	border:1px solid orange;
	border-radius: 1px;
}
/* ----------------------- Menu droite ------------------------------- */

.pagination_listing {
	text-align: center;
	margin-top: 15px;
	margin-bottom: 10px;
}
.pagination_listing a {
	text-decoration: none;
}
.pagination_listing img {
	vertical-align: middle;
	margin-top: -2px;
}
.pagination_listing ul {
	overflow: hidden;
}
.pagination_listing li {
	display: inline-block;
	min-width: 20px;
}
/* ----------------------- Footer ------------------------------- */
#footer {
	width: 76%;
	margin-left:13%;
	display: inline-block;
}
/* ----------------------- Footer ------------------------------- */