/* feuille de style de l'exercice TD du 14/03/2014 */
/* CEFII - Agnès RAHARD                            */

/* ------------------- style général --------------*/
html, body {
  height: 100%;
}

body {
	margin: 0 auto; 
	color:#717274;
	font:0.875em/1.125em Tahoma, sans-serif;	
	font-family: 'Source Sans Pro', sans-serif;
	font-style: normal;
	font-weight: 400;
}

#page {
	min-height: 100%;
	position: relative;
}


/* ------------------- entête générale ----------------------*/

/* Partie centrale de la fenêtre */

.main {
	clear: both;
	background-color: white;
	position: relative;
	margin: 0 auto;
	width: 100%;
}

/* -------------------------------------------------------- */
/*                          Titres                          */
/* -------------------------------------------------------- */

h1, h2 {
	font-family: 'Source Sans Pro', sans-serif;
	font-style: normal;
	text-align: center;
	padding: 0.625em 0.625em 0.625em 0.625em;
	/* src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff'); */
}

h1 {
	color: #717274; 
	font-size: 2.500em;
}

h2 {
	font-size: 1.500em;
	color: #FF4E11;
}

h1 strong {
	color: #FF4E11;
}

/* -------------------------------------------------------- */
/*                       Page Accueil                       */
/* -------------------------------------------------------- */

.bloc_gris
{
	background-color: #f5f5f5;
}

.bloc_gris a {
	color: #717274;
}


.main img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; 
    width: 70%;
    }

/* -------------------------------------------------------- */
/*                       ARTICLE                            */
/* -------------------------------------------------------- */
a {
	text-decoration:none; 
	color: blue;
}

.centre {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	text-align: center;
}

article {
	display: block;
	
	height: auto;
	padding: 0.938em;
	
	/*transition-delay*/
	-webkit-transition-delay:0,5s;
	   -moz-transition-delay:0,5s;
		 -o-transition-delay:0,5s;
			transition-delay:0,5s;
			
			
	/*transition-duration*/
	-webkit-transition-duration:1s;
	   -moz-transition-duration:1s;
		 -o-transition-duration:1s;
			transition-duration:1s;
			
	/*transition-timing-function*/
	-webkit-transition-timing-function:ease;
	   -moz-transition-timing-function:ease;
		 -o-transition-timing-function:ease;
			transition-timing-function:ease;
	}


article a {
	color: #717274;
}

article:hover {
	border-radius: 6.250em;
	
	/*transform*/
	-webkit-transform: scale(1.1);
	   -moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		 -o-transform: scale(1.1);
			transform: scale(1.1);
			
	cursor: pointer;

}

/* -------------------------------------------------------- */
/*          Bouton sur écran d'envoi mail                   */
/* -------------------------------------------------------- */

.bouton a {
	display:block;
	width:9.375em;
	line-height:3.125em;
	text-align:center;
	vertical-align:middle;
	background-color:black;
	font-size: 1.250em;
	color:white;
	text-decoration:none;
	-moz-border-radius:1.250em;
	-webkit-border-radius:1.250em;
	border-radius:1.250em;
	margin: auto;
	}

.bouton a:hover {
	background-color:#FF4E11;
	color:black;
	}

/* -------------------------------------------------------- */
/*                   Mentions légales                       */
/* -------------------------------------------------------- */
	
.mentions {
	background-color: white;
	margin: auto;
	padding: 0.625em;
}

/* -------------------------------------------------------- */
/*                           RWD                            */
/* -------------------------------------------------------- */



@media screen and (min-width: 1024px) {
/* Grand  écran */
	body {
		/* padding-bottom: 16em; */
		}
		
	.main {
		/* min-height: 45em; */
		 padding-bottom:15.625em;   /* Height of the footer */
		}
	
	.centre {
		min-height: 70em;
		}
	
	h1, h2 {
		font-weight: 300;
		Line-Height: 1.0em;
		}

	#article_gauche, #article_droite {
		float: left;
		width: 45%;
		}
		
	.mentions {
		width: 60%;
		}
	}
	
@media screen and (min-width: 481px) and (max-width: 1023px) {
/* Moyen écran */
	body {
		/* padding-bottom: 0; */
		}
		
	.centre {
		min-height: 65em;
		}
		
	.main {
		line-height:200%;
		 padding-bottom:15.625em;   /* Height of the footer */
		/* min-height: 60em; */
		}
	
	h1, h2 {
		font-weight: 400;
		Line-Height: 1em;
		}

	#article_gauche, #article_droite {
		float: left;
		width: 45%;
		}
			
	.mentions {
		width: 90%;
		}
	}
@media screen and (max-width:480px) {
/* Petit écran */
	body {
		/* padding-bottom: 6em; */
		}
		
	.centre {
		min-height: 105em;
		}
		
	.main {
		line-height:200%;
		 padding-bottom:1em;   /* Height of the footer */
		/* min-height: 1em; */
		}
	
	h1, h2 {
		font-weight: 400;
		Line-Height: 1em;
		}

	#article_gauche, #article_droite {
		float: none;
		width: 90%;
		}	
			
	.mentions {
		width: 90%;
		}
	
	}