/*
 * L'étude des sites d'openweb.eu.org, d'alsacreations.com et de la-grange.net 
 * m'ont grandement aidé pour concevoir ce site tout en feuille de style
 * Pour me joindre : patricia.loubet@free.fr 
 */
body{
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: left top;
	color:#000000;
	font-family:Verdana, Helvetica, sans-serif;
	font-size: 100%;
	margin:0;
	padding:0;
	text-decoration: none;
	background-color:#000000;
	}
abbr, acronym {
	border-bottom: 1px dotted gray;
	cursor: help;
	}
/* Definitions generales */
img{
	border:0;
	padding:0;
	margin:0;
	}
a{
	color:#666666;
	font-weight:700;
	text-decoration: underline;
	}
a:hover {
	text-decoration:none;
	color:#FF0000;
	font-weight: 700;
	}
h1, h2 {
	font-size:small;
	font-weight:700;
	}
h3, h4, h5 {
	font-size:x-small;
	}
hr { /* séparateur par une ligne horizontale - Hidden permet de la rendre invisible à l'oeil et de la rendre active pour les navigateurs textes*/
	clear:both;
	visibility:hidden;
	}
/* --------------- */
#page {
	width:100%;
	bottom: 0px;
}
#accessible{
	position:absolute;
	margin:0;
	padding:0;
	top:2px;
	width:auto;
	font-size: xx-small;
	right:1%;
	}
#accessible ul{
	float:right;
	}
#accessible li{
	padding:0;
	display:inline;
	margin:0 0 0 0.7em;
	}
#accessible a{
	color:#fff;
	font-style: normal;
	}
#accessible a:hover{
	color: #000;
	background-color: #FFF;
}
/* ----------fin accessible-----------*/

/* ----------PAGE 2E NIVEAU-----------*/
div#pageniv2_centre {
	background-image:  url(images/logo_fond.gif);
	background-color: #fff;
	background-repeat: repeat;
	}

/* DEBUT----TEXTE DEFILANT - PAGE ACCUEIL----------- */
#textedefilant input{
	position: absolute;
	background:transparent;
	left:1px;
	top: 2px;
	width : 90%;
	background:transparent;
	color:#FFFFFF;
	font-weight:500;
	vertical-align:bottom;
	font-size:x-small;
	border:0;
	text-decoration: blink;
	}
/* END----TEXTE DEFILANT - PAGE ACCUEIL----------- */

/* --------------- */
#logo{
	width:100px;
	text-align:center;
	color:#fff;
	font-size:xx-small;
	margin-right: 0;
	margin-bottom: 0.5em;
	margin-left: 2px;
	position: relative;
	left: 2px;
	top: 2em;
	}
#logo img{
	border:0; /** important de le mettre à 0 : car il permet de pourvoir faire un lien du une image*/
	}
#logo p{
	margin-top:-0.1em;
	}
div#logoniv2 {
	top: 0.5em;
	left: 2%;
	position: absolute;
	}
div#logopopup {
	top: 0.5em;
	right: 2%;
	position: absolute;
	}

/* cadre central -------------------CONTENU ---------------------------------*/
#contenu_niv2{
	font-size:small;
	color:#000000;
	background-color:#FFFFFF;
	border-bottom:2px solid #666666;
	line-height:120%;
	margin:5em 18% 2em 100px;
	padding:0;
	background-image: url(images/logo_fond.gif);
	}
#contenu_nivpopup{
	font-size:small;
	color:#000000;
	background-color:#FFFFFF;
	border-bottom:2px solid #666666;
	line-height:120%;
	margin:1.5em 3% 0.5em 100px;
	padding:0;
	background-image: url(images/logo_fond.gif);
	}
#contenu{
	font-size:small;
	color:#000000;
	text-align:justify;
	background-color:#FFFFFF;
	line-height:120%;
	margin:3em 17% 2em 125px;
	padding:0;
	background-image: url(images/ombredroite.gif);
	background-repeat: repeat-y;
	background-position: right;
	}
#contenu .contenant {
	width:100%;
	background-color: #FFFFFF;
	background-image: url(images/ombredroite.gif);
	background-repeat: repeat-y;
	background-position: right;
	} /*quand je n'utilise pas de tableau : bloc qui permet qu'une image ne déborde pas sur les les autres chapitres grace à une taille de 100%.*/
.imagedroite {
	margin:0 0.3em 4px 4px;
	float:right;
	color:#FFFFFF;
	border-bottom: #CCCCFF  4px;
	border-bottom-style: groove;
	border-right: #CCCCFF  3px;
	border-right-style: groove;
	background-color: #000000;
	display: block;
	}
.imagegauche {
	margin: 0 4px 4px 0;
	color:#000000;
	float:left;
	border-right: #CCCCFF  4px;
	border-bottom: #CCCCFF  3px;
	border-bottom-style: groove;
	border-right-style: groove;
	display: block;
	}
.en_savoir_plus {
	margin: 0 0.5em 1em 0;
	padding-bottom:0.5em;
	text-align: right;
	font-style: italic;
	font-size:x-small;
	}
.lien_droit{
	margin: 0 1em 1em 2.5em;
	background-color:transparent;
	padding-bottom:0.5em;
	text-align: right;
	font-style: italic;
	font-size:x-small;
	}
#bandecrea{
	background-color:#ff9900;
	background-image: url(images/ombrecrea_droite.gif);
	background-repeat: repeat-y;
	background-position: right;
	padding:0.2em 0.5em 0.5em 0;
	margin:0;
	text-align: left;
	text-indent: 0.5em;
	height: auto;
	width: auto;
	top: 0px;
	}
#bandeformation{
	background-color:#008eee;
	background-image: url(images/ombreformation_droite.gif);
	background-repeat: repeat-y;
	background-position: right;
	padding:0.2em 0.5em 0.5em 0;
	margin:0;
	text-align: left;
	text-indent: 0.5em;
	height: auto;
	width: auto;
	top: 0px;
	}
#bandelieu{
	background-color:#e20000;
	background-image: url(images/ombrelieu_droite.gif);
	background-repeat: repeat-y;
	background-position: right;
	padding:0.2em 0.5em 0.5em 0;
	margin:0;
	text-align: left;
	text-indent: 0.5em;
	height: auto;
	width: auto;
	top: 0px;
	}
.bandedroite{
	background-color:#000000;
	padding:0.2em 0.5em 0.5em 0;
	margin:0;
	text-align: left;
	text-indent: 0.5em;
	height: auto;
	width: auto;
	top: 0px;
	}
.bandedroite h1 {
	color: #FFFFFF;
	font-size:x-small;
	margin:0;
	}

#bandecrea h1, #bandeformation h1, #bandelieu h1 {
	color: #FFFFFF;
	font-size:x-small;
	margin:0;
	}
#bandecrea h2, #bandeformation h2, #bandelieu h2 {
	color: #000000;
	font-size:x-small;
	margin:0;
	}
#bandecrea a, #bandeformation a, #bandelieu a {
	text-decoration: none;
	color: #000000;
	}
#bandecrea a:hover, #bandeformation a:hover, #bandelieu a:hover {
	background-color:#FFFFFF;
	font-weight:700;
	color:#000000;
	}
#bande_repere {
	margin:0;
	padding-bottom:0.5em;
	background-color:#000000;
	}
#bande_repere h1{
	color: #FFFFFF;
	font-size: small;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:500;
	margin:0;
	}
#bande_repere_niv2 {
	text-align:right;
	margin:0;
	/*padding-bottom:0.5em;*/
	background-color:#000000;
	}
#bande_repere_niv2 h1{
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:500;
	margin:0;
	font-size:small;
	}
.titre h2{
	font-size: small;
	font-weight:600;
	padding-bottom: 0.5em;
	margin:0 0.6em 0.3em 0.5em;
	border-top-style: solid;
	border-top-width: thin;
	border-top-color: #000000;
	border-bottom-style: groove;
	border-bottom-width: thin;
	border-bottom-color: #000000;
	color: #999999;
	}
.titre2eniv h2{
	font-size: small;
	font-weight:700;
	padding-top: 1em;
	padding-bottom: 0.2em;
	margin:1em 0.6em 0.3em 0.5em;
	border-bottom-style: solid;
	border-bottom-width: medium;
	border-bottom-color: #999999;
	color: #FF0000;
	}
.texte, #contenant .texte{
	padding:0.1em;
	margin:0 2% 1em 0.5em;
}
#contenu_niv2 {
}
#contenu_niv2 .texte p, #contenu .texte p, #contenant .texte p{
	text-align: justify;
	} 
#contenu_niv2  .texte ul li, #contenu  .texte ul li, #contenant  .texte ul li{
	list-style-type:square;
	margin-bottom:1em;
	}
#contenu_niv2 .texte ol li, #contenu .texte ol li, #contenant .texte ol li{
	list-style-type:decimal;
	margin-bottom:0.3em;
	}
#formulaire {
	background-color:#FFFFFF;
	background-image: url(images/logo_fond.gif);
	margin:1em;
	text-align:left;
	padding:2em;
	line-height: 1em;
  }
#formulaire legend {
color:#FF0000
  }
#formulaire label{
  display: inline;
  text-align:left;
  float: left;
  width: 40%;
  } 
#formulaire .champstxt input{
  width: 45%;
  } 
#formulaire .champsbt input{
  width: 10%;
  } 
#formulaire select {
  width: 45%;
  } 
#formulaire textarea {
  width: 45%;
  } 
#visionform {
	background-color:#000000;
	text-align:center;
	padding:2em;
	margin:0.2em 0.4em 0.2em 0.3em;
	list-style-type: none;
	}
#visionform ul{
	color: #FFFFFF;
	list-style-type: none;
	}
#visionform img{
	left: 10%;
	right: 10%;
	}
.bouton_form {
  	background-color: #000000;
   	color: #FFFFFF;
	border-width:0;
	padding:0.1em;
	margin:0.5em 0.6em 1.3em 0.6em;
	}
#visionform .bouton_form onChange{
  	background-color: #FFFFFF;
   	color: #000000;
   }
#soustitre2eniv h3 {
	font-weight:400;
	text-decoration: none;
	width: 100%;
	}
#soustitre2eniv ul{
	margin:0.5em;
	padding:0.1em;
	}
#soustitre2eniv li{
	margin:0;
	font-size: small;
	list-style-type: none;
	display: inline;
	}
#soustitre2eniv a{
	text-decoration: none;
	color: #FF0000;
	font-weight:400;
	}
#soustitre2eniv a:hover{
	background-color:#000000;
	font-weight:400;
	color:#FFFFFF;
	}
/* ----MENUS----------- */
#touslesmenus{
	background-color:#000000;
	}
/**----DEBUT-----------------3 MENUS GENERAUX-----------------**/
.menuhaut span {
	display:none;
	}
.menuhaut {
	font-family:Arial, Helvetica, sans-serif;
	font-size:small;
	position: absolute;
	left:120px;
	top: 3%;
	width: 100%;
	}
#smenuhaut1 dt, #smenuhaut2 dt, #smenuhaut3 dt{
	list-style:none;
	padding:0px;
	margin-bottom:-5em;
	}
#smenuhaut1 dl, #smenuhaut2 dl, #smenuhaut3 dl{
	list-style:none;
	margin:0px;
	padding:0px;
	}
#smenuhaut1 dd, #smenuhaut2 dd, #smenuhaut3 dd{
	list-style:none;
	margin:0px;
	padding:0px;
	}
#smenuhaut1 ul, #smenuhaut2 ul, #smenuhaut3 ul{
	list-style:none;
	margin:0px;
	padding:0px;
	}
#smenuhaut1 li, #smenuhaut2 li, #smenuhaut3 li{
	list-style:none;
	margin:0px;
	padding:0px;
	}
.menuhaut dl {
/*pour que le menu se place en ligne et que chaque boîte fasse 20%*/
	float: left;
	width: 23%;
	margin-right: 5%;
	margin-bottom:0;
	padding:0.3em;
	}
.menuhaut a {
	margin: 0 2px;
	padding:0.5em;
	height: 100%;
	display: block;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	color: #FFFFFF;
	}
#menuhaut1 a {
	background: #ff9400;
	}
#menuhaut2 a {
	background: #008eee; 
	}
#menuhaut3 a {
	background: #e20000; 
	}
#menuhaut1, #menuhaut2, #menuhaut3 {
	text-decoration: none;
	float: left;
	list-style-type: none;
	display: block;
	margin: 0 2px;
	padding:0.5em;

	}

#menuhaut1 a:hover , #menuhaut2 a:hover, #menuhaut3 a:hover {
	background-color:#000000;
	font-weight:700;
	color:#FFCC00;
	}
#menuhaut1 a:hover {
	border: 1px solid #ff9400;
	}
#menuhaut2 a:hover {
	border: 1px solid #008eee;
	}
#menuhaut3 a:hover {
	border: 1px solid #e20000;
	}
#smenuhaut1, #smenuhaut2, #smenuhaut3 {
	font-family:Arial, Helvetica, sans-serif;
	/*font-size:small;*/
	display: none;
/* Ne pas modifier le block car la couleur suivrait uniquement le texte*/
	margin:0px;
	padding:0px;
	width:100%; /* ne pas toucher car fait un interligne qui sépare chaque LI*/
}
#smenuhaut1 a, #smenuhaut2 a, #smenuhaut3 a {
	font-weight:700;
	text-align:left;
	color: #FFFFFF;
	border-top: 1px solid #000000;
}
/**----FIN-----------------3 MENUS -----------------/

/* --------------- */

#sectionmenus{
	font-family:Arial, Helvetica, sans-serif;
	font-size:small;
	right:1%;
	position:absolute;
	top:6em;
	width:14%;
}

/* -------------------------*/
#traduction{
	text-align:right;
	margin-bottom:3em;
	}
#traduction, #info, #liens, #aide{ 
	color:#FFFFFF;
	}
/* --------------- */
#traduction .titre,#info .titre,#liens .titre, #aide .titre{
	border-color:#f7c704;
	border-width:0px 0px 1px 0px; /** permet d'avoir un style de bordure fine*/
	color: #FFFFFF;
	font-weight: 500;
	border-bottom-style: solid;
	}
#traduction ul,#info ul,#liens ul,#aide ul{
	margin-bottom:1.5em;
	margin-top:0.5em;
	}
#traduction li,#info li,#liens li,#aide li{
	display:inline;
	list-style:none;
	}
#traduction a,#info a,#liens a,#aide a{
	color:#f7c704;
	font-family:Arial, Helvetica, sans-serif;
	display:block;
	font-weight:500;
	margin-left:-3em;
	padding-left:1em;
	text-decoration:none;
	}
#traduction a:hover,#info a:hover,#liens a:hover,#aide a:hover{
	color:#000000;
	background-color:#FFFFFF;
	}
/** FIN MENU A DROITE--------------**/

/**page NIVEAU 2 ------ **/
#menuniv2_crea  a:hover {
	/**border: 1px solid #ff9400;*/
	background: #000000;
	color:#FFCC00;
}
#menuniv2_formation a:hover {
	/**border: 1px solid #008eee;*/
	background:#000000;
	color:#FFCC00;
	}
#menuniv2_lieu a:hover {
	/**border: 1px solid #e20000;*/
	background:#000000;
	color:#FFCC00;
	}
#menuniv2_crea a,#menuniv2_formation a,#menuniv2_lieu a{
	color:#FFFFFF;
	display:block;
	font-weight:500;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	list-style-type: none;
	}
#menuniv2_crea li,#menuniv2_formation li,#menuniv2_lieu li{
	display:inline;
	list-style:none;
	}
#menuniv2_crea {
	background: #FF9400;
	}
#menuniv2_formation {
	background: #008eee;
	margin-top:-0.6em;
	}
#menuniv2_lieu {
	background: #e20000;
	margin-top:-0.6em;
	}

/**----debut-----------------3 MENUS BAS  -----------------**/
.menubas {
	position:static;
	margin:0;
	padding:0;
	text-decoration: none;
	font-weight: 500;
	text-align: center;
	width: 100%;
	left: 0px;
	top: 100%;
	}
.menubas a{
	font-size: x-small;
	text-decoration: none;
	color: #000000;
	}
#menubascreations a:hover, #menubasformation a:hover, #menubaslieu a:hover{
	background-color:#FFFFFF;
	font-weight:700;
	color:#000000;
	}
#menubascreations,  #menubasformation, #menubaslieu {
	width: 100%;
	margin:0;
	padding:0.1em 0 0.1em 0;
	}
#menubascreations {
	background: #FF9400;
	}
#menubasformation {
	background: #008eee;
	}
#menubaslieu {
	background: #e20000;
	}
#menubascreations li, #menubasformation li, #menubaslieu li{
	font-size: x-small;
	list-style-type: none;
	display: inline;
	font-weight: 500;
	background-position: left;
	margin: 0.3em;
	}
#menubascreations ul, #menubasformation ul, #menubaslieu ul{
	display: inline;
	margin: 0;
	}

/*------------------*/
#menu1bas, #menu2bas, #menu3bas, #menu4bas{
	position:absolute;
	width: 50%;
	padding:0;
	background-color: #CC0000;
	}
#menu1bas {
	background: #FF9400;
	left: 0px;
	}
#menu2bas {
	background: #008eee;
	left: 0px;
	}
#menu3bas {
	background: #e20000;
	right: 0px;
	}
#menu4bas{
	background: #008eee;
	right: 0px;
	}
#menu1bas ul, #menu2bas ul, #menu3bas ul, #menu4bas ul {
	font-size: x-small;
	list-style-type: none;
	margin:0;
	display:inline;
	font-weight: 500;
	background-position: left;
	}
#menu1bas a:hover, #menu2bas a:hover, #menu3bas a:hover, #menu4bas a:hover {
	background-color:#FFFFFF;
	font-weight:700;
	color:#000000;
	}
/**----fin-----------------3 MENUS BAS  -----------------**/
/* ---FIN DE TOUS LES MENUS-------------------------------------------------------*/