/* copie conforme de album_photos.css pour éviter d'insérer album_photos.css */
.albumoptions {
	/* padding: 3px; */
	background-color: orange;
	border-radius: 0.5em;
	/* margin: 0 5px 5px 5px; */
	margin: 0 0.5em 0 0.5em;
	font-size: 0.7em;
}
.titreright {
  position:relative;
}
.options_nav_haut, .options_nav_milieu, .options_nav_bas {
  display:inline-block;font-size:2.1em;
}
.options_nav_haut {
  position:absolute;bottom:-27px;right:0;overflow:visible;width: 310px !important;
}
.options_nav_milieu {
  position:absolute;bottom:30px;right:0;overflow:visible;width: 310px !important;
}
.options_nav_bas {
  width:95%;
  margin:0 15px 0 15px;
}
/* note: il suffit de retirer les classes ci-dessous pour retrouver la taille d'avant de l'entete */
.titre {
  /*font-family: "InterVariable",-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;*/
  font-size:22px;
  padding-left: 4em;
}
.titrecont {
	font-size: 0.9em;
	padding: 0.5em 0.1em 0.1em 0.1em;
	height: 2.05em;
  width:calc(100% - 3px);


}

.albumdescription {
  font-size:10px;
  padding:0 5px;
  clear:both;
  background-color:#f0f0ff;

  margin:0.8em;

  font-size:10px;
  padding:0 5px;
  border-radius:5px;
}

.optinterfc{
border-left:1px #1c58c3 solid;border-right:1px #1c58c3 solid;
}
.optinterft{
background-color:#6097FF;border-left:1px #9FC8FF solid;border-right:1px #0060FF solid;
padding:3px;
}


.albumoptions {
/* padding:3px; */
background-color:orange;
border-radius:0.5em;
/*
margin:0 5px 5px 5px;
*/
margin:0 0.5em 0.5em 0.5em;
font-size:0.7em;
}

[class^="opt"] { /* .optajfav */
width:32%;
padding:5px;
float:left;
}
[class^="opt"].on {
  background-color:#f0fff0;
  border-radius:5px 5px 0 0;
}
/*
[class^="opt"] > a, [class^="opt"] > a:visited, [class^="opt"] > a:link, [class^="opt"] > a:active {
  text-decoration:none;
}
*/
.optmenfav, .optguest {
text-align:center;
}
.optmenalb, .optinviter {
float:right;
text-align:right;
}
.optecrire{
clear:both;
}
/* FIN copie conforme de album_photos.css pour éviter d'insérer album_photos.css */



















 /**************************************************************/
/* pris dans album_creer_editer.css pour le form du guestbook */

/* image qu'on s�lectionne dans un form comme creer editer, guestbook */
#imageDiv {

}
.image-div { /* � la place de #imageDiv sinon �a fait foirer organiser */
  position:absolute;
  width:50%;
  height:50%;
  right:-51%;
  display:none;
}
.formcontainer { /* � distinguer de .form-container qu'il faudra virer, caduque */
  position:relative;
  width:50%;
  margin:auto;
}
/* FIN pris dans pour le form du guestbook */
/**************************************************************/

/**************************************************************/
/* form guestbook venant de new_montmartre.css */
/* membre contact / Ecrire � */
.eeecrire {
  padding:5px;
  border-radius:0 5px 5px 5px;
}
.eeecrire > p:nth-child(odd) {
  padding:15px 0 5px 0;
}
.eeecrire p.email {
  background-color:#fff;
  border-radius:5px;
  padding:5px;
  width:99%;
}
.eeecrire input[type=text] {
  /*width:100%;*/
}
.eeecrire textarea {
  /*width:100%;*/
  overflow:auto;font-size:12px;font-family:verdana,arial,helvetica;
}

.btn-retour, .btn-retour:active, .btn-retour:visited, .btn-retour:link {
  text-decoration:none; /* le lien apparait soulign� alors qu'il devrait pas : � revoir */
/*oldbrowsers pour les vieux navigateurs:
  background-image: url(/edsa-yamafoto/images/default/pictos/fleche_retour.gif);
*/
}
.btn-retour:before { /* bouton retour en bas dur form pour poster un message */
  font-size:1em;
  content:"\0025C4  "; /* \2039 */
}

@media all and (min-width: 0px){ /* hack opera : sans doute deprecie a l'avenir si les nouveaux browsers reconnaissent cette propriete */
  .p-email { width:351px; }
  .i { width:351px;height:20px; }
  .texta { width:353px;height:136px; }
}

/* pour l'avenir afin de mutualiser pour tout le site et virer les class i et c-i */
.form-container {
  width:49%;
/* tir� du form attestation d�placement: bootstrap? */
/* tir� du meme form:
font-family:sans-serif;
mono space:
font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
font-family:inherit;
font-family:marianne-bold;
font-family:marianne-regular,Arial,Helvetica,sans-serif;
*/
font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
font-size:1vw;
/*
background-color:red;
*/
}

/* admin */
input[type=text], textarea, select, .c-i{
/*
display:block;
*/
  width:95%;
  height:calc(1.5em + .75rem + 2px);
  padding:.375rem .75rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:#495057;
  background-color:#fff;
  background-clip:padding-box;
  border:1px solid #ced4da;
  border-radius:.25rem;
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
@media (prefers-reduced-motion:reduce){
  input[type=text], textarea, select, .c-i{transition:none}
}
input[type=text]::-ms-expand, .c-i::-ms-expand{background-color:rgba(0,0,0,0);border:0}
input[type=text]:-moz-focusring, .c-i:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #495057}
input[type=text]:focus, textarea:focus, .c-i:focus, .select:focus {
  color:#495057;
  background-color:#fff;
  border-color:#80bdff;
  outline:0;
  box-shadow:0 0 0 .2rem rgba(0,123,255,.25)
}

textarea, .texta, .texta2 {
  font-size:1rem;
  height:206px;
  resize: none;
  scrollbar-width: thin; /* https://css-tricks.com/almanac/properties/s/scrollbar-width/ */
}

 /********************************/
/* THIN SCROLLBAR POUR TEXTAREA */
/* Source: https://www.codegrepper.com/code-examples/css/thin+scrollbar+css */
/* uniquement pour les browsers webkit comme chrome */
textarea::-webkit-scrollbar, .texta::-webkit-scrollbar, .texta2::-webkit-scrollbar {
  width: 8px;               /* width of the entire scrollbar */
}
textarea::-webkit-scrollbar-track, .texta::-webkit-scrollbar-track, .texta2::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}
textarea::-webkit-scrollbar-thumb, .texta::-webkit-scrollbar-thumb, .texta2::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}
/* FIN form guestbook venant de new_montmartre.css */
/**************************************************************/




.c-cont4b { border-left: 1px #ffffff solid;border-right: 1px #d8d2bd solid;border-top: 1px #ffffff solid;border-bottom: 1px #d8d2bd solid; }
.c-cont4b { background-color:#fff0ff;color:#996666; }
.c-cont4b .t2 { color:#000; }
.c-cont4b a:link, .c-cont4b a:active, .c-cont4b a:visited { color:#000; }


/* ici button-71 avant */

/********************************/
/* abracadab : entete guestbook */
/********************************/
/* nouvelle liste (enrobage de la liste) qui servira pour tout, ? commencer par liste guestbook */
.abracadab > div:nth-child(1) {
  font-family: verdana;
  font-size:1.2em; /* avant 1.5em var(--entete_titre_size) */ /* font-size titre profil */

  border-radius:4px 4px 0 0; /* permet de lisser le border du div content */
/*  background-repeat: repeat-x; */
  font-weight:bold;
  padding:var(--pseudo_padding);
  height:var(--entete_height);


  letter-spacing: .1rem;
  text-shadow: 2px 2px #000;

  clear:both; /* pas besoin de clearfix */
  /* font-size:var(--entete_size); */
  font-smooth: 15em;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);


}
.abracadab {
  border-radius:5px 5px 15px 15px;
}
/* entete guestbook avant */

 /**************************************/
 /* .cpbleu */
/**************************************/
.cpbleu[class^="menu-onglets"] a, .cpbleu[class^="menu-onglets"] a:visited, .cpbleu[class^="menu-onglets"] a:link, .cpbleu[class^="menu-onglets"] a:active {
  color:#fff;
}
.cpbleu[class^="menu-onglets"] li.ooon {
  background-color:#80a0af;
  border:1px #1c58c3 solid;
  /*
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #80a0af 100%);
  */
  background: linear-gradient(#99ccff, #1c58c3 20%, #1567cf 75%, #1c58c3 100%);
  /* background: url(/application/images/default/kit/bleu_xp/degrade_1.jpg);background-repeat: repeat-x; */
  background-repeat: repeat-x;
  /*
  background-color:#74abe8;
  background-color:#1567cf;
  border-left:1px #74abe8 solid;
  border-right: 1px #3366ff solid;
  border-bottom: 1px #3366ff solid;
  */

}
.cpbleu[class^="menu-onglets"] li.orange {
  background-color:#ffb46a;
  border:1px #cc6600 solid;
  background: linear-gradient(#ffcc99, #cc6600 20%, #ff9933 100%);
}

.cpbleu[class^="menu-onglets"] li.creer {
  background-color:#ffb46a;
  border:1px #cc6600 solid;
  background: linear-gradient(#ffcc99, #cc6600 20%, #ff9933 100%);
}

.cpbleu[class^="menu-onglets"] li.ccconnect {
  background-color:#000;
  border:1px #cc6600 solid;
  background:grey;
  border-radius:0;
  width:3em;
}

/*
.cpbleu.menu-ongletsh {  border tourn? vers le haut
  border-bottom:1px #1c58c3 solid;
  border-radius:5px;
}
*/
.cpbleu.menu-ongletsh::after { /* pour avoir un border tourn? vers le bas, todo: un d?grad? sur le border */
  border-top:1px #1c58c3 solid;
}
.menu-ongletsh.cpbleu > ul ul { /*A MUTUALISER AVEC menu-ongletsv */
  background-color:#6699ff; /* ici on met un bkgd pour masquer le jour entre le border du ul et celui du li */
  border:1px #1c58c3 solid;
}
/* sous nav de la nav horizontale */
.menu-ongletsh.cpbleu > ul > li > ul li:first-child {
  border-top: 1px #3c8eff solid;
}
.menu-ongletsh.cpbleu > ul > li > ul li:last-child {
  border-bottom: 1px #3c8eff solid;
}
.menu-ongletsh.cpbleu > ul > li > ul li:hover > a, .menu-ongletsh.cpbleu > ul > li > ul li:hover > a:visited,
.menu-ongletsh.cpbleu > ul > li > ul li:hover > a:link, .menu-ongletsh.cpbleu > ul > li > ul li:hover > a:active,
.menu-ongletsh.cpbleu > ul > li > ul li:hover a:hover, /* idem quand on survole avec la souris */
.menu-ongletsh.cpbleu > ul > li > ul li:hover a:hover:visited,
.menu-ongletsh.cpbleu > ul > li > ul li:hover a:hover:active,
.menu-ongletsh.cpbleu > ul > li > ul li:hover a:hover:link {
  background-color:#fff;
  color:#6699ff;
}
/* fin sous nav de la nav horizontale */
/*************************************/
.menu-ongletsh.cpbleu > ul li { /* tous les niveaux de <li> en commen?ant par les onglets */
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  border:1px #3c8eff solid;
}
.cpbleu.menu-ongletsv ul {
  border: 1px #3c8eff solid;
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%);
  box-shadow: 0px 1px 2px #ccc;
}
.menu-ongletsv.cpbleu li {
  background-color:transparent; /* ? virer idem ci-dessus */
  border-top: 1px #3c8eff solid;
  border-bottom: 1px #3c8eff solid;
}
  /**********/
 /* ENTETE */
/**********/
/* entete guestbook avant */
/****************************************************/
/***************************************************/
/***************************************************/
/****************************************************************************************/
/* guestbook */

.guestbookoptions {
padding:3px;

  background-color:#f0fff0;


border-radius:0.5em;
margin:0 5px 0 5px;
font-size:0.7em;
}
/*
.c-hguest { background-color:#7F9FAF; }
.c-hbguest { border-left:1px #7F9FAF solid;border-right:1px #7F9FAF solid;background-color:#fff; }
.c-bhguest { border-left:1px #7F9FAF solid;border-right:1px #7F9FAF solid;background-color:#fff; }
.c-cguestb { border-left:1px #7F9FAF solid;border-right:1px #7F9FAF solid;background-color:#fff; }
.c-tguestb { border-left:1px #fff solid;border-right:1px #fff solid;background-color:#E2D5D5;color:#000; }
*/

/* liste messages */
.c-contguest:last-child, .c-cont1:last-child, .c-cont2:last-child {
  border-radius:0 0 15px 15px;
}
.liste-msgs-right { width:3.4em;/*76px;*/float:right;text-align:center; }
.liste-msgs-center { float:left;overflow:hidden;margin-bottom:3px;font-size:0.8em; }
.liste-msgs-left {
margin:0px;
float:left;
width:calc(100% - 5.2em);/*calc(100% - 88px)*/
border-radius:5px;
/*
border-left:1px #fff solid;
border-right:1px #fff solid;
*/
background-color:#E2D5D5;
color:#000;
border:1px #7F9FAF solid;
font-size:0.8em; /* texte message guestbook */

padding:3px;min-height:3.7em; /* avant: 62px */
 scrollbar-width: thin;position:relative;height:3.7em;overflow:auto;
}
.liste-msgs-left.msg-admin { margin-left:20px;float:left;width:calc(100% - 7.7em); } /* width:calc(100% - 108px); ici on regle la width des commentaires pour l'admin car on a la colonne avec la checkbox en plus */
.liste-mgs-admin p:first-child {
  float:left;
  width:1.5em; /* 20px */
}
.liste-mgs-admin p:nth-child(2) {
  float:left;
  width: calc(100% - 6.2em); /* 96px */
}
.liste-mgs-admin p:nth-child(3) {
  float:right;
  text-align:center;
  width: 3.4em; /* 76px */
}

.d-vignette70 { width:72px;height:72px;text-align:center;padding:0;border:0 none; }

.desc { scrollbar-width: thin;position:relative;padding:3px;min-height:62px;height:62px;overflow:auto; }
/**********************/
/* GUESTBOOK */
/**********************/
.orc-h { margin:0 2px;height:1px; }
.orc-b { margin:0 1px;height:1px; }

.c-hdesc { background-color:#73b2de; }
.c-bdesc { background-color:#fff;border-left:1px #73b2de solid;border-right:1px #73b2de solid; }
.c-cdesc { border-left:1px #73b2de solid;border-right:1px #73b2de solid; }
.c-tdesc { background-color:#edf4ff;border-left:1px #fff solid;border-right: 1px #fff solid;color:#73b2de; }

.m-msg-entete { margin-top:15px; }
.puce-album {
  width:25px;
  height:15px;
  background:url(/application/images/babies/abeilles/puce_album.gif);
  background-repeat: no-repeat;
  background-position: 0 0;
}
.p-msg-entete { margin-left:3px; }
.guest-lire-msg { width:80%; }
.guest-lire-photo { width:76px; }


.boubou {
  background-color:#6699ff;
  border-left:1px #3c8eff outset;
  border-right:1px #3c8eff outset;
  border-bottom:1px #3c8eff outset;
  border-top:1px #3c8eff outset;
  border-radius:5px;
  padding:5px 5px 5px 20px;
}
.ok {
  background: linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%) left top repeat-x;
  padding:5px;
}
.lire {
  /* todo : avec 2 backgrounds positionn?s l'un ? gauche l'autre ? droite ajouter deux borders comme sur les anciens boutons */
  background: url(/edsa-yamafoto/images/default/pictos/formulaire_transp.gif) left 2px no-repeat, linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%) left top repeat-x;
}
.ecrire {
  background: url(/edsa-yamafoto/images/default/pictos/crayon_transp.gif) left 2px no-repeat, linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%) left top repeat-x;
}
.poster {
  background: url(/edsa-yamafoto/images/default/pictos/poster.gif) left 2px no-repeat, linear-gradient(#99ccff, #3c8eff 20%, #6699ff 75%, #3c8eff 100%) left top repeat-x;
}
a.boubou, a.boubou:link, a.boubou:active, a.boubou:visited {
  font-family:verdana;
  font-size:1.1vw;
  color:#fff;
  text-decoration:none;
}
.form-couleur { /* ? merger plus tard avec form-container */
  font-family:verdana;
  font-size:1.1vw;
  color:#ffffff;
  background-color:#6699ff;
  border:1px #3c8eff outset;
  border-radius:11px;
  /* todo : avec 2 backgrounds positionn?s l'un ? gauche l'autre ? droite ajouter deux borders comme sur les anciens boutons */
  background: linear-gradient(#99ccff, #3c8eff 5%, #6699ff 75%, #3c8eff 100%) left top repeat-x;
  padding:5px;
}

.content p {
  margin:0;
  padding:0;
}
/* guestbook */
.btn-all-messages, .btn-all-messages:visited, .btn-all-messages:active, .btn-all-messages:link { /* peut-etre a deplacer dans admin.css */
  margin-right:15px; /* pas pris en compte, j'ai du le refoutre dans style="" donc ? revoir et virer le style="" */
}

.btn-ecrire, .btn-ecrire:visited, .btn-ecrire:active, .btn-ecrire:link { /* peut-etre a deplacer dans admin.css */
  display:block;
  margin:15px;
  padding:40px;
}
/* image du form, valable pour toutes les images qu'on s?lectionne: creer, param, form guestbook */

.loading {
/*
position:absolute;
z-index:1;
top:10%;
width:100%;
height:90%;
*/
background-image:url(/edsa-yamafoto/images/default/loading.svg);
background-position:50% 42%;
background-repeat:no-repeat;
background-size:5%;
background-color:#fffff0;
border-radius:15px;
}

/* titre dans l'entete admin: mes albums, mes contacts */
/*
CSS IMPORTANT:
le lien d?fini pour .content dans new_montmartre.css prend le dessus sur un simple "a.titre"
TOUS LES LIENS DEFINIS POUR .content a ? l'int?rieur de .content AURONT L'APPARENCE DE .content a INDEPENDAMENT DE LEUR CLASS CSS SAUF SI ON REDEFINIT SPECIFIQUEMENT UN LIEN POUR UN CONTENEUR A L'INTERIEUR DE .content
C PQ IL VAUDRA MIEUX REVOIR LE HTML ET LA CSS ET DEFINIR UNE CLASSE .annuaire_entete
C pq ci-dessous je suis oblig? de sp?ficier/pr?ciser et d?finir .content a.titre

SI LES LIENS SONT DEFINIS POUR UN CONTENEUR, LE DERNIER CONTENEUR PREND LE DESSUS SUR LES CLASSES CSS APPLIQUEES DIRECTEMENT AUX ANCRES.

.content a.titre, .content a.titre:active, .content a.titre:link, .content a.titre:visited  {
  color:#ffffff;text-decoration:none;
}
.content a.titre:hover {
  text-decoration:underline;
  text-shadow:none;
}
pas bon:
a.titre, a.titre:active, a.titre:link, a.titre:visited  {
  color:#ffffff;text-decoration:none;
}
*/

/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/***********************************************************************************************************************************/
/* Portrait and Landscape */
@media only screen and (max-width: 959px) {
	.content p.p { /* on est obligé de mettre .content p devant .p sinon c'est pas pris en compte */
		padding: 2vh 0 0 1vh;
	}
	.p-pseudo { /* c-i */
		font-size:0.3vh;
	}
	.eeecrire textarea {
		font-size: 0.3vh;
		padding: .75rem .35rem;
	}
}
/* Paysage */
@media only screen and (max-width: 959px) and (orientation: landscape) {
	.content p.p { /* on est obligé de mettre .content p devant .p sinon c'est pas pris en compte */
		padding: 3vh 0 0 1.5vh;
	}
	.p-pseudo { /* c-i */
		font-size:1vh;
	}
	.eeecrire textarea {
		font-size: 1vw;
		line-height:3vw;
		padding: .35rem .35rem;
	}
	.content p.oblig { /* idem */
		width:50%;
		margin:auto;
	}
}
/* Portrait */
@media only screen and (max-width: 959px) and (orientation: portrait) {
  .formcontainer {
    width:unset;
  }
	.oblig {
	  width:unset;
	}
	.image-div {
		position: relative;
		width: 100%;
	/*	height: 50%;*/
		right: unset;
		display: none;
	}

	.liste-msgs-left.msg-admin {
	  margin-left: 20px;
	  float: unset;
	  /*width: fit-content;*/
	  overflow:	auto;
	  height: unset;
	}

	.liste-mgs-admin p:nth-child(2) {
	  float: left;
	  width: calc(100% - 6.2em);
	  font-size: 0.9vw;
	}

	.abracadab > div:nth-child(1) {
		font-size: 1em;
		padding: var(--pseudo_padding);
		height: 7vw;
		letter-spacing: .1rem;
	}

	.select-block57 > p:nth-child(2) > a.supprimer, .select-block57 > p:nth-child(2) > button.supprimer {
		background-image: url(/images/default/pictos/delete.gif);
		font-size: 0.5em;
	}
	.liste-msgs-right {
		width: 3.4em;
		float: left;
		text-align: left;
		font-size: 35px;
		margin: 2vw 5vw;
  }
}