@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: 'Gilgongo';
	src: url('../fonts/gilgongo.eot');
	src: local('☺'),
		url('../fonts/gilgongo.eot?#iefix') format('embedded-opentype'),
		url('../fonts/gilgongo.woff') format('woff'),
		url('../fonts/gilgongo.otf') format('opentype'),
		url('../fonts/gilgongo.svg#Gilgongo') format('svg');
	font-weight: normal;
	font-style: normal;
}

header {
	background-color: #eeeade;
	height: 50px;
	margin-bottom: 20px;
}

#loader-accueil {
	width: 100vw;
	height: 35vh;
	line-height: 35vh;
	text-align: center;
}

/*Transition commencer*/
	#accueil {
		padding: 0px;
	}
	
	#mini-logo,
	#content {
		display: none;
		opacity: 0;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
	}
	
	#img-accueil,
	#txt-accueil,
	#btn-commencer {
		display: none;
		opacity: 0;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
	}

/*Logo et mini-logo*/
	#fond-logo {
		background-color: #eeeade;
		border-bottom-left-radius: 20px;
		border-bottom-right-radius: 20px;
		max-width: 250px;
		margin-top: -20px;
	}
	
	#fond-logo > img {
		opacity: 0;
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;

		width: 150px;
		margin-left: 0px;
		margin-top: -50px;	
	}
	
	#titre-logo > h1 {
		color: #547048;
		margin-top: 10px;
		margin-left: -98px;
		font-size: 36px;
	}
	
	h1 > small{
		color: #a3b821;
	}
	
	#mini-logo {
		position: absolute;
		background-color: #eeeade;
		border-radius: 0px 0px 10px 10px;
		max-width: 250px;
		height: 70px;
	}
	
	#fond-mini-logo {
		text-align: right;
	}
	
	#fond-mini-logo > img {
		width: 80px;
	}
	
	#titre-mini-logo > h1 {
		color: #547048;
		margin-top: 15px;
		margin-left: -15px;
		font-size: 24px;
	}

/*Bouton page d'accueil*/
	#btn-commencer > .btn-primary {
		font-family: Gilgongo, Arial, Helvetica, sans-serif;
		font-weight: normal;
		font-size: 16px;
		color: #4c3f37;
		background-color: #a3b821;
		border: none;
		margin: 1px 0px 0px 5px
	}
	
	#btn-commencer > .btn-primary:hover {
		font-size: 18px;
		margin: 0px;
	}

/*Boutons header*/
	#btn-accueil {
		position: absolute;
		background-color: #eae587;/*rgba(76, 63, 55, 0.4);*/
		border: none;
		border-radius: 0px 0px 10px 10px;
		padding-top: 30px;
		height: 60px; 
	}
	
	#btn-connexion {
		position: absolute;
		background-color: #a3b821; /*#98b48c; /*rgba(76, 63, 55, 0.6);*/
		border: none;
		border-radius: 0px 0px 10px 10px;
		padding-top: 30px;
		height: 60px; 
	}
	
	#btn-contact {
		position: absolute;
		background-color: #547048; /*rgba(76, 63, 55, 0.8);*/
		border: none;
		border-radius: 0px 0px 10px 10px;
		padding-top: 30px;
		height: 60px; 
	}
	
	#btn-info {
		position: absolute;
		background-color: #4c3f37;
		border: none;
		border-radius: 0px 0px 10px 10px;
		padding-top: 30px;
		height: 60px; 
	}
	
	#btn-accueil:hover,
	#btn-connexion:hover,
	#btn-contact:hover,
	#btn-info:hover {
		padding-top: 40px;
		height: 70px; 
	}

/* Base */
body {}
ul, ol, dl {padding: 0; margin: 0;}
h1, h2, h3, h4, h5, h6, p {padding: 0; margin: 0;}
h1 {font-family: Gilgongo, Arial, Helvetica, sans-serif; font-weight: normal; color: #4c3f37;}
h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-style: italic; color: #4c3f37;}
h3, li {font-family: Gilgongo, Arial, Helvetica, sans-serif; font-weight: normal; color: #4c3f37;}
h4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-style: italic; color: #4c3f37;}
td, p, label {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; color: #4c3f37;}
a, img{border: none;}

/* Photo et mini*/
#photo {max-height: 553px;}
#photo img {margin: 10px 0px 10px 0px;}
#mini {height: 90px; margin-bottom: 10px; padding: 0px 10px 0px 10px;}
#mini .mCSB_container{margin-bottom: 20px;}
#mini li:first-child {margin-left: 0px;}
#mini li {margin-left: 10px; display: inline;}
#liste-mini {max-width: none;}

/* Pagination photos */
#page {margin-bottom: 10px;}
#page kbd {font-size: 14px; background-color: #4c3f37;}
#page-bouton {position: relative; text-align: center; width: 84px; height: 20px;}
.prec, .suiv {background-image: url(mCSB_buttons.png); background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)";}
.prec:hover, .suiv:hover {opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)";}
.prec:active, .suiv:active {opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)";}
.prec {position: absolute; display: block; width: 20px; height: 16px; overflow: hidden; margin: 2px 0px 2px 0px; background-position: -100px -112px; cursor: pointer; left: 0; top: 0;}
.suiv {position: absolute; display: block; width: 20px; height: 16px; overflow: hidden; margin: 2px 0px 2px 0px; background-position: -100px -128px; cursor: pointer; right: 0; top: 0;}

/*Liste des plantes*/
	#liste-loader {
		display: none;
		text-align: center;
	}
	
	#liste-vide {
		width: 95%;
		display: none;
		background-color: rgba(238, 234, 222, 0.4);
		border-radius: 10px;
		text-align: center;
	}
	
	#liste-vide > div {
		width: 75%;
		vertical-align: middle;
		display: inline-block;
		line-height: normal;
		text-align: center;
	}

	#liste-plantes {
		margin-bottom: 0px;
	}
	
	a.list-group-item:hover,
	a.list-group-item:focus {
		border-color: #d5c6b0;
	}
	
	.list-group-item.active h3,
	.list-group-item.active h4 {
		color: #eeeade;
	}
	
#carte {
	margin: 10px 0px 0px 0px;
	width: 300px;
	text-align: center;
	width: 100%;
}

#texte-md {
	min-height: 100px;
	margin-bottom: 10px;
}

#texte-xs {
	min-height: 150px;
	margin-bottom: 10px;	
}

#nom-fr-md,
#nom-fr-xs {
	margin-bottom: 5px;
}

#nom-lt-md,
#nom-lt-xs {
	margin-bottom: 10px;
}

/*Selection des critères*/
	.nav a{
		text-align: center;
	}
	
	.panel {
		border: none;
		margin: 10px 0px 10px 10px;
	}
	
	#sidenav > li a {
		margin-left: 20px;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}
	
	#sidenav > li.active a,
	#sidenav > li a:hover {
		margin-left: 0px;
		padding-right: 15px;
		padding-left: 15px;
	}
	
	#sidenav .close {
		display: none;
	}
	
	.nav-pills > li > a,
	.nav-pills > li > a:focus {
		padding: 5px;
		color: #4c3f37;
	}
	
	.nav-pills > li.active > a,
	.nav-pills > li.active > a:hover {
		padding: 5px;
		color: #4c3f37;
		background-color: #d5c6b0;
	}
	
	.nav-pills > li > a:hover {
		padding: 5px;
		color: #4c3f37;
		background-color: #eae587;
	}
	
	.nav-pills > li.active {
		margin-top: 5px;
		margin-bottom: 5px;
	}
	
	.nav-pills > li > a:hover {
		cursor: pointer;
	}
	
	.vig-lig {
		display: none;
	}
	
	.vig-img {
		padding: 5px 0px 5px 10px;
	}
	
	.vig-img > img {
		background-color: #fff;
		border: none;/*1px solid #4c3f37;*/
	}
	
	.vig-txt {
		padding-top: 15px;
	}

/*Boite de dialogue*/
	.modal-header {
		background-color: #eeeade;
		border-bottom-color: #eeeade;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	.modal .btn {
		font-family: Gilgongo, Arial, Helvetica, sans-serif;
		font-weight: normal;
		margin: 0px;
		color: #4c3f37;
		background-color: #eeeade;
		border-color: none;
		text-align: center;
	}
	
	.modal .btn:hover,
	.modal .btn:focus,
	.modal .btn:active {
		background-color: #d5c6b0;
	}
	
	.modal label {
		text-align: right;
		font-size: 12px;
		padding-top: 5px;
	}
	
	.modal .tab-pane {
		margin-top: 10px;
	}
	
	#boite div {
		text-align: center;
	}
	
	#boite a {
		cursor: pointer;
	}
	
	#boite a > img {
		border-radius: 3px;
		margin: 5px;
		border: 2px solid #eeeade;
	}
	
	#boite a > img:hover {
		background-color: #eeeade;
		border: 2px solid #d5c6b0;
	}

	.plus {
		position: absolute;
		cursor: pointer;
		background-color: transparent;
		border: 0;
		-webkit-appearance: none;
		
		background-image: url("../images/plus.png");
		background-repeat: no-repeat;
		background-size: 100%;
		height: 20px;
		width: 20px;
		right: 0px;
		bottom: 0px;
	}

/*Bouton fermer*/
	.close {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #4c3f37;
		opacity: 0.6;
		filter: alpha(opacity=60);
	}
	
	.close:hover,
	.close:focus {
		color: #4c3f37;
		opacity: 1;
		filter: alpha(opacity=100);
	}

/*Dessin des département en SVG*/
	.departement {
		stroke: #fff;
		stroke-width: 1;
	}

/*Boutons de tri et de recherche */
	#tri {
		margin: 10px 0px 0px 0px;
	}
	
	#tri .btn {
		font-size: 16px;
		padding: 8px 12px 4px 12px;
		font-weight: normal;
		color: #4c3f37;
		background-color: #eeeade;
	}
	
	#tri .btn:hover,
	#tri .btn:focus {
		background-color: #d5c6b0;
	}
	
	.dropdown-menu > li {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
	
	.dropdown-menu > li > a:hover,
	.dropdown-menu > li > a:focus {
		text-decoration: none;
		color: #4c3f37;
		background-color: #d5c6b0;
	}
	
	.dropdown-menu > .active > a,
	.dropdown-menu > .active > a:hover,
	.dropdown-menu > .active > a:focus {
		color: #eeeade;
		text-decoration: none;
		outline: 0;
		background-color: #4c3f37;
	}

@media screen and (max-width:400px) {
	@-ms-viewport{width: 320px;}
}

@-webkit-viewport{width:device-width}
@-moz-viewport{width:device-width}
@-ms-viewport{width:device-width}
@-o-viewport{width:device-width}
@viewport{width:device-width}

@media (max-width: 819px) {
	#page {margin-bottom: 5px;}
}

@media (max-width: 1139px) {
	h1, .panel-title {font-size: 14px;}
	h2 {font-size: 13px;}
	h3, li {font-size: 12px;}
	h4 {font-size: 11px;}
	td, p {font-size: 11px;}
	
	#liste, #liste-loader, #liste-vide {margin: 0px; min-width: 300px; min-height: 200px;}
}
@media (min-width: 1140px) {
	h1, .panel-title {font-size: 15px;}
	h2 {font-size: 14px;}
	h3, li {font-size: 13px;}
	h4 {font-size: 12px;}
	td, p {font-size: 11px;}
	
	#liste, #liste-loader, #liste-vide {margin: 10px 0px 0px 0px; min-width: 300px; min-height: 320px;}
}
@media (min-width: 1620px) {
	h1, .panel-title {font-size: 16px;}
	h2 {font-size: 15px;}
	h3, li {font-size: 14px;}
	h4 {font-size: 13px;}
	td, p {font-size: 12px;}
	
	#liste, #liste-loader, #liste-vide {margin: 10px 0px 0px 0px; min-width: 300px; min-height: 420px;}
}