/* TRBL couleurs utilisées :
rouge : #cc0033
jaune : #ffcc66 - jaune pâle : #faefb9
marron : #ad0000 - marron pied page : #800000
bleu : #425ec5    */

html, body {
height:100%; /* page occupe toute la hauteur de la fenêtre*/
padding:0; /* pour Opéra qui défini des marges par défaut au body */
margin:0;
background:#ffcc66;} 
	
div#global { 
position:relative;
min-height:100%;  /* page occupe toute la hauteur de la fenêtre*/
width:850px;
margin: 0 auto ; /*centre la page*/
padding: 0 10px;
text-align:center; /* pour IE, pour centrer la page*/
	} 

#global img {border: 0 none;} /* elimine le cadre bleu entourant les images cliquables*/

#global li{list-style-type:none;}

/*2 col d'en-tête  hauteur mini250px -------------------------------------- */
div#header {
overflow:auto; /* oblige à englober les div flottant dans calcul de sa hauteur = contexte de formatage*/
min-height:300px;
margin-bottom:0px;}

div#titre {
float:left;
width:640px;
background: url(../images/confettis_header.gif) top left no-repeat;
}
	
#titre img {
margin: 100px 0 30px 0;} 

div#logo, div#logoalb {
float:right;
width:190px;
}

#logo img {
margin: 100px 0 0 50px;} 

#logoalb img {
margin: 50px 0 0 0; }

/* 2 col de corps, hauteur variable----------------------------*/
#corps {
overflow:auto; /* oblige à englober les div flottant dans calcul de sa hauteur = contexte de formatage*/
padding-bottom:50px;
width:850px;
min-height:400px;}

#contenu{
float:left;
width:630px;
height:auto;}

#menugeneral {
float:left;
width:200px;
height:auto;
margin: 50px 0 0 0;
background: url(../images/confettis_nav.jpg) top left no-repeat; }

ul.menugeneral {
background:none;
background-position: bottom;
margin:auto 0; padding: 0  0 0 25px;
font:bold 90% Verdana, Arial, Helvetica, sans-serif;
text-align: right; }

.menugeneral li {
display: inline; margin:0 ; color: black; }

.menugeneral a {
display:block;
margin: 12px 5px 12px 5px;
color:black; text-decoration:none; 
line-height:20px;
text-align:right; }

.menugeneral a:hover {
color:#AA0000; }

/* sous menu formation---------------------------------------------*/

ul#ssmenu1 {   
width:100%;
margin:0 0 50px 0; 
font:bold 90% 'Trebuchet MS', 'Comic sans MS', sans-serif; 
text-align:center;
text-decoration:none;
border-top: 1px solid white ;
text-indent:0;}

#ssmenu1  li {
float:left;
width:auto;
margin:0 8px 2px 8px; 
color:#cc0033 ;
background:#faefb9;
text-align:center;
text-decoration:none ;}

#ssmenu1  a {
display: block ;
color: #cc0033;
line-height:1em;
padding:0 2px;
border-left:1px solid white;
border-right:1px solid white;
border-bottom: 1px solid white;
text-align:center;
text-decoration:none ;}

#ssmenu1  a:hover  {
background:#faefb9 ;
color:#425ec5; 
text-decoration:none;}

/* sous menu créations---------------------------------------------*/
ul#ssmenu2 {   
width:100%;
margin:0 0 100px 0; 
font-family: 'Trebuchet MS', 'Comic sans MS', sans-serif; 
text-align : center;
text-decoration: none;
border-top: 1px solid white ;
text-indent: 0;}

#ssmenu2  li {
float : left;
width: 150px ;
margin:0 20px;
color: #ffcc66 ;
background: #ffcc66;
text-align : center;
text-decoration: none ;}

#ssmenu2  a {
display: block ;
color: #ffcc66;
line-height: 1em ;
padding: 0 ;
text-align: center;
text-decoration: none ;}

#ssmenu2  a:hover  {
border-left:1px solid white;
border-right:1px solid white;
border-bottom: 1px solid white;
background: #faefb9 ;
color: #cc0033; 
text-decoration: none ;}


/* pied de page ----------------------------------------------------------------*/

div#footer{
margin: 0 auto;
text-align: center;}

/* menu vertical, texte brun */

ul#menuvertical {
margin:20px auto; padding: 0;
background-position: bottom;
font: 55% Verdana, Arial, Helvetica, sans-serif;
text-align: center; }

#menuvertical li {display: inline; margin:0 2px; color: #bf9fac; }

#menuvertical a {color: #800000; text-decoration: none; }

#menuvertical a:hover {color: #cc0033; }

/*remarque texte blanc*/
#remarque {
	margin:20px auto; padding: 0;
    font: 60% Verdana, Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: center; }

#remarque a {color: #fff; text-decoration: none; }
#remarque a:hover {color: #cc0033; }


/*titres --------------------------------------------------------*/
h1 {  /*texte centré gras rouge 100% */
margin: 0 auto 50px auto;
font: bold 110% Verdana, Arial, Helvetica, sans-serif;
color: #CC0033;
text-align: center;}

h2 {   /*texte centré gras brun 120% */
margin: 0 auto 50px auto;
font: bold 120% 'Trebuchet MS', 'Comic sans MS', sans-serif;
color: #ad0000;
text-align: center; }

h3 { /*texte centré normal rouge 130%*/
margin: 0 auto 50px auto;
font: 130% Verdana, Arial, Helvetica, sans-serif;
color: #CC0033;
text-align: center; }

h4 { /* texte gauche gras rouge 105% sur blanc à gauche, avec confettis, 400px */
float: left;
width: 400px;
margin: 0 0 2px 0 ; padding-left : 40px;
background: white url(../images/confettis_petits.jpg) top left no-repeat;
font: bold 105% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033; /* texte rouge*/
text-align: left;}

h5 {  /*texte gauche gras rouge 105% sur blanc décalé 100px à droite, avec confettis*/ 
float:left;
width: 400px;
margin: 0 0 2px 100px; padding-left : 40px;
background: white url(../images/confettis_petits.jpg) top left no-repeat;
font: bold 105% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033; /* texte rouge*/
text-align: left;}

h6  { /* texte centré gras rouge 100% sur blanc centré avec confettis, marge basse 20px*/
width: 400px;
margin: 0 auto 20px auto;
padding:2px 0 2px 0;
background: white  url(../images/confettis_petits.jpg) top left no-repeat; 
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033; 
text-align: center;}

/* paragraphes ------------------------------------------------- */

/*paragraphes centrés, texte centré*/
.pcrg80 { /*texte rouge gras 80%  */
font: bold 80% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033;
text-align: center; }
.pcrg80 a { color: #cc0033; }
.pcrg80 a:hover { color: white; }

.pcwg100 { /* texte blanc gras centré 100% */
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;}


.pcwn80 { /*texte blanc normal 80% */
font: 80% Verdana, Arial, Helvetica, sans-serif;
color: white;
text-align: center; }
.pcwn80 a { color: white; }
.pcwn80 a:hover { color : #cc0033; }


.pcng90 {  /* texte noir gras 90% */
margin: 0 0 20px 0;
font: bold 90% Verdana, Arial, HelvetiAca, sans-serif;
color: #black;
text-align: center; }
.pcng90 a { color: black; }
.pcng90 a:hover { color: white; }

.pcng902 {  /* texte noir gras 90% */
margin: 0 auto;
padding:5px;
font: bold 90% Verdana, Arial, HelvetiAca, sans-serif;
color: #black;
text-align: center; }
.pcng902 a { color: black; text-decoration: none; }
.pcng902 a:hover { color: white; }


.pcnn80 {  /* texte noir normal 80% */
margin: 0 0 20px 0;
font: 80% Verdana, Arial, HelvetiAca, sans-serif;
color: #black;
text-align: center; }
.pcnn80 a { color: black; }
.pcnn80 a:hover { color: white; }


/* paragraphes décalés à droite, texte à gauche*/
.pgd200ng80 {   /* texte noir gras 80%, décal 220px */
float:right;
margin-left:220px;
font:bold 80% Verdana, Arial, Helvetica, sans-serif;
color: black;
text-align: left; }
.pgd200ng80 a { color: black; }
.pgd200ng80 a:hover { color: white; }


.pgd160ng70 {   /* texte noir normal 70%, décal 160px (au centre) */
float:left;
margin:5px 0 30px 100px;
font:bold 80% Verdana, Arial, Helvetica, sans-serif;
color: black;
text-align: left; }
.pgd160ng80 a { color: black; }
.pgd160ng80 a:hover { color: #cc0033; }

.pgd160nn70 {   /* texte noir normal 70%, décalé 160px*/
float:left;
margin:5px 0 30px 100px;
width : 400px;
font: 70% Verdana, Arial, Helvetica, sans-serif;
color: black;
text-align: left; }


/* paragraphes à gauche, texte à gauche*/
.pgng80 {   /* texte noir gras 80%*/
float: left;
width: 450px;
font:bold 80% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
color: black;
text-align: left; }

.pgnn70 {   /* texte noir normal 70%, limité à 450px*/
float: left;
width: 450px;
margin:5px 0 30px 0;
font: 70% Verdana, Arial, Helvetica, sans-serif;
color: black;
text-align: left; }

.pgnn702 {   /* texte noir normal 70%, */
margin:0;
font: 70% Verdana, Arial, Helvetica, sans-serif;
color: black;
text-align: left; }

.pgnr80 { /* texte rouge normal 80% */
font: 80% Verdana, Arial, Helvetica, sans-serif;
margin:0;
color: #cc0033;
text-align: left; }
.pgnr80 a { color : #cc0033; text-decoration: none; }
.pgnr80 a:hover{ color : #800000; }

.pggr80 { /* texte rouge normal 80% */
margin:0;
font:bold 80% Verdana, Arial, Helvetica, sans-serif;
margin:0 0 10px 0;
color: #cc0033;
text-align: left; }

/* textes sur fond--------------------------------------------------------- */

/* avec image conte vivant ou confettis ou taches*/
.egvivant1, .ecconf3{  /* texte gauche rouge gras 105 % sur blanc, largeur 400px, à gauche*/ 
float: left;
width: 400px;
margin:0 0 5px 0;
font: bold 105% Verdana, Arial, Helvetica, sans-serif;
color: black; 
text-align: left;}
.ecconf3 { background: #fff url(../images/confettis_petits.jpg) left no-repeat;}
.egvivant1 {background: #fff url(../images/cvivant_rect.gif) left no-repeat;}

.egvivant2, .ecconf4, .ectaches1 {   /*texte droite noir gras 105 % sur blanc, largeur 300px, à droite décal 200px à gauche */
width: 400px;
margin-left:200px;
font: bold 105% Verdana, Arial, Helvetica, sans-serif;
color: black;
text-align: right;}
.egvivant2 {background: #fff url(../images/cvivant_rect.gif) right no-repeat;}
.ecconf4 {background: #fff url(../images/confettis_petits.jpg) right no-repeat;}
.ectaches1 {background: #fff url(../images/taches_rect_petit.png) right no-repeat;}

.ecconf1 { /* texte rouge gras centré 100% sur blanc centré, confettis*/
margin: 0 auto;
padding:10px;
width: 600px;
background: white  url(../images/confettis_petits.jpg) top left no-repeat; 
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033; 
text-align: center;}
.ecconf1 a  { color : #ad0000; text-decoration: none; }
.ecconf1 a:hover { color : #ffcc66; }


.egvivant3 { /* texte rouge gras centré 100% sur blanc centré, c vivant*/
margin: 0 auto;
padding:10px;
width: 600px;
background: white  url(../images/cvivant_rect.gif) top left no-repeat; 
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033; 
text-align: center;}

.egtaches3 { /* texte rouge gras centré 100% sur blanc centré, taches*/
margin: 0 auto;
padding:8px;
width: 600px;
background: white  url(../images/taches_rect.png) top left no-repeat; 
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033; 
text-align: center;}
.egtaches3 a { color : #cc0033; text-decoration: none; }
.egtaches3 a:hover {color : #ffcc66; }

.ecconf2  { /* texte brun gras centré 90% sur fond blanc centré, confettis*/
margin: 0 auto;
padding:10px 0 10px 20px;
background: white  url(../images/confettis_petits.jpg) top left no-repeat; 
font: bold 90% Verdana, Arial, Helvetica, sans-serif;
color: #800000; 
text-align: center;}
.ecconf1 a, .ecconf2 a, .ecconf4 a, .egvivant1 a, .ectaches1 a { color : #cc0033; text-decoration: none; }
.ecconf1 a:hover, .ecconf2 a:hover, .ecconf4 a:hover, .egvivant1 a:hover, .ectaches1 a:hover {color : #ffcc66; }

.egecrit1 { /* texte rouge gras centré 100% sur blanc centré, taches*/
margin: auto auto;
padding:30px 0 0 105px;
height : 140px;
background:  url(../images/taches.png) top left no-repeat; 
font: bold 180% Verdana, Arial, Helvetica, sans-serif;
color: #000; 
text-align: left;}

.egecrit12 { /* texte rouge gras centré 100% sur blanc centré, 2taches*/
margin: auto auto;
padding:70px 0 ;
height : auto;
background:  url(../images/taches12.png) top center no-repeat; 
font: bold 180% Verdana, Arial, Helvetica, sans-serif;
color: #000; 
text-align: center;}

/*encadrement à gauche, texte à gauche*/
.eg1  {   /*  texte gauche jaune gras 100%  sur rouge , décalé 30px, padding 30px */
margin: 0 30px 0 30px;
padding:30px 30px 30px 30px;
background: 50% #cc0033 ; 
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #ffcc66;
text-align: left;}
.eg1 a { color : white; text-decoration: none; }
.eg1 a:hover { color : #ffcc66; }

.eg2  {   /*  texte gauche jaune gras 90%  sur rouge , décalé 30px, padding 2px */
margin: 0 auto;
width: 600px;
padding:2px;
background: 50% #cc0033 ; 
font: bold 90% Verdana, Arial, Helvetica, sans-serif;
color: #ffcc66;
text-align: left;}
.eg2 a { color : white; text-decoration: none; }
.eg2 a:hover { color : #ffcc66; }

/*encadrement centré, texte centré gras sur rouge*/
.ec1, .ec2, .ec3, .ec4, .ec6 {   
width: 600px;
margin: 0 auto;
padding:2px;
background:#cc0033;
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
text-align: center;}
.ec1 a, .ec2 a, .ec3 a, .ec4 a, .ec6 a {color : white; text-decoration: none; }
.ec1 a:hover, .ec2 a:hover, .ec3 a:hover, .ec4 a:hover, .ec6 a:hover { color : #ffcc66; }

.ec1 { color: #ffcc66; font-size : 90%;}   /*texte jaune 90%*/
.ec2 { color: white; font-size : 90%;}    /* texte blanc  90%*/
.ec3 { color: white; font-size : 60%;}  /* texte blanc 60%*/
.ec4 { color: #ffcc66; font-size : 105%;}   /* texte jaune 105%*/
.ec6{color: white;}
 
.ec5{   /* texte normal 130% rouge sur jaune pale*/
margin: 0 auto;
padding:2px;
background: 50% #faefb9; 
color : #cc0033;
font: 130% bold Verdana, Arial, Helvetica, sans-serif;
text-align: center;}

.ec7 {   /* texte gras sur rouge*/
width: 500px;
margin: 0 0 0 15px;
padding:30px;
background: #cc0033 ; 
font: bold 90% Verdana, Arial, Helvetica, sans-serif;
color: white;
text-align: left;}
.ec7{ color : white; text-decoration: none; }
.ec7{ color : #ffcc66; }

.ec8 {   /* texte gras sur rouge*/
width: 500px;
margin: 0 0 0 15px;
padding:30px;
background: #cc0033 ; 
font: bold 90% Verdana, Arial, Helvetica, sans-serif;
color: white;
text-align: center;}
.ec8 a{ color : white; text-decoration: none; }
.ec8 a:hover{ color : #ffcc66; }


/*encadrement centré, texte centré, largeur limitée*/
.ect1 {   /* texte blanc gras 90% sur rouge, largeur 600px*/
margin: 0 auto;
padding:2px;
background: #cc0033 ; 
width: 600px;
font: bold 60% Verdana, Arial, Helvetica, sans-serif;
color: white; 
text-align: center;}
.ect1 a{ color : white; text-decoration: none; }
.ect1 a:hover{ color : #ffcc66; }

.ect2 {  /* texte rouge gras 100% sur jaune pâle, largeur 600px*/
margin: 0 auto;
padding:5px;
background: 50% #faefb9;
width: 600px;
border: 1px solid white;
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033; 
text-align: center;}
.ect2 a  { color: #cc0033; text-decoration: none; }
.ect2 a:hover { color: #ffcc66; }

.ect3, .ect4 { /* texte blanc gras centré 100% sur fond rouge, largeur 400px%*/
width: 400px;
margin: 0 auto;
padding:2px;
background: #cc0033; 
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;}
.ect3 {font-size : 90%}
.ect4 {font-size : 100%}

/*encadrement à gauche, texte à gauche, largeur limitée*/
.egt1{ /*texte normal noir 105 % sur rouge, largeur 400px */ 
float: left;
width: 400px;
border:1px solid #cc0033;
font: 105% Verdana, Arial, Helvetica, sans-serif;
color: black;
text-align: left;}

/*encadrement à gauche, texte centré, largeur limitée*/
.egt2, .egt4{ /*texte normal noir 80% sur rouge, */ 
float: left;
width: 200px; /*largeur 200px*/
height : auto;
margin: 0 0 20px 30px;
padding: 10px 10px;
border:1px solid white;
background: #cc0033 ; 
font: 80% Verdana, Arial, Helvetica, sans-serif;
color: black;
text-align: center;}
.egt4 {width: 250px; margin: 10px 0 10px 30px;} /*largeur 250px*/

.egt3, .egt5  {   /*texte normal noir 80% sur rouge, largeur 200px, décalé 100px */ 
float:right;
width: 200px;
height : auto;
margin: 0 30px 20px 0;
padding: 10px 10px;
border:1px solid white;
background: #cc0033 ; 
font: 80% Verdana, Arial, Helvetica, sans-serif;
color: black;
text-align: center;}
.egt5 {width: 250px;margin: 10px 10px 10px 0 ; }

.egt2 a, .egt3 a, .egt4 a, .egt5 a  {color: white; text-decoration: none; }
.egt2 a:hover, .egt3 a:hover, .egt4 a:hover, .egt5 a:hover {color: #ffcc66; }

.egt6, .egt7{ /*texte normal noir 80% sur jaune */ 
width: 250px; 
height : auto;
margin: 0 0 20px 30px;
padding: 10px 10px;
border:3px solid #fff;
background: #ffcc66 ; 
font: bold 80% Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: center;}
.egt6 {float: left; margin: 10px 0 10px 30px;} 
.egt7 {float: right; margin: 10px 10px 10px 0 ;} 

.egt6 a, .egt7 a   {color: #000; text-decoration: none; }
.egt6 a:hover, .egt7 a:hover {color: #fff; }


/*divers ------------------------------------------------------------*/
.lettrine {font-size:150% ;}
.lettrinern {font-size:150%; color :#cc0033;font-weight:normal;}
.lettrine2 {font-size:130%;}
.lettrine2r {font-size:130% ;color:#cc0033;}

.t80 { font-size:80%;}
.t140 { font-size:140%;}
.t180 { font-size:180%;}
.t70 { font-size:70%;}
.t50 { font-size:50%;}
.tn70 { font-weight: normal; font-size: 70%;}
.t50c {font-size:50%;  text-align:center; padding:10px 0 0 50px;}
.t50cb {font-size:50%; color: #fff; text-align:center; padding:10px 0 0 100px;}
.gras {font-weight: bold;}

.gm {font-weight: bold; color: #800000;} /*gras et marron*/

.rouge { color: #cc0033;} /* rouge*/
.rougeg {color: #cc0033; font-weight: bold;} /* rouge gras*/
.rougeg120 {color: #cc0033; font-weight: bold; font-size: 120%;}
.rougep {font-weight : normal; color : #cc0033; font-size: 80%;}
.rougeg120conf {color: #cc0033; font-weight: bold; font-size: 120%; background:url(../images/conf9.png) top left no-repeat; padding: 0 0 30px 30px; }

.jaune {color: #ffcc66;}
.jauneg {color: #ffcc66; font-weight: bold;}
.jaunegrand {color: #ffcc66; font-size: 100%;font-weight: bold;}

.blanc { color: #fff;} /* blanc*/
.blanc a { color : white; text-decoration: none; }
.blanc a:hover { color : #ffcc66; }
.blancgrand {font-size: 100%; color : white;}
.blancg {font-weight : bold; color : white;}

.bleu {color: #425EC5;}
.gb { font-weight : bold; color: #425EC5;} /*gras et bleu*/
.gbp { font-weight: bold; font-size: 70%; color: #425EC5;} /*gras et bleu, petit*/
.t100gbl { font-weight: bold; font-size: 120%; color: #fff;} /*gras et blanc, 100%*/
.noir {color: black;}
.tnoirn { font-weight: normal; color: black;}

.c08c11e {color: #08c11e;} /* vert*/
.bc08c11e {padding:0 55px 0 7px; color: #08c11e; background: #fff url(../images/taches_rect-petit2_perf.png) bottom right no-repeat;} /* vert*/ 
.ff6633 {color: #ff6633;}  /* orange*/
.ff66ff {color: #ff66ff;}  /* rose*/
.ffff99 {color: #ffff99;} /* jaune*/
.c00ffff {color: #00ffff;} /* turquoise*/
.ff0000 {color: #ff0000;} /* rouge orange*/
.faefb9 {color: #faefb9;} /* jaune pale*/
.c990499{color: #990499;}  /* violet*/
.bc990499 {padding:0 7px 0 55px; color: #990499; background: #fff url(../images/taches_rect-petit2.png) bottom left no-repeat;} /* vert*/ 

.fondj {background: #faefb9;}

.roue {float: right;}

.roue1 {
float: left; margin: 0 0 0 50px;}

.for_inscr {float: right; }

/*tableau-----------------------------------------------------------------------------------*/
table {
border-collapse:collapse;
empty-cells:show;
width:100%;
margin:auto;}

td {border: none; padding: 10px}

.tdblanc {
border: solid white 2px;
background-color : white;
font:bold 90% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033; 
text-align: center;
padding: 10px 10px;}
.tdblanc a  {color: #cc0033; text-decoration: none; }
.tdblanc a:hover {color: #425ec5; }

.tdrouge {
border: solid white 2px;
background-color: #cc0033;
font: 90% Verdana, Arial, Helvetica, sans-serif;
color: #ffcc66;
text-align: center;
padding: 20px 20px;}

.tdjaune {
border: solid white 2px;
background-color: #ffcc66;
font: 90% Verdana, Arial, Helvetica, sans-serif;
color: #cc0033;
text-align: center;
padding: 20px 20px;}

.tdjaune a, .tdrouge a  {color: white; }
.tdrouge a:hover, .tdjaune a:hover {color: white; }