html,body{
  height:100%;
  width:100%;
/*	overflow:hidden; */
}

body{
  margin:0px;
	padding:0px;
	font:1em Arial, Helvetica, sans-serif;
	background-color:#F7F4EA;
}

a{
  text-decoration:none;
}

A[hreflang]:after{
  content:"\0000a0[" attr(hreflang) "]";
}

hr{
	border:1px solid white;
	border-top: 1px solid #CCCCCC;
}

h2{
	font: bold 1.4em Georgia, "Times New Roman", Times, serif;
	text-align:left;
	color: #ED9C01;
	margin: 0px;
}

h3{
	font: bold 1.2em Georgia, "Times New Roman", Times, serif;
	text-align:left;
	color: #ED9C01;
	margin: 0px;
}

#main{
  position:relative;
  height:100%;
  width:100%;
	overflow:auto;
}

#top{
  position:relative;
  margin:0px 195px 0px 130px;
  background:#FFFFFF;
	height:100%;
}
html>body #top{
  height:auto;
	min-height:100%;
}

/********** CONTENEUR DU TEXTE PRINCIPALE ******************/

#mainText{
  padding:50px 30px 30px 110px;
	font-size:0.8em;
	text-align:justify;
}

#mainText .code{
  margin: 0px auto;
  border: 1px solid #AFAFAF;
  background-color: #EFEFEF;
  width:80%;
  overflow:auto;
  overflow-y:hidden;
}

#mainText pre{
  padding: 5px 10px 0;
  font-size: 1.1em;
}
html>body #mainText pre{
  margin:0 0 18px;
}

#mainText ul{
  list-style-image:url(puce.gif);
}

#mainText a{
  color:#CC6600;
	text-decoration:underline;
}

#mainText a:visited{
  color:#999999;
	text-decoration:line-through;
}

#mainText a:hover{
  color:#CC0000;
	text-decoration:underline;
}

#mainText h2,h3{
  margin:0px;
	padding:0px;
}

#mainText h3 a{
  margin:0px;
	padding:0px;
	color:#ED9C01;
}

#mainText h3 a:visited{
	color:#ED9C01;
	text-decoration:none;
}

#mainText h3 a:hover{
	color:#ED9C01;
	text-decoration:none;
}

#mainText .date{
  margin-top:0;
	padding-top:0;
	font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
	color: #CCCCCC;
}

#mainText .intro{
  margin-top:0;
	padding-top:0;
	margin-bottom: 2em;
	text-align:left;
}
#mainText .intro strong{
  font: bold 0.8em Verdana, Arial, Helvetica, sans-serif;
}
#mainText .intro strong a{
  color:#000000;
	text-decoration:underline;
}
#mainText .intro strong a:hover{
  color:#CC0000;
	text-decoration:none;
}

#mainText p.sTitre{
	font: italic 0.9em Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	color: #999999;
	padding-bottom: 2em;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom:2em;
}

/****************** CONTOURS GRAPHIQUES DU CADRE *****************************************/

#gauche,
#droite{
  position:absolute;
	top:0px;
	bottom:0px;
	width:14px;
	height:100%;
	background:url(droite.gif) repeat-y top left;
}

#gauche{
	left:0px;
}

#droite{
	right:0px;
	background-position:top right;
}

#HeadGraph,
#FootGraph{
  position:absolute;
	left:0px;
	height:20px;
	width:100%;
	background:url(top.gif) repeat-x left top;
}

#HeadGraph{
	top:0px;
}

#FootGraph{
	bottom:0px;
	background-position:left bottom;
	margin-bottom:-1px;
}
html>body #FootGraph{
  margin:0;
}

#HeadGraph div,
#FootGraph div{
  width:14px;
	height:20px;
}

#HeadGraph div.gauche,
#FootGraph div.gauche{
  float:left;
	background:url(ch.gif) no-repeat left top;
}

#HeadGraph div.droite,
#FootGraph div.droite{
  float:right;
	background:url(ch.gif) no-repeat right top;
}

#FootGraph div.gauche{
	background-position:left bottom;
}

#FootGraph div.droite{
	background-position:right bottom;
}

/********** MENU DE GAUCHE *****************************************/

#left{
  position:absolute;
	top:15px;
	left:10px;
	width:240px;
	height: 500px;
	background:url(gauche.gif) no-repeat top left;
}

#left span{
  display:none;
}

#left img{
  display:block;
  position:relative;
	top:15px;
	left:15px;
}

#left p{
  position:absolute;
	top:200px;
	left:110px;
	width:85px;
	margin:0px;
	padding:0px;
}

#xhtml,#css{
  display:block;
	float:left;
	height:18px;
	background:url(xhtml.gif) no-repeat top left;
	width:49px;
}
#css{
  background:url(css.gif) no-repeat top left;
	width:36px;
}
/************************/
#left ul{
  position:absolute;
	left: 14px;
	top: 202px;
	margin:0px;
	padding:0px;
	list-style: none;
}

#left ul:hover{
	top: 186px;
}

#left li{
  margin:0px;
	padding:0px;
	display:inline;
}
#left li a{
	display:block;
}

#left ul #fs1,
#left ul #fs3 {
  display:none;
}

#left ul:hover li#fs1,
#left ul:hover li#fs3 {
  display:block;
}

#left ul #fs1 a {
  width:95px;
	height:16px;
	background:url(liste.gif) no-repeat top right;
}

#left ul #fs3 a {
  width:95px;
	height:16px;
	background:url(liste.gif) no-repeat bottom right;
}

#left ul li#fs1 a:hover {
  background-position: top left;
}
#left ul li#fs3 a:hover {
  background-position: bottom left;
}

#left ul #fs2 a {
  width:95px;
	height:17px;
	background:url(liste.gif) no-repeat 0% -16px;
}
#left ul:hover #fs2 a {
  width:95px;
	height:17px;
	background-position: -95px -16px;
}

/*************************/
#left #nav{
  left: 125px;
	top: 232px;
}

#left #nav a{
	display:block;
	border: 1px solid #CCCCCC;
	margin-top: 2px;
	width:124px;
	padding:1px 2px 0px;
	overflow:hidden;
	font: 0.55em Arial, Helvetica, sans-serif;
	color: #999999;
	white-space: nowrap;
}
#left #nav a:hover{
	color: #000000;
	background-color: #FFCC99;
}

/********** MENU DE DROITE *****************************************/

#right{
  position:absolute;
	top:0px;
	left:100%;
	margin-left:-30px;
	width:205px;
	height: 100%;
	z-index:2;
}

#right h2{
  margin:0px;
	padding:0px;
	position:absolute;
	top:0px;
	left:0px;
	width:205px;
	height:80px;
	background:url(haut.gif) no-repeat left top;
}

#right h2 span{
  display:none;
}

#mainMenu{
  position:relative;
	top:54px;
	width:205px;
	height:300px;
  background:url(fond.gif);
}

#margeOverflow{
	position:absolute;
	top:0px;
	left:0px;
	padding-top:10px;
	height:290px;
	width:180px;
	overflow:auto;
	z-index:2;
	background: url(haut.gif) no-repeat 0% -54px;
	background-attachment: fixed;
}
html>body #margeOverflow{
  background-attachment: scroll;
}

#margeOverflow ul{
	margin:0px 0px 10px 25px;
	padding:0px 0px 10px;
	border-bottom: 1px solid #CCCCCC;
	list-style: none;
	font: bold 0.6em Verdana, Arial, Helvetica, sans-serif;
}

#margeOverflow li{
  display:inline;
  margin:0px;
	padding:0px;
}

#margeOverflow li div{
	padding-left:15px;
	background:url(puce.gif) no-repeat 0% 3px;
}

#margeOverflow li a{
  color:#663300;
}

#margeOverflow li a:hover{
  color:#CC0000;
}

#margeOverflow li span{
  color:#AAAAAA;
}


#right div.bas{
	margin-top:54px;
  background:url(bas.gif) no-repeat left top;
	width: 205px;
	height: 175px;
}

#footer{
  position:absolute;
	top:18px;
	left:20px;
	z-index:2;
	font: italic 0.6em Verdana, Arial, Helvetica, sans-serif;
	color:#CCCCCC;
}

#footer a{
	color:#CCCCCC;
}

#footer a:hover{
	color:#FF9900;
}

/****** FORMULAIRES DE CONTACT ************/

label{
  display:block;
}

input,
textarea{
  width:95%;
}

/****** ANNUAIRE *********/
#listannuG,
#listannuD{
  float:left;
}

#annuaire hr{
  clear:both;
}

#annuaire a{
	font-weight: bold;
}