/* -------------------------------------------------------------------------- */
/*                                  GLOBAL                                    */
/* -------------------------------------------------------------------------- */

*
{
	box-sizing: border-box;
}

img 
{
    max-width: 100%;
    height: auto;
}

body,
html
{
	margin: 0;
	padding: 0;
	font-size: 100%;
	height:100%;
}

body
{
	font-size: 0.875em; /* 14pt */
	font-family: 'Open Sans', sans-serif;
}

html
{
	color: #1e4242;
	background-color: #FFDC63;
	background-image: url("/img/globales/background.png");
}

a
{
	color: inherit;
}

.texte a
{
	color: #557e84;
	font-weight: bold;
}

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

#menu .texte a
{
	color: #1e4242;
}

.txt_right { text-align: right; }
.txt_left { text-align: left; }
.txt_center { text-align: center; }
.float:after {content:" "; display: block; width: 100%;}
.fl-left { float: left; display:block; width:auto;}
.fl-right { float: right; display:block; width:auto;}
.clearfix:after { display: block; content: " "; clear:both; }

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

input, select, textarea
{
    -webkit-appearance: none;
	-webkit-border-radius:0; 
    border-radius:0;
}

/* Utiles */
/* ------ */

a.divLink
{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.notAList
{
	list-style-type:none;
	margin: 0;
	padding: 0;
}

.hidden
{
	position: absolute;
	left: -999999px;
}

@media screen and (min-width: 641px)
{
	.onlyMobile:not(.onlyTablet)
	{
		display: none !important;
	}
}

@media screen and (min-width: 1201px)
{
	.onlyTablet
	{
		display: none !important;
	}
}

@media screen and (max-width: 640px)
{
	.noMobile
	{
		display: none !important;
	}
}

@media screen and (min-width: 641px) and (max-width: 1200px)
{
	.noTablet
	{
		display: none !important;
	}
}

.accordeon_body
{
	display: none;
	height: 0;
}

.grisee
{
    -webkit-filter: grayscale(100%);
  	-moz-filter: grayscale(100%);
  	-ms-filter: grayscale(100%);
  	-o-filter: grayscale(100%);
  	filter: gray; /* IE 6-9 */
	filter: grayscale(100%);
  	
}

.centre
{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: auto;
	height: auto;
	pointer-events: none;
}

embed
{
	display: block;
	margin: auto;
}

p + embed
{
	margin-top: 15px;
	margin-bottom: 15px;
}

.clearFix
{
	clear: both;
}

/* Grille responsive */
/* ----------------- */

.flex-grid
{
	margin-top: 10px;
}

.flex-grid:after
{
	content: " ";
	display: block;
	clear: both;
}

.flex-grid .flex-grid-item
{
	width: 100%;
	padding: 2px 10px;
	float: left;
	position: relative;
}

@media screen and (min-width: 641px)
{
	.flex-grid
	{
		margin-top: 0;
	}

	.flex-grid .flex-grid-item
	{
		padding: 10px;
	}
	
	.flex-grid .flex-grid-item.col-2
	{
		width: 50%;
	}
	
	.flex-grid .flex-grid-item.col-3
	{
		width: 33%;
	}
	
	.flex-grid .flex-grid-item.col-4
	{
		width: 25%;
	}
	
	.flex-grid .flex-grid-item.col-5
	{
		width: 20%;
	}
	
	.imageSameHeight
	{
		position: relative;
	}
	
	.imageSameHeight img
	{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		max-height: 100%;
	}
}

@media screen and (max-width: 640px)
{
	.imageSameHeight
	{
		height: auto !important;
	}
}

/* -------------------------------------------------------------------------- */
/*                               TEXTES                                       */
/* -------------------------------------------------------------------------- */

/* Polices */
/* ------- */

@font-face {
    font-family: 'Colporteur';
    src: url('/css/webfonts/colporteur.eot');
    src: url('/css/webfonts/colporteur.eot?#iefix') format('embedded-opentype'), url('webfonts/colporteur.woff2') format('woff2'), url('webfonts/colporteur.woff') format('woff'), url('webfonts/colporteur.ttf') format('truetype');
}
/*
@font-face {
 font-family: 'OpenSans';
 font-style: normal;
  font-weight: 400;
 src: local('Open Sans Regular'), local('OpenSans-Regular'), url("/css/webfonts/OpenSans-Regular.eot") 
}
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
  font-weight: 400;
 src: local('Open Sans Regular'), local('OpenSans-Regular'), url("/css/webfonts/OpenSans-Regular.ttf") 
}

@font-face {
 font-family: 'OpenSans';
 font-style: italic;
  font-weight: 400;
 src: local('Open Sans Italic'), local('OpenSans-Italic'), url("/css/webfonts/OpenSans-Italic.eot")
}
@font-face {
 font-family: 'Open Sans';
 font-style: italic;
  font-weight: 400;
 src: local('Open Sans Italic'), local('OpenSans-Italic'), url("/css/webfonts/OpenSans-Italic.ttf") 
}

@font-face {
 font-family: 'OpenSans';
 font-style: normal;
  font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'), url("/css/webfonts/OpenSans-Bold.eot")
}
@font-face {
 font-family: 'Open Sans';
 font-style: normal;
  font-weight: 700;
 src: local('Open Sans Bold'), local('OpenSans-Bold'), url("/css/webfonts/OpenSans-Bold.ttf")
}
*/

/* Styles globaux */
/* -------------- */

.semibold
{
	font-weight: 600;
}

.bold
{
	font-weight: 700;
}

/* Titres */
/* ------ */

h1, h2
{
	font-family: "Colporteur";
}

h1
{
	font-size: 1.7em;
	text-align: center;
	margin-top: 0;
}

h2
{
	color: #557e84;
	font-size: 1.57em;	
	margin-top: 10px;
	text-align: center;
	width: 100%;
}

.fat
{
	font-size: 3em;
	margin-bottom: 25px;
	color: #557e84;
}

@media screen and (min-width: 641px)
{
	h1
	{
		font-size: 3.28em;
	}

	h2
	{
		margin-top: 50px;
		font-size: 2.5em;
		text-align: left;
	}
	
	.listeTopics .clearFix + h2,
	#resultats_listeAuteurs h2:first-of-type,
	#listeTopicsTitre
	{
		margin-top: 0;
	}
}

p
{
	margin: 0;
}

* + p
{
	margin-top: 10px;
}

a
{
	text-decoration: none;
	color: inherit;
}

.etiquette
{
	background-color: #3c365c;
	width: auto;
	margin: auto;
	color: #fefbcf;
	font-size: 0.764em;
	padding: 1px 5px;
	display: inline-block;
	margin-left: 50%;
	transform: translateX(-50%);
	position: relative;
	vertical-align: middle;
}


.etiquette:before,
.etiquette:after
{
	content: " ";
	display: block;
	height: 100%;
	width: 25px;
	position: absolute;
	top: 0;
	background-repeat: no-repeat;
	background-size: contain;
}

.etiquette:before
{
	background-image:url("/img/globales/etiquette_g.png");
	background-position: center right;
	left: -25px;
}

.etiquette:after
{
	background-image:url("/img/globales/etiquette_d.png");
	background-position: center left;
	right: -25px;
}

.etiquette img
{
	max-height: 1em;
	vertical-align: middle;
	margin-right: 3px;
}

/* Tableaux */
/* -------- */

table
{
	width: 100%;
	border-spacing: 0;
    border-collapse: collapse;
	margin-top: 10px;
	font-size: 1em;
}

th,td
{
	padding: 3px 5px;
	vertical-align: middle;
}

/* -------------------------------------------------------------------------- */
/*                               CHANGELOG                                    */
/* -------------------------------------------------------------------------- */

#changelog
{
	display: none;
}

@media screen and (min-width: 768px)
{
	#changelog
	{
		margin-top: 20px;
		display: block;		
		width: 100%;
		background-color: black;
		font-family: monospace;
		color: white;
		padding: 5px;
		z-index: 100;
	}

	.changelog_date
	{
		float: left;
		margin-right: 5px;
		color: #557e84;
	}

}

/* -------------------------------------------------------------------------- */
/*                                  PAGE                                      */
/* -------------------------------------------------------------------------- */

#page
{
	min-height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
}

#content
{
	width: 100%;
	padding: 10px;
	margin-top: 75px;
}

@media screen and (min-width: 1201px)
{
	#content
	{
		min-height: 100%;
		min-height: calc(100vh - 113px);
		width: calc(100% - 325px);
		margin-left: 325px;
		padding: 20px 60px;
		background-image: url("../img/globales/background.png");
		margin-top: 0;
	}
}


/* -------------------------------------------------------------------------- */
/*                             NOTIFICATIONS                                  */
/* -------------------------------------------------------------------------- */

.notification
{
	position: absolute;
	background-color: #fe6131;
	padding: 2px 4px;
	color: #fefbcf;
	border-radius: 3px;
	font-size: 0.8em;
	font-weight: bold;
	display: none;
}

.notification.secondaire
{
	background-color: #fefbcf;
	color: #557e84;
	display: block;
}

.navigation_pages .notification
{
	display: inline-block;
	font-family: "Open Sans";
	font-size: 0.6em;
	padding: 3px 4px;
	line-height: 1;
	margin-left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.notification.visible
{
	display: block;
}

/* -------------------------------------------------------------------------- */
/*                                  PAGE BLANCHE                              */
/* -------------------------------------------------------------------------- */

/*.page_narrow
{
	max-width: 800px;
	width: 100%;
	margin: auto;
}*/

.bloc_blanc,
.bloc_blanc_container
{
	width: 100%;
	max-width: 800px;
	margin: auto;	
}

.bloc_blanc.fullwidth
{
	max-width: none;
}

.bloc_blanc,
.bloc_blanc_container,
.floating_bloc_blanc
{
	margin-bottom: 25px;
	position: relative;
}

.bloc_blanc,
.floating_bloc_blanc
{
	background-color: white;
	padding: 10px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
	
}

.bloc_blanc_container:after
{
	display: block;
	content: " ";
	clear: both;
}

@media screen and (min-width: 641px)
{
	
	.bloc_blanc,
	.floating_bloc_blanc
	{
		padding: 25px;
		
	}
	
	.bloc_blanc
	{
		padding: 50px 25px;
	}
	
	.bloc_blanc.smallpadding
	{
		padding: 25px;
	}
	
	
}

.bloc_blanc.nopadding
{
	padding: 0;
}


.bloc_blanc h2
{
	margin-bottom: 20px;
	margin-top: 10px;
	font-size: 2em;
	font-family: "Open Sans";
}
@media screen and (max-width: 640px)
{
	.bloc_blanc h2
	{
		text-align: left;
		font-size: 1.5em;
	}
}
.presseDate
{
	font-size: 0.9em;
	font-style: italic;
	margin-top: -18px;
	margin-bottom: 15px;
}

.bloc_blanc a,
.bloc_blanc.link h2
{
	/*color: #ff9c5f;
	font-weight: bold;*/
	color: #50a7b4;
	font-weight: normal;
}

.bloc_blanc a:hover,
.bloc_blanc.link:hover h2,
.bloc_blanc.link:hover a
{
	/*text-decoration: underline;*/
	color: #ff9c5f;
	text-decoration: none;
}

.bloc_blanc iframe
{
	width: 100%;
	display: block;
}

.floating_bloc_blanc h3
{
	margin-top: 0;
}

/* Formulaires sur fond blanc */
/* -------------------------- */

.bloc_blanc input[type=text],
.bloc_blanc input[type=password],
.bloc_blanc input[type=email],
.bloc_blanc input[type=file],
.bloc_blanc textarea
{
	/*background-color: #d0efee;*/
	display: block;
	font-size: 1.1em;
	padding: 0;
	border-bottom: 1px solid white;
	padding: 3px;
	padding-right: 25px;
	color: #1e4242;
	
	-webkit-transition: background-color .2s linear;
	-moz-transition: background-color .2s linear;
	-ms-transition: background-color .2s linear;
	-o-transition: background-color .2s linear;
	transition: background-color .2s linear;
}

.emptyAtFirst [class*='bloc_blanc'] input[type=text],
.emptyAtFirst [class*='bloc_blanc'] input[type=password],
.emptyAtFirst [class*='bloc_blanc'] input[type=email],
.emptyAtFirst [class*='bloc_blanc'] textarea,
.emptyAtFirst [class*='bloc_blanc'] .select,
.emptyAtFirst [class*='bloc_blanc'] .faux_input,
[class*='bloc_blanc'] .emptyAtFirst input[type=text],
[class*='bloc_blanc'] .emptyAtFirst input[type=password],
[class*='bloc_blanc'] .emptyAtFirst input[type=email],
[class*='bloc_blanc'] .emptyAtFirst textarea,
[class*='bloc_blanc'] .emptyAtFirst .select,
[class*='bloc_blanc'] .emptyAtFirst .faux_input
{
	border: 1px solid #70a6ae;
	padding: 4px;
	margin-top: 5px;
}

.emptyAtFirst [class*='bloc_blanc'] hr,
[class*='bloc_blanc'] .emptyAtFirst hr
{
	width: calc(100% + 50px);
	margin-left: -25px;
	margin-top: 30px;
	margin-bottom: 30px;
	color: #e2dbc2;
	background-color: #e2dbc2;
}

.bloc_blanc select,
.bloc_blanc option
{
	color: #1e4242;
	padding-left: 0;
}


.bloc_blanc input:not(:disabled)
{
	cursor: pointer;
}

.bloc_blanc input[type=text]:not(:disabled):focus,
.bloc_blanc input[type=password]:not(:disabled):focus,
.bloc_blanc input[type=email]:not(:disabled):focus,
.bloc_blanc textarea:not(:disabled):focus
{
	background-color: #98d5d4;
}

.bloc_blanc input[type=text]:focus:hover,
.bloc_blanc input[type=password]:focus:hover,
.bloc_blanc input[type=email]:focus:hover,
.bloc_blanc textarea:focus:hover
{
	color: #1e4242;
}

.mesTopics .faux_input
{
	border-bottom: 1px solid white;
}

.bloc_blanc input[type=text]:hover,
.bloc_blanc input[type=password]:hover,
.bloc_blanc input[type=email]:hover,
.bloc_blanc textarea:hover,
.mesTopics .faux_input:hover
{
	background-image: url("/img/globales/icon_edit.png");
	background-size: 20px auto;
	background-repeat: no-repeat;
	background-position: right top;
	
	color: #557e84;
	border-bottom: 1px solid #c1d9dc;
}

.bloc_blanc input[type=text]:focus:hover,
.bloc_blanc input[type=password]:focus:hover,
.bloc_blanc input[type=email]:focus:hover,
.bloc_blanc textarea:focus:hover,
.bloc_blanc input[type=text]:disabled:hover,
.bloc_blanc input[type=password]:disabled:hover,
.bloc_blanc input[type=email]:focus:hover,
.bloc_blanc textarea:disabled:hover
{
	background-image: none;
	border-color: white;
	color: #1e4242;
}


.bloc_blanc input[type=text]:disabled,
.bloc_blanc input[type=password]:disabled,
.bloc_blanc input[type=email]:disabled,
.bloc_blanc textarea:disabled
{
	opacity: 1;
	color: #1e4242;
}

.bloc_blanc form:after
{
	display: block;
	content: " ";
	clear: both;
}

[class*='bloc_blanc'] form label,
form [class*='bloc_blanc'] label
{
	font-size: 0.75em;
	background-color: transparent;
	padding: 0 3px;
	font-weight: bold;
}

.bloc_blanc form label.nonModifiable:after,
form .bloc_blanc label.nonModifiable:after
{
	color: #dd3817;
	content: " (non modifiable)";
}

.bloc_blanc form label .fa,
form .bloc_blanc  label .fa
{
	font-size: 1.4em;	
	position: relative;
}

form .requis label:after
{
	content: "*";
	color: red;
}

.bloc_blanc .smallInfos
{
	font-size: 0.8em;
	color: #645f59;
	font-style: italic;
	margin: auto;
}

.bloc_blanc p + .input-wrapper
{
	margin-top: 15px;
}

.modale :-webkit-input-placeholder, .bloc_blanc :-webkit-input-placeholder 	{ opacity:0.2; font-style:italic; }
.modale ::-moz-placeholder, 			.bloc_blanc ::-moz-placeholder 			{ opacity:0.2; font-style:italic; } /* firefox 19+ */
.modale :-ms-input-placeholder,		.bloc_blanc :-ms-input-placeholder 		{ opacity:0.2; font-style:italic;  } /* ie */
.modale input:-moz-placeholder, 		.bloc_blanc input:-moz-placeholder 		{ opacity:0.2; font-style:italic; }

.bloc_blanc input[type=checkbox] + label,
.bloc_blanc input[type=radio] + label
{
	font-size: 1.1em;
	font-weight: normal;
	cursor: pointer;
	padding-left: 5px;
	margin-top: 5px;
}

.bloc_blanc input[type=checkbox] + label:hover,
.bloc_blanc input[type=radio] + label:hover
{
	color: #557e84;
}

@media screen and (min-width: 641px)
{
	.inline-input-wrappers:after
	{
		clear:both;
		content: " ";
		display: block;
	}

	.inline-input-wrappers .input-wrapper
	{
		width: 32%;
		float: left;
		margin-right: 2%;
	}

	.inline-input-wrappers .input-wrapper:nth-child(3n)
	{
		margin-right: 0;
	}
}

.boutonJaune.small
{
	font-size: 0.8em;
	width: auto;
	padding: 6px 10px;
	color: #a78f39;
	margin-top: 10px;
	margin-bottom: -25px;
	display: inline-block;
	position: relative;
}



@media screen and (min-width: 641px)
{
	/*.boutonJaune.small
	{
		float: right;
	}*/
	
	.boutonJaune.small:not(:last-child)
	{
		margin-right: 5px;
	}
}

/* Onglets */
/* ------- */

@media screen and (max-width: 640px)
{
	.breadcrums 
	{
		display: none;
	}
	
}

@media screen and (min-width: 641px)
{
	.breadcrums 
	{
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
		text-align: justify;
		height: 40px;
		overflow: hidden;
		display: flex;
		justify-content: space-around;
		padding-left: 0 !important;
	}

	.breadcrum
	{
		padding: 3px 10px;
		line-height: 32px;
		height: 40px;
		flex-grow: 1;
		text-align: center;
		position: relative;
		background-color: #557e84;
		padding-left: 25px;
		color: #83bcbb;
		font-family: "Colporteur";
		font-size: 18px;
	}

	.breadcrum.actif
	{
		background-color: #557e84;
		color: #fefbcf;
	}

	.breadcrum:not(.actif)
	{
		cursor: pointer;
	}

	.breadcrum:not(.actif):hover
	{
		background-color: #6a9ba2;
		color: #fefbcf;
		
	}

	.breadcrum:not(.actif):hover:after
	{
		border-left-color: #6a9ba2;
	}

	.breadcrum::after
	{ 
	  content: " "; 
	  display: block; 
	  width: 0; 
	  height: 0;
	  border-top: 25px solid transparent; /* Go big on the size, and let overflow hide */
	  border-bottom: 25px solid transparent;
	  border-left: 16px solid #557e84;
	  position: absolute;
	  top: 50%;
	  margin-top: -25px; 
	  left: 100%;
	  z-index: 2;
	}

	.breadcrum::before
	{ 
	  content: " "; 
	  display: block; 
	  width: 0; 
	  height: 0;
	  border-top: 25px solid transparent;       
	  border-bottom: 25px solid transparent;
	  border-left: 16px solid #83bcbb;
	  position: absolute;
	  top: 50%;
	  margin-top: -25px; 
	  margin-left: 2px;
	  left: 100%;
	  z-index: 1;
	}

	.breadcrum:last-child:before,
	.breadcrum:last-child:after
	{
		content: none;
	}

	.breadcrum:first-child
	{
		padding-left: 12px;
	}

	.breadcrum:first-child::after
	{
		border-left-color: #557e84;
	}

	.step
	{
		display: none;
	}

	.step.actif
	{
		display: block;
	}
}

.creerProjet .bloc_blanc.step
{
	padding-bottom: 25px;
}

@media screen and (min-width: 641px)
{
	.creerProjet .bloc_blanc.step
	{
		padding-bottom: 35px;
	}
}

.boutonJaune.precedent,
.boutonJaune.suivant
{
	background-color: transparent;
	border: 1px solid #557e84;
	color: #557e84;
}

.boutonJaune.precedent:hover,
.boutonJaune.suivant:hover
{
	color: #1e4242;
	border-color: #1e4242;
	background-color: transparent;
}

.boutonJaune.precedent
{
	float: left;
}

.precedent .fa
{
	margin-right: 5px;
}

.suivant
{
	float: right;
}

.suivant .fa
{
	margin-left: 5px;
}

.boutonJaune.precedent .fa,
.boutonJaune.suivant .fa
{
	font-size: 1.4em;
	vertical-align: middle;
}



/* Arborescence dans un formulaire */
/* ------------------------------- */

*[data-opener]
{
	display: none;
	margin-top: 50px;
}

/* Alerte */
/* ------ */

.bloc_blanc.alerte
{
	background-color: #fefbcf;
	padding-left: 70px;
	color: #557e84;
}

.bloc_blanc.alerte.ok,
.bloc_blanc.alerte.ok .fa:before
{
	color: #5d9e23;
	background-color: #d5eaa2;
}

.bloc_blanc.alerte p:first-of-type
{
	margin-top: 0;
}

.bloc_blanc.alerte .fa
{
	display: block;
	height: 30px;
	width: 30px;
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY(-50%);
}

.bloc_blanc.alerte .fa:before
{
	color: #557e84;
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 30px;
	transform: translateX(-50%) translateY(-50%);
}

.bloc_blanc.alerte a:after
{
	content: " \f101";
	font-family: "FontAwesome";
}

.bloc_blanc.alerte ul
{
	padding-left: 15px;
	margin: 0;
}

/* -------------------------------------------------------------------------- */
/*                                  FOOTER                                    */
/* -------------------------------------------------------------------------- */

footer
{
	background-color: #3c365c;
	color: #f8f8e0;
	text-align: center;
	margin-top: calc(25vw + 25px);
	padding: 10px;
	padding-top: calc(25vw + 15px);
	padding-bottom: 15px;
	width: 100%;
	font-size: 1.1em;
	position: relative;
}

#footer_lemon
{
	background-image: url("/img/globales/footer_citron.png");
	width: 50vw;
	height: 50vw;
	background-size: contain;
	top: -25vw;
	left: calc(50% - 25vw);	
	position: absolute;
}

footer a
{
	color: #ffdc63;
	font-weight: bold;
	
	-webkit-transition: color .3s linear;
	-moz-transition: color .3s linear;
	-ms-transition: color .3s linear;
	-o-transition: color .3s linear;
	transition: color .3s linear;
}

footer a:hover
{
	color: #ff9c5f;
}

#footer_logo
{
	width: 170px;
	height: auto;
}

footer .credits
{
	margin-top: 30px;
	font-size: 0.8em;
	color: #846d86;
}

footer .credits a
{
	/*font-size: 1.176em;*/
}

footer .credits .fa
{
	margin: 0 7px;
}

footer ul.notAList
{
	margin-top: 20px;
}

footer li
{
	
	font-size: 0.85em;
	text-transform: uppercase;
	padding: 5px 0;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
}

footer li a
{
	color: #ff9c5f;
}

footer li a:hover
{
	color: #ffdc63;
}

@media screen and (min-width: 641px)
{
	footer
	{
		padding: 0;
		padding-bottom: 30px;
		padding-top: 148px;
		margin-top: 143px;
	}
	
	#footer_lemon
	{
		width: 226px;
		height: 226px;
		left: calc(50% - 113px);
		top: -118px;
	}
	
	#footer_logo
	{
		width: auto;
	}
	
	footer ul.notAList
	{
		margin-top: 40px;
		padding: 0 20px;
	}
	
	footer li
	{
		display: inline-block;
		border-right: 1px solid #7b74a2;
		padding: 0 10px;
	}
	
	footer li:last-child
	{
		border-right: 0;
	}
	
}

@media screen and (min-width: 1201px)
{
	footer
	{
		width: calc(100% - 300px);
		margin-left: 300px;
	}
}

/* -------------------------------------------------------------------------- */
/*                                  MENU                                      */
/* -------------------------------------------------------------------------- */


#menu,
#menu_wrapper
{
	/*display: none;*/
	width: 100vw;
	z-index: 101;	
	top: 0;
}

#menu
{
	background-color: #557e84;
	color: #98d5d4;
	position: relative;
	min-height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	height: calc(100vh - 75px);
}

#menu_wrapper
{
	overflow: hidden;
	position: fixed;
	margin-top: 75px;
	left: -100vw;
}


#logo,
#menu .monCompte,
#menu .moderation
{
	display: none;
}

#navigation
{
	display: none;
}

@media screen and (max-width: 1200px)
{
	#menu_wrapper,
	#menu
	{
		max-width: 325px;
		min-height: calc(100vh - 35px);
	}
	
	#menu_wrapper
	{
		margin-top: 40px;
	}
}

@media screen and (min-width: 1201px)
{
	#menu
	{
		width: 325px;
		padding: 20px 0;
		min-height: 100%;
		left: 0;
	}
		
	#menu_wrapper
	{
		width: 345px;
		height: 100vh;
		margin: auto;
		left:0;		
	}
	
	#logo
	{
		display: block;
		width: 300px;
		height: 60px;
		max-width: 100%;
		max-width: calc(100% - 80px);
		background-image: url("/img/globales/logo_forum_dessine.png");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		margin: auto;
		margin-bottom: 10px;
		position: relative;
		z-index: 0;
	}
	
	#menu .monCompte,
	#menu .moderation
	{
		display: block;
		position: absolute;
		top: 0;
		background-size: 44px;
		width: 34px;
		height: 34px;
		font-size: 22px;
		cursor: pointer;
	}
	
	#menu .monCompte span,
	#menu .moderation span
	{
		top: 40%;
		font-family: "Colporteur";
		color: transparent;
	}
	
	#menu .monCompte,
	#menu .moderation,
	#menu .monCompte:after,
	#menu .moderation:after
	{
		-webkit-transition: all .15s linear;
		-moz-transition: all .15s linear;
		-ms-transition: all .15s linear;
		-o-transition: all .15s linear;
		transition: all .15s linear;
	}
	
	#menu .monCompte
	{
		left: 0;
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
		background-repeat: no-repeat;
	}
	
	#menu .moderation
	{
		right: 0;
		background-image: url("/img/globales/ciseaux.png"), url("/img/globales/background.png");
		background-position: top right;
	}
	
	#menu .monCompte:after,
	#menu .moderation:after
	{
		content: " ";
		display: block;
		width: 0;
		height: 0;
		border-style: solid;
		bottom: 0;
		position: absolute;
	}
	
	#menu .monCompte:after
	{
		border-width: 0 0 34px 34px;
		border-color: transparent transparent #6c9399 transparent;
		right:0;
	}
	
	#menu .moderation:after
	{
		border-width: 34px 0 0 34px;
		border-color: transparent transparent transparent #6c9399;
		left:0;
	}
	
	#menu .monCompte:hover,
	#menu .moderation:hover
	{
		width: 44px;
		height: 44px;
	}
	
	#menu .monCompte:hover:after
	{
		border-width: 0 0 44px 44px;
	}
	
	#menu .moderation:hover:after
	{
		border-width: 44px 0 0 44px;
	}
	
	/* Bouton connexion */
	
	#menu .monCompte.ferme
	{
		box-shadow: none;
		left: 10px;
		top: 10px;
		border-radius: 34px;
		border: 1px solid #98d5d4; 
	}
	
	#menu .monCompte.ferme:hover
	{
		width: 34px;
		height: 34px;
		color: #ccefee;
		border-color: #ccefee;
	}
	
	#menu .monCompte.ferme:after
	{
		content: none;
	}
	
	/* Tooltip */
	
	#menu .monCompte .tooltip:before
	{
		top: -8px;
		right: auto;
		left: 7px;
		transform: none;
	}
	
	#menu .monCompte .tooltip
	{
		margin-left: 10px;
		margin-top: -5px;
	}
	
	/* Notification */
	
	#menu .notification.compte,
	#menu .notification.posts_en_attente
	{
		position: absolute;
		top: 6px;
		width: 22px;
		height: 22px;
		border-radius: 20px;
		text-align: center;
		line-height: 20px;
		font-size: 12px;
		cursor: pointer;
		z-index: 3;
	}
	
	#menu .notification.compte
	{
		left: 45px;
	}
	
	#menu .notification.compte.secondaire
	{
		/*color: #fe6131;*/
		background-color: #98d5d4;
	}
	
	#menu .notification.compte.secondaire:before
	{
		border-color: transparent #98d5d4 transparent transparent;
	}
	
	#menu .notification.posts_en_attente
	{
		right: 45px;
	}
	
	#menu .notification.compte:before,
	#menu .notification.posts_en_attente:before
	{
		content: " ";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		top: 50%;
		position: absolute;
	}
	
	#menu .notification.compte:before
	{
		border-width: 4px 10px 4px 0;
		border-color: transparent #fe6131 transparent transparent;
		left: -8px;
		transform: translateY(-10%) rotate(-14deg);
	}
	
	#menu .notification.posts_en_attente:before
	{
		border-width: 4px 10px 4px 10px;
		border-color: transparent transparent transparent #fe6131;
		right: -18px;		
		transform: translateY(-10%) rotate(14deg);
	}
	
	#navigation
	{
		padding: 0 20px;
		padding-bottom: 20px;
		
		/* Non flexbox */
		display: block;
		
		/* Flexbox */
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: flex;
		flex-wrap: nowrap;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
	}
	
	#navigation li
	{
		font-family: "Colporteur";
		font-size: 1.286em;	
		padding-top: 20px;
		
		/* Non flexbox */
		width: 25%;
		float: left;
		text-align: center;
		
		/* Flexbox */
		width: auto;
	}

	#navigation li.actif
	{
		color: #fefbcf;
		background-image: url("/img/globales/menu_actif.png");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: auto 22px;
	}

	#navigation li
	{
		color: #83bcbb;
		text-decoration: none;
		position: relative;
		
		-webkit-transition: color .3s linear;
		-moz-transition: color .3s linear;
		-ms-transition: color .3s linear;
		-o-transition: color .3s linear;
		transition: color .3s linear;
	}

	#navigation li:hover
	{
		color: #fefbcf;
	}
}

#liensMenu
{
    padding-bottom: 20px;
}


#menu th
{
	border-bottom: 2px solid #1e4242;
}

#menu tr:nth-child(even)
{
	background-color: rgba(152,213,212,0.5);
}

#menu hr
{
	color: #1e4242;
	background-color: #1e4242;
	height: 1px;
	border: 0;
	margin: 10px 0;
}

#menu h3
{
	margin: 10px 0;
}


/* Infos topic */
/* ----------- */

#imageMenu
{
	width: 100%;
	height: 150px;
	background-color: #3c365c;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 120px;
	text-align: center;
	line-height: 120px;
	font-family: "Colporteur";
	position: relative;
}

#imageMenu.generique
{
	background-size: auto;
}

#titreMenu
{
	background-color: #ff9c5f;
	color: #fefbcf;
	font-size: 1.7em;
	font-family: "Colporteur";
	padding: 5px 20px 10px 20px;
	text-align: center;
	margin-bottom: 20px;
}

.soustitre
{
	font-family: 'Open Sans', sans-serif;
	font-size: 0.529em;
	display: block;
	font-style: italic;
}

#resumeMenu
{
	padding: 20px;
	padding-top: 0;
	text-align: center;
}

#resumeMenu .nb_posts:after
{
	content: " ";
	display: block;
	height: 10px;
}

/* Liens vers les sites, blogs, etc */
/* -------------------------------- */

#resumeMenu .btns_link
{
	margin-top: 10px;
	text-align: center;
}

#resumeMenu .btns_link:after
{
	content: " ";
	display: block;
	clear: both;
}

#resumeMenu .btn_link
{
	width: 30px;
	height: 30px;
	border-radius: 30px;
	display: inline-block;
	padding: 0;
	position: relative;
	margin-right: 10px;
	margin-bottom: 0;
}

#resumeMenu .btn_link:last-child
{
	margin-right: 0;
}

#resumeMenu .btn_link .fa,
#resumeMenu .btn_link img
{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

#resumeMenu .btn_link img
{
	max-width: 14px;
	height: auto;
}

#resumeMenu .btns_link .boutonJaune:not(.btn_link)
{
	width: 100%;
	margin-top: 15px;
	display: block;
}

.infosMenu
{
	font-size: 0.786em;
	margin-bottom: 10px;
}

.infosMenu i:not(:first-child),
.infosMenu .auteurTopic
{
	margin-left: 10px;
}

.infosMenu a:hover
{
	color: #fefbcf;
}

.infosMenu .auteurTopic
{
	height: 1.2em;
	width: 1.2em;
	border-radius: 1.2em;
	background-size: cover;
	background-position: center;
	display: inline-block;
	vertical-align: middle;
}

/* Favori */
/* ------ */

#imageMenu .favori
{
	width: 35px;
	height: 35px;
	position: absolute;
	top: 5px;
	right: 5px;
	background-image: url("/img/forum/favori.png");
	background-position: top center;
	background-repeat: no-repeat;
	cursor: pointer;
	opacity: 0.5;
}

#imageMenu .favori:hover
{
	opacity: 1;
}

#imageMenu .favori.mesFavoris
{
	background-position: center -35px;
	opacity: 1;
}

#imageMenu .favori.mesFavoris:hover
{
	background-position: center -70px;
}

/* Liens */
/* ----- */

.boutonJaune
{
	width: 100%;
	background-color: #ffdc63;
	padding: 10px 20px;
	color: #936d1b;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 10px;	
	cursor: pointer;
	-webkit-transition: background-color 0.3s; /* Safari */
    transition: background-color 0.3s;
	border: none;
	position: relative;
}

.boutonJaune:hover
{
	background-color: #ffc600;
}

.boutonJaune:disabled
{
	background-color: #7db4b3;
	color: #689796;
	cursor: not-allowed;
}

.boutonJaune.bleu
{
	background-color: #557e84;
	color: #98d5d4;
}

.boutonJaune.bleu:hover
{
	background-color: #3f656b;
}

.boutonJaune.vert
{
	background-color: #76b51b;
	color: #cef19c;
}

.boutonJaune.vert:hover
{
	background-color: #65981a;
}

.boutonJaune.rouge
{
	background-color: #dd3817;
	color: #f7cbbc;
}

.boutonJaune.rouge:hover
{
	background-color: #c43316;
}

.boutonJaune.disabled
{
	cursor: default;
	background-color: #d7e4e4;
	color: #8db3b3;
}

.boutonJaune.sauvegarder.valide
{
	background-color: #99c954;
	color: #59782d;
}

.boutonJaune.uploading
{
	color: transparent;
	background-image: url("/img/globales/spinner.gif");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 70%;
	pointer-events: none;
}

.lienMenu
{
	margin-left: 20px;
	margin-right: 20px;
	width: calc(100% - 40px);
	padding-top: 7px;
	padding-bottom: 7px;
	text-transform: uppercase;
	font-weight: 600;
	position: relative;
	cursor: pointer;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}

.lienMenu:not(.boutonJaune)
{
	padding-left: 30px;
	-webkit-transition: color 0.3s; /* Safari */
    transition: color 0.3s;
}

.lienMenu:not(.boutonJaune):hover
{
	color: #fefbcf;
}

.lienMenu:not(.boutonJaune) .divLink:hover:after
{
	content: "\f101";
	font-family: FontAwesome;
	font-weight: 400;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
}

.lienMenu.actif:not(.boutonJaune) .divLink:hover:after
{
	content: "\f021";	
	-webkit-animation: rotate360 1s infinitelinear;
    animation: rotate360 1s infinite linear;
	margin-top: -8px;
}

.lienMenu.actif
{
	color: #fefbcf;
	cursor: default;
}

@media screen and (min-width: 641px)
{
	.lienMenu.actif:before
	{
		display: block;
		content: " ";
		border-style: solid;
		border-width: 10px 12px 10px 0;
		border-color: transparent #557e84 transparent transparent;
		position: absolute;
		left: -30px;
	}
}

/*.lienMenu.actif a
{
	display: none;
}*/

.lienMenu .notification
{
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}

.lienMenu:not(.actif):hover .notification
{
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.menuIcon
{
	display: block;
	position: absolute;
	left: 0;
	top: 20px;
	transform: translateY(-50%);
	height: 20px;
	width: 20px;
	text-align: center;
	font-size: 1.2em;
}

.menuIcon.monCompte
{
	
	background-color: white;
	border-radius: 24px;
}

#liensMenu .accordeon_body,
#liensMenu .sommaire_body
{
	background-color: #83bcbb;
	background-image: url("/img/globales/ombre_haut.png"), url("/img/globales/ombre_bas.png");
	background-repeat: repeat-x;
	background-position: left top, left bottom;
	color: #1e4242;
	font-size: 0.926em;
	position: relative;
}

#liensMenu .accordeon_body
{
	display: none;
	height: 0;
}

#liensMenu .accordeon_body > div,
#liensMenu .sommaire_body > div
{
	padding: 20px;
}

#liensMenu .accordeon_body:before,
#liensMenu .sommaire_body:before
{
    content: " ";
	display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10.4px 6px 0 6px;
    border-color: #557e84 transparent transparent transparent;
	position: absolute;
	top: 0;
	right: 12px;
}

.accordeon_body.actif
{
	display: block;
	height: auto;
}

#liensMenu .avatar
{
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: #fefbcf;
	border-radius: 25px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	font-family: "Colporteur";
	line-height: 16px;
}

/* Spécial modos */
/* ------------- */

.modos,
.blogsDeLubiens
{
	width: 100%;
	position: relative;
}

.modos img,
.blogsDeLubiens img
{
	width: 40px;
	height: 40px;
	border-radius: 40px;
	display: block;
}

.modos td:first-child,
.blogsDeLubiens td:first-child
{
	width: 50px;
	vertical-align: top;
}

.modos td:nth-child(2),
.blogsDeLubiens td:nth-child(2)
{
	font-size: 0.9em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 200px;
}

.blogsDeLubiens td:nth-child(2)
{
	/*max-width: 500px;*/
	/*max-width: calc(100vw - 90px);*/
}

.modos td:nth-child(2) b,
.blogsDeLubiens td:nth-child(2) b
{
	font-size: 1.11em;
}

.modos tr
{
	cursor: pointer;
}

.modos tr:hover
{
	background-color: #98d5d4 !important;
}

.blogsDeLubiens tr:hover
{
	background-color: rgba(152, 213, 212, 0.5) !important;
}

.modos td,
.blogsDeLubiens td
{
	position: relative;
}

.blogsDeLubiens td
{
	padding-bottom: 15px;
}

.ulule_link b
{
	color: #3c365c;
}

.ulule_link b:before
{
	font-family: "FontAwesome";
	content: "\f08d";
	margin-right: 5px;
}

.ulule_link span
{
	opacity: 0.5;
}

/* Spécial logs (sur fond blanc) */
/* ----------------------------- */

.logs
{
	border-collapse: separate;
	width: 100%;
}

.logs .dejaLu
{
	opacity: 0.5;
}

.logs .dejaLu:hover
{
	opacity: 1;
}

.logs img
{
	width: 25px;
	height: 25px;
	border-radius: 25px;
	display: block;
}

.logs td
{
	font-size: 0.9em;
	border-bottom: 1px solid #557e84;
	position: relative;
	cursor: default;
	vertical-align: middle;
}

.dashboard .logs td
{
	font-size: 0.8em;
}

#content.gestion.logs tr.moderation
{
	background-color: #fefbcf;
}


.logs tr:last-child td,
.messages_overview tr:last-child td
{
	border-bottom: none;
}

.logs td:first-child
{
	text-align: center;
	vertical-align: middle;
	/*color: white;*/
}


.fa-suppr
{
	color: #dd3817;
}

.logs .valide td:first-child .fa,
.logs .normal td:first-child  .fa,
.logs .erreur td:first-child  .fa
{
	color: white;
}

#content.gestion.logs .valide.moderation td:first-child  .fa,
#content.gestion.logs .normal.moderation td:first-child  .fa
{
	color: #fefbcf;
}

.logs .valide td:first-child .fa-circle
{
	color: #41af58 !important;
}

.logs .erreur td:first-child .fa-circle
{
	color: #dd3817 !important;
}

.logs .normal td:first-child .fa-circle
{
	color: #557e84 !important;
}

.logs td:nth-child(3)
{
	text-align: right;
	font-style: italic;
	color: #645f59;
	font-size: 0.75em;
}

.logs tr:hover
{
	background-color: #f1f6ff !important;
}

.logs tr.lien:hover
{
	background-color: #f1f6ff !important;
}

*[class*='invisible']
{
	display: none;
}

#marquerLu,
#marquerTopicLu
{
	font-size: 0.85em;
	cursor: pointer;
}

#marquerLu
{
	position: absolute;
	top: 15px;
	right: 15px;
}

#marquerLu:hover,
#marquerTopicLu:hover
{
	text-decoration: underline;
}

#marquerTopicLu
{
	color: #557e84;	
	position: relative;
	
}

@media screen and (min-width: 641px)
{
	#marquerTopicLu
	{
		margin-top: -45px;
		float: right;
	}
}

@media screen and (max-width: 640px)
{
	#marquerTopicLu
	{
		text-align: right;
		margin-bottom: 10px;
	}
}

#marquerTopicLu:before
{
	content: "Tout marquer comme lu";
}

/* Filtres */
/* ------- */

.filtres
{
	margin-bottom: 30px;
	overflow: hidden;
	width: calc(100% + 50px);
	margin-left: -25px;
	padding: 0 25px;
}

@media screen and (min-width: 641px)
{
	.filtres
	{
		margin-top: -35px;
	}
}

.filtres .tri
{
	border: 1px solid transparent;
	border-radius: 4px;
	font-weight: normal;
	padding: 2px 4px;
	margin-left: 2px;
}

.filtres .tri:hover:not(.actif)
{
	border: 1px solid #557e84;
	background-color: transparent;
}

.filtres .tri.actif
{
	border: 1px solid #557e84;
	color: white;
	background-color: #557e84;
}

.filtres .tri.actif.rouge
{
	background-color: #dd3817;
	border-color: #dd3817;
}

.filtres .tri.actif.vert
{
	background-color: #41af58;
	border-color: #41af58;
}

.filtres .criteres_tri
{
	margin-bottom: 5px;
}

.filtres .options_tri + *
{
	clear: none;
	border-right: 1px solid #557e84;
	padding-right: 4px;
	margin-right: 4px;
}

.logs ul
{
	padding-left: 0.5em;
	margin: 0;
	list-style-type: '- ';
}

/* Messages affichés sur le dashboard */
/* ---------------------------------- */

.messages_overview
{
	border-bottom: 1px solid #557e84;
	overflow: hidden;
	padding: 5px;
	cursor: pointer;
	position: relative;
}

.messages_overview:last-child
{
	border-bottom: none;
}

.messages_overview .image
{
	width: 50px;
	height: 50px;
	border-radius: 50px;
	display: block;
	float: left;
	overflow: hidden;
	background-color: #ababab;
	font-family: "Colporteur";
	font-size: 20px;
	line-height: 45px;
	text-align: center;
	color: rgba(0, 0, 0, 0.4);
}

.messages_overview.lus img
{
	opacity: 0.5;
	 -webkit-filter: grayscale(100%);
  	-moz-filter: grayscale(100%);
  	-ms-filter: grayscale(100%);
  	-o-filter: grayscale(100%);
  	filter: gray; /* IE 6-9 */
	filter: grayscale(100%);
}

.messages_overview .msg
{
	padding: 5px;
	padding-right: 0;
	padding-left: 15px;
	max-width: calc(100% - 60px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.messages_overview .texte
{
	font-size: 0.9em;
}

.messages_overview.lus .msg
{
	opacity: 0.75;
}

.messages_overview .interlocuteurs
{
	font-weight: bold;
	color: #557e84;
}

.messages_overview.nonlus .interlocuteurs
{
	color: #fe6131;
}

.messages_overview .notification
{
	display: inline-block;
	position: relative;
}

.messages_overview.nonlus
{
	background-color: #ffe5d4;
}

.messages_overview.nonlus:hover
{
	background-color: #ffc19b;
}

.messages_overview.lus:hover
{
	background-color: #98d5d4;
}

/* -------------------------------------------------------------------------- */
/*                               MENU MOBILE                                  */
/* -------------------------------------------------------------------------- */

#menu_mobile
{
	display: none;
}

@media screen and (max-width: 1200px)
{
	#menu_mobile
	{
		display: block;
		position: fixed;
		top: 0;
		background-color: #557e84;
		width: 100%;
		z-index: 100;
		height: 75px;
		
		 user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
	}
	
	#menu_mobile .entete
	{
		height: 40px;
		position: relative;
	}
	
	#menu_mobile .logo
	{
		color: transparent;
		font-family: 'Colporteur';
		font-size: 1.57em;
		text-align: center;
		position: absolute;
		left: 50%;
		top: 3px;
		height: calc(100% - 6px);
		min-width: 160px;
		transform: translateX(-50%);
		background-image: url("/img/globales/logo_forum_dessine.png");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	#menu_mobile .navigation
	{
		color: #1e4242;
	}
	
	#menu_mobile .navigation > *
	{
		float: left;
		line-height: 30px;
		font-family: 'Colporteur';
		font-size: 1.286em;
		position: relative;
	}
	
	#menu_mobile .navigation li
	{
		height: 35px;
		cursor: pointer;
		padding: 0 5px;
		position: relative;
		overflow:hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	#menu_mobile .navigation_cats,
	#menu_mobile .navigation_pages
	{
		height: 35px;
		overflow: hidden;
		position: relative;
	}
	
	#menu_mobile .navigation_cats
	{
		background-color: #a7d8d7;
		width: 30%;
	}
	
	#menu_mobile .navigation_pages
	{
		background-color: #83bcbb;
		width: 70%;
	}
	
	#menu_mobile .navigation_pages.open
	{
		max-height: calc(100vh - 75px);
		overflow-Y: scroll;
	}
	
	#menu_mobile .navigation_cats li:first-child:after,
	#menu_mobile .navigation_pages li:first-child:after
	{
		display: block;
		content: "\f0d7";
		font-family: FontAwesome;
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		font-size: 0.8em;
	}
	
	#menu_mobile .navigation_pages.nonDeroulant li:first-child
	{
		cursor: default;
	}
	
	#menu_mobile .navigation_pages.nonDeroulant li:first-child:after
	{
		content: none;
	}
	
	#menu_mobile .navigation_cats li:not(:first-child)
	{
		/*display: none;*/
		border-top: 1px solid #84bcbb;
	}
	
	#menu_mobile .navigation_pages li:not(:first-child)
	{
		/*display: none;*/
		border-top: 1px solid #788e8e;
	}
	
	
	#menu_mobile .navigation_cats li:not(:first-child):hover
	{
		background-color: #c1eeed;
	}
	
	#menu_mobile .navigation_pages li:not(:first-child):hover
	{
		background-color: #94d0cf;
	}
	
	#menu_mobile .navigation_cats.open li:not(:first-child),
	#menu_mobile .navigation_pages.open li:not(:first-child)
	{
		display: block;
	}
	#menu_mobile .navigation_pages .titre_topic.hasNew
	{
		display: inline-block;
		max-width: calc(100% - 55px);
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	#menu_mobile .monCompte,
	#menu_mobile .outils,
	#menu_mobile .moderation
	{
		width: 24px;
		height: 24px;
		border-radius: 24px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		line-height: 24px;
		cursor: pointer;
		color: #557e84;
	}
	
	#menu_mobile .monCompte .fa,
	#menu_mobile .outils .fa,
	#menu_mobile .moderation .fa
	{
		line-height: 24px;
		display: block;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		
		-webkit-transition: all .3s linear;
		-moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		-o-transition: all .3s linear;
		transition: all .3s linear;
	}
	
	#menu_mobile .outils .fa-times
	{
		transform: translateX(-200%) translateY(-50%);
	}
	
	#menu_mobile .monCompte
	{
		background-color: #98d5d4;
		right: 10px;
		background-size: cover;
	}
	
	#menu_mobile .monCompte .notification,
	#menu_mobile .moderation .notification
	{
		transform: translateX(100%);
		left: -18px;
		padding: 2px;
		line-height: 1.4em;
		top: -4px;
	}
	
	#menu_mobile .outils
	{
		background-color: #ffdc63;
		left: 10px;
		
		-webkit-transition: all .3s linear;
		-moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		-o-transition: all .3s linear;
		transition: all .3s linear;
	}
	
	#menu_mobile .outils.open .fa-times
	{
		transform: translateX(-50%) translateY(-50%);
	}
	
	#menu_mobile .outils.open .fa-bars
	{
		transform: translateX(200%) translateY(-50%);
	}
	
	#menu_mobile .moderation
	{
		background-color: #719144;
		background-image: url("/img/globales/ciseaux.png");
		background-size: contain;
		right: 44px;
		background-size: cover;
	}
	
}
/*@media screen and (max-width: 640px)
{
	#menu_mobile
	{
		height: 35px;
	}
	
	#menu_mobile .entete,
	#menu_mobile .navigation
	{
		
		float: left;
	}
	
	#menu_mobile .entete
	{
		width: 40%;
		height: 35px;
		position: static;
	}
	
	#menu_mobile .navigation
	{
		width: 60%;
		right: 35px;
		position: absolute;
	}
	
	#menu_mobile .logo
	{
		left: 35px;
		margin: 0;
		transform: none;
		background-position: center;
		width: calc(40% - 70px);
		min-width: 0;
	}
	
	#menu_mobile .outils,
	#menu_mobile .monCompte
	{
		width: 35px;
		height: 35px;
		border-radius: 0;
		position: absolute;
		line-height: 35px;
		top: 0;
		transform: none;
	}
	
	#menu_mobile .outils
	{
		right: 0;
	}
	
	#menu_mobile .monCompte
	{
		left: 0;
		
	}
	
	#menu_mobile .navigation_pages.open
	{
		max-height: 100vh;
	}
	
	#menu_mobile .outils.open
	{
		transform: none;
	}
	
	#menu_mobile .outils.open .fa
	{
		transform: rotate(135deg);
	}
	
	#menu_mobile .outils .fa
	{
		-webkit-transition: all .3s linear;
		-moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		-o-transition: all .3s linear;
		transition: all .3s linear;
	}
	
	
	
}*/


/* -------------------------------------------------------------------------- */
/*                             GRILLE ISOTOPE                                 */
/* -------------------------------------------------------------------------- */

.loader
{
	height: 64px;
	width: 100%;
	color: transparent;
	background-image: url("/img/globales/spinner.gif");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 32px 32px;
	clear: both;
}

/* Grille */
/* ------ */

.grid-item
{
	width: 100%;
	background-color: white;
	padding: 5px;
	position: relative;
	margin-bottom: 10px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);

	animation: apparition ease-out 0.2s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	-webkit-animation: apparition ease-out 0.2s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: apparition ease-out 0.2s;
	-moz-animation-iteration-count: 1;
	-moz-transform-origin: 50% 50%;
	-o-animation: apparition ease-out 0.2s;
	-o-animation-iteration-count: 1;
	-o-transform-origin: 50% 50%;
	-ms-animation: apparition ease-out 0.2s;
	-ms-animation-iteration-count: 1;
	-ms-transform-origin: 50% 50%;
}

@keyframes apparition{
  0% {
    transform:  scaleX(0.00) scaleY(0.00) ;
  }
  100% {
    transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-moz-keyframes apparition{
  0% {
    -moz-transform:  scaleX(0.00) scaleY(0.00) ;
  }
  100% {
    -moz-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-webkit-keyframes apparition {
  0% {
    -webkit-transform:  scaleX(0.00) scaleY(0.00) ;
  }
  100% {
    -webkit-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-o-keyframes apparition {
  0% {
    -o-transform:  scaleX(0.00) scaleY(0.00) ;
  }
  100% {
    -o-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

@-ms-keyframes apparition {
  0% {
    -ms-transform:  scaleX(0.00) scaleY(0.00) ;
  }
  100% {
    -ms-transform:  scaleX(1.00) scaleY(1.00) ;
  }
}

.gutter-sizer
{
	width: 10px;
}

@media screen and (min-width: 640px)
{
	.gutter-sizer
	{
		width: 20px;
	}

	.grid-item
	{
		padding: 0;		
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
		
		-webkit-transition: all .15s linear;
		-moz-transition: all .15s linear;
		-ms-transition: all .15s linear;
		-o-transition: all .15s linear;
		transition: all .15s linear;
	}
	
	.grilleIsotope .grid-item
	{
		margin-right: 0;
		margin-bottom: 0;
	}
	
	.grid-item:hover
	{
		transform: scale(1.05, 1.05);
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
		z-index:3;
	}
	
	.grid-item-container
	{
		width: 100%;
		height: 0;
		padding-top: 100%;
		overflow: hidden;
		position: relative;
	}
	
	.coup_de_coeur .grid-item-container,
	.mineur  .grid-item-container
	{
		padding-top: calc((100% - 20px) / 2 );
	}
}

/* Colonnes */

@media screen and (min-width: 641px) and (max-width: 750px)
{
	.grid-item 					{ width: calc( (100% - 20px) / 3 - 40px / 3); }
	.grid-item.coup_de_coeur 	{ width: calc(((100% - 20px) / 3 - 40px / 3) * 2 + 20px); }
	#meilleursTopics .grid-item:nth-child(n+4) { display: none; }
	.explorezTopics .grid-item:nth-child(n+3) { display: none; }
}

@media screen and (min-width: 751px) and (max-width: 900px), (min-width: 1201px) and (max-width: 1350px)
{
	.grid-item 					{ width: calc( (100% - 20px) / 4 - 60px / 4); }
	.grid-item.coup_de_coeur 	{ width: calc(((100% - 20px) / 4 - 60px / 4) * 2 + 20px); }
	#meilleursTopics .grid-item:nth-child(n+5) { display: none; }
	.explorezTopics .grid-item:nth-child(n+4) { display: none; }
}

@media screen and (min-width: 901px) and (max-width: 1200px), (min-width: 1350px) and (max-width: 1500px)
{
	.grid-item 					{ width: calc( (100% - 20px) / 5 - 80px / 5); }
	.grid-item.coup_de_coeur 	{ width: calc(((100% - 20px) / 5 - 80px / 5) * 2 + 20px); }
	#meilleursTopics .grid-item:nth-child(n+6) { display: none; }
	.explorezTopics .grid-item:nth-child(n+5) { display: none; }
}

@media screen and (min-width: 1501px)
{
	.grid-item 					{ width: calc( (100% - 20px) / 6 - 100px / 6); }
	.grid-item.coup_de_coeur 	{ width: calc(((100% - 20px) / 6 - 100px / 6) * 2 + 20px); }
	.explorezTopics .grid-item:nth-child(n+6) { display: none; }
}

.explorezTopics .grid-item:last-child { display: block; }

.grille:after
{
  content: '';
  display: block;
  clear: both;
}

@media screen and (max-width: 640px)
{
	.grille + h2
	{
		margin-top: 35px;
	}
}

@media screen and (min-width: 641px)
{

	.grille
	{
		position: relative;
		width: calc(100% + 20px);
	}

	h2 + .grille
	{
		margin-top: 25px;
	}

	/* Carte */
	/* ----- */

	.grid-item.fullwidth
	{
		width: 100%;
		background-color: transparent;
	}
	.grid-item.coup_de_coeur,
	.grid-item.petit_coup_de_coeur
	{
		padding-right: 0;
	}

}

/* Coup de coeur */
/* ------------- */

.coeur,
.grid-item .nouveau
{
	position: absolute;
	right: -6px;
	top: -4px;
	background-image: url('/img/forum/coup_de_coeur.png');
	background-size: contain;
	background-repeat: no-repeat;
	width: 20px;
	height: 17px;
	z-index: 2;
}

.grid-item .nouveau
{
	background-image: url('/img/tutoriels/bannieres/new.png');
}

@media screen and (min-width: 641px)
{

	.coeur,
	.grid-item .nouveau
	{
		right: -12px;
		top: -7px;
		width: 55px;
		height: 48px;
	}
	
	.grid-item .nouveau
	{
		right: -20px;
		top: -12px;
	}
	

	/*.grid-item.coup_de_coeur
	{
		width: 360px;
		width: calc(360px + (100% - 1080px) / 6);
	}*/

	.grid-item.petit_coup_de_coeur .resume
	{
		display: none;
	}

	.grid-item.petit_coup_de_coeur .coeur
	{
		width: 38px;
	}
}

/* Image */
/* ----- */

.grid-item .image
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background-position: center;
	background-size: cover;
	height: 100%;
	width: 27%;
	background-color: #557e84;
	background-repeat: no-repeat;
}

.grid-item .image.generique,
.grid-item .image.generique
{
	background-size: auto 80%;	
}
.grid-item .image.specifique
{
	background-color: white;
}

@media screen and (min-width: 641px)
{
	.grid-item .image,
	.grid-item.petit_coup_de_coeur .image
	{
		background-color: #557e84;
		background-repeat: no-repeat;
		background-position: center;
		background-size: auto 80%;
		width: 100%;
		height: 50%;
		position: relative;
		display: block;
		position: absolute;
		top: 0;
		
	}

	.grid-item.coup_de_coeur .image
	{
		height: 100%;
		width: 100%;
	}

	.grid-item .image.specifique
	{
		background-size: cover;
	}
	/*.grid-item:hover .image
	{
		height: 100%;
	}
	
	.grid-item.mineur:hover .image
	{
		width: 100%;
	}*/
}

/* Légende */
/* ------- */

.grid-item .titre
{
	font-weight: bold;
}

/*.grid-item.non_lu .titre
{
	color: #fe6131;
}

.grid-item.non_lu .date_post
{
	color: #fe6131;
}*/

/*.grid-item.non_lu .categorie
{
	background-color: #fe6131;
}*/

.grid-item.lu,
.one_topic.lu .legende
{
	background-color: #c5c5c5;
	
	-webkit-transition: all .15s linear;
		-moz-transition: all .15s linear;
		-ms-transition: all .15s linear;
		-o-transition: all .15s linear;
		transition: all .15s linear;
}

.grid-item.lu:hover
.one_topic.lu:hover
{
	background-color: white;
}

.grid-item.lu .image,
.one_topic.lu .image
{
	-webkit-filter: grayscale(100%);
  	-moz-filter: grayscale(100%);
  	-ms-filter: grayscale(100%);
  	-o-filter: grayscale(100%);
  	filter: gray; /* IE 6-9 */
	filter: grayscale(100%);
}

.grid-item.lu:hover .image,
.one_topic.lu:hover .image
{
	-webkit-filter: grayscale(0%);
  	-moz-filter: grayscale(0%);
  	-ms-filter: grayscale(0%);
  	-o-filter: grayscale(0%);
  	filter: none; /* IE 6-9 */
	filter: grayscale(0%);
}

.nouveauxPosts.notification
{
    display: inline-block;
    position: relative;
	font-size: 0.6em;
	line-height: 1.4em;
	vertical-align: bottom;

}

.date_post
{
	font-size: 0.85em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	
	color: #557e84;
	margin-top: 0;	
}

.bienvenue .date_post
{
	font-size: 1em;
	white-space: normal;
}

.date_post a
{
	font-weight: 600;
}

.date_post a:hover
{
	color: #ffdc63;
}

.date_post .participants
{
	font-size: 1.25em;
	line-height: 1.6em;
}

.grid-item .legende
{
	width: 100%;
	padding-left: calc(27% + 15px);
}

.grid-item .categorie
{
	background-color: #3c365c;
	color: #fefbcf;
	width: 26px;
	height: 26px;
	left: calc(27% - 13px);
	top: 50%;
	transform: translateY(-50%);
	border-radius: 30px;
	border: 2px solid white;
	position: absolute;
	background-size: 60% auto;
	background-repeat: no-repeat;
	background-position: center;
}

@media screen and (max-width: 640px)
{
	.grid-item .titre
	{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
	
@media screen and (min-width: 641px)
{
	.grid-item .legende
	{
		position: absolute;
		bottom: 0;
		padding: 10px;
		height: 50%;
		text-align: center;
		font-size: 0.9em;
	}
	
	.grid-item.coup_de_coeur .legende
	{
		/*width: calc(100% - 20px);*/
		height: auto;
		margin: auto;
		bottom: 10px;
		background-color: white;
		left: 50%;
		transform: translateX(-50%);
		padding-left: 40px;
		padding-right: 40px;
		width: auto;
	}
	
	.grid-item.coup_de_coeur .one_topic.lu .legende
	{
		background-color: #c5c5c5;
	}
	
	.grid-item.coup_de_coeur .one_topic.lu:hover .legende
	{
		background-color: white;
	}
	
	.grid-item.coup_de_coeur.lu .legende
	{
		background-color: #c5c5c5;
		
		-webkit-transition: background-color .3s linear;
		-moz-transition: background-color .3s linear;
		-ms-transition: background-color .3s linear;
		-o-transition: background-color .3s linear;
		transition: background-color .3s linear;
	}
	
	
	.grid-item.coup_de_coeur.lu:hover .legende
	{
		background-color: white;
	}
	
	.grid-item .categorie
	{
		width: 30px;
		height: 30px;
		top: -15px;
		left: 50%;
		transform: translateX(-50%);
		color: #fefbcf;
	}
	
	
	.grid-item.mineur .categorie
	{
		top: 50%;
		left: -15px;
		transform: translateY(-50%);
	}
	
	/*.grid-item:hover .legende
	{
		bottom: calc(-50% - 15px);
	}
	
	.grid-item.mineur:hover .legende
	{
		left: calc(100% + 15px);
	}*/
	
	.grid-item.coup_de_coeur .legende-container
	{
		width: auto;
		position: relative;
		top: auto;
		transform: none;
	}
	
	.legende-container
	{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width:calc(100% - 20px);
	}

	.grid-item .titre
	{
		font-size: 1.3em;
		line-height: 1.2em;
		margin-top: 5px;
	}
	
	.grid-item.mineur .titre
	{
		font-size: 1em;
	}

	.grid-item.coup_de_coeur .titre
	{
		height: 21px;
		font-size: 1.286em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.grid-item.coup_de_coeur .resume
	{
		margin: 7px auto;
	}
	
	.grid-item  .date_post
	{
		margin-top: 5px;
		line-height: 1.3em;
	}
	
	#listeProjets .grid-item  .date_post
	{
		margin-top: 0;
	}
	
}

/* Load more */
/* --------- */

.grid-item.loadmore
{
	display: none;
	background-color: transparent;
	text-align: center;
	color:#557e84;
	padding-left: 5px;
}

#listeTopics  .loadmore
{
	display: block;
}

.grid-item.loadmore .fa
{
	font-size: 40px;
}

@media screen and (min-width: 641px)
{
	.grid-item.loadmore
	{
		height: 260px;
	}
	
	.grid-item.loadmore .fa
	{
		font-size: 80px;
		line-height: 260px;
	}
	
	.grid-item.loadmore:hover
	{
		margin-top: 0px;
		color: #1e4242;
	}
	
	.grid-item.mineur .image
	{
		height: 100%;
		width: 33%;
		float: left;
	}
	
	.grid-item.anniversaire .image
	{
		height: 220px;
	}
	
	.grid-item.mineur .legende
	{
		max-width: 65%;
		position: absolute;
		bottom: auto;
		height: 100%;
		transform: none;
		left: 33%;
		top: 0;
	}
	
	.mineurs
	{
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
	}
}

/* Classement des topics par catégories */
/* ------------------------------------ */

#listeDesTopicsParCategories
{
	/*overflow:hidden;*/
	padding-top:10px;
	margin-top: 30px;
}

#listeDesTopicsParCategories .gutter-sizer
{
	width: 27px;
}

@media screen and (max-width: 640px)
{
	#listeDesMeilleursTopics
	{
		display: none;
	}
	
	#listeDesTopicsParCategories
	{
		margin-top: 0;
	}
}

.categorie_de_topics
{
	background-color: transparent;
	box-shadow: none;
	width: 100%;
	margin-bottom: 0;
}

@media screen and (min-width: 641px) and (max-width: 940px)
{
	.categorie_de_topics
	{
		width:calc((100% / 2) - 27px / 2) !important;
	}
}

@media screen and (min-width: 941px)
{
	.categorie_de_topics
	{
	   
	   /*width: calc( (100% - 27px) / 3 - (27px * 2) / 3) !important;*/
	   width:calc((100% / 3) - 54px / 3) !important;
	}
}


.categorie_de_topics:hover,
.ajouterFavori:hover
{
	transform: none;
	box-shadow: none;
}

.categorie_de_topics h3
{
   font-family: "Colporteur";
   color: #3c365c;
   font-size: 26px;
   margin-top : -10px;
   margin-bottom: 10px;
}


.categorie_de_topics h3 .categorie
{
	border: none;
	display: inline-block;
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	vertical-align: middle;
}

.categorie_de_topics .bloc_de_categorie
{
	
	/*background-color: rgba(255,255,255,0.5);
    padding: 5px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);*/
}

.categorie_de_topics .one_topic
{
	position: relative;
	margin-bottom: 10px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
	
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	-ms-transition: all .15s linear;
	-o-transition: all .15s linear;
	transition: all .15s linear;
}

@media screen and (min-width: 641px)
{
	.categorie_de_topics .one_topic:last-child
	{
		margin-bottom: 15px;
	}
}

@media screen and (min-width: 641px)
{
	.categorie_de_topics .one_topic:hover
	{
		transform: scale(1.05, 1.05);
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
		z-index: 3;
	}
}

.categorie_de_topics .one_topic .image
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 25%;
}

.categorie_de_topics .one_topic .legende
{
	position: relative;
	transform: none;
	padding: 0;
	padding-left: calc(27% + 10px);
	top: 0;
	left: 0;
	text-align: left;
}

@media screen and (min-width: 641px)
{
	.categorie_de_topics .one_topic .legende
	{
		padding: 10px;
		padding-left: calc(25% + 10px);
	}
}

.categorie_de_topics .one_topic.non_lu
{
	background-color: white;
}

.categorie_de_topics .one_topic .legende .titre
{
	margin-top: 0;
	font-size: 1.1em;
}

.categorie_de_topics .one_topic .legende .date_post
{
	margin-top: 0;
}

.ajouterFavori
{
	background-color: transparent;
	box-shadow: none;
	border: 1px dashed #ee391b;
}

.ajouterFavori:before
{
	content: "Ajoutez des topics à vos favoris pour les afficher ici";
	display: block;
	position: absolute;
	top: 50%;
	padding: 15px;
	text-align: center;
	transform: translateY(-50%);
	font-size: 0.8em;
	color: #ee391b;
}

@media screen and (max-width: 640px)
{
	#listeDesMeilleursTopics .grid-item:nth-child(n+5) { display: none; }
}

@media screen and (min-width: 641px) and (max-width: 750px)
{
	#listeDesMeilleursTopics .grid-item:nth-child(n+3) { display: none; }
}

@media screen and (min-width: 751px) and (max-width: 900px), (min-width: 1201px) and (max-width: 1350px)
{
	#listeDesMeilleursTopics .grid-item:nth-child(n+4) { display: none; }
}

@media screen and (min-width: 901px) and (max-width: 1200px), (min-width: 1350px) and (max-width: 1500px)
{
	#listeDesMeilleursTopics .grid-item:nth-child(n+5) { display: none; }
}

@media screen and (min-width: 1501px)
{
	#listeDesMeilleursTopics .grid-item:nth-child(n+6) { display: none; }
}

/* Mes projets */
/* ----------- */

.mesProjets .grid-item
{
	background-color: white;
	overflow: hidden;
	position: relative;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}

.mesProjets .apercu
{
	height: 70px;
	width: 70px;
	background-position: center;
	background-size: cover;
	float: left;
	background-color: #f1f1f1;
}

.mesProjets .invalide .apercu
{
	opacity: 0.5;
	 -webkit-filter: grayscale(100%);
  	-moz-filter: grayscale(100%);
  	-ms-filter: grayscale(100%);
  	-o-filter: grayscale(100%);
  	filter: gray; /* IE 6-9 */
	filter: grayscale(100%);
}

.mesProjets .details
{
	float: left;
	padding: 10px;
	max-width: calc(100% - 70px);
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

@media screen and (min-width: 641px)
{
	.mesProjets .apercu
	{
		height: 100px;
		width: 150px;
	}
	
	.mesProjets .details
	{
		max-width: calc(100% - 150px);
		padding: 20px;
	}
}


@media screen and (max-width: 640px)
{
	.mesProjets .nouveauProjet .details
	{
		max-width: none;
	}
}

.mesProjets span
{
	font-size: 0.714em;
	white-space: nowrap;
	font-weight: 600;
	color: #645f59;
}

.mesProjets .boutons
{
	position: absolute;
	bottom: 10px;
	right: 10px;
	overflow: hidden;
}

.mesProjets .boutons .boutonJaune
{
	margin-top: 0;
	display: block;
	float: left;
	height: 50px;
	position: relative;
}

.mesProjets .nouveauProjet
{
	background-color: #557e84;
	color: #98d5d4;
	text-align: center;
	
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}

@media screen and (min-width: 641px)
{
	.mesProjets .nouveauProjet
	{
		height: 100px;
		line-height: 60px;
	}
}

.mesProjets .nouveauProjet:hover
{
	background-color: #3f656b;
}

.mesProjets .nouveauProjet .details
{
	float: none;

}

@media screen and (min-width: 650px)
{
	.mesProjets .gutter-sizer
	{
		width: 20px;
	}
	
	.mesProjets .grid-item
	{
		width: calc((100% - 20px) / 3 - (40px / 3));
	}
}

/* -------------------------------------------------------------------------- */
/*                             LISTE DES TOPICS                               */
/* -------------------------------------------------------------------------- */

#titreMeilleursTopics
{
	color: #fe6131;
}

#titreExplorezTopics
{
	color: #3c365c;
}

.explorezTopics .image
{
	background-size: cover;
	height: 100%;
}

#meilleursTopics .loadmorebtn
{
	display: none;
}

@media screen and (max-width: 640px)
{
	.explorezTopics .image
	{
		display: block;
		width: 100%;
	}
	
	.explorezTopics
	{
		text-align: center;
	}
	
	.explorezTopics .grid-item,
	.explorezTopics.grid-item
	{
		padding: 0;
		width: auto;
		float: left;
		width: calc(50vw - 15px);
		height: calc(50vw - 15px);
	}
	
	.explorezTopics .grid-item:nth-child(odd),
	.explorezTopics.grid-item:nth-child(odd)
	{
		margin-right: 10px;
	}
	
	#listeTopics .explorezTopics.grid-item
	{
		width: 100%;
		height: 50px;
		background-image: url("/img/forum/topics/recemment_mobile.jpg") !important;
		background-size: cover;
		background-position: center top;
	}
	
	#listeTopics .explorezTopics.grid-item .image
	{
		display: none;
	}
}


/* -------------------------------------------------------------------------- */
/*                             FORMULAIRES                                    */
/* -------------------------------------------------------------------------- */

.input-wrapper
{
	width: 100%;
	margin-bottom: 15px;
}

.input-wrapper.noMargin
{
	margin-bottom:0;
}

.input-wrapper > label
{
	background-color: #ff9c5f;
	color: #254948;
	padding: 2px 6px;
	display: inline-block;
	font-size: 0.85em;
	font-weight: 600em;
	position: relative;
}

input[type=text],
input[type=password],
input[type=email],
textarea,
.select,
.input-singleline,
.input-multiline,
.input
{
	width: 100%;
}

input[type=text],
input[type=password],
input[type=email],
textarea,
.input
{
	background-color: white;
	border: none;
	padding: 5px;
}

.input /* Un div qui se comporte comme un input */
{
	min-height: calc(1.4em + 10px);	
	overflow: hidden;
}

textarea
{
	resize:none;
	font-family: 'Open Sans', sans-serif;
	color: #1e4242;
	font-size:0.875em;
	height: 1em;
}

textarea.manual
{
	height: auto;
}

/* Select */
/* ------ */

.select
{
	background-color: white;
	overflow: hidden;
	position: relative;
}

select
{
	padding: 5px;
	border: none;
	background-color: none;
	width: calc(100% + 50px);
	padding-right: 75px;
	text-overflow: ellipsis;
	cursor: pointer;
}

.select:after
{
	display: block;
	content: "\f0d7";
	font-family: FontAwesome;
	position: absolute;
	width: 25px;
	height: auto;
	right: 0;
	top: 50%;
	font-size:16px;
	transform: translateY(-50%);
	text-align: center;
	pointer-events:none;
}

/* Sur une seule ligne */
/* ------------------- */

.input-singleline,
.input-multiline
{
	text-align: justify;
}

.input-singleline
{
	line-height: 0;
	margin-top: 10px;
}

.input-singleline > *,
.input-multiline > *
{
	display: inline-block;
}

.input-singleline:after
{
	content: " ";
	display: inline-block;
	width: 100%;
	height: 1px;
}

.input-singleline input[type="checkbox"],
.input-singleline input[type="radio"]
{
	/*margin-top: 10px;*/
}

/* Tags */
/* ---- */

.tag
{
	margin-top: 4px;
	width: 100%;
	cursor: pointer;
	margin-right: 15px;
}

.tag input[type="checkbox"],
.tag input[type="radio"]
{
	display: none;
}

.tag label
{
	color: #1e4242;
	padding: 1px 5px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em;
	padding-left: 22px;
	position: relative;
}

.tri_logiciels .tag label
{
	padding-left: 4px;
}

.tag label:hover
{
	color: #fefbcf;
}

.tag input[type="checkbox"]:checked + label,
.tag input[type="radio"]:checked + label
/*.tag input[type="checkbox"]:not(:checked) + label:hover,
.tag input[type="radio"]:not(:checked) + label:hover*/
{
	background-color: #1e4242;
	color: white;
}

.tag img
{
	max-height: 1em;
	max-width: 12px;
	width: auto;
	margin-right: 7px;
	position: absolute;
	left:3px;
	top: 50%;
	transform: translateY(-50%);
}

.tag img.icon_jaune
{
	opacity: 0;
}

.tag label:hover img.icon_jaune,
.tag input[type="checkbox"]:checked + label img.icon_jaune,
.tag input[type="radio"]:checked + label img.icon_jaune
{
	opacity: 1;
}

.tag label:hover img.icon_bleue,
.tag input[type="checkbox"]:checked + label img.icon_bleue,
.tag input[type="radio"]:checked + label img.icon_bleue
{
	opacity: 0;
}

/* Datepicker */
/* ---------- */

.du_au-wrapper
{
	margin-top: 5px;
}

.du_au-wrapper > *
{
	display: block;
	float: left;
}

.du_au-wrapper:after
{
	content: " ";
	display: block;
	clear:both;
}

.du_au
{
	width: 10%;
	padding: 5px 0;
	text-align:center;
}

.du_au:first-child
{
	text-align: left;
}

.du_au-wrapper input.datepicker
{
	width: 40%;
}

/* Checkboxes */
/* ---------- */

.checkbox-wrapper:not(.tag) input[type="checkbox"],
.radio-wrapper:not(.tag) input[type="radio"]
{
	display: none;
}

.radio-wrapper label,
.checkbox-wrapper label
{
    background-color: transparent;
}

.checkbox-wrapper:not(.tag) input[type="checkbox"] + label,
.radio-wrapper:not(.tag) input[type="radio"] + label
{
	background-position: bottom left;
	background-repeat: no-repeat;
	height: 19px;
	display: inline-block;
	line-height: 19px;
	padding-left: 25px;
	cursor: pointer;
}

.checkbox-wrapper:not(.tag) input[type="checkbox"] + label
{
	background-image: url("/img/globales/form_checkbox.png");
}
.radio-wrapper:not(.tag) input[type="radio"] + label
{
	background-image: url("/img/globales/form_radio.png");
}

.checkbox-wrapper:not(.tag) input[type="checkbox"]:checked + label,
.radio-wrapper:not(.tag) input[type="radio"]:checked + label
{
	background-position: top left;
}

/* Combinaison input + submit */
/* -------------------------- */

.square_submit
{
	font-family: "FontAwesome";
	width: 30px;
	padding: 6px;
	padding-bottom: 7px;
	float: right;
	/*border: none;
	background-color: #ffdc63;
	color: #557e84;*/
}

input.submitAtEnd
{
	width: calc(100% - 30px);
}

/* Toggles */
/* ------- */

input.switch:empty
{
	margin-left: -999px;
}

input.switch:empty ~ label
{
	position: relative;
	float: left;
	line-height: 1.6em;
	font-size: 1em;
	text-indent: 4em;
	margin: 0.2em 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #707f7f;
	background-color: transparent;
	padding: 0;
}

input.switch:empty ~ label:before, 
input.switch:empty ~ label:after
{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: ' ';
	width: 3.6em;
	background-color: #a6b7b7;
	border-radius: 3.6em;
	/*box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);*/
	-webkit-transition: all 100ms ease-in;
	transition: all 100ms ease-in;
}

input.switch:empty ~ label:after
{
	width: 1.4em;
	top: 0.1em;
	bottom: 0.1em;
	margin-left: 0.1em;
	background-color: #fff;
	border-radius: 3.6em;
	/*box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);*/
}

input.switch:checked ~ label:before
{
	background-color: #76b51b;
}

input.switch:checked ~ label:after
{
	margin-left: 2em;
}

input.switch:checked ~ label
{
	color: #1e4242;
	font-weight: bold;
}



/* -------------------------------------------------------------------------- */
/*                              TOOLTIP                                       */
/* -------------------------------------------------------------------------- */

.tooltip_parent
{
	cursor: help;
}

.tooltip
{
	font-size: 0.8em;
	font-size: 11.2px;
	background-color: #1e4242;
	padding: 5px 10px;
	color: #98d5d4;
	position: absolute;
	left: 50%;
	bottom: -15px;
	transform: translateX(-50%) translateY(100%);
	white-space: nowrap;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
	display: none;
	z-index:102;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.4em;
}

.tooltip:before
{
	content: " ";
	display: block;
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 5px 8.7px 5px;
	border-color: transparent transparent #1e4242;
}

.tooltip.multiline
{
	white-space: normal;
	width: 400px;
	padding: 10px;
}

/* -------------------------------------------------------------------------- */
/*                              Activité récente                              */
/* -------------------------------------------------------------------------- */

.activite_recente
{
	border-bottom: 1px solid #98d5d4;
	background-color: #83bcbb;
	
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}

.activite_recente > div
{
	position: relative;
	padding: 3px;
	cursor: pointer;
	
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
	
}

.activite_recente:last-child
{
	border-bottom: none;
}

.activite_recente p
{
	padding-left: 35px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.activite_avatar
{
	display: block;
	width: 25px;
	height: 25px;
	position: absolute;
	top: 10px;
	overflow: hidden;
	line-height: 18px;
	text-align: center;
	font-family: "Colporteur", sans-serif;
	font-size: 18px;
	color: white;
	border-radius: 25px;

}

.activite_recente:hover > div
{
	margin-left: 10px;
	margin-right: -10px;
}

.activite_recente:hover
{
	background-color: #98d5d4;
}

/* -------------------------------------------------------------------------- */
/*                              Puits à idées                                 */
/* -------------------------------------------------------------------------- */

#puitsAIdees .phrase
{
	font-size: 1.5em;
	text-align: center;
}

#puitsAIdees  .boutons
{
	text-align: center;
	margin-top: 15px;
}

#puitsAIdees  .boutons > .boutonJaune
{
	display: inline-block;
	width: auto;
	padding: 2px 5px;
	margin-right: 5px;
	margin-bottom: 5px;
}

#puitsAIdees  .boutons > div:last-child
{
	margin-right: 0;
}

#puitsAIdees  .boutons > div:hover
{
	background-color: #fefbcf;
}

/* -------------------------------------------------------------------------- */
/*                  Rechercher un auteur dans un topic                        */
/* -------------------------------------------------------------------------- */

#resultats_auteurDansTopic
{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #557e84;
	position: relative;
	overflow: hidden;
	width: calc(100% + 10px);
}

#resultats_auteurDansTopic .resultat_post
{
	background-color: white;
	width: calc((100% - 10px)/2 - 5px);
	position: relative;
	float: left;
}

#resultats_auteurDansTopic .resultat_post img
{
	display: block;
}

#resultats_auteurDansTopic .resultat_post > p
{
	position: absolute;
	bottom: 0;
	left: 0;
	color: white;
	font-size:0.9em;
	padding: 5px;
	display: block;
	width: 100%;
	padding-top: 25px;
	opacity: 1;
	font-weight: bold;
	
	background: -moz-linear-gradient(top, rgba(30,66,66,0) 0%, rgba(30,66,66,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(30,66,66,0) 0%,rgba(30,66,66,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(30,66,66,0) 0%,rgba(30,66,66,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e4242', endColorstr='#b31e4242',GradientType=0 ); /* IE6-9 */
	
	webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-ms-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	transition: opacity .3s linear;
}

#resultats_auteurDansTopic .resultat_post:hover > p
{
	opacity: 0;
}

/* -------------------------------------------------------------------------- */
/*                                  TOPIC                                     */
/* -------------------------------------------------------------------------- */

.post
{
	margin: auto;
	width: 100%;
	max-width: 600px;
	margin-bottom: 10px;
	position: relative;
	/*box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);*/
}


@media screen and (min-width: 641px)
{
	.post
	{
		width: 600px;
		margin-bottom: 20px;
	}
}

.post img
{
	display: block;
	margin: auto;
	
}

.post .principal
{
	background-color: white;
	overflow: hidden;
	height: 0;
	background-position: center;
	background-repeat: no-repeat;
	/*max-height: 100%;*/
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
}

.post .principal img
{
	
	max-width: 100%;
	opacity:0.01;
}

.post h2
{
	text-align: center;
}

/* Auteur */
/* ------ */

.post .infos_auteur
{
	display: none;
}

.post .infos_auteur
{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	transform: none;
	padding: 5px;
}

.post .infos_auteur .avatar
{
	width: 28px;
	height: 28px;
	font-size: 18px;
	line-height: 22px;
	float: left;
	
	border-radius: 80px;
	overflow: hidden;
	font-family: 'Colporteur';
	text-align: center;
	background-color: #fefbcf;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
	opacity: 0;
	
	webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-ms-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	transition: opacity .3s linear;
}



@media screen and (min-width: 1201px)
{
	.post .infos_auteur .avatar
	{
		pointer-events: none;
		opacity: 1;
	}
}

.post .multiauteur .avatar
{
	clear: both;
	margin-bottom: 5px;	
}

.post .avatar img
{
	width: 100%;
	height: 100%;
	display: block;
}

.post .infos_auteur p
{
	display: none;
	pointer-events: none;
}

.post .multiauteur p
{
	display: inline-block;
}

.post .multiauteur:after
{
	content: " ";
	display: block;
	clear: both;
}

.post .auteur
{
	cursor: pointer;
}

.post .infos_auteur p
{
	color: #1e4242;
	font-family: 'Colporteur';
	text-align: right;
	margin-top: 5px;
	margin-right: 7px;
}

@media screen and (min-width: 1201px)
{
	
	.post .infos_auteur
	{
		top: 0;
		left: -20px;
		transform: translateX(-100%);
		padding: 0;
	}
	
	.post .infos_auteur p
	{
		display: block;
		clear:both;
		font-size: 1.57em;
	}
	
	.post .infos_auteur .avatar
	{
		width: 80px;
		height: 80px;
		float: right;
		font-size: 50px;
		line-height: 60px;
		position: relative;
	}
	
	.post .multiauteur .avatar
	{
		width: 40px;
		height: 40px;	
		line-height: 32px;
		font-size: 30px;
	}
	
	.post .multiauteur p
	{
		display: inline-block;
		width: calc(100% - 50px);		
	}
	
}

@media screen and (max-width: 1200px)
{
	.post.actif .infos_et_boutons,
	.post.actif .avatar
	{
		opacity: 1;
	}
	
	.post  .avatar
	{
		z-index: 1;
		position: relative;
	}
	
	.post  .infos_auteur p
	{
		display: inline-block;
		opacity: 0;
		margin-left: 5px;
		color: white;
		position: relative;
		z-index:1;
		
		webkit-transition: opacity .3s linear;
		-moz-transition: opacity .3s linear;
		-ms-transition: opacity .3s linear;
		-o-transition: opacity .3s linear;
		transition: opacity .3s linear;
	}
	
	
	
	.post.actif  .infos_auteur p
	{
		opacity: 1;
	}
	
	.post  .infos_auteur
	{
		width: 100%;		
	}
	
	.post .infos_auteur:before
	{
		width: 100%;
		height: 100px;
		display: block;
		content: " ";
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		
		background: -moz-linear-gradient(bottom, rgba(30,66,66,0) 0%, rgba(30,66,66,0.7) 100%);
		background: -webkit-linear-gradient(bottom, rgba(30,66,66,0) 0%,rgba(30,66,66,0.7) 100%);
		background: linear-gradient(to top, rgba(30,66,66,0) 0%,rgba(30,66,66,0.7) 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b31e4242', endColorstr='#001e4242',GradientType=0 );
		
		-webkit-transition: opacity .3s linear;
		-moz-transition: opacity .3s linear;
		-ms-transition: opacity .3s linear;
		-o-transition: opacity .3s linear;
		transition: opacity .3s linear;
		
		opacity: 0;
	}
	
	.post.actif .infos_auteur:before
	{
		opacity: 1;
	}
}

.post .infos_auteur .bookmark
{
	width: calc(100% + 45px);
	height: 20px;
	margin-right: -20px;
	margin-left: -25px;
	background-color: #ff6547;
	margin-top: 10px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.22);
	z-index: 0;
	position: absolute;
	color: #fefbcf;
	text-align: center;
	font-size: 0.8em;
	line-height: 20px;
	font-weight: bold;
}

.post .infos_auteur .bookmark,
.post .infos_auteur .bookmark .dejalu,
.post .infos_auteur .bookmark .nouveau,
.post .infos_auteur .bookmark:before,
.post .infos_auteur .bookmark:after
{
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-ms-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
	
	-webkit-transition-delay: .3s;
    transition-delay: .3s;
}

.post .infos_auteur .bookmark .dejalu,
.post .infos_auteur .bookmark .nouveau
{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

.post .infos_auteur .bookmark .dejalu
{
	opacity: 0;
}

.post .infos_auteur .bookmark.lu .nouveau
{
	opacity: 0;
}

.post .infos_auteur .bookmark.lu .dejalu
{
	opacity: 1;
}

.post .infos_auteur .bookmark:before,
.post .infos_auteur .bookmark:after
{
	display: block;
	content: " ";
	position: absolute;
	left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
}

.post .infos_auteur .bookmark:before
{
	top: 0;
    border-width: 0 10px 10px 0;
    border-color: transparent #ff6547 transparent transparent;
}

.post .infos_auteur .bookmark:after
{
	top: 10px;
	border-width: 0 0 10px 10px;
    border-color: transparent transparent #ff6547 transparent;
}

.post .infos_auteur .bookmark.lu
{
	background-color: #b2cfcf;
	color: #80a5a4;
	opacity: 0.7;
}

.post .infos_auteur .bookmark.lu:before
{
	border-color: transparent #b2cfcf transparent transparent;
}

.post .infos_auteur .bookmark.lu:after
{
	border-color: transparent transparent #b2cfcf transparent;
}

@media screen and (max-width: 1200px)
{
	.post .infos_auteur .bookmark
	{
		z-index: 1;
		width: 120px;
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.post .infos_auteur .bookmark.lu
	{
		opacity: 0;
		pointer-events: none;
	}
}


/* Pop-up infos auteur */
/* ------------------- */
	
@media screen and (min-width: 641px)
{
	.lubiensInfosTooltip
	{
		background-color: #557e84;
		height: 200px;
		width: 230px;
		padding: 0;
		background-image: url("/img/globales/spinner_clair.gif");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 32px 32px;
	}

	.lubiensInfosTooltip:before
	{
		border-color: transparent transparent #ff9c5f;
	}

	.lubiensInfosTooltip .avatar
	{
		height: 60px;
		width: 60px;
		float: left;
		border-radius: 0;
		line-height: 40px;
		text-align: center;
		font-family: "Colporteur";
		font-size: 20px;
		line-height: 50px;
		position: relative;
	}

	.lubiensInfosTooltip .infos
	{
		width: 170px;
		height: 60px;
		background-color: #ff9c5f;
		padding: 0 10px;
		float:left;
		position: relative;
		display: table;
	}
	
	.lubiensInfosTooltip .infos > div
	{
		display: table-cell;
		vertical-align: middle;
	}

	.lubiensInfosTooltip .infos span
	{
		display: block;
	}

	.lubiensInfosTooltip .infos .nom
	{
		font-family: "Colporteur";
		font-size: 1.55em;
		color: #fefbcf;
	}
	
	.lubiensInfosTooltip .infos .role
	{
		color: #fefbcf;
	}

	
	
	.lubiensInfosTooltip .infos .nom .fa
	{
		font-size: 0.8em;
	}
	
	.lubiensInfosTooltip .infos .role,
	.lubiensInfosTooltip .infos .role ~ .nb_posts
	{
		margin-top: 2px;
	}
	
	.lubiensInfosTooltip .infos .role
	{
		font-style: italic;
		opacity: 0.8;
	}
	
	.lubiensInfosTooltip .last_posts
	{
		overflow: hidden;
		clear: both;
	}

	.lubiensInfosTooltip .last_post
	{
		width: 75px;
		height: 75px;
		float: left;
		background-color: white;
		background-size: cover;
		background-position: center;
		margin-right: 2px;
		margin-top: 2px;
		cursor: pointer;
		position: relative;
	}
	
	.lubiensInfosTooltip .last_post.empty
	{
		cursor: default;
		background-color: #98d5d4;
		opacity: 0.3;
	}

	.lubiensInfosTooltip .last_post:nth-child(2)
	{
		width: 76px;
		
	}

	.lubiensInfosTooltip .last_post:last-child
	{
		margin-right: 0;
	}

	.lubiensInfosTooltip .boutonJaune
	{
		display: inline-block;
		margin-top: 12px;
		width: calc(100% - 24px);
		margin-left: 12px;
	}

	.lubiensInfosTooltip .last_post:hover .infos_et_boutons,
	.listePosts .grid-item:hover .infos_et_boutons
	{
		opacity: 1;
	}
}

.lubiensInfosTooltip .infos_et_boutons,
.listePosts .infos_et_boutons
{
	height: 60px;
	font-size: 1.2em;
}

.lubiensInfosTooltip .infos_et_boutons span,
.listePosts .infos_et_boutons span
{
	display: block;
	white-space: normal;
	position: absolute;
	bottom: 4px;
	left: 4px;
	color: white;
	font-weight: 600;
	font-size: 0.8em;
	max-height: 2.8em;
	overflow: hidden;
	width: calc(100% - 8px);
}

.nb_posts
{
	margin-top: 5px;
	font-weight: 600;
	line-height: 1.2em;
	min-height: 15px;
}

.nb_posts:before
{
	content: " ";
	display: inline-block;
	margin-right: 3px;
	height: 1.2em;
	width: 1.2em;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
}

.nb_posts.blanc:before
{
	content:none;
}

.nb_posts.vert:before 		{ background-image: url("/img/globales/lemon_vert.png");}
.nb_posts.jaune:before		{ background-image: url("/img/globales/lemon_jaune.png");}
.nb_posts.orange:before 	{ background-image: url("/img/globales/lemon_orange.png");}
.nb_posts.rouge:before 		{ background-image: url("/img/globales/lemon_rouge.png");}
.nb_posts.rose:before	 	{ background-image: url("/img/globales/lemon_rose.png");}
.nb_posts.bleu:before	 	{ background-image: url("/img/globales/lemon_bleu.png");}
.nb_posts.noir:before	 	{ background-image: url("/img/globales/lemon_noir.png");}

.nb_posts.blanc 	{ color: #98d5d4/*#fefbcf*/;}
.nb_posts.vert 		{ color: #afee0f;}
.nb_posts.jaune		{ color: #fde820;}
.nb_posts.orange 	{ color: #ff9c5f;}
.nb_posts.rouge 	{ color: #a31d0f;}
.nb_posts.rose	 	{ color: #ff7cb7;}
.nb_posts.bleu	 	{ color: #19b2eb;}
.nb_posts.noir	 	{ color: #283850;}

.lubiensInfosTooltip .infos .nb_posts.blanc  		{ color: #fefbcf;}
.lubiensInfosTooltip .infos .nb_posts.orange  		{ color: #ed611d;}
.lubiensInfosTooltip .infos .nb_posts.rose  		{ color: #d836b0;}
.lubiensInfosTooltip .infos .nb_posts.bleu  		{ color: #347bc0;}


/* Infos en bas de l'image */
/* ----------------------- */

.post .principal
{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
	position: relative;
}

@media screen and (min-width: 641px)
{
	.post .principal
	{
		background-size: auto;
	}
}

.post .principal.loading
{
	background-image: url("/img/globales/spinner.gif");
	background-size: 32px;
}

.post:after
{
	content: " ";
	display: block;
	clear: both;
}

.post .infos_et_boutons,
.listePosts .infos_et_boutons,
.lubiensInfosTooltip .infos_et_boutons
{
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100px;
	bottom: 0;
	left: 0;
	max-height:100%;
	
	background: -moz-linear-gradient(top, rgba(30,66,66,0) 0%, rgba(30,66,66,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(30,66,66,0) 0%,rgba(30,66,66,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(30,66,66,0) 0%,rgba(30,66,66,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e4242', endColorstr='#b31e4242',GradientType=0 ); /* IE6-9 */
	
	-webkit-transition: opacity .3s linear;
	-moz-transition: opacity .3s linear;
	-ms-transition: opacity .3s linear;
	-o-transition: opacity .3s linear;
	transition: opacity .3s linear;
}

.post .infos_et_boutons .date,
.post .infos_et_boutons .boutons
{
	position: absolute;
	max-width: 50%;
	bottom: 6px;
	color: white;
	font-size: 0.757em;
	font-weight: 600;
}

.post .infos_et_boutons .date
{
	left: 10px;
}

.post .infos_et_boutons .boutons
{
	right: 10px;
}

.post .infos_et_boutons .boutons > div
{
	width: 25px;
	height: 25px;
	border-radius: 25px;
	line-height: 20px;
	text-align: center;
	border: 2px solid white;
	cursor: pointer;
	display: inline-block;
	margin-left: 5px;
	position: relative;
}

.post .infos_et_boutons .boutons > div .fa
{
	line-height: 20px;
}

.post .infos_et_boutons .boutons > div:hover
{
	background-color: white;
	color: #557e84;
}

img.lazy
{
   opacity: 0;
}

@media screen and (min-width: 641px)
{
	img.lazy
	{
		-webkit-transition: opacity .5s linear;
		-moz-transition: opacity .5s linear;
		-ms-transition: opacity .5s linear;
		-o-transition: opacity .5s linear;
		transition: opacity .5s linear;
	}
}

.tooltip_lien_direct
{
	font-size: 0.9em;
	text-align: left;
	width: 265px;
}

.lien_direct .fa
{
	pointer-events: none;
}

@media screen and (max-width: 640px)
{
	.tooltip_lien_direct
	{
		transform: translateY(100%);
		right: 0;
		left: auto;
	}
	
	.tooltip_lien_direct:before
	{
		left: auto;
		right: 0px;
	}
}

input[type=text].case_a_copier
{
	display: block;
	background-color: #557e84;
	color: #98d5d4;
	font-size: 0.9em;
	width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: no-wrap;
	padding: 3px 6px;
	float: left;
	line-height: 20px;
	margin-bottom: 5px;
}

.tooltip_lien_direct .copier
{
	display: block;
	float: left;
	width: 65px;
	padding: 3px 6px;
	font-size: 0.9em;
	margin: 0;
}



/* Navigation à un autre topic */
/* --------------------------- */

.retour_listeTopics,
.suggestionTopic
{
	height: 40px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
	background-color: #FFF;
	width: 100%;
	position: relative;
}

.retour_listeTopics
{
	line-height: 40px;
	padding-left: 10px;
	margin-bottom: 10px;
}

.suggestionTopic
{
	position: relative;
}

@media screen and (min-width: 641px)
{
	.retour_listeTopics,
	.suggestionTopic
	{
		height: 70px;
		float: left;
		background-color: white;
		
		-webkit-transition: all .3s linear;
		-moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		-o-transition: all .3s linear;
		transition: all .3s linear;
	}

	.retour_listeTopics
	{
		width: 200px;
		margin-right: 20px;
		text-align: center;
		line-height: 70px;
		font-size: 1.1428em;
		font-weight: 600;
	}

	.suggestionTopic
	{
		width: calc(100% - 200px - 20px);
		float: right;		
	}
	
	.suggestionTopic.milieu
	{
		width: 100%;
		background-color: #98d5d4;
	}

}

.suggestionTopic.plugin
{
	width: 100%;
	height: auto;
}

.suggestionTopic p
{
	margin: 0;
	white-space: nowrap;
	max-width: 240px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.suggestionTopic.plugin p
{
	max-width: none;
	text-overflow: overflow;
	overflow: visible;
	white-space: normal;
}

.suggestionTopic.plugin .apercu
{
	height:100%;
	position: absolute;
}

.suggestionTopic.plugin .legende
{
	position: relative;
	width: 74%;
	float: left;
	top: 0;
	left: 26%;
	transform: none;
	padding: 20px;
}

.suggestionTopic.plugin .date_post
{
	margin-bottom: 10px;
}

.suggestionTopic.plugin p + .date_post
{
	margin-top: 10px;
}

.suggestionTopic.plugin a
{
	color: #50a7b4;
	font-weight: normal;
}

.suggestionTopic .apercu
{
	height: 40px;
	width: 60px;
	background-size: cover;
	background-color: #557e84;
	background-position: center;
}

.suggestionTopic .legende
{
	position: absolute;
	top: 50%;
	left: 70px;
	transform: translateY(-50%);
	width: calc(100% - 100px);
}

.suggestionTopic .flag
{
	display: none;
}

@media screen and (min-width: 641px)
{
	.suggestionTopic .flag
	{
		display: block;
	}

	.suggestionTopic .legende
	{
		left: 100px;
		width: auto;
	}
}
	

@media screen and (min-width: 641px)
{
	.suggestionTopic .apercu
	{
		height: 70px;
		width: 26%;
		float: none;
	}
	
	.suggestionTopic .legende
	{
		left: calc(26% + 20px);
	}
}

.suggestionTopic .apercu.generique
{
	background-size: auto 80%;
	background-repeat: no-repeat;
}

/* Hover */

@media screen and (min-width: 641px)
{

	.retour_listeTopics:hover,
	.suggestionTopic:hover .titre_topic
	{
		color: #557e84;
	}

	.retour_listeTopics:hover
	{
		margin-left: -10px;
	}

	.suggestionTopic:hover
	{
		margin-right: -10px;
	}

}
.suggestions
{
	position: relative;
	margin-top: 40px;
}

.suggestions .grid-item
{
	margin-right: 20px;
	float: left;
}

@media screen and (min-width: 641px)
{
	.suggestions
	{
		margin-top: 0;
	}
	
	.suggestions .grid-item
	{
		width: calc(100% / 3 - 40px / 3);
	}

}

.suggestions .grid-item:nth-child(3n + 1)
{
	margin-right: 0;
}

/* Auteurs autorisés */
/* ----------------- */

.post.repondre .termine
{
	line-height: 40px;
}

.post.repondre .participants_autorises .participant_autorise,
.par_auteurs .participant_autorise
{
	width: 45px;
	height: 45px;
	border-radius: 45px;
	opacity: 1;
	overflow: hidden;
	position: relative;
	display: inline-block;
	margin-right: 10px;
	font-family: "Colporteur";
	line-height: 35px;
	font-size: 30px;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

.par_auteurs
{
	margin-top: 5px;
}

.par_auteurs .participant_autorise
{
	width: 15px;
	height: 15px;
	line-height: 12px;
	font-size: 10px;
	margin-right: 2px;
	margin-left: 2px;
	display: inline-block;
	vertical-align: bottom;
}

.post.repondre .participants_autorises .participant_autorise img,
.par_auteurs .participant_autorise img
{
	opacity: 1;
	display: block;
}

.participants_autorises
{
    text-align: center;
	margin-top: 10px;
}


/* Répondre */
/* -------- */

.post.repondre .infos_auteur .avatar,
.post.repondre .principal
{
	color: #557e84;
	background-color: #98d5d4;
	background-image: none;
}


.post.repondre .infos_auteur .avatar .fa,
.nouveauTopic .infos_auteur .avatar .fa
{
	line-height: 80px;
}


.post.repondre .principal
{
	padding: 20px;
	height: auto;
	min-height: 80px;
}

.post.repondre .avatar .fa-stack,
.nouveauTopic .avatar .fa-stack
{
	font-size: 0.7em;
}

.post.repondre .avatar .text-danger
{
	color: #c1f0ef;
}

.post.repondre .closed
{
	padding-bottom: 5px;
}

.post.repondre .closed .repondreAccordeon
{
	display: none;
	height: 0;
}

.post.repondre .drop_zone
{
	background-color: transparent;
	border: 1px dashed #557e84;
	border-radius: 6px;
}

.nouveauTopic .drop_zone
{
	color: #557e84;
	background-color: #98d5d4;
	background-image: none;
	border-radius: 6px;
}

.post.repondre .drop_zone input[type=text],
.nouveauTopic .drop_zone input[type=text]
{
	display: none;
}

.post.repondre .drop_zone .drop_area
{
	border-radius: 10px;
}

.post.repondre .boutonJaune:not(.sauvegarder)
{
	margin: auto;
	margin-top: 20px;	
}

/*.post.repondre select
{
	background-size: auto 80%;
	background-repeat: no-repeat;
	background-position: left 4px center;
	padding-left: 30px;
}*/

.post.repondre .autre_auteur,
.nouveauTopic .autre_auteur
{
	display: none;
}

.post.repondre .instructions:before,
.nouveauTopic .drop_zone .instructions:before
{
	content: none;
}

.post.repondre .instructions:after,
.nouveauTopic .instructions:after
{
	width: 409px;
	height: 79px;
	max-width: 100%;
	content: " ";
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("/img/forum/instructions.png");
	margin-top: 30px;
	opacity: 0.2;
}

#repondreForum .drop_zone:hover .instructions:after,
.nouveauTopic .drop_zone:hover .instructions:after
{
	opacity: 0.4;
}

#repondreForum .drop_zone.multiple,
.nouveauTopic .drop_zone.multiple
{
	min-height: 200px;
}

#repondreForum .drop_zone .instructions,
.nouveauTopic .drop_zone .instructions
{
    font-size: 1em;
}

#repondreForum a
{
	color: #f34b18;
}

#repondreForum a:hover
{
	color: #ff754b;
}

@media screen and (min-width: 641px)
{
	
	.post.repondre .boutonJaune
	{
		width: calc((70% - 20px) / 2);
	}

	.post.repondre .auteur,
	.post.repondre .coauteurs,
	.post.repondre .autre_auteur
	{
		float: left;
	}

	.post.repondre .auteur,
	.post.repondre .autre_auteur
	{
		width: 30%;
	}

	.post.repondre .coauteurs
	{
		max-width: calc(70% - 20px);
		margin-left: 20px;
	}

}

.repondreConnexion
{
	margin-top: 20px;
	margin-bottom: 15px;
}

.post.repondre .repondreConnexion .boutonJaune
{
	margin-right: 6px;
	margin-left: 6px;
	position: relative;
}

.votrePremierPost
{
	color: #1e4242;
	margin: 0;
	font-size: 0.85em;
	padding-left: 12px;
	padding-top: 8px;
}

.votrePremierPost span
{
	color: #557e84;
}

@media screen and (max-width: 641px)
{
	.post.repondre .repondreConnexion .boutonJaune
	{
		display: block;
		margin-top: 5px;
		margin-bottom: 5px;
	}
}

/* Créer un topic */
/* -------------- */

.categorieForum
{
	position: relative;
	padding-left: 30px;
	margin-top: 20px;
}

.categorieForum img
{
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	max-height: 20px;
}

.categorieForum:first-child img
{
	top: 20px;
}

.nouveauTopic .input-wrapper:not(.requis) > label:after
{
	content: " (facultatif)";
	color: #557e84;
	font-weight: normal;
}

/* Boutons après l'envoi d'une image */
/* --------------------------------- */

.boutonsApresPost
{
	background-color: #557e84;
	height: 50px;
}

.boutonsApresPost > div
{
	text-align: center;
	text-transform: uppercase;
	padding: 5px;
	cursor: pointer;
	float: left;
	color: #98d5d4;
	border-right: 1px solid #98d5d4;
	width: calc(100% / 3);
	font-size: 0.9em;
	font-weight:bold;
	position: relative;
	font-size: 0.8em;
	height: 100%;
}

.boutonsApresPost > div > .fa
{
	margin-right: 6px;
}

.boutonsApresPost > .supprimerApresPost
{
	border-right: none;
	background-color: #dd3817;
	color: #f7cbbc;
}

.boutonsApresPost > div:hover
{
	background-color: #3f656b;
}

.boutonsApresPost > .supprimerApresPost:hover
{
	background-color: #bf2c0e;
}

.boutonsApresPost:after
{
	display: block;
	content: " ";
	clear: both;
}

/* -------------------------------------------------------------------------- */
/*                               NAVIGATION                                   */
/* -------------------------------------------------------------------------- */

#nav_buttons,
#nav_partage,
.btn_nav.retour
{
	display: none;
}

@media screen and (min-width: 770px)
{
	#nav_buttons,
	#nav_partage
	{
		position: fixed;
		right: 20px;
		display: block;
	}

	#nav_buttons
	{
		top: 50%;
		transform: translateY(-50%);
	}

	#nav_partage
	{
		bottom: 0;
	}

	.btn_nav
	{
		border: 2px solid #557e84;
		width: 44px;
		height: 44px;
		border-radius: 44px;
		margin: 10px auto;
		cursor: pointer;
		
		-webkit-transition: all .3s linear;
		-moz-transition: all .3s linear;
		-ms-transition: all .3s linear;
		-o-transition: all .3s linear;
		transition: all .3s linear;
	}
	
	.btn_nav:hover
	{
		background-color: #557e84;
	}

	.btn_nav.up
	{
		background-position: top center;
		background-image: url("/img/globales/nav_up.png");
	}

	.btn_nav.up:hover
	{
		background-position: bottom center;
	}

	.btn_nav.down
	{
		background-position: bottom center;
		background-image: url("/img/globales/nav_down.png");
	}

	.btn_nav.down:hover
	{
		background-position: top center;
	}

	.btn_nav.share
	{
		background-position: top center;
		background-image: url("/img/globales/nav_share.png");
		margin-bottom: 20px;
		
		-webkit-transition: background-color .3s linear;
		-moz-transition: background-color .3s linear;
		-ms-transition: background-color .3s linear;
		-o-transition: background-color .3s linear;
		transition: background-color .3s linear;
	}

	.btn_nav.share:hover
	{
		background-position: bottom center;
	}
	
	.btn_nav.retour
	{
		position: fixed;
		top: 20px;
		left: 325px;
		margin: 0;
		display: block;
		
		background-position: center left;
		background-image: url("/img/globales/nav_left.png");
	}
	
	.btn_nav.retour:hover
	{
		background-position: center right;
	}
}

/* Boutons de partage */
/* ------------------ */

#partage
{
	top: -5px;
	bottom: auto;
	left: auto;
	right: 0;
	background-color: #557e84;
	width: 160px;
	height: 60px;
	transform: translateY(-100%);
	padding: 10px;
}

#partage:before
{
	top: auto;
	bottom: -8px;
	right: 15px;
	left: auto;
	border-width: 8.7px 5px 0 5px;
	border-color: #557e84 transparent transparent;
}

#partage > div
{
	width: 40px;
	height: 40px;
	border: 2px solid #98d5d4;
	color: #98d5d4;
	float: left;
	margin-right: 10px;
	border-radius: 40px;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}

#partage > div:last-child
{
	margin-right: 0;
}

#partage > div:hover
{
	background-color: #98d5d4;
	color: #557e84;	
}

/* -------------------------------------------------------------------------- */
/*                                 MODALES                                    */
/* -------------------------------------------------------------------------- */

.modale
{
	background-color: #98d5d4;
	padding: 40px;
	width: calc(100% - 20px);
	position: fixed;
	top: 50vh;
	left: 50vw;
	transform: translateY(-50%) translateX(-50%);
	z-index:103;
	pointer-events: none;
	opacity: 0;
	max-width: 100%;
	
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}

.modale:after
{
	display: block;
	content: " ";
	clear: both;
}

@media screen and (max-width: 641px)
{
	.modale
	{
		max-height: 100vh;
		overflow: auto;
	}
}

@media screen and (min-width: 641px)
{
	.modale
	{
		min-width: 460px;
		width: auto;
		height: auto;
	}
}

.modale.visible
{
	pointer-events: all;
	opacity: 1;
}

.modale .close:before,
.modale .flecheRetour:before,
.alert .close:before
{
	width: 20px;
	height: 20px;
	font-family: FontAwesome;
	position: absolute;
	top: 10px;	
	display: block;
	font-size: 20px;
	text-align: right;
	cursor: pointer;
}

.modale .close:before,
.modale .flecheRetour:before
{
	color: #1e4242;
}

.alert .close:before
{
	font-size: inherit;
}

.modale .close:before,
.alert .close:before
{
	content: "\f00d";
	right: 10px;
}

.modale .flecheRetour:before
{
	content: "\f177";
	left: 10px;
}

.modale .close:hover:before,
.modale .flecheRetour:hover:before
{
	color: #557e84;
}

/* Modale de confirmation */
/* ---------------------- */

.boutonsConfirmerAnnuler
{
	margin-top: 20px;
	overflow: hidden;
}

.boutonsConfirmerAnnuler div
{
	width: calc(50% - 5px);
	float: left;
	margin-right: 10px;
}

.boutonsConfirmerAnnuler div:last-child
{
	margin-right: 0;
}


@media screen and (max-width: 700px)
{
	.modale
	{
		max-width: 100vw;
		padding: 10px;
		padding-top: 30px;
	}
	
	.modale .close:before,
	.modale .flecheRetour:before,
	.alert .close:before
	{
		top: 5px;	
	}
	
	.boutonsConfirmerAnnuler div
	{
		width: 100% !important;
		float: none;
		margin-right: 0;
	}
}

/* Fond semi-opaque */
/* ---------------- */

#modaleScreen
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 12;
	opacity: 0;
	pointer-events: none;
	background-color: #1e4242;
	
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}

#modaleScreen.visible
{
	pointer-events: all;
	opacity: 0.6;
}

/* Modale de connexion */
/* ------------------- */

#modaleConnexion
{
	text-align: center;
	
}

#modaleConnexion .choixConnexion
{
	font-family: "Colporteur";
	color: #1e4242;
	font-size: 2em;
	cursor: pointer;
}

#modaleConnexion .choixConnexion:hover
{
	color: #557e84;
}

#modaleConnexion .ou
{
	font-size: 1.285em;
	color: white;
	background-color: #557e84;
	padding: 8px;
	border-radius: 50px;
	width: 40px;
	height: 40px;
	line-height: 24px;
	margin: 20px auto;
}

#modaleConnexion form
{
	width: 100%;
	max-width: 300px;
	margin: auto;
}

#modaleConnexion input[type=text],
#modaleConnexion input[type=password]
{
	/*border: 1px solid #557e84;*/
	text-align: center;
}

#modaleConnexion label
{
	/*background-color: transparent;*/
	font-weight: bold;
}

#modaleConnexion .avatar
{
	width: 100px;
	height: 100px;
	background-color: #fefbcf;
	color: #c3bf8a;
	border-radius: 50px;
	margin: auto;
	margin-bottom: 25px;
	font-size: 60px;
	line-height: 80px;
	font-family: "Colporteur";
	background-size: cover;
	background-position: center;
	
	
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}

@media screen and (max-width: 641px)
{
	#modaleConnexion .boutonJaune
	{
		white-space: normal;
	}
}

#meConnecter, 
#jeSuisNouveau,
#motDePasseOublie
{
	display: none;
	height: 0;
}

#jeSuisNouveau
{
	max-width: 400px;
	font-size: 1.15em;
}

#jeSuisNouveau .boutonJaune
{
	margin-top: 20px;
	position: relative;
}

#jeSuisNouveau a
{
	color: #0385b0;
}

#jeSuisNouveau a:hover
{
	color: #fe6131;
}

#choixMotDePasseOublie
{
	font-size: 0.85em;
	text-decoration: underline;
	opacity: 0.6;
	cursor: pointer;
}

#choixMotDePasseOublie:hover
{
	opacity:1;
}

.cookies
{
	width: 150px;
	height: 110px;
	background-image: url('/img/globales/cookies.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: auto;
}

.message_erreur
{
	font-size: 0.85em;
	color: #ee391b;
}

/* Modale choisir la couverture d'un topic */
/* --------------------------------------- */

#modaleImageTopic
{
	max-height: 95vh;
	overflow: hidden;
	max-width: 100%;
	width: 720px;
}

#couvertureChoix
{
	overflow-Y: scroll;
	max-height: calc(95vh - 80px - 0.85em - 30px);
}

#couvertureChoix img
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

#couvertureChoix input[type=radio]
{
	display: none;
}

#couvertureChoix .label-wrapper
{
	width: 190px;
	border: 3px solid #98d5d4;
	box-sizing: content-box;
	overflow: hidden;
}

#couvertureChoix .label-wrapper.actif
{
	border: 3px solid #ffdc63;
}

#couvertureChoix label
{
	display: block;
	width: 100%;
	height: 0;
	background-color: white;
	position: relative;
}

/* Notification après envoi d'un post */
/* ---------------------------------- */

#modaleNotifApresPost p,
#modaleNotifApresPost .lubienPicker,
#modaleLienApresPost p,
#modaleLienApresPost input
{
	margin-bottom: 10px;
}

/* -------------------------------------------------------------------------- */
/*                            MESSAGES DU SITE                                */
/* -------------------------------------------------------------------------- */

.alert
{
	position: fixed;
	background-color: #557e84;
	color: #98d5d4;
	padding: 18px 10px;
	/*padding-top: calc(1em + 15px);*/
	width: 100%;
	font-size: 0.9em;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
	z-index: 100;
	left: 0;
	
	transform:translateY(100%);
	bottom: 0;	
	
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-ms-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
}

@media screen and (min-width: 641px)
{
	.alert
	{
		left: auto;
		right: 10px;
		max-width: 325px;
		padding: 25px 20px;
	}
}

.alert.error
{
	background-color: #dd3817;
	color: #f7cbbc;
}

.alert .close
{
	opacity: 0.4;
}

.alert .close:hover
{
	opacity: 1;
}

.alert ul,
.alert li
{
	margin: 0;
	padding: 0;
}

.alert li
{
	margin-left: 15px;
}

/* -------------------------------------------------------------------------- */
/*                            EDITER MON PROFIL                               */
/* -------------------------------------------------------------------------- */


/* Editer mon profil */
/* ----------------- */

.avatarPrincipal
{
	position: absolute;
	top: 15px;
	right: 15px;
	color: #ffdc63;
	font-weight: bold;
}

@media screen and (max-width: 640px)
{

	.avatarPrincipal + #editerMonProfil
	{
		margin-top: 25px;
	}

}

/*.dropzone_area
{
	background-color: #f1f1f1;
	background-size:cover;
	border: 1px solid #f1f1f1;
	text-align: center;
	margin: auto;
	margin-bottom: 20px;
	position: relative;
}*/

.editImageDeProfil
{
	width: 150px;
	height: 150px;
}

.editImage:hover
{
	border-color: #c1d9dc;
}

.editImage:before
{
	font-family: "FontAwesome";
	content: "\f040";
	color: #1e4242;
	position: absolute;
	right: 5px;
	top: 5px;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.6);
	width: 20px;
	height: 20px;
	border-radius: 20px;
	line-height: 20px;
	text-align: center;
	display: none;
	pointer-events: none;
}

.editImage:hover:before
{
	color: #557e84;
	display: block;
}

.editImage img
{
	width: 100%;
	height: 100%;
	display: block;
}

.editImageDeTopic
{
	cursor: pointer;
}

@media screen and (min-width: 641px)
{
	
	
	.editImage
	{
		position: absolute !important;
		left: 0;
		margin-bottom: 0;
	}
	
	/* Avatar */
	
	.editionPerso
	{
		position: relative;
		padding-left: 170px;
		min-height: 150px;
	}
	
	/* Topic */
	
	#editerTopic
	{
		position: relative;
		padding-left: 210px;
		min-height: 150px;
	}
	
	.editImageDeTopic
	{
		max-width: 200px;
		max-height: 100%;
		overflow: hidden;
	}
	
	#editerTopic .boutonJaune.small
	{
		float: none;
	}
	
	#editerTopic .smallBlue
	{
		font-size: 0.85em;
		color: #557e84;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	
}

input[name="titre"]
{
	font-weight: bold;
	font-family: "Open sans", sans-serif;
}

.editImage .fa
{
	font-size: 60px;
	line-height: 150px;
	pointer-events: none;
	position: absolute;
	left: 0;
	right: 0;
}

/* Ajouter un avatar */
/* ----------------- */

.ajouterAvatar
{
	color: #ff9c5f;
	font-weight: bold;
	cursor: pointer;
}

.ajouterAvatar:hover
{
	text-decoration: underline;
}

.ajouterAvatar ~ .accordeon_body
{
	margin-top: 25px;
}

.ajout_avatar_list
{
	margin-top: 15px;
}

.ajout_avatar
{
	width: 30%;
	margin-right: 5%;
	float: left;
	text-align: center;
	margin-top: 20px;
	text-transform: none;
}

.ajout_avatar .ajout
{
	width: 70px;
	height: 70px;
	padding: 15px;
	border-radius: 70px;
	background-color: #ffdc63;
	content: " ";
	display: block;
	margin: auto;
	margin-bottom: 7px;
}

.ajout_avatar:not(.non_dispo) .ajout
{
	font-size: 40px;
	font-family: "FontAwesome";
	color: #b58f39;
}

.ajout_avatar:not(.non_dispo) .ajout:before
{
	content: "\f067";
	display: block;
	font-size: 40px;
}

.ajout_avatar:not(.non_dispo)
{
	cursor: pointer;
}

.ajout_avatar:not(.non_dispo):hover
{
	color: #557e84;
}

.ajout_avatar:nth-child(3n)
{
	margin-right: 0;
}

.ajout_avatar .nom
{
	font-weight: bold;
}

.ajout_avatar .posts
{
	font-size: 0.85em;
}

.ajout_avatar.non_dispo .posts
{
	color: #dd3817;
}

.ajout_avatar.non_dispo .nom
{
	opacity: 0.4;
}

.ajout_avatar.non_dispo .ajout
{
	background-color: #557e84;
	opacity: 0.4;
}


.ajout_avatar_list:after
{
	display: block;
	content: " ";
	clear: both;
}

/* -------------------------------------------------------------------------- */
/*                                 MES POSTS                                  */
/* -------------------------------------------------------------------------- */

.listePosts img
{
	display: block;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
}

.listePosts .grid-item
{
	background-color: white;
}

.listePosts .grid-item:hover
{
	margin-top: 0;
}

.image-wrapper
{
	width: 100%;
	height: 0;
}

#resultats_mesPosts,
#resultats_listeAuteurs,
#resultatsProjets
{
	/*background-image: url("/img/globales/spinner.gif");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 32px;*/
	min-height: 32px;
	
}

@media screen and (max-width: 640px)
{
	#resultats_mesPosts .grid-item
	{
		width: calc(100% / 3 - 30px / 4);
	}
}

/* Bouton loadmore */
/* --------------- */

.loadmorebtn
{
	text-transform: uppercase;
	padding: 15px 10px;
	border: 2px solid #557e84;
	color: #557e84;
	font-weight: bold;
	max-width: 260px;
	margin: auto;
	text-align: center;
	margin-top: 25px;
	position: relative;
	cursor: pointer;
	clear: both;
	
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}

.loadmorebtn .fa
{
	margin-right: 5px;
}

.loadmorebtn:hover
{
	background-color: #557e84;
	color: #98d5d4;
}

/* Supprimer */
/* --------- */

.bouton_supprimer
{
	position: absolute;
	top: 5px;
	right: 5px;
	width: 25px;
	height: 25px;
	border-radius: 25px;
	background-color: #dd3817;
	color: #f7cbbc;
	text-align: center;
	cursor: pointer;
	z-index:2; 
}

.bouton_supprimer:before
{
	content: "\f00d";
	font-family: "FontAwesome";
	font-size: 15px;
	display: block;
	margin-top: 50%;
	transform: translateY(-50%);
}

.bouton_supprimer:hover
{
	background-color: #c43114;
	color: white;
}

#modaleSuppression img
{
	display: block;
	margin-bottom: 15px;
}

/* Tri */
/* --- */

.options_tri
{
	float: right;
	margin-bottom: 25px;
}

.options_tri + *
{
	clear: both;
}

.tri
{
	float: right;
	border: 2px solid #557e84;
	border-left-width: 1px;
	border-right-width: 1px;
	cursor: pointer;
	font-size: 0.85em;
	padding: 5px 10px;
	font-weight: bold;	
	background-color: transparent;
	color: #557e84;
	
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}

.tri:last-child
{
	border-left-width: 2px;
}

.tri:first-child
{
	border-right-width: 2px;
}

.tri.actif
{
	background-color: #557e84;
	color: #ffdc63;
	cursor: default;	
}

.tri:not(.actif):hover
{
	background-color: #fefbcf;
}

/* -------------------------------------------------------------------------- */
/*                              LISTE DES AUTEURS                             */
/* -------------------------------------------------------------------------- */

#listeAuteurs
{
	clear: both;
}

#listeAuteurs .image-wrapper
{
	width: 40px;
	padding-bottom: 40px;
	font-family: "colporteur";
	font-size: 30px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

#listeAuteurs .image-wrapper span
{
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	transform: translateX(-50%) translateY(-60%);
}

#listeAuteurs .image-wrapper img
{
	width: 100%;
	display: block;
}

#listeAuteurs .grid-item
{
	width: 100%;
	padding: 0;
}

#listeAuteurs .nom,
#listeAuteurs .details
{
	padding: 5px 10px;
	width: calc((100% - 40px) / 2);
	height: 100%;
}

#listeAuteurs .nom
{
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 1.142em;
	font-family: "colporteur";
	position: absolute;
	left: 40px;	
	top: 0;
	
}

#listeAuteurs .details
{
	font-size: 0.72em;
	font-weight: normal;
	position: absolute;
	right: 0;
	bottom: 0;
	text-align: right;
}

#listeAuteurs .details span
{
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	display: inline-block;
	margin: 0;
}

#listeAuteurs .details span:first-child
{
	margin-top: 4px;
}

#listeAuteurs .details span:last-child
{
	margin-top: -4px;
}

@media screen and (max-width: 640px)
{
	#listeAuteurs .nb_posts.blanc  		{ color: #1e4242;}
	#listeAuteurs .nb_posts.jaune  		{ color: #e2be43;}
	#listeAuteurs .nb_posts.vert  		{ color: #80a945;}
}

@media screen and (min-width: 641px)
{
	#listeAuteurs .grid-item
	{
		width: calc((100% - 20px) / 8 - 140px / 8);
		background-color: #557e84;
	}
	
	#listeAuteurs .image-wrapper
	{
		padding-bottom: 100%;
		width: 100%;
		font-size: 80px;
		text-align: center;
		position: relative;
	}
	
	#listeAuteurs .image-wrapper img
	{
		width: 100%;
	}
	
	#listeAuteurs .nom,
	#listeAuteurs .details
	{
		position: relative;
		width: 100%;
		right: auto;	
		top: auto;
		bottom: auto;
		left: auto;	
		text-align: center;
		color: #98d5d4;
	}
	
	#listeAuteurs .nom
	{
		color:  #fefbcf;
		background-color: #ff9c5f;
	}
	
}

/* -------------------------------------------------------------------------- */
/*                               EDITER UN TOPIC                              */
/* -------------------------------------------------------------------------- */

.coauteur
{
	height: 30px;
	border-radius: 30px;
	display: inline-block;
	margin-bottom: 5px;
	margin-right: 5px;
	position: relative;
	padding: 0 !important;
}

.coauteur:not(.boutonJaune)
{
	background-color: #557e84;
	color: #98d5d4;
}

.coauteur.boutonJaune
{
	width: 30px;
}

.coauteur_check
{
	display: none;
}

.coauteur_check:not(:checked) + label
{
	display: none;
}

.coauteur:not(.moi)
{
	cursor: pointer;
}

.coauteur img,
.coauteur .img_placeholder
{
	width: 30px;
	height: 30px;
	border-radius: 30px;
	display: block;
	float: left;
	border: 1px solid #557e84;
	position: relative;
}

.coauteur .img_placeholder span
{
	font-family: Colporteur;
	font-size: 20px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 40%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}

.coauteur:not(.moi):not(.boutonJaune):hover
{
	background-color: #dd3817;
	background-image: url('/img/globales/bg_delete.png');
	background-size: 70%;
	background-position: center;
	background-repeat: no-repeat;
	/*color: #f7cbbc;*/
}

.coauteur:not(.moi):hover img,
.coauteur:not(.moi):hover .img_placeholder
{
	opacity: 0.4;
}

ul.choisirLubien
{
	position: absolute;
	width: calc(100% - 80px);
	z-index: 10;
}

.choisirLubien li
{
	background-color: #1e4242;
	color: #98d5d4;
	padding: 3px 5px;
	cursor: pointer;
	font-size: 0.9em;
	border-bottom: 1px solid #98d5d4;
	position: relative;
}

.choisirLubien li:last-child
{
	border: none;
	margin-bottom: 0;
}

.choisirLubien li:hover
{
	background-color: #557e84;
}

.choisirLubien .avatar,
#liensMenu .choisirLubien .avatar
{
	width: 25px;
	height: 25px;
	border-radius: 25px;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #fefbcf;
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle;
	position: relative;
	transform: none;
}

/* -------------------------------------------------------------------------- */
/*                              MESSAGERIE                                    */
/* -------------------------------------------------------------------------- */

#messagerie
{
	position: relative;
	width: 100%;
	
	-webkit-transition: transform .3s linear;
	-moz-transition: transform .3s linear;
	-ms-transition: transform .3s linear;
	-o-transition: transform .3s linear;
	transition: transform .3s linear;
}

#bloc_conv,
#bloc_messages
{
	position: relative;	
}

#bloc_conv
{
	overflow: hidden;
}

@media screen and (max-width: 640px)
{
	#bloc_conv,
	#bloc_messages
	{
		width: calc(100vw - 20px);
	}
	
	#bloc_messages
	{
		position: absolute;
		right: calc(-10px - 100%);
	}
	
	#bloc_conv
	{
		min-height: calc(100vh - 95px);
	}
}

@media screen and (min-width: 641px)
{
	#messagerie
	{
		max-width: calc(100% - 120px);
		margin: auto;		
	}
	
	#bloc_conv
	{
		height: 75vh;
		width: 300px;
		margin-right: 15px;
		overflow: visible;
	}
}

#bloc_conv,
#bloc_messages
{
	float: left;			
}

#messagerie:after
{
	content: " ";
	display: block;
	clear: both;
}

#bloc_messages
{
	background-color: white;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
	height: calc(100vh - 95px);
	
}

@media screen and (min-width: 641px)
{
	#bloc_messages
	{
		display: block;
		width: calc(100% - 315px);
		height: 75vh;
	}
}

/* Bloc conversations */
/* ------------------ */

.conversation.selected
{
	color: #1e4242;
}

.conversation
{
	background-color: white;
	padding: 10px;
	border-bottom: 1px solid #557e84;
	color: #557e84;
	position: relative;
}

.conversation:last-child
{
	border-bottom: none;
}

.conversation:not(.selected)
{
	background-color: #e2efef;
	cursor: pointer;
}

.conversation:not(.selected):hover
{
	background-color: #98d5d4;
}

.conversation span
{
	display: block;
	padding-left: 40px;
}

.conversation .nom
{
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.conversation .message_auteur
{
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.conversation.nonlu
{
	background-color: #fefbcf;
}

.conversation.nonlu:hover
{
	background-color: #ffe895;
}

#creerConversation
{
	position: absolute;
	right: 10px;
	top: 50%;
	margin-bottom: 0;
	margin-top: 0;
	transform: translateY(-50%);
}

#conversations
{
	margin-top: 50px;
	max-height: calc(100% - 50px);
	overflow-y: auto;
}

#conversations .notification
{
	
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
}

#aucuneConversation,
#aucunMessage
{
	padding: 0 50px;
	padding-top: 30px;
	font-size: 0.85em;
	text-align: center;
	opacity: 0.5;
	
}

/* Bloc messages */
/* ------------- */

#messages
{
	position: absolute;
	width: 100%;
	top: 50px;
}

#messages
{
	max-height: calc(100% - 50px - 90px);
	overflow-y: auto;
}

.message
{
	padding: 5px;
}

.message:first-child
{
	margin-top: 5px;
}

@media screen and (min-width: 641px)
{
	.message
	{
		padding: 10px 20px;
	}
	
	.message:first-child
	{
		margin-top: 20px;
	}

}

.message:after
{
	display: block;
	content: " ";
	clear: both;
}


.message.nonlu p
{
	font-weight: bold;
}

#messages .message:not(.nonlu) .message_box:after
{
	content: "\f00c";
	font-family: "FontAwesome";
	display: block;
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: #645f59;
	font-size: 0.714em;
	opacity: 0.5;
	line-height:1em;
}

.entete_messages,
.entete_conversations
{
	background-color: #83bcbb;
	padding: 0 10px;
	height: 50px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.entete_messages > div
{
	margin-top: 25px;
	transform: translateY(-50%);
}

.entete_messages .btn_conv
{
	position: absolute;
	top: 0;
	font-size: 20px;
	color: #557e84;
	cursor: pointer;
}

.entete_messages .btn_conv:hover
{
	color: #1e4242;
}

.entete_messages #btn_delete
{
	right: 10px;
}

.entete_messages #btn_update
{
	right: 70px;
}

.entete_messages #btn_addparticipant
{
	right: 100px;
}

.entete_messages #btn_mute
{
	right: 35px;
	text-align: center;
	width: 22px;
}

.entete_messages #btn_mute .off,
.entete_messages #btn_mute .on
{
	display: inline-block;
}

.entete_messages #btn_mute .off
{
	color: #1e4242;
}

.entete_messages #btn_mute.active .off,
.entete_messages #btn_mute.active:hover .on,
.entete_messages #btn_mute.desactive .on,
.entete_messages #btn_mute.desactive:hover .off
{
	display: none;
}

.entete_messages #btn_mute.active:hover .off,
.entete_messages #btn_mute.desactive:hover .on
{
	display: inline;
}

.entete_messages #btn_update:hover .fa
{
	display: block;
	-webkit-animation: rotate360 1s infinitelinear;
    animation: rotate360 1s infinite linear;
}

@keyframes rotate360
{
	0%   {transform: rotate(0deg);}
	25%   {transform: rotate(90deg);}
	50%   {transform: rotate(180deg);}
	75%   {transform: rotate(270deg);}
	100%   {transform: rotate(360deg);}
}

@-webkit-keyframes rotate360
{
	0%   {transform: rotate(0deg);}
	25%   {transform: rotate(90deg);}
	50%   {transform: rotate(180deg);}
	75%   {transform: rotate(270deg);}
	100%   {transform: rotate(360deg);}
}

.entete_messages .participants
{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 120px);
	margin-left: 25px;
}

.message_box
{
	padding: 10px 13px;
	border-radius: 10px;
	width: calc(100% - 80px);
	max-width: none;
	position: relative;
	font-size: 0.9em;
}

.message_box a
{
	text-decoration: underline;
}

.message_box a:hover
{
	color: #557e84;
}

@media screen and (min-width: 641px)
{
	.message_box
	{
		max-width: calc(100% - 100px);
		min-width: 60%;
		line-height: 1.3em;
		font-size: 1em;
	}
	
	.entete_messages .participants
	{
		margin-left: 0;
	}
}

.theirs .message_box
{
	background-color: #98d5d4;
	margin-left: 20px;
	float: left;
}

.mine .message_box
{
	background-color: #ffe895;
	float: right;
	margin-left: 0;
	margin-right: 20px;
}

.message_box:before
{
	content: " ";
	display: block;
	position: absolute;
	top: 10px;
}

.theirs .message_box:before
{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7.5px 10px 7.5px 0;
	border-color: transparent #98d5d4 transparent transparent;
	left: -10px;
}

.mine .message_box:before
{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7.5px 0 7.5px 10px;
	border-color: transparent transparent transparent #ffe895;
	right: -10px;
}

.message_box .date,
.conversation .date
{
	color: #645f59;
	font-size: 0.714em;
}

.message_auteur
{
	width: 30px;
	height: 30px;
	border-radius: 30px;
	background-color: #fefbcf;
	margin-top: 3px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	text-align: center;
	font-family: "Colporteur";
	line-height: 30px;
	position: relative;
	
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	
}

@media screen and (max-width: 640px)
{
	.message .message_auteur
	{
		width: 20px;
		height: 20px;
	}
	
}

.mine .message_auteur
{
	float: right;
}

.theirs .message_auteur
{
	float: left;
}

#chatSend
{
	margin-bottom: 0;
}

#message_footer
{
	background-color: white;
	width: 100%;
	border-top: 1px solid #98d5d4;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	height: 90px;
}

#message_footer .message
{
	margin-top: 0;
}

#message_footer .message_box
{
	background-color: white;
	border: 1px solid #557e84;
	position: relative;
}

#message_footer textarea
{
	height: calc(10px + 2.8em);
}

#message_footer .sauvegarder
{
	float: right;
	margin-top: 0;
	position: relative;
	bottom: 10px;
}

@media screen and (max-width: 640px)
{
	#message_footer .message_box
	{
		width: 100%;
		margin-right: 0;
		border: none;
	}
	
	#message_footer .message_box:before,
	#message_footer .message_box:after
	{
		content: none;
	}
}

@media screen and (min-width: 641px)
{
	#message_footer .message_box:before
	{
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 7.5px 0 7.5px 10px;
		border-color: transparent transparent transparent #557e84;
		right: -10px;
	}

	#message_footer .message_box:after
	{
		content: " ";
		display: block;
		position: absolute;
		top: 12px;
		
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5.5px 0 5.5px 8px;
		border-color: transparent transparent transparent #fff;
		right: -8px;
	}
	
	#message_footer textarea
	{
		width: calc(100% - 80px);
	}
	
	#message_footer .sauvegarder
	{
		position: absolute;
		right: 10px;
		bottom: 10px;
		margin-bottom: 0;
		float: none;
	}
}

@media screen and (max-width: 640px)
{
	#message_footer .message_auteur
	{
		display: none;
	}
}



.entete_messages .auteur
{
	display: inline-block;
	font-weight: 600;
	vertical-align: middle;
	position: relative;
}

.entete_messages .message_auteur
{
	display: inline-block;
	vertical-align: middle;
}

.entete_messages span
{
	display: none;
}

@media screen and (min-width: 641px)
{
	.entete_messages span
	{
		display: inline-block;
		vertical-align: middle;
	}
	
	.entete_messages .auteur
	{
		margin-right: 10px;
	}
}

.entete_messages .message_auteur
{
	margin-right: 5px;
}

/* Créer conversation (modale) */
/* --------------------------- */

@media screen and (min-width: 641px)
{
	#creationConversation,
	#ajouterParticipant
	{
		width: 500px;
	}
}

@media screen and (max-width: 640px)
{
	#creationConversation,
	#ajouterParticipant
	{
		overflow: visible;
	}
}

.faux_input > *
{
	vertical-align: top;
}

.faux_input .input
{
	width: auto;
	display: inline-block;
	padding: 0;
	min-height: 20px;
}

 .faux_input
{
	min-height: calc(1.4em + 10px);	
	background-color: white;
	padding: 5px;
	cursor: text;
	
}

.lubienAdded
{
	display: inline-block;
	background-color: #1e4242;
	color: #98d5d4;
	font-size: 0.8em;	
	padding: 0.3em;
	border-radius: 4px;
	margin-right: 5px;
	margin-bottom: 5px;
	cursor: pointer;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.lubienAdded:hover
{
	background-color: #dd3817;
	color: #f7cbbc;
}

#creationConversation .boutonJaune,
#ajouterParticipant .boutonJaune
{
	float: right;
	margin-bottom: 0;
}

#contacterModos
{
	clear: both;
	font-size: 0.85em;
	text-align: center;
	cursor: pointer;
	margin-top: 40px;
	text-decoration: underline;
}

#contacterModos:hover
{
	color: #557e84;
}

#ajouterParticipant p
{
	margin-bottom: 15px;
	font-size: 0.85em;
}

/* -------------------------------------------------------------------------- */
/*                              ZONE MODO                                     */
/* -------------------------------------------------------------------------- */

.col-droite,
.col-gauche,
.col-double
{
	width: 100%;
	max-width: none;
}

.col-double
{
	padding: 25px;
}

@media screen and (min-width: 641px)
{
	.col-gauche,
	.col-droite
	{
		float: left;
		width: calc(50% - 10px);
	}
	
	.dashboard .col-droite
	{
		width: calc(40% - 10px);
	}
	
	.dashboard .col-gauche
	{
		width: calc(60% - 10px);
	}
	
	.compte.dashboard .col-droite
	{
		width: calc(60% - 10px);
	}
	
	.compte.dashboard .col-gauche
	{
		width: calc(40% - 10px);
	}
	
	.moderation .col-gauche
	{
		width: calc(40% - 10px);
	}
	
	.moderation .col-droite
	{
		width: calc(60% - 10px);
	}
	
	.profil .col-gauche
	{
		width: calc(35% - 10px);
	}
	
	.profil .col-droite
	{
		width: calc(65% - 10px);
	}
	
	.contact .col-gauche
	{
		width: calc(35% - 10px);
	}
	
	.contact .col-droite
	{
		width: calc(65% - 10px);
	}
	
	.col-gauche
	{
		margin-right: 20px;
	}
}

.col-gauche hr,
.col-droite hr
{
	height: 1px;
	border: none;
	background-color: #557e84;
	color: #557e84;
	position: relative;
}

#modos_en_ligne .modo,
.connexions .modo
{
	height: 40px;
	width: 40px;
	border-radius: 40px;
	background-color: black;
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin-right: 10px;
	background-size: cover;
	font-family: "Colporteur";
	font-size: 20px;
}

#modos_en_ligne .modo.offline img,
.connexions .modo.offline img
{
	opacity: 0.5;
	 -webkit-filter: grayscale(100%);
  	-moz-filter: grayscale(100%);
  	-ms-filter: grayscale(100%);
  	-o-filter: grayscale(100%);
  	filter: gray; /* IE 6-9 */
	filter: grayscale(100%);
}

#modos_en_ligne .modo.plus,
.connexions .modo.plus
{
	background-color: #ff9c5f;
}

#modos_en_ligne .modo.plus .fa,
.connexions .modo.plus
{
	color: #fefbcf;
}

.dashboard .logs tr
{
	position: relative;
}

.dashboard .logs td
{
    font-size: 0.8em;
	padding: 5px 0;
    border: none;
	border-bottom: 1px solid #557e84;
}

.logs td:first-child
{
	width: 30px;
	padding: 5px;
	vertical-align: top;
}


.logs .log_date
{
	text-align: left;
	padding-bottom: 3px;
	color: #a59f97;
}

.bonjour
{
	font-size: 1.15em;
}

.bonjour .boutonJaune
{
	font-size: 0.65em;
	display: inline;
}

/* -------------------------------------------------------------------------- */
/*                                 CONTACT                                    */
/* -------------------------------------------------------------------------- */

.contact .bonjour .lou_lubie
{
	width: 100px;
	height: 100px;
	border-radius: 100px;
	background-size: cover;
	background-image: url('/img/auteurs/avatars/lou-lubie.jpg');
	margin-bottom: 15px;
}


.contact .fa
{
	font-size: 1.4em;
}

.contact .fa-facebook-official
{
	margin-right: 8px;
}

.contact .fa-facebook-official:hover
{
	color: #3b5998;
}

.contact .fa-external-link-square:hover
{
	color: #fe6131;
}

.autre_contacts
{
	background-color: #98d5d4;
}

.autre_contacts a
{
	color: #557e84;
}

.autre_contacts a:hover
{
	color: #fe6131;
}

/* Gestion */

.emails .titre_email
{
	font-weight: bold;
}

.emails .sender
{
	font-size: 0.85em;
}

.emails .email
{
	color: #557e84;
	font-style: italic;
}

.emails .bloc_blanc > .accordeon
{
	margin-bottom: 20px;
}

.emails .date_mail
{
	padding: 2px 4px;
	
	font-size:0.75em;
	border-radius: 3px;
}

.emails .mail_OK .date_mail
{
	color: #5d9e23;
	background-color: #d5eaa2;
}

.emails .mail_KO .date_mail
{
	background-color: #f7cbbc;
	color: #dd3817; 
}

/* -------------------------------------------------------------------------- */
/*                              MODERATION                                    */
/* -------------------------------------------------------------------------- */

.moderation .editImageDeTopic,
.moderation .cantEditImageDeTopic
{
	width: calc(100% + 20px);
	max-width: none;
	position: relative !important;
	margin-left: -10px;
	margin-top: -10px;
	margin-bottom: 25px;
}

.moderation .cantEditImageDeTopic
{
	height: 150px;
	background-color: #557e84;
	background-size: auto 80%;
	background-position: center;
	background-repeat: no-repeat;
}

.moderation .topic_coeur
{
	color: #ee391b;
	font-weight: bold;
}

.moderation .topic_coeur .fa
{
	width: 3.6em;
	text-align: center;
	margin-top: 5px;
}

.moderer
{
	position: relative;
}

.moderer.topic_encours .titre a
{
	color: #1e4242;
	font-weight: bold;
}

.moderer.topic_precedent,
.moderer.topic_suivant
{
	display: none;
}

.moderer.topic_encours
{
	font-weight: bold;
	text-align: center;
}

.moderer .num
{
	font-size: 0.8em;
}

.moderer.topic_encours .titre
{
	font-size: 1.2em;
}

@media screen and (min-width: 641px)
{
	.moderation .editImageDeTopic,
	.moderation .cantEditImageDeTopic
	{
		width: calc(100% + 50px);
		margin-left: -25px;
		margin-top: -25px;
	}
	
	.moderer
	{
		width: 25%;
		float: left;
	}
	
	.moderer.topic_encours
	{
		width: 50%;
	}
	
	.moderer .num,
	.moderer .titre
	{
		display: block;
	}
	
	.moderer.topic_precedent,
	.moderer.topic_suivant
	{
		display: block;
		font-size: 0.9em;
	}
	
	.moderer.topic_encours
	{
		font-weight: bold;
	}
	
	.moderer.topic_suivant
	{
		text-align: right;
		padding-right: 20px;
	}
	
	.moderer.topic_precedent
	{
		padding-left: 20px;		
	}

	.moderer.topic_precedent:before,
	.moderer.topic_suivant:before
	{
		font-size: 20px;
		display: block;
		position: absolute;
		top: 0px;
		font-family: "FontAwesome";
	}
	
	.moderer.topic_precedent:hover,
	.moderer.topic_suivant:hover,
	.moderer.topic_encours .titre a:hover
	{
		color: #50a7b4;
	}

	.moderer.topic_precedent:before
	{
		
		content: "\f100";
		left: 0;
	}

	.moderer.topic_suivant:before
	{
		content: "\f101";
		right: 0;
	}
}

.valider_post
{
	cursor: pointer;
}

.deroulerAuSurvol
{
	display: block;
	width: 100px;
	text-align: center;
	margin: auto;
	white-space: nowrap;
	position: relative;
	margin-top: 7px;
	margin-bottom: -7px;
}

.deroulerAuSurvol span
{
	width: 0;
	overflow: hidden;
	margin-left: 7px;
	display: inline-block;
	white-space: nowrap;
	text-align: left;
	position: relative;
	font-size: 0.9em;
	vertical-align: bottom;
	
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	-ms-transition: all .15s linear;
	-o-transition: all .15s linear;
	transition: all .15s linear;
}

.deroulerAuSurvol:hover
{
	color: #50a7b4;
}

.deroulerAuSurvol:hover span
{
	width: 80px;
}

@media screen and (min-width: 701px)
{
	#modaleModeration
	{
		min-width: 680px;
	}
}

#modaleModeration .raisons
{
	height: 0;
	overflow: hidden;
}

#modaleModeration img
{
	display: block;
	margin: auto;
	max-height: calc(100vh - 50px - 80px);
}

#modaleModeration .input-wrapper > label
{
	/*font-size: 1em;*/
	background-color: transparent;
}

#modaleModeration .input-wrapper
{
	margin-bottom: 5px;
}

#modaleModeration .raisons #autre_raison
{
	margin-top: -5px;
	min-width: 400px;
}

#modaleModeration .annuler
{
	width: calc(25% - 5px);
}

#modaleModeration .delete
{
	width: calc(75% - 5px);
}

#modaleModeration .lienAssocie
{
	text-align: center;
	font-size: 0.9em;	
}

#modaleModeration .lienAssocie a
{
	background-color: #FFF;
	padding: 4px 25px;
	border-radius: 12px;
	display: inline-block;
}

#modaleModeration .lienAssocie a:hover
{
	text-decoration: underline;
}

#modaleModeration .lienAssocie a:before
{
	content: "\f0c1 ";
	font-family: "FontAwesome";
	margin-right: 10px;
}

.rechercher .boutonJaune.small
{
	float: right;
	margin-left: -2px;
}

.rechercher
{
	margin-bottom: 20px;
	position: relative;
	max-width: 300px;
	float: right;
}

@media screen and (max-width: 640px)
{
	#deplacerPostsContainer.rechercher .boutonJaune,
	#deplacerPostsContainer.rechercher .input-wrapper,
	#deplacerPostsContainer.rechercher input[type=text]
	{
		width: 100%;
		display: block;
		max-width: none;
	}
	
	#deplacerPostsContainer.rechercher
	{
		width: 100%;
	}
	
	#deplacerPostsContainer.rechercher .boutonJaune.small
	{
		float: none;
	}
}

@media screen and (min-width: 641px)
{
	#deplacerPostsContainer.rechercher
	{
		max-width: 600px;
	}
}

.moderation .infos_topic
{
	width: calc(100% + 50px);
	padding: 10px 25px;
	border-bottom: 1px solid #85afb5;
	margin-bottom: 25px;
	margin-top: -25px;
	margin-left: -25px;
	font-size: 0.75em;
	color: #557e84;
}

.moderation .infos_topic .fa
{
	margin-left: 12px;
	margin-right: 4px;
}

.moderation .infos_topic .fa:first-child
{
	margin-left: 0;
}

.moderation .infos_topic .fa-heart
{
	color: #dd3817;
}


/* -------------------------------------------------------------------------- */
/*                           RECHERCHE RAPIDE                                 */
/* -------------------------------------------------------------------------- */

.rechercher input
{
	font-size: 0.85em;
	padding: 5px 10px;
	font-weight: bold;
	background-color: transparent;
	color: #557e84;
	width: 250px;
	position: relative;
}

.rechercher input,
.rechercher .boutonJaune.small
{
	border: 2px solid #557e84;
}

.rechercher .input-wrapper
{
	display: inline;
}

.rechercher .choisirLubien
{
	width: 100%;
}

.rechercher .boutonJaune.small
{
	padding: 5px 8px;
	margin: 0;
}

.rechercher input:focus
{
	background-color: #fefbcf;
}

/* -------------------------------------------------------------------------- */
/*                                PROJETS                                     */
/* -------------------------------------------------------------------------- */

.banniere
{
	width: calc(100% + 20px);
	margin-left: -10px;
	margin-top: -10px;
	max-height: 200px;
	overflow: hidden;
}

@media screen and (min-width: 641px)
{
	.banniere
	{
		width: calc(100% + 50px);
		margin-left: -25px;
		margin-top: -50px;
		margin-bottom: 40px;
	}
}

.presentation
{
	font-size: 1.2em;
	/*background-color: #cbe3e3;*/
}

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

.diapo-wrapper
{
	width: 15%;
	position: relative;
	margin-right: 2%;
	display: block;
	float: left;
	border: 2px solid white;
}

.diapo-wrapper:nth-child(6n)
{
	margin-right: 0;
}

.diapo-wrapper:hover
{
	border-color: #557e84;
}

.diapositive
{
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
	background-size: cover;
	background-position: center;
}

#diapos
{
	overflow: hidden;
}


.anniversaire:after
{
	display: block;
	width: 83px;
	height: 102px;
	content: " ";
	background-image: url("/img/projets/ruban.png");
	position: absolute;
	right: -25px;
	top: -25px;
}

.annif_label
{
	width: 26px;
	height: 26px;
	position: absolute;
	right: -5px;
	top: -4px;
	padding: 1px 4px;
	border-radius: 50px;
	margin-left: 5px;
	color: #557e84;
	vertical-align: text-top;
	z-index:1;
	background-color: #fe3133;
	background-image: url(/img/projets/bannieres/annif_s.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	overflow: hidden;
}

.annif_label .chiffre,
.annif_label .ans
{
	display: none;
}

.annif_label .chiffre
{
	font-size: 2.54em;
	line-height: 0.75em;
	width: 40%;
	left: 0;
	text-align: right;
}

.annif_label .ans
{
	right: 0;
	text-align: left;
	width: 55%;
}


.annif_label .fa
{
	margin-right: 3px;
}

@media screen and (min-width: 641px)
{
	.annif_label
	{
		width: 50px;
		height: 50px;
		background-image: url(/img/projets/bannieres/annif.png);
		right: -10px;
		top: -10px;	
		font-size: 0.75em;
	}
	
	.annif_label .chiffre,
	.annif_label .ans
	{
		display: block;
		position: absolute;
		font-weight: bold;
		color: #1e4242;
		bottom: 12px;
		display: block;
		line-height: 1em;
	}
}

/* Créer un projet */
/* --------------- */

.editBanniereProjet
{
	width: 800px;
	height: 200px;
	margin-left: -25px;
}

.editCouvProjet
{
	width: 325px;
	height: 150px;
	margin: 0;
	margin-top: 5px;
}


/* -------------------------------------------------------------------------- */
/*                           CUSTOM DROPZONE                                  */
/* -------------------------------------------------------------------------- */

.drop_zone
{
	background-color: #f1f1f1;
	cursor: pointer;
	margin-top: 5px;
	position: relative;
}

.drop_zone.multiple
{
	min-height: 150px;
	padding: 25px;
	padding-bottom: 15px;
	text-align: center;
}

.drop_zone.multiple .drop_bloc,
.drop_zone.multiple:after
{
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 100px;
	position: relative;
}

.drop_zone.multiple.notEmpty:after
{
	content: "\f067";
	border: 1px solid #6e9ba1;
	height: 100px;
	border-radius: 10px;
	font-family: "FontAwesome";
	line-height: 100px;
	font-size: 40px;
	vertical-align: top;
}

.drop_zone.multiple.notEmpty:hover:after
{
	color: #1e4242;
	border-color: #557e84;
}

.drop_zone.multiple input[type=text]
{
	font-size: 0.8em;
	text-align: center;
}

.drop_zone.multiple .drop_area
{
	background-color: #d6d6d6;
}

.drop_zone.multiple .drop_area:last-child
{
	margin-right: 0;
}

.input-wrapper .drop_area,
.drop_area
{
	min-height: 20px;
	display: block;
	background-size:cover;
	background-position: center top;
	height: 100%;
	width: 100%;
}

.drop_zone:not(.multiple) .drop_area
{
	cursor: pointer;
}

.drop_area + input[type=file]
{
	display: none;
}

.requis .drop_area:after
{
	content: "";
}

.drop_bloc .remove
{
	position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.6);
    width: 20px;
    height: 20px;
    border-radius: 20px;
    color: transparent;
}

.drop_bloc .remove:before
{
	font-family: "FontAwesome";
	content: "\f00d";
	color: #1e4242;
	display: block;
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
}

.drop_zone .instructions
{
	pointer-events: none;
	font-size: 0.75em;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	white-space: nowrap;
	max-width: calc(100% - 30px);
}

.drop_zone:hover .instructions:before,
.fichierActuel:hover p:before
{
	color: #557e84;
	opacity: 0.6;
}

.drop_zone .instructions:before,
.fichierActuel p:before
{
	content: "\f030";
	font-family: "FontAwesome";
	font-size: 60px;
	opacity: 0.1;
	color: black;
	display: block;
	margin-bottom: 5px;
}

.fichierActuel p:before
{
	content: "\f0f6";
}

.fichierActuel
{
	background-color: #f1f1f1 !important;
	position: relative;
	width: 200px;
	height: 200px;
	cursor: pointer;
}

.fichierActuel p
{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	white-space: nowrap;
}

.fichierActuel + input[type=file]
{
	display: none;
	margin-left: -9999px;
}


/* Taille aperçu */
/* ------------- */

.drop_zone.couverture
{
	width: 100ù;
	height: 150px;
	max-width: 325px;
}

.drop_zone.banniere
{
	width: calc(100% + 20px);
	height: 200px;	
	max-width: 800px;
}

@media screen and (min-width: 641px)
{
	.drop_zone.banniere
	{
		width: calc(100% + 50px);
		margin-left: -25px;
	}
}

.drop_zone.multiple .drop_area
{
	width: 100px;
	height: 100px;
}


/* -------------------------------------------------------------------------- */
/*                              MODERATION                                    */
/* -------------------------------------------------------------------------- */

#content.dashboard:after
{
	content: " ";
	display: block;
	clear: both;
}

/* -------------------------------------------------------------------------- */
/*                              HISTORIQUE                                    */
/* -------------------------------------------------------------------------- */

#historique
{
	width: 100%;
	max-width: 800px;
	margin: auto;
	position: relative;
	margin-bottom: 70px;
}

#historique .vertical
{
	width: 1px;
	height: calc(100% - 120px);
	border-right: 2px dotted #625759;
	position: absolute;
	left: 20px;
}

#historique .image
{
	width: 75px;
	height: 75px;
	border-radius: 75px;
	background-color: white;
	background-size: cover;
	background-position: center top;
	position: absolute;
	top: 0;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
	right: 0;
}

#historique .date
{
	font-weight: bold;
	font-size: 1.7em;
}

#historique .texte
{
	color: #557e84;
	max-width: calc(100% - 75px);
}

@media screen and (min-width: 1450px), (min-width: 1100px) and (max-width: 1200px)
{
	#historique .vertical
	{
		left: 50%;
	}
	
	#historique .image
	{
		right: auto;
	}
	
	#historique .important .image
	{
		width: 250px;
		height: 250px;
		border-radius: 250px;
	}
	
	#historique .important .date
	{
		font-size: 2em;
	}
	
	#historique .important .texte
	{
		font-size: 1.14em;
		max-width: calc(100% - 150px);
	}
}

/* Mise en place */

#historique .evenement
{
	width: calc(100% - 40px);
	position: relative;
	margin-bottom: 40px;
	margin-left: 40px;
}

#historique .evenement_container
{
	position: relative;
}

#historique hr
{
	height: 2px;
	border: none;
	background-color: #557e84;
	color: #557e84;
	position: relative;
	margin-left: -20px;
	width: calc(100% + 25px - 75px);
}

#historique hr:after,
#historique hr:before
{
	content: " ";
	display: block;
	position: absolute;
	background-color: #ffdc63;
	background-image: url("/img/globales/background.png");
	top: 0;
}

#historique hr:after
{
	width: 16px;
	height: 16px;
	border-radius: 16px;
	border: 2px solid #557e84;
}

#historique hr:before
{
	width: 30px;
	height: 30px;
	border-radius: 30px;
}

#historique .evenement hr:before,
#historique .evenement hr:after
{
	left: 0;
	transform: translateX(-50%) translateY(-50%);
}

@media screen and (min-width: 1450px), (min-width: 1100px) and (max-width: 1200px)
{
	#historique .evenement
	{
		width: 50%;
		margin-left: 0;
		margin-bottom: 20px;
	}
	
	#historique .evenement_container
	{
		max-width: 300px;
	}
	
	#historique .evenement:not(.important):nth-child(odd) .evenement_container
	{
		margin-left: calc(100% - 300px);
	}
	
	#historique .important
	{
		min-height: 250px;
	}

	#historique .important .evenement_container
	{
		max-width: none;
		padding-top: 40px;
	}
	
	#historique .evenement:nth-child(odd)
	{
		text-align: right;
		padding-right: 25px;
	}
	
	#historique .evenement:nth-child(even)
	{
		margin-left: 50%;
		padding-left: 25px;
	}

	#historique .evenement:nth-child(even) .image
	{
		right: 0;
	}

	#historique .important:nth-child(odd) .image
	{
		left: -125px;
	}

	#historique .important:nth-child(even) .image
	{
		left: calc(100% - 125px);
	}

	#historique .evenement:nth-child(odd) .texte
	{
		margin-left: 75px;
	}

	#historique .important:nth-child(odd) .texte
	{
		margin-left: 150px;
	}
	
	#historique hr
	{
		width: calc(100% + 25px);
		margin-left: 0;
	}
	
	#historique .evenement:nth-child(even) hr
	{
		margin-left: -25px;
	}

	#historique .evenement:nth-child(odd) hr:before,
	#historique .evenement:nth-child(odd) hr:after
	{
		left: auto;
		right: 0;
		transform: translateX(50%) translateY(-50%);
	}
	
}

/* Couleurs */

#historique .purple hr 			{background-color: 	#a142ba}
#historique .purple hr:after 	{border-color: 		#a142ba}

#historique .vert hr 			{background-color: 	#758b19}
#historique .vert hr:after 		{border-color: 		#758b19}

#historique .vertdeau hr 		{background-color: 	#017acb}
#historique .vertdeau hr:after 	{border-color: 		#017acb}

#historique .brun hr 			{background-color: 	#aa7636}
#historique .brun hr:after 		{border-color: 		#aa7636}

#historique .jaune hr 			{background-color: 	#fefbcf}
#historique .jaune hr:after 		{border-color: 		#fefbcf}

#historique .bleuclair hr 		{background-color: 	#e562a6}
#historique .bleuclair hr:after 	{border-color: 		#e562a6}

#historique .rouge hr 			{background-color: 	#f12e3d}
#historique .rouge hr:after 		{border-color: 		#f12e3d}

/* -------------------------------------------------------------------------- */
/*                              QUI SOMMES-NOUS ?                             */
/* -------------------------------------------------------------------------- */

/* Divers */
/* ------ */

.qui-sommes-nous .boutonJaune
{
	float: right;
	margin-bottom: 10px;
	margin-top: 20px;
}

.qui-sommes-nous h2
{
	font-size: 1.3em;
	margin-bottom: 10px;
}

.qui-sommes-nous .espace
{
	height: 50px;
}

.qui-sommes-nous .ulule
{
	float: right;
	height: 130px;
	width: 130px;
	background-image: url('/img/accueil/qui-sommes-nous/ulule.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.qui-sommes-nous .entete_dev
{
	width: 100%;
	height: 100px;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
}

.qui-sommes-nous .merci
{
	background-color: #98d5d4;
	
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	-ms-transition: all .15s linear;
	-o-transition: all .15s linear;
	transition: all .15s linear;
}
.qui-sommes-nous .merci:hover
{
	background-color: #abe5e4;
}

.qui-sommes-nous .merci p
{
	font-size: 0.9em;
}

/* Blocs */
/* ----- */

@media screen and (min-width: 640px)
{
	.bloc_blanc.demi
	{
		width: calc(50% - 10px);
		float: left;
	}
}

.bloc_blanc.demi:nth-child(odd)
{
	margin-right: 20px;
}

.qui-sommes-nous .demi
{
	padding-top: 110px;
}

.bloc_blanc.main p,
.bloc_blanc p.grand
{
	font-size: 1.2em;
	margin-top: 30px;
}
.bloc_blanc p.grand:first-child
{
	margin-top: 0;
}

.bloc_blanc.main h2
{
	font-size: 2em;
}

/* Lou Lubie */
/* --------- */

.bloc_blanc.loulubie
{
	min-height: 300px;
	
}

.loulubie .personnage
{
	background-image: url('/img/accueil/qui-sommes-nous/qui_loulubie.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom center;
	width: calc(100% - 20px);
	height: 436px;
	margin: auto;
}

@media screen and (min-width: 1126px)
{
	.bloc_blanc.loulubie
	{
		padding-right: 210px;
	}

	.loulubie .personnage
	{
		width: 240px;
		max-height: 90%;
		position: absolute;
		bottom: 20px;
		right: -40px;
	}

}

.loulubie h2 span
{
	color: #ff9c5f;
}

.loulubie s
{
	background-image:  url('/img/accueil/qui-sommes-nous/barre.png');
	background-repeat: no-repeat;
	background-position: bottom 0.4em center;
	background-size: 90% auto;
	text-decoration: none;
}

/* Modos */
/* ----- */

@media screen and (min-width: 1126px)
{

	#quiSontModos
	{
		padding-bottom: 270px;
	}

	.photoModo
	{
		position: absolute;
		background-repeat: no-repeat;
	}

	.tooltip.tooltipModo
	{
		top: 100px;
		bottom: auto;
		text-align: center;
	}

	.photoModo.saeryth
	{
		width: 146px;
		height: 197px;
		left:-25px;
		bottom: -10px;
		background-image: url('/img/accueil/qui-sommes-nous/modo_saeryth.png');
	}
	
	

	.photoModo.lama
	{
		width: 157px;
		height: 243px;
		left:97px;
		bottom: -41px;
		background-image: url('/img/accueil/qui-sommes-nous/modo_lama.png');
	}

	.photoModo.vaell
	{
		width: 253px;
		height: 243px;
		left:254px;
		bottom: -41px;
		background-image: url('/img/accueil/qui-sommes-nous/modo_vaell.png');
	}

	.photoModo.prunelle
	{
		width: 146px;
		height: 153px;
		right:0;
		bottom: -30px;
		background-image: url('/img/accueil/qui-sommes-nous/modo_prunelle.png');
	}

	.photoModo.moonlight
	{
		width: 206px;
		height: 278px;
		right:140px;
		bottom: 10px;
		background-image: url('/img/accueil/qui-sommes-nous/modo_moonlight.png');
	}
	
	#photoAllModos
	{
		display: none;
	}

}

@media screen and (max-width: 1125px)  and (min-width: 640px)
{
	#photoAllModos
	{
		display: block;
		width: calc(100% + 50px + 2%);
		max-width: none;
		margin-left: -25px;
		margin-bottom: -13%;
		margin-top: 20px;
	}
}

.oldModos
{
	text-align: center;
	margin-top: 25px;
}

.oldModos:after
{
	content: " ";
	display: inline-block;
	width: 100%;
}

.oldModo
{
	display: inline-block;
	position: relative;
	margin-right: 10px;
}

.oldModo .image
{
	width: 85px;
	height: 85px;
	/*border-radius: 75px;*/
	overflow: hidden;	
	margin-bottom: 12px;
	background-size: auto 75px;
	background-position: center;
	background-repeat: no-repeat;
	
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	-ms-transition: all .15s linear;
	-o-transition: all .15s linear;
	transition: all .15s linear;
}

.oldModo:hover .image
{
	background-size: auto 85px;
}

.oldModo p
{
	text-align: center;
	margin: 0;
}

.oldModo .nom
{
	font-weight: bold;
}

.oldModo:hover .nom
{
	color: #ff9c5f;
}

.oldModo .dates
{
	font-size: 0.85em;
}

.charte .bloc_blanc li
{
	margin-bottom: 10px;
}

.charte .bloc_blanc h3:not(:first-child)
{
	margin-top: 40px;
}

/* -------------------------------------------------------------------------- */
/*                                 TUTORIELS                                  */
/* -------------------------------------------------------------------------- */

.imageLeft:after
{
	content: " ";
	display: block;
	clear: both;
}

.imageLeft
{
	float: left;
}

@media screen and (max-width: 641px)
{
	.imageContainer.fl-right,
	.imageContainer.fl-left
	{
		margin: auto;
		float: none;
	}
}

@media screen and (min-width: 641px)
{
	.imageContainer.fl-right
	{
		margin-left: 20px;
	}

	.imageContainer.fl-left
	{
		margin-right: 20px;
	}
}

.imageContainer
{
	margin: 25px 0;
}

.imageContainer + .imageContainer
{
	margin-top: 45px;
}

.imageContainer img,
.imageContainer iframe
{
	display: block;
	margin: auto;
	border-color: #b3d3d2;
}

.imageContainer .legende
{
	font-size: 0.87em;
	opacity: 0.7;
	text-align: center;
	max-width: 600px;
	margin: auto;
	margin-top: 10px;
}

p + h3,
.accordeon + h3
{
	margin-top: 40px;
}

/* Liste des tutoriels */
/* ------------------- */


@media screen and (min-width: 641px) and (max-width: 750px)
{
	.listeTutos:not(.actif) .grid-item:nth-child(n+4)
	{
		display: none;
	}
}
@media screen and (min-width: 751px) and (max-width: 900px), (min-width: 1201px) and (max-width: 1350px)
{
	.listeTutos:not(.actif) .grid-item:nth-child(n+5)
	{
		display: none;
	}
}
@media screen and (min-width: 901px) and (max-width: 1200px), (min-width: 1350px) and (max-width: 1500px), (max-width: 640px)
{
	.listeTutos:not(.actif) .grid-item:nth-child(n+6)
	{
		display: none;
	}

}
@media screen and (min-width: 1501px)
{
	.listeTutos:not(.actif) .grid-item:nth-child(n+7)
	{
		display: none;
	}
}

.listeTutos.inactif
{
	display: none;
}

.listeTutos:not(.actif) .grid-item.voirPlus
{
	display: block;
}

.listeTutos.actif .grid-item.voirPlus
{
	display: none;
}

.listeTutos:not(.actif) .grid-item.retour
{
	display: none;
}

.listeTutos .voirPlus,
.listeTutos .retour
{
	min-height: 30px;
	background-color: #3c365c;
}

.listeTutos .voirPlus .grid-item-container,
.listeTutos .retour .grid-item-container
{
	background-size: cover;
	background-position: center;
}

.listeTutos .voirPlus .grid-item-container:after,
.listeTutos .retour .grid-item-container:after
{
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	max-width: 30%;
	line-height: 1em;
	color: white;
}

@media screen and (min-width: 641px)
{
	.listeTutos .voirPlus .grid-item-container:after,
	.listeTutos .retour .grid-item-container:after
	{
		font-size: 1.3em;
	}
}

.listeTutos .voirPlus .grid-item-container:after
{
	content: "Voir plus";
}

.listeTutos .retour .grid-item-container:after
{
	content: "\f100";
	font-family: "FontAwesome";
	font-size: 40px;
}

.aucunResultat
{
	display: none;
}

/* Spoiler */
/* ------- */

.question
{
	margin-top: 20px;
	color: #557e84;
	cursor: pointer;
	font-weight: bold;
}

.question:before
{
	content: "\f128";
	border-radius: 25px;
	width: 1em;
	height: 1em;
	font-family: "FontAwesome";
	display: inline-block;
	text-align: center;
	line-height: 20px;
	vertical-align: bottom;
	margin-right: 5px;
	font-size: 0.9em;
	background-color: #557e84;
	border: 2px solid #557e84;
	color: white;
	line-height: 1em;
	font-weight: normal;
}

@media screen and (min-width: 640px)
{
	.question:before
	{
		font-size: 1.4em;
	}
}

.question:hover
{
	color: #ff9c5f;
}

.question:hover:before
{
	background-color: white;
	color: #ff9c5f;
	border-color: #ff9c5f;
}

.question.actif:before
{
	content: "\f0d8";
	line-height: 0.9em;
}

.miniquestion
{
	margin-bottom: 20px;
}

.miniquestion .question
{
	font-size: 0.85em;
	margin-top: 7px;
}

.reponse,
.exercice,
.actionscript
{
	margin-top: 20px;
	padding: 0 10px;
	position: relative;
	background-color: #98d5d4;
	width: calc(100% + 20px);
	margin-left: -10px;
}

.tutoriel .bloc_blanc > .accordeon:last-child,
.tutoriel .bloc_blanc > .exercice:last-child,
.tutoriel .bloc_blanc > .actionscript:last-child
{
	margin-bottom: -10px;
}

.tutoriel .bloc_blanc .accordeon:last-child .question
{
	margin-bottom: 20px;
}

@media screen and (min-width: 641px)
{
	.tutoriel .bloc_blanc > .accordeon:last-child,
	.tutoriel .bloc_blanc > .exercice:last-child,
	.tutoriel .bloc_blanc > .actionscript:last-child
	{
		margin-bottom: -50px;
	}

	.tutoriel .bloc_blanc .accordeon:last-child .question
	{
		margin-bottom: 20px;
	}
}

.tutoriel .bloc_blanc .accordeon + p,
.tutoriel .bloc_blanc .exercice + p,
.tutoriel .bloc_blanc .actionscript + p
{
	margin-top: 30px;
}

.reponse > *:first-child
{
	padding-top: 20px;
	margin-top: 0 !important;
}
 
.reponse > *:last-child
{
	padding-bottom: 20px;
	margin-bottom: 0 !important;
}
 
@media screen and (min-width: 641px)
{
	.reponse,
	.exercice,
	.actionscript
	{
		width: calc(100% + 50px);
		margin-left: -25px;
		padding: 20px 25px;
	}
}

.reponse a
{
	color: #0385b0;
}

.reponse a:hover
{
	color: #fe6131;
}

.exercice
{
	background-color: #d5eaa2;
	padding-top: 10px;
	padding-bottom: 10px;
}

.exercice + p
{
	margin-top: 30px;
}

.exercice > h3:first-child
{
	margin-top: 0;
}

.actionscript
{
	background-color: #3c365c;
	font-family: monospace;
	color: white;
	font-size: 1.2em;
	padding-top: 10px;
	padding-bottom: 10px;
}

.actionscript .as_comment
{
	color: #7b74a1;
}

.actionscript .as_bleu
{
	color: #4fbdbb;
}

.actionscript .as_vert
{
	color: #87e145;
}

embed
{
	position: relative;
	max-width: 100%;
	overflow: hidden;
}

embed.flash:before
{
	padding: 10px;
	padding-top: 40px;
	background-image: url('/img/globales/flash.png');
	background-position: top center;
	background-repeat: no-repeat;
	display: block;
	content: "Les animations Flash ne sont pas disponibles sur smartphones, tablettes et certains navigateurs.";
	text-align: center;
	font-size: 0.85em;
	top: 50%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	width: 100%;
	opacity: 0.6;
}

/* Sommaire */
/* -------- */

.sommaireTutoriel li
{
	margin-bottom: 6px;
	position: relative;
	padding-left: 14px;
	margin-left: 10px;
}

.sommaireTutoriel li:last-child
{
	margin-bottom: 0;
}

.sommaireTutoriel li.actif a
{
	cursor: auto;
}

.sommaireTutoriel li:hover,
.sommaireTutoriel li.actif
{
	color: #fefbcf;
}

.sommaireTutoriel li:before
{
	content: " ";
	display: block;
	position: absolute;
	top: 5px;
	left: 0px;
	width: 8px;
	height: 8px;
	border-radius: 10px;
	background-color: #3a5f65;
}

.sommaireTutoriel li:hover:before,
.sommaireTutoriel li.actif:before
{
	background-color: #fefbcf;
}

/* Topic d'origine */
/* --------------- */

.topic_tuto
{
	font-size: 1em;
	color: #1e4242;
	padding-left: 70px !important;
	
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-ms-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;

}

.topic_tuto .apercu
{
	height: 100%;
	width: 60px;
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center;
}

.topic_tuto .apercu.generique
{
	background-color: #557e84;
	background-size: auto 80%;
	background-repeat: no-repeat;
}

@media screen and (min-width: 641px)
{
	.topic_tuto
	{
		padding-left: 175px !important;
	}
	
	.topic_tuto .apercu
	{
		height: 100%;
		width: 150px;
	}
}

.topic_tuto .titre_topic
{
	margin-top: 0;
}

.topic_tuto:hover
{
    transform: translateX(10px);
}

/* Styles */
/* ------ */

.tutoriel h3
{
	margin-top: 40px;
}

.bloc_blanc ul
{
	padding-left: 17px;
}

.tutoriel .bloc_blanc li:not(:last-child),
.faq .bloc_blanc  li:not(:last-child)
{
	margin-bottom: 6px;
}

.tutoriel .accordeon_body  > p
{
	margin-top: 10px;
}

@media screen and (min-width: 641px)
{
	.tutoriel .post
	{
		max-width: 800px;
		width: 800px;
	}
	
	.tutoriel .suggestionTopic p
	{
		max-width: none;
	}
}

/* Expression du visage */
/* -------------------- */

.smileyEur,
.smileyJap
{
	padding: 1px 4px;
	border-radius: 4px;
}

.smileyEur
{
	background-color: #ffdc63;
}

.smileyJap
{
	background-color: #98d5d4;
}

/* Comparaison logiciels */
/* --------------------- */

.tuto_comparaison
{
	font-size: 0.85em;
	margin-top: 45px;
}

@media screen and (min-width: 641px)
{

	.tuto_comparaison tr:nth-child(odd)
	{
		background-color: #cbeae9;
	}

	.tuto_comparaison th
	{
		background-color: #98d5d4;
	}

}

@media screen and (max-width: 640px)
{
	
	.tuto_comparaison thead
	{
		display: none;
	}
	
	.tuto_comparaison td,
	.tuto_comparaison tr
	{
		display: block;
		text-align: left;
	}
	
	.tuto_comparaison td
	{
		padding: 10px;
		padding-left: 40%;
		position: relative;
	}
	
	.tuto_comparaison td:before
	{
		display: block;
		content: "Titre";
		font-weight: bold;
		position: absolute;
		width: 40%;
		left: 10px;
	}
	
	.tuto_comparaison tr
	{
		padding: 0;
	}
	
	.tuto_comparaison td:nth-child(even)
	{
		background-color: #cbeae9;
	}
	
	.tuto_comparaison ul
	{
		padding-left: 0;
		margin: 0;
	}
	
	/* Titre */

	.tuto_comparaison td:first-child
	{
		background-color: #98d5d4;
		padding-left: 10px;
		font-size: 1.5em;
		text-align: center;
	}
	
	.tuto_comparaison td:first-child:before
	{
		content: none;
	}
	
	/* Nom colonne */
	
	.tuto_comparaison td:nth-child(2):before { content: "Catégorie"; }
	.tuto_comparaison td:nth-child(3):before { content: "Disponibilité"; }
	.tuto_comparaison td:nth-child(4):before { content: "Avantages / inconvénients"; }
	.tuto_comparaison td:nth-child(5):before { content: "Prix"; }
}

.comparaison_plus,
.comparaison_moins
{
	list-style-type:none;
	position: relative;
	padding-left: 1.3em;
}

.comparaison_plus:before,
.comparaison_moins:before
{
	font-family: "FontAwesome";
	display: block;
	position: absolute;
	left: 0;
	top: 2px;
}

.comparaison_plus:before
{
	content: " \f055";
	color: #5d9e23;
}

.comparaison_moins:before
{
	content: " \f056";
	color: #ee391b;
}

/* Métiers du jeu vidéo */
/* -------------------- */

@media screen and (min-width: 641px)
{
	.flex-grid .col-metier-jv-g
	{
		width: 150px;
		padding-top: 40px;
	}
	
	.flex-grid .col-metier-jv-d
	{
		width: calc(100% - 150px);
	}
	
	.flex-grid .col-metier-jv-d .reponse
	{
		margin-left: -15px;
	}
}

/* Logiciel */
/* -------- */

.logiciel:after
{
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
    display: block;
    width: 40px;
	height: 40px;
	max-height: 100%;
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
}


.logiciel.photoshop:after
{
	background-image: url("/img/tutoriels/bannieres/logiciel_photoshop.png")
}

.logiciel.gimp:after
{
	background-image: url("/img/tutoriels/bannieres/logiciel_gimp.png")
}

.logiciel.sai:after
{
	background-image: url("/img/tutoriels/bannieres/logiciel_sai.png")
}

.logiciel.flash:after
{
	background-image: url("/img/tutoriels/bannieres/logiciel_flash.png")
}

/* -------------------------------------------------------------------------- */
/*                                PROFIL                                      */
/* -------------------------------------------------------------------------- */

.profil #imageProfil
{
	width: 150px;
	height: 150px;
	background-position: center;
	background-size: cover;
	border-radius: 150px;
	margin:auto;
	margin-bottom: 20px;
	font-family: "Colporteur";
	font-size: 100px;
	line-height: 120px;
	text-align: center;
}

.profil .autres_avatars
{
	text-align: center;
}

.profil .autre_avatar
{
	display: inline-block;
	max-width: 60px;
	vertical-align: top;
	text-align: center;
	margin: 0 10px;
	position: relative;
	margin-bottom: 10px;
}

.tooltip.autres_oc
{
	width: 200px;
	white-space: normal;
	transform: translateX(-100px) translateY(100%);
	text-align:center;
}


.profil .autre_avatar img,
.imageDeProfilOc
{
	display: block;
	height: 60px;
	width: 60px;
	border-radius: 75px;
}
.imageDeProfilOc
{
	background-color: #557e84;
	color: #98d5d4;
	font-family: "Colporteur";
	font-size: 30px;
	line-height: 55px;
}

.profil .autre_avatar p,
.badge p
{
	font-size: 0.85em;
	font-weight: bold;
	margin: 0;
	margin-top: 10px;
	line-height: 1.2em;
}

.badge br
{
	margin-top: 2px;
	display: block;
}

.profil h3 + h3
{
	margin-top: -15px;
	font-size: 1.1em;
}

.profil #statistiques
{
	height: 200px;
	width: 100%;
}

#postsRecents .grid-item
{
    width: calc((100% / 2) - 10px / 2);
	margin-bottom: 0;
}

@media screen and (min-width: 400px) and (max-width: 640px)
{
	#postsRecents .grid-item
	{
		width: calc((100% / 3) - 20px / 3);
	}
}

@media screen and (min-width: 641px)
{
	#postsRecents .grid-item
	{
		width: calc((100% / 4) - 60px / 4);
	}
}

#badges:after
{
	content: " ";
	display: block;
	clear: both;
}

.grid-item.badge
{
	float: left;
	text-align: center;
	padding: 5px;
	padding-top: 0;
	margin-bottom: 10px;
	position: relative;
}

#badges .grid-item
{
    width: 100%;
	box-shadow: none;
	background-color: transparent;
}


.badge:nth-child(3n)
{
	margin-right: 0;
}

.badge p
{
	margin-top: 6px;
	padding: 2px 4px;
	background-color: #557e84;
	color: #98d5d4;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
	position: relative;
	width: 100%;
	font-size: 0.75em;
}

.badge p:before,
.badge p:after
{
	content: " ";
	display: block;
	height: 100%;
	width: 7px;
	position: absolute;
	top: 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.badge p:before
{
	background-image:url("/img/globales/etiquette_g_bleue.png");
	background-position: center right;
	left: -7px;
}

.badge p:after
{
	background-image:url("/img/globales/etiquette_d_bleue.png");
	background-position: center left;
	right: -7px;
}

@media screen and (min-width: 1201px)
{
	#badges .grid-item
	{
		width: calc((100% / 3) - 40px / 3);
	}
}

@media screen and (min-width: 500px) and (max-width: 640px)
{
	#badges .grid-item
	{
		width: calc((100% / 2) - 10px);
	}
}

@media screen and (max-width: 1200px)
{
	#badges .grid-item img
	{
		float: left;
	}
	
	#badges .grid-item:after
	{
		display: block;
		content: " ";
		clear: both;
	}
	
	.badge p,
	.badge .badge_description
	{
		width: calc(100% - 130px);
		margin-left: 120px;
		margin-top: 20px;
		max-width: 150px;
	}
	
	.badge .badge_description
	{
		font-size:0.9em;
		margin-top: 10px;
	}
	
	#badges
	{
		margin-bottom: 15px;
	}
}

/* -------------------------------------------------------------------------- */
/*                                TABLEAUX                                    */
/* -------------------------------------------------------------------------- */

.tableau
{
	width: 100%;
	position: relative;
	font-size: 0.85em;
	text-align: center;
}

.tableau .boutonJaune
{
	margin: 0;
}

.tab_rouge
{
	color: #dd3817;
}

.tab_orange
{
	color: #fe6131;
}

.tab_neutre
{
	opacity: 0.5;
}

@media screen and (min-width: 641px)
{

	.tableau tr:nth-child(odd)
	{
		background-color: #cbeae9;
	}
	
	.tableau tr:hover
	{
		background-color: #b1d7d6;
	}

	.tableau th
	{
		background-color: #98d5d4;
	}

}

/* Par page */
/* -------- */

.gestion.topics tr > *:nth-child(2)
{
	text-align: left;
	font-weight: bold;
}

/* -------------------------------------------------------------------------- */
/*                               HALLOWEEN                                    */
/* -------------------------------------------------------------------------- */

@media screen and (min-width: 641px)
{
	#halloween {background:url('/img/globales/halloween/bouh.png'); background-position:top;}
	#halloween:hover {background-position:bottom;}
}

/* -------------------------------------------------------------------------- */
/*                                 PAQUES                                     */
/* -------------------------------------------------------------------------- */

.oeuf
{
	position: absolute;
	max-height: 60px;
	z-index: 1;
}

.oeuf_dessus
{
	top: -20px;
}

.oeuf_dessous
{
	bottom: -10px;
}

.oeuf_gauche
{
	left: -20px;
	bottom: 0;
}

.oeuf_droite
{
	right: -20px;
	bottom: 0;
}

.oeuf:hover
{
	z-index: 200;
}


@media screen and (max-width: 1200px)
{
	.oeuf
	{
		display: none !important;
	}
}