@charset "utf-8";
/* CSS Document */

body  {
	font: 100% Avenir, "Palatino Linotype", Lucida, Georgia, "Times New Roman", serif;
	background-color:white;
/*	background-image: url("../images/design/background2.jpg");
	background-repeat:no-repeat;
	background-position-x:center;*/
	/*	background-color:#FFF;
	margin: 5px auto; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
	padding: 0px;
	text-align: justify; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	color: #000;
	font-size:16px;
}
.thrColFixHdr #container {
/*	background-image: url("../images/design/milieu.jpg");
	background-repeat: repeat-y;
	background-position:center;
/*	background-color:#FFF;
/*	background-color:rgba(208,173,246,0.5);
/*	background-color:#C9F;*/
	margin: 0px auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	margin-bottom:-20px;
	padding-top:0px;
	margin-top:-10px;
/*	border: 2px solid #000;
	border-top:none;
	border-bottom:none;*/
	text-align: justify; /* ce paramétrage annule le paramètre text-align:center de l'élément body. */
	min-height:700px;
	width: 1004px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */
}
.thrColFixHdr #containerHaut {
/*	background-image: url("../images/design/haut.jpg");
	background-repeat: none;
	background-position:center;*/
	margin: 0px auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	width: 1004px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */
	height: 20px;
}
.thrColFixHdr #containerBas {
/*	background-image: url("../images/design/bas.jpg");
	background-repeat: none;
	background-position:center;*/
	margin: 0px auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	width: 1004px;  /* paramétrage de la largeur à 20 pixels de moins que le plein écran (800 pixels) pour tenir compte de l'habillage du navigateur et éviter l'apparition d'un ascenseur horizontal */
	height: 20px;
}
.thrColFixHdr #header {
	background-image: url("../images/design/entete.png");
	background-repeat:no-repeat;
	background-position:center;
/*	border: 2px solid #000;
	border-bottom: none;*/
	margin: 0px auto;
	width: 1004px;
	height: 100px;
	/*padding: 0px 0px 0px 50px;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
} 
.thrColFixHdr #header h1 {
	margin: 0px auto; /* la mise à zéro de la marge du dernier élément du div #header permet d'éviter une disparition de la marge (espace inexplicable entre les éléments div). Si l'élément div est entouré d'une bordure, cette précaution n'est pas nécessaire, car la bordure évite également la disparition de la marge */
	padding: 10px 0px; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
}





.sidebar1 {width:900px; height:32px; position:relative; z-index:100; margin-left:175px; margin-top:9px;}
.sidebar1 ul{
	width:900px;
	float:right; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	background:none;
	padding:0px 0px 0px 0px; /* le remplissage permet d'écarter le contenu de l'élément div des bords de celui-ci */
	margin: 0px;
	list-style-type:none;
}

.sidebar1 ul ul {width:68px; font-size:10pt;}
/*.sidebar1 a img
{
   border:none;
}
.sidebar1 a:hover img
{
	background-color:#D0ADF6;
	background-image:url("../images/degrade.png");
	background-repeat:repeat-x;
} */
.sidebar1 li { /* make menu horizontal */
	float:left;
	width:auto;
	padding-left:7px;
	padding-right:7px;
	position:relative;
	font-size:17px;
	font-variant:small-caps;
/*	font-weight:bolder;*/
}
.sidebar1 li li {
	font-size:12pt;
	font-variant:normal;
}

/* style the links for the top level */
.sidebar1 a, .sidebar1 a:visited {display:block; height:32px; text-decoration:none;}

/* style the second level background */
.sidebar1 ul ul a.drop, .sidebar1 ul ul a.drop:visited {background:#d0adf6 no-repeat 170px center;}
/* style the second level hover */
.sidebar1 ul ul a.drop:hover{background:#d0adf6 no-repeat 170px center;}
.sidebar1 ul ul :hover > a.drop {background:#d0adf6 no-repeat 170px center;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.sidebar1 ul ul {visibility:hidden;position:absolute;height:0;top:30px;left:-1px; width:170px;}

/* style the second level links */
.sidebar1 ul ul a, .sidebar1 ul ul a:visited {background:#d0adf6; color:#000; height:auto; line-height:1em; padding:4px 10px; width:170px; border:1px solid black; border-width:0 1px 1px 1px;}

/* style the top level hover */
/*.sidebar1 a:hover, .sidebar1 ul ul a:hover{color:#000; background:#7931dc;}*/
.sidebar1 :hover > a{
/*	background-color:#D0ADF6;
	background-image:url("../images/degrade.png");
	background-repeat:repeat-x; */
	background:none;
	text-decoration:underline;
}
.sidebar1 ul ul :hover > a {color:#000; background:#7931dc;}

/* make the second level visible when hover on first level list OR link */
.sidebar1 ul li:hover ul, .sidebar1 ul a:hover ul{visibility:visible; }

.sidebar1 li a
{
	color:#FFF;
	text-decoration:none;
}
.sidebar2 {width:450px; height:32px; margin-left:550px; padding-top:10px;}
.sidebar2 ul{
	float:right; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	background:none;
	width:450px;
/* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
	padding: 0px 0px 0px 0px; /* le remplissage permet d'écarter le contenu de l'élément div des bords de celui-ci */
	margin: 0px;
}
.sidebar2 li { /* make menu horizontal */
	width:auto;
	float:left;
	padding-left:20px;
	padding-right:20px;
	list-style-type: none;
	font-size:10pt;
}
.sidebar2 li a
{
	color:#000;
	text-decoration:none;
}
.sidebar2 li a img
{
   border:none;
}
.sidebar2 li a:hover
{
	text-decoration:underline;
}

.thrColFixHdr #mainContent
{
/*	width:864px;*/
	width:864px;
	background-image: none;
	margin: 20px 20px 20px 20px; /* les marges droite et gauche de cet élément div créent les deux colonnes extérieures su les deux côtés de la page. Quelle que soit la taille du contenu dans les éléments div des encadrés, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge gauche si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace des encadrés lorsque le contenu de ces derniers se termine. */
	padding: 0px 50px 20px 50px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
}
.thrColFixHdr #mainContent h1{
	font-size:20pt;
	text-align:center;
	font-weight:normal;
}
.thrColFixHdr #mainContent h2{
	font-size:14pt;
	font-style:normal;
	font-weight:normal;
}
.thrColFixHdr #mainContent a img{
	border:none;
	text-decoration:none;
}
.thrColFixHdr #mainContent a {
	color:#60C;
	text-decoration:none;
}
.thrColFixHdr #mainContent a:hover
{
	color:#60C;
	text-decoration:underline;
}

.thrColFixHdr #index1
{
	width:300px;
	float:left;
}

.thrColFixHdr #index2
{
	width:300px;
	float:left;
}

.thrColFixHdr #index3
{
	width:300px;
	float:right;
}

.thrColFixHdr #choix_toiles ul
{
	margin-left:-30px;
	margin-top:2px;
}
.thrColFixHdr #choix_toiles li
{
	width:auto;
	list-style-type:none;
	float:left;
	padding:2px;
}


.thrColFixHdr #sousmenu
{
/*	background-image: url("../images/design/sousmenu.png");*/
	width:1004px;
	height:50px;
}
.thrColFixHdr #sousmenu ul
{
	width:1004px;
	height:28px;
	background:none;
	text-align:center;
	margin:0px 0px 0px 50px;
	padding-top: 13px;
}
.thrColFixHdr #sousmenu li
{
	width:auto;
	list-style-type:none;
	float:left;
	padding-left:20px;
	padding-right:20px;
}
.thrColFixHdr #sousmenu li a
{
	color:#000;
	text-decoration:none;
	font-size:13pt;
}
.thrColFixHdr #sousmenu li a:hover
{
	color:#000;
	text-decoration:underline;
}
.thrColFixHdr #mainContentPhotos {
	width:904px;
	background:none;
	overflow:hidden;
	margin: 20px 50px 20px 50px; /* les marges droite et gauche de cet élément div créent les deux colonnes extérieures su les deux côtés de la page. Quelle que soit la taille du contenu dans les éléments div des encadrés, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge gauche si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace des encadrés lorsque le contenu de ces derniers se termine. */
	padding: 0px 0px 20px 0px; /* ne pas oublier que le remplissage est l'espace à l'intérieur du cadre de l'élément div, alors que la marge est l'espace à l'extérieur de celui-ci */
}
.thrColFixHdr #mainContentPhotos h1{
	font-size:20pt;
	text-align:center;
	font-weight:normal;
}
.thrColFixHdr #mainContentPhotos h2{
	font-size:14pt;
	font-style:normal;
	font-weight:normal;
}
.thrColFixHdr #mainContentPhotos a img{border:none; text-decoration:none; }


.thrColFixHdr #footer { 
	padding: 0px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
/*	background-color:#d0adf6;
/*	background-image: url("../images/bas_de_page.jpg");
	background-repeat:no-repeat;
	background-position:center;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;*/
	height: 40px;
	width:1004px;
	margin: 0px auto;
} 
.thrColFixHdr #footer p {
	margin: 0px; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
	padding: 10px 0px; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
}
.thrColFixHdr #footer ul
{
	float:right;
	margin-top:10px;
	background:none;
	width:780px;
}

.thrColFixHdr #footer li { /* make menu horizontal */
	width:auto;
	float:left;
	padding-left:15px;
	padding-right:15px;
	list-style-type: none;
	font-size:10pt;
}
.thrColFixHdr #footer li a
{
	color:#000;
	text-decoration:none;
}
.thrColFixHdr #footer li a:hover
{
	text-decoration:underline;
}



.thrColFixHdr #menu_toile ul
{
	float:left;
	margin-top:10px;
	background:none;
	width:150px;
}

.thrColFixHdr #menu_toile li { /* make menu horizontal */
	padding-left:15px;
	padding-right:15px;
	list-style-type: none;
	font-size:10pt;
}
.thrColFixHdr #menu_toile li a
{
	color:#000;
	text-decoration:none;
}
.thrColFixHdr #menu_toile li a:hover
{
	text-decoration:underline;
}



.thrColFixHdr #mainContent #menu_etapes ul
{
	width:720px;
	height:28px;
	background:none;
	text-align:center;
	margin:0px 0px 0px 80px;
	padding-top:15px;
	padding-bottom:0px;
}
.thrColFixHdr #mainContent #menu_etapes li
{
	width:auto;
	list-style-type:none;
	float:left;
}

/*#popup
{
	width: 500px;
	background-color:#C9F;
	margin: 0px auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
/*	margin-bottom:-20px;
	padding-top:1px;
	margin-top:0px;
	border: 2px solid #000;
	border-top:none;
	border-bottom:none;
	text-align: justify; /* ce paramétrage annule le paramètre text-align:center de l'élément body. */
/*	min-height:300px;
}*/
#popup {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1000;
	
	width: 200px;
	height: 160px;
	
	margin: -115px 0 0 -95px;
	padding: 15px;
	
	border: 2px solid #333;
	background-color: #fff;
	}