@charset "utf-8";
/* CSS Document */

/* -----------------------------------------  FONT  ------------------------------------------*/	


@font-face {
    font-family: 'RBNo2Light';
    src: url('typo/rbno2light-webfont.eot');
    src: url('typo/rbno2light-webfont.eot?#iefix') format('embedded-opentype'),
         url('typo/rbno2light-webfont.woff') format('woff'),
         url('typo/rbno2light-webfont.ttf') format('truetype'),
         url('typo/rbno2light-webfont.svg#rbno2_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

@font-face {
    font-family: 'DinLight';
    src: url('typo/din_light-webfont.eot');
    src: url('typo/din_light-webfont.eot?#iefix') format('embedded-opentype'),
         url('typo/din_light-webfont.woff') format('woff'),
         url('typo/din_light-webfont.ttf') format('truetype'),
         url('typo/din_light-webfont.svg#din_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
	
@font-face{
	font-family:'HelveticaCond';
    src: url('typo/ps_14526-webfont.eot');
    src: url('typo/ps_14526-webfont.eot?#iefix') format('embedded-opentype'),
         url('typo/ps_14526-webfont.woff') format('woff'),
         url('typo/ps_14526-webfont.ttf') format('truetype'),
         url('typo/ps_14526-webfont.svg#helvetica_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

	

/* -----------------------------------------  /FONT  ------------------------------------------*/

/* -----------------------------------------  BODY  ------------------------------------------*/

body{
	overflow:hidden;
	margin: 0;
	padding: 0;
	/*background-attachment:fixed;
	background:url(../../../profils/ABOI/Bureau/selection%20periodes%20URSS/8011294057_b96ba784d3_o.jpg) no-repeat top center;*/
	}
	
img { border: 0; }

p{
	
	z-index:990;}


#background_fixe{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	background: #f9f8f2 url('elements/background_fixe.png') no-repeat right top;
	right:0;
	z-index:0;
	

	}
	
#background_fixe img{
	position:absolute;
	bottom:0;
	right:0;
	}	

/* -----------------------------------------  /BODY  ------------------------------------------*/	


/*-------------------------------------------USER  GUID----------------------------------------*/

#user_guid{
	width:100%;
	height:100%;
	z-index:1105;
	position:fixed;
	right:0;
	top:0;
	padding-top:15%;
	text-align:center;
	}
	
#user_guid img{
	max-width:386px;
	width:50%;
}


/*-------------------------------------------/USER  GUID----------------------------------------*/
	
/* -------------------------------STYLE DE ST-CONTAINER ---------------------------------------*/	

.st-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
	
}


/*-------------------------------------- FRISE -------------------------------------------------*/

.date{
color:#E2512C;
font-weight:bold;
}


.st-pointer-frise-on
{
	background:url(elements/elements_chrono/timeline/bouton_date_on.png) no-repeat;
}
.st-pointer-frise-off
{
	background:url(elements/elements_chrono/timeline/bouton_date_off.png) no-repeat;
}


.st-container #menu_frise {
	/*background:url(elements/elements_frise/elements_timeline/timeline.png);
	*/
	background:url(elements/elements_chrono/timeline/background.png) no-repeat;
	position: fixed;
	width:56px;
	height: 100%;
	z-index: 1106;
	bottom: 0;
	}
	
.st-container #menu_frise #menu_ul{
	padding:150px 0 0 16px;
	margin:0 0 0 0;
	height:100%;
	}	
	
.st-container #menu_frise img{
	margin:auto;
	position:absolute;
	

	}

/*-------- style liens dates & input ------------*/
	
#menu_frise .lien-dates {
	position:relative;
	z-index: 100;
	text-decoration:none;
	height:36px;
	width:40px;
	left:0;
	padding-left:30px;
	opacity:1;
	margin: 20% 0 0 0;
	}	


.st-container > .lien-dates,
 {
	position:fixed;
	left:0;
	width: 40px;
	cursor: pointer;
	text-align:center;
	line-height: 27px;
	}
	


.st-container #menu_frise .st-date-principal {
	list-style-type:none;
	z-index: 1000;
	height:40px;
	width:55px;
	}
.st-container #menu_frise .st-date-principal img{
	z-index: 99;
	}



.st-date-secondaire-off{
	background:url(elements/elements_chrono/timeline/date_secondaires/tiret_off.png) no-repeat;
	
	height:24px;
	width:90px; !important
	position:relative;
	font-family:"DinLight";
	opacity:0.6;
	font-size:16px;
	list-style-type:none;
	text-align:left; !important
	}	
.st-date-secondaire-on{
	background:url(elements/elements_chrono/timeline/date_secondaires/tiret_on.png) no-repeat;
	height:24px;
	opacity:1;
	width:90px; !important
	position:relative;
	font-family:"DinLight";
	font-size:16px;
	list-style-type:none;
	text-align:left; !important
	}	
.st-date-secondaire-off a{
	color:#403f3f;
	display: block;
	/*float: right;*/
	margin-left:10px;
	margin-top:1px;
	text-decoration:none;
	}
.st-date-secondaire-on a{
	color:#32af9f;
	display: block;
	/*float: right;*/
	margin-left:10px;
	margin-top:1px;
	text-decoration:none;
	}	
	

	
	
#menu_frise .lien-dates  lien-secondaire{
	background:red;
	}	
	
	
.menu-secondaire{
	z-index:0;
	position:absolute;
	top:152px;
	left:40px;
	}
		
/*-------- /style liens dates & input ------------*/


/*-------- style liens dates & input  HOVER ------------*/


	
	
	
/*-------- /style liens dates & input  HOVER ------------*/



/*-------- style du triangle selecteur ------------*/

	.st-container > input:checked + .lien_dates:after,
	.st-container > input:checked:hover + .lien_dates:after{
		bottom: 100%;
		content: '';
		position: absolute;
		pointer-events: none;
		left:0;
		margin-left: -40px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 7.5px 0 7.5px 15px;
		border-color: transparent transparent transparent #dc6767;
	}

/*-------- /style du triangle selecteur ------------*/

/*-------------------------------------- /FRISE -------------------------------------------------*/


/*----------------------------------------BOUTON MENU ----------------------------------------------*/

#toggleSubMenu{
	z-index:1025;
	position:fixed;
	right:44px;
	top:47px;
	text-decoration:none;
	opacity:0.3;
	-webkit-transition:all 1s;
	-moz-transition: all 1s ease-in-out;
	}
	

	
#toggleSubMenu img{
	-webkit-transition:all 1s;
	-moz-transition: all 1s ease-in-out;
	}	
	
#toggleSubMenu:hover{
	opacity:0.1;
	-webkit-transition:all 1s;
	-moz-transition: all 1s;
	}
	
#toggleSubMenu p{
	margin-top:0;
	
	font-family:'DinLight';
	/*ext-transform:uppercase;*/
	letter-spacing:-1px;
	color:#202020;
	font-size:18px;
	width:49px;
	margin-left:-3px;
	visibility:visible; !important
	}		

/*----------------------------------------/ BOUTON MENU ----------------------------------------------*/

#menu{
	position:fixed;
	right:-182px;
	top:0;
	width:184px;
	height:100%;
	z-index:1015;
	}

#sideBar{
	position:absolute;
	display:block;
	width:184px;
	height:100%;
	z-index:1015;
	}

#sideBarContents{
	height: 100%;
	width:184px;
	position:absolute;
	right:-10px;
	z-index:1010;
	background:url(elements/elements_menu_fleche/background_menu.png);
	
	/* ANIMATIONS */ 
	-webkit-transition: all 0.8s ease-in-out;
	-moz-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
	}

#sideBarContents ul{
	position:absolute;
	left:23px;
	top:115px;
	margin:0;
	padding:0;
	height:200%;
	}

#sideBarContents .lien_bio{
	text-align:left;
	list-style-type:none;
	width:140px;
	height:35px;
	padding-bottom:10%;
	}
	
#sideBarContents .lien_frise{
	text-align:left;
	list-style-type:none;
	width:140px;
	height:35px;
	padding-top:30%;
	}	
	
#sideBarContents .lien_perso{
	text-decoration:none;
	font-family:'RBNo2Light';
	text-transform:uppercase;
	color:#fff;
	font-size:22px;
	inline-height:77px;
	letter-spacing:1px;
	opacity:1;
	-webkit-transition: all 0.3s ;
	-moz-transition: all 0.3s ;
	}
	

#sideBarContents .lien_perso:hover{
	opacity:0.6;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s ;
	}
	
#sideBarContents .lien_chrono{
	color:#fff;
	text-decoration:none;
	font-family:'RBNo2Light';
	text-transform:uppercase;
	font-size:22px;
	inline-height:77px;
	letter-spacing:1px;
	opacity:1;
	-webkit-transition: all 0.3s ;
	-moz-transition: all 0.3s ;
	}	
		
#sideBarContents .lien_chrono:hover{
	opacity:0.6;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s ;
	}
		
			
/* --------------------------------------------------- / MENU -----------------------------------------------------*/	

/*--------------------------------------  STYLE DES PAGES -------------------------------------------------*/


/*-------- positions & dimensions des pages  ------------*/

	.st-scroll,
	.st-panel {
		position: relative;
		float: right;
		width: 100%;
		height: 100%;
	}
	
/*-------- /positions & dimensions des pages  ------------*/

/*-------- animation entre les pages  ------------*/	

	.st-scroll {
		top: 0;
		left: 0;
		-webkit-transition: all 0.6s ease-in-out;
		-moz-transition: all 0.6s ease-in-out;
		-o-transition: all 0.6s ease-in-out;
		-ms-transition: all 0.6s ease-in-out;
		transition: all 0.6s ease-in-out;
		-webkit-transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
	}


/*-------- /animation entre les pages  ------------*/


/*-------- couleur de fond par défaut  ------------*/

	/*.st-panel{
		background:#f2f3f4;
		background-attachment:fixed;
	} 
	
/*-------- /couleur de fond par défaut  ------------*/	

/*-------------------------------------- /STYLE DES PAGES -------------------------------------------------*/

/*-------------------------------------------------  STYLE DU CONTENU  ----------------------------------------------------*/

/*-------- style du titre  ------------*/

	.st-panel {
		text-align:center;
		}
	
	.st-panel h2 {
		color: #e23a6e;
		text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
		position: absolute;
		font-size: 54px;
		font-weight: 900;
		width: 80%;
		left: 10%;
		text-align: center;
		line-height: 50px;
		margin:  0 0 0;
		padding: 0;
		top: 20%;
		-webkit-backface-visibility: hidden;
	}
	
	
	 .fannion_titre{
		position:fixed;
		top:0px;
		left:130px;
		z-index:900;
		
		padding-top:30px;
		}
		
		.st-deco p {
		text-align: left;
		font-size: 15px;
		line-height: 150%;
		color: #6b6b6b;
		z-index: 2;
		padding-left:212px;
		width:320px;
		max-width:500px;
		/**/
		min-width: 460px;
		/**/
		-webkit-backface-visibility: hidden;
		text-align: left;
		
		z-index:1000;
		font-family:'HelveticaCond';
background-color: rgb(249, 248, 242);
/* RGBa with 0.6 opacity */
background-color: rgba(249, 248, 242, 0.8);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	}	
	
	.st-panel p:first-child{
		padding-top:136px;
		}
		
	.st-panel .image_contenu {
		position: absolute;
		text-align: left;
		z-index: 2;
		padding: 0;
		width: 32%;
		left: 15%;
		top:15%;
		margin-top:3%;
		-webkit-backface-visibility: hidden;
		font-family:Arial, Helvetica, sans-serif;
	}
	
	.st-panel .image_contenu img{
		width:80%;
		max-width:358px;
		}	


	.image_contenu{
		-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
		-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
		-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
		-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
		animation: moveUp 0.6s ease-in-out 0.2s backwards;
	}
	
	
	
/*-------- /style du contenu  ------------*/


/*-------- animation des titres ------------*/


	 #st-control-1:checked ~ .st-scroll #st-panel-1 h2,
	 #st-control-2:checked ~ .st-scroll #st-panel-2 h2,
	 #st-control-3:checked ~ .st-scroll #st-panel-3 h2,
	 #st-control-4:checked ~ .st-scroll #st-panel-4 h2,
	 #st-control-5:checked ~ .st-scroll #st-panel-5 h2,
	 #st-control-6:checked ~ .st-scroll #st-panel-6 h2,
	 #st-control-7:checked ~ .st-scroll #st-panel-7 h2, .fannion_titre{
		-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
		-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
		-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
		-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
		animation: moveDown 0.6s ease-in-out 0.2s backwards;
	}
	
	@-webkit-keyframes moveDown{
		0% { -webkit-transform: translateY(-40px); 
			opacity: 0;}
		100% { -webkit-transform: translateY(0px);  
			opacity: 1;}
	}
	
	@-moz-keyframes moveDown{
		0% { -moz-transform: translateY(-40px); 
			opacity: 0;}
		100% { -moz-transform: translateY(0px);  
			opacity: 1;}
	}
	
	@-o-keyframes moveDown{
		0% { -o-transform: translateY(-40px); 
			opacity: 0;}
		100% { -o-transform: translateY(0px);  
			opacity: 1;}
	}
	
	@-ms-keyframes moveDown{
		0% { -ms-transform: translateY(-40px); 
			opacity: 0;}
		100% { -ms-transform: translateY(0px);  
			opacity: 1;}
	}
	
	@keyframes moveDown{
		0% { transform: translateY(-40px); 
			opacity: 0;}
		100% { transform: translateY(0px);  
			opacity: 1;}
	}


/*-------- /animation des titres ------------*/

/*-------- animation des paragraphes ------------*/
	
	#st-control-1:checked ~ .st-scroll #st-panel-1 p,
	#st-control-2:checked ~ .st-scroll #st-panel-2 p,
	#st-control-3:checked ~ .st-scroll #st-panel-3 p,
	#st-control-4:checked ~ .st-scroll #st-panel-4 p,
	#st-control-5:checked ~ .st-scroll #st-panel-5 p
	#st-control-6:checked ~ .st-scroll #st-panel-6 p,
	#st-control-7:checked ~ .st-scroll #st-panel-7 p{
		-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
		-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
		-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
		-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
		animation: moveUp 0.6s ease-in-out 0.2s backwards;
	}

	@-webkit-keyframes moveUp{
		0% { -webkit-transform: translateY(40px); 
			opacity: 0;}
		100% { -webkit-transform: translateY(0px);  
			opacity: 1;}
	}
	
	@-moz-keyframes moveUp{
		0% { -moz-transform: translateY(40px); 
			opacity: 0;}
		100% { -moz-transform: translateY(0px);  
			opacity: 1;}
	}
	
	@-o-keyframes moveUp{
		0% { -o-transform: translateY(40px); 
			opacity: 0;}
		100% { -o-transform: translateY(0px);  
			opacity: 1;}
	}
	
	@-ms-keyframes moveUp{
		0% { -ms-transform: translateY(40px); 
			opacity: 0;}
		100% { -ms-transform: translateY(0px);  
			opacity: 1;}
	}
	
	@keyframes moveUp{
		0% { transform: translateY(40px); 
			opacity: 0;}
		100% { transform: translateY(0px);  
			opacity: 1;}
	}


/*-------- /animation des paragraphes ------------*/


/*-------- taille des elements en fonction de la taille de l'écran  ------------*/

	@media screen and (max-width: 520px) {
		.st-panel h2 {
			font-size: 42px;
		}
		
		.st-panel p {
			width: 90%;
			left: 5%;
			margin-top: 0;
		}
		
		.st-container > a {
			font-size: 13px;
		}
	}
	@media screen and (max-width: 360px) {
		.st-container > a {
			font-size: 10px;
		}
		
		.st-deco{
			width: 120px;
			height: 120px;
			margin-left: -60px;
		}
	
	}
	
/*-------- / taille des elements en fonction de la taille de l'écran  ------------*/	


/* --------------------------------------------------- RETOUR PAGE DU HAUT------------------------------------------*/	

#retour_haut{
	z-index:1014;
	text-decoration:none;
	opacity:0.5;
	position:fixed;
	max-width:49px;
	right:44px;
	bottom:47px;
	
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	}
	
#retour_haut:hover{
	opacity:0.3;
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	}	
	
#biomenu {
color: #FFFFFF;
    font-family: 'RBNo2Light';
    font-size: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
	font-weight:bold;
	}
	
.illus {
	width:480px;
	padding:10px;
	z-index: 1000;
	padding-left: 212px;
	text-align: center;
}

.legende {
    color: #6B6B6B;
    font-family: 'HelveticaCond';
    font-size: 12px;
    line-height: 150%;
    text-align: left;
    z-index: 1000;
	width:460px;
	padding:5px 0 0 10px;
	background-color: rgb(249, 248, 242);
/* RGBa with 0.6 opacity */
background-color: rgba(249, 248, 242, 0.8);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.legende300 {
    background-color: rgba(249, 248, 242, 0.8);
    color: #6B6B6B;
    font-family: 'HelveticaCond';
    font-size: 12px;
    line-height: 150%;
    padding: 5px 0 0 88px;
    text-align: left;
    width: 300px;
    z-index: 1000;
}

#lecteur {
background-color:#00FF99;
height:30px;
width:460px;
padding-left: 212px;
}