/* Adapted from :
	PARALLAX SCROLLING EXPERIMENT
	Master Styles
	Author: Jonathan Nicol (f6design.com)
*****************************************************************/
#fond_clair{
	background-color: white;
	opacity: 0.3;
	z-index: 3;
	position: absolute;
	height: 100%;
	width: 70%;
	left: 15%;
	margin:0!important;
	padding:0!important;
	border:0!important;
}

#chrono {
	position: relative;
	height: auto;
}

#outils{
	z-index: 9;
	position: fixed;
	right: 0;
	width: 15%;
	top: 47px;	
}

#colAnnees
{	
	position: fixed;
	margin: 0 0 0 10px;
	z-index:7;
	width: 10%;
	left: 0;
	top: 60px;
	font-family: copperplate;
	font-size: 2em;
	overflow:auto;
}
	hr#anneeLigne
	{
		margin: 0;
		border: none;
		border-top: 1px solid #21a97e;
		border-bottom: 0;
		height: 3px;
		width: 100%;
		color: ;
	}

#colMois 
{
	z-index: 4;
	position: relative;
	max-width: 500px;
	padding: 0 10px 0 40px;
	margin: 0 0 0 15%;
	line-height: 1.7;
	overflow: hidden;
}
	#colMois article 
	{
		width: 400px;
	}
	#colMois h1 
	{
		margin: 0 0 25px 0;
		font-size: 60px;
		font-family: Georgia, serif;
		font-weight: normal;
		line-height: 65px;
	}
	.mois
	{
		margin:0;
		padding: 0;
		border: 0;
		text-align: justify;
		height: 600px !important;
	}
	.espaceMois
	{
		margin:0;
		padding: 44px 0 0 20px;
		border: 0;
		vertical-align: middle;
		color: #2b9f9e;
		font-size: 1.1em;
		height: 550px !important; /* Valeur empirique... */
	}
	
	.espaceMois span
	{
		display: block;
		margin-top: 150px;
	}


#colJours 
{
	z-index: 3;
	position: fixed;
	left: 53%;
	top: 60px;
	width: 35%;
	margin: 0;
	overflow:auto;
}
	.jours_du_mois
	{
		margin:0;
		height: 1800px !important;
	}
	.jour
	{
		width: auto;
		height: 21px;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.jour_avec_lettre
	{
		float: left;
		background-color: #34CFBE;
		color: white;
		width: 33px;
		padding : 0 15px 0 5px;
		margin-right: 20px;
		border-radius: 4px 0 0 0;
		animation : plus 5s infinite;
		animation-play-state: paused;
		-webkit-animation : plus 5s infinite;
		-webkit-animation-play-state: paused;
	}
	
	.vide
	{
		float: left;
		width: 53px;
		padding : 0 ;
		margin-right: 20px;
		margin-top: -0.5em;
		text-align: right;
		color: #2b9f9e ;
		font-family: 'Garamond';
		font-size: 2em;
		font-style: italic;
	}
	
	.jour_sans_lettre
	{
		float: left;
		background-color: rgba(255, 255, 255, 0.3) ;
		color: #4D4D4D;
		padding : 0 15px 0 5px;
		border-radius: 4px 0 0 0;
		width: 33px;
		margin-right: 20px;
	}
	
	/*Animations lors du suivi d'un lien vers un jour*/
	@keyframes plus
	{
	0%   {background-color: #34CFBE;}
	30% {background-color: #c40000;}
	70% {background-color: #c40000;}
	100% {background-color: #34CFBE;}
	}

	@-webkit-keyframes plus/* Safari and Chrome */
	{
	0%   {background-color: #34CFBE;}
	30% {background-color: #c40000;}
	70% {background-color: #c40000;}
	100% {background-color: #34CFBE;}
	}

	.espaceJours
	{
		margin: 0;
		padding: 0;
		border: 0;
		height: 1806px !important; /* Valeur empirique... */
	}
	
#chgt_mois
{	
	position: fixed;
	margin: -100px 0 0 0;
	text-align: center;
	font-size: 0.8em;
	z-index:7;
	width: 80px;
	right: 0;
	top: 50%;	
	height: 200px;	
	background-color: white;
	color: #e3e5e5;
	opacity: 0;
}
#chgt_mois:hover
{	
	color: #383838;
	animation : pulse 3s infinite;
	animation-timing-function: linear;	
	-webkit-animation : pulse 3s infinite;
	-webkit-animation-timing-function: linear;
}
	
	@keyframes pulse
	{
	0%   {opacity: 0.3;}
	50% {opacity: 0.7;}
	100% {opacity: 0.3;}
	}

	@-webkit-keyframes pulse/* Safari and Chrome */
	{
	0%   {opacity: 0.3;}
	50% {opacity: 0.7;}
	100% {opacity: 0.3;}
	}
	
	#up
	{	
		position: fixed;
		margin: -90px 0 0 0;
		text-align: center;
		z-index:6;
		right: 15px;
		top: 50%;
		opacity:1;	
	}
		
	div#dot
	{
		position: fixed;
		margin: -4px 0 0 0;
		z-index:6;
		right: 34px;
		top: 50%;
		opacity:1;
	}
		
	#down
	{	
		position: fixed;
		margin: 58px 0 0 0;
		text-align: center;
		z-index:6;
		right: 15px;
		top: 50%;		
	}
	
	.nav
	{
		cursor: pointer;
	}
	
.spacer
{
	height: 200px;
	clear: both;
}
	#bas
	{
		position:relative;
		top: 90px;
		z-index: 8;
		background: white;
		margin: 70px 0 0 0;
		padding: 10px 10px 10px 10px;
		text-align: center ;
		font-size: 0.9em;
	}
	
a.jour_nav, a.jour_nav:link,
a.jour_nav:active,
a.jour_nav:visited 
{
	color:#000;
}
	a.jour_nav:hover 
	{ 
		color:#21a97e;
	}