@font-face {
    font-family: 'museoSans';
    src: url('MuseoSans_500-webfont.eot');
    src: url('MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('MuseoSans_500-webfont.woff') format('woff'),
         url('MuseoSans_500-webfont.ttf') format('truetype'),
         url('MuseoSans_500-webfont.svg#MuseoSans500Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*TODO : mieux styler les blocs compléments (dans les extras)*/

/*Museo Sans is a font by Jos Buivenga (exljbris) -> www.exljbris.com*/


html, body{
	font-family:museoSans, sans-serif;
	margin: 0px;
	padding: 0px;
	color: #2C2C2C;
	font-size: 14px;
}

#webMedia, .infos_win, .extra_win, .credits_win, .glos_win, .bib_win, .ref_win{
	position: absolute;
	width: 980px; /* ATTENTION !!! définir cette valeur aussi pour :
	                               la hauteur de la vidéo réduite,
	                               le placement des notes sous la vidéo,
	                               et la hauteur de la marge !*/
	height: 600px;
	left: 50%;
	top: 50%;
	margin-left: -490px;
	margin-top: -300px;
}

th{
	text-align: right;
}

a.op_txt_ul, a.txt_url_ul, a.op_bibTxt_ul_url, .refOutlineEntry a{
	color: #A827C0;
	border-bottom: 1px solid #A827C0;
	display: inline-block;
	margin-bottom: 2px;
	border-bottom-width: 1px;
	text-decoration: none;
}

a.op_txt_ul{
	color: #D78A00;
	border-bottom: 1px solid #EB9C0E;
	font-weight: bold;
}

a.txt_url_ul:hover, a.op_txt_ul:hover, a.op_bibTxt_ul_url:hover,  .refOutlineEntry a:hover{
	border-bottom-width: 3px;
	margin-bottom: 0px
}

.complt a.op_txt_ul, .complt a.txt_url_ul, .extra a.op_txt_ul, .extra a.txt_url_ul, .credits a.op_txt_ul, .credits a.txt_url_ul, .refOutlineEntry a{
	border-bottom-color: white;
	color: white;
}

p, ul, li{
	text-align: justify;	
	margin-top: 0px
}

q:after, q:before{
	content: none;
}

.txt_img_ex {
	text-align: center;
	margin: 20px 0;
}

/*structure :
main
	header
	#content
		div#mediafull
			audio#media
			*OU*
			div#media avec dim
				object#media avec dim
			*OU*
			div#media avec dim
				object#media_object avec dim
			*OU*
			video#media avec dim
		*OU*
		div#media
			audio
			*OU*
			div#flashMedia avec dim
			*OU*
			plusieurs div#flashMedia avec dim
			*OU*
			video avec dim
			*OU*
			video avec dim et audio
			
	 div#media.mediaContainer avec attributs OU .mediaContainer sans attributs
		#margin
		#slideshow
			.slide (plusieurs les uns sur les autres en principe)
				.segmentTitle
				.segmentNotes
					.segmentNotesContent
				.segmentDescIllus
					.segmentDescIllusContent
						.description
							.descriptionContent
						.illustrations
							.illustrationsContent
								.illustration (plusieurs)
	#controller
	
On définit les dimensions générales de l'interface en deux seuls endroits : largeur sur le #main et hauteur sur le #content. Ça permet d'avoir une interface qui s'adapte en cas de titre qui passe sur deux lignes 
*/

#main {
  background: url(img/fond.png) center center repeat-x;
	box-shadow: inset 0px 0px 30px 1px rgba(200, 200, 200, 1);
	margin:auto;
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden /* nécessaire pour que les compléments placés en dehors de l'interface ne soient pas visibles*/
}

/*trucs de premier niveau*/
header{
	position: absolute;
	top: 0;
	width: 100%;
	height: 40px;
	z-index: 3
}

#content{
	position: absolute;
	width: 100%;
	top: 40px;
	bottom: 40px;
	overflow: hidden /* je ne sais pas trop pourquoi mais il faut mettre ça pour que l'interface ne soit pas décalée vers le haut sur FF*/
}

#controller {
	height: 40px;
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 2;
}

/*trucs dans #content*/

			/*div#media*/

						div#mediafull *, div#media *{
							position: absolute;
							width: 100% !important;
							height: 100% !important;
						}
						
						div#media, div#mediafull{
							position: absolute;
							top: 50px;
							left: 0;
							bottom: 0;
							right: 0;
							visibility: hidden;
							opacity: 0;
							filter:alpha(opacity=0);
							width: auto !important;
							height: auto !important;
							transition: top 0.5s ease-in-out 0.5s, left 0.5s ease-in-out 0.5s, bottom 0.5s ease-in-out 0.5s, right 0.5s ease-in-out 0.5s, visibility 0.5s ease-in-out 0.5s, opacity 0.5s ease-in-out 0s;
							-webkit-transition: top 0.5s ease-in-out 0.5s, left 0.5s ease-in-out 0.5s, bottom 0.5s ease-in-out 0.5s, right 0.5s ease-in-out 0.5s, visibility 0.5s ease-in-out 0.5s, opacity 0.5s ease-in-out 0s;
						}

						div#mediafull, div#mediafull div#media{
							visibility: visible;
							opacity: 1;
							filter:alpha(opacity=100);
						}

						div#mediafull div#media{
							top: 0;
						}

						video, div#media[data-currentType=video]{
							visibility: visible;
							opacity:1;
							filter:alpha(opacity=100);
							transition: top 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, bottom 0.5s ease-in-out 0s, right 0.5s ease-in-out 0s, visibility 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0.5s;
							-webkit-transition: top 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, bottom 0.5s ease-in-out 0s, right 0.5s ease-in-out 0s, visibility 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0.5s;
						}

						audio, div#media[data-currentType=audio]{
							visibility: hidden;
							opacity:0;
							filter:alpha(opacity=0);
						}

						#content.contentWithToc[data-hasIllustr] div#media[data-currentType=video],
						#content.contentWithToc[data-hasIllustr] div#mediafull[data-currentType=video] {
							top: 0;
							bottom: 67%;
							bottom: -webkit-calc(100% - 980px * 0.2 * 3 / 4); /*on calcule la hauteur de la vidéo : 980px * 0.2 * 3 / 4 = proportions 4/3 de 20% de la largeur*/
							bottom: calc(100% - 980px * 0.2 * 3 / 4);
							right: 80%;
							left: 0 !important;
						}						

						#content.content[data-hasIllustr] div#media[data-currentType=video],
						#content.content[data-hasIllustr] div#mediafull[data-currentType=video] {
							top: 0;
							top: -webkit-calc(0% + 50px);
							top: calc(0% + 50px);
							bottom: 67%;
							bottom: -webkit-calc(100% - 980px * 0.2 * 3 / 4 - 50px); /*on calcule la hauteur de la vidéo : 980px * 0.2 * 3 / 4 = proportions 4/3 de 20% de la largeur
							                                                           et on retranche 50px car on veut que la vidéo se place sous le titre de la séquence*/
							bottom: calc(100% - 980px * 0.2 * 3 / 4 - 50px);
							right: 80%;
							left: 0 !important;
						}						

						#content.contentWithToc div#media[data-currentType=video],
						#content.content[data-hasnotes] div#media[data-currentType=video],
						#content.contentWithToc div#mediafull,
						#content.content[data-hasnotes] div#mediafull {
							left: 20%;
						}

						#content.contentWithToc[data-hasnotes] div#media[data-currentType=video],
						#content.contentWithToc[data-hasnotes] div#mediafull{
							left: 40%;
						}
						
						div#media video{ /* par défaut on masque la video pour ne n'afficher que celle qui a data-active=true (plus haut) */
							display: none
						}

						div#media video[data-active=true]{ /* par défaut on masque la video pour ne n'afficher que celle qui a data-active=true (plus haut) */
							display: block;
						}

						/* special fallback flash : on agit sur l'object car si on fait varier le visibility sur le div, s'il est hidden, l'objet flash ne semble pas créé et le player ne se lance pas*/
						div#media div object{ /* par défaut on masque la video pour ne n'afficher que celle qui a data-active=true (plus haut) */
							visibility: hidden ! important;
						}

						div#media div[data-active=true] object{ /* par défaut on masque la video pour ne n'afficher que celle qui a data-active=true (plus haut) */
							visibility: visible ! important;
						}



/*
						audio{
							visibility: hidden;
						}
						
						div#media, div#mediafull{
							position: absolute;
							top: 0;
							left: 0;
							bottom: 100%;
							right: 100%;
							visibility: hidden;
							opacity: 0;
							transition: top 0.5s ease-in-out 0.5s, left 0.5s ease-in-out 0.5s, bottom 0.5s ease-in-out 0.5s, right 0.5s ease-in-out 0.5s, visibility 0.5s ease-in-out 0.5s, opacity 0.5s ease-in-out 0s;
							-webkit-transition: top 0.5s ease-in-out 0.5s, left 0.5s ease-in-out 0.5s, bottom 0.5s ease-in-out 0.5s, right 0.5s ease-in-out 0.5s, visibility 0.5s ease-in-out 0.5s, opacity 0.5s ease-in-out 0s;
						}
												
						div#mediafull div#media, video{
							position: absolute;
							width: 100% ! important;
							height: 100% ! important;
						}	
											
						div#media[data-type=audio], div#media[data-currentType=audio]{
							/* comportement étrange sur FF, si on a une ressource mp3 et que bottom e right sont à 100%, la lecture ne démarre pas */
/*							bottom: 99%;
							right: 99%;
						}

						div#media, div#mediafull video{
							background-color: black;
						}						

						div#media[data-currentType=video], div#mediafull{
							opacity: 1;
							visibility: visible;
							top: 50px;
							right: 0;
							bottom: 0;
							z-index: 2;
							transition: top 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, bottom 0.5s ease-in-out 0s, right 0.5s ease-in-out 0s, visibility 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0.5s;
							-webkit-transition: top 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, bottom 0.5s ease-in-out 0s, right 0.5s ease-in-out 0s, visibility 0.5s ease-in-out 0s, opacity 0.5s ease-in-out 0.5s;
						}

						#content[data-hasIllustr] div#media[data-currentType=video], #content[data-hasIllustr] div#mediafull {
							top: 0;
							bottom: 67%;
							right: 80%;
							left: 0 !important;
						}						

						#content.contentWithToc div#media[data-currentType=video], #content.content[data-hasnotes] div#media[data-currentType=video],
						#content.contentWithToc div#mediafull, #content.content[data-hasnotes] div#mediafull {
							left: 20%;
						}

						#content.contentWithToc[data-hasnotes] div#media[data-currentType=video],
						#content.contentWithToc[data-hasnotes] div#mediafull{
							left: 40%;
						}

						div#media *{
							position: absolute;
							width: 100% !important;
							height: 100% !important;
						}
*/

#content.contentWithToc #margin{
	z-index: 1
}

#margin{
	position: absolute;
	left: 0;
	width: 20%;
	top: 0;
	bottom: 0;
	-webkit-transition: top 0.5s ease-out;
	transition: top 0.5s ease-out;
}

div#content[data-hasIllustr] #media[data-currentType=video]~#margin,
div#content[data-hasIllustr] #mediafull[data-currentType=video]~#margin {
 top: 33%;
	top: -webkit-calc(980px * 0.2 * 3 / 4 + 2px); /*980px * 0.2 * 3 / 4 = calcul de la hauteur de la vidéo, on ajoute 2px pour que ce ne soit pas collé*/
	top: calc(980px * 0.2 * 3 / 4 + 2px);
}

#slideshow{
	position: absolute;
	left: 0;
	right: 0;
	height: 100%;
}

/*trucs dans #slideshow*/

/* on souhaite garder le titre harmonieusement centré.
Donc si on a une marge le titre se centre dans l'espace restant, sinon il ce centre dans tout l'espace dispo.
Donc :
- on a une marge : slide left:20%
- on n'a pas de marge :slide left:0
*/

div.slide  {
	opacity: 0;
	filter:alpha(opacity=0);
	visibility:hidden;
	left: 0;
	right: 0;
	position: absolute;
	height: 100%;
}

#content.contentWithToc div.slide{
	left:20%
}

/*trucs dans un slide*/
.segmentTitle{
	position: absolute;
	top: 0;
	height: 50px;
	width: 100%;
 text-shadow : 1px 1px 0 white;
	height: 50px;
	color: #6a6a6a;
	font-size: 19px;
	text-align: center;
	white-space: nowrap;
}

.segmentTitle span{
	margin-top: 10px;
	display: inline-block;
}

/* Pour les notes le comportement est le suivant :
- audio + pas de marge : 0
- audio + marge : 0 (puisque le slide est déja décalé à cause de la marge, voir plus haut)
mais width de 25% pour garder la même width que la marge proportionnellement dans l'espace du slide (plus étroit que si on n'a pas de marge))
- video + pas de marge : 0
- video + marge : 0 (puisque le slide est déjà décalé à cause de la marge, voir plus haut)
mais width de 25% pour garder la même width que la marge proportionnellement dans l'espace du slide (plus étroit que si on n'a pas de marge))
- cas particulier : video réduite + pas de marge: 0 mais sous la vidéo !!!
*/

.segmentNotes{
	position: absolute;
	top: 50px;
	bottom: 0;
	left: 0;
	width: 20%;
	overflow: auto;
/*obligé de déclencher le placement top du bloc avec un retard car sinon le top change alors que l'animation de fondu n'a pas fini*/
	-webkit-transition: all 0s ease-out 0.5s;
	transition: all 0s ease-out 0.5s;
}

#content.contentWithToc .slide[data-state=active] .segmentNotes{
	width: 25%;
}

#content.content[data-hasillustr=true] div.slide.videoStream .segmentNotes{
 top: 33%;
	top: -webkit-calc(980px * 0.2 * 3 / 4 + 52px); /*980px * 0.2 * 3 / 4 = calcul de la hauteur de la vidéo,
	                                                 on ajoute 50px car sans marge la vidéo se place sous le titre de la séquence et on ajoute 2px pour que ce ne soit pas collé*/
	top: calc(980px * 0.2 * 3 / 4 + 52px);
}

/*#content.content[data-hasillustr=true] div.slide.videoStream .segmentNotes{
 pourcentage différent du 20% ci-dessus car la dimension du parent (le slide) est réduite 
	left: -25%;
	width: 25%;
}*/

/*.segmentNotesContent{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}*/

/*#content.content[data-hasillustr=true] div.slide.videoStream .segmentNotesContent{
	top: 33%;
}*/

.segmentNotesContentInside{
	padding: 10px
}

.segmentNotesContentInside *{
	text-align: left;
}

.segmentDescIllus{
	position: absolute;
	top: 50px;
	bottom: 0;
	left: 2px;
	right: 0;
	overflow: auto;
/*obligé de déclencher le placement left du bloc avec un retard car sinon le left change alors que l'animation de fondu n'a pas fini*/
/*obligé de déclencher l'overflow du bloc avec un retard car sinon l'overflow change alors que l'animation de fondu n'a pas fini*/
	-webkit-transition: left 0s ease-out 0.5s, overflow 0s ease-out 0.5s;
	transition: left 0s ease-out 0.5s, overflow 0s ease-out 0.5s;
}

/* positionnement du segmentDescIllus (attribut left)
(pour les cas de figure avec vidéo on ne considère que la vidéo dans sa forme réduite puisque lorsque la vidéo est en plein écran le segmentDescIllus est vide) 
- audio + rien : 0
- audio + marge : 0 (puisque le slide est déjà décalé)
- audio + notes : 20%
- audio + notes + marge : 25% car le slide est déjà décalé et donc plus étroit,
                              donc pour garder une largeur de colone égale entre la marge et les notes,
                              les notes doivent faire 25% de la largeur du slide et le segmentDescIllus doit avoir left 25% pour ne pas manger les notes
- vidéo + rien : 20% en effet le slide n'est pas décalé dans ce cas de figure (il n'est décalé qu'en présence de marge) donc il faut décaler le segmentDescIllus
- vidéo + marge : 0 car le slide est déjà décalé par la présence de la marge
- vidéo + notes : 20% car les notes se placent sous la vidéo donc on retrouve le premier cas de figure
- vidéo + notes + marge : 25% car le slide est décalé à cause de la présence de la marge et docn plus étroit, on retrouve le même cas de figure que audio + notes + marge
*/

#content.content .slide.withNotes.audioStream .segmentDescIllus,
#content.content .slide.withNotes.videoStream .segmentDescIllus,
#content.content .slide.withoutNotes.videoStream .segmentDescIllus{
	left: 20%;
	left: -webkit-calc(20% + 2px);
	left: calc(20% + 2px);
}

#content.contentWithToc .slide.withNotes.audioStream .segmentDescIllus,
#content.contentWithToc .slide.withNotes.videoStream .segmentDescIllus{
	left: 25%;
	left: -webkit-calc(25% + 2px);
	left: calc(25% + 2px);
}

#content[data-hasimgsolo=true] .segmentDescIllus{
	overflow: hidden;
}

.segmentDescIllusContent{
	display: table;
	width: 100%;
	height: 100%
}

.segmentDescIllusContentIN{
	display: table-row;
	width: 100%;
	height: 100%;
}
	
/*trucs dans #margin*/

#marginToc, #marginTags{
	position: absolute;
	border-bottom: 2px solid white;
	background: #A827C0; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#732382', endColorstr='#A827C0',GradientType=0 ); /* IE6-9 */	
	background: -webkit-linear-gradient(top,  #732382 0%,#A827C0 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #732382 0%,#A827C0 45%); /* W3C */
	background: linear-gradient(top,  #732382 0%,#A827C0 45%); /* W3C */
	overflow: auto;
	width: 100%;
	z-index: 2
}

#marginTags{
	bottom: 50%;
	top: 0
}

#marginToc{
	bottom: 0;
	top: 50%
}

#marginTags.seul, #marginToc.seul{
	top: 0;
	bottom: 0;
}

#marginToc #toc ul{
	font-size:0.9em;
	list-style-type: none;
	padding-left: 0px;
}

#marginToc #toc ul ul{
	padding-left: 15px;
}

#marginToc #toc ul a{
	border-left: 1px solid white;
	padding-left: 5px;
	margin-bottom: 5px
}

.tocComplement{
	background: url(img/compltTOC.png) left center no-repeat;
	padding-left: 13px;
	color: white;
}

#marginToc #toc, #marginTags #tags{
	padding: 10px;
  text-shadow         : 1px 1px 0 #60166E;
}


header h1 {
	font-size: 20px;
	margin: 0 10px 10px;
	color: #9f1eb7;
	border-bottom: 2px solid #9f1eb7;
	padding: 7px 0 3px 0;
	display: block;
}

h1 a {
  color: #333 !important;
  text-shadow         : 0px 1px 10px #333;
}

/* Onglet */
#tabs ul{ 
    position: absolute;
    top: 0px;
    right: 5px;
    list-style-type: none;
    padding:0px;
    margin: 0px;
	overflow: visible;
	padding: 0px
}

#tabs ul li{
   display: inline-block;;
	margin-left: 5px;
	vertical-align: top;
}

#tabs ul ul li{
    display: block;
    margin-left: 0px;
    width: 100%;
}

#tabs ul ul li a{
    display: block;
/*    width: 100%;*/
}

#tabs ul ul{
	display: block;
	position: static;
}

#tabs li.subMenu:hover ul li a{
	height: 30px;
}

#tabs ul ul li a{
	height: 0px;
	overflow: hidden;
}

#tabs ul li a, #tabs ul li > span{
    display: inline-block;
    text-align:center;    
	text-decoration: none;
	color: white;
	box-shadow: 0px 0px 5px #9a9a9a;
  text-shadow         : 1px 1px 0 gray;
	white-space: nowrap;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out;
	height: 30px;
	padding-top: 0px
}

#tabs ul li > a span, #tabs ul li > span span{
	padding: 5px 10px;
	display: block;
}

#tabs ul li > span{
	display: block;
}


#tabs ul li a:hover, #tabs li.subMenu:hover ul li a:hover{
	height: 35px;
	padding-top: 10px
}

a.infos, .infos_co{
	background: #91AB2A; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#798C2C', endColorstr='#91AB2A',GradientType=0 ); /* IE6-9 */	
	background: -webkit-linear-gradient(top,  #798C2C 0%,#91AB2A 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #798C2C 0%,#91AB2A 45%); /* W3C */
	background: linear-gradient(top,  #798C2C 0%,#91AB2A 45%); /* W3C */
}

a.extra, span.extra, .extra_co{
	background: #2f89b7; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#176186', endColorstr='#2f89b7',GradientType=0 ); /* IE6-9 */
	background: -webkit-linear-gradient(top, #176186 0%, #2f89b7 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top, #176186 0%, #2f89b7 45%); /* W3C */
	background: linear-gradient(top, #176186 0%, #2f89b7 45%); /* W3C */
}

a.credits, span.credits, .credits_co{
	background: #8E8E8E; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#8E8E8E',GradientType=0 ); /* IE6-9 */
	background: -webkit-linear-gradient(top, #757575 0%,#8E8E8E 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top, #757575 0%,#8E8E8E 45%); /* W3C */
	background: linear-gradient(top, #757575 0%,#8E8E8E 45%); /* W3C */
}

a.glos, .glos_co{
	background: #C83E8B; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A02D6E', endColorstr='#C83E8B',GradientType=0 ); /* IE6-9 */
	background: -webkit-linear-gradient(top,  #A02D6E 0%,#C83E8B 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #A02D6E 0%,#C83E8B 45%); /* W3C */
	background: linear-gradient(top,  #A02D6E 0%,#C83E8B 45%); /* W3C */
}

span.index{
	background: #C8C8C8; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646464', endColorstr='#8D8D8D',GradientType=0 ); /* IE6-9 */
	background: -webkit-linear-gradient(top,  #646464 0%,#8D8D8D 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #646464 0%,#8D8D8D 45%); /* W3C */
	background: linear-gradient(top,  #646464 0%,#8D8D8D 45%); /* W3C */
}

a.bib, .bib_co{
	background: #36B09A; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#488F82', endColorstr='#36B09A',GradientType=0 ); /* IE6-9 */
	background: -webkit-linear-gradient(top,  #488F82 0%,#36B09A 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top, #488F82 0%,#36B09A 45%); /* W3C */
	background: linear-gradient(top, #488F82 0%,#36B09A 45%); /* W3C */
}

a.ref, .ref_co{
	background: #c8783e; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A85E2A', endColorstr='#c8783e',GradientType=0 ); /* IE6-9 */
	background: -webkit-linear-gradient(top,  #A85E2A 0%,#c8783e 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #A85E2A 0%,#c8783e 45%); /* W3C */
	background: linear-gradient(top,  #A85E2A 0%,#c8783e 45%); /* W3C */
}

/* Complement*/

#slideshow div.complt {
	position: absolute;	
	background-color: #A827C0;
	z-index: 20;
	right : -300px;
	top: 200px;
	background: #A827C0; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#732382', endColorstr='#A827C0',GradientType=0 ); /* IE6-9 */	
	background: -webkit-linear-gradient(top,  #732382 0%,#A827C0 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #732382 0%,#A827C0 45%); /* W3C */
	background: linear-gradient(top,  #732382 0%,#A827C0 45%); /* W3C */
	height: 0;
	width: 0;
	box-shadow: 0px 0px 15px black;
	border:1px solid white;
	color: white;
}

#slideshow div.complt[data-display=true] {	
	right: 10%;
	top: 10%;
	height: 80%;
	width: 80%;
}

.compltOff{
	position: absolute;
	top: 5px;
	right: 5px;
}

.compltContent{
	padding: 10px;
	position: absolute;
	top:35px;
	bottom: 0px;
	overflow: auto;
	left: 0px;
	right: 0px;
}

/* Iframes */

/* les dimensions des ... _win sont plus haut, définis avec le #webMedia car on veut lui donner les mêmes dimensions*/

.infos_win, .extra_win, .credits_win, .glos_win, .bib_win, .ref_win {
	pointer-events:none; /* feinte pour donner la possibilité de cliquer à travers la div (on met "auto" pour la même propriété pour les éléments dedans)
	en effet comme on met cette div aux dimensions de l'interface, pour que les dimensions du contenu, définies en %, soient correctes, du coup on ne peut plus cliquer
	sur les choses qui sont dessous. Cette propriété CSS permet de le faire*/
}

.infos_co, .extra_co, .credits_co, .glos_co, .bib_co, .ref_co {
	position: absolute;
	top: 10%;
	left: 10%;
	right: 10%;
	bottom: 10%;
	box-shadow: 0px 0px 15px black;
	border:1px solid white;
	pointer-events:auto; /*comme on a mit pointer-events:none au parent il faut même "auto" ici sous peine de de rien pouvoir cliquer ! */
}

.infos_ti, .extra_ti, .credits_ti, .glos_ti, .bib_ti, .ref_ti {
	position: absolute;
	top: 10%;
	right: 10%;
	bottom: 10%;
	box-shadow: 0px 0px 15px black;
	border:1px solid white;
	pointer-events:auto;
}

body > div.extra{ /*pour le contenu des extras*/
	position: absolute;
	top: 25px;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
	padding: 5px;
}

.infos_fra, .extra_fra, .credits_fra, .glos_fra, .bib_fra, .ref_fra{
	position: absolute;
	height: 100%;
	bottom: 0;
	width: 100%;
	overflow: hidden;
}

.infos_x, .extra_x, .credits_x, .glos_x, .bib_x, .ref_x, .compltOff, .tocTagsClose {
	display: block;
	width: 25px;
	height: 25px;
	background: url(img/closeSubWin.png) center center no-repeat;
	border:0px;
	cursor: hand;
	cursor: pointer;
	position: absolute;
	right: 0px;
	z-index: 2
}

.infos_x span, .extra_x span, .credits_x span, .glos_x span, .bib_x span, .ref_x span, .compltOff span, .tocTagsClose span{
	display: none;
}

/* Slideshow */

div.slide[data-state=done], div.slide[data-state=idle]  {
/*obligé de déclencher la modif du left après l'animation sinon les éléments peuvent bouger pendant l'animation*/
	-webkit-transition: visibility 0s linear 0.5s, opacity 0.5s ease-in-out 0s, left 0s linear 0.5s;
	transition: visibility 0s linear 0.5s, opacity 0.5s ease-in-out 0s, left 0s linear 0.5s;
	visibility:hidden;
	opacity: 0;
	filter:alpha(opacity=0);
}


div.slide[data-state=active]  {
/* pas possible de faire un fondu enchaîné (c-a-d faire une animation plus longue que le délai d'attente)car s'il y a présence de notes de marge,
la bordure gauche du bloc conteneur du slide change et il faut faire ce changement juste au moment ou rien n'est affiché (entre les deux fades) sinon les éléments bougent*/
/*obligé de déclencher la modif du left après le fondu de fermeture (0.5s) sinon les éléments peuvent bouger pendant l'animation*/
	-webkit-transition: opacity 0.5s ease-in-out 0.5s, left 0s linear 0.5s;
	transition: opacity 0.5s ease-in-out 0.5s, left 0s linear 0.5s;
	opacity: 1;
	filter:alpha(opacity=100);
	visibility:visible;
}

#slideshow div.slide:first-child{
	opacity: 0;
	filter:alpha(opacity=0);
}

/* CSS conditionnelle */	
.IE #slideshow div.slide.premier:first-child{
		opacity: 1; /* pour IE9 qui ne comprends pas les animations : normalement l'animation s'occupe de modifier l'opacity,
		mais comme IE ne comprend pas l'anim, il faut lui mettre l'opacity direct et qui plus est avec l'important pour que ça passe
		par-dessus le opacity défini sur l'élément dans le js du skin*/
		filter:alpha(opacity=100) ! important;
}

div.slide.premier{
   -webkit-animation:glow 0.3s ease-in-out 0s normal forwards;
   animation:glow 0.3s ease-in-out 0s normal forwards;
}
@-webkit-keyframes glow {
	0% {opacity: 0}
	100% {opacity: 1}
}
@keyframes glow {
	0% {opacity: 0}
	100% {opacity: 1}
}

/* Plage d'illustration */

#slideshow div.illustration[data-state=done], #slideshow div.illustration[data-state=idle] {
	-webkit-transition: opacity 0.5s ease-out, height 0s ease-out 0.5s;
	transition: opacity 0.5s ease-out, height 0s ease-out 0.5s;
}

/* CSS conditionnelle */	
.IE.IE8 #slideshow div.illustration.imgSolo[data-state=done],
.IE.IE8 #slideshow div.illustration.imgSolo[data-state=idle] {
 height: 0;
	filter:alpha(opacity=0);
}

#slideshow div.illustration[data-state=active]{
	opacity: 1;
	filter:alpha(opacity=100);
	-webkit-transition: opacity 0.5s ease-out 0.5s, height 0s ease-out 0.5s;
	transition: opacity 0.5s ease-out 0.5s, height 0s ease-out 0.5s;
}

#slideshow div.illustration.imgSolo{
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 0;
	top: 0;
}

.IE8 #slideshow div.illustration.imgSolo{
	position: static;
}

.IE8 #slideshow div.slide[data-state=active] div.illustration.imgSolo{
	position: absolute;
}

#slideshow div.illustration {
 height: 0;
	opacity: 0;
	filter:alpha(opacity=0);
	padding: 0 10px;
	overflow: hidden;
	position: static;
}

#slideshow div.illustration .binImgDescIllus {
	z-index: 0;
}

span.separator{
	margin:0px 10px;
	font-weight: bold;
}

.segmentContent, .segmentContentAndNotes{
	left: 0;
	right: 0;
	position: absolute;
	top: 50px;
	bottom: 0;
}

.content .segmentContent.videoStream{
	left:0;
	right: 0;
}

.description, .illustrations{
	display: table-cell;	
	vertical-align: middle;
	text-align: center;
}

.descriptionContent, #slideshow div.illustration[data-state=active]{
	height: 100%;
}

#slideshow div.illustration[data-state=active] .binImgDescIllus{
	z-index: 1;
}

.descriptionContent{
	padding:0px 10px
}

#slideshow div.illustration p{
	text-align: left;
}

#slideshow  img.binImg{
	display: block; 
	margin: auto;
	height: auto;
	max-height: 360px;
	max-width:760px;
	width: auto
}

#slideshow img.binImgDescIllus{
	height: auto;	
	max-height: 100%;
	max-width: 100%;
	width: auto;
/*	object-fit: contain;
	-moz-object-fit: contain;
	-webkit-object-fit: contain;
	-ms-object-fit: contain;
	-o-object-fit:contain; réactiver le object-fit quand ce sera supporté par les navigateurs */ 
	position: absolute;
	left: 50%;
	top: 0;
}

#slideshow nav {
	position: absolute;
	right: 0px;
	top: 50px;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	z-index: 4
}

#slideshow nav .compltOn .compltBtn {
	background-color: #eed4f2;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

#slideshow nav:hover .compltOn .compltBtn {
	background-color: #A827C0;
}

#slideshow nav header{
	display: none;
}

#slideshow nav button {
   overflow: visible;
   border:0px;
   cursor: hand;
   cursor: pointer;
   text-align: right;
   background-color: transparent;
   padding: 0px;
   margin: 0px;
   display: block;
   width: 100%;
}

#slideshow nav .compltBtn{
   background: url(img/complt.png) center center no-repeat;
   display: inline-block;
   width: 40px;
   height: 45px;
   vertical-align: middle;
}

.compltTitle {
	opacity: 0;
	filter:alpha(opacity=0);
	-webkit-transition: max-width 0.3s ease-out 0.1s, left 0.3s ease-out 0.1s, opacity 0.3s ease-out;
	transition: max-width 0.3s ease-out 0.1s, left 0.3s ease-out 0.1s, opacity 0.3s ease-out;
	left: 0px;
	white-space: nowrap;
	background: #A827C0; /* Old browsers */
	background: -webkit-linear-gradient(top,  #732382 0%,#A827C0 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #732382 0%,#A827C0 45%); /* W3C */
	background: linear-gradient(top,  #732382 0%,#A827C0 45%); /* W3C */
	box-shadow:  0px 0px 5px #BBBBBB;
	display: inline-block;
	position: relative;
	max-width: 0px
}

/*#slideshow nav:hover .compltTitle {*/
#slideshow nav:hover .compltTitle {
	opacity: 1;
	filter:alpha(opacity=100);
	left: -18px;
	max-width: 700px;
	-webkit-transition: max-width 0.3s ease-out, left 0.3s ease-out, opacity 0.3s ease-out 0.05s;
	transition: max-width 0.3s ease-out, left 0.3s ease-out, opacity 0.3s ease-out 0.05s;
}

.compltTitle_ti {
	padding: 10px 10px;
	text-shadow: 1px 1px 0 black;
	background: url(img/flecheCompltTitle.png) right center no-repeat;
	margin-right: -14px;
	padding-right:21px;
	display: inline-block;
	color: white;
}

/* Sommaire */

#toc a {
	text-decoration: none;
}

/* Element "extra */
#toc .extra a:before,#toc .credits a:before {
	content:url(img/plus.png);
}


/* Controlleur */

#timelineToc, #timelineTags {
	color: white;
	height: 0px;
	bottom: 40px;
	width:80%;
	left: 10%;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	overflow: hidden;
	background: #A827C0; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#732382', endColorstr='#A827C0',GradientType=0 ); /* IE6-9 */	
	background: -webkit-linear-gradient(top,  #732382 0%,#A827C0 45%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #732382 0%,#A827C0 45%); /* W3C */
	background: linear-gradient(top,  #732382 0%,#A827C0 45%); /* W3C */
	border-width:0px;
	border-style: solid;
	border-color: transparent;
	z-index: 3;
	position: absolute;
}

#timelineToc.active, #timelineTags.active {
	height: 20em;
	overflow: auto;
	border-width:1px;
	border-color: White;
}

#toc ul{
	margin: 0px	
}

#toc a{
	text-decoration: none;
	color: white;
	display: block;
	padding: 2px 4px;
	-webkit-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	background-color: transparent;
	border-radius: 3px;
}

#toc a:hover{
	background-color: rgba(255,255,255,0.15);
	-webkit-transition: background-color 0s linear;
	transition: background-color 0s linear;
}

#controlBar {
	display: table;
	color: white;
	background-color: #A827C0;
   box-shadow: inset 0px 0px 5px 5px #9916AE;
	-o-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	height: 40px;
}

#controlBar > div {
	overflow: hidden
}

#controlBar a, #controlBar button {
	color: white;
}

#playerBtns, #timelineBox, #playerTools {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#playerTools > *{
	vertical-align: middle;
}

#currentTimeLabel {
	border-bottom: 1px solid white;
	display: inline-block;
	padding-bottom: 3px;
}

#totalTimeLabel {
	padding-top: 3px;
	display: block;
}

#timeLabels{
	font-size: 11px;
	white-space: normal;
	display: inline-block;
  text-shadow         : 1px 1px 0 #7A158B;
  margin: 0px 10px 0px 10px;
  font-family: courrier
}

/* Ligne de temps */
#timeline {
	position: relative;
}

#controlBar > #timelineBox {
	width: 100%;
	overflow: visible
}

#timeCursor {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 30px;
	margin-left: -15px;
	z-index: 10;
	cursor: col-resize;
	background-image: url(img/cursor-white.png);
	background-position: center;
	background-repeat: no-repeat;
}

.timeSegments > *, .timePartCo > * {
	display: table-cell;
}

.timePart > a:first-child {
	display: inline-block;
	width: 100%;
	border-bottom:1px solid #D193DD;
}

.timePart > div.timePartCo {
	display: inline-table;
	width: 100%;
	max-height: 12px;
}

.timeSegments{
	display: table;
	width: 100%;
	height: 40px;
	border-left:1px solid #D193DD;
	border-right:1px solid #D193DD;
	background-color: #B640CB;
}

.timeSegments  a {
	display: table-cell;
	text-decoration: none;
	border-left:1px solid #D193DD;
	background-color: transparent;
	overflow: hidden;
	-webkit-transition: background-color 0.5s linear;
	transition: background-color 0.5s linear;
}

.timeSegments .timePart a {
	height: 20px;
}

.timeSegments a:hover,
.timeSegments a.current {
	background-color: #C26FD2;
	-webkit-transition: background-color 0s linear;
	transition: background-color 0s linear;
}

.timeSegments *[data-highlighted] {
    background-color: rgba(255,255,255,0.7);
    border:white;
	box-shadow: inset 0px 0px 1px #B640CB;
}

.timeSegments *[data-highlighted]:hover {
    background-color: white;
}

.timeSegments a span {
	position: absolute;
	top: -18px;
	visibility: hidden;
	right: 0px;
	margin-top: 0px;
	text-align: right;	
  font-size: 13px;
  padding: 0 5px;
	border-radius: 4px 4px 0px 0px;
  background-color: #B640CB;
  color: white;
}

.timeSegments a:hover span {
	visibility: visible;
}

/* Boutons */

#playerBtns, #playerTools{
	white-space: nowrap;
}

#nonContinuousPlayBtn, #stopAtSegmentEndBtn, #previousBtn, #nextBtn, button#playPauseBtn, button#tocDisplay, button#tagsDisplay{
	display: inline-block;
	width: 30px;
	height: 30px;
	border:0px;
	cursor: pointer;
	cursor: hand;
	margin: 0px 6px 0px 0px;
	border-radius: 20px;
   box-shadow: 0px 0px 3px 5px rgba(185,74,206,0);   
   /* Bug sous Safari : si une durée est spécifiée, la transition ne se fait pas */
	-webkit-transition: -webkit-box-shadow 0 linear;
	transition: box-shadow 0.5s linear;
	background-color: transparent;
}

#previousBtn{
	margin-left: 6px	
}

#nonContinuousPlayBtn:hover, #stopAtSegmentEndBtn:hover, #previousBtn:hover, #nextBtn:hover, #controller[data-state=paused] button#playPauseBtn:hover, #controller[data-state=playing] button#playPauseBtn:hover, button#tocDisplay:hover, button#tagsDisplay:hover{
   box-shadow: 0px 0px 3px 5px rgba(185,74,206,1);   
	-webkit-transition: -webkit-box-shadow 0s linear;
	transition: box-shadow 0s linear;
}

#nonContinuousPlayBtn span, #stopAtSegmentEndBtn span, #previousBtn span, #nextBtn span, #playPauseBtn span{
	display: none;
}

#previousBtn{
	background: url(img/previous.png) center center no-repeat;
}

#nextBtn{
	background: url(img/next.png) center center no-repeat;
}

#controller[data-state=paused] button#playPauseBtn {
	background: url(img/play.png) center center no-repeat;
}

#controller[data-state=playing] button#playPauseBtn {
	background: url(img/pause.png) center center no-repeat;
}

#previousBtn[disabled], #nextBtn[disabled] {
	opacity: 0.5;
	filter:alpha(opacity=50);
}
/* play/pause button */

button#playPauseBtn {	
	height: 32px;
	width: 30px;
	background-image: url(img/progress.gif);
	background-position: center center;
	background-repeat: no-repeat;
}

/* ToC button */

button#tocDisplay {
    background: url(img/media-toc.png) center center no-repeat;
}

button#tagsDisplay {
    background: url(img/media-tags.png) center center no-repeat;
}

/* active item in the table of contents */
#toc li.current > a {
	font-weight: bold;
	color: orange !important;
}

.bkBase_ti, .mainContent_ti{
  text-shadow         : 1px 1px 0 black;
}

.bkBase_co .bkBase_co{
	padding-left: 20px
}

h1.bkBase_ti, h1.mainContent_ti{
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	display: block;
	border-bottom: 3px dotted white;
	margin-top: 0px;
	padding-bottom: 10px
}

h2.bkBase_ti{
	font-size: 1.2em;
	margin-top: 2em
}

h3.bkBase_ti{
	font-size: 1.1em;
}

.extra *, .credits *{
	color: white;	
}

.idxEntryTi{
	font-weight: bold;
  text-shadow : 1px 1px 0 gray;
}

dl{
	margin: 0px;
	padding: 0px
}

.tag{
	background: url(img/tag.png) left center no-repeat;
	padding-left: 23px;
	font-size: 1.2em;
  text-shadow         : 1px 1px 0 #60166E;
  margin-bottom: 10px;
  cursor: hand;
  cursor: pointer;
  color: white;
}

#marginTags .tag{
	font-size: 0.8em;
}

#tags *[data-highlighted] {
	background: url(img/tagChecked.png) left center no-repeat;
	font-weight: bold;
}

#timelineTags.active{
	overflow: hidden;
}

#tagsContent{
	overflow: auto;
	bottom: 43px;
	position: absolute;
	top: 0px;
	left: 0;
	padding: 10px;
	right: 0;
}

#tagsPlayerButtons{
	text-align: center;
	height: : 40px;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
/*	background-color: rgba(255,255,255,0.1);*/
}

#nonContinuousPlayBtn, #stopAtSegmentEndBtn{
	margin:5px;
	border: 1px solid transparent;
}

#nonContinuousPlayBtn[data-checked], #stopAtSegmentEndBtn[data-checked]{
	border-color: white;
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
}

#stopAtSegmentEndBtn{
	background: url(img/stopAtSegmentEndBtn.png) center center no-repeat transparent;
}

#nonContinuousPlayBtn{
	background: url(img/nonContinuousPlayBtn.png) center center no-repeat transparent;
}

.tooltip_fra{
	background: #FFC000; /* Old browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8AA00', endColorstr='#FFC000',GradientType=0 ); /* IE6-9 */
	background: -webkit-linear-gradient(top,  #F8AA00 0%,#FFC000 33%); /* Chrome10+,Safari5.1+ */
	background: -moz-linear-gradient(top,  #F8AA00 0%,#FFC000 33%); /* W3C */
	background: linear-gradient(top,  #F8AA00 0%,#FFC000 33%); /* W3C */
	box-shadow:  0px 0px 5px #BBBBBB;
	margin-top: 10px
}

.tooltip{
	background: url(img/flecheTT.png) 7px top no-repeat;
	margin-top: -12px;
	padding-top:19px;
	color: #545454;
}

.tooltip_x {
	position: absolute;
	top: 15px;
	right: 3px;
	display: block;
	width: 14px;
	height: 14px;
	background: url(img/closeTT.png) center center no-repeat;
}

.tooltip_x span{
	display: none;
}

.tooltip_ti{
	color: black;	
	margin-bottom: 10px;
	padding: 5px 7px;
}

.tooltip_co{
	font-size: 0.8em;
	padding: 5px 7px;
}

.binCap_ti{
	font-size: 12px;
	color: gray;	
}

.binCapDescIllus_ti{
	position: absolute;
	bottom: 5px;
	left: 50%;
	background-color: white;
	border-radius: 3px;
	padding: 3px 5px;
	z-index: 1
}

.refOutlineEntry{
	font-size: 20px;
  text-shadow         : 1px 1px 0 gray;
  font-weight: bold;
  margin: 0 10px
}

.refCateg {
	font-size: 22px;
  text-shadow         : 1px 1px 0 gray;
  font-weight: bold;
  margin: 30px 10px 10px 10px;
  text-align: center;	
  border-top: 1px solid white;
  padding-top: 5px
}

.webCap_ti {
	text-align: center;
}

/* materiel optim */

.bkBase_co  img{
		box-shadow: 0 0 2px black;
}

/* materiel optim : galeries */

.galPvLnk img{
		box-shadow: 3px 3px 5px black;
		top: -3px;
		left: -3px;
		position: relative;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.galPvLnk img:hover{
		box-shadow: 1px 1px 3px black;
		top: 0;
		left: 0;
}

.galPvLnk{
	overflow: visible;
}

.galPv{
	float: none;
	display: inline-block;
	margin-bottom: 5px
}

.scImgGalOver{
	background-color: black;
	filter:alpha(opacity=60);
	opacity: 0.6;
}

.scImgGalTbr{
	bottom: 40px
}

.scImgGalBtnNoPrv, .scImgGalBtnNoNxt{
	filter:alpha(opacity=40);
	opacity: 0.4;
	cursor: default;
	pointer:default;
}

.scImgGalBtnPrv, .scImgGalBtnNoPrv, .scImgGalBtnNxt, .scImgGalBtnNoNxt, .scImgGalBtnPly, .scImgGalBtnPse, .scImgGalBtnCls{
	width: 18px;
	height: 22px;
	background-position: center center;
	background-repeat: no-repeat;
	display: inline-block;
	margin: 0 10px;
}

.scImgGalBtnPrv span, .scImgGalBtnNoPrv span, .scImgGalBtnNxt span, .scImgGalBtnNoNxt span, .scImgGalBtnPly span, .scImgGalBtnPse span, .scImgGalBtnCls span{
	display: none;
}

.scImgGalBtnCls{
	width: 26px;
}

.scImgGalBtnPrv, .scImgGalBtnNoPrv{
	background-image: url(img/imgPrec.png)
}

.scImgGalBtnNxt, .scImgGalBtnNoNxt{
	background-image: url(img/imgSuiv.png)
}

.scImgGalBtnPly{
	background-image: url(img/imgPlay.png)
}

.scImgGalBtnPse{
	background-image: url(img/imgPause.png)
}

.scImgGalBtnCls{
	background-image: url(img/imgFerme.png)
}

.scImgGalImgFra img{
		box-shadow: 0 0 13px black;
}

.scImgSep{
	display: none
}

.scImgGalTi, .scImgGalCount{
	color: white;
	text-shadow: 1px 1px 0 black;
}

.scImgGalTbr .scImgGalCount{
	position:absolute;
	right: 3px;
	bottom: 3px
}

/* materiel optim : events */

.event{
	margin-left: 5px;
	border-left:1px solid white;
	padding-left: 5px;
	margin-bottom:3px
}


.bkExtra h2{
	margin-top: 0
}

/* materiel optim : mis en relief */

.bkEmphasis{
	border-radius: 3px;
	background-color: rgba(185,25,48,0.1);
	padding: 10px 10px 1px 10px;
	margin: 10px;
	border:1px solid white;
}

.bkEmphasis h2{
	margin-top: 0
}

/* materiel optim : compléments */

.bkExtra{
	border-radius: 3px;
	background-color: rgba(0,0,0,0.1);
	padding: 10px 10px 1px 10px;
	margin: 10px;
	
}

.bkBase{
	margin: 1.5em 0em;
}
a.bkBase_closed{
	background: url("./img/clbClsLge.png") 4px center no-repeat;
	padding-left: 18px;
	border-bottom: 1px solid  white;
	color: white;
	min-height:16px;
	text-decoration : none;
}

a.bkBase_closed:hover{
		text-decoration :underline;
}



a.bkBase_open{
	background: url("./img/clbOpnLge.png") left center no-repeat;
	padding-left: 18px;
	border-bottom: 1px solid  white;
	color: white;
	min-height:16px;
	text-decoration : none;
}

a.bkBase_open:hover{
		text-decoration :underline;
}