/*Styles affichage de la navigation de le bibliothèque musicale*/



p.title_BBL {
	font-size: 2em;
	text-align: left;
	font-weight: bold;
	padding: 0;
	margin: 0 auto 1em auto;
}

p.title_menuStyle {
	display:block;
	position: relative;
	width:75%;
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;
	font-size: 2em;
	border-bottom: #4363ff solid 1px;
}

button {cursor: pointer;}


div.flextop {align-items: start;}

/*Menu navigation style*/
h2#TitreMenuStyles {display: none; cursor: pointer;}
#NavMenuStyles {
	position: relative;
	display: flex;
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
	
	flex-direction: column;
	
	align-items: top;
	padding: 0;
	
	/*background-color: #0000CD;*/
}

#NavMenuStyles.fullSize {
	width: 20%;
	padding: 0;
	margin: 2em auto 2em auto;
	/*background-color: #FFFFFF;*/
}

#NavMenuStyles.SmallSize {
	width: 25%;
	padding: 0;
	margin: 5em auto 2em auto;
	/*background-color: #FFFFFF;*/
}

#cadre_titre_styles {display: block; position: relative; width: 100%; margin:0 0 1em 0; padding:0; text-align: center;}

#NavMenuStyles.SmallSize #cadre_titre_styles p.title_menuStyle {text-align:left; margin-left: -10%; font-size: 1.5em;}

html {
--colorBT_off: #e6eaee;
}

@keyframes animeBtStyle_Bt1 {
  0%   {background-color: var(--colorBT_off);}
  50%  {background-color: #74d33d;}
  100% {background-color: var(--colorBT_off);}
}

@keyframes animeBtStyle_Bt2 {
  0%   {background-color: var(--colorBT_off);}
  50%  {background-color: #5fbaf5;}
  100% {background-color: var(--colorBT_off);}
}
@keyframes animeBtStyle_Bt3 {
  0%   {background-color: var(--colorBT_off);}
  50%  {background-color: #f89c27;}
  100% {background-color: var(--colorBT_off);}
}
@keyframes animeBtStyle_Bt4 {
  0%   {background-color: var(--colorBT_off);}
  50%  {background-color: #d064f9;}
  100% {background-color: var(--colorBT_off);}
}
@keyframes animeBtStyle_Bt5 {
  0%   {background-color: var(--colorBT_off);}
  50%  {background-color: #977c82;}
  100% {background-color: var(--colorBT_off);}
}
@keyframes animeBtStyle_Bt6 {
  0%   {background-color: var(--colorBT_off);}
  50%  {background-color: #fbdd05;}
  100% {background-color: var(--colorBT_off);}
}
@keyframes animeBtStyle_Bt7 {
  0%   {background-color: var(--colorBT_off);}
  50%  {background-color: #f756d3;}
  100% {background-color: var(--colorBT_off);}
}

/*Menu version h2*/
#NavMenuStyles h2.bt_style { display: block; position: relative; width: 95%; padding: 0 5% 0 0; margin: 0; height: 4.3em; font-size: 1.2em; line-height: 4.3em; color: #000000; font-weight: bold; text-align: right; border: none; border-bottom: 1px solid #000000; cursor: pointer;}
#NavMenuStyles.fullSize h2.bt_style { margin: 0 0 0 0;}
/*#NavMenuStyles.SmallSize h2.bt_style { margin: 1%; width: 44%; }*/

#NavMenuStyles h2.bt1, #NavMenuStyles h2.bt2, #NavMenuStyles h2.bt3, #NavMenuStyles h2.bt4, #NavMenuStyles h2.bt5, #NavMenuStyles h2.bt6, #NavMenuStyles h2.bt7 {background-size: cover;}

#NavMenuStyles h2.bt1 { background: url('../01_Fond/guitare-balade40pc_NB.png') no-repeat left, var(--colorBT_off);background-size: cover; animation-name: animeBtStyle_Bt1; animation-duration: 1s;}
#NavMenuStyles h2.bt2 { background: url('../01_Fond/guitare-blues40pc_NB.png') no-repeat left, var(--colorBT_off);background-size: cover; animation-name: animeBtStyle_Bt2; animation-duration: 1s; animation-delay: 1s;}
/*#NavMenuStyles h2.bt3 { background: url('../01_Fond/guitare-bossa40pc_NB.png') no-repeat left, var(--colorBT_off);background-size: cover; animation-name: animeBtStyle_Bt3; animation-duration: 1s; animation-delay: 0s;}*/
#NavMenuStyles h2.bt4 { background: url('../01_Fond/guitare-folk40pc_NB.png') no-repeat left, var(--colorBT_off);background-size: cover; animation-name: animeBtStyle_Bt4; animation-duration: 1s; animation-delay: 2s;}
#NavMenuStyles h2.bt5 { background: url('../01_Fond/guitare-jazz40pc_NB.png') no-repeat left, var(--colorBT_off);background-size: cover; animation-name: animeBtStyle_Bt5; animation-duration: 1s; animation-delay: 3s;}
#NavMenuStyles h2.bt6 { background: url('../01_Fond/guitare-poprock40pc_NB.png') no-repeat left, var(--colorBT_off);background-size: cover; animation-name: animeBtStyle_Bt6; animation-duration: 1s; animation-delay: 4s;}
#NavMenuStyles h2.bt7 { background: url('../01_Fond/guitare-rock40pc_NB.png') no-repeat left, var(--colorBT_off);background-size: cover; animation-name: animeBtStyle_Bt7; animation-duration: 1s; animation-delay: 5s;}

#NavMenuStyles h2.bt1:hover, #NavMenuStyles h2#bt_style-1.selected  { background-color: #74d33d;}
#NavMenuStyles h2.bt2:hover, #NavMenuStyles h2#bt_style-2.selected  { background-color: #5fbaf5; }
#NavMenuStyles h2.bt3:hover, #NavMenuStyles h2#bt_style-3.selected  { background-color: #f89c27; }
#NavMenuStyles h2.bt4:hover, #NavMenuStyles h2#bt_style-4.selected  { background-color: #d064f9; }
#NavMenuStyles h2.bt5:hover, #NavMenuStyles h2#bt_style-5.selected  { background-color: #977c82; }
#NavMenuStyles h2.bt6:hover, #NavMenuStyles h2#bt_style-6.selected  { background-color: #fbdd05; }
#NavMenuStyles h2.bt7:hover, #NavMenuStyles h2#bt_style-7.selected  { background-color: #f756d3; }



#zone_CtntStyles {
	display: block;
	position: relative;
	width: 74%;
	margin: 2em 0 2em 0;
	padding: 0 0 0 6%;
	/*background-color: #918ffc;*/
}

/*#zone_CtntStyles button {
	display: block;
	text-align: left;
	width: 97%;
	padding:1.5%;
	margin: 0 0 2em 0;
	border-radius: 0.5em;
	border: 1px solid #FFFFFF;
	background-color: #FFFFFF;	
}*/
span.bt_titre {font-size: 1.15em; font-weight: bold; color: #95904a; }
span.bt_detail {font-size: 1em; color: #afaeaa;}

/*#zone_CtntStyles button:hover { background-color: #95904a;}
#zone_CtntStyles button:hover span { color: #FFFFFF;}

#zone_CtntStyles button.selected { background-color: #FFFFFF; border: 1px solid #b2ab57;}
#zone_CtntStyles button.selected span { color: #000000;}*/



/*====== Vignettes médias ====== */

article.listMedia {
	position: relative;
	display: block;
	width:80%;
	padding: 1em 1% 1.5em 1%;
	border-top: #FFFFFF solid 1px;
}

article.listMedia:hover {
	cursor: pointer;
	background-color: rgba(184,179,156,0.25);
}

article.listMedia div.flex {
	position: relative;
	display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row; /* Safari 6.1+ */
}

article.listMedia img.img_audio {
	display: block;
	position: relative;
	width: 20%;
	margin: 0;
	padding: 0;
}

article.listMedia div.detail_media {
	display: block;
	position: relative;
	width: 77%;
	margin: 0;
	padding: 0 1% 0 2%;
	/*background-color: #F527F2;*/
}



article.listMedia h3 {
	display: block;
	position: relative;
	width: 90%;
	margin: 0 0 1em 0;
	padding: 0;
	color: #f6490f;
}

article.listMedia p.mediaInfos {
	display: block;
	position: relative;
	margin: 0;
	padding:0;
}

article.listMedia p.description {

}



article.listMedia button.play {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	width: 10%;
	height: 3em;
	margin: 0;
	border: none;
	border-radius: 0 0 1em 0.5em;
}

article.listMedia button.play:hover { color: #FFFFFF; background-color: #4363ff;}

article.listMedia button.stop {

}

article.listMedia button.selected {
	background-color: #F54927;
}

img.hpListen {display: block; position: relative; width: 60%; margin: auto;}




@media screen and (max-width: 992px)
{
	
	h2#TitreMenuStyles {display: block; position: relative; width: 50%; padding: 0 5% 0 5%; margin: 0 auto 0 auto; font-size: 1.2em; text-align: center; border-radius: 0 0 1em 1em; background-color: #4363ff;}
	
	#NavMenuStyles.fullSize, #NavMenuStyles.SmallSize {
		display: none;
		flex-direction: column;
		flex-wrap: wrap;
		width: 100%;
		padding: 0;
		margin: 0;
		/*background-color: #FFFFFF;*/
	}
	
	/*#NavMenuStyles h2.bt_style, #NavMenuStyles.SmallSize h2.bt_style { display: block; position: relative; width: 90%; height: 6em; font-size: 1.2em; font-weight: bold; text-align: right; padding: 0 2% 0 0; border: none; radius: 0;}
	*/
	#NavMenuStyles.fullSize h2.bt_style, #NavMenuStyles.SmallSize h2.bt_style {
		display: inline-block;
		width: 44%;
		margin: 0.25%;
	}
	

	#zone_CtntStyles {

		width: 94%;
		padding: 0 3% 0 3%;
		

		/* background-color: #918ffc; */
	}
	
	article.listMedia {width: 98%}
	
	#zone_CtntStyles.zone_video {width: 90%;}

	
	
	button.bt_song {font-size:0.9em;}
	span.bt_titre {font-size: 1.15em; font-weight: bold; color: #95904a; }


	
	
	
}