*{
	padding:0;
	margin:0;
}

@font-face {
	font-family: 'journalregular';
	src: url('fonts/journal-webfont.eot');
	src: url('fonts/journal-webfont.eot?#iefix') format('embedded-opentype'),
			url('fonts/journal-webfont.woff') format('woff'),
			url('fonts/journal-webfont.ttf') format('truetype'),
			url('fonts/journal-webfont.svg#journalregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

html{
	font-size: 14px;
}

body{
	background-color:#e5eef1;
	font-family: sans-serif, "DejaVu Serif", Arial, Norasi, serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

p{
	line-height: 1.5em;
}

a{
	text-decoration: none;
}

.btn{margin: 1px 0px;}

#all{
	width: 100%;
	flex: 1;
}

header{
	padding: 0px 20px;
	margin:0px auto;
	white-space: nowrap;
	height: 171px;
	overflow: hidden;
	background-color: white;
}

header a{
	display: block;
	width: 100%;
	height: 100%;
}

header img{
	height: 171px;
	margin: 0px;
	padding: 0px;
}

#logo{
	margin: 10px;
	height: 151px;
}

ul li div{
	display: inline-block;
	vertical-align: top;
}

nav{
	position: sticky;
	top: 0px;
	border-image-source: url('img/bordure-diapo.jpg');
	border-image-repeat: repeat;
	border-image-slice: 5 0;
	border-top : transparent solid 5px;
	border-bottom : transparent solid 5px;
	background-color: #1fa0c8;
	display: flex;
	justify-content: space-between;
}

nav ul{
	margin: auto;
	max-width: 1200px;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	margin-bottom: 0px;
	color: white;
	font-weight: normal;
}

nav ul li{
	display: block;
	text-align: center;
	font-size: 1.2em;
	background-color: #1fa0c8;
}

nav ul li a{
	display: block;
	padding: 10px 25px;
	width: 100%;
	height: 100%;
	color: white;
	text-decoration: none;
}

nav ul li a:hover, nav ul li a:focus{
	color: #1fa0c8;
	background-color: #e5eef1;
	text-decoration: none;
}

#principal{
	max-width: 1200px;
	margin:auto;
	background-color:#e5eef1;
}

#principal::after{
	content: '';
	display: block;
	clear:both;
}

#content{
	background-color: white;
	width: 65%;
	padding:2%;
	float: left;
	box-sizing:border-box;
}

#aside{
	width:35%;
	padding:2%;
	float:right;
	position: sticky;
	top: 30px;
}

h1{
	padding-bottom: 1em;
	font-family:journalregular,sans-serif;
	font-weight: bold;
	color: #ff7733;
	font-size: 4em;
	line-height: 80%;
}

h2{
	color:white;
	display:block;
	box-sizing: border-box;
	background-color: #1fa0c8;
	width:100%;
	padding:10px;
	margin-top:30px;
	margin-bottom:15px;
	font-size:1em;
	font-weight: bold;
}

h3{
	font-family:journalregular,sans-serif;
	font-weight: bold;
	color: #ff7733;
	font-size: 2.5em;
	margin-top: 8px;
}

h3.espace-paragr{
	margin-top:20px;
}

.gras{
	font-weight: bold;
}

table{
	width: 100%;
	table-layout: auto;
}

table tr:nth-child(odd){
  background-color:#EFEFEF;
}

table tr:hover{
	background-color: #dcdcdc;
}

table td, table th{
	padding:5px;
}

.bouton, input[type=submit]{
	text-decoration: none;
	display: inline-block;
	color: white;
	background: linear-gradient(90deg, rgba(102,179,203,1) 0%, rgba(92,178,205,1) 100%);
	padding:5px 10px;
	border-radius: 3px;
	border:solid #1fa0c8 1px;
	margin-top:10px;
	float: none;
	cursor: pointer;
}

.bouton:hover, .bouton:focus, input[type=submit]:hover, input[type=submit]:focus{
	color:white;
	text-decoration: none;
	background: #1fa0c8;
}

a.supprimerinscription{
	display: block;
	width: 20px;
	height: 20px;
	background-image: url('img/error.png');
	background-size: 20px 20px;
	cursor:pointer;
}

form p{
	padding:5px 0px;
}

form select, form textarea{
	vertical-align: top;
}

form textarea{
	width: 100%;
}

form input[type=text]{
	min-width: 50%;
}

label{
	vertical-align: middle;
}

.helptext{
	font-size: 0.8em;
	font-style: italic;
	display: block;
}

fieldset{
	padding-bottom: 1em;
	margin-top: 1em;
}

form div.liste-selection{
	display: flex;
	flex-wrap: wrap;
}

form div.select-choix{
	background-color: lightblue;
	color: rgb(99, 69, 44);
	padding: 10px;
	margin-right: 5px;
	margin-bottom: 5px;
	border: solid rgb(98, 160, 234) 1px;
	border-radius: 5px;
	width:auto;
}

form div.select-choix:hover{
	cursor: pointer;
}

form select[multiple]{
	min-width: 50%;
}

#carte{
	height:400px;
	margin-bottom: 30px;
}

img{
	max-width: 100%
}

# Unités
.units{
	float:none;
}

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

.unit{
	padding:5px;
	border-radius: 5px;
	border:1px black solid;
	color:white;
	float:left;
	margin: 2px;
	font-weight: bold;
	width: intrinsic;           /* Safari/WebKit utilisent un nom non-standard */
	width: -moz-max-content;    /* Firefox/Gecko */
	width: -webkit-max-content; /* Chrome */
}

.unit:hover{
	cursor: default;
}

.unit a{
	color:white;
	cursor: pointer;
}

.unit a:hover{
	text-decoration: none;
}

.unit-lutins{background: #1fa0c8;}
.unit-louveteaux{background: #f6a800;}
.unit-mercredis{background: #ff7e00;}
.unit-ecles{background: #96bf0d;}
.unit-aines{background: #bd1320 ;}
.unit-parents{background: #B8860B;}
.unit-respos{background: purple;}
.unit-eqgrp{background: black;}

/* Messages */
.messages {	
	margin-bottom:15px;
}

ul.messages{
	list-style-position : outside;
	padding-left: 0em;
	text-indent: 0em;
}

.messages li{
	box-sizing: border-box;
	list-style-type: none;
	display: block;
	padding:5px;
	width:100%;
	border-radius: 5px;
	margin-bottom:5px;
}

.messages .success{
	color: white;
	background-color: #32CD32;
	border:2px solid #6B8E23;
}

.messages .warning{
	color: white;
	background-color: orange;
	border:2px solid #FF4500;
}


.messages .error{
	color: white;
	background-color:red;
	border:2px solid #8B0000;
}

.messages .info{
	color: white;
	background-color:rgb(28, 113, 216);
	border:2px solid rgb(26, 95, 180);
}

.errorlist{
	color:red;
	font-weight: bold;
	list-style: none;
	padding-left: 0px;
}

#navigation{
	margin-bottom:20px;
}

#navigation a{
	font-weight: bold;
	color: #1fa0c8;
	display: block;
	width: 100%;
	padding: 10px;
	border: 2px #1fa0c8 solid;
	margin-bottom: 5px;
	text-decoration: none;
}

#navigation a:hover, #navigation a:focus{
	background-color: #1fa0c8;
	color:white;
	text-decoration: none;
}

footer{
	width:100%;
	margin-top: 30px;
	background-color: #0d7496;
	color:white;
}

footer div{
	max-width: 1200px;
	padding: 10px 20px;
	margin:auto;
}

footer a{
	color:white;
	text-decoration: none;
}

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

/* Page d'accueil */
#actus{
	box-sizing: border-box;
	width: 100%;
	height:250px;
	border: 1px solid transparent;
	border-image-source: url('img/calicot.png');
	border-image-slice: 30% 20% 20% 20%;
	border-image-width: 30% 20% 20% 20%;
	border-image-repeat: stretch;
	padding: 70px 20% 50px 20%;
}

.carousel-inner{
	display: table;
	height:101%;
	width: 101%;
	margin-left: -1px;
	background-color: #f6ae82;
}

.carousel-inner .item{
	text-align: center;
	vertical-align: middle;
	height: 100%;
	width: 100%;
	background-color: #f6ae82;
	display: none;
}

.carousel-inner .item a{
	vertical-align: middle;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: black;
}

.titreactu{
	font-weight: bold;
	font-size: 1.5em;
}

.carousel-inner .active{
	display: table-cell;
}

.h1une{
	padding-bottom: 0;
}
/* Agenda */
.event{
	padding-bottom: 15px;
	display: flex;
}

.event.nonvisible{
	opacity: 0.50;
}

.event a{
	text-decoration: none;
	color: black;
}

.event:hover{
	background-color: #dcdcdc;
	text-decoration: none;
}

.event a.lienblock{
	color:auto;
	text-decoration: none;
	display: block;
	width:100%;
	height: 100%;
	display: flex;
	color: black;
}

.event-descr{
	width: 100%;
}

.event a.lienblock2{
	color:auto;
	text-decoration: none;
	display: block;
	width:100%;
	height: 100%;
	color: black;
}

.event-icon{
	width:48px;
	min-width:48px;
	min-height:48px;
	padding-top:48px;
	background-image: url('img/calendar-icon.png');
	background-repeat: no-repeat;
	margin-right: 5px;
}

.event-date{
	display: block;
	padding:5px 0;
	font-weight: bold;
}

.event-date img{
	vertical-align:middle;
}

.inscriptionsencours{
	color: red;
	font-weight: bold;
	animation: clignote 1s linear infinite;
}

@keyframes clignote{
	50% {opacity: 0;}
	75% {opacity: 100;}
}

.alerte-previsu{
	box-sizing: border-box;
	list-style-type: none;
	display: block;
	padding:5px;
	width:100%;
	color: white;
	background-color: lightsalmon;
}

.tags{
	float: none;
	width: 100%;
}
.tags::after{
	content: '';
	display: block;
	clear:both;
}

.tags p{
	padding:5px;
	width: intrinsic;           /* Safari/WebKit utilisent un nom non-standard */
	width: -moz-max-content;    /* Firefox/Gecko */
	width: -webkit-max-content; /* Chrome */
	color: white;
	font-size: 0.8em;
	float: left;
	margin-right: 5px;
}

.tags p.previsu{
	background-color: lightsalmon;
}

.tags p.offline{
	background-color: darkgray;
}

.shortcut{
	height: 2em;
	min-width: 2em;	
	background-repeat: no-repeat;
	background-size: 2em 2em;
	background-image: url('img/system.png');
}

.shortcut a{
	display: block;
	height: 100%;
	width: 100%;
}

/* Espace adhérents */
.esp-adh-encart{
	border: solid 2px #ff7733;
	border-radius: 5px;
	margin-top: 25px;
}

.frame-encart{
	background: linear-gradient(90deg, rgba(254,160,110,1) 0%, rgba(255,184,149,1) 100%);
	min-height: 50px;
	font-weight: bold;	
	color: white;
	display: flex;
	align-items: center;
	padding: 15px;
}

.esp-adh-encart:hover .frame-encart{
	background: #ff7733;
	text-decoration: none;
}

.content-encart{
	padding:15px;
}

.liensInternes{
	display: flex;
   flex-direction: column;
   padding-left: 0em;
	text-indent: 0em;
}

button.aplbtn{
	padding: 10px;
}

.liensInternes li{
	display:flex;
	width: 100%;
	max-width: 400px;
	min-height: 50px;
	margin:10px 0px;
	border: solid 2px #ff7733;
	color: white;
	background-color: #ffb895;
	font-weight: bold;
	border-radius: 5px;
	box-sizing: border-box;
}

.liensInternes li:hover{
	background-color: #ff7733;
}

.liensInternes li a{
	padding:10px;
	display:flex;
	width: 100%;
	height: 100%;
	color: white;
	text-decoration: none;
}

.liensInternes li a div, .esp-adh-encart div.icone{
	margin:auto 10px;
	width: 50px;
	min-width: 50px;
	height: 50px;
	background-repeat: no-repeat;
	background-size: 50px 50px;
}

.liensInternes li a div.users, .esp-adh-encart div.users{
	background-image: url('img/users.png');
}

.liensInternes li a div.mail, .esp-adh-encart div.mail{
	background-image: url('img/email.png');
}

.liensInternes li a div.sms{
	background-image: url('img/smartphone.png');
}

.liensInternes li a div.calendar, .esp-adh-encart div.calendar{
	background-image: url('img/enrollment.png');
}

.liensInternes li a div.stats, .esp-adh-encart div.stats{
	background-image: url('img/graph.png');
}

.liensInternes li a div.admin, .esp-adh-encart div.admin{
	background-image: url('img/system.png');
}

.liensInternes li a div.votee{
	background-image: url('img/voting-box.png');
}

.liensInternes li a div.aplbt{
	background-image: url('img/desktop.png');
}

.liensInternes li a div.dossier{
	background-image: url('img/dossier.png');
}

.liensInternes li a div.decouverte{
	background-image: url('img/decouverte.png');
}

.liensInternes li a div.infospersos, .esp-adh-encart div.infospersos{
	background-image: url('img/compte.png');
}

.liensInternes li a div.enfants, .esp-adh-encart div.enfants{
	background-image: url('img/boy.png');
}

.liensInternes li a div.inscriptions, .esp-adh-encart div.inscriptions{
	background-image: url('img/inscription.png');
}

.liensInternes li a div.photo{
	background-image: url('img/picture.png');
}

.liensInternes li a div.carte{
	background-image: url('img/map.png');
}

.liensInternes li a div.histoire{
	background-image: url('img/histoire.png');
}

.liensInternes li a div.compta, .esp-adh-encart div.compta{
	background-image: url('img/compta.png');
}

.liensInternes li a div.tente, .esp-adh-encart div.tente{
	background-image: url('img/camping.png');
}

.liensInternes li a div.facture, .esp-adh-encart div.facture{
	background-image: url('img/facture-dachat.png');
}

.liensInternes li a div.paiementenligne{
	background-image: url('img/credit-card.png');
}

.liensInternes li a div.transaction{
	background-image: url('img/lending.png');
}

.liensInternes li a p{
	margin:auto 0px;
	font-weight: bold;
}

/* Recaps et listes adhérents*/
#responsables li{
	padding-bottom: 1em;
}

.etatadh{
	margin-right: 0.5em;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	display: inline-block;
}

.etatadh.payable{
	background-color: red;
}

.etatadh.aprendre{
	background-color: orange;
}

.etatadh.prise{
	background-color: green;
}

.etatadh.inexistante{
	background-color: lightgray;
}

.etatadh.check{
	background-color: purple;
}

.recapinscriptions{
	margin-top: 1em;
}

.propmodif{
	color: purple;
}

/* Albums */
.album{
	padding: 5px;
	width: 100%;
}

.album:hover{
	background-color: #dcdcdc;
}

.album a{
	color: black;
	display: flex;
	align-items: center;
	width: 100%;
}

.album a:hover{
	text-decoration: none;
}

.album img.album-miniature{
	display: block;
	width: 200px;
	height: max-content;
	margin-right: 10px;
}

#galerie{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#galerie img{
	display: block;
	margin: 5px;
}

.pswp{
	z-index: 4000;
}

.pagination{
	font-size: 1.5em;
	width: 100%;
	text-align: center;
	display: flexbox;
}

.pagination a{
	border-radius: 3px;
	border: solid black 1px;
	padding:4px;
	background-color: #FB0352;
	color: white;
	font-weight: bold;
}

.pagination a:hover{
	background-color: #B90352;
	text-decoration: none;
}

.gestionphoto{
	margin-top: 5px;
}

.gestionphoto img.miniature{
	width: 100px;
	margin-right: 5px;
}

.gestionphoto img.rotate-icon{
	height: 30px;
}

.gestionphoto img.delete-icon{
	height: 30px;
}

/* Compta */
.prixvalid, .prixvalid a{
	color: green;
}

.prixvalid a:hover{
	color: darkgreen;
}

.prixnovalid, .prixnovalid a{
	color: red;
}

.prixnovalid a:hover{
	color: darkred;
}

/* Tentes */
.td-photo-tente{
	width: 200px;
}

.photo-tente{
	max-width: 200px;
	background-color: white;
	border: double 1px black;
	outline: double 1px gray;
	border-radius: 10px;
	outline-offset: -10px;
	padding: 8px;
}

.etat-tente{
	border-radius: 5px;
	padding: 5px;
	color: white;
}

.etat-tente.neuf{
	background-color: green;
}

.etat-tente.bon{
	background-color: limegreen;
}

.etat-tente.passable{
	background-color: orange;
}

.etat-tente.mauvais{
	background-color: red;
}

.etat-tente.indisponible{
	background-color: mediumpurple;
}

@media screen and (max-width:640px){
	header{
		padding:0px
	}
	
	header img{
		display: none;	
	}
	
	header{
		background-image: url('img/logo.png');
		background-repeat: no-repeat;
		background-color: transparent;
		float: none;
		width: 100%;
		background-position: center center;
		background-size: contain;
		height:30vw;
		margin:10px 0px;
	}
	
	nav{
		background-color: #1fa0c8;
		flex-direction:column;
		padding:5px;
		height: auto;
		position: static;
	}
	
	nav ul{
		width: 100%;
		flex-wrap: wrap;	
	}
	
	nav ul li{
		display: inline;
		box-shadow: 0px 0px 0px;
	}
	
	nav ul li a{
		padding: 10px;
		color:white;
	}
	
	#content{
		width:100%;
		float: none;
		padding-bottom: 30px;
	}
	
	#aside{
		width:96%;
		float: none;
	}
	
	.album a{
		flex-direction:column-reverse;
		align-items: flex-start;
	}
	
	.album a img.album-miniature{
		margin: auto;
	}
	
	table.responsive thead{display: none;}
	
	table.responsive tr{position: relative;}
	
	table.responsive td{
		display: block;
	}
	
	table.responsive td:before{
		content: attr(data-label);
	}
	
	table.responsive td.tablecount{
		display: inline;
		vertical-align: baseline;
		font-size: 1.5em;	
		font-weight: bold;
	}
	
	table.responsive td.tableentity{
		display: inline;
	}
	
	table.responsive td.tabledel{
		position: absolute;
		right: 0px;
		top: 0px;	
	}
}