/* fichier sleidf.css	feuille de style employée pour toutes les pages, hors blog et zone membres */


/*			***** STRUCTURE GENERALE *****			*/

/* La page centrée dans le navigateur est divisée en 5 zones: bandeau, menu-gauche, menu-droite, corps, pied */

body {
	font-size: 0.625em;	/* 10px */
	margin: 1.5em 0 1.5em 0;
	padding: 0;
	text-align: center;	/* pour IE */
	background: #EEE;
 }

#page {
	width: 80em;		/* 800px */
	margin: 0 auto 0 auto;
	padding: 1em 1em 1em 1em;
	background: #FFF;
	font-family: arial, serif;
	font-style: normal;
	font-weight: normal;
	color: #000;
}

#bandeau {
	display: block;
	float: none;
	margin: 0 0 2em 0;
	background: blue;
}

#menu-gauche {
	display: block;
	float: left;
	width: 10.7em;	/* 107px */
	margin: 3em 0 0 0;
	padding: 0;
}

#menu-droite {
	display: block;
	float: right;
	width: 10.7em;	/* 107px */
	margin: 3em 0 0 0;
	padding: 0;
}

#corps {
	display: block;
	float: none;
	font-size: 1.2em;	/* 12px */
	width: 46.333em; /* 556px */
	margin: 0 auto 1.5em auto;
	padding: 2em 0.5em 1em 1em;
	text-align: justify;
	border-style: solid;
	border-color: #E00000;
	border-width: 0 0.083em 0 0.083em;
	line-height: 1.2em;
	height: 40em;
	overflow: auto;
}

#pied {
	display: block;
	float: none;
	font-size: 1em;	/* 10px */
	color: #777;
	margin: 0;
	padding: 0.5em 0 0 0;
	border-style: solid;
	border-color: #DDD;
	border-width: 0.1em 0 0 0;
}


/*			*****      BANDEAU      *****			*/

#bandeau h1, #bandeau h2 {
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	margin: 0;
	line-height: 1.2em;
}

#bandeau h1 {
	font-family: georgia, serif;
	font-size: 3.2em;
	font-style: italic;
}

#bandeau h2 {
	font-size: 1.6em;
	font-style: normal;
}


/*			*****      MENUS      *****			*/
/*------------------------------------------------------------------------

- la classe ".menu1ligneidf" concerne les boutons "Accueil", "Activité" et "Contacts"
- la classe ".menu2lignesidf" concerne le bouton "Rendez-vous franciliens"
- la classe ".menu1ligneeur" concerne le bouton "Contact"
- la classe ".menu2ligneseur" concerne le bouton "Informations Formation"
- l'id "#menu-blog" concerne le bouton d'accès au blog
- l'id "#menu-sle" concerne le bouton d'accès au site SLE
- l'id "#menu-membres" concerne le bouton d'accès à la zone membre
- la classe ".menu-texte" concerne les textes explicatifs des menus de droite
-----------------------------------------------------------------------*/

/* Propriétés communes aux boutons */
.menu1ligneidf, .menu2lignesidf, .menu1ligneeur, .menu2ligneseur,
#menu-blog, #menu-sle, #menu-membres {
	display: block;
	font-weight: bold;
	font-size: 1.6em; /* 16px */
	height: 3em;
}

/* Particularités de .menu-texte */
.menu-texte {
	display: block;
	border-style: none;
	font-size: 10px;
	line-height: 10px;
}

/* Marge minimale entre les boutons de droite et leurs textes explicatifs situés en-dessous */

.menu1ligneidf, .menu2lignesidf, .menu1ligneeur, .menu2ligneseur, .menu-texte	{ margin:0 0 1em 0; }
#menu-blog, #menu-sle, #menu-membres						{ margin:0 0 0.3em 0; }

/* Alignement horizontal: "gauche" pour les menus de gauche, "centré" pour les menus de droite */

.menu1ligneidf, .menu2lignesidf, .menu1ligneeur, .menu2ligneseur	{ text-align: left; }
#menu-blog, #menu-sle, #menu-membres, .menu-texte			{ text-align: center; }

/* "padding": léger décalage à droite des caractères pour les menus de gauche */

.menu1ligneidf, .menu2lignesidf, .menu1ligneeur, .menu2ligneseur 	{ padding: 0 0 0 0.125em; }
#menu-blog, #menu-sle, #menu-membres, .menu-texte			{ padding: 0; }

/* hauteurs des lignes de caractères pour centrer verticalement les intitulés dans les menus:
- idem que la hauteur du menu pour les intitulés tenant sur 1 ligne
- 2 fois plus petite que la hauteur du menu pour les intitulés tenant sur 2 lignes */

.menu1ligneidf, .menu1ligneeur					{ line-height: 3em; }
.menu2lignesidf, .menu2ligneseur, #menu-blog, #menu-membres	{ line-height: 1.5em; }

/* couleur de fond des menus: distinguer trois thèmes: SLE, Europe et SLE-IDF */

.menu1ligneidf, .menu2lignesidf, #menu-membres  { background: blue; }
.menu1ligneeur, .menu2ligneseur, #menu-blog	{ background: #000080; }
#menu-sle 					{ background: #8000A0; }

/* Propriétés particulières des zones de clic:
- la couleur des intitulés des menus clicables doit être la même que le lien ait été déjà visité ou non
- la couleur de survol des menus clicables est la même que celle lors du clic, mais différente de la première
- on ne définit aucun effet visuel de lien sur l'intitulé */

a.menu1ligneidf:link, a.menu1ligneidf:visited, a.menu2lignesidf:link, a.menu2lignesidf:visited,
a.menu1ligneeur:link, a.menu1ligneeur:visited, a.menu2ligneseur:link, a.menu2ligneseur:visited,
a#menu-blog:link, a#menu-blog:visited, a#menu-sle:link, a#menu-sle:visited,
a#menu-membres:link, a#menu-membres:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a.menu1ligneidf:active, a.menu1ligneidf:hover, a.menu2lignesidf:active, a.menu2lignesidf:hover,
a.menu1ligneeur:active, a.menu1ligneeur:hover, a.menu2ligneseur:active, a.menu2ligneseur:hover,
a#menu-blog:active, a#menu-blog:hover, a#menu-sle:active, a#menu-sle:hover,
a#menu-membres:active, a#menu-membres:hover {
	text-decoration: none;
	color: #FFFF00;
}

/* Particularité du menu actuellement "actif": ce menu n'est pas clicable.
La couleur de l'intitulé doit être la même que celle du survol des menus clicables */

.menu1ligneidf, .menu2lignesidf, .menu1ligneeur, .menu2ligneseur { color: #FFFF00;}

/* Particularité du menu #menu-sle "Sauvons l'Europe": police différente 
Taille de la police: légèrement plus grande que pour les autres menus
car "Sauvons l'Europe" en italique et gras ressort mal sinon.
Obligation de redimenssionner les hauteurs du menu relatives à la taille de la police
pour garder les mêmes dimensions que les autres menus */

#menu-sle {
	font-family: georgia, arial, serif;
	font-style: italic;
	font-size: 1.8em; /* 16px */
	height: 2.67em;
	border-width: 0.11em;
	line-height: 1.3em;
}


/*			*****      CORPS  ET PIED    *****			*/

hr { text-align: center; width: 8em; height: 0.167em; }

p { text-indent: 2em; text-align: justify; margin-top: 1em; margin-bottom: 1em; }

p.debutP { margin-bottom: 0; }

p.finP	{ text-indent: 0; margin-top: 0; }

ul { list-style-type: disc; text-align: justify; margin-top: 0; margin-bottom: 0; padding-right: 1em; }

ul.espace li { 	margin-bottom: 1em; }

a { font-weight: bold; }

a:link, a:visited { text-decoration: none; }

a:hover, a:active { text-decoration: underline; }

a.sle { color: #8000A0; }

a.idf { color: #E00000; }

a.eur { color: #000080; }

#pied a { font-weight: normal; }

#pied a:link, #pied a:visited { color:#777; }

#pied #actif { color:#000; text-decoration: underline; }