/********************/
/* Feuille de style */
/********************/

html { 
	font-size: 100%; /* Évite un bug d'IE 6-7. */ 
	background : url('design/fond_html.png') center top repeat-y ;
}

body { 
	margin: 0; 
	padding: 0em; /* 1em, remettre à zéro si nécessaire. */ 
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em; /* À adapter pour la police choisie. */ 
	line-height: 1.2; /* À adapter au design.*/ 
	color: black; 
	background: transparent url('design/fond_body.png') top center no-repeat;
	}	

#page {
	position: relative;
	margin: 0em auto; /* auto pour centrer horizontalement la page dans BODY pour les navigateurs autres que IE/WIN */
	padding: 0;
	width: 790px; /* ou 100% pour pleine largeur fluide */
	top:140px;
}

#menugauche {
	position : absolute;
	top: 0px;
	left: 0px;
	background: transparent url('design/menu.png') top left no-repeat; 
	width : 280px;
	height : 480px;
}

#marge {
	color : #560018;
	position : absolute;
	top: 175px;
	left: 0px;
	padding: 4px;
	text-align : right ;
	width : 270px;
}

#contenu {
	margin-left: 280px;
	color : #0e4228;
	width : 509px;
	text-align : justify;
	background-color : white;
	padding: 0em;
	padding-bottom : 0.5em;
	}

/* Titres */ 

h1, h2, h3, h4, h5, h6 {	
	margin-top: 0.5em;
	margin-right: 0pt;
	margin-bottom: 0.5em;
	line-height: 1.2;
	font-style: normal;
}

#contenu h1 {
	color : #0300a4;
	font-size : 1.6em;
	text-align : left;
	padding-top : .5em;
	padding-bottom : .5em;
	padding-left : 1em;
	margin-left : 1em;
}

/* --- Styles de la rubrique "pratique" --- */ 

.pratique {
	color : #010042;
	background-color : #6a68d5;
	border: 2px dotted #ebb100;
	top: 120px;
	margin : 5px;
	padding : 0 5px 0 5px;
	display : block;
	text-align : justify;
	width : 249px;
}

.pratique h1 {
	color : #ebb100;
	margin : 0.3em 0 0 0;
	padding: 0 0 0 1em;
	font-size : 1.6em;
	text-align : left;
}

.pratique h2 {
	color : #ebb100;
	padding: 0 0 0 1em;
	margin : 0 0 0 0.5em;
	font-size : 1.2em;
	text-align : left;
}

.pratique li {
	list-style : url(design/puce_jc.png);
	margin-left : 0px;
}

/* --- Styles de la rubrique "section" --- */ 

#contenu p {
	margin : 10px;
	text-align : justify;
}

.intro li {
	list-style : url(design/puce_bc.png);
	margin-left : 25px;
}

.section {
	color : #ffffff;
	background-color : #560018;
	margin : 10px;
	padding : 10px;
	width : 470px;
	text-align : justify;
}

.section p {
	color : #ffffff;
	margin : 5px;
	text-align : justify;
	}
	
.section h2 {
	color : #ebb100;
	margin : 0 0 0.5em 0;
	padding: 0 0 0 1em;
	font-size : 1.6em;
	text-align : left;
}

.section h3 {
	background: url(design/puce_jc.png) left no-repeat;
	color : #ebb100;
	padding: 0 0 0 1em;
	margin : 0 0 0 0.5em;
	font-size : 1.2em;
	text-align : left;
}

.section li {
	list-style : url('design/puce_jc.png');
	margin-left : 0px;
	padding-left : 0px;
}

.section a {
	color : #ebb100;
	font-weight : bold;
	text-decoration : none;
}

.section a:hover {
	color : #ebb100;
	font-weight : bold;
	text-decoration : underline;
}

.vignette {
	padding: 5px 20px 5px 10px;
	float : left;
}

#icones {
	background-color: #f6d778;
	margin: 10px;
	padding: 8px;
	border: 2px dotted #3d3ad5;
}

#icones p {
	text-align: center;
}

/*****************************************/
/* Styles pour les bandeaux promotionnels*/
/*****************************************/

#valentin {
	background : #C00000 url('design/saint-valentin.jpg') top center no-repeat;
	text-align: right; /* pour annuler l'heritage de text-align:center de BODY */
	font-weight : bold;
	font-size : 120%;
	margin: 0em auto; /* auto pour centrer horizontalement la page dans BODY pour les navigateurs autres que IE/WIN */
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	height : 58px;
}

#valentin a {
	color : #00007f;
	font-weight : bold;
	text-decoration : none;
}

#paques {
	background : #C00000 url('design/paques.png') top center no-repeat;
	text-align: right; /* pour annuler l'heritage de text-align:center de BODY */
	color: #C00000 ;
	font-weight : bold;
	font-size : 120%;
	margin: 0em auto; /* auto pour centrer horizontalement la page dans BODY pour les navigateurs autres que IE/WIN */
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	height : 58px;
}

#paques a {
	color : #00007f;
	font-weight : bold;
	text-decoration : none;
}

#ete {
	background : url('design/ete.png') top center no-repeat;
	text-align: center; /* pour annuler l'heritage de text-align:center de BODY */
	color : #C00000;
	font-weight : bold;
	font-size : 100%;
	height : 58px;
	padding-left : 412px;
}

#ete a {
	color : #ff0000;
	font-weight : bold;
	text-decoration : none;
}

#choucroute {
	background : #004000 url('design/choucroute.jpg') top center no-repeat;
	text-align: center; /* pour annuler l'heritage de text-align:center de BODY */
	font-weight : bold;
	font-size : 105%;
	margin: 0em auto; /* auto pour centrer horizontalement la page dans BODY pour les navigateurs autres que IE/WIN */
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	height : 58px;
}

#choucroute a {
	color : #007f00;
	font-weight : bold;
	text-decoration : none;
}

#fetes {
	background : #C00000 url('design/fetes.png') top center no-repeat;
	text-align: right; /* pour annuler l'heritage de text-align:center de BODY */
	font-weight : bold;
	font-size : 120%;
	margin: 0em auto; /* auto pour centrer horizontalement la page dans BODY pour les navigateurs autres que IE/WIN */
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	padding-left: 0px;
	height : 58px;
}

#fetes a {
	color : #ffff00;
	font-weight : bold;
	text-decoration : none;
}

/* Listes */ 
ul, ol { 
	margin: .75em 0 .75em 32px; 
	padding: 0; 
}

/* Paragraphes */ 
p { 
	margin: .75em 0; /* Marges plus faibles que par défaut. */ 
}

address { 
	margin: .75em 0; 
	font-style: normal; 
}

/* Liens */ 
a { 
	text-decoration: none; /* Valeur normale : underline*/
	font-weight: bold; /* Valeur normale : normal*/
}

a:link { 
	/*color: #11C;*/ 
}

a:visited { 
  /*color: #339;*/ 
} 
a:hover, a:focus, a:active { 

}

/* Pas de bordure pointillée ou halo lors du clic sur un lien */ 
a:active { 
	outline: none; 
} 

/* Pas de bordure autour des images dans les liens */ 
a img { 
	border: none; 
} 
 
/* Divers éléments de type en-ligne (8) */ 
em { 
	font-style: italic; 
} 

strong { 
	font-weight: bold; 
} 
 
/* Niveaux de plan et zoom*/
.plan1 li {
	list-style : url('design/puce_jc.png');
	margin-left : 25px;
	margin-bottom : 10px;
}

.plan2 li {
	list-style : url('design/puce_rc.png');
	margin-left : 35px;
	margin-bottom : 10px;
}

.zoom {
	list-style : url('design/puce_bc.png');
	margin-left : 25px;
	font-style : italic;
}

/* Formulaires */ 
form, fieldset { 
	margin: 0; 
	padding: 0; 
	border: none; 
}
 
input, button, select { 
	vertical-align: middle; /* Solution pb. d'alignement. (9) */ 
}

/* Met en évidence les abréviations (ayant un attribut title) */ 
abbr[title] { 
	border-bottom: 1px dotted; 
	cursor: help; 
} 
 
/* Met en évidence les citations */ 
blockquote { 
	margin: .75em 0 .75em 20px; 
	padding: 0 0 0 10px; 
	border-left: solid 2px #ddd; 
} 

q, cite { 
  font-style: italic; 
} 
q cite, q q { 
	font-style: normal 
} 
 
/* Supprime les guillemets automatiques (citations courtes) */ 
q { 
	quotes: none; 
}
 
q:before, q:after { 
	content: ""; /* Nécessaire pour Safari/Chrome */ 
} 
 
/* Rapproche les paragraphes dans les listes et citations */ 
blockquote p, li p { 
	margin: .5em 0; 
} 
 
/* Styles de base pour les listes de définition */ 
dl { 
	margin: .75em 0; 
} 

dt { 
	margin: .75em 0 0 0; 
	font-weight: bold; 
} 

dd { 
	margin: .25em 0 .25em 32px; 
} 
 
.menur {
	position : absolute;
	font-size : 1.2em;
	color : #0300a4; 
	font-weight: bold;
}

.menub {
	position : absolute;
	font-size : 1.2em;
	color : #0e4228; 
	font-weight: bold;
}

.menuj {
	position : absolute;
	font-size : 1.2em;
	color : #ebb100; 
}

.menujr {
	position : absolute;
	font-size : 1.2em;
	color : #ebb100; 
}

.menujb {
	position : absolute;
	font-size : 1.2em;
	color : #ebb100; 
}

.menurp {
	position : absolute;
	font-size : 1.2em;
	color : #eb7395; 
}

#menu1, #menu2, #menu3 {
	top : -2.5em;
	z-index : 3;
}

#menu4, #menu5 {
	top : 8.2em;
	z-index : 3;
}

#menu6 {
	top : 22.2em;
	z-index : 3;
}

#menu1 { left : 0.2em; }
#menu2 { left : 5em; }
#menu3 { left : 12.5em; }
#menu4 { left : 0.5em; }
#menu5 { left : 6.8em; }
#menu6 { left : 0.8em; }

.sousmenub {
	position : absolute;
	text-align : left;
	font-size : 1.1em;
	font-weight: bold;
	width : 8em;
}

.sousmenur, .sousmenurp {
	position : absolute;
	text-align : left;
	font-size : 1.1em;
	font-weight: bold;
	width : 7em;
}

.menur a {
	text-decoration : none;
	color : #f6ca43;
}

.menub a{
	text-decoration : none;
	color : #f6ca43;
}

.menuj a  {
	text-decoration : none;
	color : #5f4800;
}

.menuj a:hover {
	text-decoration : none;
	color : #f6d778;
}

.menujr a  {
	text-decoration : none;
	color : #560018;
}

.menujr a:hover {
	text-decoration : none;
	color : #f6d778;
}

.menujb a  {
	text-decoration : none;
	color : #010042;
}

.menujb a:hover {
	text-decoration : none;
	color : #f6d778;
}

.menurp a  {
	text-decoration : none;
	color : #eb7395;
}

.menurp a:hover {
	text-decoration : none;
	color : #f6d778;
}

.sousmenur a  {
	text-decoration : none;
	color : #560018;
}

.sousmenur a:hover {
	text-decoration : none;
	color : #f6ca43;
}

.sousmenurp a  {
	text-decoration : none;
	color : #eb7395;
}

.sousmenurp a:hover {
	text-decoration : none;
	color : #f6ca43;
}

.sousmenub a  {
	text-decoration : none;
	color : #010042;
}

.sousmenub a:hover {
	text-decoration : none;
	color : #f6ca43;
}

#sousmenu21 {
	top : -1em;
	left : 4em;
	z-index : 10;
}

#sousmenu22 {
	top : 0.5em;
	left : 3.1em;
	z-index : 10;
}

#sousmenu23 {
	top : 2em;
	left : 2.2em;
	z-index : 10;
}

#sousmenu24 {
	top : 3.5em;
	left : 1.3em;
	z-index : 10;
}

#sousmenu31 {
	top : -1em;
	left : 12.4em;
	z-index : 10;
	}

#sousmenu32 {
	top : 0.5em;
	left : 11.4em;
	z-index : 10;
}

#sousmenu33 {
	top : 2em;
	left : 10.4em;
	z-index : 10;
}

#sousmenu34 {
	top : 3.5em;
	left : 9.4em;
	z-index : 10;
}

#sousmenu41 {
	top : 10.5em;
	left : 0.5em;
	z-index : 10;
}

#sousmenu51 {
	top : 10.5em;
	left : 5.6em;
	z-index : 10;
}

#sousmenu52{
	top : 13.5em;
	left : 4em;
	z-index : 10;
}

#sousmenu53 {
	top : 15em;
	left : 3em;
	z-index : 10;
}

#sousmenu54 {
	top : 18em;
	left : 1.4em;
	z-index : 10;
}

.image_menu {
	position : absolute; 
	width : 3em;
} 

#image_menu1 {
	left : 1.3em;
	top : -7em;
	z-index : 1;
}

#image_menu2 {
	left : 9.5em;
	top : -7em;
}

#image_menu3 {
	left : 18.5em;
	top : -7em;
}

#image_menu4 {
	left : 25px;
	top : 6em;
	z-index : 1;
}

#image_menu5 {
	left : 145px;
	top : 6em;
	z-index : 1;
}

#image_menu6 {
	left : 02em;
	top : 23em;
	z-index : 1;
}

#image_menu7 {
	top : 5.5em;
	left : 210px;
	z-index : 1;
}

/* Styles pour les fenêtres popup*/

#popuptitle {
font-size : 150%;
color : #660000;
background-color : #ffffff;
text-align : center;
font-family : Arial, Helvetica, sans-serif;
}

#popupcomment {
color : #660000;
background-color : #ffffff;
text-align : center;
font-family : Arial, Helvetica, sans-serif;
}

#popuptexte {
color : #660000;
background-color : #ffffff;
margin : 10px;
text-align : justify;
font-family : Arial, Helvetica, sans-serif;
}

#popupclose {
color : #ff0000;
background-color : #ffffff;
text-align : center;
font-family : Arial, Helvetica, sans-serif;
text-decoration: underline;
}

/* Styles pour les formulaires*/

div.row {
	clear: both;
	padding-top: 5px;
  }

div.rowh {
	display: none;
	clear: both;
	padding-top: 5px;
	}

div.row span.label {
	float: left;
	width: 85px;
	text-align: right;
  }

div.row span.formw {
  float: right;
  width: 370px;
  text-align: left;
  }

.checkbox, .radio {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	background: url(design/checkbox-j2.png) no-repeat;
	float: left;
}

.select {
	position: absolute;
	width: 190px;
	height: 21px;
	padding: 2px 24px 0 8px;
	color: #fff;
	background: url(design/select.png) no-repeat;
	overflow: hidden;
}

styled {
	display: none;
}

select.styled {
	position: relative;
	width: 190px;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 5;
}

 .disabled {
 	opacity: 0.5;
 	filter: alpha(opacity=50); 
}

.envoi {
	background-color: #f6d778;
	border: 2px dotted #3d3ad5;
	width: 240px;	
	padding: 2px;
	font-family : Arial, Helvetica, sans-serif;
	}