#fond.actif {
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background-color : black;
	opacity:.9;
	filter:alpha(opacity=90);
}

#media_container.actif {
	position : absolute;
	top : 50px;
	left : 0;
	width : 100%;
}
@media (max-width:800px), (max-height:500px) {
	#media_container.actif {
		top : 20px;
	}
}

/************
*** VIDEO ***
************/

#video {
	width : 660px;
	border : solid 5px white;
	padding : 20px 0 0 100px;
	background-color : black;
}
#video .support {
	background : url(../images/video-top.png) no-repeat 0 0;
	height : 35px;
	width : 470px;
	padding-top : 7px;
	text-align : center;
}
#video .fond {
	background : url(../images/video-bg.png) repeat-y 0px 100%;
	margin : 0px 10px 0px 10px;
}
#video .projecteur {
	background : url(../images/video-projector.gif) no-repeat 0px 100%;
	padding : 10px 20px 160px 20px;
}
#video .film {
	width: 400px;
}
@media (max-width:800px), (max-height:500px) {
	#video {
		width : 660px;
		border : solid 5px white;
		padding : 20px 0 0 20px;
		background-color : black;
	}
}


/************
*** AUDIO ***
************/

#audio {
	background : url(../images/audio-cassette.gif) no-repeat 0 0;
	background-size : 100%;
	width : 320px;
	height : 200px;
}
#audio-titre {
	background-position : 0 0;
	background-repeat : no-repeat;
	background-size : 100%;
	position : absolute;
	bottom : 0px;
	left : 78px;
	width : 180px;
	height : 49px;
}
#musique {
	position : absolute;
	top : 18px;
	left : 40px;
	width : 240px;
}
@media (max-width:800px), (max-height:500px) {
	#audio {
		width : 160px;
		height : 100px;
	}
	#audio-titre {
		bottom : 1px;
		left : 39px;
		width : 90px;
		height : 24px;
	}
	#musique {
		top : 3px;
		left : 10px;
		width : 140px;
	}
}

#player-source {
	width : 240px;
}
#player-nom {
	float : left;
}
#player-date {
	float : right;
}

/****************
*** SLIDESHOW ***
****************/

/* http://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition */



/******* FONDATIONS **********/

	#photo {
		width : 632px;
	}
	
    #slideshow {  
        position: relative;  
        width: 600px;  
        height: 400px;  
        padding: 15px;  
        margin: 0 auto 2em;  
        border: 1px solid #ddd;  
        background: #FFF;  
        /* CSS3 effects */  
/*
        background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);  
*/
        border-radius: 2px 2px 2px 2px;  
        box-shadow: 0 0 3px rgba(0,0,0, 0.2);  
    }  
       
    /* avanced box-shadow 
     * tutorial @ 
     * http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow 
    */  
    #slideshow:before,  
    #slideshow:after {  
        position: absolute;  
        bottom:16px;  
        z-index: -10;  
        width: 50%;  
        height: 20px;  
        content: " ";  
        background: rgba(0,0,0,0.1);  
        border-radius: 50%;  
/*
        box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);  
*/
    }  
    #slideshow:before {  
        left:0;  
        transform: rotate(-4deg);  
    }  
    #slideshow:after {  
        right:0;  
        transform: rotate(4deg);  
    }  
	
	
    /* gestion des dimensions et débordement du conteneur */  
    #slideshow .container {  
        position:relative;  
        width: 600px;  
        height: 400px;  
        overflow: hidden;  
    }  
    /* on prévoit un petit espace gris pour la timeline */  
	
    #slideshow .container:after {  
        position:absolute;  
        bottom: 0; left:0;  
        content: " ";  
        width: 100%;  
        height: 1px;  
        background: #999;  
    } 
	
    /* 
       le conteneur des slides 
       en largeur il fait 100% x le nombre de slides 
    */  
    #slideshow .slider {  
        position: absolute;  
        left:0; top:0;  
        width: 1000%;  
        height: 400px;  
    }  
    #slideshow .slider div {  
		width : 600px;
		text-align : center;
		background : black;
	}
    #slideshow .slider div img {
		height : 400px;
	}
    /* annulation des marges sur figure */  
    #slideshow figure {  
        position:relative;  
        display:inline-block;  
        padding:0; margin:0;  
    }  
    /* petit effet de vignette sur les images */  
/*    #slideshow figure:after {  
        position: absolute;  
        display:block;  
        content: " ";  
        top:0; left:0;  
        width: 100%; height: 100%;  
        box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;  
    }  
*/	

    /* styles de nos légendes */  
    #slideshow figcaption {  
        position:absolute;  
        left:0; right:0; bottom: 5px;
		padding: 5px 10px 0px 10px;
		height : 35px;
        margin:0;  
        border-top: 1px solid rgb(225,225,225);  
        text-align:center;  
        letter-spacing: 0.05em;  
        word-spacing: 0.05em;  
/*
		font-family: Georgia, Times, serif;  
*/
        background: #fff;  
        background: rgba(255,255,255,0.7);  
        color: #555;  
        text-shadow: -1px -1px 0 rgba(255,255,255,0.3);  
    }  
	
#photo-credits {
	position : absolute;
	bottom : 0px;
	right : 5px;
	height : 15px;
	font-size : 10px;
	color : #888;
}

#photo-archive {
	position : absolute;
	bottom : 0px;
	left : 5px;
	height : 15px;
	font-size : 10px;
}
#photo-archive a {
	color : #888;
}
/************* ANIMATION AUTOMATIQUE ***********/


    /* fonction d'animation, n'oubliez pas de prefixer ! */  
    @keyframes slider {  
        0%, 8%, 100%   { left: 0 }  
        10%, 18%        { left: -100% }  
        20%, 28%        { left: -200% }  
        30%, 38%        { left: -300% }  
        40%, 48%        { left: -400% }  
        50%, 58%        { left: -500% }  
        60%, 68%        { left: -600% }  
        70%, 78%        { left: -700% }  
        80%, 88%        { left: -800% }  
        90%, 98%        { left: -900% }  
    }  
    @-webkit-keyframes slider {  
        0%, 8%, 100%   { left: 0 }  
        10%, 18%        { left: -100% }  
        20%, 28%        { left: -200% }  
        30%, 38%        { left: -300% }  
        40%, 48%        { left: -400% }  
        50%, 58%        { left: -500% }  
        60%, 68%        { left: -600% }  
        70%, 78%        { left: -700% }  
        80%, 88%        { left: -800% }  
        90%, 98%        { left: -900% }  
    }  
	
    /* complétez le sélecteur : */  
    #slideshow .slider {  
        /* ... avec la propriété animation */  
        animation: slider 50s infinite; 		
        -webkit-animation: slider 50s infinite; 		
    }  
	
	
/*************** ANIMATION TIMELINE ******************/

    #timeline {  
        position: absolute;  
        background: #999;  
        bottom: 15px;  
        left: 15px;  
        height: 1px;  
/*
        background: rgb(214,98,13);  
        background: rgba(214,98,13,.8);  
*/ 
        background: rgb(0,0,0);  
        background: rgba(0,0,0,0.8);  
		width: 0;  
        /* fonction d'animation */  
        animation: timeliner 50s infinite;  
        -webkit-animation: timeliner 50s infinite;  
    }  
	
	
    @keyframes timeliner {  
        0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%	{	width : 0;		}  
        8%, 18%, 28%, 38%, 48%, 58%, 68%, 78%, 88%, 98%		{	width : 600px;	}  
    }  
    @-webkit-keyframes timeliner {  
        0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100%	{	width : 0;		}  
        8%, 18%, 28%, 38%, 48%, 58%, 68%, 78%, 88%, 98%		{	width : 600px;	}  
    }  
	
	
/************** ANIMATION LEGENDE ****************/


    @keyframes figcaptionner {  
        0%, 2%, 10%, 12%, 20%, 22%, 30%, 32%, 40%, 42%, 50%, 52%, 60%, 62%, 70%, 72%, 80%, 82%, 90%, 92%, 100%	{ bottom : -50px; }  
        4%, 8%, 14%, 18%, 24%, 28%, 34%, 38%, 44%, 48%, 54%, 58%, 64%, 68%, 74%, 78%, 84%, 88%, 94%, 98%	{ bottom : 0px; }  
    }  
    @-webkit-keyframes figcaptionner {  
        0%, 2%, 10%, 12%, 20%, 22%, 30%, 32%, 40%, 42%, 50%, 52%, 60%, 62%, 70%, 72%, 80%, 82%, 90%, 92%, 100%	{ bottom : -50px; }  
        4%, 8%, 14%, 18%, 24%, 28%, 34%, 38%, 44%, 48%, 54%, 58%, 64%, 68%, 74%, 78%, 84%, 88%, 94%, 98%	{ bottom : 0px; }  
    }  
	
    /* ajouter à l'élément : */  
    #slideshow figcaption {  
        /* ... la propriété animation */  
        animation: figcaptionner 50s infinite;  
        -webkit-animation: figcaptionner 50s infinite;  
    }  
	
	
	
/**************** BOUTONS JOUER ET ARRETER *****************/


    .play_commands {  
        /* positionnement en haut à droite */  
        position: absolute;  
        top: 25px; right: 25px;  
        z-index: 10;  
        /* dimensionnement des icônes */  
        width: 22px;  
        height: 22px;  
        text-indent: -9999px;  
        border:0 none;  
        /* placez l'opacité à 1 si vous souhaitez voir les commandes */  
        opacity: 0;  
		filter:alpha(opacity=0);	
        /* préparation de transition sur opacicty et right */  
        transition: opacity 1s, right 1s;  
    }  
    /* on décale play légèrement sur la gauche */  
    .play { right: 55px; cursor: default; }  
       
    /* création de l'icône pause avec 2 pseudos éléments */  
    .pause:after,  
    .pause:before {  
        position: absolute;  
        display: block;  
        content: " ";  
        top:0;  
        width:38%;  
        height: 22px;  
        background: #fff;  
        background: rgba(255,255,255,0.5);  
    }  
    .pause:after { right:0; }  
    .pause:before { left:0; }  
       
    /* création de l'icône play avec des bordures */  
    .play {  
        width: 1px;  
        height: 1px;  
        /* les transparentes forment la flèche */  
        border-top: 10px solid transparent;  
        border-bottom: 10px solid transparent;  
        border-left: 20px solid #fff;  
        border-left: 20px solid rgba(255,255,255,0.5);  
        /* renseignez 1 pour voir l'icône de suite */  
        opacity: 0;  
		filter:alpha(opacity=0);	    
	}  
       
    /* apparition du bouton pause au survole */  
    /* apparition des boutons au focus */  
    #slideshow:hover .pause,  
    .play_commands:focus {  
        opacity: 1;  
		filter:alpha(opacity=0);	
        outline: none;  
    }  
	
	
/* stopper les animation */  
.sl_command:target ~ #slideshow .slider,  
.sl_command:target ~ #slideshow figcaption,  
.sl_command:target ~ #slideshow #timeline,  
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {  
    animation-play-state: paused;  
    -webkit-animation-play-state: paused;  
}  
   
/* redémarrer les animations */  
#sl_play:target ~ #slideshow .slider,  
#sl_play:target ~ #slideshow figcaption,  
#sl_play:target ~ #slideshow #timeline,  
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {  
    animation-play-state: running;  
    -webkit-animation-play-state: running;  
}  
   
/* switch entre les boutons */  
.sl_command:target ~ #slideshow .pause      { opacity:0; filter:alpha(opacity=0);	}  
#sl_play:target ~ #slideshow:hover .pause,  
#sl_play:target ~ #slideshow .pause:focus   { opacity:1; filter:alpha(opacity=100);	}  
.sl_command:target ~ #slideshow .play       { opacity:1; filter:alpha(opacity=100);	right: 25px; cursor: pointer; }  
#sl_play:target ~ #slideshow .play          { opacity:0; filter:alpha(opacity=0);	right: 55px; cursor: default; } 


/********************* FLECHES *******************/


#slideshow .commands {  
	position: absolute;  
	top: 45%;  
	padding: 5px 13px;  
	border-bottom:0;  
	font-size: 1.3em;  
	color: #aaa;  
	text-decoration:none;  
	background-color: #000000;  
	background-image: linear-gradient(#333333,#111111);  
	text-shadow: 0 0 1px #aaa;  
	border-radius: 50%;  
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2);  
}  
   
#slideshow .prev { left: -48px; }  
#slideshow .next { right: -48px; }  
   
#slideshow .commands { display:none; }  
#slideshow .commands1 { display: block; }  

#slideshow #c_slider {  
	position:absolute;	left:0;	top:0;	width:1000%;	height:400px;
	background-size:Auto 400px;	transition:background 1s; 
}

/* on cache le slider */  
.sl_i:target ~ #slideshow .slider                                   { visibility: hidden }  
/* on planque la 1ère pastille (cf. bonux suivant) */  
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after     { display:none; }  
/* pour afficher la 2ème pastille (cf. bonux suivant) */  
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before    { display:block; }  
   
/* lorsque on cible le premier slider */  
/* on cache tous les "précédent" et "suivant" */  
#sl_i1:target ~ #slideshow .commands { display: none; }  
/* on affiche seulement deux flèches */  
#sl_i1:target ~ #slideshow .commands1 { display: block; }  
/* on place la pastille tout à gauche */  
#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before   { left: 0px); }  

#sl_i2:target ~ #slideshow .commands { display: none; }  
#sl_i2:target ~ #slideshow .commands2 { display: block; }  
#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before   { left: 18px; }  
   
#sl_i3:target ~ #slideshow .commands { display: none; }  
#sl_i3:target ~ #slideshow .commands3 { display: block; }  
#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before   { left: 36px; }  
   
#sl_i4:target ~ #slideshow .commands { display: none; }  
#sl_i4:target ~ #slideshow .commands4 { display: block; }  
#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before   { left: 54px; }  
   
#sl_i5:target ~ #slideshow .commands { display: none; }  
#sl_i5:target ~ #slideshow .commands5 { display: block; }  
#sl_i5:target ~ #slideshow .dots_commands li:first-child a:before   { left: 72px; }  
   
#sl_i6:target ~ #slideshow .commands { display: none; }  
#sl_i6:target ~ #slideshow .commands6 { display: block; }  
#sl_i6:target ~ #slideshow .dots_commands li:first-child a:before   { left: 90px; }  
   
#sl_i7:target ~ #slideshow .commands { display: none; }  
#sl_i7:target ~ #slideshow .commands7 { display: block; }  
#sl_i7:target ~ #slideshow .dots_commands li:first-child a:before   { left: 108px; }  
   
#sl_i8:target ~ #slideshow .commands { display: none; }  
#sl_i8:target ~ #slideshow .commands8 { display: block; }  
#sl_i8:target ~ #slideshow .dots_commands li:first-child a:before   { left: 126px; }  
   
#sl_i9:target ~ #slideshow .commands { display: none; }  
#sl_i9:target ~ #slideshow .commands9 { display: block; }  
#sl_i9:target ~ #slideshow .dots_commands li:first-child a:before   { left: 144px; }  
   
#sl_i10:target ~ #slideshow .commands { display: none; }  
#sl_i10:target ~ #slideshow .commands10 { display: block; }  
#sl_i10:target ~ #slideshow .dots_commands li:first-child a:before   { left: 162px; }  

/* correspond au décalage des images */  
/* 400*W/H */
#slideshow #c_slider.actif222 {  background: 
/*	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo[N].jpg) calc([N-1]*600px + 600px/2 - [WIDTH]/2) 0 no-repeat,  */
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo01.jpg) 100px 0 no-repeat,  
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo02.jpg) 766.5px 0 no-repeat,  
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo03.jpg) 1200px 0 no-repeat,  
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo04.jpg) 1800px 0 no-repeat,  
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo05.jpg) 2400px 0 no-repeat,  
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo06.jpg) 3150px 0 no-repeat,  
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo07.jpg) 3766.5px 0 no-repeat,  
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo08.jpg) 4300px 0 no-repeat,  
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo09.jpg) 4800px 0 no-repeat,  
	url(../files/SurLeFil/CieIvressePublique-SurLeFil-Photo10.jpg) 5400px 0 no-repeat,  
	url(../images/blackdot.jpg) 0 0 repeat;	}  
/*
#sl_i1:target ~ #slideshow #c_slider.actif222 { background-position:	calc(0.5*600px - [WIDTH1]/2) 0,	calc(1.5*600px - [WIDTH2]/2) 0,	...	}
#sl_i2:target ~ #slideshow #c_slider.actif222 { background-position:	calc(-0.5*600px - [WIDTH1]/2) 0,	calc(0.5*600px - [WIDTH2]/2) 0,	...	}
...
*/
#sl_i1:target ~ #slideshow #c_slider.actif222 { background-position:	100px 0,	766.5px 0,		1200px 0,	1800px 0,	2400px 0,	3150px 0,	3766.5px 0,		4300px 0,	4800px 0,	5400px 0;	}
#sl_i2:target ~ #slideshow #c_slider.actif222 { background-position:	-500px 0,	166.5px 0,		600px 0,	1200px 0,	1800px 0,	2550px 0,	3166.5px 0,		3700px 0,	4200px 0,	4800px 0;	}
#sl_i3:target ~ #slideshow #c_slider.actif222 { background-position:	-1100px 0,	-433.5px 0,		0px 0,		600px 0,	1200px 0,	1950px 0,	2566.5px 0,		3100px 0,	3600px 0,	4200px 0;	}
#sl_i4:target ~ #slideshow #c_slider.actif222 { background-position:	-1700px 0,	-1033.5px 0,	-600px 0,	0px 0,		600px 0,	1350px 0,	1966.5px 0,		2500px 0,	3000px 0,	3600px 0;	}
#sl_i5:target ~ #slideshow #c_slider.actif222 { background-position:	-2300px 0,	-1633.5px 0,	-1200px 0,	-600px 0,	0px 0,		750px 0,	1366.5px 0,		1900px 0,	2400px 0,	3000px 0;	}
#sl_i6:target ~ #slideshow #c_slider.actif222 { background-position:	-2900px 0,	-2233.5px 0,	-1800px 0,	-1200px 0,	-600px 0,	150px 0,	766.5px 0,		1300px 0,	1800px 0,	2400px 0;	}
#sl_i7:target ~ #slideshow #c_slider.actif222 { background-position:	-3500px 0,	-2833.5px 0,	-2400px 0,	-1800px 0,	-1200px 0,	-450px 0,	166.5px 0,		700px 0,	1200px 0,	1800px 0;	}
#sl_i8:target ~ #slideshow #c_slider.actif222 { background-position:	-4100px 0,	-3433.5px 0,	-3000px 0,	-2400px 0,	-1800px 0,	-1050px 0,	-433.5px 0,		100px 0,	600px 0,	1200px 0;	}
#sl_i9:target ~ #slideshow #c_slider.actif222 { background-position:	-4700px 0,	-4033.5px 0,	-3600px 0,	-3000px 0,	-2400px 0,	-1650px 0,	-1033.5px 0,	-500px 0,	0px 0,		600px 0;	}
#sl_i10:target ~ #slideshow #c_slider.actif222 { background-position:	-5300px 0,	-4633.5px 0,	-4200px 0,	-3600px 0,	-3000px 0,	-2250px 0,	-1633.5px 0,	-1100px 0,	-600px 0,	0px 0;		}

#slideshow #c_slider.actif232 {  background: 
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo01.jpg) 158.5px 0 no-repeat,  
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo02.jpg) 600px 0 no-repeat,  
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo03.jpg) 1366.5px 0 no-repeat,  
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo04.jpg) 1800px 0 no-repeat,  
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo05.jpg) 2500px 0 no-repeat,  
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo06.jpg) 3100px 0 no-repeat,  
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo07.jpg) 3600px 0 no-repeat,  
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo08.jpg) 4200px 0 no-repeat,  
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo09.jpg) 4966.5px 0 no-repeat,  
	url(../files/ReineDeLaSalleDeBains/CieIvressePublique-ReineDeLaSalleDeBains-Photo10.jpg) 5500px 0 no-repeat,  
	url(../images/blackdot.jpg) 0 0 repeat;	}
#sl_i1:target ~ #slideshow #c_slider.actif232 { background-position:	158.5px 0,		600px 0,	1366.5px 0,		1800px 0,	2500px 0,	3100px 0,	3600px 0,	4200px 0,	4966.5px 0,	5500px 0;	}
#sl_i2:target ~ #slideshow #c_slider.actif232 { background-position:	-441.5px 0,		0px 0,		766.5px 0,		1200px 0,	1900px 0,	2500px 0,	3000px 0,	3600px 0,	4366.5px 0,	4900px 0;	}
#sl_i3:target ~ #slideshow #c_slider.actif232 { background-position:	-1041.5px 0,	-600px 0,	166.5px 0,		600px 0,	1300px 0,	1900px 0,	2400px 0,	3000px 0,	3766.5px 0,	4300px 0;	}
#sl_i4:target ~ #slideshow #c_slider.actif232 { background-position:	-1641.5px 0,	-1200px 0,	-433.5px 0,		0px 0,		700px 0,	1300px 0,	1800px 0,	2400px 0,	3166.5px 0,	3700px 0;	}
#sl_i5:target ~ #slideshow #c_slider.actif232 { background-position:	-2241.5px 0,	-1800px 0,	-1033.5px 0,	-600px 0,	100px 0,	700px 0,	1200px 0,	1800px 0,	2566.5px 0,	3100px 0;	}
#sl_i6:target ~ #slideshow #c_slider.actif232 { background-position:	-2841.5px 0,	-2400px 0,	-1633.5px 0,	-1200px 0,	-500px 0,	100px 0,	600px 0,	1200px 0,	1966.5px 0,	2500px 0;	}
#sl_i7:target ~ #slideshow #c_slider.actif232 { background-position:	-3441.5px 0,	-3000px 0,	-2233.5px 0,	-1800px 0,	-1100px 0,	-500px 0,	0px 0,		600px 0,	1366.5px 0,	1900px 0;	}
#sl_i8:target ~ #slideshow #c_slider.actif232 { background-position:	-4041.5px 0,	-3600px 0,	-2833.5px 0,	-2400px 0,	-1700px 0,	-1100px 0,	-600px 0,	0px 0,		766.5px 0,	1300px 0;	}
#sl_i9:target ~ #slideshow #c_slider.actif232 { background-position:	-4641.5px 0,	-4200px 0,	-3433.5px 0,	-3000px 0,	-2300px 0,	-1700px 0,	-1200px 0,	-600px 0,	166.5px 0,	700px 0;	}
#sl_i10:target ~ #slideshow #c_slider.actif232 { background-position:	-5241.5px 0,	-4800px 0,	-4033.5px 0,	-3600px 0,	-2900px 0,	-2300px 0,	-1800px 0,	-1200px 0,	-433.5px 0,	100px 0;	}

#slideshow #c_slider.actif511 {  background: 
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo01.jpg) 158.5px 0 no-repeat,  
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo02.jpg) 766.5px 0 no-repeat,  
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo03.jpg) 1200px 0 no-repeat,  
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo04.jpg) 1833.5px 0 no-repeat,  
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo05.jpg) 2566.5px 0 no-repeat,  
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo06.jpg) 3100px 0 no-repeat,  
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo07.jpg) 3600px 0 no-repeat,  
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo08.jpg) 4200px 0 no-repeat,  
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo09.jpg) 4950px 0 no-repeat,  
	url(../files/Tiamat_LaFeeClocharde/CieIvressePublique-Tiamat_LaFeeClocharde-Photo10.jpg) 5400px 0 no-repeat,  
	url(../images/blackdot.jpg) 0 0 repeat;	}
#sl_i1:target ~ #slideshow #c_slider.actif511 { background-position:	158.5px 0,		766.5px 0,		1200px 0,	1833.5px 0,		2566.5px 0,		3100px 0,	3600px 0,	4200px 0,	4950px 0,	5400px 0;	}
#sl_i2:target ~ #slideshow #c_slider.actif511 { background-position:	-441.5px 0,		166.5px 0,		600px 0,	1233.5px 0,		1966.5px 0,		2500px 0,	3000px 0,	3600px 0,	4350px 0,	4800px 0;	}
#sl_i3:target ~ #slideshow #c_slider.actif511 { background-position:	-1041.5px 0,	-433.5px 0,		0px 0,		633.5px 0,		1366.5px 0,		1900px 0,	2400px 0,	3000px 0,	3750px 0,	4200px 0;	}
#sl_i4:target ~ #slideshow #c_slider.actif511 { background-position:	-1641.5px 0,	-1033.5px 0,	-600px 0,	33.5px 0,		766.5px 0,		1300px 0,	1800px 0,	2400px 0,	3150px 0,	3600px 0;	}
#sl_i5:target ~ #slideshow #c_slider.actif511 { background-position:	-2241.5px 0,	-1633.5px 0,	-1200px 0,	-566.5px 0,		166.5px 0,		700px 0,	1200px 0,	1800px 0,	2550px 0,	3000px 0;	}
#sl_i6:target ~ #slideshow #c_slider.actif511 { background-position:	-2841.5px 0,	-2233.5px 0,	-1800px 0,	-1166.5px 0,	-433.5px 0,		100px 0,	600px 0,	1200px 0,	1950px 0,	2400px 0;	}
#sl_i7:target ~ #slideshow #c_slider.actif511 { background-position:	-3441.5px 0,	-2833.5px 0,	-2400px 0,	-1766.5px 0,	-1033.5px 0,	-500px 0,	0px 0,		600px 0,	1350px 0,	1800px 0;	}
#sl_i8:target ~ #slideshow #c_slider.actif511 { background-position:	-4041.5px 0,	-3433.5px 0,	-3000px 0,	-2366.5px 0,	-1633.5px 0,	-1100px 0,	-600px 0,	0px 0,		750px 0,	1200px 0;	}
#sl_i9:target ~ #slideshow #c_slider.actif511 { background-position:	-4641.5px 0,	-4033.5px 0,	-3600px 0,	-2966.5px 0,	-2233.5px 0,	-1700px 0,	-1200px 0,	-600px 0,	150px 0,	600px 0;	}
#sl_i10:target ~ #slideshow #c_slider.actif511 { background-position:	-5241.5px 0,	-4633.5px 0,	-4200px 0,	-3566.5px 0,	-2833.5px 0,	-2300px 0,	-1800px 0,	-1200px 0,	-450px 0,	0px 0;	}

	
	
/***************** PAGINATION *********************/


.dots_commands  {  
	padding:0;  
	margin:32px 0 0;  
	text-align: center;  
}  
.dots_commands li {  
	display: inline;  
	padding:0; margin:0;  
}  
.dots_commands a {  
	position: relative;  
	display: inline-block;  
	height:8px; width: 8px;  
	margin: 0 5px;  
	text-indent: -9999px;  
	background: #222222;  
   
	border-radius: 50%;  
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;  
}  
/* quelques styles au focus */  
.dots_commands a:focus {  
	outline: none;  
	background: #222222;  
}  
.dots_commands li:first-child a { z-index: 25; }  

	/* on style after et before, on utilisera les deux */  
.dots_commands li:first-child a:after,  
.dots_commands li:first-child a:before {  
	position: absolute;  
	top: 0; left: 0;  
	content: " ";  
	width: 8px; height: 8px;  
	background: #ffffff;  
	z-index:20;  
	border-radius: 50%;  
	box-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;  
}  
/* on anime "after" */  
.dots_commands li:first-child a:after {  
	animation: dotser 50s infinite;  
	-webkit-animation: dotser 50s infinite;  
}  
/* on cache "before", on l'utilise uniquement au clic (cf. bonux précédent) */  
.dots_commands li:first-child a:before { display:none; }  
   
/* c'est parti pour l'animation ! */  
@keyframes dotser {  
	0%		{ opacity:1;	filter:alpha(opacity=100);	left:0px;	}
	8%		{ opacity:1;	filter:alpha(opacity=100);	left:0px;	}
	9%		{ opacity:0;	filter:alpha(opacity=0);	left:0px;	}
	10%		{ opacity:0;	filter:alpha(opacity=0);	left:18px;	}
	11%		{ opacity:1;	filter:alpha(opacity=100);	left:18px;	}
	18%		{ opacity:1;	filter:alpha(opacity=100);	left:18px;	}
	19%		{ opacity:0;	filter:alpha(opacity=0);	left:18px;	}
	20%		{ opacity:0;	filter:alpha(opacity=0);	left:36px;	}
	21%		{ opacity:1;	filter:alpha(opacity=100);	left:36px;	}
	28%		{ opacity:1;	filter:alpha(opacity=100);	left:36px;	}
	29%		{ opacity:0;	filter:alpha(opacity=0);	left:36px;	}
	30%		{ opacity:0;	filter:alpha(opacity=0);	left:54px;	}
	31%		{ opacity:1;	filter:alpha(opacity=100);	left:54px;	}
	38%		{ opacity:1;	filter:alpha(opacity=100);	left:54px;	}
	39%		{ opacity:0;	filter:alpha(opacity=0);	left:54px;	}
	40%		{ opacity:0;	filter:alpha(opacity=0);	left:72px;	}
	41%		{ opacity:1;	filter:alpha(opacity=100);	left:72px;	}
	48%		{ opacity:1;	filter:alpha(opacity=100);	left:72px;	}
	49%		{ opacity:0;	filter:alpha(opacity=0);	left:72px;	}
	50%		{ opacity:0;	filter:alpha(opacity=0);	left:90px;	}
	51%		{ opacity:1;	filter:alpha(opacity=100);	left:90px;	}
	58%		{ opacity:1;	filter:alpha(opacity=100);	left:90px;	}
	59%		{ opacity:0;	filter:alpha(opacity=0);	left:90px;	}
	60%		{ opacity:0;	filter:alpha(opacity=0);	left:108px;	}
	61%		{ opacity:1;	filter:alpha(opacity=100);	left:108px;	}
	68%		{ opacity:1;	filter:alpha(opacity=100);	left:108px;	}
	69%		{ opacity:0;	filter:alpha(opacity=0);	left:108px;	}
	70%		{ opacity:0;	filter:alpha(opacity=0);	left:126px;	}
	71%		{ opacity:1;	filter:alpha(opacity=100);	left:126px;	}
	78%		{ opacity:1;	filter:alpha(opacity=100);	left:126px;	}
	79%		{ opacity:0;	filter:alpha(opacity=0);	left:126px;	}
	80%		{ opacity:0;	filter:alpha(opacity=0);	left:144px;	}
	81%		{ opacity:1;	filter:alpha(opacity=100);	left:144px;	}
	88%		{ opacity:1;	filter:alpha(opacity=100);	left:144px;	}
	89%		{ opacity:0;	filter:alpha(opacity=0);	left:144px;	}
	90%		{ opacity:0;	filter:alpha(opacity=0);	left:162px;	}
	91%		{ opacity:1;	filter:alpha(opacity=100);	left:162px;	}
	98%		{ opacity:1;	filter:alpha(opacity=100);	left:162px;	}
	99%		{ opacity:0;	filter:alpha(opacity=0);	left:162px;	}
	100%	{ opacity:0;	filter:alpha(opacity=0);	left:0px;	}
}  
@-webkit-keyframes dotser {  
	0%		{ opacity:1;	filter:alpha(opacity=100);	left:0px;	}
	8%		{ opacity:1;	filter:alpha(opacity=100);	left:0px;	}
	9%		{ opacity:0;	filter:alpha(opacity=0);	left:0px;	}
	10%		{ opacity:0;	filter:alpha(opacity=0);	left:18px;	}
	11%		{ opacity:1;	filter:alpha(opacity=100);	left:18px;	}
	18%		{ opacity:1;	filter:alpha(opacity=100);	left:18px;	}
	19%		{ opacity:0;	filter:alpha(opacity=0);	left:18px;	}
	20%		{ opacity:0;	filter:alpha(opacity=0);	left:36px;	}
	21%		{ opacity:1;	filter:alpha(opacity=100);	left:36px;	}
	28%		{ opacity:1;	filter:alpha(opacity=100);	left:36px;	}
	29%		{ opacity:0;	filter:alpha(opacity=0);	left:36px;	}
	30%		{ opacity:0;	filter:alpha(opacity=0);	left:54px;	}
	31%		{ opacity:1;	filter:alpha(opacity=100);	left:54px;	}
	38%		{ opacity:1;	filter:alpha(opacity=100);	left:54px;	}
	39%		{ opacity:0;	filter:alpha(opacity=0);	left:54px;	}
	40%		{ opacity:0;	filter:alpha(opacity=0);	left:72px;	}
	41%		{ opacity:1;	filter:alpha(opacity=100);	left:72px;	}
	48%		{ opacity:1;	filter:alpha(opacity=100);	left:72px;	}
	49%		{ opacity:0;	filter:alpha(opacity=0);	left:72px;	}
	50%		{ opacity:0;	filter:alpha(opacity=0);	left:90px;	}
	51%		{ opacity:1;	filter:alpha(opacity=100);	left:90px;	}
	58%		{ opacity:1;	filter:alpha(opacity=100);	left:90px;	}
	59%		{ opacity:0;	filter:alpha(opacity=0);	left:90px;	}
	60%		{ opacity:0;	filter:alpha(opacity=0);	left:108px;	}
	61%		{ opacity:1;	filter:alpha(opacity=100);	left:108px;	}
	68%		{ opacity:1;	filter:alpha(opacity=100);	left:108px;	}
	69%		{ opacity:0;	filter:alpha(opacity=0);	left:108px;	}
	70%		{ opacity:0;	filter:alpha(opacity=0);	left:126px;	}
	71%		{ opacity:1;	filter:alpha(opacity=100);	left:126px;	}
	78%		{ opacity:1;	filter:alpha(opacity=100);	left:126px;	}
	79%		{ opacity:0;	filter:alpha(opacity=0);	left:126px;	}
	80%		{ opacity:0;	filter:alpha(opacity=0);	left:144px;	}
	81%		{ opacity:1;	filter:alpha(opacity=100);	left:144px;	}
	88%		{ opacity:1;	filter:alpha(opacity=100);	left:144px;	}
	89%		{ opacity:0;	filter:alpha(opacity=0);	left:144px;	}
	90%		{ opacity:0;	filter:alpha(opacity=0);	left:162px;	}
	91%		{ opacity:1;	filter:alpha(opacity=100);	left:162px;	}
	98%		{ opacity:1;	filter:alpha(opacity=100);	left:162px;	}
	99%		{ opacity:0;	filter:alpha(opacity=0);	left:162px;	}
	100%	{ opacity:0;	filter:alpha(opacity=0);	left:0px;	}
}  


/***********************
*** SLIDESHOW MOBILE ***
***********************/

#panorama {
	position : fixed;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
}
#panorama td.td-center {
	width : 100%;
	padding : 0.25em;
}
#panorama-left, #panorama-right {
	position : fixed;
	bottom : 50%;
	width : 2em;
	height : 2em;
	background-color : white;
	font-weight : bold;
	color : black;
	cursor : pointer;
	opacity : .7;
	filter : alpha(opacity=70);
}
#panorama-left {
	left : 0;
}
#panorama-right {
	right : 0;
}
.table-border {
	width : 100%;
	height : 100%;
}
#panorama #panorama-img.panorama-photo {
	position : relative;
	width : 95%;
	height : 95%;
	max-width : 95%;
	max-height : 95%;
	border : solid 0.25em white;
}
#panorama #panorama-img.init {
	width : 0;
	height : 0;
	max-width : 0;
	max-height : 0;
}
#panorama-bottom {
	position : fixed;
	bottom : 0;
	left : 0;
	width : 100%;
	padding : 0.25em;
	background : #fff;
	color : #000;
	font-weight : bold;
	text-align : center;
	opacity : .7;
	filter : alpha(opacity=70);
}