@charset "utf-8"; /*
	css design by Xanedarel
	Je ne remercie pas InternetExplorer, qui fait tripler les temps de developpements
	Micro$oft ne respecte jamais les normes du W3C (dont ils font partie !) et ralentissent le monde du web depuis 20 ans
	Pour rire : analysez le respect du w3c par microsoft : http://validator.w3.org/check?uri=http%3A%2F%2Fmicrosoft.com
	Ceci étant dit bien fort, on peux passer à la description de cette page
	------------------------------------------------------------------------
	l'idée est de créer des lignes de zones, comme les cellules d'un tableau 
	Chaque cellule est en float-left, et la ligne se termine par un clear-both
	Cela permet de résoudre le problème des retours à la lignes des div relatives
	
	L'espacement entre différentes zones ne peut pas se faire avec des margin (merci Micro$oft)
	Pour résumer : on ne doit jamais voir des margin-left: 10px; c'est la foire assurée sur IE6, 7, et ses potes
	on va donc devoir ruser en utilisant des cales : classe cale10 (pour 10px)
		
	cette page, avec le fichier html, structure et spécifie le design, elle est organisée comme suit :
	BODY 
		PAGE (absolute)
			HAUT (relative, car c'est la première, et la seule DIV de la première ligne)
				ACTION 
				HAUT_IMAGE
				ARIANE 
			DROITE (ligne1, float-left)			
			CENTRE (ligne1, float-left)
			GAUCHE (ligne1, float-left, se termine par un br clear:both)
			PIED (ligne2, float-left)

*/

.clearfloat { /* Cette classe est capitale avant de recommancer une 'ligne' de DIV float-left
 cette classe peut s'attribuer à un simple br à l'extérieur de la dernière zone de la ligne */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

.cale10 { /* elle est relative car toute petite et transparente : pas de soucis de retours à la ligne */
	position: relative;
	float: left;
	margin: 0px; 
	padding: 0px;
	width: 10px;
	height: 10px;
	background-color: transparent;
}

html,body  {
  /*  background: #ffffff;*/
   background-color: #000000;
   margin: 0px; 
   padding: 0px;
   text-align: center;
   color: #000000;
   background: url(images_enseignants/fond_enseignants.jpg) top center  no-repeat;
   font-family: Geneva, Arial, Helvetica, sans-serif;
   font-size: 100%;
   font-weight: 100; /* plus sympa pour les gros titres, cela fait moins gras */
}
a  {
	text-decoration: none;
	color: #000;
}
#page {
	display: block;
	position: absolute;
	left: 50%; /* on cale la page à 50% de la largeur */
	width: 964px; /* largeur de la feuille, et donc largeur minimum du site */
	margin-left: -482px; /* puis on decale en pixels de la moitié de la largeur de la feuille : pour la CENTRER sur le body */
	background: white;
	text-align: left;
	font-size:11px;
	list-style-image: url(images_enseignants/fleche-magenta.png);
} 
img {
border: none;
} 

#haut {
	position : relative;
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	padding: 0px;
	width: 964px;
	/* la hauteur est action + haut_image + ariane ( 100+148+20 = 268)*/
	height: 258px;
	background: #dddddd;
} 

#action{
	position: absolute;
	left : 0px;
	top: 0px;
	background-image: url(images_enseignants/logo.jpg);
	height: 100px;
	width:964px;
	background-repeat: no-repeat;
	background-color: transparent;
	overflow: hidden;
} 
#action_contenu{
	position: absolute;
	left : 410px;
	top: 0px;
	height: 20px;
	width: 560px;
	border: none;
	padding: 0px;
	margin: 0px;
	font-size:10px;
	padding: 5px 5px 0px 5px;
} 

.action_border{
   border-left: 1px solid #7f7d7e;
   padding: 0px 5px 0px 5px;
}

#haut_image  {
	position: absolute;
	left : 0px;
	top: 100px;
	background-image: url(images_enseignants/fond_enseignants2.jpg);
	padding: 0px;
	margin: 0px;
	height: 148px; /* 148 */
	width: 964px;
}

#haut h1 {
	margin: 0;
	padding: 10px 0;
	font-size: 14pt;
	color:#9b0b77;
}

#fil_ariane {
	position: absolute;
	left :0px;
	top: 248px;
	width: 964px;
	height:16px;
	background-color: red;
	font-size:11px;
	padding: 2px 0;
	background-image:url(images_enseignants/ariane.jpg);
}

#gauche {
	float: left;
	margin-top: 10px;
	width: 227px; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
	padding: 20px 5px 0;
	overflow: hidden;
}

#centre {
	float: left;
	margin-top: 10px;
	width: 480px; /* 455 */
	text-align: left;
	font-size: 100%; 
	margin-left:0px;
	margin-right:0px; /* les 15px de margin right seront gérés chez DROITE */
	padding-left: 10px;
	padding-right: 12px;
	font-size: 11px;
	overflow: hidden;
} 

 


/*DROITE ------------------------------------------------------------------------------- */
#droite {
	float: left;
	margin: 0px;
	margin-top: -10px;
	padding:0px;
	width: 224px;
	color: black;
	background-color: white;
}
.droite_gris{
	position: relative;
	font-size: 10px;
	display: block;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	width: 224px;
	background-color: #efefef;
}
.droite_blanc_border{
	position: relative;
	font-size: 10px;
	display: block;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	width: 222px;
	background-color: white;
	border: solid 1px;
	border-color: #bcab99;
}
.droite_contenu{
	position: relative;
	text-align: left;
	display: block;
	margin-left: 10px;
	margin-top: 10px;
	bottom: 10px;
	padding: 0px;
	width: 204px;
	background-color: transparent;
	font-size: 11px;
}
.droite_bloc_rouge{
	position: relative;
	font-size: 4px;
	display: block;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	width: 224px;
	background-color: #f6dad6;
}
.droite_bloc_marron{
	position: relative;
	font-size: 4px;
	display: block;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	width: 224px;
	background-color: #786755;
}
.droite_bloc_contenu{
	position: relative;
	text-align: left;
	display: block;
	margin-left: 10px;
	margin-top: 0px;
	bottom: 1px;
	padding: 0px;
	width: 204px;
	background-color: transparent;
	font-size: 11px;
}
.titre_newsletter{
   color: #fff;
   font-size: 14px;
   text-transform: uppercase;
}
#droite_services{
	margin-top: -10px;
	margin-left:-10px;
	padding: 5px 0 0 10px;
	width: 214px;
	height: 22px;
	background-image: url(images_cnu/services.png);
	background-repeat:no-repeat;
	background-position:left center;
	background-color: #f6dad6;
	color: #e34031;
	font-size: 14px;
}

/* PIED ------------------------------------------------------------------------------- */ 
#piedpage {
	float: left;
	/* a cause de son design débordant de la page, on attribue une grande largeur et on le recentre
	la page fait 964, le pied fait 2000, ce qui fait une défférence de 1036, la moitié faisant 518 */
	width:964px;
	margin-left:0px; 
	background:#252525;
	padding: 10px 10px; 
}

.recrutement_candidat{
	position: relative;
	padding-left: 0px;
	display: block;
	top: 0px;
	left: 0px;
	width: 214px; /*cette zone à intégrer dans DROITE doit faire 2 px de moins que la largeur de la colonne soit 224-2*/
	background-color: #efefef;
	/* background: url(images_enseignants/qualification.png) bottom no-repeat; */
	font-size: 11px;
	color: black;
}
.droite_separateur{
	position: relative;
	padding-left: 0px;
	display: block;
	top: 0px;
	left: -10px;
	width: 222px; /* petite div pour tirer un trait */
	height: 1px;
	background-color: #9f9f9f;
	/* background: url(images_enseignants/qualification.png) bottom no-repeat; */
	font-size: 11px;
	color: black;
	overflow: hidden;
}
.grade{
	position: relative;
	display: block;
	top: 0px;
	left: 0px;
	width: 214px; /*cette zone à intégrer dans DROITE doit faire 2 px de moins que la largeur de la colonne soit 224-2*/
	/* background: url(images_enseignants/qualification.png) bottom no-repeat; */
	margin: 0px;
	overflow: hidden;
	font-size: 11px;
	color: black;
}

#gauche_titre {
	margin-left:-5px;
	width: 230px;
	height: 32px;
	background-color: #9b0b77;
	padding: 5px 0px;
	color: White;
	line-height: 16px;
	font-size: 14px;
	overflow: hidden;
}

ul.navigation li{
   list-style-image: url(images_enseignants/fleche-magenta.png);

}

#gauche_poste_titre{
	margin-left:15px;
	padding: 5px 0 0 10px;
	width: 204px;
	height: 22px;
	background-color: #616161;
	color: White;
	font-size: 14px;
}
#poste_titre {
	margin-left:15px;
	padding: 5px 0 0 10px;
	width: 204px;
	height: 22px;
	background-color: #616161;
	color: White;
	font-size: 14px;
}

#gauche_poste{
	margin-left:15px;
	padding: 0 0 0 10px;
	width: 204px;
	height:190px;
	background-color: #efefef;
	/* background-image: url(images_enseignants/poste.png); */
	color: #616161;
	font-size: 11px;
	display: block;
}

.gauche_poste_sstitre{
   padding: 0 0 0 10px;
   background: url(images_enseignants/fleche-grise.png) no-repeat;
   display: block;
}
.gauche_poste_sstitre2 {
   padding: 0 15px 0 10px;
   background: url(images_enseignants/double-fleche.png) no-repeat right;
   line-height: 20px;
   width: auto;
}

#gauche_recommandation{
	margin-left:15px;
   padding: 5px 0 0 10px;
   width: 204px;
   height: 22px;
   background-color: #d3d4d8;
   color: #000;
   font-size: 14px;
}

#gauche_utilestitre{
	margin-left:15px;
	padding: 5px 0 0 10px;
	width: 204px;
	height: 22px;
	background-color: #ead5e6;
	color: #9b0b77;
	font-size: 14px;
}

#gauche_utiles{
	margin : -15px 0 0 15px;
   	padding: 5px 0 5px 0;
	width: 214px;
	background-color: #efefef;
}

ul.gauche_utiles li  {
   width: 180px;
   padding: 0px;
   margin-left:-18px;
   list-style: none;
   background: url(images_enseignants/double-fleche_magenta.png) no-repeat right 10px;
   line-height: 20px;
}


.menu_horizontal {
	background-color:#ead5e6;
	width:475px;
	height:30px;
	border:none;
	margin-top:20px;
	font-size: 11px;
}

a .tab1{
text-decoration: none;
}



.centrelistetitre {
   margin: 0;
   padding: 0;
   font-weight: bold;
   width: 345px;
   font-size: 12px;
   line-height: 25px;
}

.centreimage {
	margin:20px 0; 
   padding: 0px;
   border: none;
}
.centreliste{
	margin: -90px 0; 
  /* line-height: 20px;*/
   width: 345px;
   font-weight: normal;
   float: right;
   font-size: 11px;
}

.centrelistesuite{
   margin: -10px 0;
   padding: 0 0 10px 0px;
   text-align: right;
   border-bottom: solid 1px #ccc;
   background: url(images_enseignants/flechevetre.png) no-repeat right;
}
ul.centrepuces li{
   background: url(images_enseignants/puce_carre.png) no-repeat left;
   list-style:none;
   padding-left:15px;
}
ul.pucescircle li{
  background: url(images_enseignants/puce_cercle.png) no-repeat left;
   list-style:none;
   padding-left:15px;
}

.clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


/* SPAN */

.titre_page {
	font-size: 14pt;
	color:#9b0b77;
	text-transform:uppercase;
   font-weight: 100;
}
.titre_page_soustitre {
	font-size: 11pt;
	color:#9b0b77;
	text-transform:uppercase;
	border-bottom:solid 1px #ccc;
   font-weight: 100;
}
.actualite {
	font-size: 14pt;
	color:#616161;
	text-transform:uppercase;
	border-bottom:solid 1px #ccc;
   font-weight: 100;
}

.bordure_separation{
	border-bottom:solid 1px #ccc;
	padding:5px;
	width:100%;
}
.droite_gris{
	position: relative;
	font-size: 10px;
	display: block;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	width: 224px;
	background-color: #efefef;
	bottom: 10px;
}
.droite_blanc_border{
	position: relative;
	font-size: 10px;
	display: block;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	width: 222px;
	background-color: white;
	border: solid 1px;
	border-color: #bcab99;
}

a.lien2 {
	color:#212324;
	background-image:url(images_enseignants/flecheverte.png);
	background-repeat:no-repeat;
	background-position:left 3px;
	padding-left:10px;
	margin-top:5px;
}
.titre_4 {
	font-size: 14pt;
	color:#9b0b77;
	text-transform:uppercase;
   font-weight: 100;
}
.titre_5 {
	font-size: 11pt;
	color:#616161;
	text-transform:uppercase;
   font-weight: bold;
   line-height: 14px;
}
.sous_titre {
	color:#9b0b77;
}
/*  FIN   DU   CSS   */

#baspage {
	width: 964px; 
	margin: 0 auto; 
	font-size:10px;
   text-align: right;
   color: #b3b5b4;
} 

.titrepied {
   text-align: left;
  color: #9fc600;
  text-transform: uppercase;
  font-size: 11px;
  display: block;
  width: 350px;
  float: left;
  padding-bottom: 5px;
}

.menupied {
  text-align: right;
  display: block;
  width: 590px;
  float: right;
  padding-bottom: 5px;
}

.menupied a, .textegris a {
	color:#FFFFFF;
	font-size: 11px;
}

.lignepied {
  width: auto;
  border-bottom: 1px solid #3d3f44;
}

.copyright {
  text-align: left;
  color: #fff;
  text-transform: uppercase;
  display: block;
  width: 350px;
  float: left;
  font-size: 9px;
  margin-top: -10px;
}

.copyright2 {
	font-size: 9px;
	color: #fff;
	margin-top: 0px;
	display: block;
}
.copyright3 {
  text-align: left;
  font-size: 13px;
  color: White;
  margin-top: -10px;
  display: block;
}
.copyright3 a, texteblanc a {
 font-size: 13px;
  color: #FFFFFF;
}  

.newsletter{
	position: relative;
	top: 10px;
	margin: 0px;
	width: 224px;
	border: solid 0px 0px 1px 1px #ccc;
}

.titrenewsletter{
   padding: 10px;
   width: 222px;
   height: 14px;
   background-color: #786755;
   color: #fff;
   font-size: 14px;
   text-transform: uppercase;
}

.contenunewsletter{
   padding: 10px;
   width: 204px;
   height: 50px;
   font-size: 12px;
   background-color: white;
}
.newsletter_fleche{
   width: 30px;
   height: 50px;
   display:block;
   margin-left:200px;
   margin-top:-70px;
   z-index:100;
}

.droite_bloc_contenu{
	position: relative;
	text-align: left;
	display: block;
	margin-left: 10px;
	margin-top: 0px;
	bottom: 0px;
	padding: 0px;
	width: 204px;
	background-color: transparent;
	font-size: 11px;
}

.droite_contenu{
	position: relative;
	text-align: left;
	display: block;
	margin-left: 10px;
	margin-top: 10px;
	bottom: 10px;
	padding: 0px;
	width: 204px;
	background-color: transparent;
	font-size: 11px;
}
.droite_bloc_rouge{
	position: relative;
	font-size: 4px;
	display: block;
	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
	width: 224px;
	background-color: #EAD5E6;
}
/* AUTRES ------------------------------------------------------------------------- */
.titre_1 {
	font-size: 14pt;
color: #e34031
	text-transform:uppercase;
   font-weight: 100;
   	left: 0px;
	top: 0px;
	margin: 0px;
	padding: 0px;
}
.titre_2 {
	font-size: 11pt;
	color:#9B0B77;
	text-transform:uppercase;
	font-weight: bolder;
}
.sous_titre_R {
	color:#9B0B77;
	font-weight: bold;
	font-size: 12px;
	}
.sous_titre_G {
	color:#000;
	font-weight: bold;
	font-size: 12px;
	}
.texte_G_11 {
	color:#000;
	font-weight: bold;
	font-size: 11px;
	}
	.texte_mentionlegale {
	color:#9B0B77;
	font-size: 9px;
	}
.texte_11 {
	color:#000;
	font-size: 11px;
	font-weight: normal;
	}
	.texte_11_magenta_gras {
	color:#9B0B77;
	font-weight: bold;
	font-size: 11px;
	}
	.texte_12_magenta_gras {
	color:#9B0B77;
	font-weight: bold;
	font-size: 12px;
	}
	.texte_11_magenta {
	color:#9B0B77;
	font-weight: normal;
	font-size: 11px;
	}
	.texte_13_magenta_gras {
	color:#9B0B77;
	font-weight: bold;
	font-size: 13px;
	}
	.texte_15_magenta_gras {
	color:#9B0B77;
	font-weight: bold;
	font-size: 15px;
	}
.texte_rouge_12_gras {
	color:#FF0000;
	font-size: 12px;
	font-weight: bold;
}
.texte_rouge_11 {
	color:#FF0000;
	font-size: 11px;
	font-weight: normal;
	}