/* 		Feuille de sytle pour la mise en page du site

		Pour le yétiweb V2

		Ecrit par Xédéos et Zib 
		
		2008/09
*/
body {
	min-width: 800px; /* largeur minimal du site */
	width: 90%; /* le site ne prendra que 90% de l'écran */
	margin: auto; /* marges automatiques pour centrer le site sur lécran */
	margin-top: 5px; /* définition des marges hautes et basses */
	margin-bottom: 5px;
	background-color: #FFFFFF; /* définition du l'arrière plan */
	font-family: "Times New Roman", Arial;
	/* police de caractère pour l'ensemble de la page ------------------ /!\ A changer --------------*/
	font-size: 1em;
	/* Times New Roman étant un peu petite, on l'agrandit */
	background-image: url("background_gene2.png");
	background-position: 200px 0px;
}

.false_clic {
	cursor: pointer;
}

a {
	text-decoration: none;
	/* Plus d'immonde soulignage bleu pour tous les liens*/
	color: #202090;
}

a img {
	border: none; /*Et plus de bordure pour les images liens*/
}

#header {
	width: 100%; /* le header prend toute la largeur du site */
	min-height: 90px;
	/*hauteur minimale du header, définition à revoir par l'équipe de design */
	padding: 0px; /* pas de marge intérieures */
	background-image: url(""); /* éventuelle image d'arrière plan */
	margin-bottom: 20px;
}

#menu {
	float: left; /* défition de la position du bloc pour le menu vertical */
	width: 180px; /* largeur du menu vertical */
	margin-top: 5px; /* marge haute du cadre */
}

#corps {
	margin-left: 200px;
	/* marge à gauche pour ne pas se confondre avec le menu */
	padding: 5px;
}

#footer {
	min-width: 40%;
	max-width: 420px; /* largeur relative du pied de page */
	margin: auto;
	/* marges gauches et droites automatique pour le cantrage */
	margin-top: 4em;
	/* marge haute pour ne pas se confondre avec le corps de la page */
	margin-bottom: 6em;
	/* marge basse pour qu'on voie un peu le beau fond d'écran! */
}

/*Bannière   */
#header h1 {
	width: 100%;
	margin: 0px;
}

#header h1 img {
	width: 100%;
}

/* debut mise en forme des éléments avec cadre => angles arrondis */
.coin_hg {
	padding-left: 11px; /* marge intérieure gauche */
	background-image: url('hg.png');
	/* image associée ainsi que le propriété et la position */
	background-repeat: no-repeat;
	background-position: top left;
}

.coin_hd {
	padding-right: 11px;
	background-image: url('hd.png');
	background-repeat: no-repeat;
	background-position: top right;
}

.bordure_h {
	border-top: 2px solid #4c4c82; /* définition de la bordure supérieure */
	height: 9px;
	/* spécification d'une hauteur pour que quelque chose soit affiché */
	background-color: #dbdfea; /* définition de la couleur de fond */
}

.bordure_b {
	border-bottom: 2px solid #4c4c82;
	height: 9px;
	background-color: #dbdfea;
}

.cote_gauche {
	border-left: 2px solid #4c4c82;
	padding-left: 5px;
	background-color: #dbdfea;
}

.cote_droit {
	border-right: 2px solid #4c4c82;
	padding-right: 5px;
	background-color: #dbdfea;
	overflow: hidden;
}

.coin_bg {
	padding-left: 11px;
	background-image: url('bg.png');
	background-repeat: no-repeat;
	background-position: bottom left;
}

.coin_bd {
	padding-right: 11px;
	background-image: url('bd.png');
	background-repeat: no-repeat;
	background-position: bottom right;
}

/* Fin !!! */ /* Mise en forme de la barre de navigation */
#header .menu_horizontal {
	padding: 0px;
	list-style: none; /* suppression du style éventuel par défaut */
	text-align: center; /* alignement du texte */
	font-weight: bold;
	/* caractéristiques du texte : gras et 12px de haut pour les majuscules */
	font-size: 13px;
	margin: 0px;
	/* La distance du menu par rapport au haut ou au bas est à definir dans #header .background_menu_horizontal*/
}

#header .background_menu_horizontal {
	border-top: solid 2px #00004f;
	border-bottom: solid 2px #00004f;
	width: 94%;
	margin: auto;
	margin-top: 12px;
	padding: 0px 5px;
	background-color: #FFFFFF;
}

#header .menu_horizontal li.bouton_gauche {
	float: left;
	/* alignement à gauche pour les bouton de gauche et à droite pour les boutons de droite! */
	margin-right: 2px; /* marge pour séparer les différents liens */
}

#header .menu_horizontal li.bouton_droite {
	float: right;
	margin-left: 2px;
}

#header .menu_horizontal a {
	display: block; /* changement du mode d'affichage : bloc, pas inline */
	color: #FFFFFF; /* couleur du texte */
	width: 120px; /* largeur des liens */
	height: 23px; /* hauteur des liens */
	padding-top: 3px;
	background-image: url('menubg.png');
	/* image de fond pour les liens et propriétés */
	background-repeat: no-repeat;
	background-position: top;
	margin: 6px 0px;
	font-family: Arial;
	
}

#header .menu_horizontal a:hover {
	color: #000000;
	/* chagement de couleur et de l'arrière plan au survol */
	background-image: url('menubg_hover.png');
	text-shadow:0 2px 0 rgba(160, 160, 160, 0.5);
}

#header .menu_horizontal form {
	/* Le css a appliquer pour le formulaire de connection rapide*/
	color: #FFFFFF;
	height: 30px;
	width: 550px;
	background-image: url('menubg_form.png');
	/* image de fond pour les liens et propriétés */
	background-repeat: no-repeat;
	background-position: top;
	padding-top: 4px; /* Pour que le texte soit centré verticalement */
	font-weight: normal;
}

/*Formatage des images vignettes du menu horizontal*/
#header .menu_horizontal .bouton_gauche img,#header .menu_horizontal .bouton_droite img
	{
	height: 29px;
	margin: 2px;
}

div .casse_float
	/* Bloc servant à astreindre les blocs en dessous du menu horizontal à être non inclus dans le flottant /!\ classe utilisée dans un peu toutes les pages!*/
	{
	height: 0px;
	clear: both;
}

/* Fin !!! */ /* Menu à gauche */
#menu .encadrement /* Classe pour centrer les liens */ {
	margin: auto;
}

#menu .coin_bg
	/* Pour espacer les blocs. On utilise le coin bas gauche car c'est le dernier div des encadrement */
	{
	margin-bottom: 2em;
}

/* Mise en forme du menu gauche */
.menu_vertical,.menu_vertical ul {
	padding: 0px; /* on prend les mêmes et on recommence! */
	list-style: none;
	text-align: center;
	margin-left: 0px;
}

.menu_vertical {
	font-weight: bold;
	font-size: 12px;
}

.menu_vertical li {
	margin-top: 1px;
	margin-bottom: 1px;
	float: left;
}

.menu_vertical a,.menu_vertical .aLike {
	/* un aLike est un span qui doit avoir la même forme qu'un lien */
	display: block; /* changement du mode d'affichage : bloc, pas inline */
	color: #FFFFFF; /* couleur du texte */
	width: 160px; /* largeur des liens */
	height: 23px; /* hauteur des liens */
	padding-top: 3px;
	background-image: url('menubg_v.png');
	/* image de fond pour les liens et propriétés */
	background-repeat: no-repeat;
	background-position: top;
	font-family: Arial;
	padding-left: 7px;
	cursor: pointer;
	/* Pour que les aLike est aussi un pointeur en forme de lien */
}

.menu_vertical a:hover,.menu_vertical .aLike:hover {
	color: #000000;
	background-image: url('menubg_v_hover.png');
	text-shadow:0 2px 0 rgba(160, 160, 160, 0.5);
}

/* Fin */ /* Mise en page de la connection rapide du menu de gauche */
#menu p /* Bloc de l'image de connexion Rapide */ {
	text-align: center;
	font-size: 70%;
	padding: 0px 5px;
	width: 95%;
}

#menu p .taille_90pc {
	width: 90%;
}

/* Mise en page de l'encart qui dit bonjour */
#menu h4 {
	color: #441f01;
	font-size: 120%;
	font-weight: normal;
	text-align: center;
	margin: 0px 5px;
	font-family: "Times New Roman";
}

#menu h4 a /* Lien de déconnexion si ce n'est pas la bonne personne */ {
	font-size: 50%;
	color: #4c4c82;
}

#menu h5 {
	font-size: 75%;
	color: #4c4c82;
	margin: 5px 0px;
	text-align: center;
}

/*Mise en page de la page générique*/
#corps .cote_droit /*On définit les padding */ {
	padding-left: 5px;
	padding-right: 10px;
	/* a noter que 		padding-left = padding-right - 5px		 */
	text-align: justify; /* Par défault, on met du justifié (plus joli) */
}

#corps h1 {
	background-image: url("fond_titre.png");
	margin: auto; /* Le cadre du titre est réduit et centré */
	margin-top: 1em;
	margin-bottom: 1em;
	width: 80%;
	padding: 5px 0px;
	/* On évite que le cadre colle trop au texte en haut et en bas, mais pas de contrainte sur les cotés*/
	text-align: center;
}

/* Mise en page des pages de messages de connexion */
#message {
	padding-top: 100px;
	margin: auto;
	width: 50%;
}

#message p {
	padding: 10px 20px;
	text-align: justify;
}

/* Mise en page du pied de page */
#footer p {
	padding: 0px 20px;
	text-align: center;
	margin: 10px 0px;
}

#footer p a {
	color: #202070
}

#footer p .logoEnsieta img {
	height: 40px;
	vertical-align: middle;
	margin: 3px 5px;
}

#gallery #contenu img {
	margin-left: auto;
	margin-right: auto;
	max-width: 80%;
	max-height: 80%;
}

#gallery #liengauche {
	float: left;
}

#gallery #liendroit {
	float: right;
}

#gallery button {
	width: 80px;
}

#gallery {
	min-height: 620px;
}

/* Mise en forme du bbcode */
input.simple {
	border: 1px solid black;
	text-align: center;
	min-width: 25px;
	height: 24px;
	margin: 2px 0px;
}

select.simple {
	border: 1px solid black;
	height: 24px;
	vertical-align: middle;
	margin: 2px 0px;
}

.orange {
	color: #ec7600;
}

.noir {
	color: black;
}

.marron {
	color: maroon;
}

.vert {
	color: green;
}

.olive {
	color: olive;
}

.marine {
	color: navy;
}

.violet {
	color: purple;
}

.bleugris {
	color: teal;
}

.argent {
	color: silver;
}

.gris {
	color: #646464;
}

.rouge {
	color: red;
}

.vertc {
	color: lime;
}

.jaune {
	color: yellow;
}

.bleu {
	color: blue;
}

.rose {
	color: fuchsia;
}

.turquoise {
	color: aqua;
}

.blanc {
	color: white;
}

.arial {
	font-family: Arial, serif;
}

.times {
	font-family: Times, serif;
}

.courrier {
	font-family: 'DejaVu Sans Mono', Courier, monospace;
}

.impact {
	font-family: Impact, serif;
}

.geneva {
	font-family: Geneva, serif;
}

.optima {
	font-family: Optima, serif;
}

.ttpetit {
	font-size: xx-small;
}

.tpetit {
	font-size: x-small;
}

.petit {
	font-size: small;
}

.gros {
	font-size: large;
}

.tgros {
	font-size: x-large;
}

.ttgros {
	font-size: xx-large;
}

.centre {
	text-align: center;
}

.gauche {
	text-align: left;
}

.droite {
	text-align: right;
}

.justifie {
	text-align: justify;
}

.souligne {
	text-decoration: underline;
}

.barre {
	text-decoration: line-through;
}

.italique {
	font-style: italic;
}

.gras {
	font-weight: bold;
}

.flot_clearer {
	clear: both;
}

.flot_gauche {
	margin: 5px;
	float: left;
}

.flot_droite {
	margin: 5px;
	float: right;
}

.liste_user {
	list-style: inside;
}

img.bouton_form {
	cursor: pointer;
	border: 1px solid silver;
	vertical-align: middle;
}

img.bouton_form:hover {
	border: 1px solid black;
	background-color: silver;
}

/* Mise en forme du message d'erreur */
#corps .message {
	text-align: right;
	color: #600000;
	margin-top: 2em;
	margin-bottom: 3em;
}

#corps .message span {
	border: solid 1px #600000;
	padding: 5px 13px;
}

#corps .form_edit {
	border-collapse: collapse;
	width: 90%;
	margin: auto;
}

#corps .form_edit td {
	padding: 2px;
}

#corps .form_edit td p {
	margin: 0px;
}

#corps .form_edit th {
	text-align: right;
}

#corps .form_edit label {
	font-size: 80%;
}

#corps .form_edit .pure {
	border: 1px solid black;
	padding: 2px;
}

#corps .form_edit textarea.pure {
	background-image: url("background_gene2.png");
	font-size: 80%;
	width: 100%
}

#corps .form_edit tr td img {
	max-width: 50%;
}