@charset "ISO-8859-1";
/* 	Les commandes dans ce fichier s'appliquent à tous les modèles sur tous les 
	sites. Au minimum, on peut les considérer comme des valeurs par défaut qui
	peuvent être remplacées dans un template (qui a précédence sur l'universel)
	ou par un CSS local (qui a précédence sur le template).
*/
/*********************/
/***** BUG-FIXES *****/
/*********************/
/* En HTML5, de l'espace vertical est systématiquement ajouté après une image, 
   ce qui est très pénalisant pour les images du haut et pour les puzzles. La 
   solution est le code suivant. */
img {
  display: block; }

.inline {
  display: inline; }

/*******************************************/
/***** OPTIONS PAR DÉFAUT RAISONNABLES *****/
/*******************************************/
body {
  margin: 0;
  padding: 0;
  background-color: #aaa;
  color: #000;
  height: 100%;
  font: normal 1em/1.5em Arial, Helvetica, sans-serif; }

html {
  height: 100%; }

a {
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

H1 {
  margin-top: 0;
  margin-bottom: 40px;
  text-align: center;
  line-height: 130%; }

H2, H3, H4, H5, H6 {
  text-align: left; }

H2 {
  margin-top: 1.5em;
  margin-bottom: 0.5em; }

H3 {
  margin-top: 1em; }

p {
  text-indent: 1.5em;
  margin: 0.5em 0 0.5em 0; }

ul li {
  margin: 0.5em 0 0.5em 0; }

ol li {
  list-style: decimal; }

ol ol li {
  list-style: lower-alpha; }

ol ul li {
  list-style-type: disc; }

/**********************************/
/***** DÉCORATIONS CLASSIQUES *****/
/**********************************/
a.stealth {
  color: #000; }

.nobullet ul {
  list-style-type: none; }

.nobullet ul li {
  margin-bottom: 30px; }

.oreilles_arrondies {
  -webkit-border-radius: 12 px;
  -moz-border-radius: 12 px;
  border-radius: 12 px;
  background-color: rgba(0, 0, 0, 0); }

.ombre_NSEO {
  /* De l'ombre projetée au nord, au sud, à l'est et à l'ouest */
  /* Ombres: h_offset, v_offset, blur_distance, spread_distance */
  box-shadow: 0 0 5px 5px #888; }

/*****************/
/***** FONDS *****/
/*****************/
.bg-metalBrosse01 {
  background-image: url("/lib/images/background/bg.metal-brosse.01.gif");
}

.bg-bois01 {
	background-image: url("/lib/images/background/bg.bois.01.jpg");
}

.bg-bois02 {
  background-image: url("/lib/images/background/bg.bois.02.jpg");
}

.bg-pacman01 {
  background-image: url("/lib/images/background/bg.pacman.labyrinth.01.gif");
}

.bg-bulles01 {
  background-image: url("/lib/images/background/bg.papier-bulles.01.jpg");
}

.bg-salamandre01 {
  background-image: url("/lib/images/background/bg.escher.salamandre.01.gif");
}

#nav {
	font: normal .8em/1.5em Arial, Helvetica, sans-serif;
	width: 100%;
	color: #f00;
    margin:     0 0 9px 0; /* top right bottom left */
	padding: 0;
	line-height: 100%;

	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;

	background: #8b8b8b;

	/* For webkit browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
	/* For firefox 3.6+ */
	background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a);

	border: 1px solid #6d6d6d;
}

#nav li {
	margin: 0 5px;
	padding: 4px;
	float: left;
	position: relative;
	list-style: none;
}
/* main level link */
#nav a {
	font-weight: bold;
	color: #e7e5e5;
	text-decoration: none;
	display: block;
	padding:  8px 20px; 
	margin: 0;

	-webkit-border-radius: 1.6em;
	-moz-border-radius: 1.6em;
	border-radius: 1.6em;

	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);

}
/* main level link hover */
#nav .current a, #nav li:hover > a {
	background: #d1d1d1; /* for non-css3 browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */

	color: #444;
/*	border-top: solid 1px #f8f8f8; Non: décale vers le bas ce qui suit */
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .2); 
	text-shadow: 0 1px 0 rgba(255, 255, 255, .8);

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	text-align: left;
	color: #666;
	display: block;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;

    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -o-transition: all 0.s;
    transition: all 0s;
}
#nav ul a:hover {
	background: #0399d4 !important; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba');
	background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important;
	background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important;

	color: #fff;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;

	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
	background: #ddd; /* for non-css3 browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
	background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */

	display: none;
	margin: 0;
	padding: 0;
	width: 185px;
	position: absolute;
	top: 35px;
	left: 0;
	border: solid 1px #b4b4b4;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
	display: block;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
	left: 181px;
	top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
	-webkit-border-top-left-radius: 9px;
	-webkit-border-top-right-radius: 9px;
	-moz-border-radius-topleft: 9px;
	-moz-border-radius-topright: 9px;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
}
#nav ul li:last-child > a {
	-webkit-border-bottom-left-radius: 9px;
	-webkit-border-bottom-right-radius: 9px;
	-moz-border-radius-bottomleft: 9px;
	-moz-border-radius-bottomright: 9px;
	border-bottom-left-radius: 9px;
	border-bottom-right-radius: 9px;
}
/* clearfix */
#nav:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
#nav {
	display: inline-block;
}
html[xmlns] #nav {
	display: block;
}
* html #nav {
	height: 1%;
}

body {
	font-family: "Lato";
}

/******************/
/***** CENTRE *****/
/******************/

.centrer {margin:auto;  width:1100px;  border-radius: 12px;;}

.maincolumn {min-height:90%;  line-height:130%;  background:white;
	padding: 0.5em 1em 1em 1em;
}

/* Pour le cas où l'on demande une page contenant une unique colonne. */
.one_column {
	background-color: #fff;
	color: #000; 
	line-height: 130%;
	padding: 0.5em 1em 1em 1em;

	/* Positionnement du bloc: laisser 20% à gauche et à droite */
	/* Et dans le autohandler: d'abord left, ensuite right, ensuite centre */
	width: 96%;
	margin-left: 1%;
	margin-right: 1%;
	min-height: 90%;
	height: 90%;

	/* Oreilles arrondies */
	border-radius: 12px;

	/* Ombres: h_offset, v_offset, blur_distance, spread_distance */
	box-shadow: 0 0 5px 5px #888;
}

/*	IE ne comprend pas 'min-height' ci-dessus, donc on lui met 'height'.
	Dans IE, 'height' n'est pas fixe: il s'adapte à la taille réelle.
	Inversement, FF fait déborder le texte au besoin et a donc besoin de 
	'min-height'.
	Comme ne comprend pas non plus html>body, on corrige ci-dessous ce qui
	posait problème ci-dessus...
html>body .centrer { 
	height: auto;
	min-height: 90%;
}
*/
html>body .one_column { 
	height: auto;
	min-height: 90%;
}

/*********************/
/***** CONNEXION *****/
/*********************/

.connexion {
    margin:     0 0 0 0; /* top right bottom left */
    padding:    0;
	text-align: center;
	text-indent: 0;
	color: #666;

	/* Oreilles arrondies */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;

	/* Ombres: h_offset, v_offset, blur_distance, spread_distance */
	-moz-box-shadow: 0 0 5px 5px #888;
	-webkit-box-shadow: 0 0 5px 5px #888;
	box-shadow: 0 0 5px 5px #888;
}
.connexion a {
	text-decoration: none;
	padding: 0; 
	display: block;
	color: #000;
}


/******************/
/***** DIVERS *****/
/******************/