/*******************************************/
/*** 			Js.css					 ***/
/*******************************************/
/**** MENU PRINCIPAL (2e niveau) *****/
/* ---------------------------------------------------- */
/* SLIDES
/* ---------------------------------------------------- */
#navigation  div.slides {
overflow: hidden;
width: 852px;
margin-left: 74px;
padding:0 0 24px 0;
}

#navigation div.slides div.slides_units {
width: 4260px; 

}

#navigation .slides div {
	width: 852px;
	max-height: 29px;
	float: left;
}

#navigation .slides li {
	margin-left: 0px;
	display: inline;
	color: #5e475e;		
	font-size: 12px;
	/*letter-spacing: 1px;*/
}

#navigation .slides li  span{
	color:#ebd7c5;
}

#navigation .slides li a {
	color: #8c8c8c;
	text-decoration: none;
}

#navigation .slides li a:hover {
	color: #5e475e;
	text-decoration: none;
}

#menu_texte .slides-nav li a:hover {
	color: #5e475e;
	text-decoration: none;
}

.js #menu_texte .slides-nav li.on,
.js #menu_texte .slides-nav li.on a ,
#menu_texte .slides-nav li a.on{
color: #5e475e;
}
/*///////*/

/***** Scroll Vidéos *****/

div.scrollable { 
     
    /* required settings */ 
    position:relative; 
    overflow:hidden;
	width: 820px;
	height: 640px;	
	
} 

.js div.scrollable { 
     
    /* required settings */ 
    position:relative; 
    overflow:hidden;
	width: 795px;
	height: 130px;
	margin-left:24px;	
}

div.scrollable div.items {     
    /* this cannot be too large */ 
	width:820px;
    height:640px;	
    padding:0px;    
    position:absolute;  
    clear:both;       
} 

.js div.scrollable div.items {     
    /* this cannot be too large */ 
	width:10000px;
    height:130px;		
    padding:0px;    
    position:absolute;  
    clear:both;       
}

div.scrollable div.items div.diapo_video_ie6 { 
    float:left; 
	width: 140px;
	margin: 0px 10px 0px 10px;
	padding: 0px;
    height:160px;	
} 

.js div.scrollable div.items div.diapo_video_ie6 { 
    float:left; 
	width: 140px;
	margin: 0px 10px 0px 10px;
	padding: 0px;
    height:100%;	
}

div.scrollable div.items div a {
    text-decoration:none;
	margin-bottom: 10px;	
	display:block;
	height:88px;
	width:140px;	
}


div.scrollable div.items div span{
	margin-top: 10px;
	font-size: 12px;
	color: #666666;	
}

div.scrollable div.items p {
}

div.scrollable div.items div img{
	margin-bottom:10px;
}

.js div.scrollable div.items div img{
	visibility:hidden;
}
	
#prev{
	cursor:pointer;
	position:absolute;
	display:none;
	float: left;
	height:19px;
	margin:0 2px;
	padding:40px 0 0;
	width:18px;	
}

#next{
	cursor:pointer;
	display:none;
	float: right;
	height:19px;
	margin:0 2px;
	padding:40px 5px 0 0;
	width:18px;	
}

.js #next, .js #prev{
	display:block;
}
/********/
/*** MEnu "Dock MAC" ***/
/********/

#pictos{
	width: 870px;
	margin: 10px 15px 0px 15px;
	position: relative;
}

.js #pictos{
	width: 870px;
	margin: 10px 15px 0px 15px;
	position: relative;
}

.pictos-container{
	position: absolute;
	width: 870px;	
	display: block;
	float:left;
	text-align: center;
	/*overflow:hidden;	*/
}

.pictos-container a:hover {
	text-decoration: none;	
}

.pictos-container a{
	width:58px;
	/*position: absolute;*/
	top: 0px;
	text-align: center;
	text-decoration: none;	
	float:left;
}

.js .pictos-container a{
	float:none;
}

.js .pictos-container a:hover {
	width:58px;
	top: 0px;
	text-align: center;
	text-decoration: none;	
}
	
.pictos-container span{
	font-size: 12px;
	/*color:#EBDFD4;*/
	visibility:hidden;
	float:left;
	text-align:left;
	/*padding-left:10px;*/	
	width:130px;	
}	

.pictos-container a:hover span {
	color: #666666;	
	text-decoration:none;
	visibility:visible;
}

.pictos-container img{
	width:54px;	 
}	

.js .pictos-container a, .js .pictos-container a:hover{
	position: absolute;
}

.js .pictos-container span{
	display:none;
    font-family: Arial, "Trebuchet MS", Sans-Serif;
	font-size: 11px;
	color: #666666;
}

.js .pictos-container a:hover span {
	display:block;
}

.js .pictos-container img{
	width: 80%;
}


.js .liste_contraception {
	width:250px;
	text-align:center;
	padding-left:0px;
	margin-left: -90px;
	margin-top: 5px;
	
	
}

/*** home ***/
/*// Player home //*/
.article23_player_texte{
	width:637px;
	height:25px;	
}

.article23_player {
	float:left;
	visibility:hidden;
	width : 152px;
	/*margin-left: 243px;*/
	margin-left:15px;
	height:25px;
	cursor:pointer;
}
.article23_player_legende{
	float:right;
	text-align:right;
	margin-right:23px;
	padding:5px 0 0 0px;
	width:450px;	
}

.article23_player_legende span{
	color:#3F3F3F;
	text-transform:none;
	font-size:12px;	
}

.article23_player_bouton img{
	margin:0px;
}

.js .article23_player {
	visibility:visible;
	width : 125px;
	/*margin-left: 243px;*/
	margin-left:15px;
	height:25px;
}

.article23_player_bouton {
	display:none;	
}

.js .article23_player_bouton {
	display:block;
	float: left;
	width:35px;
	height:25px;
}

/***/

#image_diapo_home img {
	height:270px;
	width:590px;	
}

.js #image_diapo_home img {
	margin:20px 23px 10px;
	height:270px;
	width:590px;
}
.article23_content_hidden img,.article23_content_hidden span {
	display:none;
}

/** Videos a decouvrir **/
.article33_titre {
	margin: 0px 0px 10px 45px;
}

.js .article33_titre {
	margin: 0px 0px 10px 25px;
}

/** Bloc droite videos **/
#lien_image_video_bloc_droite {
	float:left;
	margin-left:20px;
	margin-top:10px;
	display:block;
	width:100px;
	height:60px;	
}

#image_video_bloc_droite {
	padding:14px 0 0 34px;
	margin:0px;
}	
/*** Toutes les videos ***/
div.videos2 ul li a {
    text-decoration:none;
	display:block;
	width:140px;		
}


/*** Modal box Index ***/

div.spot_seconde_video {
	width:480px;
	height:108px;
	margin-top:30px;
	float:left;
	background-color:#000000;
}

#cartouche_video_accueil {
	float:left;
	background-repeat:no-repeat;
	background-image:url(../videos/INPES_Scoot_Web_40s.jpg);
	margin:10px 0px 10px 10px;
}

span.liste_video_accueil {
	float:right;
	width:300px;
	margin:45px 0px 0px 10px;
	color:#ffffff;
}

span.liste_video_accueil a{
	text-decoration:none;
	color:#ffffff;
}

#footer_mobile2 a{
	text-decoration:underline;
	color:#ffffff;
}

.liste_video {
	margin-top: 10px;
	font-size: 12px;
	color: #666666;
}