html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	font: 90% "Trebuchet MS", sans-serif;
	background: /*#A4BCE0;*/ url(images/wp0032.jpg) ;
}

/*----------------------------Global----------------------------*/
div#conteneur
{
	min-height: 100%;
	width: 900px ;
	margin: 0 auto ;
	text-align: left ;
	position: relative;
	padding: 0 10px;
	background:  /*#E7EFFC;*/ url(images/global.png) ;
	/*overflow: auto;*/
}


/*----------------------------Header----------------------------*/

h1#header
{
	height: 176px ;
	background: #E7EFFC;
	margin: 0 ;
}

h1#header img
{
	width: 400px ;
	height: 126px ;
	/*display: block ;*/
   /*background: url(images/logo.png) no-repeat ;*/
	position: absolute ;
	left: 500px;
	top: 0px ;
	/*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 */

/*----------------------------center----------------------------*/
div#center
{
	padding-bottom: 36px;
	overflow: auto;
}
  
/*----------------------------Navigation----------------------------*/
ul#menu
{
	height: 25px ;
	margin: 0 ;
	padding: 0 ;
	background: #336699;/*url(images/bg_menu.gif) repeat-x 0 -25px ;*/
	list-style-type: none ;
}

ul#menu li
{
	float: left ;
	text-align: center ;
}

ul#menu li a
{
	width: 98px ;
	line-height: 25px ;
	font-size: 1 em ;
	font-weight: bold ;
	letter-spacing: 1px ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
	border-right: 2px solid #E7EFFC ;
}

/* C'est sur les liens que le gros du travail est
 effectué, largeur, hauteur de ligne, taille de police, graisse de police,
  espacement des lettres, couleur, bordure et decoration du texte. 
  Nous pouvons dimensionner les a grâce à la propriété display: block ; */

ul#menu li a:hover
{
	background: #FF6633;/*url(images/bg_menu.gif) repeat-x 0 0 ;*/
}

 /*----------------------------Content----------------------------*/
div#contenu
{
	float: left;
	min-height: 100%;
	padding: 0 0px 0 20px;
	/*background: url(images/bg_page.png) no-repeat 5px 15px;*/
	padding-bottom: 0px;
	width: 650px;
	overflow: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

div#contenu h2
{
	padding-left: 30px;
	background: url(images/tube_petit.gif) left bottom no-repeat;
	color: #003399;
	font-size: 1.5em;
	border-bottom: 3px solid #D5DCE9;
}

div#contenu h3
{
font-variant: small-caps;
color: #003399;
font-size: 1.2em;
}

div#contenu p
{
	text-align: justify ;
	text-indent: 0em ;
	line-height: 2em ;
	color: #003399;
	font-size: 1em;
}

div#contenu div.imgdafaq
{
float: right; 
margin: 10px 0px 0px 10px;
border: 0px solid;
}

div#contenu div.imgd
{
float: right; 
margin: 10px 0px 0px 10px;
border: 1px solid;
border-color: rgb(0, 51, 153);
}

div#contenu div.imgg
{
float: left; 
margin: 10px 10px 0px 0px;
border: 1px solid;
border-color: rgb(0, 51, 153);
}

div#contenu a
{
	color: #FF6633 ;
}

div#contenu a:hover
{
	text-decoration: none ;
}

div#contenu a.img
{
	color: #003399;
}

div#contenu a.img:hover
{
	color: #FF6633;
}

ul#contenu
{
}

ul#contenu li
{
	text-align: justify ;
	text-indent: 0em ;
	line-height: 2em ;
	color: #003399;
	font-size: 1em;
}
/*----------------------------skycraper----------------------------*/
div#sky{
	float: left;
   margin: 20px 0px 0px 10px;
	width: 120px;
	height: 240px;
	}

/*----------------------------sidebar----------------------------*/
div#sidebar {

	float: right;
	width: 200px;
	margin: 50px 10px 0px 0px;
	}	
div#sidebar div{
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;

	box-shadow: 2px 2px 2px #888;
	-moz-box-shadow: 2px 2px 2px #888;
	-webkit-box-shadow: 2px 2px 2px #888;

	behavior: url(pie/pie.htc);

	background: #D5DCE9;
	margin-bottom: 20px;
	padding: 5px 5px 10px 5px;
}
div#sidebar p
{
	text-align: left ;
	text-indent: 0em ;
	margin-bottom: 5px;
	line-height: 1em ;
	color: #003399;
	font-size: 1em;
	font-style: arial;
}
div#sidebar a
{
	/*background: url(images/arrow_right.gif) no-repeat 0px 1px;*/
	display: block;
	font-weight: bold;
	height: 15pt;
	color: #003399;
	text-decoration: none;
	font-size: 0.9em;
}
div#sidebar a:hover
{
	/*background-color:#E7EFFC;*/
	text-decoration: underline;
	/*color: #FF6633;*/
}
div#sidebar h3
{
	margin-top: 0px;
	margin-bottom: 10px;
	line-height: 15pt;
	font-weight: bold;
	font-size: 12pt;
	color: #003399;
	border-bottom:2px #FF6633 solid;
}	

/**div#sidebar h3:first-letter{
	color: #FF6633
}**/
div#sidebar ul {
	margin: 0;
	list-style: none;
	line-height: 1.5em;
	padding-left: 0px;
}
div#sidebar li {	
	padding-left: 10px;
	display:block;
	font-weight: bold;
	height: 15pt;
	color: #003399;
	text-decoration: none;
	font-size: 0.9em;
}

/*----------------------------footer----------------------------*/
div#footer{
	position: absolute;
	bottom: 0;
	left: 10px;
	width: 900px;
	text-align: center;
	background: url(images/footer.png) repeat-x;

}

div#footer a
{
	color: #FFFFFF ;
	text-decoration: underline;
}

div#footer a:hover
{
	text-decoration: none ;
}

div#footer p
{
	text-align: center;
	margin: 0 ;
	padding-right: 0px ;
	color: #FFFFFF ;
	font-size: 0.9em;
}

pre
{
	overflow: auto ;
	background: #E7EFFC ;
	border: 2px solid #003399 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}


pre span
{
	color: #003399 ;
}

pre span.comment
{
	color: #b30000 ;
}

/*----------------------------Galerie----------------------------*/

div#galerie
{
	width: 410px ;
	background: #E7EFFC ;
	border: 0px solid #003399 ;
	padding: 15px ;
	margin: 15px 30px ;
	text-align: center ;
	font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	float: left ;
}

ul#galerie_mini li a img
{
	margin: 2px 1px ;
	border: 1px solid #003399 ;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: italic bold 1.5em/1.5em Arial, serif;
	color: #336699;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 1px solid #003399 ;
}


/*----------------------------tableaux----------------------------*/
#boundary{
	background:#FFFFFF;
	padding:2em;
	width:40em;
}

table{
	color: #003399;
}

table.footcollapse{
	width:30em;
	font-size: 90%;
}
table.footcollapse caption{
	font-size: 80%;
	font-weight: bold;
	color: black;
	text-transform: uppercase;
	text-align: left;
}
table.footcollapse th{
	text-align:left;
}
table.footcollapse,table.footcollapse th,table.footcollapse th
{
	border:none;
	border-collapse:collapse;	
}
table.footcollapse thead th
{
	color:#FFF;
	width:10em;
	border-style:solid;
	border-width:0px;
	border-color:#FFFFFF;
	background:#336699;
	padding:2px 10px;
}
table.footcollapse tfoot th,
table.footcollapse tfoot td
{
	border-style:solid;
	border-width:0px;
	border-color:#FFFFFF;
	background:#A4BCE0;
	padding:2px 10px;
}
table.footcollapse tbody{
	background:#E7EFFC;
}
table.footcollapse tbody td{
	padding:5px 10px;
	border:0px solid #FFFFFF;
}
table.footcollapse tbody th{
	padding:2px 10px;
	border:0px solid #FFFFFF;
	border-left:none;
}
table.footcollapse tbody tr.odd{
	background:#E0EBFC;
}

table.footcollapse tfoot td img{
	border:none;
	vertical-align:bottom;
	padding-left:10px;
	float:right;
}

/*----------------------------carte----------------------------*/

ul#cmp {
	float: right;
	list-style-type: none;
	position: relative;
	display: block;
	background: transparent url(images/fc_pale.png) no-repeat 0 0;
	width: 200px;
	height: 280px;
	border: 0px solid #000;
	margin: 0 auto 0 auto;  /*the auto part is for optionally centering the list */
	padding: 0;
}

ul#cmp li { 
  display : inline;  
}

ul#cmp li a {
  position : absolute;
  display : block;
  text-decoration : none;
}

ul#cmp li a span.offset {
  margin-top : -9000px; 
  margin-left : -9000px;
  position : absolute;
}

ul#cmp li a:hover span.offset {
  color : #000;
  font-size: 11px;
-moz-border-radius:10px;
  opacity: 0.90;
  background-image : none;
  background-color : #D5DCE9;
  border : 1px solid #336699/*#003399*/;
  display : block;
  width : 200px;
  height : auto;
  text-decoration : none;
  cursor : pointer;
}

ul#cmp li a:hover span.offset span {
  display : block;
  width : 190px;
  margin : 5px;
}

/* 
  Hot-Spot Number One (1)
*/
/* taille et localisation relative de la liste */
ul#cmp li a#cmp01 { 
  width : 12px;
  height : 12px;
  margin-top: 45px;
  margin-left : 160px;
  text-decoration: none;
}

/*appel de la seconde image*/
ul#cmp li a#cmp01:hover {
  background : transparent url(images/fc.png) no-repeat -160px -45px;
}

/* position de la partie de description en dehors de l'image */
ul#cmp li a#cmp01:hover span.offset {
  margin-top : -50px;
  margin-left : 40px;
  
}

/* 
  Hot-Spot Number One (2)
*/

ul#cmp li a#cmp02 { 
  width : 12px;
  height : 12px;
  margin-top: 55px;
  margin-left : 169px;
    text-decoration: none;
}

ul#cmp li a#cmp02:hover {
  background : transparent url(images/fc.png) no-repeat -169px -55px;
}

ul#cmp li a#cmp02:hover span.offset {
  margin-top : -60px;
  margin-left : 31px;
}

/* 
  Hot-Spot Number One (3)
*/

ul#cmp li a#cmp03 { 
  width : 12px;
  height : 12px;
  margin-top: 71px;
  margin-left : 159px;
    text-decoration: none;
}

ul#cmp li a#cmp03:hover {
  background : transparent url(images/fc.png) no-repeat -159px -71px;
}

ul#cmp li a#cmp03:hover span.offset {
  margin-top : -76px;
  margin-left : 41px;
}

/* 
  Hot-Spot Number One (4)
*/

ul#cmp li a#cmp04 { 
  width : 12px;
  height : 12px;
  margin-top: 116px;
  margin-left : 70px;
    text-decoration: none;
}

ul#cmp li a#cmp04:hover {
  background : transparent url(images/fc.png) no-repeat -70px -116px;
}

ul#cmp li a#cmp04:hover span.offset {
  margin-top : -90px;
  margin-left : 37px;
}

/* 
  Hot-Spot Number One (5)
*/

ul#cmp li a#cmp05 { 
  width : 12px;
  height : 12px;
  margin-top: 116px;
  margin-left : 84px;
    text-decoration: none;
}

ul#cmp li a#cmp05:hover {
  background : transparent url(images/fc5.png) no-repeat -84px -116px;
}

ul#cmp li a#cmp05:hover span.offset {
  margin-top : -90px;
  margin-left : 23px;
}

/* 
  Hot-Spot Number One (6) => n'existe plus
*/

ul#cmp li a#cmp06 { 
  width : 12px;
  height : 12px;
  margin-top: 125px;
  margin-left : 77px;
  text-decoration: none;
}

ul#cmp li a#cmp06:hover {
  background : transparent url(images/fc6.png) no-repeat -77px -125px;
}

ul#cmp li a#cmp06:hover span.offset {
  margin-top : -99px;
  margin-left : 30px;
}



/* 
  Hot-Spot Number One (7)
*/

ul#cmp li a#cmp07 { 
  width : 12px;
  height : 12px;
  margin-top: 167px;
  margin-left : 31px;
  text-decoration: none;
}

ul#cmp li a#cmp07:hover {
  background : transparent url(images/fc.png) no-repeat -31px -167px;
}

ul#cmp li a#cmp07:hover span.offset {
  margin-top : -80px;
  margin-left : 30px;
}