/* Body */

body {
width:100%;
margin: 0pt;
padding: 0pt;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
background-color: #ffffff;
background-position: center top;
}

.conteneur {
margin: none;
position: relative;
width: 960px;
}

.scroller {
margin: none;
position:absolute; 
left: 120px; 
top:140px;

}

/* ---------------------------..........--------------------------------- */

 /* Boutons */

.rose a
{
	position:absolute; 
	left: 80px; 
	top:180px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/rose.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.rose a:hover
{
	background: url(../images/rose.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.violet2 a
{
	position:absolute; 
	left: 220px; 
	top:180px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/violet2.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.violet2 a:hover
{
	background: url(../images/violet2.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.orange a
{
	position:absolute; 
	left: 620px; 
	top:495px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/orange.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.orange a:hover
{
	background: url(../images/orange.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.rouge a
{
	position:absolute; 
	left: 760px; 
	top:495px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/rouge.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.rouge a:hover
{
	background: url(../images/rouge.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.bleu a
{
	position:absolute; 
	left: 400px; 
	top:160px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/bleu.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.bleu a:hover
{
	background: url(../images/bleu.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}


.bleuedito a
{
	position:absolute; 
	left: 400px; 
	top:160px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/bleuedito.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.bleuedito a:hover
{
	background: url(../images/bleuedito.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.bleuvif a
{
	position:absolute; 
	left: 540px; 
	top:160px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/bleuvif.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.bleuvif a:hover
{
	background: url(../images/bleuvif.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.turquoise a
{
	position:absolute; 
	left: 680px; 
	top:160px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/turquoise.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.turquoise a:hover
{
	background: url(../images/turquoise.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.turquoiseprogramme a
{
	position:absolute; 
	left: 680px; 
	top:160px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/turquoiseprogramme.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.turquoiseprogramme a:hover
{
	background: url(../images/turquoiseprogramme.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}


.vert a
{
	position:absolute; 
	left: 820px; 
	top:160px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/vert.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.vert a:hover
{
	background: url(../images/vert.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.or a
{
	position:absolute; 
	left: 130px; 
	top:515px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/or.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.or a:hover
{
	background: url(../images/or.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.jaune a
{
	position:absolute; 
	left: 270px; 
	top:515px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/jaune.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.jaune a:hover
{
	background: url(../images/jaune.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}

.azur a
{
	position:absolute; 
	left: 410px; 
	top:515px; 
	width=100%; 
	z-index:1; 
	alt="";
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 130px ;
	line-height: 62px ;
	background: url(../images/azur.jpg); no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: none;
}

.azur a:hover
{
	background: url(../images/azur.jpg) no-repeat 0 -62px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: none;
}
/* -------------------...............-------------------- */

img{border:0;}

/* -------------------...............-------------------- */

/* div */

.col-centrale {position:absolute; z-index:2; top:200px; left:395px; text-align: justify; margin-left:5px ; width:560px; color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none;}
.col-bottomright {position:absolute; z-index:2; top:580px; left:620px; text-align: middle; margin-left:15px ; width:300px; color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none;}
.col-bottomrighttext {position:absolute; z-index:3; top:550px; 
left:620px; margin-left:15px ; width:220px; color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none;}
.col-bottomleft {position:absolute; z-index:2; top:550px; left:280px; 
text-align: justify; margin-left:0px ; width:150px;}
.col-bottomlefttexte {position:absolute; z-index:3; top:565px; 
left:120px; text-align:justify; margin-left:12px ; margin-top:68px; width:230px;}
.col-bottomlefttexte2 {position:absolute; z-index:3; top:570px; 
left:120px; text-align:justify; margin-left:12px ; margin-top:105px; width:335px;}
.col-lefttexte {position:absolute; z-index:3; top:200px; left:70px; text-align: middle; margin-top:60px; width:130px;}
.col-lefttexte2 {position:absolute; z-index:3; top:180px; left:120px; text-align: middle; margin-top:60px; width:180px;}
.col-left {position:absolute; z-index:2; top:220px; left:185px; text-align: middle; margin-left:5px ; width:300px; color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none;}
.bandeau_haut {position:absolute; top:0px; left:50px;}
.headerbis {position:absolute; top:10px; left:0px;}
.boxleft{position:absolute; left: 80px; top:215px; width=100%; z-index:2; alt="";}
.boxright {position:absolute; left: 360px; top:195px; width=100%; z-index:2; alt="";}
.boxleftbottom {position:absolute; left: 120px; top:550px; width=100%; 
z-index:2; alt="";}
.boxrightbottom {position:absolute; left: 620px; top:530px; width=100%; 
z-index:2; alt="";}
.boxbottom {position:absolute; top:800px; left:50px;}
.boxbottomtexte {position:absolute; top:802px; left:80px;}
.boxbottompretexo {position:absolute; top:802px; left:830px;}
.page {position:absolute; top:73px; left:0px;}



/* -------------------...............-------------------- */

/* texte */

.title1 {color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14pt;font-weight:bold; text-decoration:none;}
.texte {color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none; text-align: justify;}
.texte2 {color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none; text-align: justify; margin-left:45px; margin-right:10px;}
.texte3 {color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none; text-align: justify; margin-right:10px;}
.texteleft {color:#556268; line-height:150%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9pt; text-decoration:none; text-align: justify;}
.texteeca {color:#000000; line-height:140%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9pt; text-decoration:none; text-align: middle; font-weight:bold;}
.nom {color:#009999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; font-weight:bold; text-decoration:none;}
.gallerie {color:#009999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; font-weight:normal; text-decoration:none;}
.nom2 {color:#009999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14pt; font-weight:bold; text-decoration:none;text-align: justify; margin-left:45px; margin-right:10px;}
.nomeca {color:#ff6600; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; font-weight:bold; text-decoration:none;}
.nomprog {color:#ff6600; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12pt; font-weight:bold; text-decoration:none;}
.nomsession {color:#ff6600; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; font-weight:bold; text-decoration:none; etx-align:center;}
.textebottom {color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8pt; font-weight:bold; text-decoration:none;}
.pretexobottom {color:#ffffff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8pt; font-weight:bold; text-decoration:none;}
.petit {color:#009999; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8pt; font-weight:bold; text-decoration:none;}


/* -------------------...............-------------------- */
/* table */

td.eca {vertical-align:middle; text-align:center; font-color:#556268; line-height:130%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9pt; text-decoration:none;}
td.sep {background-color: #009999;}
td.prog {vertical-align:middle; text-align:center;}
td.session {color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none; text-align: justify; margin-right:10px;}
td.gallerie {vertical-align:middle; text-align:center; horizontal-align:center;}

/* -------------------...............-------------------- */

/* liens */

a.style1 {text-decoration: none; color:#ffffff;}
a.style1:hover {text-decoration: none; color:#ff6600;}

a.style2 {text-decoration: none; color:#009999;}
a.style2:hover {text-decoration: none; color:#ff6600;}

a.style3 {text-decoration: none; color:#ff6600;}
a.style3:hover {text-decoration: none; color:#009999;}

a.style4 {text-decoration: none; font-weight:bold; color:#009999; text-align:center;}
a.style4:hover {text-decoration:none; font-weight:bold; color:#ff6600; text-align:center;}

a.style5 {text-decoration: none; font-weight:normal; color:#009999; text-align:justify;}
a.style5:hover {text-decoration:none; font-weight:normal; color:#ff6600; text-align:justify;}

a.style6 {text-decoration: none; color:#ff6600; font-weight:normal; font-size=10px; text-align=justify;}
a.style6:hover {text-decoration: none; color:#009999; font-weight:normal; font-size=10px; text-align=justify;}



/* -------------------...............-------------------- */

/* listes */

li.orange{
list-style-type: none;
background-image: url(../images/borange.jpg);
background-repeat: no-repeat;
background-position: 30px 5px;
padding-left: 45px;
padding-right: 10px;
padding-bottom: 0px;
color:#556268; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:10pt;
}

li.prog{
list-style-type: circle; 
color:#556268;
padding-left: 45px;
padding-right: 10px;
padding-bottom: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:10pt;
font-weight:bold;
}

li.session{
list-style-type: circle; 
color:#009999;
padding-left: 45px;
padding-right: 10px;
padding-bottom: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:10pt;
font-weight:bold;
}

li.orange2{
list-style-type: none;
background-image: url(../images/borange.jpg);
background-repeat: no-repeat;
background-position: 5px 5px;
padding-left: 20px;
padding-right: 10px;
padding-bottom: 0px;
color:#556268; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:10pt;
}

li.lecture {list-style-type: circle; color:#556268; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10pt; text-decoration:none; text-align: justify; margin-left:45px; margin-right:10px; margin-bottom:10px;}