/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */
/* règles de style écrites en css (Cascading Style Sheet = Feuille de Styles en Cascade) */
/* ~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~ */

/* ============================ */			
/* Sélecteurs = noms de balises */
/* ============================ */	

body{font-family: verdana;}

body > header {
	position: fixed;
	top: 0vh;
	width:80vw;
	left: 10vw;
	height:30vh;
	z-index: 10;
	}

body > main{
	position: fixed;
	width:80vw;
	left:10vw;
	top: 30vh;
	bottom: 9vh;
	height:60vh;
	overflow: auto;
	z-index: 6;
	}

body > footer {
	position: fixed;
	top: 89vh;
	width:80vw;
	left: 10vw;
	height: 8vh;
	z-index: 8;
	}

h1{	font-size: 1.4em;}
h2{	font-size: 1.2em;}
h3{	font-size: 1.0em;}
	
h1,h2,h3{
	text-align: center;
	color: blue;
	width: 80%;
	margin-left: 10%;
	padding : 0.2em;
	}
	
section article h3{text-align: left;}

nav{
	padding : 0.2em;
	font-size: 1.1em;
	color: blue;
	background-color:LightGreen;
	border-left: 0.8em solid SeaGreen;
	}

nav ul li {
	list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6e/Bimetrical_icon_folder.svg');
	margin-left: 2.0em;
}
				
nav ul li ul li{
	list-style-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b3/Echo_link-blue_icon.svg');
	margin-left: 5em;
	}

nav li{margin-top: 0.2em;}

section{
	margin-top: 3.0em;
	background-color: MistyRose;
	border-radius: 30px;
	}

section a:link{
	text-decoration: none;
	font-size: 0.8em;
	color: blue;
	}
section a:hover{color: red;}

section a:visited{color: grey;}
	
section article ul{margin-left: 2.0em;}

section article li{margin-top: 0.2em;}

section article li::marker{
	font-size: 1.2em;
	color: blue;
	}

section article li i{
	color: grey;
	font-size:0.8em;
	}
	
em{
	margin-left: 5.0em;
	font-size: 1.0em;
	}
	
blockquote{
	font-size:0.8em;
}

nav a:link{
	color: red;
	background-color: Ivory;
	font-size:0.8em;
	text-decoration:none;
	}
	
nav a:visited{
	color: grey;
	background-color: Ivory;
	}
	
nav a:hover{
	color: Ivory;
	background-color: red;
	}
	
header a{text-decoration:none;}

footer{
	color: #000000;
	font-size: 10pt;
	background-color: Khaki;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
	}

footer a{text-decoration: none;}

footer table{
	width: 80%;
	margin-left: 0.8em;
	padding: 0.4em;
	}

/* ============================================================ */
/* Sélecteurs = noms de classes | valeurs des attributs 'class' */
/* ============================================================ */

.liste-categorie{
	font-size: 1.0em;
	background-color:LightYellow;
	}
	
.categorie:hover{color: red;}

nav a.navig:link{
	font-size: 1.1em;
	color: blue;
	background-color:LightGreen;
	}

nav a.navig:hover{
	font-size: 1.1em;
	color: red;
	background-color:LightGreen;
	}

nav a.navig:visited{
	font-size: 1.1em;
	color: grey;
	background-color:LightGreen;
	}
	
div.retour{
	width: 80%;
	margin-left: 10%;
	text-align: center;
	}
	
nav li.onglet{
	display:inline-block;
	width:20%;
	text-align:center;
	border-radius: 4px;
	border-left: 1px solid blue;
	border-top: 1px solid blue;
	border-right: 1px solid blue;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

nav ul.ongletbase{
	margin-bottom: 0.2em;
	border-bottom: 1px solid blue;
}
/* ================================================================= */
/* Sélecteurs = identifiants d'éléments | valeurs des attributs 'id' */
/* ================================================================= */

#liste-categorie-1{display: none;}
#categorie-1:hover #liste-categorie-1{display: block;}

#liste-categorie-2{display: none;}
#categorie-2:hover #liste-categorie-2{display: block;}

#liste-categorie-3{display: none;}
#categorie-3:hover #liste-categorie-3{display: block;}