/*-Style_template-----------------------------------------------------------------------*/
body
{	
	margin: 10px auto 0 auto;
	padding: 0 ;
	text-align: center ;
	font-size: 12px;
	font-family: "Century Gothic";
	
	background: #106196;
}
/* On a ajouté de quoi mettre une police de caractère et une couleur de fond */
/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer, 
c'est la seule façon de centrer les éléments de type block avec ce navigateur */
div.conteneur
{
	text-align: left ;
	-moz-border-radius : 10px;
	border: 2px solid #FF2D00 ;
	margin-left: 215px;
	background: #fff ;
	height: auto;
	padding: 0 0 0 0;
	margin: 5px auto 5px auto;
}
/* Une bordure autour de l'ensemble de la page,
et couleur blanche pour le fond de celle-ci */
/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type
 block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */

h1#header
{
	height: 169px ;
	background: url(img/logo3.png) no-repeat left top;
}
/* Une image de fond correspondant aux 258 pixels
 de tout à l'heure, attention à bien compresser vos images */
/* On définit la hauteur de la partie header, contenant le titre du site */

h1#header a
{
	width: 850px ;
	height: 169px ;
	display: block ;
	background: url(img/logo3.png) no-repeat ;
	position: relative ;
	text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
 possible grâce à la propriété display: block ; qui transforme le lien
  en élément de type block, auquel on peut donner des propriétés de taille.
   On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
 cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  exploitable pour les syntèses vocales */

div#contenu
{
	font-family: "Century Gothic";
	margin-left: 215px;
	height: auto;
	padding-right: 10px;
}
/* On ajoute un petit élément décoratif sur le côté
 de la page et on crée un espace à gauche et à droite du contenu */

 
div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.5em ;
	color: #106196;
	border-bottom: 3px solid #FF2D00;
}
/* Mise en forme du titre de page, une petite image,
 on décale le texte en fonction de l'image, on donne un couleur au texte et
  on met une bordure basse */

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #23E043 ;
	border-left: 1px solid #23E043 ;
	color: #FF2D00;
}


div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.5em ;
	font-size : small;
}
/* On rend les paragraphes plus propre, alignement justifié,
 alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */

div#contenu ul, li
{
list-style:none;
}

div#footer, div#footer p
{
	padding: 5px 0 5px 0;
	text-align: center ;
	color: #106196;
	margin: 0 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}
/*une couleur de fond, une bordure, la taille de police
 et un léger espace entre le texte et les bords du pre */

/* En passant on définit l'overflow de la balise pre à auto pour
 permettre d'afficher des barres de défilement si le texte contenu
  dans cette balise est trop grand */
  
pre span
{
	color: #560 ;
}
/* Couleur de texte des éléments compris dans des span
 eux mêmes compris dans un pre */

pre span.comment
{
	color: #b30000 ;
}
/* Couleur différente pour les span.comment, les span
 utilisés pour les commentaires */

 a {
	color: #106196;
	font-weight: bold;
	}
a:hover {
	color: #23E043;
	}

form#contact
 {
 border:2px solid red;
 width:70%;
 padding:1em;
 }
 
p#msg,p#adr,p#obj
{
border:2px solid green;
margin-right:10%;
padding:10px:
}
p#msg textarea
{border:2px solid blue;height:30em;width:80%;}

p#adr input,p#obj input
{border:2px solid blue;}
p.bt
{text-align:center;}
p.bt input
{border:1px red solid;width:50%;}

#onglet { 
	margin-top: 0;
	margin-right: 0;
	margin-bottom: -1px;
	margin-left: 0;
	padding: 0 10px 0 0; 
	list-style: none; 
} 
#onglet li {
	display: inline; /* affichage horizontal */ 
} 
#onglet li a { 
	padding: 5px 20px; 
	margin: 0; 
	background: white; 
	color: red; 
	border: 1px solid #FF2D00; 
	text-decoration: none; 
	-moz-border-radius: 10px 10px 0 0; 
	-webkit-border-radius: 10px 10px 0 0; 
	border-radius: 10px 10px 0 0;         
	-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
	-webkit-border-top-right-radius: 10px; /* pour Chrome */ 
} 
#onglet li a:hover, #menu li a:focus { 
	background: #FF2D00; 
	color: white; 
} 
#onglet dt {
	display: inline; /* affichage horizontal */ 
} 
#onglet dt a { 
	padding: 5px 20px; 
	margin: 0; 
	background: #FF2D00; 
	color: white; 
	border: 1px solid #FF2D00; 
	text-decoration: none; 
	-moz-border-radius: 10px 10px 0 0; 
	-webkit-border-radius: 10px 10px 0 0; 
	border-radius: 10px 10px 0 0;         
	-webkit-border-top-left-radius: 10px; /* pour Chrome */ 
	-webkit-border-top-right-radius: 10px; /* pour Chrome */ 
} 
#onglet dt a:hover, #menu dt a:focus { 
	background: white; 
	color: #FF2D00; 
} 
/*-Style_connexion-----------------------------------------------------------------------*/
.logo{
	font-weight: bold;
	font-size:  20px;
	font-variant: small-caps;
	letter-spacing: -1px;
	font-family: "Century Gothic", Arial;
}
.nom_champ{
	color: #FF2D00;
	font-weight: bold;
	padding: 5px 0 5px 0;
	text-align: right;
	font-size:  15px;
	font-family: "Century Gothic", Arial;
}
.nom_outil{
	color: #FF2D00;
	font-variant: small-caps;
	font-weight: bold;
	padding: 6px 0 0 0;
	font-size:  12px;
	font-family: "Century Gothic", Arial;
}
.inputbox{
	font-size:  14x;
	font-family: "Century Gothic", Arial;
}
.message{
	padding: 10px 0 10px 0;
}
div.formulaire{
	padding: 10px 0 10px 0;
}
div.val_formulaire{
	padding: 10px 0 10px 0;
}
.button, a.button, a.button:visited{
	-moz-border-radius : 5px;
	background-color: #106196;
	cursor: pointer;
	font-family:"Century Gothic", Arial;
	font-weight: bold;	
	font-size: 14px;
	color:white; 
	border: 1px solid black;
	padding: 4px 5px 4px 5px;
	text-decoration: none;
}
a.button:hover{
	text-decoration: none;
	background-color: #FF2D00;
}
/*-Style_menu-----------------------------------------------------------------------*/
div#menu{
   font-family: "Century Gothic";
   float: left; /* Le menu flottera à gauche */
   width: 200px; /* Très important : donner une taille au menu */
   margin: 0;
   padding: 0;
   list-style: none;
   /*height: auto;*/
   height: 322.5px;
   border-right : 1px solid red;
   padding: 5px 0 5px 0;
}
div#menu h3   {
	font-family: "Century Gothic";
	padding: 0 10px;
	color: #FF2D00;
	font-size : medium;
}
div#menu p {
	font-family: "Century Gothic";
	padding-left:8px;
}
div#menu li{
	font-family: "Century Gothic";
	list-style:none;
	margin : 0;
}

/* fond blanc pour le menu */ 
a.menu_principal, a.menu_principal:visited{
	color:white;
	font-family: "Century Gothic";
	font-variant: small-caps;
	font-weight: none;
	letter-spacing: 0;
	font-size: 14px;
}
a.menu_principal:hover{
	color:black;
	font-size: 18px;
}
a.menu_secondaire, a.menu_secondaire:visited{
	border:0;
	background-color: none;
	color:black;
	font-family: "Century Gothic";
	font-variant: small-caps;
	font-weight: none;
	letter-spacing: -0.3px;
	font-size: 15px;
}
a.menu_secondaire:hover{
	border:0;
	background-color: none;
	color:black;
}
div#menu ul {
	padding: 0;
	margin:0px; 
}

/* fond different au survol de la souris pour les sous menu et les "basiques"*/ 
div#menu li:hover {
	background-color: red;
}
div#menu ul li {
	border-top: 1px solid red;
	border-bottom: 1px solid red;
	font-size: 14px;
	letter-spacing: -1px;
	color: white;
	margin: 5px 0 0 0;
	height: 35px;
	padding: 5px 0 0 0;
	position:relative; 
	list-style: none; 
	background-color: #FF2D00;
}
div#menu dl{
	border-bottom: 1px solid black;
	border-right: 1px solid black;
	border-left: 1px solid black;
}
div#menu dt {
	border-top: 1px solid black;
	padding: 10px 0 10px 0;
	position:relative; 
	list-style: none; 
	background-color: #106196;
}
div#menu dt:hover {
	background-color: #106196;
	/*23E043*/
}
div#menu ul ul {
	position: absolute; 
	top: -1px; 
	left: 200px; 
	display:none
}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84 */ 
div#menu li a {
	text-decoration: none;
	padding: 4px 0 4px 8px;
	display:block;
	width: 200px;
}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {
	display:block;
}