*{
	font-family:Arial, Helvetica, sans-serif;
}
body{
	background-color:Maroon;
}
div{
  position:relative; /*For aside absolute position*/
	width:800px;
	margin:20px auto;
	padding:1px 40px;
	border:0px solid white;
	background-color:white;
	border-radius: 45px;
}
header,article,footer{
	text-align:center;
	margin:40px 0px;
	border-top:5px double darkgrey;
	border-bottom:5px double darkgrey;
	border-radius:50px;
}
nav{
	border:3px solid fireBrick;
	padding:9px 0;
}
article{
  display:inline-block;
	padding:10px 20px;
	width:440px;
  height:210px;
	text-align: justify;
}
aside{
  position:absolute;
  text-align:left;
  display:inline-block;
  width:240px;
  height:220px;
  right:0;
	padding:10px 20px;
  margin:40px 40px 40px 0;
  border-left:5px double darkgrey;
	border-right:5px double darkgrey;
  border-radius:50px;
}
footer{
  margin-top:0;
}
ul{
	list-style:none;
	padding:0;
	margin:0;

}
li{
	display:inline;

}

li a{
	text-decoration:none;
	color:white;
	padding:10px 30px;
	background-color:fireBrick;
}
li.right{
	float:right;
}
li a:hover{
	background-color:darkRed;
}
.moddroper{
  position: relative;
  display: inline-block;
}
ul.ddmod{
	display:none; /*permet de laisser les éléments "ul.ddmod" cachés par défaut*/
	position:absolute; /*permet de s'assurer que les autres éléments ne soient pas déplacés lorsque "ul.ddmod" change de propriété pour "display:block;" */
  /*En théorie il est possible d'utilisé qqch comme "visibility:hidden;" au lieu de ces deux propriétés (mais je sais pas comment faire alors à toi de voir)*/
	margin-top:10px;
	margin-left:-3px;
	border:3px solid fireBrick;
	border-top:0;
	box-shadow: 4px 6px 20px 5px rgba(0,0,0,0.3);
}

/* ce selecteur dis: "lorsque 'moddroper' et survolé avec la souris les élément 'ul.ddmod' ont la propriété 'display:block;'", ce qui a pour effet d'affiché la liste de module cachées jusque la*/
.moddroper:hover ul.ddmod{
	display:block;
}
ul.ddmod li{
	display:block;
	margin:0;
	padding:9px 0;
}