/* ***********************************************************	*/
/* Feuille de Style - CSS */
/* ***********************************************************	*/


	
/* ***********************************************************	*/
/* Déclaration Font */	
/* ***********************************************************	*/
	@font-face
	{
		font-family : "kodama"; 
		src : url('font/kodama.eot');
		src : 
			url('font/kodama.eot?') format('eot'), 
			url('font/kodama.woff') format('woff'), 
			url('font/kodama.svg#abcd') format('svg'), 
			url('font/kodama.ttf') format('truetype');
	}
	
	/*
		exljbris :: Free Quality Font Foundry
		Diavlo_BOOK_II Font license information

		• This font is free for personal and commercial use
		• This font file may not be modified
		• This font file may not be distributed -not online nor on any media- without my permission
		• Embedding (in PDF's, Flash files and programs) is allowed 
		• This font may not be sold
		• This font is the intellecual property of Jos Buivenga
		• Exljbris (Jos Buivenga) is not liable for any damage resulting from the use of this font

		For more information visit:
		http://www.josbuivenga.demon.nl

		or contact me at:
		comment@josbuivenga.demon.nl
	*/
		
	@font-face
	{
		font-family : "Diavlo_web"; 
		src : url('font/Diavlo_BOOK_II.eot');
		src : 
			url('font/Diavlo_BOOK_II.eot?') format('eot'), 
			url('font/Diavlo_BOOK_II.woff') format('woff'), 
			url('font/Diavlo_BOOK_II.svg#abcd') format('svg'), 
			url('font/Diavlo_BOOK_II.ttf') format('truetype');
	}
	
	
	

/* *************************************** */
/* Style GLOBAL */
/* *************************************** */
	body 
	{
		margin: 0px;  padding: 0px;
		font-weight : normal; 
		font-size : 18px; 
		font-family: Diavlo_web, arial,helvetica,geneva,sans-serif;
		color :#000000;
		
		background-color:#FFFFFF;
		background-repeat:no-repeat;
		background-attachment:fixed;
		background-position:center top; 
		background-size: auto;
		
		
	}

	img {border:0px;}
	
	strong{}
	
	a, a:visited
	{ 
		font-weight: normal;
		color: #37B8FB;
		text-decoration: none; 
		cursor:pointer;
	}

	a:hover, a:active{color:#FFCF40; text-decoration:none;}
	
/* *************************************** */
/* Header / Footer */
/* *************************************** */	
	.header
	{
		position:fixed;
		z-index:100000;
		top:0px;
		left:0px;
		width:100%;
		height:60px;
		background:#FFFFFF;
		text-align:left; 
		box-shadow: 0px 5px 7px 0px #999999;
	}
	
	.footer
	{
		padding:10px;
		text-align:center;
		background:#000000;
		color:#FFFFFF;
		
		font-size:0.7em;
	}
	
	.header_content, .footer_content{width:90%; max-width:1200px; margin:auto;}

	.header_content .logo{float:left;  width:200px; padding:5px; padding-left:20px; box-sizing:border-box;}
	.header_content .logo img{height:50px; }
	
	.header_content .titre{margin:auto; float:left; width:calc(100% - 350px); line-height:50px; padding:5px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; text-align:center; box-sizing:border-box;}
	
	.header_content .deconnexion{float:right; border:1px solid #FFFFFF; color:#999999; background:#FFFFFF; border-radius:10px; width:150px; margin-top:10px; padding-left:40px; padding-right:10px; text-align:left; line-height:40px;  font-size:0.9em; box-sizing:border-box; overflow:hidden; white-space: nowrap; text-overflow:ellipsis; cursor:pointer; transition: all 0.5s ease 0s;}
	.header_content .deconnexion::before{display:block; position:absolute; margin-left:-30px; width:30px; line-height:40px; text-align:left;  content:'b'; font-size:20px; font-family:kodama;}
	.header_content .deconnexion:hover{color:#1c7fd5;}
		
	.footer .mentions_legales{float:right; text-align:center;}
	

	@media screen and (max-width:600px)
	{
		.header_content, .footer_content{width:100%;}
		.header_content .logo{padding-left:10px;}
		
		.footer {padding-bottom:20px;}
		.footer .mentions_legales{float:none; clear:both; margin-bottom:10px; display:block;}
		.header_content .titre{display:block; position: fixed; top:20px; left:0px; font-size:12px; width:100%;}
	}
	
/* *************************************** */
/* Page */
/* *************************************** */	
	.page{width:100%; text-align:center; padding-top:60px; background:#EEEEEE; box-sizing:border-box;}
	.zone_contenu{width:100%; max-width:1200px; text-align:left;  margin:auto; margin-bottom:0px; background:#FFFFFF; padding:20px; box-sizing:border-box;}
	.contenu{min-height:500px;}
	h1
	{
		margin:0px;
		margin-top:20px;
		text-align:right;
		font-size:2.7em;
		line-height:1em;
		
	}
	
	h2
	{
		margin:0px;
		margin-top:20px;
		margin-bottom:10px;
		text-align:left;
		font-size:2em;
		line-height:1em;
		color:#ffc140;
		border-bottom:1px solid #ffc140;
		
	}
	
	li{padding-bottom:20px;}
	
	.paragraphe{padding:20px; padding-top:0px;}
	
	.clear{clear:both; margin:0px; padding:0px; font-size:1px; line-height:1px;}
	
/* ***********************************************************	*/
/* zone login */
/* ***********************************************************	*/	
	.zone_login{padding:40px; border:1px solid #27509b; border-radius:20px; box-sizing:border-box; max-width:500px; margin:auto; margin-top:60px; }
	.login_content{padding:10px;}
	.login_content input{display:block; margin:auto; height:40px; line-height:40px; border:1px solid #CCCCCC; padding-left:10px; font-size:1.2em; width:100%; max-width:300px; box-sizing:border-box;}
	
	.message_login_erreur{display:block; padding-left:40px; color:#FF0000; font-size:1.1em; line-height:40px; margin:auto; margin-bottom:20px; box-sizing:border-box;}
	.message_login_erreur::before{display:block; position:absolute; margin-left:-40px; width:40px; line-height:40px; text-align:left;  content:'!'; font-size:30px; font-family:kodama;}
	
	.valider{display:block; width:90%; max-width:400px; margin:auto; border:0px; margin-top:20px; padding:10px; text-align:center; background:#1c7fd5; color:#FFFFFF; font-family: arial, helvetica, sans-serif; font-weight:normal; font-size:1.2em; text-transform:uppercase; cursor:pointer;}
	.valider:hover{background:#6bb0ec;}
	
	.zone_verif_file{width:100%; max-width:600px; margin:auto; padding:20px; padding-bottom:40px;}
	.zone_verif_file span{display:block; color:#808080; margin-top:40px;}
	.zone_verif_file strong{display:block;color:#1c7fd5;}
	
/* *************************************** */
/* Liste document */
/* *************************************** */
	.btn_back{display:block; width:60px; height:50px; float:left; cursor:pointer; color:#999999;}
	.btn_back::before{display:block; line-height:50px; width:100%; content:'d'; font-size:40px; font-family:kodama;}
	.btn_back:hover{color:#1c7fd5;}
	
	.titre_rep{font-size:1.6em; color:#1c7fd5; text-align:right; border-bottom:1px solid #1c7fd5; padding-top:20px;;}
	
	.zone_edit{opacity:0; width:30px; height:30px; margin-left:-15px; margin-top:-15px; position:absolute; background:#CCCCCC; color:#FFFFFF; border-radius:20px; transition: all 0.4s ease 0s; }
	.zone_edit::before{display:block; line-height:30px; width:30px; content:'E'; font-size:15px; font-family:kodama; }
	.zone_edit:hover{ background:#ffbf00;}
	
	.zone_hash{opacity:0; width:30px; height:30px; margin-left:-15px; margin-top:30px; position:absolute; background:#CCCCCC; color:#FFFFFF; border-radius:20px; transition: all 0.4s ease 0s; }
	.zone_hash::before{display:block; line-height:30px; width:30px; content:'0'; font-size:15px; font-family:kodama; }
	.zone_hash:hover{ background:#ffbf00;}
	
	
	.link_rep{width:20%; float:left; height:120px; text-align:center; padding:20px; box-sizing:border-box; cursor:pointer; color:#999999; }
	.link_rep span{display:block; border-bottom:1px solid #999999;}
	.link_rep span::before{display:block; line-height:60px; width:100%; content:'G'; font-size:60px; font-family:kodama;}
	.link_rep strong{font-size:0.8em; font-weight:normal; }
	
	.link_rep:hover{background:#FFFFFF; color:#1c7fd5;}
	.link_rep:hover span{border-color: #1c7fd5;}
	.link_rep:hover .zone_edit{opacity:1;}
	
	.zone_file{border-top:2px solid #1c7fd5;  border-bottom:2px solid #1c7fd5; margin-top:20px; padding:30px; background:#EEEEEE; }
	
	.zone_link_file_img{width:20%; float:left; height:220px; text-align:center; padding:20px; box-sizing:border-box; cursor:pointer; color:#666666; transition: all 0.4s ease 0s; }
	.zone_link_file_img span{display:block; height:140px; opacity:1; background-size:contain; background-repeat:no-repeat; background-position:center center; transition: all 0.4s ease 0s; }
	.zone_link_file_img span.type_file{}
	.zone_link_file_img span.type_file::before{display:block; line-height:140px; width:100%; content:'F'; font-size:100px; font-family:kodama;}
	.zone_link_file_img strong{font-weight:normal; display:block;font-size:0.8em;  border-top:1px solid #000000; margin-top:10px; }
	
	.zone_link_file_img:hover{color:#00d900; background:#FFFFFF;}
	.zone_link_file_img:hover span{ opacity:1;}
	.zone_link_file_img:hover strong{ border-color:#00d900;}
	.zone_link_file_img:hover .zone_edit{opacity:1;}
	.zone_link_file_img:hover .zone_hash{opacity:1;}
	
	.message_confirmation, .message_erreur{display:block; cursor:pointer; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:1000; box-sizing:border-box; background-color:rgba(0,0,0,0.8);  }
	.message_confirmation div, .message_erreur div{display:block; width:90%; width:400px; padding:20px; text-align:center; margin:auto; min-height:150px; margin-top:100px; border-radius:10px;  background:#FFFFFF; z-index:10; box-sizing:border-box;}
	.message_confirmation div::before, .message_erreur div::before{display:block; line-height:70px; width:100%; text-align:center; font-size:50px; font-family:kodama; }
	
	.message_confirmation div{color:#00d900;}
	.message_confirmation div::before{content:'I'; }
	
	.message_erreur div {color:#FF0000;}
	.message_erreur div::before{content:'b'; }
	
	.zone_verif_file{width:100%; max-width:600px; margin:auto; padding:20px; padding-bottom:40px;}
	.zone_verif_file span{display:block; color:#808080; margin-top:40px;}
	.zone_verif_file strong{display:block;color:#1c7fd5;}
	
	.btn_config{float:right; margin:30px; background:#FF0000; color:#FFFFFF; width:120px; font-size:14px; line-height:20px; text-align:center; padding:5px; border-radius:7px; cursor:pointer;}
	.zone_config{position:fixed; display:none; top:0px; left:0px; font-size:14px; }
	.zone_config.open{ display:block;}
	.zone_config_background{position:fixed; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.8); box-sizing:border-box;}
	.zone_config_content{position:fixed; top:150px; left:50%; margin-left:-200px; width:400px;  border:0px solid #999999; padding:20px; background:#FFFFFF; border-radius:10px; box-sizing:border-box;}
	.zone_config_titre{border-bottom:1px solid #1c7fd5; color:#1c7fd5; padding:5px; font-size:14px;}
	.zone_config_input{padding:10px; }
	.zone_config_input strong{display:block; width:100px; text-align:right; padding-right:10px; float:left;}
	.zone_config_input span{display:block; float:left; }
	.zone_config_btn{display:block; width:150px; line-height:30px; background:#1c7fd5; text-align:center; color:#FFFFFF; border-radius: 7px; margin:auto; cursor:pointer;}
	
	@media screen and (max-width:1000px)
	{
		.link_rep{width:25%;}
		.zone_link_file_img{width:25%;}
	}
	
	@media screen and (max-width:800px)
	{
		.link_rep{width:33%;}
		.zone_link_file_img{width:33%;}
	}
	
	@media screen and (max-width:600px)
	{
		.link_rep{width:50%;}
		.zone_link_file_img{width:50%;}
	}
	
	@media screen and (max-width:600px)
	{
		.link_rep{width:100%; float:none;}
		.zone_link_file_img{width:100%; float:none;}
	}
	
/* ***********************************************************	*/
/* Drop Zone et Upload File */
/* ***********************************************************	*/	
	.zone_add_rep{width:100%; padding:0px; transition: all 0.4s ease 0s; }
	.zone_add_rep span{display:block; width:210px; margin:auto; background:#1c7fd5; color:#FFFFFF; line-height:40px; text-align:left; padding-left:40px; border-radius:7px; cursor:pointer; box-sizing:border-box; transition: all 0.4s ease 0s;}
	.zone_add_rep span::before{position:absolute; display:block; line-height:40px; width:30px; margin-left:-30px; content:'+'; font-size:20px; text-align:left; font-family:kodama; }
	.zone_add_rep span:hover{background:#ffbf00;}

	.zone_update{width:100%; padding:0px; overflow:hidden; height:0px; transition: all 0.4s ease 0s; }
	.zone_update span{display:block; width:80%; max-width:300px; margin:auto; background:#1c7fd5; color:#FFFFFF; line-height:40px; text-align:center; border-radius:7px; cursor:pointer; box-sizing:border-box; transition: all 0.4s ease 0s;}
	.zone_update span:hover{background:#ffbf00;}
	.zone_update.actif{height:60px;  padding-bottom:20px;}
	
	
	.zone_upload{width:80%; margin:auto; margin-top:10px; margin-bottom:50px;  box-sizing:border-box;}

	.zone_upload_info{width:100%; margin-top:10px; margin-bottom:30px; box-sizing:border-box;}
	
	.zone_info_file{padding:10px; padding-left:50px; box-sizing:border-box; line-height:30px;}
	.zone_info_file strong{display:block; float:left; width:300px; font-size:0.8em; color:#1c7fd5; overflow:hidden; white-space: nowrap; overflow:hidden; text-overflow:ellipsis;}
	.zone_info_file progress{display:block; float:left; margin-left:20px; height:20px; margin-top:5px; }
	.zone_info_file span{display:block; float:left; margin-left:20px; color:#1c7fd5; }
	.zone_info_file span span{margin:0px; font-size:0.7em; color:#999999;}
	
	.zone_info_file.uploaded{padding-left:50px; }
	.zone_info_file.uploaded::before{display:block; position:absolute; line-height:40px; width:40px; margin-left:-40px;  font-size:20px; color:#00d900; content:'*'; text-align:center; font-family:kodama; }
	.zone_info_file.uploaded strong{color:#999999;}
	.zone_info_file.uploaded span{color:#999999;}
	
	.dropZone{width:100%; margin-top:10px; margin-bottom:50px;  border:2px dashed #CCCCCC; box-sizing:border-box;}
	.dropZone span{display:block; width:100%; padding:40px; text-align:center; color:#999999; box-sizing:border-box;}
	.dropZone.dargOver{background:#FFFFCC; border-color:#ffbf00;}
	

	
/* ***********************************************************	*/
/* Lightbox */
/* ***********************************************************	*/
	.lightbox{display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:1000; box-sizing:border-box; background-color:rgba(0,0,0,0.8);  }
	.lightbox_content{display:block; width:90%; max-width:500px;padding:20px;  margin:auto; min-height:300px; margin-top:100px; border-radius:10px;  background:#FFFFFF; z-index:10; box-sizing:border-box;}
	
	.zone_form{box-sizing:border-box; padding-top:20px;}
	.zone_visuel{float:left; height:120px; width:40%; margin:auto; border:1px solid #EEEEEE; background-size:contain; background-position:center center; background-repeat:no-repeat; box-sizing:border-box;}
	.zone_visuel.elemt_file::before{display:block; line-height:120px; width:100%; text-align:center; content:'F'; font-size:60px; font-family:kodama; color:#CCCCCC;}
	.zone_lib{float:left; width:60%; text-align:left; padding-left:20px; color:#999999; font-size:1.1em; line-height:40px; box-sizing:border-box;}
	.zone_input{float:left; width:60%; text-align:left; padding-left:20px; box-sizing:border-box; line-height:40px; }
	.zone_input input{display:block; line-height:20px; margin-top:5px; font-size:1.1em; color:#1c7fd5; border:1px solid #999999; border-radius:5px; padding:5px; width:100%;  box-sizing:border-box;}
	
	.btn_valider, .btn_supprimer{ width:150px; line-height:40px; margin-top:20px;  color:#FFFFFF; border-radius:5px; text-align:center; cursor:pointer; transition: all 0.4s ease 0s;  }
	.btn_valider{float:right;background:#1c7fd5; }
	.btn_valider:hover{background:#ffbf00;}
	
	.btn_supprimer{float:left; background:#CCCCCC;}
	.btn_supprimer:hover{background:#ff4000;}
	
	
/* ***********************************************************	*/
/* Page d'ERREUR */
/* ***********************************************************	*/
	.contenu_erreur
	{
		width:80%;
		margin:auto;
		max-width:900px;
	}

	.message_erreur_page 
	{
		margin-top:50px;
		padding:0px;
		min-height:200px;
	}
	.message_erreur_page img{float:left; width:30%; max-width:200px;}
	.message_erreur_page  h1
	{
		padding-top:20px;
		margin-bottom:10px;
		text-align:left;
		color:#FF0000;
		font-size:1.8em;
	}

	.message_erreur_page .text_erreur{color:#FF0000; font-size:1.2em;}	
	.message_erreur_page .text_erreur span{display:block;padding-top:20px; }