/*
marron : #A05901
vert fonce : #B2CB00
vert clair : #CCEF15

*/

body
{
	background-color: #B2CB00;
	background-image:url("../images/fondecran/siteimka.jpg");
	background-position: center;
	background-repeat: no-repeat;
	font-family: Arial, Verdana, serif;
	font-size: 1em;
	width: 1024px;
	height: 768px;
	margin: auto; /* Pour centrer notre page */
	margin-top: 0px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
	margin-bottom: 0px;    /* Idem pour le bas du navigateur */
}




.haut
{
	float: left;
	width: 100%;
	height: 80px;
	text-align: center;
	font-size: 0.9em;
}

/* Design du paragraphe du bas */
.bas
{
	float: left;
	position: relative;
	top: 75px;
	left: 200px;
	width: 572px;
	text-align: center;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}

.bas a 
{
	color: black;
	font-weight: bold;
}

.bas a:hover, .bas a:focus
{
	color: black;
	font-weight: bold;
}

.image_artiste
{
	float: left;
	width: 100px;
	height: 100px;
	margin: 0px 10px 0px 0px;
	padding: 0px 0px 0px 0px;
}

a#retour_accueil
{
	display: block;
	height:100px;
	width: 260px;
	position: relative;
	left: 75px;
	top: 10px;
}

#outils
{
	border: none;
	height: 20px;
	width: 20px;
}

/* Design de la section avenir*/

div#avenir
{
	position: relative;
	left: 160px;
	top: 50px;
	float : left;
	width : 220px;
	height: 490px;
	border : none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}
div.avenir
{
	height: 155px;
	width: 220px;
	overflow: hidden;
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
}

div.avenir h3
{
	font-size: 1em;
	font-weight: bold;
	border: none;
	text-align: center;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

div.avenir p
{
	font-size: 0.8em;
	font-weight: normal;
	text-align: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.image_avenir
{
	float: left;
	width: 70px;
	height: 70px;
	border: none;
	margin: 5px 5px 5px 5px;
	padding: 0px 0px 0px 0px;
}

a.lien_vers_la_suite
{
	font-size: 1 em;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

/* Design de la section contenu (la partie principale) */

div#contenu
{
	font-size: 0.9em;
	position: relative;
	top: 45px;
	left: 165px;
	width: 455px;
	height: 475px;
	overflow: auto;
	float: left;
	padding: 10px 10px 10px 10px;
	margin: 0px 0px 0px 0px;
}

div#contenu h1
{
	width: 430px;
	text-align: center;
	font-size: 1.1em;
	color: #CCEF15;
	background-color: #A05901; 
	padding: 0px 0px 0px 0px;
	margin: auto;
}

div#contenu h2
{
	width: 430px;
	text-align: center;
	font-size: 1em;
	color: #A05901;
	background-color: #CCEF15; 
	padding: 0px 0px 0px 0px;
	margin: auto;
}

div#contenu p
{
	width: 430px;
	font-size: 0.9em;
	color: black;
	background-color: white;
	padding: 0px 0px 0px 0px;
	margin: auto;
	margin-bottom: 20px;
}


/* Design du menu*/
div#menu ul.niveau1 {position: relative; float: left; top: -25px; left: 360px; z-index:100; border-top: 1px solid black; border-left: 1px solid black;}
div#menu a {color:#000000; font-weight: bold; font-size: 1.1em; border-bottom: 0.5px solid black;}
div#menu ul {padding: 0; margin:0px; background: white; text-align:center}
div#menu li {background:#A05901}
div#menu li:hover {background: #B2CB00}
div#menu li.sousmenu:hover {background: #B2CB00;}
/* rejout couleur de fond */
div#menu li.sousmenu {background: 95% 50% no-repeat; background-color:#A05901;}
/* rajout pr pour fleche direction bas et couleur de fond*/
div#menu li.plop { background: 95% 50% no-repeat #A05901; border-right: 1px solid black;}

/* une petite bordure en top*/
div#menu ul li {position:relative; float: left; list-style: none;}

div#menu ul ul {position: absolute;display:none; width:100px}
div#menu li a {text-decoration: none; padding: 4px 0 4px; display:block;width:100px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top: -1px; left: 101px; border-top: solid black 1px;}

div#menu ul.niveau2 li {background-color: #CCEF15; border-right: solid 1px black; border-left: solid 1px black; position: relative; left:-1px;}
div#menu ul.niveau2 li:hover{background-color: #B2CB00;}

/* rajout de couleur de fond et de survol */
div#menu ul.niveau3 li { background: #99CCCC}
div#menu ul.niveau3 li:hover { background: #99CC00}


/* ### Design du calendrier ### */

.centre {
	text-align: center;
}

h1 {
	text-align: center;
}

.code {
	border: 1px dotted black;
	padding: 5px;
}


/* Calendrier */

table.calendrier {
	float:left;
	margin: 10px 10px 10px 10px;
	text-align: center;
	border: 1px solid black;
	border-collapse: collapse;
	font-style: arial;
	font-size: 0.9em;
}

table.calendrier th {
	border-bottom: 1px solid black;
}

table.calendrier td {
	border: 1px solid black;
	width: 22px;
	height: 22px;
}

table.calendrier td div {
	padding: 0px;
}

.jourEvenement {
	background-color: rgb(112, 121, 241);
}

.lienCalendrierJour {
	background-color: rgb(203, 206, 250);
}

.calendrier caption {
	margin: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}





/* Infobulles */
a.info {
	position: relative;
	color: black;
	text-decoration: none;
	display: block;
}
a.info span {
	display: none; /* on masque l'infobulle */
}
a.info:hover {
	background: none; /* correction d'un bug IE */
	z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
}
a.info:hover span {
	display: inline; /* on affiche l'infobulle */
	position: absolute;

	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

	top: 20px; /* on positionne notre infobulle */
	left: 30px;
	
	text-align: left;
	background: white;
	padding: 3px;
	border: 1px solid black;
}

#photo_bar{

	align : center;
}

#photo_nanou {
	float: right;
	height: 275px;
	width: 200px;
}

#photo_jojo {
	float: right;
	height: 275px;
	width: 200px;
}