/*Feuille de style "forêt"*/

/*Page 1*/

body
{
background-image : url("../Images/foret.png") ;	/*Image fond du site*/
background-size : cover ;			/*Empèche l'image de se répéter et l'étale*/
background-position : -250px ;			/*Décale l'image vers la gauche (lisibilité)*/
}
	button
	{
	cursor : pointer ;			/*Change la forme du curseur lorsque les boutons sont survolés*/
	border-style : none solid solid none ;	/*Créé un style de bordure personnalisé (sens horaire en partant du haut)*/
	border-color : #343 ;			/*Couleur bordures : vert-gris-foncé*/
	background-color : #9A9 ;		/*Couleur boutons : vert-gris-clair*/
	mouse-style : hand ;
	}

	header
	{
	border-style : none solid solid none ;	/*Bordure personnalisée (effet "3D")*/
	border-color : #343 ;			/*Couleur bordure : vert-foncé*/
	background-color : #172 ;		/*Couleur en-tête : vert*/
	}
		h1,h2
		{
		text-align : center ;	/*Centre le titre et sous-titre*/
		color : #EFE ;		/*Couleur titres : vert-blanc*/
		}
	nav
	{
	background-color : #9A9 ;	/*Couleur bandeau : gris (un peu vert)*/
	}
		a.lien-externe	/*Seulement les liens vers une autre page du site*/
		{
		color : #010 ;	/*Couleur liens : vert très foncé*/
		}
	/*Corp de la page*/
		p#liens-internes		/*Seul le paragraphe contenant les liens internes*/
		{
		width : 234px ;			/*Ajuste la longeur du paragraphe*/
		background-color : #EFE ;	/*Couleur de fond : vert-blanc*/
		padding-left : 3px ;		/*Ajoute une marge intérieure de 3 pixels à gauche (empêche le texte de toucher le bord)*/
		}
			a.lien-interne	/*Seulement les liens d'ancrage dans la page*/
			{
			color : #010 ;	/*Couleur liens : vert très foncé*/
			}
		div#paragraphe-combat		/*Bloc contenant tout le combat (titre + image + texte)*/
		{
		border-top : double #9A9 ;	/*Ajoute un double trait gris en haut*/
		border-bottom : double #9A9 ;	/*			   et en bas */
		}

			img#image-roucool	/*Se réfère à seule l'image du roucool*/
			{
			float : left ;		/*Décale l'image à gauche et permet au texte de se mettre à sa droite*/
			margin-right : 25px ;	/*Ajoute une marge extérieure de 25 pixels pour éviter au texte de se coller contre l'image*/
			}
	
			img#image-pikachu	/*Image du pikachu*/
			{
			float : right ;		/*Décale l'image à droite et permet au texte de se mettre à sa gauche (et donc entre les deux images roucool-pikachu)*/
			margin-left : 25px ;	/*Ajoute une marge pour empêcher le texte de se coller*/
			}
		h3#titre-pokedex	/*Seul le titre "Informations du pokédex"*/
		{
		clear : both ;		/*Permet au paragraphe sur le pokédex de se placer en dessous des images précédents (et non entre)*/
		}

		table				/*Tableau objet à trouver*/
		{
		border : solid #010 2px ;	/*Détoure le tableau avec une ligne verte très foncée*/
		}
			th
			{
			border-right : solid #010 2px ;		/*Crée un effet "3D" avec les titres*/
			border-bottom : solid #010 2px ;
			padding : 2px ;				/*Marge intérieure pour le texte*/
			}

			td
			{
			border-right : solid #010 1px ;		/*Effet "3D" plus fin pour les lignes non-titres*/
			border-bottom : solid #010 1px ;
			padding : 2px ;				/*Marge intérieure pour le texte*/
			}

			td.right		/*Sélectionne certaines cases du tableau...*/
			{
			text-align : right ;	/*...et met le texte à droite*/
			}
	footer
	{
	background-color :#9A9 ;	/*Couleur de fond pied-de-page : gris (léger vert)*/
	}
h3
{
color : #9A9 ;	/*Met tous les titre niveau 3 en gris*/
}

p,th,td
{
color : #EFE ;	/*Met tous les paragraphes + les cases du tableau en blanc (la couleur de l'écriture)*/
}

p.justify		/*Sélectionne certains paragraphes (les plus gros)...*/
{
text-align : justify ;	/*...et les mets en justifié*/
}

/*Page 2*/
/*Corrections et ajouts pour la deuxième page html*/

div#vide			/*Sélectionne le grand espace vide de la page*/
{
border-top : double #9A9 ;	/*Ajoute un double trait gris en haut*/
border-bottom : double #9A9 ;	/*			   et en bas */
}
	a#cacher	/*Seul le lien de retour (pour ne pas changer la couleur des autres)*/
	{
	color : #0000 ;	/*Couleur lien : blanc totalement transparent (RGB + la 4e valeur est l'opacité)*/
	}

/*Page 3*/
/*Corrections et ajouts pour la troisième page html*/

ol#liens-internes		/*Sélectionne la liste contenant les liens internes*/
{
width : 75px ;			/*Fixe une longeur*/
margin-left : 20px ;		/*Ajoute une marge à gauche (pour décaler le bloc par rapport au bord de la page)*/
background-color : #EFE ;	/*Couleur fond : blanc*/
padding-left : 20px ;		/*Décale le texte pour ne pas toucher le bord*/
}

div#paragraphe-roucool,div#paragraphe-pikachu,div#paragraphe-osselait	/*Paragraphes contenants les titres, images et textes de caque pokémon respectif*/
{
clear : both ;								/*Empêche le texte de flotter (inutile pour le premier mais l'est pour le 2e et 3e*/
margin-top : 100px ;							/*Ajoute une marge en haut (évite aux paragraphes de se toucher)*/
border-top : double #9A9 ;						/*Ajoute une double ligne de démarcation en haut*/
border-bottom : double #9A9 ;						/*				      et en bas */
}
	img#logoroucool,img#logopikachu,img#logoosselait	/*Images de pikachu, roucool et osselait, n'interfère pas avec les autres pages grâce aux id*/
	{
	width : 200px ;						/*Fixe une même largeur pour chaque image*/
	float : left ;						/*Permet au texte de se placer à droite*/
	}

	p#texte-pikachu	/*Seul le texte décrivant pikachu est affecté*/
	{
	color : #010 ;	/*Couleur texte : noir (lisibilité)*/
	}
p#en_haut	/*Sélectionne l'ancre interne avec l'id en question...*/
{
clear : both ;	/*...et l'empêche de se mettre à droite de l'image d'osselait*/
}

p#magicarpe						/*Texte parlant de magicarpe*/
{
width : 50% ;						/*Fixe une longeur (moitié de la page)*/
margin : auto ;						/*Centre le bloc*/
border : double #9A9 ;					/*Mets une double bordure grise*/
background-image : url("../Images/magicarpe.png") ;	/*Mets l'image de magicarpe en fond du paragraphe*/
color : #010 ;						/*Change la couleur d'écriture du texte (lisibilité)*/
}