/*J'ai modifié les balises h1, h2 et body afin de pouvoir centrer mes 
titres et les souligner également pour les balises h2. Pour le body,
le background-color a été modifié pour être en accord avec le thème
sinistre du site ainsi que le police arial pour une compatibilité
accrue.*/
h1{
	text-align: center;
}

h2{
	text-align: center;
	text-decoration: underline;	
}

body{
	background-color: #c0bfbf;
	font-family: arial;
}

/*La classe ".titre_principal" est adaptée pour que le titre principal
prenne 75% de la largeur de la page.*/
.titre_principal{
	width: 75%;
}

/*La classe ".entete" concerne l'entête de mon site qui contient mon nom, 
la date du jour, le titre principal, le projet EMF ainsi que la version finale
du site.*/
.entete{
	margin: auto;
	vertical-align: middle;
	text-align: center;
}

/*Le nom et la version sont alignés à gauche et occupent 12.5% de la largeur
de la page ce qui permettra avec le côté droit, de recouvrir l'intégrale de la 
page. 12.5% + 75% + 12.5% = 100%.*/
.nom_prenom{
	width: 12.5%;
	text-align: left;
}
.projet_version{
	width: 12.5%;
	text-align: left;
}

/*La classe ".navigation" concernera la div. des onglets. Elle permettra de les 
centrer et des les espacer.*/
.navigation{
    padding-bottom: 25px;
    text-align: center;
}

/*".menu_barre" représentera les onglets. Le background-color sera rouge afin de
concorder avec le thème. Le ".menu_barreNOW" aura une couleur de fond différente afin
de pouvoir distinguer sur quelle page on se trouvera.*/
.menu_barre{
    font-family: Arial black;
    background-color: rgb(198, 0, 45);
    font-size: 18px;
    color: black;
    display: inline-table;
    padding: 0.5cm 1cm;
    border: none;
    cursor: pointer;
	margin: 0.3cm;
	text-decoration: none;
}
.menu_barreNOW{
    font-family: Arial black;
    background-color: rgb(255, 0, 0);
    font-size: 18px;
    color: black;
    display: inline-table;
    padding: 0.5cm 1cm;
    border: none;
    cursor: pointer;
	margin: 0.3cm;
	text-decoration: none;
}

/*".menu_barre:hover" permettra de modifier la couleur de l'onglet lorsque l'on
passera notre souris dessus. Cela ajoute un peu de vie et permet une lecture 
simplifiée de la navigation. Quant au ".menu_barre:active", il modifiera la couleur
et déplacera l'onglet de 4px vers le bas lorsque l'on cliquera dessus.*/ 
.menu_barre:hover{
    background-color: rgb(255, 0, 0);
}
.menu_barre:active{
    background-color: rgb(255, 0, 0);
    transform: translateY(0px);
}

/*La classe ".pied_de_page" mettra en forme le pied de page de notre page internet.
Elle le centrera et alignera son texte verticalement.*/
.pied_de_page{
	margin: auto;
	vertical-align: middle;
	width: 60%;
}

/*Le ".bouton_precedent" sera sous forme de bouton de couleur blanche afin d'être 
assorti avec le reste du site. Rouge, blanc, noir. J'ai trouvé ce détail subtil mais
tout de même sympathique. En ce qui concerne son "hover" et son "active", ils
modifieront sa couleur et le déplaceront à gauche pour un visuel plus agréable.*/
.bouton_precedent{
    background-color: rgb(236, 238, 239);
    color: black;
    display: inline-table;
    border: none;
	text-align: center;
    cursor: pointer;
	text-decoration: none;
	padding: 0cm 0.96cm;
	margin-left: 0cm;
}
.bouton_precedent:hover{
	transform: translateX(-0px);
    background-color: rgb(220, 219, 217);
}
.bouton_precedent:active{
    background-color: rgb(220, 219, 217);
}

/*Même principe que pour le ".bouton_precedent" mais pour la droite.*/
.bouton_suivant{
    background-color: rgb(236, 238, 239);
    color: black;
    display: inline-table;
    border: none;
	text-align: center;
    cursor: pointer;
	text-decoration: none;
	padding: 0cm 0.96cm;
	margin-left: 10.3cm;
}
.bouton_suivant:hover{
	transform: translateX(0px);
    background-color: rgb(220, 219, 217);
}
.bouton_suivant:active{
    background-color: rgb(220, 219, 217);
}

/*Même principe que les autres boutons mais se déplacera vers le bas cette fois-ci.*/
.bouton_haut_de_page{
    background-color: rgb(236, 238, 239);
    color: black;
    display: inline-table;
    border: none;
	text-align: center;
    cursor: pointer;
	text-decoration: none;
	margin-left: 8.7cm;
	width: 40%;
}
.bouton_haut_de_page:hover{
	transform: translateY(0px);
    background-color: rgb(220, 219, 217);
}
.bouton_haut_de_page:active{
    background-color: rgb(220, 219, 217);
}

/*La classe ".article" concernera surtout les paragraphes pour le contenu/articles
du site. Ils seront centrés, justifiés et prendront 60% de la largeur de la page.*/
.article{
	margin: auto;
	width: 60%;
	text-align: justify;
	
}

/*La classe ".video" sera consacrée pour redimensionner la taille des vidéos afin 
qu'elles soient adaptées au site.*/
.video{
	width: 400px;
	height: 200px;
}