/* CSS version PC de Bureau */

/* Reset */
* {
	margin: 0;
	padding: 0;
}

/*#################################################
  # couleurs, polices, centrage, bordures, marges #
  ################################################# */

body {
	background:url("images/texture_fond.png");
	color: #47201b;
	/* font-family indique la police de caractère qui sera employée sur le texte contenu par l'élément */
	font-family: Georgia, "Times New Roman", serif;
}
a, a:visited {
  color: #75bc27;
}
/* le contexte de navigation avec largeur maximale de l'image */
iframe, img{
  max-width: 100%;
}
p {
  margin: 0.5em 0.25em;
}
h1 {
  font-size: 1.75em;
  border: solid #594846;
  border-width: 2px 0;
  padding: 0.25em;
  text-align: center;
  font-variant: small-caps;
}
h2 {
  text-align: center;
  font-variant: small-caps;
}
dl {
  margin: 0 0.5em;
}
dt {
  font-weight: bold;
  margin: 0.5em 1em 0.5em 0;
  border-bottom: 1px dashed #7b96bc;
}
.intro {
  font-size: 1.125em;
  line-height: 1.3125em;
  text-align: center;
  margin:  0.5em;
  font-weight: bold;
}
.navigation {
  font-size: 18px;
  background-color:#ae5411;
  border-bottom: 2px solid #594846;
}
.navigation li a {
  color: #f9f3e9;
  font-variant: small-caps;
  text-decoration: none;
}
.header p {
  margin-left: -1000px;
}
#points ul {
  list-style-image: url('images/point.png');
  margin: 0.5em 0 1em 0.5em;
  padding-left: 1em;
}
#points ul li {
  margin: 0.5em 1em;
}
.footer {
  background-color: #ae5411;
  color: #fff2d4;
  margin:12px; 
  padding:0.5em 0;
  font-style: italic;
}

/* ###################################################
   #		         STRUCTURE                       #
   ################################################### */

/* Largeurs automatiquement calculés du contenu du corps du document, header, navigation et footer  */ 
.body, .header, .navigation, .footer {
  width: auto;
}
.header, .navigation, .footer {
  clear: both;
}
.colonne {
  margin: 10px 1.0416666% 0 0;
}
.header {
  background:url(images/kfe_logo.png) no-repeat center;
  height: 200px;
}
	/* Détermine la hauteur de l'élément : qui conserve le ratio des images */ 
	img {
	height: auto;
	}
	
/* Les données suivantes ciblent les écrans de largeur supérieure à 480 pixels - Ecran par défaut */ 
	@media screen and (min-width: 480px){
	.navigation { 
	height: 25px; 
	text-align: center; 
	text-decoration: none;
	}
	.navigation ul li { 
	text-align: center; 
	display: block; 
	float: left; 
	padding: 0.25em 0;
	}
	.navigation ul li { 
	width: 33.3333333%; /* 960/3 */
	}
	#visit { 
	width: 25%; 
	float: left;
	}
	#points { 
	width: 25%; 
	float: right;
	}
	#main { 
	margin: 10px 27.0833333% 0 26.0416667%; 
	width: 47.9166667%;
	}
}
/* Les données suivantes ciblent les écrans de largeur inférieure à 480 pixels */ 
@media screen and (max-width: 480px){

	/* Le bandeau de navigation 
	Position fixe en scrollant
	En haut de l'écran d'affichage
	Largeur absolue
	Alignement centré par rapport au conteneur
	Sans effet de mise en forme du texte
	*/
	.navigation { 
	position: fixed;
	top:0;
	width:100%;
	height: auto; 
	text-align: center; 
	text-decoration: none;
	}
	
	/* Les éléments de navigation
	Texte aligné au centre par rapport au conteneur
	Disposition des éléments qui s'affichent avec un retour à la ligne
	Détermine l'espace entre les bords de l'élément et son contenu
	*/
	.navigation ul li {
	text-align: center; 
	display: block; 
	padding: 0.25em 0;
	}
	
	/* Détermine la largeur de la vidéo sur toute la largeur */
	iframe {
	width:100%; 
	}
	
	/* Emplacement du logo par rapport au bandeau fixé
	Détermine l'espace entre le bord haut de l'élément et son contenu
	Détermine l'espace entre le bord haut de l'élément et les éléments adjacents
	*/
	header {
    padding-top: 1em; 
    margin-top:  6em; 
	}
	
	/* Détermine l'alignement du texte Visite qui est centré par rapport au conteneur */
	#visit {
	text-align: center;
	}
	/* Texte justifié entre les marges de gauche et droite */
	.colonne {
	text-align: justify;
	}
	 
}