html {
	font-size:100%; /* pour utiliser taille de texte relative */
}

body {	
	height:100%;
	margin:0; padding:0; border:0;
}

#page {
	height:100%; 
	max-height:100%; 
	width:100%; 
	overflow:hidden;
	position:absolute; 
	margin:0; 
	padding:0; 
	border:0;
	background: linear-gradient(to bottom, lightskyblue, cornsilk, bisque, sandybrown);
	z-index: 0;
}

#fond {
	position: absolute;
	top:0; 
	left:0; 
	width: 100%;	
	height: 100%;
	z-index: 1;
}

#conteneur { /* permet l'apparition d'une scroll bar si contenu trop haut par rapport à la résolution */
	position: absolute;
	top:0; 
	left:0; 
	width: 100%;	
	height: 100%; 
	overflow:auto;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
}

#contenu { /* positionne le contenu , définit largeur et hauteur fixes  */
	height:100%;
	width: 70%; 
	min-width: 800px;
	position:relative; 
	margin:auto; 
	top:0%; 
	z-index: 3;
}

header {
	position:absolute; 
	z-index: 20;
	margin:0; 
	padding:0; 
	border:0;
	top:0; 
	left:0; 
	width:15%;
	text-align:center;
}

#header_mobile {
	position:absolute; 
	z-index: 20;
}
		
section {
	position:absolute; 
	z-index:10;
	height: calc(100% - 300px);
	top:0;
	z-index: 4;
	left:15%; 
	width:60%; 
	overflow:auto; /* add scroll bars as required */
	padding-left:5%; 
	padding-right:5%; 
	font-family: "Times New Roman", "Arial"; 
	color:black; 
	text-align:center;
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 3vh 0 0 0;
	behavior: url(./PIE/PIE.htc); /* Effets CSS3 sous IE 6, 7, 8 thanks to http://css3pie.com */
}

section h2 {
	font-size: 3vh;
}

nav{
	position:absolute; z-index: 20;
	left:15%; 
	top: calc(100% - 300px);
	height:300px; 
	width:70%; 
	margin:auto;
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 0 0 3vh 3vh;
	behavior: url(./PIE/PIE.htc); /* Effets CSS3 sous IE 6, 7, 8 thanks to http://css3pie.com */
}

ul{	list-style-type:none; display:block; position: relative; margin:auto; padding:0;
	width: 441px; height:250px; left:0px; top:0px; border: 1px dotted #CC3300; border-radius: 10px;
	background-image: url('./img/plan_maison_mini.png');
}

ul:hover {cursor: url("./img/visitor.cur"), auto;}

li{	width: 18px; height: 18px; background: red; border-radius: 9px; display:block; position: absolute;}

li:hover{ background: #ff6600;}

aside {
	position:absolute; 
	z-index: 30;
	width:13%; 
	right:0; 
	top:0; 
	padding:1%;
	background-color: rgba(255, 255, 255, 0.4);
	font-size: 1.6vh;
	border-radius: 0 3vh 3vh 0;
	behavior: url(./PIE/PIE.htc); /* Effets CSS3 sous IE 6, 7, 8 thanks to http://css3pie.com */
}

footer {
	position:absolute; 
	z-index: 20;
	bottom: 2vh; 
	width:15%;
	text-align:center; 
	font-size: 1.6vh;
}

#merci {
	position:absolute; 
	z-index: 20;
	bottom: 2vh; 
	width:11%; 
	right:0; 
	padding-right:2%; 
	padding-left:2%;
	text-align:center; 
	font-size: 1.6vh;
}

h1 {
	font-size:1em; 
	height:100%; 
	font-style: italic; 
	font-family: "Verdana", "Comic Sans MS", "Times New Roman";
}

h2 {
	font-family: "Monotype Corsiva", "Verdana", "Comic Sans MS", "Times New Roman";
	color:#CC3300;
	font-weight:normal; 
	text-align:center;
	border-bottom: 1px dotted #CC3300; 
	padding-bottom:3px;		
}

table {
	width:100%;
	table-layout:fixed;
}

a { 
	color:#CC3300;
	transition-property: color;
	transition-duration: 0.5s;
}
a:hover { 
	color:#ffffff;
}

a.cliquable img {
	opacity:0.6;
	filter:alpha(opacity=60);  /* pour IE */
	transition-property: opacity filter transform;
	transition-duration: 0.5s;
	height: 5vh;
	margin-bottom: 0.5vh;
}
a.cliquable:hover img {
	opacity:1;
	filter:alpha(opacity=100);  /* pour IE */
}

.gonfle {
	opacity: 1 !important;
	transition-property: transform;
	transition-duration: 0.5s;
}

a.cliquable:hover .gonfle {
	transform: scale(1.2);
}

.fenetre{ box-shadow: 0 2px 10px 7px #532; behavior: url(./PIE/PIE.htc);}
.cache-cache { display:none;}


/* media queries pour adapter l'affichage de la page aux smartphones */
@media only all and (max-width:721px) {

	#contenu {
		top:0; 
		max-height:100%;
		width: 100%;
		min-width: auto;
	}

	header { 
		display:none;
	}

	aside { 
		display:none;
	}

	a.cliquable img {
		opacity: 1;
		height: 6vh;
	}

	#merci { 
		width: 30%; 
	}
	
	nav { 
		display:none;
	}

	section { 
		left:0%; 
		width:90%; 
		border-radius:0; 
		height: 85%;
	}

	section h2 {
		font-size: 5vh;
	}

	footer { 
		width: 30%; 
	}

	.cache-cache { 
		display:block;
	}
}