/************************************************************
 Exemple de page Web complète pour le cours « Initiation au dévelopement Web » (M1106) du DUT réseaux et télécommunications de l’IUT de Villetaneuse, Université Paris 13, Sorbonne Paris Cité

 Auteur : Étienne André

 Licence : Creative Commons BY-NC-SA 3.0

 Dernière modification : 30 novembre 2013
************************************************************/

/************************************************************
 (réinitialise toutes les marges et tous les espaces intérieurs)
************************************************************/
* {
  margin: 0;
  padding: 0;
}

/************************************************************
 Généralités
************************************************************/
body {
	background: #E0FFE0;
	color: black;
	font-family: serif;
}

a, a:visited{
	color: #0000FF;
	text-decoration: none;
}
a:hover{
	color: #FF0000;
	text-decoration: underline;
}

/************************************************************
 En-tête
************************************************************/
header{
	width: 100%;
	background-color: #8080FF;
	height: 80px;
	text-align: center;
	margin: 0px;
	padding: 0px;
}

header h1 {
	font-family: serif;
	color: #000080;
}

/************************************************************
 Menu lateral
************************************************************/
/*nav#lateral{
	background-color: #B0B0FF;
	float: left;
	width: 15%;
	height: 300px;
	padding: 0px;
	
}

nav#lateral ul{
	list-style-type: none;
	font-weight: lighter;
}

nav#lateral a:link, nav#lateral a:visited{
	color: black;
	text-decoration: none;
	display: block;
	background-color: #D0D0FF;
	margin : 0px;
	padding-left: 25px;
	border-top: 1px solid #B0B0FF;
}

nav#lateral a:hover, nav#lateral a:active{
	background-color: red;
}*/

nav#lateral{
	width: 15%;
	background-color: #B0B0FF;
	float: left;
	height: 300px;
	font-weight: lighter;
}

#lateral ul
{
	padding : 0; /* pas d'aire intérieure */
	margin : 0; /* pas de marge extérieure */
	list-style : none;
}

#lateral li{ 
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	width: 100%;
	line-height: 30px ;
}

#lateral a{
	display: block ;
	text-decoration : none;
	color: black ;
	background-color: #D0D0FF;
	padding-left: 25px;
}

#lateral a:hover{
	color: white;
	background: blue ;
}


/************************************************************
 Corps de page
************************************************************/
div#corps{
	width: 85%;
	margin-left: 15%;
}


/************************************************************
 Articles
************************************************************/
article header{
	background-color: #B0FFB0;
	width: 100%;
	text-align: center;
	height: 50px;
}

article h1{
	font-family: serif;
	color: #004000;
	font-size: x-large;
	padding-top: 10px;
}

article section h1{
	font-family: serif;
	color: #004000;
	background-color: #D0FFD0;
	margin-bottom: 20px;
	padding-left: 5px;
}

article h2{
	font-family: serif;
	color: #006000;
	margin-bottom: 10px;
	padding-left: 5px;
}

article p{
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 5px;
}

article ul, article ol, article li{
	margin-left: 20px;
}

article footer{
	background-color: #D0FFD0;
	height: 100%;
	font-size: smaller;
	text-align: right;
	font-style: italic;
}


/************************************************************
 Pied de page
************************************************************/
#pieddepage{
	clear: both;
	width: 100%;
	background-color: #8080FF;
	text-align: center;
	font-size: x-small;
	margin-top: 50px;
	text-transform: uppercase;
}

#pieddepage h1{
	font-size: small
}

#pieddepage ul, #pieddepage li{
	display: inline;
	list-style-type: none;
	margin: 10px;
}

#pieddepage a, #pieddepage a:hover, #pieddepage a:visited, #pieddepage a:active{
	color: black;
}

#pieddepage img{
	width: 100px;
	border: 0px;
}