*
{
	font-family:"Trebuchet MS", "arial", "times new roman";
}

body
{
	background:url("images/fondarbregauche.png") top left no-repeat , url("images/fondarbredroite.png") top right no-repeat;/*url("centre.png") top center no-repeat,*/ 
	background-attachment:fixed;
	background-color:#000000;
	color:#FFFFFF;
}

#fond
{
	position:absolute;
	top:0px;
	height:100%;
}

table
{
	width:100%;
}

.interligne{
	line-height:0.5em;
}

.centrer
{
	text-align:center;
}
.droite
{
	text-align:right;
}
.gris
{
	color: rgba(255, 255, 255, 0.2)
}

.oeil
{
	display:inline-block;
	vertical-align:top;
}
.oeil2
{
	display:inline-block;
	vertical-align:top;
}
.ssimg
{
	margin-top:0px;
	margin-bottom:0px;
	margin-right:15px;
	text-align:right;
	font-size:0.8em;
}





/*Corps de la page*/
.CorpsPage
	{
		background-color: rgba(0, 0, 0, 0.7);
		margin:auto;
		margin-top:50px;
		min-width:800px;
		max-width: 1150px;
		border-radius: 15px;
		width:90%;
		padding:20px;
		padding-top:1px;
	}

	a
	{
		text-decoration: none;
		color:white;
	}
	a:hover
	{
		text-decoration: underline;
	}

	
	
	
	
	
/*Titre dans la page*/
	h1  
	{
		font-size:3em;
	}

	h2
	{
		line-height:0em;
	}

	
	
	
	
	
	
	
/*Grand titre en arrière plan*/
	.GrandTexteFond
	{
		position:absolute;
		top:5px;
		right:10px;
		font-size:7em;
		color:white;
		opacity:0.3;
		z-index:-1;
	}











/*Menus sur la droite*/
	.TitreMenu
	{
		font-size:2em;
		font-weight:bold;
		color: rgba(255, 255, 255, 0.5);
		margin-left: 20px;
	}
	.ContenuMenu
	{
		margin-left: 30px;
	}
	.textemenu
	{
		line-height:0em;
	}
	.drapeaux
	{
		display:inline-block;
		vertical-align:-1px;
	}
	
	
	/* Menu 1*/
		.Titre1Menu1
		{
			position:absolute;
			height:40px;
			width:200px;
			right:-60px;
			top:190px;
			font-size:1.5em;
			z-index:-1;
			transform:rotate(270deg);
			-webkit-transform:rotate(270deg);
		}
		.MenuDroite1
		{
			position:absolute;
			right:0px;
			top:90px;
			width:10px;
			height:220px;
			padding:10px;
			border-radius: 10px 0 0 10px;
			background-color: rgba(0, 0, 0, 1);
			transition: width 2s, background 2s;
			-webkit-transition: width 2s, background 2s;
			font-size:1em;
			white-space: nowrap;
			overflow : hidden;
		}
		.MenuDroite1:hover
		{
			width:300px;
			background-color: rgba(0, 0, 0, 0.8);
			font-size:1em;
			transition: width 0.5s, background 0.5s;
			-webkit-transition: width 0.5s, background 0.5s;
		}




	/*Menu 2*/
		.Titre1Menu2
		{
			position:absolute;
			height:40px;
			width:200px;
			right:-60px;
			top:530px;
			font-size:1.5em;
			z-index:-1;
			transform:rotate(270deg);
			-webkit-transform:rotate(270deg);
		}
		.MenuDroite2
		{
			position:absolute;
			right:0px;
			top:340px;
			width:10px;
			height:310px;
			padding:10px;
			border-radius: 10px 0 0 10px;
			background-color: rgba(0, 0, 0, 1);
			transition: width 2s, background 2s;
			-webkit-transition: width 2s, background 2s;
			font-size:1em;
			white-space: nowrap;
			overflow : hidden;
		}
		.MenuDroite2:hover
		{
			width:300px;
			background-color: rgba(0, 0, 0, 0.8);
			font-size:1em;
			transition: width 0.5s, background 0.5s;
			-webkit-transition: width 0.5s, background 0.5s;
		}


	/*Menu 3*/
		.Titre1Menu3
		{
			position:absolute;
			height:40px;
			width:200px;
			right:-60px;
			top:580px;
			font-size:1.5em;
			z-index:-1;
			transform:rotate(270deg);
			-webkit-transform:rotate(270deg);
		}
		.MenuDroite3
		{
			position:absolute;
			right:0px;
			top:530px;
			width:10px;
			height:170px;
			padding:10px;
			border-radius: 10px 0 0 10px;
			background-color: rgba(0, 0, 0, 0.8);
			transition: width 2s, background 2s;
			-webkit-transition: width 2s, background 2s;
			font-size:1em;
			white-space: nowrap;
			overflow : hidden;
		}
		.MenuDroite3:hover
		{
			width:300px;
			background-color: rgba(0, 0, 0, 0.8);
			font-size:1em;
			transition: width 0.5s, background 0.5s;
			-webkit-transition: width 0.5s, background 0.5s;
		}
		
		
		
		
		

/* -------- mise en forme Grandes miniatures -------- */
	.CadreGdMiniature
	{
		height:200px;
		width:200px;
		margin:14px;
		display:inline-block;
		vertical-align:top;
	}

	.FondGdMiniature
	{
		margin-left: 0px;
		margin-bottom:0px;
		text-align: center;
		width:188px;
		max-height:188px;
		min-height:50px;
		vertical-align:middle;
		background-color: rgba(255, 255, 255, 0.2);
		padding:6px;
		border-radius: 5px;
	}


	.GdMiniatureImage
	{
		max-width:182px;
		max-height:155px;
		padding:3px;
		border: none;
		
		background-color: rgba(0, 0, 0, 1);
		transition: -webkit-background-color 0.5s;
		
		filter: grayscale(0%);
		/*firefox*/
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
		/*chrome*/
		-webkit-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
			
		transition: filter 3s;
		transition: -webkit-filter 3s;
		transition: -moz-filter 3s;
		transition: -ms-filter 3s;
		transition: -o-filter 3s;
	}
	.GdMiniatureImage:hover
	{
		background-color: rgba(255, 255, 255, 1);
		transition: -webkit-background-color 0.5s;
		
		filter: grayscale(100%);
		/*firefox:*/
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'1\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
		/*chrome*/
		-webkit-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
			
		transition: filter 0s;
		transition: -webkit-filter 0s;
		transition: -moz-filter 0s;
		transition: -ms-filter 0s;
		transition: -o-filter 0s;
	}





/* -------- mise en forme Petites miniatures -------- */
	.PtMiniatureImage
	{
		margin-left: 10px;
		margin-bottom: 10px;
		border: none;
		padding:2px;
		background-color: rgba(40, 40, 40, 1);		
		
		filter: grayscale(0%);
		/*firefox*/
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'1\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
		/*chrome*/
		-webkit-filter: grayscale(0%);
		-ms-filter: grayscale(0%);
		-o-filter: grayscale(0%);
		-moz-filter: grayscale(0%);
		
		transition: filter 3s;
		transition: -webkit-filter 3s;
		transition: -moz-filter 3s;
		transition: -ms-filter 3s;
		transition: -o-filter 3s;
	}
	.PtMiniatureImage:hover
	{
		background-color: rgba(255, 255, 255, 1);
		
		filter: grayscale(100%);
		/*firefox:*/
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
		/*chrome*/
		-webkit-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		
		transition: filter 0s;	
		transition: -webkit-filter 0s;
		transition: -moz-filter 0s;
		transition: -ms-filter 0s;
		transition: -o-filter 0s;
	}

	
	
	
	
	
	
	

/*commentaires bas de page*/
	.bloczonecommentairesGalerie
	{
		margin:auto;
		min-width:400px;
		max-width: 700px;
		border-radius: 15px;
		width:80%;
		margin-top: 10px;
		padding:30px;
		background-color: rgba(30, 30, 30, 0.9);
	}
	.bloczonecommentaires
	{
		margin:auto;
		min-width:400px;
		max-width: 700px;
		border-radius: 15px;
		width:80%;
		padding:30px;
		background-color: rgba(30, 30, 30, 0.9);
		text-align:left;
		position:relative;
		/*left:8px;*/
		margin-top:20px;
		display:none;
	}

	.bloccommentaire
	{
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 5px;
		margin-top: 5px;
		padding:3px;
		width:100%;
		font-size:0.9em;
	}

	.titrecommentaire
	{
		font-size:1.2em;
		margin-top:-10px;
	}

	.blocsaisiecommentaire
	{
		width:100%;
		margin-top:15px;
		border-radius: 5px;
		background-color: rgba(255, 255, 255, 0.1);
		resize: none;
		font-family:"Trebuchet MS", "arial", "times new roman";
		color: white;
		outline: none;
	}
	.blocsaisiecommentaire:focus
	{
		border-color:white;
	}

	.datecommentaire
	{
		font-size:0.7em;
		font-family:"arial";
		text-align:right;
		width:100%;
	}

	.nom
	{
		font-weight:bold;
		display:inline-block;
		width: 15%;
		vertical-align: top;
	}

	.textecommentaire
	{
		margin-left:15px;
		display:inline-block;
		width: 75%;
		vertical-align: top;
	}
	
	
	
	
	
	
	
/*Formulaires*/
	form
	{
		display:inline-block;
	}

	.form_commentaire
	{
		width:100%;
	}
	
	.upload
	{
		width:400px;
		height:50px;
	}

	input
	{
		border:none;
		border-radius: 5px;
		background-color: rgba(255, 255, 255, 0.2);
		color: white;
		padding-left:10px;
		padding-right: 10px;
		padding-top:3px;
		padding-bottom:3px;
		min-width:50px;
		outline: none;
	}
	input:hover
	{
		background-color: rgba(0, 0, 50, 0.5);
		color: white;	
		cursor: pointer;
	}

	.bouton_affichage
	{
		width:100px;
		/*height:25px;*/
		padding-left:0px;
		padding-right: 0px;
		margin:0px;
	}

	.faux_bouton
	{
		display:inline-block;
		/*margin-top:5px;*/
		border:none;
		border-radius: 5px;
		background-color: rgba(255, 255, 255, 0.2);
		color: gray;
		padding-top:3px;
		padding-bottom:3px;
		width:100px;
		outline: none;
		font-size:0.8em;
		text-align:center;
	}
	.vraifaux_bouton
	{
		display:inline-block;
		margin-top:5px;
		border:none;
		border-radius: 5px;
		background-color: rgba(255, 255, 255, 0.2);
		color: white;
		padding-top:3px;
		padding-bottom:3px;
		width:100px;
		outline: none;
		font-size:0.8em;
		text-align:center;
	}
	.vraifaux_bouton:hover
	{
		background-color: rgba(0, 0, 50, 0.5);
	}	

	.boutonmodifsuppr
	{
		margin-left:20px;
	}

	.form_modif_creer
	{
		width:300px;
		height:1.5em;
		display:inline-block;
		vertical-align:top;
		border-radius: 5px;
		background-color: rgba(255, 255, 255, 0.2);
		resize: none;
		font-family:"Trebuchet MS", "arial", "times new roman";
		color: white;
		outline: none;
	}

	
	
	
/*Affichage modif/suppr*/
	.modif_suppr
	{
		position:fixed;
		bottom:0px;
		border-radius: 10px 10px 0 0;
		background-color: rgba(20, 20, 50, 0.95);
		padding: 10px;
		text-align:center;
		min-width:770px;
		max-width: 1130px;
		width:90%;
	}

	
	
	
	
	
/*Affichage Photo */
	#FondPhoto
	{
		width:100%;
		height:100%;
		background-color: rgba(40, 40, 40, 0.8);
		position:fixed;
		top:0px;
		left:0px;
		visibility:hidden;
	}
	#PagePhoto
	{
		height:100%;
		overflow:auto;
		text-align:center;
		min-width:500px;
	}
	#droite
	{
		position:absolute;
		right:50px;
		top:50%;
	}
	#gauche
	{
		position:absolute;
		left:50px;
		top:50%;
	}
	#croix
	{
		position:absolute;
		right:55px;
		top:20px;
	}
	#imgcroix,#imgdroite,#imggauche
	{
		border:none;
	}
	#fondnoir
	{
		background:linear-gradient(to right, rgba(0,0,0,0), black 80%);
		position:absolute;
		top:0px;
		right:0px;
		width:200px;
		height:100%;
		z-index:-1;
	}
	#cadrephoto
	{
		/*border: 1px blue solid;*/
		width:auto;
		height:100%;
		display:inline-block;
		margin:auto;
		position:relative;
	}
	#photo
	{
		height:90%;
		max-height:700px;
		min-height:300px;
		margin-top:20px;
		padding:5px;
		background-color: rgba(0, 0, 0, 1);
	}
	#fondbandeau
	{
		position:relative;
		bottom:305px;
		width:100%;
		height:300px;
		text-align:center;
	}
	#bandeaunoir
	{
		position:absolute;
		bottom:0px;
		width:100%;
		height:150px;
		background:linear-gradient(to bottom, rgba(0,0,0,0), black 65%);
		visibility:hidden;
	}
	#legende
	{
		position:absolute;
		width:100%;
		text-align:center;
		bottom:1.5em;
	}
	#divseparateur{
		position:absolute;
		bottom:1.5em;
		width:100%;
	}
	#separateur{
		text-align:center;
		border-color:gray;
		width:98%;		
	}
	#divcelldroite
	{
		position:absolute;
		right:20px;
		bottom:0.5em;
		width:280px;
		/*border: blue solid 1px;*/
		height:1.5em;
		/*background-color:blue;*/
		font-size:0.8em;
		z-index:6;
		text-align:right;
	}
	#divcellgauche
	{
		position:absolute;
		left:10px;
		bottom:0.5em;
		font-size:0.8em;
		text-align:left;
		height:1.5em;
		z-index:5;
	}
	
	
	.ModifLegende
	{
		margin-left:30px;
		margin-top:20px;
	}
	.CadreImgLegende
	{
		width:220px;
		display:inline-block;
		vertical-align:middle;
		text-align:center;
	}
	.form_modif_legende
	{
		width:500px;
		height:2.7em;
		display:inline-block;
		vertical-align:middle;
		border-radius: 5px;
		background-color: rgba(255, 255, 255, 0.2);
		resize: none;
		font-family:"Trebuchet MS", "arial", "times new roman";
		color: white;
		outline: none;
	}
	#ImgChrgt{
		position:absolute;
		top:200px;
		left:50%;
		padding:15px;
		border-radius:10px;
		margin-left:-65px;
		width: 100px;
		height:100px;
		background-color:black;
		text-align:center;
	}
	.droitesupprdiv{
		text-align:right;
		margin:0px;
		margin-bottom:-8px;
	}
	.droitesuppr
	{
		font-size:0.7em;
		display:inline-block;
		/*float:right;*/
		position:relative;
		bottom:5px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius:0px 0px 5px 5px;
		padding-right:10px;
		padding-left:10px;
	}
	.droitesuppr:hover
	{
		background-color: rgba(0, 0, 50, 0.7);
		cursor: pointer;
	}
	
	
/*----images pour selection des photo à supprimer---*/
	.FondImageSuppr
	{
		background-color: rgba(40, 40, 40, 1);	
		display:inline-block;
		margin-left: 10px;
		margin-bottom: 10px;
		height:104px;
		width:104px;
	}
	.FondImageSuppr:hover
	{
		background-color: rgba(255, 255, 255, 1);	
	}
	
	.SelectFondImageSuppr
	{
		background-color: rgba(2, 40, 200, 1);
		display:inline-block;
		margin-left: 10px;
		margin-bottom: 10px;
		height:104px;
		width:104px;
	}
	.ImageSuppr
	{
		border: none;
		padding:2px;
	}
	.SelectImageSuppr
	{
		border: none;
		padding:2px;
		
		filter: grayscale(100%);	
		/*firefox*/filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
		/*chrome*/-webkit-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		/*-moz-filter: grayscale(100%);*/
		
		/*filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);*/
		
		filter: brightness(20%);
        -webkit-filter: brightness(20%);
        -moz-filter: brightness(20%);
        -o-filter: brightness(20%);
        -ms-filter: brightness(20%);
	}

	.BoutonSupprim
	{
		border:none;
		border-radius: 5px;
		background-color: rgba(30, 30, 30, 1);
		color: grey;
		padding-left:10px;
		padding-right: 10px;
		padding-top:3px;
		padding-bottom:3px;
		min-width:50px;
		outline: none;
	}
	.BoutonSupprim:hover /*permet d'annuler l'effet du hover de input*/
	{
		background-color: rgba(30, 30, 30, 1);
		color: gray;
		cursor:default;
	}

	
	
	
	
/*affichage des nom d'utilisateur bas de page*/
	#autoutil
	{
		text-align:center;
		font-size:0.8em;
		visibility:hidden;
		margin-top:20px;
	}
	.BasGalerie
	{
		text-align:center;
		font-size:0.8em;
		width:380px;
		margin:auto;
		margin-top:5px;
		margin-bottom:0px;
	}
	
/*style cadena*/
	.cadena {
		float: left;
		margin-left:10px;
	}
	
	
	.petit{
		font-size:0.8em;
	}
	.petitdroite{
		font-size:0.8em;
		text-align:right;
	}
	
	
	.download{
		margin-right:10px;
	}
	
	
/*bulle au passage de la souris dans photo*/
	.divMetaPhoto{
		display:inline-block;
		/*border: 1px blue solid;*/
		cursor: pointer;
	}
	.BullesMetaPhoto{
		min-width : 75px;
		height:2em;
		background-color:rgba(0, 0, 255, 0.5);
		border-radius:5px;
		position:absolute;
		top:-2em;
		font-size:0.9em;
		padding-left : 5px;
		padding-right : 5px;
		padding-top : 2px;
		cursor: default;
	}
	#BulleLike{
		right:-7px;
		visibility:hidden;

	}
	#BulleCommentaires{
		right:0px;
		visibility:hidden;
	}
	
	#PlusUN{
		width:30px;
		height:30px;
		border-radius:15px;
		position:absolute;
		top:-45px;
		right:50px;
		font-weight:bold;
		font-size:1.2em;
		font-family:"Comic sans MS", "Trebuchet MS", "arial", "times new roman";
		text-align:center;
		background-color:rgba(0, 0, 255, 0.7);
		/*border: 1px white solid;*/
		opacity:0;
		z-index:-1;
		cursor: default;
	}