@charset "UTF-8";

@font-face { font-family: "main"; src: url('Copperplate Gothic Light.ttf'); }

html { overflow-y:scroll; width:100%; }
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { 
	margin: 0; 
    padding: 0;  
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    -ms-font-smoothing:antialiased;
    -o-font-smoothing:antialiased;
    font-smoothing:antialiased;
}
strong{ color: white; font-weight: normal; }

body {
	font-family: sans-serif;
	font-size: 13px;
	width:100%;
	height:100%;
	text-align: center; 
	color: #FFFFFF;
	background-color: black;
	border-top: solid 5px rgb(243,112,32);
}

#logoIndex { display: block; margin: auto; margin-top: 10%; margin-bottom: 5%; }

p {	width: 500px; display: inline-block; vertical-align: top; }
img { vertical-align: top; border:1px solid black; }
a { color:#FFFFFF; text-decoration:none; outline: none; }

#container { 
	min-width:1000px;
	width:97%;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: center; /*left à l'origine this overrides the text-align: center on the body element. */
}


/****************************************
* En-tête
*****************************************/
header { text-align:center; margin-top:10px; position: relative; z-index:1; }
header h1 { margin: 0; padding: 10px 0; }
header a img { border:none; }
#en{position:absolute;left:10px;top:0;}
#fr{position:absolute;left:50px;top:0;}
/*#facebook{position:absolute;right:10px;}
#googleMap{position:absolute;right:50px;}	
*/
#facebook{position:relative;}

/****************************************
* Menu de navigation
*****************************************/
nav {
	padding: 0;
	margin: 0;
	margin-top: 10px;
	width: 100%;
	height:28px;
	text-transform: uppercase;
	font-family: main, Arial, sans-serif;
}


/******************************************************************************************************************************************
supprimer les marges et padding par défaut ainsi que la puce des éléments: Il est nécessaire de supprimer les marges et les padding pour obtenir le même rendu dans tous les navigateurs. En effet, les valeurs par défaut de ces propriétés ne sont pas les mêmes dans Firefox, Opera ou IE
******************************************************************************************************************************************/
nav ul {
	display:inline-block;
	margin:0;
	padding:0;
	width: 100%;
	padding-top:5px;
	padding-bottom:5px;
	list-style-type:none;
	text-decoration:none;
}
/******************************************************************************************************************************************
Contient le menu de navigation et le retour vers la page d'index. Mise en inline-block afin d'avoir chaque onglet primaire sur une même ligne, possible aussi avec float: left.
******************************************************************************************************************************************/
.mainTab {
 	display: inline-block;
	float: center;
  	padding:0;
  	margin-right: 1.5%;
	margin-left: 1.5%;
	font-size: 1.2em;
}

header .mainTabText { text-decoration:none; cursor: default; }
header .mainTabText, footer .mainTabText { text-decoration:none; }
.mainTabText:hover { text-decoration:none; color: rgb(243,112,32); }
/******************************************************************************************************************************************
Pour que les éléments du menu réagissent comme des boutons au passage de la souris, il faut faire en sorte que les liens occupent tout l'espace de l'onglet et non pas uniquement le survol du texte. Chaque onglet secondaire doit se comporter comme un block et non une balise inline.
******************************************************************************************************************************************/ 
.secondaryTabText { display:block; margin-top: 10px; text-decoration:none; text-align: left; }
.secondaryTab:hover { border-left: 2px solid rgb(243,112,32); } 
.secondaryTabText:hover { color: rgb(243,112,32); margin-left: 0; }
/******************************************************************************************************************************************
Pour faire disparaître les sous-items, on rajoute un display:none à la sous-liste. Il est nécessaire de supprimer les marges et les padding pour obtenir le même rendu dans tous les navigateurs. En effet, les valeurs par défaut de ces propriétés ne sont pas les mêmes dans Firefox, Opera ou IE
******************************************************************************************************************************************/
.mainTab ul { display:none; margin:0; padding:0; position:absolute; width:400px; }
/******************************************************************************************************************************************
Pour que les éléments du menu réagissent comme des boutons au passage de la souris, il faut faire en sorte que les liens occupent tout l'espace de l'onglet et non pas uniquement le survol du texte. Rendre visible les onglets secondaires au survol des primaires. Il est nécessaire de supprimer les marges et les padding pour obtenir le même rendu dans tous les navigateurs. En effet, les valeurs par défaut de ces propriétés ne sont pas les mêmes dans Firefox, Opera ou IE
******************************************************************************************************************************************/
.mainTab:hover ul { margin:0; padding:0; display:block; }


/****************************************
* Main section
*****************************************/
#mainContent {
	/*padding: 0 20px;*/ /* remember that padding is the space inside the div box and margin is the space outside the div box */
	border-top: rgb(243,112,32) solid 1px;
	border-bottom: rgb(243,112,32) solid 1px;
	text-align: center;
	height:100%;
	position: relative;
	background: black;
	z-index:2;
	font-size: 16px;
	/*background:green;*/
	margin-top:50px;/*A changer*/
}

/****************************************
* Home section
*****************************************/
#homeContent {
	text-align: center;
	margin-bottom:30px;
}

#homeContent p {
	display: inline-block;
	margin:auto;
	border-right: 1px solid rgb(243,112,32);
	margin-right: 30px; 
	padding-right: 10px; 
	text-align:justify; 
}

#homeContentTitle {
	top:-17px;
	position:relative;
	display:inline-block;
	color: white;
	margin:auto;
	padding-left:5px;
	padding-right:5px;
	background: black;
	font-size: 1.4em;
	font-weight: normal;
	text-transform: uppercase;
	font-family: main, Arial, sans-serif;
}

/****************************************
* Footer section
*****************************************/
footer { text-align:center; margin-top:10px; margin-bottom:10px;} 


/****************************************
* Diaporama
****************************************/
.slides_container {	width:570px; height:400px; margin:auto; display:inline-block; position:absolute; z-index:0; }
#aa{ width: 570px; height:400px; display:inline-block; }
#slides { margin:auto; }
.pagination { position:absolute; z-index:1; top :32px; text-align:center; }/*aperçu numéro d'image*/
.pagination li { float:left; margin:0 1px; list-style:none; }
.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../images/icones/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;/*cacher les chiffres indices*/
}
.pagination li.current a { background-position:0 -12px; }/*pastille verte*/
.caption {/*bande opaque*/
	position:absolute;
	bottom:-35px;
	left:0;
	height:30px;
	background:#000;
	background:rgba(0,0,0,.5);
	width:571px;
	font-size:1.0em;
	line-height:1.33;
	color:#fff;
	border-top:1px solid #000;
	text-shadow:none;
	font-family: main, Arial, sans-serif;
}